/* ==========================================================================
   Quiet Data v203: "Premium (Apple clean)" design.
   Loaded after the other design files and ONLY switched on when Admin > Site control > Site design is set to
   "Premium (Apple clean)" (html[data-ui="premium"]). Every rule below starts with html[data-ui="premium"], so with any
   other design chosen this file does nothing at all. liquid.css and liquid-ios.css are switched off for this design, so it
   sits on the Normal design and only changes how things LOOK and FEEL.

   It never changes layout structure, text, prices, scripts, payments or what any button does.
   Apple's approach, in short: content first; one calm accent colour; large confident titles; solid grouped surfaces on a
   soft grey canvas instead of glass; hairline separators instead of heavy borders; roomy spacing; 44px+ touch targets;
   small, quick, springy press feedback (CSS transform only, off for "reduce motion").
   Fonts: the system font on Apple devices (SF Pro), Inter everywhere else.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
html[data-ui="premium"] body{
  --pm-bg:#f2f2f7;--pm-card:#fff;--pm-fill:#f2f2f7;--pm-fill2:#e9e9ee;
  --pm-label:#1c1c1e;--pm-label2:#6c6c70;--pm-label3:#8e8e93;
  --pm-sep:rgba(60,60,67,.14);--pm-sep2:rgba(60,60,67,.08);
  --pm-blue:#007aff;--pm-blue-d:#0062cc;--pm-blue-t:rgba(0,122,255,.1);
  --pm-r:20px;--pm-r2:14px;
  --pm-sh:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --pm-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",system-ui,sans-serif}

html[data-ui="premium"] body.guest-mode{
  font-family:var(--pm-font);color:var(--pm-label);background:var(--pm-bg);background-image:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-ui="premium"] body.guest-mode button,
html[data-ui="premium"] body.guest-mode input,
html[data-ui="premium"] body.guest-mode select,
html[data-ui="premium"] body.guest-mode textarea{font-family:var(--pm-font)}

/* ---------- 2. top bar: calm, translucent, hairline underneath (like a native navigation bar) ---------- */
html[data-ui="premium"] body.guest-mode .gx-header{
  background:rgba(249,249,251,.86);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:.5px solid var(--pm-sep);box-shadow:none}
html[data-ui="premium"] body.guest-mode .gx-brand span{font-weight:650;letter-spacing:-.02em;color:var(--pm-label)}
html[data-ui="premium"] body.guest-mode .gx-brand img{border-radius:10px;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
/* Menu: Apple's "tinted" button (soft blue fill, blue label) */
html[data-ui="premium"] body.guest-mode .gx-menu-btn{
  background:var(--pm-blue-t);color:var(--pm-blue);border:0;box-shadow:none;border-radius:999px;font-weight:600;letter-spacing:-.01em;min-height:40px}
html[data-ui="premium"] body.guest-mode .gx-menu-btn svg{stroke:var(--pm-blue)}
/* the pulsing attention ring around Menu is a glow effect; the calm design leaves it out (the small notification dot stays) */
html[data-ui="premium"] body.guest-mode .gx-menu-btn::before{display:none;animation:none}

/* ---------- 3. hero: a large title on the canvas, no heavy gradient block ---------- */
html[data-ui="premium"] body.guest-mode .gx-hero{
  background:transparent;background-image:none;color:var(--pm-label);border-radius:0;box-shadow:none;text-align:left;padding:30px 20px 10px}
html[data-ui="premium"] body.guest-mode .gx-hero::before,
html[data-ui="premium"] body.guest-mode .gx-hero::after{display:none}
html[data-ui="premium"] body.guest-mode .gx-hero-pill{
  background:var(--pm-fill2);color:var(--pm-label2);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-size:12.5px;font-weight:600;padding:7px 14px}
html[data-ui="premium"] body.guest-mode .gx-hero h1{
  margin:16px 0 8px;font-size:clamp(32px,9vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--pm-label)}
html[data-ui="premium"] body.guest-mode .gx-hero p{margin:0;max-width:none;font-size:17px;line-height:1.45;color:var(--pm-label2);letter-spacing:-.01em}

/* section titles read like Apple's grouped-list headers */
html[data-ui="premium"] body.guest-mode .gx-label{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--pm-label2)}

