/* Nepbyte Bazaar - Global Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font-family: inherit; }
ul { list-style: none; }

/* Dark theme */
:root,
[data-theme="dark"] {
  --bg-base:    #05080f;
  --bg-raised:  #090d19;
  --bg-float:   #0c1122;
  --bg-hover:   #101828;

  --border:     rgba(255,255,255,0.055);
  --border-md:  rgba(255,255,255,0.10);
  --border-lg:  rgba(255,255,255,0.16);


  --blue:       #4f46e5;
  --blue-dark:  #3730a3;
  --blue-light: #818cf8;
  --blue-dim:   rgba(79,70,229,0.12);
  --blue-glow:  0 0 22px rgba(79,70,229,0.28);


  --amber:      #f59e0b;
  --amber-dim:  rgba(245,158,11,0.12);

  --text:       #e1e7f5;
  --text-sub:   #8896b3;
  /* Was #3d4f6b, which measured 2.1:1 against --bg-hover and 2.4:1
     against --bg-base — roughly half the 4.5:1 WCAG AA needs for body
     text. Every secondary line on the admin pages uses this token
     (timestamps, stat-card sublabels, "All settled", the explanatory
     notes), so the whole second layer of the interface was effectively
     unreadable. #7c8aa8 clears AA on all four surfaces (5.1:1 – 5.8:1)
     while staying clearly quieter than --text-sub. #7183a5 is the least
     bright value in this hue that clears the bar (4.6:1) — picked over
     anything lighter so the quiet layer stays quiet. */
  --text-muted: #7183a5;
  /* Decorative only — dividers, disabled glyphs, never body text. */
  --text-faint: #171f30;

  --success: #22c55e;
  --error:   #ef4444;
  --warning: #f59e0b;

  /* Money semantics. The DARK values are the palette this site already
     used — deliberately unchanged, because the existing colours were
     right. Only the three that genuinely could not be read on a dark
     surface are nudged, and only far enough to clear 4.5:1:

         #22c55e green   7.8:1  kept exactly
         #ef4444 red     4.7:1  kept exactly
         #f59e0b amber   8.3:1  kept exactly
         #818cf8 indigo  6.0:1  kept exactly
         #6366f1 indigo  4.0:1  -> #767af4  (4.9:1)
         #8b5cf6 violet  4.2:1  -> #9370f7  (5.0:1)
         #64748b slate   3.7:1  -> #76869e  (4.8:1)

     The LIGHT values are the ones that have to differ, because these
     hues are simply not readable on white: #22c55e measures 7.8:1 on the
     dark base and 2.3:1 on the light one. Same meaning, different value.

     Low-alpha chip and badge backgrounds are unaffected and stay literal. */
  --pos:        #22c55e;   /* in your favour / owed to you   */
  --neg:        #ef4444;   /* you owe                        */
  --warn-fg:    #f59e0b;   /* waiting, pending, attention    */
  --info-fg:    #818cf8;   /* emphasis, links, tab labels    */
  --info-strong:#767af4;   /* the deeper indigo accent       */
  --mute-fg:    #76869e;   /* square, nothing to do          */
  --violet-fg:  #9370f7;   /* promotional / house money      */

  --logo-filter: none;
  --nav-bg: rgba(5,8,15,0.92);
  --bottom-nav-bg: rgba(9,13,25,0.97);
}

/* Light theme */
[data-theme="light"] {
  --bg-base:    #f1f5fb;
  --bg-raised:  #ffffff;
  --bg-float:   #f5f8fd;
  --bg-hover:   #e8eef8;

  --border:     rgba(0,0,0,0.065);
  --border-md:  rgba(0,0,0,0.11);
  --border-lg:  rgba(0,0,0,0.17);

  --blue:       #4f46e5;
  --blue-dark:  #3730a3;
  --blue-light: #4f46e5;
  --blue-dim:   rgba(79,70,229,0.1);
  --blue-glow:  0 0 22px rgba(79,70,229,0.2);

  --amber:      #d97706;
  --amber-dim:  rgba(217,119,6,0.1);

  --text:       #0f172a;
  --text-sub:   #475569;
  /* Was #94a3b8 — 2.2:1 on --bg-hover, 2.6:1 on white. Same failure as
     the dark theme, same fix: #5b6b82 clears AA on every surface
     (4.7:1 – 5.4:1) and still reads as the quiet layer. */
  --text-muted: #5b6b82;
  --text-faint: #cbd5e1;

  /* Darkened counterparts of the dark theme's money colours — see there.
     These DO differ from the dark palette, and have to: the dark greens,
     ambers and indigos measure 2.1:1 – 3.0:1 against white. */
  --pos:        #167c3c;
  --neg:        #c81e1e;
  --warn-fg:    #8f4f05;
  --info-fg:    #4338ca;
  --info-strong:#3730a3;
  --mute-fg:    #52627a;
  --violet-fg:  #6d28d9;

  --logo-filter: invert(1);
  --nav-bg: rgba(255,255,255,0.92);
  --bottom-nav-bg: rgba(255,255,255,0.98);
}

/* Base */
body {
  background: var(--bg-base);
  color: var(--text);
  font-family: 'Poppins', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;

  padding-top: 50px;
  padding-bottom: 0;
  transition: background 0.25s, color 0.25s;
}

/* 691-950px: nav-links hidden, inline stats strip in navbar (no extra padding needed) */
/* <=690px: separate stats bar below navbar adds 48px */
@media (max-width: 950px) {
  body { padding-bottom: 64px; }
}
@media (max-width: 690px) {
  body.has-stats-bar { padding-top: 98px; }
}


[data-theme="dark"] body::after,
:root body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.016'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after { display: none; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--blue-dark); border-radius: 99px; }

/* Layout */
.container    { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 clamp(.9rem, 3vw, 2rem); }
.container-sm { width: 100%; max-width: 440px;  margin: 0 auto; padding: 0 1rem; }
/* Section rhythm.
   These were clamp(2rem, 5vw, 3.5rem), which on a desktop put 7rem of
   nothing between one section and the next — on a phone, a whole thumb's
   worth of scrolling to cross a gap. Tightened so consecutive sections
   read as one page rather than a stack of separate ones; the space is
   still there, there is just no longer a screenful of it. */
.section      { padding: clamp(1rem, 2.4vw, 1.6rem) 0;   position: relative; z-index: 1; }
.section-sm   { padding: clamp(.7rem, 1.6vw, 1rem) 0;    position: relative; z-index: 1; }
/* Rails sit closer still: consecutive rows should read as one list you
   scroll through, not as separate sections with a gap announcing each. */
.section-tight{ padding: clamp(.45rem, 1.2vw, .8rem) 0;  position: relative; z-index: 1; }

/* Room at the end of the page for whatever the bottom stack is showing.
   The stack is position:fixed, so without this the last thing on the page
   sits behind it permanently — scroll all the way down and the final row
   of cards is simply never reachable. --nb-bottom-inset is measured and
   published by includes/bottom-stack.php and is 0px when nothing is on
   screen, so pages without a notice or deal bar are unaffected. */
body { padding-bottom: var(--nb-bottom-inset, 0px); transition: padding-bottom .22s cubic-bezier(.2,.8,.3,1); }

