/* ================================================================
   SOKONI — Premium Phone Design System v2  (sokoni-premium-v2.css)
   Loaded after style.css, premium.css, and mobile.css.
   Targets: phones ≤ 600px (primary), phablets ≤ 768px (secondary).
   Design language: Dark glass morphism · SOKONI green accents · fluid micro-animations
================================================================ */

/* ══════════════════════════════════════════════════
   0.  CSS CUSTOM PROPERTIES (design tokens)
══════════════════════════════════════════════════ */
:root {
  --sk-green: #71ff00;
  --sk-green-dim: rgba(113,255,0,0.18);
  --sk-green-glow: rgba(113,255,0,0.35);
  --sk-glass-bg: rgba(255,255,255,0.05);
  --sk-glass-border: rgba(255,255,255,0.09);
  --sk-glass-blur: blur(24px) saturate(180%);
  --sk-card-radius: 20px;
  --sk-pill-radius: 999px;
  --sk-shadow-soft: 0 4px 24px rgba(0,0,0,0.28);
  --sk-shadow-card: 0 2px 12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  --sk-transition: 0.18s cubic-bezier(0.4,0,0.2,1);
  --sk-spring: 0.24s cubic-bezier(0.34,1.56,0.64,1);
}

/* ══════════════════════════════════════════════════
   1.  KEYFRAME ANIMATIONS
══════════════════════════════════════════════════ */
/* Ends at transform:none, not translateY(0).

   The two render identically, but ANY non-none transform makes an element the
   containing block for its position:fixed descendants. This animation runs with
   fill-mode:both, so translateY(0) leaves an identity matrix behind forever —
   and that silently converts a fixed child into one that scrolls away.

   That is what put banking.html's bottom nav at y=1157 on a 664px viewport:
   off-screen, unreachable, and indistinguishable from a nav whose buttons "do
   not work". The rule at line ~89 already excludes .bottom-nav, but only as a
   direct child of body; on banking.html and inventory.html it sits one div
   deeper, so the WRAPPER was animated instead and became the containing block.

   Fixing it here rather than restructuring those two pages: it removes the
   whole class of bug for any fixed element nested under an animated wrapper,
   and changes nothing visually. */
@keyframes sk-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* Opacity-only entrance for the blanket `body > *` mobile rule below.
   A keyframe that touches `transform` at all cannot be applied blindly to every
   child of body: with fill-mode `both` the animation keeps applying its final
   `transform: none` FOREVER, which outranks the element's own declaration. Any
   panel that hides itself with `transform: translateX(100%)` — the standard
   slide-in pattern — is therefore forced permanently OPEN.

   That is not hypothetical: #myAppsPanel on jobs.html sat at translateX(0)
   covering the full 390x844 viewport, and sokoni-sheet.js then promoted it to
   z-index 100010, burying the header and making the menu button unclickable.
   The old defence was a hand-maintained :not() blocklist, which fails OPEN —
   every new transform-hidden panel is broken until someone remembers to add it.

   Animating opacity only removes the entire class of bug structurally: nothing
   this rule touches can ever clobber a transform again. `.sk-page` (opt-in, and
   applied to page content rather than overlays) keeps the sk-page-in slide. */
