/* ===========================================================
   BrokenGuitar — bgsb-style.css (v1.1)
   Contains: standard + glassy + ios + landing variants + dark mode
   Scoped with .bgsb- prefix to avoid conflicts
   =========================================================== */

/* ---------- BASE ---------- */
.bgsb-wrapper { font-family: inherit; }

/* Buttons container */
.bgsb-buttons {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
}

/* ---------- Shared button core ---------- */
.bgsb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: .15s ease;
  border: 1px solid rgba(0,0,0,0.08);
}

/* icon/text variations */
.bgsb-btn-icon { width: 48px; height: 48px; font-size: 22px; }
.bgsb-btn-text { padding: 12px 20px; }
.bgsb-btn-download { padding: 10px 16px; gap: 8px; }
.bgsb-download-icon svg { width: 18px; height: 18px; }

/* ---------- STANDARD THEME (default) ---------- */
.bgsb-variant-standard .bgsb-btn {
  background: #f4f6ff;
  color: #0b2a42;
  box-shadow: 0 3px 8px rgba(20,60,120,0.10);
}
.bgsb-variant-standard .bgsb-btn:hover {
  background: #e8edff;
  color: #003a78;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(20,60,120,0.16);
}

/* ---------- GLASSY / TRANSPARENT THEME ---------- */
.bgsb-variant-glassy .bgsb-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  color: #f2f7ff;
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(3,22,45,0.25);
}
.bgsb-variant-glassy .bgsb-btn-icon,
.bgsb-variant-glassy .bgsb-btn-download { background: rgba(255,255,255,0.02); }
.bgsb-variant-glassy .bgsb-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(3,22,45,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
}

/* ---------- iOS Style (soft, rounded, subtle blur) ---------- */
.bgsb-variant-ios .bgsb-btn {
  background: linear-gradient(180deg,#ffffff, #f5f9ff);
  color: #03263b;
  border-radius: 20px;
  border: none;
  box-shadow: 0 10px 30px rgba(10,40,80,0.08);
}
.bgsb-variant-ios .bgsb-btn-icon { width: 54px; height: 54px; font-size: 24px; border-radius: 16px; }
.bgsb-variant-ios .bgsb-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(10,40,80,0.12);
}

/* ---------- Landing mini-popup variant (more prominent, optionally auto-open) ---------- */
.bgsb-variant-landing .bgsb-btn {
  background: linear-gradient(135deg, #007af0, #0061b0);
  color: #fff;
  box-shadow: 0 10px 30px rgba(4,102,204,0.28);
  border: none;
}
.bgsb-variant-landing .bgsb-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(4,102,204,0.34);
}

/* ---------- Modal core ---------- */
.bgsb-modal[hidden] { display: none; }
.bgsb-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}
.bgsb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}

/* modal inner baseline */
.bgsb-modal-inner {
  position: relative;
  z-index: 2;
  width: min(560px, 96%);
  background: #fff;
  border-radius: 20px;
  padding: 34px;
  box-shadow:
     0 18px 48px rgba(0,0,0,0.22),
     0 0 40px rgba(0,120,255,0.06);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}