/* Top navbar - fixed, auto-hide on scroll */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s;
}
header.nav-hidden { transform: translateY(-100%); }
header.nav-scrolled .navbar { box-shadow: 0 2px 24px rgba(0,0,0,0.4); }

.navbar {
  height: 50px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  position: relative; z-index: 10;
}
.navbar .container {
  display: flex; align-items: center;
  justify-content: space-between; gap: .6rem;
}

/* Logo */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img { height: 24px; width: auto; filter: var(--logo-filter); transition: filter 0.2s; }
.nav-logo-fallback { font-size: .88rem; font-weight: 800; color: var(--blue); display: none; letter-spacing: -.3px; }

/* Desktop nav links */
.nav-links {
  display: flex; align-items: center; gap: 1px;
  flex: 1; justify-content: center;
}
.nav-links li a {
  display: flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 500; color: var(--text-sub);
  padding: .3rem .62rem; border-radius: 7px;
  transition: color .14s, background .14s;
  white-space: nowrap; position: relative;
}
.nav-links li a i { font-size: .66rem; }
.nav-links li a:hover { color: var(--text); background: var(--bg-float); }
.nav-links li a.active { color: var(--blue-light); background: var(--blue-dim); font-weight: 600; }

/* Cart link badge in nav-links */
.nav-cart-link { position: relative; }
.nav-cart-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--blue); color: #fff;
  font-size: .44rem; font-weight: 800;
  min-width: 13px; height: 13px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  border: 1.5px solid var(--nav-bg);
}

/* Login link styled as pill */
.nav-link-login {
  background: var(--blue-dim) !important;
  color: var(--blue-light) !important;
  border: 1px solid rgba(79,70,229,0.25);
}
.nav-link-login:hover { background: rgba(79,70,229,0.2) !important; }

/* Nav right */
.nav-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* Hamburger */
.nav-toggle {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--border-md);
  cursor: pointer; width: 32px; height: 32px;
  border-radius: 7px; padding: 0;
  transition: background .15s, border-color .15s; flex-shrink: 0;
}
.nav-toggle:hover { background: var(--bg-float); border-color: var(--border-lg); }
.nav-toggle-bar {
  display: block; width: 14px; height: 1.5px;
  background: var(--text-sub); border-radius: 99px;
  transition: transform .28s cubic-bezier(0.4,0,0.2,1), opacity .2s, width .2s;
  transform-origin: center;
}
.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Collapsible stats trigger button */
.nav-stats-trigger {
  display: none; /* desktop only */
  align-items: center; gap: .32rem;
  padding: .26rem .48rem;
  background: var(--bg-float);
  border: 1px solid var(--border-md);
  border-radius: 7px; cursor: pointer;
  font-size: .7rem; font-weight: 700; color: var(--text);
  font-family: inherit;
  transition: background .14s, border-color .14s;
  white-space: nowrap; position: relative; flex-shrink: 0;
}
.nav-stats-trigger:hover { background: var(--bg-hover); border-color: var(--border-lg); }
.nav-stats-trigger.open { background: var(--bg-hover); border-color: var(--border-lg); }
.nav-stats-trigger-val { font-size: .68rem; }
.nav-stats-trigger-caret {
  font-size: .46rem; color: var(--text-muted);
  transition: transform .22s cubic-bezier(0.4,0,0.2,1);
}
.nav-stats-trigger.open .nav-stats-trigger-caret { transform: rotate(180deg); }

@media (min-width: 951px) { .nav-stats-trigger { display: flex; } }

/* Stats dropdown panel */
.nav-stats-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border-md);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.03);
  padding: .4rem;
  z-index: 400;
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .18s, transform .2s cubic-bezier(0.34,1.4,0.64,1);
}
.nav-stats-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
/* anchor the panel relative to nav-right */
.nav-right { position: relative; }

.nsp-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .52rem .6rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background .13s;
}
.nsp-item:hover { background: var(--bg-hover); }
.nsp-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; flex-shrink: 0;
}
.nsp-body { display: flex; flex-direction: column; line-height: 1.2; }
.nsp-label {
  font-size: .48rem; font-weight: 700; letter-spacing: .07em;
  color: var(--text-muted); text-transform: uppercase;
}
.nsp-val { font-size: .78rem; font-weight: 700; color: var(--text); }

/* Hide nav-links and stats trigger between 721-950px */
@media (max-width: 950px) {
  .nav-links { display: none; }
  .nav-stats-trigger { display: none !important; }
  .nav-stats-panel { display: none !important; }
}

/* Inline stats strip inside navbar: visible 691-950px only */
.nav-inline-stats {
  display: none;
}
@media (min-width: 691px) and (max-width: 950px) {
  .nav-inline-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    margin: 0 .6rem;
  }
  .nav-inline-stats::-webkit-scrollbar { display: none; }
  .nav-inline-stats-item {
    display: flex;
    align-items: center;
    gap: .38rem;
    padding: 0 .7rem;
    height: 36px;
    text-decoration: none;
    border-radius: 8px;
    transition: background .14s;
    flex-shrink: 0;
  }
  .nav-inline-stats-item:hover { background: var(--bg-float); }
  .nav-inline-stats-icon {
    width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; flex-shrink: 0;
  }
  .nav-inline-stats-body { display: flex; flex-direction: column; line-height: 1.15; }
  .nav-inline-stats-label { font-size: .45rem; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }
  .nav-inline-stats-val   { font-size: .68rem; font-weight: 700; color: var(--text); white-space: nowrap; }
  .nav-inline-stats-sep {
    width: 1px; height: 16px; background: var(--border-md);
    flex-shrink: 0; margin: 0 1px;
  }
}

/* ══ STATS BAR — mobile only, below navbar ══ */
.stats-bar {
  display: none;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: 48px; overflow: hidden;
}
@media (max-width: 690px) { .stats-bar { display: block; } }

.stats-bar-inner {
  display: flex; align-items: stretch; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 0 .5rem;
}
.stats-bar-inner::-webkit-scrollbar { display: none; }

.stat-chip {
  display: flex; align-items: center; gap: .48rem;
  padding: 0 .75rem; flex-shrink: 0;
  text-decoration: none;
  transition: background .14s; border-radius: 8px;
  margin: 5px 1px;
}
.stat-chip:hover, .stat-chip:active { background: var(--bg-hover); }
.stat-chip-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; flex-shrink: 0;
}
.stat-chip-body { display: flex; flex-direction: column; line-height: 1.2; gap: 0; }
.stat-chip-label {
  font-size: .5rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text-muted); text-transform: uppercase;
}
.stat-chip-val { font-size: .7rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.stats-bar-sep {
  width: 1px; height: 20px; background: var(--border-md);
  flex-shrink: 0; align-self: center; margin: 0 2px;
}

/* ══ SIDE DRAWER ══ */
.drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 498;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  transition: background .3s, backdrop-filter .3s;
}
.drawer-overlay.open {
  display: block;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}

.side-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 290px; max-width: 88vw;
  height: 100%;
  z-index: 499;
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border-left: 1px solid var(--border-md);
  box-shadow: -8px 0 40px rgba(0,0,0,0.28);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.side-drawer.open { transform: translateX(0); }