@keyframes sk-page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sk-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sk-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes sk-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--sk-green-glow); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}
@keyframes sk-icon-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%       { transform: translateY(-4px) scale(1.15); }
  70%       { transform: translateY(1px) scale(0.95); }
}
@keyframes sk-dot-pop {
  0%   { transform: translateX(-50%) scale(0); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.3); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════
   2.  PAGE ENTRANCE — every page fades in
══════════════════════════════════════════════════ */
/* This entrance animation applies to EVERY direct child of <body>, and its keyframes
   end at `transform: translateY(0)` with fill-mode `both`.

   Keyframes override regular declarations, and `both` PINS the final frame. So any
   body-child that hides itself with a transform gets dragged on screen and held
   there. That is exactly what happened to #sk-offline-bar: it hides with
   translateY(-100%), is inserted as body's first child, and was animated into view
   and stuck on EVERY mobile page — the "No internet connection" banner users saw
   while the page was plainly loading. It had nothing to do with connectivity.

   Anything that hides via transform must be excluded here, not just visually
   suppressed elsewhere. */
@media (max-width: 768px) {
  /* Modal/dialog OVERLAYS hide with opacity:0 while closed. Because this fade
     ends at opacity:1 with fill-mode:both, an un-excluded overlay gets PINNED to
     opacity:1 and paints its full-screen backdrop over the page while closed —
     the "B2B/minishop/inventory page is black" class of bug. Same failure mode
     the transform-hidden bars above hit; overlays that hide via opacity need the
     same exclusion. (They run their own open/close transition, so they lose
     nothing by sitting out the page-entrance fade.) */
  body > *:not(#splashScreen):not(script):not(style):not(.bottom-nav):not(#networkToast):not(#pullRefreshIndicator):not(.chat-unread-pip):not(#notificationContainer):not(#sokoni-bell-btn):not(#sokoni-notif-drawer):not(#sokoni-wa-support):not(#sk-offline-bar):not(#sk-offline-banner):not(#sk-spl):not(#sk-splash):not(.sk-drawer):not(#sk-menu-drawer):not([class*="modal-ov"]):not([class*="modal-overlay"]):not([class*="modal-backdrop"]):not([class*="dialog-overlay"]):not([class*="popup-overlay"]) {
    animation: sk-page-fade 0.28s ease both;
  }
}

/* ══════════════════════════════════════════════════
   3.  PREMIUM BOTTOM NAV GLASS UPGRADE
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bottom-nav {
    background: rgba(4,4,4,0.96) !important;
    backdrop-filter: blur(48px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(48px) saturate(200%) !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 -8px 48px rgba(0,0,0,0.55), 0 -1px 0 rgba(113,255,0,0.04) !important;
  }

  /* Active tab: animated dot pop */
  .active-bnav::after {
    animation: sk-dot-pop 0.32s var(--sk-spring) both !important;
  }

  /* Active icon: spring bounce */
  .active-bnav i,
  .active-bnav .bnav-emoji {
    animation: sk-icon-bounce 0.38s var(--sk-spring) both !important;
  }

  /* Tab press: quick scale */
  .bnav-item:active {
    transform: scale(0.82) !important;
    transition: transform 0.1s ease !important;
  }
}

/* ══════════════════════════════════════════════════
   4.  PREMIUM NAVBAR — TWO-ROW PHONE LAYOUT
   Row 1: logo · location · nav icons
   Row 2: full-width search bar
══════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Two-row flex container */
  .navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 8px !important;
    padding: 5px 12px 5px !important;
    min-height: unset !important;
    /* glass */
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    background: rgba(6,6,6,0.96) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45) !important;
  }

  /* ── ROW 1 · Theme toggle — compact circle button ── */
  .navbar .theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    order: 5 !important;
    flex-shrink: 0 !important;
    font-size: 17px !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.15s, transform 0.12s !important;
  }
  .navbar .theme-toggle:active {
    background: rgba(255,255,255,0.14) !important;
    transform: scale(0.92) !important;
  }

  .navbar .logo-section {
    order: 2 !important;
    flex: 1 !important;          /* eats remaining row-1 space */
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .navbar .main-logo {
    height: 54px !important;
    width: auto !important;
    filter: drop-shadow(0 0 14px rgba(113,255,0,0.4)) brightness(1.1) !important;
  }

  /* Location pill — compact, shows city + icon only */
  .navbar .nav-location {
    order: 3 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding: 5px 8px !important;
    margin-left: 6px !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.8) !important;
    cursor: pointer !important;
    max-width: 88px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Nav actions cluster */
  .navbar .nav-actions {
    order: 6 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Hide desktop-only items in nav actions */
  .navbar .wishlist-nav-btn,
  .navbar .nav-points-btn { display: none !important; }

  /* Messages, cart, login buttons — compact */
  .navbar .nav-messages-btn {
    position: relative !important;
    font-size: 18px !important;
    padding: 6px 8px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
  }
  .navbar .cart-btn {
    position: relative !important;
    font-size: 18px !important;
    padding: 6px 8px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .navbar #cartCount {
    font-size: 9px !important;
    font-weight: 900 !important;
    color: var(--sk-green) !important;
  }
  .navbar .login-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
  }
  .navbar .nav-profile-avatar {
    font-size: 18px !important;
    padding: 4px 6px !important;
    text-decoration: none !important;
  }
  /* no !important — JS must be able to hide this when user is logged in */
  #authButtons { display: flex; }

  /* ── ROW 2 — search bar full width ── */
  .navbar .search-bar {
    order: 99 !important;          /* always last */
    flex: 0 0 100% !important;     /* full width, wraps to new line */
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    position: relative !important;
  }
  .navbar .search-bar input {
    width: 100% !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.11) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 10px 14px 10px 36px !important;
    font-size: 16px !important;    /* 16px minimum prevents iOS auto-zoom */
    transition: var(--sk-transition) !important;
    box-sizing: border-box !important;
  }
  .navbar .search-bar input:focus {
    border-color: rgba(113,255,0,0.4) !important;
    background: rgba(255,255,255,0.1) !important;
    box-shadow: 0 0 0 3px rgba(113,255,0,0.09) !important;
    outline: none !important;
  }
  .navbar .search-bar input::placeholder { color: rgba(255,255,255,0.35) !important; }

  /* Search icon inside input */
  .navbar .search-bar::before {
    content: '🔍' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Search suggestions dropdown */
  .search-suggestions {
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 12px !important;
  }
}

