/* ============================================================
   Royal OTP Platform — GLASSMORPHISM layer  (v1)
   Loaded LAST on every page (after redesign.css). Re-skins surfaces only;
   no markup or logic is touched. Delete the <link> to go back to the flat look.

   READABILITY RULES this file follows (checked by tools/contrast-check.py):
   1. Glass is frosted, not clear: cards are >=62% opaque AND blurred, so the
      colourful background never fights the text.
   2. Body text >= 7:1, muted text / status colours >= 4.5:1 (WCAG AA)
      against the WORST-case background pixel, in BOTH themes.
   3. Menus, sheets, toasts and form fields are near-solid.
   4. Fallbacks: no backdrop-filter support, "reduce transparency" and
      "more contrast" OS settings all switch to solid surfaces.
   ============================================================ */

/* ---------- tokens ---------- */
:root,[data-theme="dark"]{
  /* Royal Glass Blue: brighter indigo-blue page, light frosted cards, cyan accent (matches the reference screenshot) */
  --bg:#2A3472;--bg-solid:#2A3472;
  --card:rgba(24,33,98,.62);--surface:rgba(24,33,98,.52);
  --border:rgba(255,255,255,.28);
  --soft:rgba(255,255,255,.06);--accent-soft:rgba(70,200,245,.22);
  --green-soft:rgba(79,224,165,.16);--amber-soft:rgba(255,200,87,.16);--red-soft:rgba(255,138,128,.16);
  --rcv:var(--accent);--rcv-soft:var(--accent-soft);--rcv-flash:rgba(70,200,245,.30);
  --text:#F8FAFF;--muted:#D3DAF8;--accent:#9BEBFF;
  --green:#5CE8AE;--red:#FFB8B1;--yellow:#FFCF66;--orange:#FFB880;
  --menu-bg:#2A3470;--menu-hover:rgba(155,235,255,.16);
  --glass-blur:blur(18px) saturate(165%);
  --glass-shadow:0 8px 32px rgba(8,12,50,.40),inset 0 1px 0 rgba(255,255,255,.20);
  --field-bg:rgba(14,20,70,.50);--field-border:rgba(255,255,255,.55);
  --pop-bg:#262F6C;
  --nav-bg:rgba(28,38,106,.70);--nav-ink:#F8FAFF;--nav-label:#9BEBFF;--nav-ring:#232C66;--nav-line:rgba(255,255,255,.34);
  --hero-img:linear-gradient(135deg,rgba(70,100,245,.80),rgba(120,84,225,.72));
  --hero-bg:transparent;--hero-fg:#fff;--hero-border:rgba(255,255,255,.30);
  --hero-tile:rgba(255,255,255,.16);--hero-pill:rgba(255,255,255,.20);--hero-line:rgba(255,255,255,.45);
  --hero-ring-bg:rgba(255,255,255,.26);--hero-ring-fg:#fff;
  --hero-btn-bg:#fff;--hero-btn-fg:#1F31C9;--hero-star-bg:#fff;--hero-star-fg:#1F31C9;
  --mesh:radial-gradient(60% 45% at 12% 8%,rgba(112,96,220,0.42),transparent 70%),
    radial-gradient(55% 40% at 95% 14%,rgba(60,140,235,0.28),transparent 70%),
    radial-gradient(60% 45% at 6% 62%,rgba(40,60,150,0.45),transparent 70%),
    radial-gradient(55% 40% at 96% 78%,rgba(70,110,230,0.26),transparent 70%),
    radial-gradient(70% 40% at 50% 104%,rgba(34,170,225,0.20),transparent 70%);
}
[data-theme="light"]{
  --bg:#F3F5FA;--bg-solid:#F3F5FA;
  --card:rgba(255,255,255,0.68);--surface:rgba(255,255,255,.58);
  --border:rgba(16,23,53,.14);
  --soft:rgba(16,23,53,.06);--accent-soft:rgba(47,75,255,.12);
  --green-soft:rgba(10,127,87,.12);--amber-soft:rgba(138,90,0,.13);--red-soft:rgba(180,35,24,.10);
  --rcv:var(--accent);--rcv-soft:var(--accent-soft);--rcv-flash:rgba(36,56,224,.22);
  --nav-bg:rgba(255,255,255,.68);--nav-ink:#26324F;--nav-label:#0A5F86;--nav-ring:#E4ECF8;--nav-line:rgba(20,40,70,.20);
  --text:#101735;--muted:#39446B;--accent:#2438E0;
  --green:#06623F;--red:#A11D17;--yellow:#6E4800;--orange:#7F3C00;
  --menu-bg:#FFFFFF;--menu-hover:rgba(36,56,224,.10);
  --glass-blur:blur(18px) saturate(170%);
  --glass-shadow:0 8px 28px rgba(40,55,110,.16),inset 0 1px 0 rgba(255,255,255,.85);
  --field-bg:rgba(255,255,255,.82);--field-border:rgba(16,23,53,.58);
  --pop-bg:#FFFFFF;
  --hero-img:linear-gradient(135deg,rgba(36,56,224,0.95),rgba(30,45,190,0.92));
  --hero-bg:transparent;--hero-fg:#fff;--hero-border:rgba(255,255,255,.40);
  --hero-tile:rgba(255,255,255,.17);--hero-pill:rgba(255,255,255,.22);--hero-line:rgba(255,255,255,.5);
  --hero-ring-bg:rgba(255,255,255,.28);--hero-ring-fg:#fff;
  --hero-btn-bg:#fff;--hero-btn-fg:#2438E0;--hero-star-bg:#fff;--hero-star-fg:#2438E0;
  --mesh:radial-gradient(60% 45% at 12% 8%,rgba(127,155,255,0.3),transparent 70%),
    radial-gradient(55% 40% at 95% 14%,rgba(47,75,255,0.26),transparent 70%),
    radial-gradient(60% 45% at 6% 62%,rgba(190,205,255,0.22),transparent 70%),
    radial-gradient(55% 40% at 96% 78%,rgba(150,170,255,0.2),transparent 70%),
    radial-gradient(70% 40% at 50% 104%,rgba(127,155,255,0.22),transparent 70%);
}
/* Top 10 page used to lock its own solid colours — make it follow the glass tokens */
[data-theme="light"] #top10Page,[data-theme="dark"] #top10Page{
  --bg:inherit;--card:inherit;--surface:inherit;--border:inherit;--accent:inherit;--accent2:inherit;
  --green:inherit;--red:inherit;--text:inherit;--muted:inherit;--glow:none;
  background:transparent!important;color:var(--text)!important;
}