/* Drawer header */
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem .75rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-logo { display: flex; align-items: center; text-decoration: none; }
.drawer-logo-img { height: 26px; width: auto; filter: var(--logo-filter); }
.drawer-logo-text { font-size: .82rem; font-weight: 800; color: var(--blue); letter-spacing: -.3px; }
.drawer-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem;
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  transition: color .14s, background .14s;
}
.drawer-close:hover { color: var(--text); background: var(--bg-hover); }

/* User info strip — whole thing is a link to profile */
.drawer-user {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1.1rem;
  background: var(--bg-float);
  border-bottom: 1px solid var(--border-md);
  flex-shrink: 0;
  text-decoration: none;
  transition: background .15s;
  cursor: pointer;
}
.drawer-user:hover { background: var(--bg-hover); }
.drawer-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid rgba(79,70,229,0.3);
  color: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0;
}
.drawer-user-info { flex: 1; min-width: 0; }
.drawer-username { display: block; font-size: .8rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-user-wallet {
  font-size: .68rem; color: var(--text-sub); font-weight: 500;
  display: flex; align-items: center; gap: 4px; margin-top: 1px;
}
.drawer-user-wallet i { color: #818cf8; font-size: .6rem; }
.drawer-user-arrow {
  color: var(--text-muted); font-size: .7rem; flex-shrink: 0;
  transition: transform .2s, color .14s;
}
.drawer-user:hover .drawer-user-arrow { color: var(--blue-light); transform: translateX(2px); }

/* (stats bar, inline stats, nav-links defined above in navbar section) */
.nav-stat {
  display: flex; align-items: center; gap: .26rem;
  padding: 0 .58rem;
  height: 100%;
  text-decoration: none;
  color: var(--text);
  font-size: .68rem; font-weight: 700;
  white-space: nowrap;
  transition: background .14s;
  letter-spacing: -.01em;
}
.nav-stat:hover { background: var(--bg-hover); }
.nav-stat-icon { font-size: .62rem; flex-shrink: 0; }
.nav-stat-val { color: var(--text); }
.nav-stat-sep {
  width: 1px; height: 14px;
  background: var(--border-md);
  flex-shrink: 0;
  align-self: center;
}
/* On medium screens hide spins/points/tickets, keep only wallet */
@media (max-width: 960px) {
  .nav-stat-hide-sm { display: none !important; }
  .nav-stat-sep.nav-stat-hide-sm { display: none !important; }
}

/* Drawer user stats row */
.drawer-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: .55rem .65rem;
  display: flex; flex-direction: column; gap: 1px;
}
.drawer-nav::-webkit-scrollbar { width: 3px; }
.drawer-nav::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; }

.drawer-section-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
  padding: .5rem .5rem .25rem;
  display: block;
}


.drawer-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .56rem .7rem;
  border-radius: 9px;
  color: var(--text-sub);
  text-decoration: none;
  font-size: .82rem; font-weight: 500;
  position: relative;
  transition: color .14s, background .14s;
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
}
.drawer-link:hover { color: var(--text); background: var(--bg-hover); }
.drawer-link.active {
  color: var(--blue-light); background: var(--blue-dim); font-weight: 600;
}
.drawer-link-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; flex-shrink: 0;
  background: var(--bg-base);
  transition: background .14s;
}
.drawer-link.active .drawer-link-icon { background: var(--blue-dim); color: var(--blue-light); }
.drawer-link:hover .drawer-link-icon { background: var(--bg-float); }
.drawer-link-text { flex: 1; }

/* "Get the App" drawer entry — nudged forward with a subtle brand tint and a
   slow shimmer so it reads as a promo without shouting over real navigation. */
.drawer-link-app .drawer-link-icon {
  background: linear-gradient(135deg, rgba(79,70,229,.22), rgba(56,189,248,.18));
  color: var(--blue-light);
}
.drawer-link-app:hover .drawer-link-icon {
  background: linear-gradient(135deg, rgba(79,70,229,.34), rgba(56,189,248,.26));
}
.drawer-app-tag {
  margin-left: .4rem; font-size: .52rem; font-weight: 800; letter-spacing: .07em;
  padding: .12rem .34rem; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, #4f46e5, #38bdf8); color: #fff;
  animation: drawerAppPulse 2.6s ease-in-out infinite;
}
@keyframes drawerAppPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-app-tag { animation: none; }
}