/* ---------- 4. cards: solid white on the grey canvas, rounded, hairline-soft depth ---------- */
html[data-ui="premium"] body.guest-mode .gx-acc,
html[data-ui="premium"] body.guest-mode .gx-feat,
html[data-ui="premium"] body.guest-mode .gx-latest,
html[data-ui="premium"] body.guest-mode .surface,
html[data-ui="premium"] body.guest-mode .card-form,
html[data-ui="premium"] body.guest-mode .verification-card,
html[data-ui="premium"] body.guest-mode .track-card,
html[data-ui="premium"] body.guest-mode .p-card,
html[data-ui="premium"] body.guest-mode .net-card,
html[data-ui="premium"] body.guest-mode .vc-card,
html[data-ui="premium"] body.guest-mode .mx-row{
  background:var(--pm-card);background-image:none;border:0;border-radius:var(--pm-r);
  box-shadow:var(--pm-sh);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-ui="premium"] body.guest-mode .gx-acc-head{background:transparent;letter-spacing:-.015em}
html[data-ui="premium"] body.guest-mode .gx-acc-head b,
html[data-ui="premium"] body.guest-mode .gx-acc-head strong{font-weight:650;color:var(--pm-label)}
html[data-ui="premium"] body.guest-mode .gx-acc-head small{color:var(--pm-label2)}
html[data-ui="premium"] body.guest-mode .gx-acc-cta,
html[data-ui="premium"] body.guest-mode .gx-acc-cta span{color:var(--pm-blue);font-weight:600;letter-spacing:-.01em}
html[data-ui="premium"] body.guest-mode .gx-acc-cta svg{stroke:var(--pm-blue)}
html[data-ui="premium"] body.guest-mode .gx-tag{border-radius:14px;box-shadow:none;letter-spacing:-.01em}
html[data-ui="premium"] body.guest-mode .vc-tcard{background:var(--pm-card);background-image:none;border:0;border-radius:var(--pm-r);box-shadow:var(--pm-sh);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-ui="premium"] body.guest-mode .gx-acc-body,
html[data-ui="premium"] body.guest-mode .gx-bundles{border-color:var(--pm-sep2)}
html[data-ui="premium"] body.guest-mode .gx-feat h3,
html[data-ui="premium"] body.guest-mode .gx-feat b{font-weight:650;letter-spacing:-.015em;color:var(--pm-label)}
html[data-ui="premium"] body.guest-mode .gx-feat p{color:var(--pm-label2)}

/* ---------- 5. bundle tiles: quiet white tiles, one clear blue action ---------- */
html[data-ui="premium"] body.guest-mode .gx-bundle,
html[data-ui="premium"] body.guest-mode .gx-bundle.net-mtn,
html[data-ui="premium"] body.guest-mode .gx-bundle.net-airteltigo,
html[data-ui="premium"] body.guest-mode .gx-bundle.net-telecel{
  background:var(--pm-fill);background-image:none;border:0;border-radius:var(--pm-r2);box-shadow:none;padding:16px 14px 14px;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),background-color .15s}