/* ══════════════════════════════════════════════════
   5.  GLASS CARD SYSTEM — cards, panels, sections
══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Universal glass panel */
  .glass-card,
  .sk-glass {
    background: var(--sk-glass-bg) !important;
    backdrop-filter: var(--sk-glass-blur) !important;
    -webkit-backdrop-filter: var(--sk-glass-blur) !important;
    border: 1px solid var(--sk-glass-border) !important;
    border-radius: var(--sk-card-radius) !important;
    box-shadow: var(--sk-shadow-card) !important;
  }

  /* Product cards */
  .product-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
    transition: transform var(--sk-transition), opacity var(--sk-transition) !important;
    overflow: hidden !important;
  }
  .product-card:active {
    transform: scale(0.96) !important;
    opacity: 0.85 !important;
  }

  /* Service / provider cards */
  .sv-card, .pv-card, .hc-card, .bk-card,
  .driver-stat, .delivery-card, .job-card,
  .bonus-card, .perk-item, .tier-chip {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 18px !important;
    box-shadow: var(--sk-shadow-card) !important;
    transition: transform var(--sk-transition) !important;
  }
  .sv-card:active, .pv-card:active, .delivery-card:active {
    transform: scale(0.97) !important;
  }

  /* Hub / feature cards */
  .hub-card, .feat-card, .cat-card-premium,
  .law-card, .lawyer-card, .doc-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 18px !important;
    transition: transform var(--sk-transition) !important;
  }
  .hub-card:active, .feat-card:active, .cat-card-premium:active {
    transform: scale(0.96) !important;
  }
}