.drawer-badge {
  background: var(--blue); color: #fff;
  font-size: .55rem; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.drawer-link-danger { color: #f87171; }
.drawer-link-danger:hover { color: #ef4444; background: rgba(239,68,68,.08); }
.drawer-link-danger .drawer-link-icon { color: #f87171; }

/* Drawer footer */
.drawer-footer {
  border-top: 1px solid var(--border-md);
  flex-shrink: 0;
}
.drawer-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.drawer-theme-label {
  font-size: .72rem; font-weight: 600; color: var(--text-sub);
  display: flex; align-items: center; gap: .4rem;
}
.drawer-theme-label i { font-size: .68rem; color: var(--text-muted); }
/* Smaller toggle variant inside drawer */
#theme-toggle-wrapper-drawer .theme-toggle-track { width: 62px; height: 26px; }
#theme-toggle-wrapper-drawer .theme-toggle-ball { width: 16px; height: 16px; top: 4px; left: 4px; }
#theme-toggle-wrapper-drawer[data-theme="auto"] .theme-toggle-ball { transform: translateX(18px); }
#theme-toggle-wrapper-drawer[data-theme="light"] .theme-toggle-ball { transform: translateX(37px); }

.drawer-footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.1rem;
}
.drawer-footer-copy { font-size: .62rem; color: var(--text-muted); }
.drawer-footer-links { display: flex; align-items: center; gap: .4rem; }
.drawer-footer-links a { font-size: .62rem; color: var(--text-muted); text-decoration: none; }
.drawer-footer-links a:hover { color: var(--text); }
.drawer-footer-links span { color: var(--text-faint); font-size: .6rem; }

/* ══ LOGOUT MODAL ══ */
.logout-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 1rem;
}
.logout-modal-overlay.open { display: flex; }
.logout-modal {
  background: var(--bg-raised);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  padding: 2rem 1.5rem 1.5rem;
  max-width: 340px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: modalPop .25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalPop { from { opacity:0; transform:scale(.88); } to { opacity:1; transform:scale(1); } }
.logout-modal-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(239,68,68,.12);
  color: #f87171; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.logout-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.logout-modal-msg { font-size: .8rem; color: var(--text-sub); margin-bottom: 1.4rem; line-height: 1.5; }
.logout-modal-actions { display: flex; gap: .65rem; justify-content: center; }
.logout-modal-actions .btn { min-width: 100px; font-size: .8rem; }
.btn-danger {
  background: #ef4444; color: #fff; border: none;
  border-radius: 8px; padding: .48rem 1rem;
  font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s;
}
.btn-danger:hover { background: #dc2626; }


@keyframes slideDownEntry { from { opacity:0; transform:translateY(-52px); } to { opacity:1; transform:none; } }
@keyframes slideUpEntry { from { opacity:0; transform:translateY(64px); } to { opacity:1; transform:none; } }

header.nav-enter { animation: slideDownEntry 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bottom-nav.nav-enter { animation: slideUpEntry 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Bottom navbar - fixed bottom bar */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  height: 64px;
  background: var(--bottom-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.bottom-nav.nav-hidden { transform: translateY(100%); }

.bottom-nav-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0 .25rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  margin: 6px 2px;
  transition: color .14s, background .14s;
  position: relative;
  letter-spacing: .2px;
}
.bn-item i { font-size: 1.05rem; transition: transform .2s; }
.bn-item:hover,
.bn-item.active {
  color: var(--blue-light);
}
.bn-item.active i { transform: scale(1.12); }

.bn-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue-light);
}


.bn-badge {
  position: absolute;
  top: 4px; right: calc(50% - 16px);
  background: var(--blue);
  color: #fff;
  font-size: .48rem; font-weight: 800;
  min-width: 14px; height: 14px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--bottom-nav-bg);
}


.bn-wallet-bal {
  font-size: .52rem;
  color: var(--blue-light);
  font-weight: 700;
  margin-top: -2px;
}

@media (max-width: 680px) {
  .bottom-nav { display: block; }

  .nav-links a[data-hide-mobile] { display: none; }
}

/* Theme toggle */
.theme-toggle {
  background: var(--bg-float); border: 1px solid var(--border-md);
  border-radius: 8px; padding: 2px; gap: 1px;
}
.theme-toggle-wrapper { cursor: pointer; user-select: none; display: flex; align-items: center; transition: transform 0.2s ease; }
.theme-toggle-wrapper:hover { transform: scale(1.05); }
.theme-toggle-track {
  display: flex; align-items: center; justify-content: space-between;
  width: 62px; height: 26px; background: rgba(79, 70, 229, 0.12);
  border-radius: 20px; position: relative; padding: 0 5px;
  transition: all 0.3s ease; border: 1px solid var(--border-md);
}
.theme-toggle-track:hover { background: rgba(79, 70, 229, 0.2); }
.theme-toggle-track i {
  font-size: 0.62rem; transition: all 0.3s ease; z-index: 1;
  opacity: 0.5;
}
.theme-toggle-track .theme-icon-dark { color: #60a5fa; }
.theme-toggle-track .theme-icon-auto { color: #a78bfa; }
.theme-toggle-track .theme-icon-light { color: #f59e0b; }
.theme-toggle-ball {
  position: absolute; top: 4px; left: 4px; width: 16px; height: 16px;
  background: white; border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.theme-toggle-wrapper[data-theme="dark"] .theme-toggle-ball { transform: translateX(0); }
.theme-toggle-wrapper[data-theme="auto"] .theme-toggle-ball { transform: translateX(18px); }
.theme-toggle-wrapper[data-theme="light"] .theme-toggle-ball { transform: translateX(37px); }
.theme-toggle-wrapper[data-theme="dark"] .theme-icon-dark,
.theme-toggle-wrapper[data-theme="auto"] .theme-icon-auto,
.theme-toggle-wrapper[data-theme="light"] .theme-icon-light { opacity: 1; }

/* ══ NOTIFICATION BELL (navbar — user) ══ */
.nav-bell-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--border-md);
  border-radius: 7px; cursor: pointer;
  color: var(--text-sub); font-size: .76rem;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.nav-bell-btn:hover { background: var(--bg-float); border-color: var(--border-lg); color: var(--text); }
.nav-bell-btn.has-unread { color: var(--blue-light); border-color: rgba(79,70,229,.35); }
.nav-bell-badge {
  position: absolute; top: -5px; right: -5px;
  background: #ef4444; color: #fff;
  font-size: .46rem; font-weight: 800;
  min-width: 15px; height: 15px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  border: 1.5px solid var(--nav-bg);
  pointer-events: none;
}

/* User notification panel */
.nav-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: 94vw;
  background: var(--bg-raised);
  border: 1px solid var(--border-md);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
  z-index: 450;
  opacity: 0; transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .18s, transform .2s cubic-bezier(.34,1.4,.64,1);
  overflow: hidden;
}
.nav-notif-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

.nnp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.nnp-title { font-size: .82rem; font-weight: 700; color: var(--text); }
.nnp-mark-all {
  font-size: .65rem; font-weight: 600; color: var(--blue-light);
  background: none; border: none; cursor: pointer;
  padding: .18rem .45rem; border-radius: 5px;
  transition: background .14s;
}
.nnp-mark-all:hover { background: var(--blue-dim); }

.nnp-list {
  max-height: 340px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--border-md) transparent;
}
.nnp-list::-webkit-scrollbar { width: 3px; }
.nnp-list::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; }

.nnp-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding: 2.2rem 1rem;
  color: var(--text-muted); font-size: .75rem;
}
.nnp-empty i { font-size: 1.4rem; opacity: .4; }

.nnp-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem 1rem;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
  position: relative;
}
.nnp-item:last-child { border-bottom: none; }
.nnp-item:hover { background: var(--bg-hover); }
.nnp-item.unread { background: rgba(79,70,229,.04); }
.nnp-item.unread::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--blue-light); border-radius: 0 2px 2px 0;
}
.nnp-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; flex-shrink: 0; margin-top: 1px;
  background: var(--bg-float);
}
.nnp-body { flex: 1; min-width: 0; }
.nnp-item-title {
  font-size: .75rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.nnp-item-msg {
  font-size: .67rem; color: var(--text-sub); line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.nnp-item-time { font-size: .58rem; color: var(--text-muted); margin-top: 3px; }

.nnp-footer {
  display: block; text-align: center;
  padding: .6rem; font-size: .7rem; font-weight: 600;
  color: var(--blue-light);
  border-top: 1px solid var(--border);
  transition: background .14s;
  text-decoration: none;
}
.nnp-footer:hover { background: var(--blue-dim); }

/* ══ ADMIN NOTIFICATION BELL ══ */
.adm-bell-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--border-md);
  border-radius: 8px; cursor: pointer;
  color: var(--text-sub); font-size: .82rem;
  transition: background .15s, color .15s, border-color .15s;
}
.adm-bell-btn:hover { background: var(--bg-float); color: var(--text); }
.adm-bell-btn.has-unread { color: #f59e0b; border-color: rgba(245,158,11,.35); }
.adm-bell-badge {
  position: absolute; top: -5px; right: -5px;
  background: #ef4444; color: #fff;
  font-size: .44rem; font-weight: 800;
  min-width: 14px; height: 14px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 1.5px solid var(--adm-topbar-bg, #07091a);
  pointer-events: none;
}

.adm-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: min(340px, calc(100vw - 24px));
  background: var(--bg-raised);
  border: 1px solid var(--border-md);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  z-index: 500;
  opacity: 0; transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .18s, transform .2s cubic-bezier(.34,1.4,.64,1);
  overflow: hidden;
}
.adm-notif-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

@media (max-width: 500px) {
  .adm-notif-panel {
    position: fixed;
    top: var(--adm-topbar-h, 60px);
    left: 12px; right: 12px;
    width: auto; max-width: none;
  }
}

.anp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
}
.anp-title { font-size: .82rem; font-weight: 700; color: var(--text); }
.anp-mark-all {
  font-size: .65rem; font-weight: 600; color: var(--blue-light);
  background: none; border: none; cursor: pointer;
  padding: .18rem .45rem; border-radius: 5px; transition: background .14s;
}
.anp-mark-all:hover { background: var(--blue-dim); }