/* Close button */
.bgsb-modal-close {
  position: absolute;
  left: 16px;
  top: 12px;
  width: 38px;
  height: 38px;
  background: #f1f3f7;
  border-radius: 50%;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #444;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  transition: .12s;
}
.bgsb-modal-close:hover { background: #e3e6ee; }

/* text */
.bgsb-modal-title { margin: 0 0 14px 0; font-size: 20px; font-weight: 700; color: #0b3b52; }
.bgsb-modal-body { font-size: 15px; color: #222; }
.bgsb-modal-body ul { margin: 12px 0 18px 22px; line-height: 1.85; }

/* CTA area (centered) */
.bgsb-cta { display:flex; flex-direction:column; align-items:center; text-align:center; }
.bgsb-primary-btn {
  display:inline-block;
  margin-top:12px;
  padding:13px 22px;
  background: linear-gradient(135deg, #0080e5, #005bb5);
  color:#ffffff !important;
  border-radius:16px;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(0,118,214,0.28);
  transition:.15s;
}
.bgsb-primary-btn:hover { transform: translateY(-2px); box-shadow:0 14px 28px rgba(0,118,214,0.35); }

.bgsb-login-note { margin-top:14px; font-size:14px; color:#333; text-align:center; }
.bgsb-login-link { color:#006CB9; font-weight:600; text-decoration:underline; }

/* ---------- Additional styles for glassy modal ---------- */
.bgsb-variant-glassy .bgsb-modal-inner {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  color: #eef6ff;
  box-shadow: 0 18px 50px rgba(2,12,28,0.6);
}
.bgsb-variant-glassy .bgsb-modal-title { color: #bfe0ff; }

/* ---------- iOS-like modal tweaks ---------- */
.bgsb-variant-ios .bgsb-modal-inner {
  border-radius: 28px;
  padding: 28px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow: 0 30px 60px rgba(12,30,60,0.12);
}
.bgsb-variant-ios .bgsb-modal-title { color: #053358; }
.bgsb-variant-ios .bgsb-primary-btn {
  border-radius: 20px;
  padding: 14px 24px;
  box-shadow: 0 14px 36px rgba(6,40,90,0.12);
}

/* ---------- landing-specific: bigger hero CTA in modal ---------- */
.bgsb-variant-landing .bgsb-modal-inner {
  padding: 36px;
  background: linear-gradient(135deg,#ffffff,#f7fbff);
  box-shadow: 0 30px 80px rgba(2,50,120,0.16);
}
.bgsb-variant-landing .bgsb-modal-title {
  font-size:22px;
  margin-bottom:8px;
}
.bgsb-variant-landing .bgsb-modal-body ul { margin-left:26px; font-weight:600; }

/* ---------- Responsive: make buttons larger on small screens ---------- */
@media (max-width: 480px) {
  .bgsb-btn { font-size:16px; padding:14px 20px; border-radius:16px; }
  .bgsb-btn-icon { width:54px; height:54px; font-size:24px; }
  .bgsb-btn-text { padding:12px 16px; }
}

/* ---------- Dark mode support ---------- */
@media (prefers-color-scheme: dark) {

  /* baseline */
  .bgsb-btn { border-color: rgba(255,255,255,0.06); color: #e6eef9; }

  /* standard -> darker */
  .bgsb-variant-standard .bgsb-btn { background:#232833; color:#e8f4ff; box-shadow:0 6px 18px rgba(0,0,0,0.5); }
  .bgsb-variant-standard .bgsb-btn:hover { background:#2b3440; color:#fff; }

  /* glassy already darkish */
  .bgsb-variant-glassy .bgsb-btn { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color: #f2f9ff; }
  .bgsb-variant-glassy .bgsb-modal-inner { background: rgba(12,18,28,0.72); }

  /* ios */
  .bgsb-variant-ios .bgsb-modal-inner { background:#0f1722; color:#e6eef8; }

  /* landing */
  .bgsb-variant-landing .bgsb-btn { box-shadow: 0 14px 36px rgba(1,80,160,0.32); }

  .bgsb-modal-backdrop { background: rgba(0,0,0,0.7); }
  .bgsb-modal-inner { box-shadow: 0 30px 80px rgba(0,0,0,0.7); }

  .bgsb-primary-btn { box-shadow: 0 12px 30px rgba(3,132,255,0.45); }
  .bgsb-login-link { color: #6fb7ff; }
}

/* ---------- small accessibility tweaks ---------- */
.bgsb-btn:focus { outline: 3px solid rgba(0,120,215,0.14); outline-offset: 2px; }

/* make sure modal content RTL for Persian */
.bgsb-wrapper, .bgsb-modal-inner { direction: rtl; text-align: right; }