/* ═══════════════════════════════════════════════════════════════════════════
   AccessStack — Dashboard Visual Redesign (navy)            UI-ONLY, DASHBOARD-ONLY
   ───────────────────────────────────────────────────────────────────────────
   Loaded only on the customer dashboard (see AS_Assets: is_page('dashboard')).
   Every rule is scoped under  body.asx-navy  so no other page can change.
   No business logic, markup hooks, IDs or JS selectors are touched.
   To revert: remove the 'accessstack-navy-redesign' enqueue in includes/class-assets.php
   (or delete this file); the earlier white theme is untouched underneath.

   !important is used only where the site's own light theme / critical CSS already forces a value with
   !important (html/body backgrounds, hero and login-page backgrounds) or where the template has inline
   styles; each use is commented "!imp".
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Design tokens (namespaced --asx-*) + re-pointing of the shared tokens ─── */
body.asx-navy {
  --asx-bg:#06101F; --asx-card:#0B1930; --asx-card-2:#102342;
  --asx-blue:#0866F5; --asx-accent:#1E9BFF;
  --asx-text:#F5F8FF; --asx-text-2:#A7B8D3; --asx-muted:#8FA3C2;
  --asx-border:rgba(96,165,250,.20);
  --asx-ok:#10B981; --asx-err:#EF4444;

  --bg-primary:var(--asx-bg); --bg-secondary:var(--asx-card); --bg-card:var(--asx-card);
  --bg-card-hover:var(--asx-card-2); --bg-input:#08162B; --bg-elevated:var(--asx-card-2);
  --accent:var(--asx-blue); --accent-hover:#0A57D1; --accent-glow:rgba(8,102,245,.18);
  --accent-glow-soft:rgba(8,102,245,.08); --accent-border:rgba(30,155,255,.35);
  --text-primary:var(--asx-text); --text-secondary:var(--asx-text-2); --text-muted:var(--asx-muted); --text-link:var(--asx-accent);
  --border-color:var(--asx-border); --border-subtle:rgba(96,165,250,.12); --border-strong:rgba(96,165,250,.32);
  --green:#34D399; --green-bg:rgba(16,185,129,.12); --green-border:rgba(16,185,129,.35);
  --red:#F87171;   --red-bg:rgba(239,68,68,.12);    --red-border:rgba(239,68,68,.35);
  --yellow:#FBBF24; --yellow-bg:rgba(251,191,36,.12);
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 4px 14px rgba(0,0,0,.30);
  --shadow-lg:0 14px 36px rgba(0,0,0,.45); --shadow-card:0 6px 18px rgba(0,0,0,.28);
  --shadow-blue:0 10px 26px rgba(8,102,245,.35);
  --nav-bg:rgba(6,16,31,.88); --nav-border:var(--asx-border); --nav-accent:var(--asx-accent);
  --nav-text:var(--asx-text-2); --nav-active:var(--asx-text); --nav-green:#34D399;
  --font:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--asx-text);
}

/* ─── 2. Page canvas ─── */
html:has(body.asx-navy),
body.asx-navy { background:#06101F !important; background-image:none !important; }   /* !imp (1/3): light theme + critical CSS force these with !important */
body.asx-navy::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 38% at 85% -8%, rgba(8,102,245,.22), transparent 62%),
    radial-gradient(ellipse 55% 30% at 0% 12%, rgba(30,155,255,.10), transparent 60%);
}
body.asx-navy .asx-dash { position:relative; z-index:1; -webkit-text-size-adjust:100%; }
body.asx-navy .asx-dash .as-container { max-width:1120px; }
body.asx-navy .asx-dash h1,
body.asx-navy .asx-dash h2,
body.asx-navy .asx-dash h3 { font-family:var(--font); color:var(--asx-text); }