.anp-list {
  max-height: 380px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-md) transparent;
}
.anp-list::-webkit-scrollbar { width: 3px; }
.anp-list::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; }

.anp-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding: 2.2rem 1rem;
  color: var(--text-muted); font-size: .75rem;
}
.anp-empty i { font-size: 1.4rem; opacity: .4; }

.anp-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem 1rem;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--border);
  transition: background .12s; position: relative; cursor: pointer;
}
.anp-item:last-child { border-bottom: none; }
.anp-item:hover { background: var(--bg-hover); }
.anp-item.unread { background: rgba(245,158,11,.04); }
.anp-item.unread::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #f59e0b; border-radius: 0 2px 2px 0;
}
.anp-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; flex-shrink: 0; margin-top: 1px;
  background: var(--bg-float);
}
.anp-body { flex: 1; min-width: 0; }
.anp-item-title {
  font-size: .75rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anp-item-msg { font-size: .67rem; color: var(--text-sub); margin-top: 2px; line-height: 1.4; }
.anp-item-time { font-size: .58rem; color: var(--text-muted); margin-top: 3px; }

.anp-footer {
  display: block; text-align: center;
  padding: .6rem; font-size: .7rem; font-weight: 600;
  color: var(--blue-light); border-top: 1px solid var(--border);
  transition: background .14s; text-decoration: none;
}
.anp-footer:hover { background: var(--blue-dim); }

/* ══ SEARCH BUTTON (navbar) ══ */
.nav-search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--border-md);
  border-radius: 7px; cursor: pointer;
  color: var(--text-sub); font-size: .76rem;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  flex-shrink: 0;
}
.nav-search-btn:hover {
  background: var(--bg-float);
  border-color: var(--border-lg);
  color: var(--text);
}

/* The navbar's appearance slider is the SAME control as the drawer's — see
   the note in includes/nav.php — so it inherits every rule from
   .theme-toggle-wrapper and needs nothing of its own but a little room. */
#theme-toggle-wrapper-nav { flex-shrink: 0; margin-right: .1rem; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-wrapper, .theme-toggle-ball { transition: none; }
  .theme-toggle-wrapper:hover { transform: none; }
}

/* ══ SEARCH MODAL ══ */
.search-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(3rem,8vw,6rem) 1rem 1rem;
  pointer-events: none;
  transition: background .22s, backdrop-filter .22s;
}
.search-overlay.open {
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  pointer-events: all;
}

.search-modal {
  width: 100%; max-width: 620px;
  background: var(--bg-raised);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  transform: translateY(-16px) scale(.97);
  opacity: 0;
  transition: transform .24s cubic-bezier(0.34,1.56,0.64,1), opacity .18s;
}
.search-overlay.open .search-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Input row */
.search-input-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.search-input-icon {
  color: var(--text-muted); font-size: .9rem; flex-shrink: 0;
}
.search-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: .95rem; font-weight: 500;
  color: var(--text); font-family: inherit;
  caret-color: var(--blue-light);
}
.search-input::placeholder { color: var(--text-muted); }
.search-close-btn {
  background: var(--bg-float); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
  color: var(--text-muted); font-size: .75rem;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
  flex-shrink: 0;
}
.search-close-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Body */
.search-body {
  max-height: 480px;
  overflow-y: auto; overflow-x: hidden;
}
.search-body::-webkit-scrollbar { width: 3px; }
.search-body::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; }

/* Empty / no-result state */
.search-empty, .search-noresult {
  display: flex; flex-direction: column; align-items: center;
  padding: 2.5rem 1.5rem;
  text-align: center; gap: .4rem;
}
.search-empty-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--bg-float);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--text-muted);
  margin-bottom: .5rem;
}
.search-empty-title { font-size: .88rem; font-weight: 700; color: var(--text); }
.search-empty-sub { font-size: .75rem; color: var(--text-sub); max-width: 260px; line-height: 1.5; }

/* Loading spinner */
.search-loading {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; padding: 2rem;
  font-size: .8rem; color: var(--text-muted);
}
.search-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-md);
  border-top-color: var(--blue-light);
  animation: searchSpin .6s linear infinite;
}
@keyframes searchSpin { to { transform: rotate(360deg); } }

/* Results header */
.search-results-header {
  display: flex; align-items: center; gap: .4rem;
  padding: .65rem 1.1rem .4rem;
}
.search-results-count {
  font-size: .68rem; font-weight: 700;
  color: var(--blue-light);
  background: var(--blue-dim);
  padding: .1rem .45rem; border-radius: 99px;
}
.search-results-query {
  font-size: .68rem; color: var(--text-muted);
}

/* Result items */
.search-results-list { padding: .3rem .5rem .6rem; }
.search-result-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .65rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .12s;
  cursor: pointer;
}
.search-result-item:hover { background: var(--bg-hover); }
.search-result-item:hover .search-result-arrow { opacity: 1; transform: translateX(0); }

.search-result-img {
  width: 42px; height: 42px; border-radius: 9px;
  object-fit: cover; flex-shrink: 0;
  background: var(--bg-float);
  border: 1px solid var(--border);
}
.search-result-img-fallback {
  width: 42px; height: 42px; border-radius: 9px;
  background: var(--blue-dim);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-light); font-size: .9rem; flex-shrink: 0;
}