html[data-ui="premium"] body.guest-mode .gx-bundle:hover{transform:none;border:0}
html[data-ui="premium"] body.guest-mode .gx-bundle b{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--pm-label)}
html[data-ui="premium"] body.guest-mode .gx-bundle span{color:var(--pm-label2)}
html[data-ui="premium"] body.guest-mode .gx-bundle strong,
html[data-ui="premium"] body.guest-mode .gx-bundle.net-mtn strong{color:var(--pm-label);font-weight:650;letter-spacing:-.01em;font-size:16px}
html[data-ui="premium"] body.guest-mode .gx-bundle em,
html[data-ui="premium"] body.guest-mode .gx-bundle.net-mtn em{
  background:var(--pm-blue);background-image:none;color:#fff;box-shadow:none;border:0;border-radius:999px;padding:7px 15px;font-weight:600;letter-spacing:-.01em;font-size:13px}

/* ---------- 6. buttons everywhere on the guest pages: filled blue, 50px high, soft corners ---------- */
html[data-ui="premium"] body.guest-mode .btn,
html[data-ui="premium"] body.guest-mode .co-btn,
html[data-ui="premium"] body.guest-mode .vc-btn,
html[data-ui="premium"] body.guest-mode .mx-btn{
  background:var(--pm-blue);background-image:none;color:#fff;border:0;box-shadow:none;border-radius:14px;min-height:50px;font-weight:600;letter-spacing:-.01em}
html[data-ui="premium"] body.guest-mode .co-btn.ghost,
html[data-ui="premium"] body.guest-mode .btn.ghost,
html[data-ui="premium"] body.guest-mode .btn.secondary{background:var(--pm-blue-t);color:var(--pm-blue)}
html[data-ui="premium"] body.guest-mode .btn[disabled],
html[data-ui="premium"] body.guest-mode .co-btn[disabled]{background:var(--pm-fill2);color:var(--pm-label3)}

/* ---------- 7. checkout and pop-up sheets ---------- */
html[data-ui="premium"] .co-overlay{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-ui="premium"] .co-modal{
  --text:#1c1c1e;--muted:#6c6c70;--line:rgba(60,60,67,.14);--card2:#f2f2f7;
  background:#fff;background-image:none;color:#1c1c1e;border:0;border-radius:28px;padding:26px 22px;
  box-shadow:0 24px 80px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.06);font-family:var(--pm-font)}
html[data-ui="premium"] .co-modal h2,html[data-ui="premium"] .co-modal h3{font-weight:700;letter-spacing:-.025em;color:#1c1c1e}
html[data-ui="premium"] .co-close{background:#e9e9ee;color:#3a3a3c}
html[data-ui="premium"] .co-chip{background:#f2f2f7;border:0;border-radius:16px;box-shadow:none}
html[data-ui="premium"] .co-chip small,html[data-ui="premium"] .co-sum span{color:#6c6c70}
html[data-ui="premium"] .co-chip b,html[data-ui="premium"] .co-chip strong,html[data-ui="premium"] .co-modal .total b{color:#1c1c1e;font-weight:700;letter-spacing:-.02em}
html[data-ui="premium"] .co-modal input,html[data-ui="premium"] .co-modal select{
  background:#f2f2f7;border:1.5px solid transparent;border-radius:12px;color:#1c1c1e;min-height:48px;font-size:16px;box-shadow:none}
html[data-ui="premium"] .co-modal input:focus,html[data-ui="premium"] .co-modal select:focus{
  outline:0;border-color:var(--pm-blue);background:#fff;box-shadow:0 0 0 4px rgba(0,122,255,.14)}
html[data-ui="premium"] .co-steps{color:#6c6c70}
html[data-ui="premium"] .co-steps span{border-color:rgba(60,60,67,.22)}
html[data-ui="premium"] .co-steps .now{color:#1c1c1e}
html[data-ui="premium"] .co-steps .now span{background:var(--pm-blue);background-image:none;border-color:transparent;color:#fff}
html[data-ui="premium"] .co-steps .done span{background:rgba(0,122,255,.12);border-color:transparent;color:var(--pm-blue)}
html[data-ui="premium"] .co-modal .co-err{color:#d70015;font-weight:500}
html[data-ui="premium"] .co-btn{background:var(--pm-blue);background-image:none;color:#fff;border:0;border-radius:14px;box-shadow:none;min-height:50px;font-weight:600}

/* ---------- 8. menu drawer, footer and the Ask button ---------- */
html[data-ui="premium"] body.guest-mode .gx-drawer{
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-left:.5px solid var(--pm-sep)}
html[data-ui="premium"] body.guest-mode .gx-drawer-scrim{background:rgba(0,0,0,.28)}
html[data-ui="premium"] body.guest-mode .gx-foot{background:transparent;background-image:none;border-top:.5px solid var(--pm-sep);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--pm-label2)}

/* ---------- 9. press feedback: small, quick, springy (transform only) ---------- */
@media (prefers-reduced-motion:no-preference){
  html[data-ui="premium"] body button,html[data-ui="premium"] body .gx-acc-head,html[data-ui="premium"] body a.gx-link{
    transition:transform .16s cubic-bezier(.2,.9,.3,1.25),opacity .12s}
  html[data-ui="premium"] body button:active:not([disabled]){transform:scale(.97)}
  html[data-ui="premium"] body .gx-bundle:active{transform:scale(.965)}
}
html[data-ui="premium"] body *:focus-visible{outline:3px solid rgba(0,122,255,.45);outline-offset:2px}

/* ---------- 10. signed-in app: same calm feel on the existing dark colours (no new colours, no layout change) ---------- */
html[data-ui="premium"] body:not(.guest-mode){font-family:var(--pm-font);-webkit-font-smoothing:antialiased}
html[data-ui="premium"] body:not(.guest-mode) button,
html[data-ui="premium"] body:not(.guest-mode) input,
html[data-ui="premium"] body:not(.guest-mode) select{font-family:var(--pm-font)}
html[data-ui="premium"] body:not(.guest-mode) h1,
html[data-ui="premium"] body:not(.guest-mode) h2{letter-spacing:-.025em}
@media (prefers-reduced-motion:no-preference){
  html[data-ui="premium"] body:not(.guest-mode) .tab:active,
  html[data-ui="premium"] body:not(.guest-mode) .btn:active{transform:scale(.97)}
}

/* ---------- 11. Android: no live blur (keeps scrolling smooth), more solid bars so text stays crisp ---------- */
html.is-android[data-ui="premium"] body.guest-mode .gx-header,
html.is-android[data-ui="premium"] body.guest-mode .gx-drawer{background:#fbfbfd;-webkit-backdrop-filter:none;backdrop-filter:none}
html.is-android[data-ui="premium"] .co-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.45)}