/* ══════════════════════════════════════════════════
   6.  STAGGER ANIMATION — grid items reveal
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .products-grid .product-card:nth-child(1)  { animation: sk-slide-up 0.25s ease 0.02s both; }
  .products-grid .product-card:nth-child(2)  { animation: sk-slide-up 0.25s ease 0.05s both; }
  .products-grid .product-card:nth-child(3)  { animation: sk-slide-up 0.25s ease 0.08s both; }
  .products-grid .product-card:nth-child(4)  { animation: sk-slide-up 0.25s ease 0.11s both; }
  .products-grid .product-card:nth-child(5)  { animation: sk-slide-up 0.25s ease 0.14s both; }
  .products-grid .product-card:nth-child(6)  { animation: sk-slide-up 0.25s ease 0.17s both; }

  .sv-grid .sv-card:nth-child(1)  { animation: sk-slide-up 0.25s ease 0.04s both; }
  .sv-grid .sv-card:nth-child(2)  { animation: sk-slide-up 0.25s ease 0.08s both; }
  .sv-grid .sv-card:nth-child(3)  { animation: sk-slide-up 0.25s ease 0.12s both; }
  .sv-grid .sv-card:nth-child(4)  { animation: sk-slide-up 0.25s ease 0.16s both; }
}

/* ══════════════════════════════════════════════════
   7.  PREMIUM HERO SECTIONS
══════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Glass hero (homepage) — floating card over background image */
  .glass-hero {
    position: relative !important;
    overflow: hidden !important;
    padding: 12px 16px !important;
  }
  .glass-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -40% !important; left: -20% !important;
    width: 70% !important; height: 200% !important;
    background: radial-gradient(ellipse, rgba(113,255,0,0.1) 0%, transparent 65%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .glass-hero-card {
    position: relative !important;
    z-index: 1 !important;
    border-radius: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 22px 18px 18px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 4px 20px rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    animation: sk-scale-in 0.35s var(--sk-spring) both !important;
  }
  .glass-hero-card h1 {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 8px !important;
  }
  .glass-hero-card h1 span {
    color: var(--sk-green) !important;
    -webkit-font-smoothing: antialiased !important;
  }
  .glass-hero-sub {
    font-size: 13px !important;
    opacity: 0.7 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  .glass-hero-badge {
    background: var(--sk-green-dim) !important;
    border: 1px solid rgba(113,255,0,0.25) !important;
    border-radius: var(--sk-pill-radius) !important;
    color: var(--sk-green) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* Hub hero sections */
  .bk-hero, .fd-hero, .sv-hero, .hc-hero,
  .law-hero, .ent-hero, .sp-hero, .car-hero,
  .prop-hero, .bnb-hero, .b2b-hero, .dig-hero,
  .comm-hero, .del-hero, .ride-hero {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 0 24px 24px !important;
  }
  .bk-hero::after, .fd-hero::after, .sv-hero::after,
  .hc-hero::after, .law-hero::after {
    content: '' !important;
    position: absolute !important;
    top: -30% !important; right: -10% !important;
    width: 55% !important; height: 180% !important;
    background: radial-gradient(ellipse, rgba(113,255,0,0.07) 0%, transparent 65%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
}

/* ══════════════════════════════════════════════════
   8.  SECTION HEADERS — premium treatment
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .section-title,
  .bk-section-h, .fd-section-h, .sv-section-h, .hc-section-h,
  .home-section-title, .new-arrivals-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px 8px !important;
    margin: 0 !important;
  }

  .section-title h2,
  .bk-section-h, .fd-section-h, .sv-section-h, .hc-section-h {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    position: relative !important;
  }
  .section-title h2::after,
  .section-title h2::before { display: none !important; }

  /* "See all" links next to headers */
  .section-title a,
  .see-all-link {
    font-size: 11px !important;
    color: var(--sk-green) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
}

/* ══════════════════════════════════════════════════
   9.  PREMIUM PILLS & CHIPS
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Filter pills */
  .cat-pill, .bk-tab, .fd-cuisine-pill, .sv-cat-pill,
  .rd-chip, .hc-cat-pill, .pg-chip, .rq-chip,
  .cm-filter-chip, .sp-tag, .turf-tag {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: var(--sk-pill-radius) !important;
    padding: 7px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.75) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: background var(--sk-transition), color var(--sk-transition) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Active pill */
  .cat-pill.active, .cat-pill-active,
  .bk-tab.active-tab, .bk-tab[aria-selected="true"],
  .rd-chip.active, .pg-chip.active,
  .cm-filter-chip.active, .sp-tag.active {
    background: var(--sk-green-dim) !important;
    border-color: rgba(113,255,0,0.35) !important;
    color: var(--sk-green) !important;
  }

  .cat-pill:active, .bk-tab:active, .rd-chip:active,
  .pg-chip:active, .cm-filter-chip:active {
    transform: scale(0.94) !important;
  }
}

/* ══════════════════════════════════════════════════
   10.  PREMIUM BUTTONS
══════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Primary green CTA */
  .auth-btn,
  .sk-btn-primary,
  button[style*="background:linear-gradient(135deg,#71ff00"],
  button[style*="background:#71ff00"],
  .dc-accept-btn,
  .sv-book-btn,
  .pv-book-btn,
  .hc-book-btn,
  .lc-book-btn,
  .sv-cta-btn {
    background: linear-gradient(135deg, #71ff00, #4fc800) !important;
    color: #000 !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    box-shadow: 0 6px 20px rgba(113,255,0,0.28) !important;
    transition: transform var(--sk-spring), box-shadow var(--sk-transition) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  .auth-btn:active,
  .dc-accept-btn:active,
  .sv-book-btn:active,
  .pv-book-btn:active,
  .lc-book-btn:active {
    transform: scale(0.94) !important;
    box-shadow: 0 2px 10px rgba(113,255,0,0.2) !important;
  }

  /* Secondary ghost button */
  .sk-btn-ghost,
  .sv-cta-secondary,
  button[style*="border:1px solid rgba(113,255,0"] {
    background: rgba(113,255,0,0.06) !important;
    border: 1px solid rgba(113,255,0,0.25) !important;
    color: var(--sk-green) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    font-weight: 700 !important;
    transition: background var(--sk-transition) !important;
  }
  .sk-btn-ghost:active {
    background: rgba(113,255,0,0.12) !important;
    transform: scale(0.96) !important;
  }

  /* Floating action buttons */
  .float-cart,
  .float-chat-btn {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(113,255,0,0.15) !important;
  }
}

/* ══════════════════════════════════════════════════
   11.  PREMIUM FORM INPUTS
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]),
  select,
  textarea {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-size: 16px !important; /* 16px minimum prevents iOS auto-zoom */
    padding: 12px 16px !important;
    transition: border-color var(--sk-transition), box-shadow var(--sk-transition) !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
  select:focus,
  textarea:focus {
    border-color: rgba(113,255,0,0.45) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 3px rgba(113,255,0,0.1) !important;
    outline: none !important;
  }
  input::placeholder, textarea::placeholder {
    color: rgba(255,255,255,0.3) !important;
  }
}

/* ══════════════════════════════════════════════════
   12.  SKELETON LOADING SHIMMER
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sk-skeleton,
  .product-img-wrap:empty,
  img[src=""],
  img:not([src]) {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.09) 80px,
      rgba(255,255,255,0.04) 160px
    ) !important;
    background-size: 400px 100% !important;
    animation: sk-shimmer 1.4s linear infinite !important;
    border-radius: 8px !important;
    min-height: 40px !important;
  }
}

/* ══════════════════════════════════════════════════
   13.  PREMIUM MODALS — bottom sheet feel
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal-overlay,
  .rest-modal-overlay,
  .quick-view-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-box,
  .quick-view-box {
    border-radius: 24px 24px 0 0 !important;
    max-height: 90vh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 18px !important;
    background: rgba(12,12,12,0.97) !important;
    backdrop-filter: blur(48px) !important;
    -webkit-backdrop-filter: blur(48px) !important;
    border-top: 1px solid rgba(255,255,255,0.09) !important;
    animation: sk-slide-up 0.3s var(--sk-spring) both !important;
  }
  /* Drag handle pill */
  .modal-box::before,
  .quick-view-box::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 2px !important;
    margin: 0 auto 16px !important;
  }
  .rest-modal {
    border-radius: 24px 24px 0 0 !important;
    max-height: 94vh !important;
    background: rgba(10,10,10,0.98) !important;
    backdrop-filter: blur(48px) !important;
    -webkit-backdrop-filter: blur(48px) !important;
    animation: sk-slide-up 0.3s var(--sk-spring) both !important;
  }
}

/* ══════════════════════════════════════════════════
   14.  CATEGORY GRID — premium icons
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .categories {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px 8px !important;
  }
  .cat-card-premium {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 12px 6px !important;
    min-height: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    transition: transform var(--sk-spring), background var(--sk-transition) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .cat-card-premium:active {
    transform: scale(0.93) !important;
    background: rgba(113,255,0,0.07) !important;
  }
  .ccp-icon {
    font-size: 24px !important;
    width: 46px !important;
    height: 46px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)) !important;
  }
  .ccp-info h3 {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.25 !important;
    color: rgba(255,255,255,0.9) !important;
  }
  .ccp-info p { display: none !important; }
}

/* ══════════════════════════════════════════════════
   15.  QUICK LINKS / TOOLS STRIP
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .qlinks-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 14px 8px !important;
    scrollbar-width: none !important;
  }
  .qlinks-row::-webkit-scrollbar { display: none !important; }

  .qlink {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 64px !important;
    flex-shrink: 0 !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 10px 8px !important;
    text-decoration: none !important;
    transition: transform var(--sk-spring), background var(--sk-transition) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .qlink:active {
    transform: scale(0.92) !important;
    background: rgba(113,255,0,0.07) !important;
  }
  .qlink-icon { font-size: 20px !important; line-height: 1 !important; }
  .qlink-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.7) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}

/* ══════════════════════════════════════════════════
   16.  HOMEPAGE SPECIFIC FIXES
══════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Hero hero-btns */
  .hero-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  .hero-btns a,
  .hero-btns button {
    width: 100% !important;
    text-align: center !important;
    padding: 13px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  /* Hub feature strip */
  .hub-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 14px 10px !important;
    scrollbar-width: none !important;
  }
  .hub-strip::-webkit-scrollbar { display: none !important; }
  .hub-strip-item {
    flex-shrink: 0 !important;
    min-width: 90px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 10px 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: transform var(--sk-spring) !important;
  }
  .hub-strip-item:active { transform: scale(0.92) !important; }

  /* Flash sale compact on homepage */
  .flash-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px 8px !important;
  }

  /* Review / rating rows */
  .review-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 16px !important;
    padding: 14px !important;
  }

  /* Promo banner */
  .promo-banner,
  .alert-banner {
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin: 8px 14px !important;
  }
}