.search-result-body { flex: 1; min-width: 0; }
.search-result-game {
  font-size: .58rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 1px;
}
.search-result-name {
  font-size: .82rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-meta {
  font-size: .65rem; color: var(--text-sub); margin-top: 1px;
  display: flex; align-items: center; gap: .4rem;
}

.search-result-price-col {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex-shrink: 0;
}
.search-result-price {
  font-size: .82rem; font-weight: 800; color: var(--text);
}
.search-result-price.has-discount { color: var(--blue-light); }
.search-result-price-orig {
  font-size: .62rem; color: var(--text-muted);
  text-decoration: line-through;
}
.search-result-disc-badge {
  font-size: .52rem; font-weight: 700;
  background: rgba(34,197,94,.15); color: #4ade80;
  padding: .08rem .32rem; border-radius: 4px;
}
.search-result-arrow {
  color: var(--text-muted); font-size: .7rem; flex-shrink: 0;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .14s, transform .14s;
}
.search-result-item:hover .search-result-arrow { opacity: 1; transform: translateX(0); }

.sr-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .52rem; font-weight: 700;
  padding: .1rem .35rem; border-radius: 99px;
  vertical-align: middle;
}
.sr-badge-hot { background: rgba(239,68,68,.14); color: #f87171; }
.sr-badge-new { background: rgba(34,197,94,.14);  color: #4ade80; }
.sr-badge-oos { background: rgba(239,68,68,.1);   color: #f87171; }
.sr-currency  { font-size: .65rem; color: var(--text-muted); }

.sr-section-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
  padding: .55rem .75rem .2rem;
}

/* Banner slider */
.promotional-banner-container { margin: 0.5rem auto; position: relative; padding: 0.5rem; max-width: 100%; }
.heroSwiper { width: 100%; height: 280px; border-radius: 20px; overflow: visible; position: relative; }
.heroSwiper .swiper-slide { border-radius: 18px; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); transform: scale(0.85); opacity: 0.7; height: 280px; max-width: 500px; margin: 0 auto; pointer-events: none; }
.heroSwiper .swiper-slide-active, .heroSwiper .swiper-slide-prev, .heroSwiper .swiper-slide-next { pointer-events: auto; }
.heroSwiper .swiper-slide-active { transform: scale(1); opacity: 1; z-index: 2; }
.banner-slide-link { display: block; width: 100%; height: 100%; position: relative; text-decoration: none; overflow: hidden; border-radius: 18px; }
.banner-slide-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.banner-slide-link:hover img { transform: scale(1.1); }
.banner-slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)); opacity: 0; transition: opacity 0.4s ease; }
.banner-slide-link:hover .banner-slide-overlay { opacity: 1; }
.banner-slide-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2rem; z-index: 3; transform: translateY(20px); opacity: 0; transition: all 0.4s ease; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); }
.banner-slide-link:hover .banner-slide-content { transform: translateY(0); opacity: 1; }
.banner-slide-title { color: white; font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.banner-slide-text { color: rgba(255, 255, 255, 0.9); font-size: 1rem; line-height: 1.5; margin-bottom: 1.5rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.banner-slide-cta { display: inline-flex; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.2); padding: 0.75rem 1.5rem; border-radius: 50px; color: white; font-weight: 600; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; }
.banner-slide-cta:hover { background: rgba(255, 255, 255, 0.3); transform: translateX(5px); }
.banner-slide-cta i { transition: transform 0.3s ease; }
.banner-slide-cta:hover i { transform: translateX(3px); }
.banner-swiper-button-next, .banner-swiper-button-prev { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); }
.banner-swiper-button-next { right: 5px; }
.banner-swiper-button-prev { left: 5px; }
.banner-swiper-button-next:hover, .banner-swiper-button-prev:hover { background: rgba(30, 64, 175, 0.8); transform: translateY(-50%) scale(1.1); box-shadow: 0 8px 25px rgba(30, 64, 175, 0.4); }
.banner-swiper-pagination { margin-top: 0.8rem; display: flex; justify-content: center; gap: 4px; z-index: 10; }
.banner-swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: rgba(255, 255, 255, 0.5); opacity: 1; border-radius: 5px; transition: all 0.3s ease; cursor: pointer; }
.banner-swiper-pagination .swiper-pagination-bullet-active { background: var(--blue); width: 25px; transform: scale(1.1); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: .38rem .9rem; border-radius: 7px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap; line-height: 1.4;
  position: relative; overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s;
}
.btn:hover::after { background: rgba(255,255,255,0.05); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.btn i { font-size: .72rem; position: relative; z-index: 1; }

.btn-blue {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 1px 8px rgba(79,70,229,.25);
}
.btn-blue:hover {
  background: var(--blue-dark); border-color: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(79,70,229,.38);
}

.btn-ghost  { background: transparent; border-color: var(--border-md); color: var(--text-sub); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-light); background: var(--blue-dim); }

.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue-light); }
.btn-outline:hover { background: var(--blue-dim); }

.btn-surface { background: var(--bg-float); border-color: var(--border); color: var(--text); }
.btn-surface:hover { border-color: var(--border-md); background: var(--bg-hover); }

.btn-sm { padding: .25rem .62rem; font-size: .71rem; border-radius: 5px; }
.btn-lg { padding: .52rem 1.25rem; font-size: .85rem; border-radius: 8px; }
.btn-full { width: 100%; }

.btn-spinner {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin .55s linear infinite;
  display: none; flex-shrink: 0;
}
.btn.loading .btn-spinner { display: inline-block; }
.btn.loading .btn-text    { opacity: .65; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Cards */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.card:hover { border-color: var(--border-md); }

/* Forms */
.form-group { margin-bottom: .8rem; }
.form-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .67rem; font-weight: 600; color: var(--text-sub);
  margin-bottom: .3rem; letter-spacing: .5px; text-transform: uppercase;
}
.form-label a { font-size: .7rem; color: var(--blue-light); font-weight: 600; text-transform: none; letter-spacing: 0; }
.form-label a:hover { text-decoration: underline; }

.form-control {
  width: 100%; background: var(--bg-float);
  border: 1px solid var(--border-md); border-radius: 8px;
  padding: .5rem .88rem; color: var(--text);
  font-size: .84rem; font-family: 'Poppins', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  transition: border-color .14s, box-shadow .14s; outline: none;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.form-control.is-error { border-color: var(--error); }
.form-control.is-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.1); }

/* Small muted helper line under a form field — e.g. "We'll contact you here
   if verification is needed." Defined once globally so every product page
   gets it automatically; no page needs its own copy. */
.field-hint {
  font-size: .7rem; color: var(--text-sub); line-height: 1.6;
  margin-top: .5rem; display: flex; align-items: flex-start; gap: .4rem;
}

.form-error { font-size: .67rem; color: var(--error); margin-top: .22rem; display: none; }
.form-error.show { display: block; }

.input-wrap { position: relative; }
.input-icon {
  position: absolute; left: .78rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .75rem; pointer-events: none;
  transition: color .14s; width: 13px; text-align: center;
}
.input-wrap:focus-within .input-icon { color: var(--blue-light); }
.input-wrap .form-control { padding-left: 2.1rem; }
.input-icon-right {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .75rem; cursor: pointer;
  background: none; border: none; padding: 3px; transition: color .14s;
}
.input-icon-right:hover { color: var(--text); }
.form-control.has-right { padding-right: 2.1rem; }

.checkbox-wrap { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.checkbox-wrap input[type="checkbox"] { display: none; }
.checkbox-box {
  width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border-md); background: var(--bg-float);
  display: flex; align-items: center; justify-content: center;
  transition: all .14s; margin-top: 2px;
}
.checkbox-wrap input:checked ~ .checkbox-box { background: var(--blue); border-color: var(--blue); }
.checkbox-wrap input:checked ~ .checkbox-box::after {
  content: ''; display: block; width: 4px; height: 6px;
  border: 1.5px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}
.checkbox-label { font-size: .76rem; color: var(--text-sub); line-height: 1.5; }
.checkbox-label a { color: var(--blue-light); }
.checkbox-label a:hover { text-decoration: underline; }

