/* UI Pack v7 — Stronger dark+purple, glass, big H1, purple CTAs & options */

:root{
  --bg0:#05060a;
  --bg1:#0a0a16;
  --glassA: rgba(255,255,255,.07);
  --glassB: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.16);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --purple: #c084fc;
  --pink: #f472b6;
  --purple2:#8b5cf6;
}

html, body{ height:100%; }

body{
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(192,132,252,.35), transparent 62%),
    radial-gradient(780px 420px at 82% 72%, rgba(244,114,182,.28), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

.card{
  background:
    radial-gradient(520px 200px at 20% 0%, rgba(192,132,252,.12), transparent 62%),
    linear-gradient(180deg, var(--glassA), var(--glassB));
  border: 1px solid var(--stroke);
  box-shadow: 0 26px 90px rgba(0,0,0,.60);
  backdrop-filter: blur(12px);
  position: relative;
}

.h1{ font-size: clamp(36px, 4.4vw, 60px); letter-spacing:-0.02em; }
.h2{ color: var(--muted); font-size: 18px; }
.p,.small{ color: var(--muted); }

.input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--text);
}
.input::placeholder{ color: rgba(255,255,255,.46); }

.btn{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--text);
}
.btn:hover{ border-color: rgba(255,255,255,.24); }

.btn.primary{
  color: #0b0b14;
  border: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(340px 120px at 18% 0%, rgba(244,114,182,.42), transparent 66%),
    linear-gradient(180deg, rgba(192,132,252,1), rgba(139,92,246,.78));
}

.optiongrid .option{
  width:100%;
  text-align:left;
  padding: 18px 18px;
  font-size: 20px;
  border-radius: 16px;
  border: 1px solid rgba(192,132,252,.42);
  background:
    radial-gradient(280px 90px at 18% 0%, rgba(244,114,182,.26), transparent 62%),
    linear-gradient(180deg, rgba(192,132,252,.22), rgba(139,92,246,.10));
  color: var(--text);
  transition: transform .08s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.optiongrid .option:hover{
  border-color: rgba(244,114,182,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.40);
}
.optiongrid .option:active{ transform: translateY(1px); }

.option.selected{
  outline: 2px solid rgba(244,114,182,.65);
  box-shadow: 0 0 0 7px rgba(244,114,182,.10);
}

.bar{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
#bar_fill, #pay_bar_fill{
  background: linear-gradient(90deg, rgba(244,114,182,1), rgba(192,132,252,1));
}

.footerlinks a{ color: rgba(255,255,255,.74); }
.footerlinks a:hover{ color: rgba(244,114,182,.95); }

.previewBox{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.previewRow{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.previewLabel{ color: rgba(255,255,255,.72); font-size: 14px; }
.previewStrong{ color: rgba(255,255,255,.95); font-weight: 650; }

@media (max-width:520px){
  .optiongrid .option{ font-size: 18px; padding: 16px 16px; }
}


/* Info page helpers */
.rich h2{font-size:18px;margin:18px 0 8px}
.rich p, .rich li{line-height:1.45}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(160,110,255,.35);background:rgba(160,110,255,.10);color:#e9ecf2;font-size:12px;margin:6px 0 10px}


/* Tap + active states */
button, .btn, .option{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
.btn:active{ transform: translateY(1px); border-color: rgba(244,114,182,.55); }
.option:active{ border-color: rgba(244,114,182,.55); background: rgba(255,255,255,.10); }

/* Product topbar */
.topbar{ display:flex; align-items:center; gap:10px; padding:14px 14px 6px; }
.brandmark{ display:flex; align-items:center; gap:10px; }
.brandmark svg{ width:26px; height:26px; flex:0 0 auto; }
.brandname{ font-weight:700; letter-spacing:.2px; }

/* Switch CTA */
.switchcta{ display:inline-flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px;
  border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); text-decoration:none; color: var(--text);
  box-shadow: 0 18px 60px rgba(0,0,0,.45); }
.switchtrack{ width:56px; height:30px; border-radius:999px; position:relative;
  background: linear-gradient(135deg, rgba(244,114,182,.35), rgba(139,92,246,.25)); border:1px solid rgba(255,255,255,.18); }
.switchknob{ width:24px; height:24px; border-radius:999px; position:absolute; top:2px; left:2px;
  background: linear-gradient(135deg, #f472b6, #8b5cf6); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.switchlabel{ font-weight:700; letter-spacing:.2px; }
.switchcta:active{ transform: translateY(1px); }
.qhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.info{ width:28px; height:28px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--text); font-weight:800; }
.infobox{ position:fixed; inset:0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:18px; z-index:50; }
.infobox_inner{ max-width:520px; width:100%; background: rgba(18,18,30,.92); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:16px; }
.infobox_title{ font-weight:800; margin-bottom:6px; }
.infobox_text{ color: rgba(255,255,255,.82); margin-bottom:14px; }

/* iOS/Safari: ensure background/decor layers don't intercept taps */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
}
.card > *{
  position:relative;
  z-index:1;
}
.dots{ pointer-events:none; }