/* ══════════════════════════════════════════════════
   17.  PROFILE / SELLER / MESSAGES
══════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Profile avatar ring */
  .profile-avatar,
  .seller-avatar-large {
    border: 2px solid rgba(113,255,0,0.35) !important;
    box-shadow: 0 0 0 4px rgba(113,255,0,0.1) !important;
  }

  /* Profile stat cards */
  .profile-stat-card,
  .seller-stat {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 16px !important;
    padding: 14px !important;
  }

  /* Message list */
  .message-thread {
    border-radius: 16px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }
  .message-bubble-in {
    background: rgba(113,255,0,0.12) !important;
    border-radius: 18px 18px 18px 4px !important;
  }
  .message-bubble-out {
    background: rgba(255,255,255,0.09) !important;
    border-radius: 18px 18px 4px 18px !important;
  }
}

/* ══════════════════════════════════════════════════
   18.  CART / CHECKOUT
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .cart-item {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
  }
  .cart-item img {
    border-radius: 10px !important;
    width: 66px !important;
    height: 66px !important;
    object-fit: cover !important;
  }

  /* Checkout steps */
  .checkout-step-indicator {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
  }
  .checkout-step-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
  }
  .checkout-step-dot.active {
    background: var(--sk-green) !important;
    box-shadow: 0 0 8px var(--sk-green-glow) !important;
    animation: sk-pulse-glow 1.8s ease infinite !important;
  }

  /* Order summary */
  .order-summary-box {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 18px !important;
    padding: 16px !important;
  }
}