/* Alerts */
.alert {
  padding: .55rem .82rem; border-radius: 8px;
  font-size: .77rem; font-weight: 500;
  border: 1px solid transparent;
  display: flex; align-items: flex-start; gap: 7px;
  margin-bottom: .8rem;
}
.alert i { margin-top: 1px; flex-shrink: 0; font-size: .75rem; }
.alert-error   { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.18);  color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.07);  border-color: rgba(34,197,94,.18);  color: #86efac; }
.alert-warning { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.18); color: #fcd34d; }
.alert-info    { background: var(--blue-dim);       border-color: rgba(79,70,229,.2);   color: var(--blue-light); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: .11rem .42rem; border-radius: 99px;
  font-size: .6rem; font-weight: 700; letter-spacing: .3px;
}
.badge i { font-size: .55rem; }
.badge-blue   { background: var(--blue-dim);        color: var(--blue-light); border: 1px solid rgba(79,70,229,.2); }
.badge-green  { background: rgba(34,197,94,.1);     color: #86efac;           border: 1px solid rgba(34,197,94,.2); }
.badge-red    { background: rgba(239,68,68,.1);     color: #fca5a5;           border: 1px solid rgba(239,68,68,.2); }
.badge-muted  { background: rgba(255,255,255,.05);  color: var(--text-muted); border: 1px solid var(--border); }
.badge-yellow { background: rgba(245,158,11,.12);   color: #fcd34d;           border: 1px solid rgba(245,158,11,.25); }
.badge-amber  { background: var(--amber-dim);        color: var(--amber);      border: 1px solid rgba(245,158,11,.2); }

/* Dividers */
.divider { border: none; border-top: 1px solid var(--border); }
.divider-text { display: flex; align-items: center; gap: .7rem; color: var(--text-muted); font-size: .72rem; }
.divider-text::before,
.divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Section labels */
.section-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .61rem; font-weight: 700;
  color: var(--blue-light); letter-spacing: 1.6px; text-transform: uppercase;
  margin-bottom: .4rem;
}
.section-label::before { content: ''; width: 12px; height: 2px; background: var(--blue-light); border-radius: 2px; }
.section-title { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 800; margin-bottom: .35rem; line-height: 1.22; }
.section-sub   { color: var(--text-sub); font-size: .82rem; line-height: 1.65; }

/* Ticker */
.ticker-bar { background: var(--bg-raised); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .5rem 0; overflow: hidden; }
.ticker-inner { display: flex; gap: 2.5rem; animation: ticker 30s linear infinite; width: max-content; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-item { display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--text-sub); white-space: nowrap; font-weight: 500; }
.ticker-item i { color: var(--blue-light); font-size: .5rem; }

/* Footer */
.footer {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  padding: clamp(1.8rem, 4vw, 2.8rem) 0 1.2rem;
  position: relative; z-index: 1;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2rem); }
.footer-logo-img { height: 20px; width: auto; filter: var(--logo-filter); transition: filter 0.2s; margin-bottom: .55rem; }
.footer-brand-desc { font-size: .74rem; color: var(--text-muted); line-height: 1.65; margin-bottom: .9rem; }
.footer-col-title { font-size: .58rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); margin-bottom: .65rem; }
.footer-col li { margin-bottom: .28rem; }
.footer-col a { font-size: .75rem; color: var(--text-muted); transition: color .14s; display: flex; align-items: center; gap: 5px; }
.footer-col a:hover { color: var(--blue-light); }
.footer-col a i { width: 11px; text-align: center; font-size: .68rem; }
.footer-bottom {
  margin-top: 1.6rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
  font-size: .67rem; color: var(--text-muted);
}
.social-row { display: flex; gap: 5px; }
.social-btn {
  width: 27px; height: 27px; border-radius: 6px;
  background: var(--bg-float); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--text-muted);
  transition: all .14s;
}
.social-btn:hover { border-color: var(--blue); color: var(--blue-light); background: var(--blue-dim); }

/* Payment Methods */
.payment-methods { margin-top: 1.1rem; }
.payment-methods-title { font-size: .62rem; font-weight: 700; color: var(--text-sub); margin-bottom: .5rem; letter-spacing: .8px; }
.payment-logos { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.payment-logo {
  height: 22px; width: auto;
  opacity: 0.9; transition: opacity .14s;
  background: #fff; border-radius: 4px; padding: 2px 4px;
}
.payment-logo:hover { opacity: 1; }

/* Page loader */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s, visibility .3s;
  display: none !important;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--bg-float);
  border-top-color: var(--blue-light);
  animation: spin .6s linear infinite;
}

/* Toast.
   Offset by whatever the bottom stack is showing (notices, service hours,
   the deal bar) — see includes/bottom-stack.php, which measures and
   publishes --nb-bottom-inset. It is 0px when the stack is empty, so
   nothing moves on a page with none of them. */
#toast-container {
  position: fixed; bottom: calc(72px + var(--nb-bottom-inset, 0px)); right: 1rem;
  z-index: 400; display: flex; flex-direction: column; gap: 6px;
  transition: bottom .22s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 681px) {
  #toast-container { bottom: calc(1rem + var(--nb-bottom-inset, 0px)); }
}
.toast {
  background: var(--bg-float); border: 1px solid var(--border-md);
  border-radius: 9px; padding: .55rem .88rem;
  font-size: .76rem; font-weight: 500;
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
  animation: toastIn .22s cubic-bezier(0.4,0,0.2,1);
  max-width: 280px;
}
.toast.success { border-color: rgba(34,197,94,.3); }
.toast.error   { border-color: rgba(239,68,68,.3); }
.toast.warning { border-color: rgba(245,158,11,.3); }
@keyframes toastIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }

/* Ambient glow */
.bg-ambient {
  position: fixed; pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,.045) 0%, transparent 68%);
}

/* Responsive banner & theme toggle */
@media (max-width: 1024px) {
  .heroSwiper { height: 250px; }
  .heroSwiper .swiper-slide { height: 230px; max-width: 450px; }
  .banner-slide-title { font-size: 1.5rem; }
  .banner-slide-content { padding: 1.5rem; }
  .banner-swiper-pagination { margin-top: -0.6rem; }
}

@media (max-width: 768px) {
  .promotional-banner-container { padding: 0.25rem; margin: 0.25rem auto; }
  .heroSwiper { height: 200px; }
  .heroSwiper .swiper-slide { height: 180px; max-width: 100%; transform: scale(0.95); }
  .heroSwiper .swiper-slide-active { transform: scale(1); }
  .banner-slide-title { font-size: 1.3rem; }
  .banner-slide-text { font-size: 0.9rem; }
  .banner-slide-content { padding: 1rem; }
  .banner-swiper-pagination { margin-top: -0.5rem; }
  .banner-swiper-button-next, .banner-swiper-button-prev { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .heroSwiper { height: 180px; }
  .heroSwiper .swiper-slide { height: 160px; }
  .banner-slide-title { font-size: 1.1rem; }
  .banner-slide-text { font-size: 0.8rem; margin-bottom: 1rem; }
  .banner-slide-cta { padding: 0.5rem 1rem; font-size: 0.9rem; }
  .banner-swiper-pagination { margin-top: -0.4rem; }
  .banner-swiper-button-next, .banner-swiper-button-prev { width: 35px; height: 35px; }
  .theme-toggle-track { width: 70px; height: 30px; }
  .theme-toggle-ball { width: 18px; height: 18px; }
  .theme-toggle-wrapper[data-theme="auto"] .theme-toggle-ball { transform: translateX(21px); }
  .theme-toggle-wrapper[data-theme="light"] .theme-toggle-ball { transform: translateX(44px); }
}

/* Responsive */
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: .75rem; } }
@media (max-width: 340px) { .footer-grid { grid-template-columns: 1fr; } }