/* ---------- backdrop: colour orbs behind the glass ---------- */
html{background:var(--bg)!important}
body{background:transparent!important}
body::before{
  display:block!important;content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--mesh)!important;background-image:var(--mesh)!important;
  opacity:1;mix-blend-mode:normal;
}

/* ---------- glass surfaces ---------- */
*{backdrop-filter:revert!important;-webkit-backdrop-filter:revert!important}
.header,.bottom-nav,.card,.sms-stat-card,.home-qa-btn,.an-action-card,#smsRecentCard,
.lb-table,.lb-range-group,.lb-podium-wrap,.lb-coming,.wl-card,.wl-box,.tf-card,.tf-banner,
.wa-card,.wa-cc,.wa-kpi,.wa-tl,.alloc-card,.ba-card,.ps-card,.sa-card,.sa-panel,.range-card,
.home-stat-card,.login-card,.an-status-card,.notif-banner,.page-hdr-card{
  background-color:var(--card)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--glass-shadow)!important;
}
.header,.login-card,.sms-stat-card,.card,.wl-card,.range-card{border-radius:22px!important}

/* rows that live INSIDE a glass card: tint only (no second blur, keeps text crisp) */
.recent-item,.recent-item.open,.sms-report-item,.sa-row,.wa-row,.wl-row,.ba-row,
.alloc-range-item,.topcli-row,.hm-msg-row,.tf-list>*{
  background-color:var(--soft)!important;border-color:var(--border)!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.recent-item.open .recent-msg,.wa-wst,.wa-qn,.wa-cc .ch,.wa-cc.fz .ch{background-color:var(--soft)!important}

/* balance / hero cards: tinted glass with white text (contrast-checked) */
.sms-big-card.wb-card,.wl-bal,.sms-big-card.sms-hero{
  background-image:var(--hero-img)!important;background-color:transparent!important;
  color:var(--hero-fg)!important;border:1px solid var(--hero-border)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important;
  box-shadow:0 10px 34px rgba(30,40,140,.35),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.sms-hero .sms-big-label,.sms-hero .sms-big-sub,.sms-hero .sms-big-num,.sms-hero .earn-big{color:#fff!important}

/* pop-overs / dropdowns / toasts: fully solid so nothing underneath shows through */
.dropdown,.toast,.alloc-modal,.drm-box,.ad-search-suggestions{
  background-color:var(--pop-bg)!important;
  background-image:none!important;
  -webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important;
  border:1px solid var(--border)!important;
}
.wl-sheet,.wa-sheet,.ba-sheet,.saa-box{
  background-color:var(--pop-bg)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important;
}
.wl-ov,.wa-ov,.ba-ov,.drm-ov,.sa-sheet,.loading-overlay{
  -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
}
.dropdown-item.danger{color:var(--red)}

/* header / bottom bar */
.header{box-shadow:var(--glass-shadow)!important}

/* ---------- form fields: clearly visible edges, solid-ish fill ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select,
.alloc-input,.field input{
  background-color:var(--field-bg)!important;
  border:1.5px solid var(--field-border)!important;
  color:var(--text)!important;
}
/* Inline search bars (Ranges + My Numbers tabs): ONE field that looks like the other search boxes
   (Get Numbers / Traffic): same fill, same visible edge, same 12px corners, same focus ring.
   The input inside is borderless so there is no second box drawn inside the first. */
.search-bar{
  display:flex;align-items:center;gap:10px;
  background-color:var(--field-bg)!important;
  border:1.5px solid var(--field-border)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  padding:2px 14px!important;margin:6px 0 12px;
}
.search-bar:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important}
.search-bar .search-ic{font-size:.95rem;opacity:.75;flex-shrink:0}
.search-bar input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.search-bar input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus{
  border:0!important;background-color:transparent!important;box-shadow:none!important;outline:none!important;
  border-radius:0!important;padding:11px 0!important;font-size:.95rem
}
input::placeholder,textarea::placeholder{color:var(--muted)!important;opacity:1!important}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent)!important;outline:none;box-shadow:0 0 0 3px var(--accent-soft)!important;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- buttons ---------- */
.btn-ghost{background-color:var(--card)!important;border:1px solid var(--border)!important;color:var(--text)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.btn-copy,.btn-restore{background-color:var(--accent-soft)!important;color:var(--accent)!important;
  border:1px solid var(--border)!important}
[data-theme="dark"] .btn-primary,[data-theme="dark"] .wl-btn.p,[data-theme="dark"] .an-cta,
[data-theme="dark"] .wa-btn.p,[data-theme="dark"] .wa-pill.on{background:#3A54E6!important;color:#fff!important;
  box-shadow:0 6px 20px rgba(60,90,255,.35),inset 0 1px 0 rgba(255,255,255,.3)!important}
[data-theme="light"] .btn-primary,[data-theme="light"] .wl-btn.p,[data-theme="light"] .an-cta,
[data-theme="light"] .wa-btn.p,[data-theme="light"] .wa-pill.on{background:#2438E0!important;color:#fff!important;
  box-shadow:0 6px 18px rgba(36,56,224,.30),inset 0 1px 0 rgba(255,255,255,.35)!important}
.lb-range-btn.selected{background:var(--accent)!important;color:#fff!important}
[data-theme="dark"] .lb-range-btn.selected{background:#3A54E6!important}
.num-seg{background:var(--soft)}.num-seg button.on{background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}


/* ---------- number list rows ----------
   Rows sit straight on the backdrop (not inside a card), so they use the card tint.
   No blur on purpose: the list can hold ~2000 rows (see dashboard.css perf note).
   "Received SMS" rows use --rcv = the site accent (var(--accent) / var(--accent-soft)). Last-copied row is dashed so the two stay distinct.
   Background is only !important when the row is NOT flashing, so the new-SMS flash animation still runs. */
.num-item{border:1px solid var(--border)!important;box-shadow:var(--glass-shadow)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.num-item:not(.num-flash){background-color:var(--card)!important}
.num-item.num-flash{background-color:var(--card)}
.num-item:hover{border-color:var(--accent)!important}
.num-item.last-copied:not(.num-flash){background-color:var(--accent-soft)!important}
.num-item.last-copied{border-color:var(--accent)!important;border-style:dashed!important}
.num-item.num-rcv{border-color:var(--rcv)!important;box-shadow:inset 3px 0 0 var(--rcv),var(--glass-shadow)!important}
.num-item.num-rcv:not(.num-flash){background:linear-gradient(var(--rcv-soft),var(--rcv-soft)),var(--card)!important}
@keyframes numFlash{0%,100%{background:linear-gradient(var(--rcv-soft),var(--rcv-soft)),var(--card)}
  50%{background:linear-gradient(var(--rcv-flash),var(--rcv-flash)),var(--card)}}
.num-rcv-tag{color:var(--rcv)!important;background:var(--rcv-soft)!important;border-color:var(--rcv)!important}
.num-sms-badge,.num-new-tag{color:var(--accent)!important;background:var(--accent-soft)!important;border-color:var(--accent)!important}
.num-sms-badge.has-sms{background:var(--accent-soft)!important}
.strip-bar,.actions-bar{color:var(--muted)}

/* ---------- floating glass nav bar (restores the pill + raised cyan disc from dashboard.css) ---------- */
.bottom-nav{
  --bn-bg:var(--nav-bg);--bn-ring:var(--nav-ring);--bn-line:var(--nav-line);--bn-ink:var(--nav-ink);--bn-label:var(--nav-label);
  --bn-pop:linear-gradient(145deg,#4BE3F7,#2AA9EE);--bn-pop-ink:#04283A;
  left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
  width:calc(100% - 28px)!important;max-width:calc(var(--app-max-width,480px) - 28px)!important;height:64px!important;
  border-radius:28px!important;border:1px solid var(--nav-line)!important;border-top:1px solid var(--nav-line)!important;
  background-color:var(--nav-bg)!important;padding:0 6px!important;justify-content:flex-start!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%)!important;backdrop-filter:blur(22px) saturate(160%)!important;
  box-shadow:0 14px 36px rgba(6,10,40,.45),0 2px 8px rgba(6,10,40,.25),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.bn-item{color:var(--nav-ink)!important;height:auto!important}
.bn-item .bn-icon{width:46px!important;height:46px!important;border-radius:50%!important;opacity:.9!important;filter:none!important;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s!important}
.bn-item .bn-icon svg{width:22px;height:22px}
.bn-item.active .bn-icon{transform:translateY(-22px)!important;background:var(--bn-pop)!important;color:var(--bn-pop-ink)!important;opacity:1!important;
  box-shadow:0 0 0 6px var(--nav-ring),0 0 0 7px var(--nav-line),0 8px 20px rgba(34,211,238,.45)!important}
.bn-item.active{color:var(--nav-label)!important}
.bn-item.active::before{display:none!important}
.bn-item>span:not(.bn-icon):not(.bn-sms-count):not(.wa-nav-badge){position:absolute!important;left:0;right:0;bottom:7px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0!important;transform:translateY(4px)!important;pointer-events:none;color:var(--nav-label)!important}
.bn-item.active>span:not(.bn-icon):not(.bn-sms-count):not(.wa-nav-badge){opacity:1!important;transform:none!important}
.num-list{padding-bottom:110px}
@media(max-width:480px){.bottom-nav{width:calc(100% - 20px)!important;max-width:calc(var(--app-max-width,480px) - 20px)!important;
  bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;height:62px!important;border-radius:26px!important}
  .bn-item .bn-icon{width:42px!important;height:42px!important}.bn-item.active .bn-icon{transform:translateY(-21px)!important}}

/* ---------- fallbacks ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,[data-theme="dark"]{--card:#161E40;--surface:#161E40;--soft:#1E2850}
  [data-theme="light"]{--card:#FFFFFF;--surface:#FFFFFF;--soft:#E9EEF8}
}
@media (prefers-reduced-transparency:reduce){
  :root,[data-theme="dark"]{--card:#161E40;--surface:#161E40;--soft:#1E2850;--pop-bg:#141B3A;--glass-blur:none}
  [data-theme="light"]{--card:#FFFFFF;--surface:#FFFFFF;--soft:#E9EEF8;--pop-bg:#FFFFFF;--glass-blur:none}
  body::before{opacity:.55}
}
@media (prefers-contrast:more){
  :root,[data-theme="dark"]{--card:#161E40;--surface:#161E40;--border:rgba(255,255,255,.6);--muted:#D5DCF5;--glass-blur:none}
  [data-theme="light"]{--card:#FFFFFF;--surface:#FFFFFF;--border:rgba(16,23,53,.6);--muted:#2F3960;--glass-blur:none}
  body::before{display:none!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}