/* ══════════════════════════════════════════════════
   19.  TRACKING PAGE
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .track-step {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .track-step.completed { border-color: rgba(113,255,0,0.22) !important; }
  .track-step-icon {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background: var(--sk-green-dim) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }
  /* Leaflet map: full-width on phone */
  #trackMap, .leaflet-container {
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 8px 0 !important;
  }
}

/* ══════════════════════════════════════════════════
   20.  DRIVER / RIDE PAGE
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .rd-pane, .driver-pane {
    padding: 16px 14px 80px !important;
    animation: sk-slide-up 0.28s ease both !important;
  }
  .rd-match-card {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 20px !important;
    padding: 18px 16px !important;
    box-shadow: var(--sk-shadow-soft) !important;
  }
  .rd-fare-box {
    background: var(--sk-green-dim) !important;
    border: 1px solid rgba(113,255,0,0.2) !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
  }
  .rd-fare-amt {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--sk-green) !important;
    letter-spacing: -0.03em !important;
  }
}

/* ══════════════════════════════════════════════════
   21.  COMMUNITY PAGE
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .cm-post-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
  }
  .cm-post-actions {
    display: flex !important;
    gap: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    margin-top: 10px !important;
  }
  .cm-action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.55) !important;
    background: none !important;
    border: none !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background var(--sk-transition) !important;
  }
  .cm-action-btn:active {
    background: rgba(255,255,255,0.06) !important;
  }
}

/* ══════════════════════════════════════════════════
   22.  PROVIDER / ADMIN CARDS
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .pv-card {
    display: flex !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    margin-bottom: 8px !important;
  }
  .pv-avatar {
    width: 48px !important; height: 48px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    background: var(--sk-green-dim) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    border: 1.5px solid rgba(113,255,0,0.25) !important;
  }
  .pv-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: var(--sk-pill-radius) !important;
    background: var(--sk-green-dim) !important;
    color: var(--sk-green) !important;
    border: 1px solid rgba(113,255,0,0.22) !important;
  }
}

/* ══════════════════════════════════════════════════
   23.  TOAST / NOTIFICATION
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #networkToast {
    background: rgba(10,10,10,0.96) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 14px !important;
    box-shadow: var(--sk-shadow-soft) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 11px 18px !important;
  }
  #pullRefreshIndicator {
    background: rgba(10,10,10,0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(113,255,0,0.2) !important;
    border-radius: var(--sk-pill-radius) !important;
    color: var(--sk-green) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    top: 14px !important;
  }
}

/* ══════════════════════════════════════════════════
   24.  CHAT UNREAD PIP — attached to chat-toggle-wrap corner
══════════════════════════════════════════════════ */
.chat-unread-pip {
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 9997 !important;
  background: #ff2d55 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  box-shadow: 0 2px 12px rgba(255,45,85,0.55) !important;
  animation: sk-pulse-glow 2s ease infinite !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════
   25.  TYPOGRAPHY — premium phone text
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  h1 {
    font-size: clamp(22px, 7vw, 30px) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    -webkit-font-smoothing: antialiased !important;
  }
  h2 {
    font-size: clamp(17px, 5vw, 22px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
  }
  h3 {
    font-size: clamp(14px, 4vw, 18px) !important;
    letter-spacing: -0.01em !important;
  }
  /* Green numbers / highlights */
  .sk-green-val,
  .ds-val, .dc-fee, .cr-val, .leader-earn,
  .rd-fare-amt, .bk-stat-num {
    color: var(--sk-green) !important;
    -webkit-font-smoothing: antialiased !important;
    font-variant-numeric: tabular-nums !important;
  }
  /* Body text */
  p, li, .desc-text, .sub-text {
    line-height: 1.55 !important;
    font-size: 13px !important;
  }
}

/* ══════════════════════════════════════════════════
   26.  STATUS BADGES
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .status-badge,
  .job-status,
  .pv-status-badge,
  .app-status {
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: var(--sk-pill-radius) !important;
    letter-spacing: 0.2px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .status-active, .status-online, .status-approved {
    background: rgba(113,255,0,0.12) !important;
    color: var(--sk-green) !important;
    border: 1px solid rgba(113,255,0,0.25) !important;
  }
  .status-pending, .status-waiting {
    background: rgba(245,158,11,0.12) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245,158,11,0.25) !important;
  }
  .status-rejected, .status-offline, .status-error {
    background: rgba(255,61,61,0.1) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(255,61,61,0.2) !important;
  }
}

/* ══════════════════════════════════════════════════
   27.  SAFE AREA BOTTOM PADDING — universal
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    padding-bottom: max(80px, calc(66px + env(safe-area-inset-bottom, 8px))) !important;
  }
  /* Hub page bodies */
  .bk-body, .fd-body, .sv-body, .hc-body,
  .law-body, .driver-page, .seller-page, .profile-page,
  .track-page, .banking-page, .legal-page,
  .entertainment-page, .sports-hub-page, .car-hub-page,
  .landlord-body, .bnb-body, .property-body,
  .community-page, .digital-body, .b2b-body {
    padding-bottom: max(90px, calc(72px + env(safe-area-inset-bottom, 8px))) !important;
  }
}