/* OTP boxes */
.otp-row { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.2rem; }
.otp-box {
  width: 46px; height: 54px; text-align: center;
  font-size: 1.5rem; font-weight: 700;
  background: var(--bg-hover); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--text); caret-color: var(--blue-light);
  transition: border .15s;
}
.otp-box:focus    { outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.otp-box.is-error { border-color: var(--error); }
.otp-box-sm       { width: 42px; height: 50px; font-size: 1.4rem; }

/* Password strength */
.strength-bar  { height: 2px; border-radius: 99px; background: var(--bg-hover); margin-top: 3px; overflow: hidden; }
.strength-fill { height: 100%; border-radius: 99px; transition: width .28s, background .28s; width: 0; }
.strength-text { font-size: .65rem; margin-top: 2px; }

/* ═══════════════════════════════════════════════
   RAILS — one screen-width per game, swiped sideways
   Used by index.php and products/index.php; the markup comes from
   nb_rail_open()/nb_rail_card() in includes/home-sections.php and the
   scrolling from assets/js/rails.js.
   ═══════════════════════════════════════════════

   The homepage used to lay every category out in a wrapping grid, one
   grid per game. Twelve games with up to six categories each is a
   column of fifty-odd cards on a phone — several screens before the
   second game came into view, so everything under Free Fire may as
   well not have been there.

   Nothing was removed. Each game now gets one row you swipe through,
   which is the gesture a phone has trained everybody to use, and the
   whole catalogue fits in a page you can take in at a glance. */
.browse-head   { margin-bottom: 1rem; }
.game-block    { margin-bottom: clamp(1.1rem, 2.6vw, 1.7rem); }

.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .7rem; margin-bottom: .6rem;
}
.rail-title {
  display: flex; align-items: center; gap: .55rem;
  font-size: .92rem; font-weight: 800; letter-spacing: -.2px;
  min-width: 0;
}
.rail-title > i { color: var(--blue-light); font-size: .85rem; }
.rail-title-link { text-decoration: none; color: inherit; }
.rail-title-link:hover .rail-game-name { color: var(--blue-light); }
.rail-thumb {
  width: 36px; height: 36px; border-radius: 10px; object-fit: cover;
  border: 1.5px solid var(--border-md); flex-shrink: 0; background: var(--bg-hover);
}
.rail-thumb-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-light); font-size: .9rem;
}
.rail-title-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rail-game-name {
  font-size: .88rem; font-weight: 800; display: flex; align-items: center;
  gap: .4rem; flex-wrap: wrap; transition: color .18s;
}
.rail-game-name .badge { font-size: .55rem; padding: 2px 6px; border-radius: 99px; }
.rail-game-sub { font-size: .63rem; color: var(--text-muted); font-weight: 500; }

.rail-tools { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.rail-all {
  font-size: .68rem; font-weight: 700; color: var(--blue-light); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--blue-dim); border: 1px solid rgba(79,70,229,.25);
  border-radius: 99px; padding: .25rem .68rem; transition: background .2s, gap .15s;
}
.rail-all:hover { background: rgba(79,70,229,.22); gap: 8px; }
/* "Clear" is not "See all" — it throws something away, so it does not get
   to look like the button that takes you somewhere. */
.rail-all.is-clear {
  background: transparent; border-color: var(--border-md); color: var(--text-muted);
}
.rail-all.is-clear:hover { background: var(--bg-hover); color: var(--text); gap: 5px; }
.rail-nav {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--text-sub); font-size: .6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s, border-color .18s, opacity .18s;
}
.rail-nav:hover { background: var(--blue-dim); color: var(--blue-light); border-color: rgba(79,70,229,.4); }
.rail-nav[disabled] { opacity: .3; cursor: default; }
.rail-nav[disabled]:hover { background: var(--bg-raised); color: var(--text-sub); border-color: var(--border); }

.rail {
  display: flex; gap: .6rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Bleed to the screen edge on a phone: a row that stops short of the
     edge reads as finished, and nobody swipes a row that looks
     finished. The padding puts the first card back where the rest of
     the page's content starts. */
  margin: 0 calc(-1 * clamp(.9rem, 3vw, 2rem));
  padding: .2rem clamp(.9rem, 3vw, 2rem) .5rem;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }

.rail-card {
  flex: 0 0 auto; width: 148px;
  scroll-snap-align: start;
  background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .26s cubic-bezier(.25,1,.5,1), border-color .22s, box-shadow .22s;
}
.rail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79,70,229,.42);
  box-shadow: 0 12px 30px rgba(0,0,0,.36), 0 0 0 1px rgba(79,70,229,.14);
}
.rail-card:active { transform: translateY(-1px) scale(.985); }

.rc-shot {
  position: relative; width: 100%; aspect-ratio: 6/4;
  background: linear-gradient(135deg, var(--bg-float), var(--bg-hover));
  overflow: hidden;
}
.rc-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: relative; z-index: 1;
  transition: transform .45s cubic-bezier(.25,1,.5,1);
}
.rail-card:hover .rc-shot img { transform: scale(1.07); }
/* Sits behind the image and shows through only when the image is
   missing or fails — so a broken artwork path is a game icon, not the
   grey box that used to read as "this product is broken". */
.rc-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: var(--blue); opacity: .3;
}
.rc-flag {
  position: absolute; top: .4rem; left: .4rem; z-index: 2;
  font-size: .54rem; font-weight: 800; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 99px; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.rc-flag-hot  { background: rgba(239,68,68,.9);  color: #fff; }
.rc-flag-new  { background: rgba(34,197,94,.9);  color: #06210f; }
.rc-flag-deal { background: rgba(245,158,11,.95); color: #1a1206; }

.rc-body { padding: .6rem .65rem .68rem; display: flex; flex-direction: column; gap: .16rem; flex: 1; }
.rc-name {
  font-size: .74rem; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-sub  { font-size: .6rem; color: var(--text-muted); line-height: 1.35;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-foot { margin-top: auto; padding-top: .3rem; display: flex; flex-direction: column; gap: 1px; }
.rc-price { font-size: .76rem; font-weight: 800; color: var(--blue-light);
            display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.rc-price s { font-size: .58rem; font-weight: 600; color: var(--text-muted); }
.rc-note  { font-size: .56rem; color: var(--text-muted); }

@media (max-width: 560px) { .rail-card { width: 132px; } }
@media (max-width: 360px) { .rail-card { width: 124px; } }

/* A finger already swipes. Two buttons that do what the finger does
   are two more things in the way on the screen with the least room. */
@media (hover: none), (max-width: 700px) {
  .rail-nav { display: none; }
}

/* One-category products, laid out rather than railed — see the note in
   index.php. Same card, so the page still reads as one system; only the
   container differs. */
.single-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
}
.single-grid .rail-card { width: auto; }
@media (max-width: 560px) {
  .single-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
  .rail-card, .rc-shot img { transition: none; }
  .rail-card:hover { transform: none; }
}