/* Shared chevron glyph (mask, so it follows the surrounding text colour) */
body.asx-navy .asx-chevron {
  flex:0 0 auto; width:18px; height:18px; margin-left:auto; background:currentColor; opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ─── 3. Header (the existing navbar, restyled on this page only) ─── */
body.asx-navy .as-topnav {
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--asx-border); box-shadow:none;
}
body.asx-navy .as-topnav-brand {
  display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:0;
  font-weight:800; font-size:21px; line-height:1.05; letter-spacing:-.02em; color:var(--asx-text);
}
body.asx-navy .as-topnav-brand::after {
  content:"DIGITAL SERVICES. GLOBAL ACCESS."; flex-basis:100%; margin-top:3px;
  font-size:8.5px; font-weight:600; letter-spacing:.16em; color:var(--asx-text-2); white-space:nowrap;
}
body.asx-navy .as-topnav-link { color:var(--asx-text-2); border-radius:10px; }
body.asx-navy .as-topnav-link:hover { background:rgba(255,255,255,.06); color:var(--asx-text); }
body.asx-navy .as-topnav-link.as-topnav-active { color:var(--asx-text); background:rgba(8,102,245,.20); }
body.asx-navy .as-topnav-balance { background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.35); color:#34D399; font-family:var(--font); font-weight:700; }
body.asx-navy .as-topnav-user { display:inline-flex; align-items:center; gap:10px; color:var(--asx-text); font-weight:600; font-size:14px; }
body.asx-navy .as-topnav-user::before {
  content:attr(data-initial); display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,#0866F5,#1E9BFF); color:#fff; font-weight:700; font-size:15px;
}
body.asx-navy .as-topnav-logout { background:rgba(255,255,255,.04); color:var(--asx-text-2); border:1px solid var(--asx-border); }
body.asx-navy .as-topnav-logout:hover { background:rgba(239,68,68,.14); color:#FCA5A5; border-color:rgba(239,68,68,.4); }
body.asx-navy .as-topnav-hamburger { background:rgba(255,255,255,.05); border:1px solid var(--asx-border); border-radius:10px; }
body.asx-navy .as-topnav-mobile { background:var(--asx-card); border-color:var(--asx-border); }
body.asx-navy .as-topnav-mobile-link:hover { background:rgba(255,255,255,.06); }
body.asx-navy .as-topnav-mobile-link.as-topnav-active { background:rgba(8,102,245,.16); }

/* ─── 4. Welcome panel (restyled .as-dash-topbar / .as-dash-greeting) ─── */
body.asx-navy .asx-dash .as-dash-topbar {
  display:grid; grid-template-columns:1fr; gap:14px; margin:0 0 18px; padding:0; background:none; border:0; box-shadow:none;
}
body.asx-navy .asx-dash .as-dash-greeting {
  position:relative; overflow:hidden; margin:0; border-radius:20px; border:1px solid var(--asx-border);
  padding:26px 26px 24px calc(26px); padding-right:calc(min(38%,300px) + 30px);
  background:linear-gradient(135deg,#0D2142 0%,#0A1832 55%,#08142A 100%);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
body.asx-navy .asx-dash .as-dash-greeting::after {   /* subtle diagonal sheen */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 52%,rgba(30,155,255,.07) 52%,rgba(30,155,255,.07) 60%,transparent 60%);
}
body.asx-navy .asx-eyebrow { display:block; margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#7FA2D6; }
body.asx-navy .asx-dash .as-dash-greeting h1 {
  position:relative; margin:0 0 10px; font-size:clamp(26px,5vw,38px); line-height:1.1; font-weight:800; letter-spacing:-.025em;
}
body.asx-navy .asx-name { color:var(--asx-accent); overflow-wrap:anywhere; }
body.asx-navy .asx-dash .as-dash-greeting p { position:relative; margin:0; max-width:36ch; font-size:15px; line-height:1.55; color:var(--asx-text-2); }

body.asx-navy .asx-hero-art {
  position:absolute; right:22px; top:50%; transform:translateY(-50%); width:min(36%,280px);
  display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none; z-index:1;
}
body.asx-navy .asx-hero-card {
  width:104px; height:104px; border-radius:22px; display:grid; place-items:center; transform:rotate(7deg);
  background:linear-gradient(145deg,rgba(30,155,255,.24),rgba(8,102,245,.07)); border:1px solid rgba(96,165,250,.38);
  box-shadow:0 18px 40px rgba(8,102,245,.28);
}
body.asx-navy .asx-hero-pill {
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:600; color:#CFE1FF;
  background:rgba(6,16,31,.55); border:1px solid var(--asx-border); white-space:nowrap;
}
body.asx-navy .asx-hero-pill i { width:4px; height:4px; border-radius:50%; background:var(--asx-accent); }

/* ─── 5. Primary action cards (restyled .as-dash-actions) ─── */
body.asx-navy .asx-dash .as-dash-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
body.asx-navy .asx-action {
  position:relative; display:flex; align-items:center; justify-content:flex-start; gap:14px; min-height:78px; padding:14px 16px;
  border-radius:16px; text-decoration:none; text-align:left; overflow:hidden; box-sizing:border-box;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.asx-navy .asx-action:hover { transform:translateY(-1px); text-decoration:none; }
body.asx-navy .asx-action-icon { flex:0 0 48px; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; }
body.asx-navy .asx-action-icon svg { width:26px; height:26px; }
body.asx-navy .asx-action-text { min-width:0; }
body.asx-navy .asx-action-text strong { display:block; font-size:17px; font-weight:700; line-height:1.2; letter-spacing:-.01em; }
body.asx-navy .asx-action-text small { display:block; margin-top:3px; font-size:13px; line-height:1.35; font-weight:400; }
body.asx-navy .asx-action--fund {
  background:linear-gradient(135deg,#0655D8 0%,#0A68EA 55%,#1480F2 100%); border:1px solid rgba(255,255,255,.20);
  box-shadow:0 10px 26px rgba(8,102,245,.38); color:#fff;
}
body.asx-navy .asx-action--fund .asx-action-icon { background:rgba(255,255,255,.22); color:#fff; }
body.asx-navy .asx-action--fund small { color:rgba(255,255,255,.92); }
body.asx-navy .asx-action--fund:hover { box-shadow:0 14px 32px rgba(8,102,245,.5); }
body.asx-navy .asx-action--browse { background:linear-gradient(135deg,#0B1930 0%,#0D2245 100%); border:1px solid var(--asx-border); color:var(--asx-text); }
body.asx-navy .asx-action--browse .asx-action-icon { background:rgba(8,102,245,.35); color:#CFE3FF; }
body.asx-navy .asx-action--browse small { color:var(--asx-text-2); }
body.asx-navy .asx-action--browse:hover { border-color:rgba(30,155,255,.5); }
body.asx-navy .asx-utility { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
body.asx-navy .asx-utility .as-btn { min-height:36px; padding:7px 14px; font-size:13px; }

/* existing ghost buttons / copy buttons / tabs: undo the white-theme patches on this page */
body.asx-navy .as-btn-ghost { background:rgba(255,255,255,.04); color:var(--asx-text); border:1px solid var(--asx-border); }
body.asx-navy .as-btn-ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(30,155,255,.45); }
body.asx-navy .as-copy-btn { background:rgba(255,255,255,.05); color:var(--asx-text); border:1px solid var(--asx-border); }
body.asx-navy .as-copy-btn:hover { background:rgba(8,102,245,.22); }
body.asx-navy .as-tabs .as-tab { background:transparent; color:var(--asx-text-2); border:1px solid var(--asx-border); }
body.asx-navy .as-tabs .as-tab:hover { background:rgba(255,255,255,.06); }
body.asx-navy .as-tabs .as-tab.active { background:var(--asx-blue); color:#fff; border-color:transparent; }

/* The newsletter box carries inline styles from the template. !imp (2/3) */
body.asx-navy .asx-dash .as-dash-topbar > div:has(#as-newsletter-pref) {
  margin-top:0 !important; padding:12px 16px !important; border-radius:12px !important;
  background:rgba(11,25,48,.6) !important; border-color:var(--asx-border) !important; font-size:13px;
}
body.asx-navy #as-newsletter-pref-status { color:var(--asx-muted) !important; }   /* !imp (3/3): inline colour in template */

/* ─── 6. Shared section card ─── */
body.asx-navy .asx-dash .as-dash-section {
  background:rgba(11,25,48,.55); border:1px solid var(--asx-border); border-radius:18px; padding:16px; margin:0 0 18px; box-shadow:none;
}
body.asx-navy .asx-dash .as-dash-section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
body.asx-navy .asx-dash .as-dash-section-header h2 { margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; }
body.asx-navy .asx-viewall { display:inline-flex; align-items:center; gap:4px; font-size:13.5px; font-weight:600; color:var(--asx-accent); text-decoration:none; }
body.asx-navy .asx-viewall .asx-chevron { width:14px; height:14px; margin-left:0; }
body.asx-navy .asx-viewall:hover { text-decoration:underline; }

/* ─── 7. Popular Services ─── */
body.asx-navy .asx-cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px; }
body.asx-navy .asx-cat { --asx-a:#6B8BD6; }
body.asx-navy .asx-cat--vpn     { --asx-a:#3B82F6; }
body.asx-navy .asx-cat--voice   { --asx-a:#10B981; }
body.asx-navy .asx-cat--proxy   { --asx-a:#8B5CF6; }
body.asx-navy .asx-cat--rdp     { --asx-a:#F59E0B; }
body.asx-navy .asx-cat--account { --asx-a:#EC4899; }
body.asx-navy .asx-cat--otp     { --asx-a:#06B6D4; }
body.asx-navy .asx-cat--phone   { --asx-a:#38BDF8; }
body.asx-navy a.asx-cat {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:104px; padding:14px 8px; box-sizing:border-box;
  border-radius:16px; text-decoration:none; text-align:center; color:var(--asx-text);
  background:#0B1930; border:1px solid var(--asx-border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--asx-a) 13%,#0B1930),#0A1730);
  border:1px solid color-mix(in srgb,var(--asx-a) 30%,transparent);
  transition:transform .15s ease, border-color .15s ease;
}
body.asx-navy a.asx-cat:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--asx-a) 65%,transparent); text-decoration:none; }
body.asx-navy .asx-cat-ico, body.asx-navy .asx-order-ico {
  display:grid; place-items:center; border-radius:50%; color:var(--asx-a);
  background:#102342; background:color-mix(in srgb,var(--asx-a) 22%,#0B1930);
}
body.asx-navy .asx-cat-ico { width:46px; height:46px; }
body.asx-navy .asx-cat-ico svg { width:24px; height:24px; }
body.asx-navy .asx-cat-name { font-size:13.5px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; }

/* ─── 8. Statistics (existing cards, same data, same links) ─── */
body.asx-navy .asx-dash .as-stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
body.asx-navy .asx-stat { --asx-a:#0866F5; }
body.asx-navy .asx-stat--wallet { --asx-a:#0866F5; }
body.asx-navy .asx-stat--orders { --asx-a:#10B981; }
body.asx-navy .asx-stat--tier   { --asx-a:#8B5CF6; }
body.asx-navy .asx-stat--market { --asx-a:#06B6D4; }
body.asx-navy .asx-stat--gaming { --asx-a:#F59E0B; }
body.asx-navy .asx-stat--smm    { --asx-a:#EC4899; }
body.asx-navy .asx-dash .as-stat-card.asx-stat {
  position:relative; display:flex; align-items:center; gap:14px; min-height:92px; padding:16px; box-sizing:border-box; overflow:hidden;
  border-radius:16px; box-shadow:none; color:var(--asx-text);
  background:linear-gradient(135deg,#0F2347,#0A1730);
  border:1px solid var(--asx-border);
  background:linear-gradient(135deg,color-mix(in srgb,var(--asx-a) 24%,#0B1930) 0%,#0A1730 100%);
  border:1px solid color-mix(in srgb,var(--asx-a) 40%,transparent);
}
body.asx-navy .asx-stat .as-stat-card-icon {
  flex:0 0 46px; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:0; line-height:1; color:#fff;
  background:var(--asx-a); background:color-mix(in srgb,var(--asx-a) 72%,#0B1930);
}
body.asx-navy .asx-stat .as-stat-card-icon::before { content:""; width:24px; height:24px; background:currentColor; -webkit-mask:var(--asx-ico) center/contain no-repeat; mask:var(--asx-ico) center/contain no-repeat; }
body.asx-navy .asx-stat--wallet .as-stat-card-icon { --asx-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h12v4'/%3E%3Cpath d='M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='16.5' cy='14' r='1.2'/%3E%3C/svg%3E"); }
body.asx-navy .asx-stat--orders .as-stat-card-icon { --asx-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
body.asx-navy .asx-stat--market .as-stat-card-icon { --asx-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3C/svg%3E"); }
body.asx-navy .asx-stat--gaming .as-stat-card-icon { --asx-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4M8 9v4'/%3E%3Cpath d='M15 12h.01M18 10h.01'/%3E%3Cpath d='M17.3 5H6.7a4 4 0 0 0-3.9 3.1L1.6 14a3 3 0 0 0 5.2 2.4L8 15h8l1.2 1.4A3 3 0 0 0 22.4 14l-1.2-5.9A4 4 0 0 0 17.3 5z'/%3E%3C/svg%3E"); }
body.asx-navy .asx-stat--smm    .as-stat-card-icon { --asx-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E"); }
body.asx-navy .asx-stat--tier   .as-stat-card-icon { font-size:23px; }          /* tier icon is data-driven: keep the real emoji */
body.asx-navy .asx-stat--tier   .as-stat-card-icon::before { content:none; }
body.asx-navy .asx-stat .as-stat-card-body { min-width:0; }
body.asx-navy .asx-stat .as-stat-card-label { font-size:13.5px; color:var(--asx-text-2); font-weight:500; }
body.asx-navy .asx-stat .as-stat-card-val { margin-top:2px; font-family:var(--font); font-size:clamp(19px,4.6vw,26px); font-weight:800; line-height:1.12; letter-spacing:-.02em; color:var(--asx-text); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
body.asx-navy .asx-stat--tier .as-stat-card-val { font-size:clamp(17px,4vw,22px); }
body.asx-navy .asx-stat .as-link { color:var(--asx-accent); text-decoration:none; font-weight:700; }
/* whole Marketplace tile is clickable through its existing link (stretched link, no new markup) */
body.asx-navy .asx-stat--market .as-stat-card-val a::after { content:""; position:absolute; inset:0; }
body.asx-navy .asx-stat--market::after { content:""; margin-left:auto; flex:0 0 auto; width:18px; height:18px; background:var(--asx-text-2); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }

body.asx-navy .as-tier-progress { margin:0 0 18px; padding:14px 16px; border-radius:14px; background:rgba(11,25,48,.6); border:1px solid var(--asx-border); }
body.asx-navy .as-tier-progress-bar { background:rgba(255,255,255,.09); }
body.asx-navy .as-tier-progress-fill { background:linear-gradient(90deg,#0866F5,#1E9BFF); }

/* ─── 9. Recent Orders ─── */
body.asx-navy .asx-orders { list-style:none; margin:0; padding:0; }
body.asx-navy .asx-orders li + li { border-top:1px solid var(--border-subtle); }
body.asx-navy a.asx-order { display:flex; align-items:center; gap:12px; padding:12px 2px; min-width:0; text-decoration:none; color:var(--asx-text); }
body.asx-navy a.asx-order:hover .asx-order-main strong { color:var(--asx-accent); }
body.asx-navy .asx-pill { flex:0 0 auto; padding:5px 10px; border-radius:8px; font-size:12px; font-weight:700; line-height:1.2; }
body.asx-navy .asx-pill--delivered { background:rgba(16,185,129,.16); color:#34D399; border:1px solid rgba(16,185,129,.38); }
body.asx-navy .asx-pill--pending   { background:rgba(251,191,36,.13); color:#FBBF24; border:1px solid rgba(251,191,36,.36); }
body.asx-navy .asx-order-ico { flex:0 0 40px; width:40px; height:40px; border-radius:12px; }
body.asx-navy .asx-order-ico svg { width:22px; height:22px; }
body.asx-navy .asx-order-main { flex:1 1 auto; min-width:0; }
body.asx-navy .asx-order-main strong { display:block; font-size:15px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; transition:color .15s ease; }
body.asx-navy .asx-order-main small { display:block; margin-top:2px; font-size:12.5px; color:var(--asx-text-2); }

/* ─── 10. Existing sections below (deliveries, orders, secure deliveries): same markup, navy skin ─── */
body.asx-navy .asx-dash .as-delivery-card,
body.asx-navy .asx-dash .as-order-card { background:var(--asx-card); border:1px solid var(--asx-border); border-radius:14px; box-shadow:none; }
body.asx-navy .asx-dash .as-empty { color:var(--asx-text-2); }
body.asx-navy .asx-dash .as-alert-success { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#34D399; }
body.asx-navy .asx-dash .as-link, body.asx-navy .asx-dash .as-empty a { color:var(--asx-accent); }
body.asx-navy ::selection { background:var(--asx-blue); color:#fff; }
body.asx-navy ::-webkit-scrollbar-thumb { background:#223a63; border:2px solid #06101F; }
body.asx-navy * { scrollbar-color:#223a63 transparent; }

/* Keyboard focus */
body.asx-navy .asx-action:focus-visible,
body.asx-navy a.asx-cat:focus-visible,
body.asx-navy a.asx-order:focus-visible,
body.asx-navy .asx-viewall:focus-visible { outline:2px solid var(--asx-accent); outline-offset:2px; }

/* ─── 11. Responsive ─── */
@media (min-width:900px) {
  body.asx-navy .asx-dash .as-stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body.asx-navy .asx-dash .as-dash-section, body.asx-navy .asx-popular, body.asx-navy .asx-recent { padding:20px; }
}
@media (max-width:640px) {
  body.asx-navy .asx-dash .as-dash-greeting { padding:22px 20px; padding-right:calc(34% + 18px); border-radius:18px; }
  body.asx-navy .asx-hero-art { right:14px; width:30%; }
  body.asx-navy .asx-hero-card { width:78px; height:78px; border-radius:18px; }
  body.asx-navy .asx-hero-card svg { width:42px; height:42px; }
  body.asx-navy .asx-hero-pill { display:none; }
  body.asx-navy .asx-dash .as-stat-card.asx-stat.asx-stat--wallet { grid-column:1 / -1; }   /* long naira balances get the full row */
  body.asx-navy .asx-dash .as-dash-section { padding:14px; }
}
@media (max-width:520px) {
  body.asx-navy .asx-dash .as-dash-actions { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  body.asx-navy .asx-hero-art { display:none; }
  body.asx-navy .asx-dash .as-dash-greeting { padding-right:20px; }
  body.asx-navy .asx-dash .as-stats-grid { gap:10px; }
  body.asx-navy .asx-dash .as-stat-card.asx-stat { padding:14px; gap:12px; min-height:84px; }
  body.asx-navy .asx-stat .as-stat-card-icon { flex-basis:40px; width:40px; height:40px; }
  body.asx-navy a.asx-order .asx-chevron { display:none; }
  body.asx-navy .asx-pill { font-size:11px; padding:4px 8px; }
}
@media (max-width:360px) {
  body.asx-navy .as-topnav-brand::after { display:none; }
  body.asx-navy .asx-dash .as-stats-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  body.asx-navy .asx-action, body.asx-navy a.asx-cat { transition:none; }
  body.asx-navy .asx-action:hover, body.asx-navy a.asx-cat:hover { transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. Shared fixes for every navy page
   ═══════════════════════════════════════════════════════════════════════════ */
body.asx-navy { --card-bg:var(--asx-card); }   /* the old CSS falls back to slate (#161e2e) when this is undefined */
body.asx-navy .as-topnav a,
body.asx-navy .as-topnav-brand,
body.asx-navy .as-topnav-brand:hover { text-decoration:none; }   /* theme underlines links; the brand must not be underlined */
body.asx-navy .asx-emoji { font-size:22px; line-height:1; }
body.asx-navy .asx-cat--grid { --asx-a:#6B8BD6; }

/* undo the white-theme patches that hard-code light colours */
body.asx-navy .as-btn-secondary { background:rgba(255,255,255,.04); color:var(--asx-text); border:1px solid var(--asx-border); }
body.asx-navy .as-btn-secondary:hover { background:rgba(255,255,255,.08); }
body.asx-navy .as-table th { background:rgba(255,255,255,.04); color:var(--asx-text-2); }
body.asx-navy .as-table tbody tr:hover td { background:rgba(255,255,255,.03); }
body.asx-navy .as-table-toolbar, body.asx-navy .as-toolbar, body.asx-navy .as-filter-bar { background:rgba(255,255,255,.03); }
body.asx-navy .as-input, body.asx-navy .as-select, body.asx-navy .as-textarea,
body.asx-navy input[type=text], body.asx-navy input[type=email], body.asx-navy input[type=password],
body.asx-navy input[type=number], body.asx-navy input[type=tel], body.asx-navy input[type=search],
body.asx-navy select, body.asx-navy textarea { background:#08162B; color:var(--asx-text); border-color:var(--asx-border); }
body.asx-navy .as-input:focus, body.asx-navy .as-select:focus, body.asx-navy .as-textarea:focus,
body.asx-navy input:focus, body.asx-navy select:focus, body.asx-navy textarea:focus {
  background:#0B1E3B; border-color:var(--asx-accent); box-shadow:0 0 0 3px rgba(30,155,255,.18); outline:none;
}
body.asx-navy input::placeholder, body.asx-navy textarea::placeholder { color:#7F93B2; }
body.asx-navy select option { background:#0B1930; color:#F5F8FF; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. Marketplace
   ═══════════════════════════════════════════════════════════════════════════ */
body.asx-navy .as-marketplace-page { position:relative; z-index:1; -webkit-text-size-adjust:100%; }
body.asx-navy .as-marketplace-page .as-container { max-width:1120px; }
body.asx-navy .as-marketplace-page h1,
body.asx-navy .as-marketplace-page h2,
body.asx-navy .as-marketplace-page h3 { font-family:var(--font); color:var(--asx-text); }

/* header */
body.asx-navy .as-marketplace-page .as-page-header { padding:34px 0 22px; margin-bottom:22px; border-bottom:1px solid var(--asx-border); }
body.asx-navy .as-marketplace-page .as-page-header h1 { font-size:clamp(26px,5.5vw,34px); font-weight:800; letter-spacing:-.025em; line-height:1.15; margin:0 0 8px; }
body.asx-navy .as-marketplace-page .as-page-header p { color:var(--asx-text-2); font-size:15px; line-height:1.5; }
body.asx-navy .as-marketplace-page .as-page-header strong { color:var(--asx-accent); font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* how it works */
body.asx-navy .as-how-it-works { background:linear-gradient(135deg,#0D2142 0%,#0A1832 100%); border:1px solid var(--asx-border); border-radius:16px; padding:14px 18px; box-shadow:none; }
body.asx-navy .as-hiw-step { color:var(--asx-text-2); }
body.asx-navy .as-hiw-num { background:rgba(30,155,255,.18); color:#8CCBFF; }
body.asx-navy .as-hiw-arrow { color:var(--asx-text-2); }

/* search */
body.asx-navy .as-market-search input { background:#08162B; border:1px solid var(--asx-border); border-radius:14px; min-height:48px; padding:12px 16px; color:var(--asx-text); font-size:15px; box-shadow:none; }
body.asx-navy .as-market-search input:focus { border-color:var(--asx-accent); box-shadow:0 0 0 3px rgba(30,155,255,.16); }
body.asx-navy #as-market-search-results { background:var(--asx-card); border:1px solid var(--asx-border); border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.5); }
body.asx-navy .as-search-result { color:var(--asx-text); border-bottom-color:var(--border-subtle); }
body.asx-navy .as-search-result:hover { background:rgba(30,155,255,.14); }
body.asx-navy .as-search-empty { padding:12px 16px; color:var(--asx-text-2); }
body.asx-navy .as-search-empty a { color:var(--asx-accent); }
body.asx-navy .as-market-tabs-hint { color:var(--asx-text-2); }

/* category cards: compact, STATIC horizontal cards (same buttons, same data-market contract; only their look changes).
   The old CSS made the whole tab strip `position:sticky; top:0`, which pinned this tall grid over the page while scrolling. */
body.asx-navy .as-market-tabs { position:static; top:auto; z-index:auto; background:transparent; padding-top:0; }
body.asx-navy .as-market-tabs.as-category-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 28px; padding:0; overflow:visible;
}
body.asx-navy .as-market-tabs.as-category-grid .as-tab.as-cat-card {
  --asx-a:#6B8BD6; position:relative; z-index:auto; box-sizing:border-box; margin:0; min-height:78px; padding:14px; cursor:pointer;
  white-space:normal; min-width:0; overflow:hidden;                  /* base .as-tab is nowrap, which made long names spill out of the card */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-areas:"icon label" "icon stock";
  align-items:center; column-gap:12px; row-gap:4px; text-align:left; color:var(--asx-text); border-radius:16px; box-shadow:none;
  background:#0B1930; border:1px solid var(--asx-border);
  background:linear-gradient(135deg,color-mix(in srgb,var(--asx-a) 12%,#0B1930),#0A1730);
  border:1px solid color-mix(in srgb,var(--asx-a) 28%,transparent);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.asx-navy .as-market-tabs.as-category-grid .as-tab.as-cat-card:hover {
  transform:none; box-shadow:none; border-color:color-mix(in srgb,var(--asx-a) 62%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--asx-a) 18%,#0B1930),#0A1730);
}
body.asx-navy .as-market-tabs.as-category-grid .as-tab.as-cat-card.active {
  border-color:var(--asx-a); box-shadow:0 0 0 1px var(--asx-a), 0 8px 22px color-mix(in srgb,var(--asx-a) 24%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--asx-a) 26%,#0B1930),#0A1730);
}
body.asx-navy .as-market-tabs.as-category-grid .as-tab.as-cat-card:focus-visible { outline:2px solid var(--asx-accent); outline-offset:2px; }
body.asx-navy .as-cat-card-icon {
  grid-area:icon; width:48px; height:48px; border-radius:14px; border:0; display:grid; place-items:center; font-size:22px; line-height:1; color:var(--asx-a);
  background:#102342; background:color-mix(in srgb,var(--asx-a) 24%,#0B1930);
}
body.asx-navy .as-cat-card-icon svg { width:26px; height:26px; }
body.asx-navy .as-cat-card-label {
  grid-area:label; align-self:end; min-width:0; max-width:100%; margin:0;
  font-size:clamp(12.5px, 3.5vw, 14.5px); font-weight:700; line-height:1.2; letter-spacing:-.01em; color:var(--asx-text);
  white-space:normal; overflow-wrap:anywhere; word-break:normal; text-align:left;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
body.asx-navy .as-cat-card-stock { grid-area:stock; align-self:start; justify-self:start; max-width:100%; min-width:0; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--asx-text-2); font-size:12px; font-weight:600; }
body.asx-navy .as-cat-card-dot { width:7px; height:7px; background:var(--asx-ok); box-shadow:0 0 0 3px rgba(16,185,129,.18); }
body.asx-navy .as-cat-card-stock.out { color:#F87171; }
body.asx-navy .as-cat-card-stock.out .as-cat-card-dot { background:var(--asx-err); box-shadow:0 0 0 3px rgba(239,68,68,.2); }
@media (min-width:640px) { body.asx-navy .as-market-tabs.as-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:980px) { body.asx-navy .as-market-tabs.as-category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* panels: service info, plan cards, summary card of the dropdown selector */
body.asx-navy .as-service-info-card { background:linear-gradient(135deg,rgba(8,102,245,.16) 0%,var(--asx-card) 100%); border:1px solid var(--asx-border); border-radius:18px; padding:22px; }
body.asx-navy .as-service-info-card::before { background:linear-gradient(180deg,var(--asx-accent),var(--asx-blue)); }
body.asx-navy .as-service-info-card h3 { font-size:20px; font-weight:800; letter-spacing:-.02em; }
body.asx-navy .as-service-info-card p { color:var(--asx-text-2); }
body.asx-navy .as-plan-card { background:var(--asx-card); border:1px solid var(--asx-border); border-radius:18px; box-shadow:none; }
body.asx-navy .as-plan-card:hover { border-color:rgba(30,155,255,.5); box-shadow:0 16px 40px rgba(8,102,245,.18); }
body.asx-navy .as-plan-card h3 { color:var(--asx-text); }
body.asx-navy .as-plan-price { color:var(--asx-accent); font-variant-numeric:tabular-nums; }
body.asx-navy .as-plan-features li { color:var(--asx-text-2); }
body.asx-navy .asf-summary { box-shadow:none; }
body.asx-navy .asf-field > span { color:var(--asx-text-2); }

@media (max-width:640px) {
  body.asx-navy .as-marketplace-page .as-page-header { padding:24px 0 18px; margin-bottom:18px; }
  body.asx-navy .as-how-it-works { padding:14px; }
}
@media (max-width:420px) {
  body.asx-navy .as-market-tabs.as-category-grid { gap:10px; }
  body.asx-navy .as-market-tabs.as-category-grid .as-tab.as-cat-card { grid-template-columns:42px minmax(0,1fr); column-gap:10px; padding:12px; min-height:72px; }
  body.asx-navy .as-cat-card-icon { width:42px; height:42px; border-radius:12px; font-size:20px; }
  body.asx-navy .as-cat-card-icon svg { width:22px; height:22px; }
  body.asx-navy .as-cat-card-stock { font-size:11.5px; padding:2px 8px; }
}
@media (max-width:359px) {                       /* very small phones: one card per row so the name always fits */
  body.asx-navy .as-market-tabs.as-category-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. Accent helpers (used by the homepage cards)
   ═══════════════════════════════════════════════════════════════════════════ */
body.asx-navy .asx-a-blue   { --asx-a:#3B82F6; }
body.asx-navy .asx-a-green  { --asx-a:#10B981; }
body.asx-navy .asx-a-amber  { --asx-a:#F59E0B; }
body.asx-navy .asx-a-cyan   { --asx-a:#06B6D4; }
body.asx-navy .asx-a-purple { --asx-a:#8B5CF6; }
body.asx-navy .asx-a-pink   { --asx-a:#EC4899; }

/* ═══════════════════════════════════════════════════════════════════════════
   15. Homepage (.as-home) — layout is left as the site already has it; this only re-skins
   ═══════════════════════════════════════════════════════════════════════════ */
body.asx-navy .as-home { position:relative; z-index:1; color:var(--asx-text); }
body.asx-navy .as-home h1, body.asx-navy .as-home h2, body.asx-navy .as-home h3, body.asx-navy .as-home h4 { font-family:var(--font); color:var(--asx-text); }

/* hero */
body.asx-navy .as-hero::before { background:radial-gradient(ellipse 70% 55% at 50% -10%, rgba(8,102,245,.32), transparent 65%), radial-gradient(ellipse 40% 30% at 85% 100%, rgba(30,155,255,.14), transparent 60%) !important; }  /* !imp: light theme sets this with !important */
body.asx-navy .as-hero::after  { background-image:radial-gradient(circle, rgba(148,190,255,.14) 1px, transparent 1px) !important; }                                                                          /* !imp: light theme sets this with !important */
body.asx-navy .as-hero-badge { background:rgba(8,102,245,.16); border:1px solid rgba(30,155,255,.38); color:#A9D2FF; font-weight:600; }
body.asx-navy .as-hero-title { font-size:clamp(34px,7.4vw,64px); line-height:1.06; font-weight:800; letter-spacing:-.035em; color:var(--asx-text); }
body.asx-navy .as-gradient-text { background:linear-gradient(90deg,#3AA8FF,#8FD0FF 55%,#3AA8FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#3AA8FF; }
body.asx-navy .as-hero-sub { color:var(--asx-text-2); line-height:1.6; }
body.asx-navy .as-btn-lg { min-height:52px; border-radius:14px; font-weight:700; }
body.asx-navy .as-stat-num { color:var(--asx-accent); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
body.asx-navy .as-stat-label { color:var(--asx-text-2); }
body.asx-navy .as-hero-stats { border-color:var(--asx-border); }

/* sections */
body.asx-navy .as-section-dark { background:rgba(11,25,48,.55); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
body.asx-navy .as-section-header h2 { font-weight:800; letter-spacing:-.025em; color:var(--asx-text); }
body.asx-navy .as-section-header p { color:var(--asx-text-2); }

/* how it works */
body.asx-navy .as-step { background:var(--asx-card); border:1px solid var(--asx-border); border-radius:18px; box-shadow:none; }
body.asx-navy .as-step-icon { background:linear-gradient(135deg,#0866F5,#1E9BFF); color:#fff; font-weight:800; box-shadow:0 8px 20px rgba(8,102,245,.35); }
body.asx-navy .as-step h3 { color:var(--asx-text); }
body.asx-navy .as-step p { color:var(--asx-text-2); }
body.asx-navy .as-step-arrow { color:var(--asx-text-2); opacity:.6; }

/* service / plan / trust cards: same icon tile style as the dashboard */
body.asx-navy .as-service-card, body.asx-navy .as-trust-item, body.asx-navy .as-testimonial {
  --asx-a:#3B82F6; background:var(--asx-card); border:1px solid var(--asx-border); border-radius:18px; box-shadow:none;
}
body.asx-navy .as-service-card, body.asx-navy .as-trust-item {
  background:linear-gradient(160deg,color-mix(in srgb,var(--asx-a) 10%,#0B1930),#0A1730);
  border:1px solid color-mix(in srgb,var(--asx-a) 26%,transparent);
}
body.asx-navy .as-service-card:hover { border-color:color-mix(in srgb,var(--asx-a) 60%,transparent); transform:translateY(-2px); box-shadow:none; }
body.asx-navy .as-service-icon, body.asx-navy .as-plan-icon, body.asx-navy .as-trust-icon {
  display:inline-grid; place-items:center; width:52px; height:52px; border-radius:16px; font-size:24px; line-height:1; margin-bottom:12px;
  color:var(--asx-a,#3B82F6); background:#102342; background:color-mix(in srgb,var(--asx-a,#3B82F6) 24%,#0B1930);
}
body.asx-navy .as-service-icon svg, body.asx-navy .as-plan-icon svg, body.asx-navy .as-trust-icon svg { width:26px; height:26px; }
body.asx-navy .as-service-card h3, body.asx-navy .as-trust-item h4 { color:var(--asx-text); }
body.asx-navy .as-service-card p, body.asx-navy .as-trust-item p { color:var(--asx-text-2); }
body.asx-navy .as-badge { background:color-mix(in srgb,var(--asx-a,#3B82F6) 20%,transparent); color:#CFE3FF; border:1px solid color-mix(in srgb,var(--asx-a,#3B82F6) 40%,transparent); }
body.asx-navy .as-home .as-plan-card { --asx-a:#3B82F6; }
body.asx-navy .as-home .as-plan-features li strong { color:var(--asx-text); }

/* testimonials */
body.asx-navy .as-stars { color:#FBBF24; letter-spacing:2px; }
body.asx-navy .as-testimonial p { color:var(--asx-text-2); }
body.asx-navy .as-testi-author { color:var(--asx-text); font-weight:600; }

/* closing call to action */
body.asx-navy .as-cta-section { background:linear-gradient(135deg,#0A2A6B 0%,#0A55D6 60%,#0D66D6 100%); border-top:1px solid var(--asx-border); color:#fff; }
body.asx-navy .as-cta-section h2 { color:#fff; font-weight:800; letter-spacing:-.025em; }
body.asx-navy .as-cta-section p  { color:rgba(255,255,255,.92); }
body.asx-navy .as-cta-section .as-btn-primary { background:#fff; color:#0A3FA8 !important; box-shadow:0 10px 26px rgba(0,0,0,.28); }   /* !imp: light theme forces white text on primary buttons */

/* login / register backdrop */
body.asx-navy .as-auth-wrap, body.asx-navy .as-auth-page { background-image:radial-gradient(ellipse 70% 55% at 50% 0%, rgba(8,102,245,.22), transparent 65%) !important; }  /* !imp: light theme sets this with !important */

/* ═══════════════════════════════════════════════════════════════════════════
   16. Responsive touch-ups for the shared pieces above
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:520px) {
  body.asx-navy .as-hero-title { font-size:clamp(32px,10vw,44px); }
  body.asx-navy .as-hero-cta .as-btn { width:100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. Quick-navigation bar: Dashboard / Marketplace / Homepage (markup from AS_Assets::bottom_nav())
   ═══════════════════════════════════════════════════════════════════════════ */
body.asx-navy .asx-bottomnav {
  position:fixed; left:50%; transform:translateX(-50%); bottom:max(14px, env(safe-area-inset-bottom)); z-index:90;
  display:flex; gap:6px; box-sizing:border-box; max-width:calc(100vw - 20px); padding:8px; border-radius:16px;
  background:#0B1220; border:1px solid rgba(96,165,250,.30); box-shadow:0 10px 30px rgba(0,0,0,.5);
  background:rgba(11,18,32,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
body.asx-navy .asx-bottomnav .asx-bn-item {
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:11px;
  font-size:13.5px; font-weight:600; letter-spacing:-.005em; white-space:nowrap; text-decoration:none; color:#CBD5E1;
  transition:background .15s ease, color .15s ease; -webkit-tap-highlight-color:transparent;
}
body.asx-navy .asx-bottomnav .asx-bn-item:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
body.asx-navy .asx-bottomnav .asx-bn-item.is-active { background:#0866F5; color:#fff; box-shadow:0 4px 14px rgba(8,102,245,.4); }
body.asx-navy .asx-bottomnav .asx-bn-item:focus-visible { outline:2px solid var(--asx-accent); outline-offset:2px; }

/* make room: page content, and the other things that float at the bottom */
body.asx-navy.asx-has-bottomnav { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
body.asx-navy.asx-has-bottomnav .as-wa-float { bottom:calc(92px + env(safe-area-inset-bottom)); right:16px; }              /* WhatsApp button sits above the bar */
body.asx-navy.asx-has-bottomnav .as-sticky-buy-bar { bottom:calc(78px + env(safe-area-inset-bottom)); }                    /* mobile "Buy Now" bar sits above the bar */
body.asx-navy.asx-has-bottomnav .as-marketplace-page { padding-bottom:84px; }                                              /* so the lifted buy bar never hides the last item */
body.asx-navy.asx-has-bottomnav .as-toast { bottom:calc(104px + env(safe-area-inset-bottom)); }
@media (max-width:380px) {
  body.asx-navy .asx-bottomnav .asx-bn-item { padding:0 10px; font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce) {
  body.asx-navy .asx-bottomnav .asx-bn-item { transition:none; }
}