/* ══════════════════════════════════════════════════
   28.  LANDSCAPE PHONE — minor tweaks
══════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {
  .bottom-nav { min-height: 52px !important; }
  .bnav-item  { min-height: 52px !important; padding: 4px 4px 6px !important; }
  .bnav-item span { display: none !important; }
  .glass-hero-card { padding: 14px 18px !important; }
}

/* ══════════════════════════════════════════════════
   29.  HOMEPAGE — categories-premium on phone
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* 3-column vertical-stack layout — shows more categories */
  .categories-premium {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 6px 12px 16px !important;
  }

  /* Vertical stack: icon top, text below */
  .cat-card-premium {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 8px !important;
    text-align: center !important;
    border-radius: 16px !important;
    min-height: 86px !important;
    transition: transform var(--sk-spring), background var(--sk-transition) !important;
  }
  .cat-card-premium:active {
    transform: scale(0.92) !important;
    background: rgba(113,255,0,0.07) !important;
  }
  /* Hide arrow on vertical layout */
  .ccp-arrow { display: none !important; }
  .ccp-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
  }
  .ccp-info h3 {
    font-size: 9px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .ccp-info p { display: none !important; }
  .ccp-glow { width: 50px !important; height: 50px !important; }

  /* Glass hero buttons — full width stack on phone */
  .glass-hero-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .glass-btn-green {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
  }

  /* 2-col goods/services split in hero */
  .glass-hero-card > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .glass-hero-card > div[style*="grid-template-columns:1fr 1fr"] a {
    padding: 10px 10px !important;
    border-radius: 12px !important;
    gap: 7px !important;
  }
  .glass-hero-card > div[style*="grid-template-columns:1fr 1fr"] a span {
    font-size: 18px !important;
  }
  .glass-hero-card > div[style*="grid-template-columns:1fr 1fr"] a > div > div:first-child {
    font-size: 11px !important;
  }
  .glass-hero-card > div[style*="grid-template-columns:1fr 1fr"] a > div > div:last-child {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════
   30.  LIGHT MODE OVERRIDES
══════════════════════════════════════════════════ */
body.light-mode .glass-hero-card,
body.light-mode .modal-box,
body.light-mode .cat-card-premium {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .product-card {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
body.light-mode input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #111 !important;
}
body.light-mode .qlink,
body.light-mode .hub-strip-item {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── iOS zoom prevention: inputs must be ≥ 16px ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  font-size: max(16px, 1em) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SOKONI PREMIUM v3 — GLOBAL PAGE POLISH
   Applies to ALL pages: buttons, modals, navbars, footers, forms
═══════════════════════════════════════════════════════════════ */

/* ── NAVBAR — glass blur premium ── */
.navbar{
    background:rgba(6,6,6,0.88) !important;
    backdrop-filter:blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
    border-bottom:1px solid rgba(255,255,255,0.07) !important;
    box-shadow:0 4px 24px rgba(0,0,0,0.3) !important;
}

/* ── BOTTOM NAV — glass + guaranteed visibility on mobile ── */
@media (max-width: 768px) {
  .bottom-nav {
    display: flex !important;
  }
}
.bottom-nav,.bnav{
    background:rgba(6,6,6,0.92) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    border-top:1px solid rgba(255,255,255,0.06) !important;
}

/* ── BUTTONS — premium defaults ── */
button,
.btn,
[class*="-btn"]:not(.n-bell-btn):not(.theme-toggle):not(.menu-toggle){
    font-family:inherit;
}
.btn-primary,
.primary-btn{
    background:linear-gradient(135deg,#71ff00,#4fc800) !important;
    color:black !important;
    font-weight:900 !important;
    border:none !important;
    border-radius:14px !important;
    box-shadow:0 4px 16px rgba(113,255,0,0.3) !important;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s !important;
}
.btn-primary:hover,
.primary-btn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 8px 28px rgba(113,255,0,0.45) !important;
}

/* ── MODALS / DRAWERS ── */
.modal,
.modal-content,
.drawer,
.product-modal-inner{
    background:linear-gradient(145deg,rgba(18,18,18,0.98),rgba(12,12,12,0.98)) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    border-radius:28px !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
}

/* ── CARDS — universal premium base ── */
.card,
[class*="-card"]:not(.seller-card):not(.product-card):not(.flash-sale-bar){
    border-radius:20px;
}

/* ── SCROLLBAR ── globally hidden on touch, subtle on desktop ── */
@media(min-width:769px){
    ::-webkit-scrollbar{width:6px;height:6px;}
    ::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:4px;}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:4px;}
    ::-webkit-scrollbar-thumb:hover{background:rgba(113,255,0,0.3);}
}
@media(max-width:768px){
    ::-webkit-scrollbar{display:none;}
    *{scrollbar-width:none;}
}

/* ── FOOTER — premium ── */
footer,.site-footer{
    background:rgba(6,6,6,0.95) !important;
    border-top:1px solid rgba(255,255,255,0.06) !important;
}

/* ── SEARCH BAR ── */
.search-bar input{
    background:rgba(255,255,255,0.06) !important;
    border:1px solid rgba(255,255,255,0.1) !important;
    border-radius:14px !important;
    color:white !important;
    transition:border-color .25s,box-shadow .25s !important;
}
.search-bar input:focus{
    border-color:rgba(113,255,0,0.4) !important;
    box-shadow:0 0 0 3px rgba(113,255,0,0.08) !important;
    outline:none !important;
}

/* ── NOTIFICATION PANEL ── */
.n-panel{
    background:rgba(10,10,10,0.97) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    border-radius:22px !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    box-shadow:0 20px 60px rgba(0,0,0,0.5) !important;
}
.n-opt{
    border-radius:14px !important;
    transition:background .2s !important;
}
.n-opt:hover{
    background:rgba(255,255,255,0.06) !important;
}

/* ── HUB / CATEGORY CARDS ── */
.hub-card,.cat-card,.category-card{
    background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.07);
    border-radius:20px;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s;
    overflow:hidden;
}
.hub-card:hover,.cat-card:hover,.category-card:hover{
    transform:translateY(-5px) scale(1.03);
    border-color:rgba(113,255,0,0.2);
    box-shadow:0 12px 30px rgba(0,0,0,0.35),0 0 0 1px rgba(113,255,0,0.08);
}

/* ── TESTIMONIAL / REVIEW CARDS ── */
.review-card,.testimonial-card,.rating-card{
    background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.07);
    border-radius:20px;
    padding:18px;
    transition:transform .3s,border-color .3s;
}
.review-card:hover,.testimonial-card:hover{
    transform:translateY(-3px);
    border-color:rgba(113,255,0,0.15);
}

/* ── BADGES — premium finish ── */
.badge,.pill{
    border-radius:999px;
    font-weight:800;
    font-size:10px;
    letter-spacing:.03em;
    padding:3px 9px;
}

/* ── SECTION SEPARATOR ── */
section + section{
    border-top:1px solid rgba(255,255,255,0.04);
}

/* ── LIGHT MODE GLOBAL ── */
body.light-mode .navbar{
    background:rgba(255,255,255,0.95) !important;
    border-bottom-color:rgba(0,0,0,0.08) !important;
    box-shadow:0 2px 16px rgba(0,0,0,0.06) !important;
}
body.light-mode .bottom-nav,
body.light-mode .bnav{
    background:rgba(255,255,255,0.96) !important;
    border-top-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .n-panel{
    background:rgba(255,255,255,0.98) !important;
    border-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .hub-card,
body.light-mode .cat-card,
body.light-mode .category-card{
    background:#fff;
    border-color:rgba(0,0,0,0.07);
}
body.light-mode .review-card,
body.light-mode .testimonial-card{
    background:#f8f8f8;
    border-color:rgba(0,0,0,0.07);
}
/* END PREMIUM v3 GLOBAL */

/* ══════════════════════════════════════════════════════════════
   FIXED-POSITION RESCUE for wrappers that contain the bottom nav

   The page-in animation at line ~105 excludes .bottom-nav, but only where it is
   a direct child of <body> — true on 86 of 88 pages that have one. On
   banking.html and inventory.html the nav sits one <div> deeper, so the WRAPPER
   is animated instead and, with fill-mode:both, keeps a transform for the life
   of the page. Any non-none transform makes an element the containing block for
   its position:fixed descendants, so the nav stopped being fixed and scrolled
   away: measured at y=1157 on a 664px viewport — off-screen, unreachable, and
   indistinguishable from a nav whose buttons simply do not work.

   Ending the keyframe at transform:none was tried first and is kept (it is
   correct, and harmless), but WebKit still reports an identity matrix for a
   filled animation, so it does not clear the containing block on its own.
   Removing the animation from these two wrappers does.

   Scoped to the two affected wrappers rather than applied broadly: every other
   page keeps its entrance animation exactly as it was.
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body > .bk-body,
  body > .inv-body {
    animation: none !important;
    transform: none !important;
  }
}