/* ═══════════════════════════════════════════════════════════════
   SUPERGROK STORE — PREMIUM DESIGN SYSTEM
   Hard-coded design tokens (NO arbitrary colors)
═══════════════════════════════════════════════════════════════ */

.svg-sprite {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

svg:not(.svg-sprite) {
  max-width: 100%;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ─── DESIGN TOKENS ─── */
:root {
  --cyan:    #00F0FF;
  --green:   #00FF66;
  --purple:  #9933FF;
  --red:     #FF3333;
  --bg:      #0B0F19;
  --bg-deep: #070A12;
  --glass:   rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --text:    #F0F4FF;
  --text-dim: rgba(240,244,255,0.55);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-cyan:   0 0 30px rgba(0,240,255,0.25);
  --shadow-green:  0 0 30px rgba(0,255,102,0.25);
  --shadow-purple: 0 0 30px rgba(153,51,255,0.25);
  --shadow-red:    0 0 30px rgba(255,51,51,0.25);

  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --header-h: 72px;
}

[data-theme="light"] {
  --cyan:    #0090AA;
  --green:   #008833;
  --purple:  #7722CC;
  --red:     #CC2222;
  --bg:      #F0F4F8;
  --bg-deep: #FFFFFF;
  --glass:   rgba(0,0,0,0.06);
  --glass-border: rgba(0,0,0,0.15);
  --text:    #0B0F19;
  --text-dim: rgba(11,15,25,0.7);

  --shadow-cyan:   0 0 20px rgba(0,144,170,0.15);
  --shadow-green:  0 0 20px rgba(0,136,51,0.15);
  --shadow-purple: 0 0 20px rgba(119,34,204,0.15);
  --shadow-red:    0 0 20px rgba(204,34,34,0.15);
}

[data-theme="light"] .header { background: rgba(255,255,255,0.75); }
[data-theme="light"] .header.scrolled { background: rgba(255,255,255,0.92); box-shadow: 0 4px 40px rgba(0,0,0,0.1); }
[data-theme="light"] .lang-dropdown { background: rgba(255,255,255,0.97); }
[data-theme="light"] .hero-dashboard { background: rgba(255,255,255,0.8); }
[data-theme="light"] .use-case-card { background: rgba(255,255,255,0.85); }
[data-theme="light"] .dropdown-menu { background: rgba(255,255,255,0.95); }
[data-theme="light"] .product-card { background: rgba(255,255,255,0.85); }
[data-theme="light"] .cart-drawer { background: rgba(255,255,255,0.97); }
[data-theme="light"] .toast { background: rgba(255,255,255,0.95); }
[data-theme="light"] .mobile-bottom-nav { background: rgba(255,255,255,0.95); }

[data-theme="light"] .dashboard-card,
[data-theme="light"] .db-stat,
[data-theme="light"] .trust-strip,
[data-theme="light"] .segment-tabs,
[data-theme="light"] .uc-tool-badge {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .seg-tab:hover:not(.active) {
  background: rgba(0,0,0,0.06);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Space Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ─── NOISE OVERLAY ─── */
.noise-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ─── GRID OVERLAY ─── */
.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,240,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* ─── AURORA ─── */
.aurora-container {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora-orb {
  position: absolute; border-radius: 50%; filter: blur(100px);
  animation: auroraFloat 20s ease-in-out infinite;
}
.aurora-orb-1 {
  width: 700px; height: 700px;
  top: -200px; left: -200px;
  background: radial-gradient(circle, rgba(0,240,255,0.12) 0%, transparent 70%);
  animation-duration: 22s;
}
.aurora-orb-2 {
  width: 600px; height: 600px;
  top: 10%; right: -150px;
  background: radial-gradient(circle, rgba(153,51,255,0.12) 0%, transparent 70%);
  animation-duration: 28s; animation-delay: -8s;
}
.aurora-orb-3 {
  width: 500px; height: 500px;
  bottom: 20%; left: 20%;
  background: radial-gradient(circle, rgba(0,255,102,0.08) 0%, transparent 70%);
  animation-duration: 18s; animation-delay: -4s;
}
.aurora-orb-4 {
  width: 400px; height: 400px;
  bottom: -100px; right: 25%;
  background: radial-gradient(circle, rgba(255,51,51,0.08) 0%, transparent 70%);
  animation-duration: 24s; animation-delay: -12s;
}
@keyframes auroraFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(60px,-40px) scale(1.08); }
  66% { transform: translate(-40px, 60px) scale(0.94); }
}

/* ─── MOUSE SPOTLIGHT ─── */
.mouse-spotlight {
  position: fixed; width: 600px; height: 600px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,240,255,0.05) 0%, transparent 65%);
  transition: transform 0.1s linear;
}

/* ─── TYPOGRAPHY ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 60%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
  background-size: 200% 200%;
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ─── HEADER ─── */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-h);
  background: rgba(7,10,18,0.75);
  backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.3s var(--transition-smooth), box-shadow 0.3s;
}
.header.scrolled {
  background: rgba(7,10,18,0.92);
  box-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; gap: 20px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.logo-icon { width: 34px; height: 34px; }
.logo-icon svg { width: 100%; height: 100%; }
.logo-text {
  font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
}
.logo-accent { color: var(--cyan); }

.header-nav {
  display: flex; gap: 24px; align-items: center; justify-content: center;
  flex: 1;
}
.header-link {
  font-size: 0.95rem; font-weight: 600; color: var(--text-dim); text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--transition-spring), text-shadow 0.2s;
}
.header-link:hover {
  color: var(--cyan); text-shadow: 0 0 12px rgba(0,240,255,0.4);
}
@media (max-width: 768px) {
  .header-nav { display: none; }
}

/* ─── CATEGORY PILLS BAR ───
 *
 * The rail owns the container chrome and the scroll affordances; the inner
 * .category-pills is just the scrolling track. Previously the track was the
 * container: it hid its own scrollbar with no arrows, no edge fade and no wheel
 * handler, so every pill past the right edge was unreachable with a mouse.
 * Scroll snapping is deliberately absent -- `x mandatory` on a dense strip of
 * small items fought both drag-panning and programmatic centering.
 */
.category-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 100px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-width: 100%;
  min-width: 0;
}

/* Edge fades: only painted while there is actually more to scroll to, so the
   strip never implies hidden content that isn't there. */
.category-rail::before,
.category-rail::after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.category-rail::before {
  left: 1px;
  border-radius: 100px 0 0 100px;
  background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 12%, rgba(15, 23, 42, 0));
}
.category-rail::after {
  right: 1px;
  border-radius: 0 100px 100px 0;
  background: linear-gradient(to left, rgba(15, 23, 42, 0.95) 12%, rgba(15, 23, 42, 0));
}
.category-rail.can-scroll-left::before,
.category-rail.can-scroll-right::after { opacity: 1; }

.rail-nav {
  flex: 0 0 auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.92);
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.rail-nav svg { width: 16px; height: 16px; }
.rail-nav:hover {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.45);
  color: #ffffff;
  transform: scale(1.08);
}
.rail-nav:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.rail-nav[hidden] { display: none; }

.category-pills {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  align-items: center;
  overscroll-behavior-x: contain;
}

.category-pills::-webkit-scrollbar {
  display: none;
}

/* Drag-to-pan: the grab cursor is the hint that the strip is draggable. */
.category-pills.is-draggable { cursor: grab; }
.category-pills.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.category-pills.is-dragging .pill { pointer-events: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  white-space: nowrap;
  flex: 0 0 auto;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pill:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.pill-icon {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.pill-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: inherit;
}

.pill-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
  line-height: 1.2;
}

.pill:hover {
  color: #ffffff;
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.15);
}

.pill:hover .pill-icon {
  transform: scale(1.2);
}

.pill:hover .pill-badge {
  background: rgba(0, 240, 255, 0.2);
  color: var(--cyan);
  border-color: rgba(0, 240, 255, 0.3);
}

.pill.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25) 0%, rgba(153, 51, 255, 0.2) 100%);
  color: #ffffff;
  border-color: rgba(0, 240, 255, 0.7);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.pill.active .pill-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
}

.pill.active .pill-title {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.pill.active .pill-badge {
  background: var(--cyan);
  color: #0b0f19;
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
  font-weight: 900;
}

[data-theme="light"] .category-rail {
  background: rgba(240, 244, 248, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .category-rail::before {
  background: linear-gradient(to right, rgba(240, 244, 248, 0.97) 12%, rgba(240, 244, 248, 0));
}
[data-theme="light"] .category-rail::after {
  background: linear-gradient(to left, rgba(240, 244, 248, 0.97) 12%, rgba(240, 244, 248, 0));
}
[data-theme="light"] .rail-nav {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  color: #475569;
}
[data-theme="light"] .rail-nav:hover {
  background: rgba(0, 180, 216, 0.14);
  border-color: rgba(0, 180, 216, 0.45);
  color: #0f172a;
}
[data-theme="light"] .pill {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
  color: #475569;
}
[data-theme="light"] .pill-badge {
  background: rgba(0, 0, 0, 0.06);
  color: #64748b;
  border-color: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .pill:hover {
  background: rgba(0, 240, 255, 0.12);
  color: #0f172a;
}
[data-theme="light"] .pill.active {
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.2) 0%, rgba(124, 58, 237, 0.15) 100%);
  color: #0f172a;
  border-color: #00b4d8;
}
[data-theme="light"] .pill.active .pill-badge {
  background: #00b4d8;
  color: #ffffff;
}
/* The cart is the one control that must never be the thing pushed off screen.
 * `flex-shrink: 0` here held this row at its full 970px at every width, so on a
 * 1280px viewport #cartToggle landed at x=1280 -- one pixel past the edge,
 * unclickable, and invisible to anything measuring it. The row now yields, the
 * two icon buttons keep their size, and the optional widgets drop out at the
 * widths where the arithmetic stops working: the decorative trust pill first,
 * then the currency widget, which is functional and so goes last.
 */
.header-actions {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 1; min-width: 0; justify-content: flex-end;
}
.header-actions .cart-btn,
.header-actions .theme-btn { flex-shrink: 0; }
.trust-badge-mini {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 700; color: var(--bg-deep);
  padding: 8px 18px; border: none;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--cyan), rgba(0,240,255,0.7));
  box-shadow: 0 0 15px rgba(0,240,255,0.25);
  text-decoration: none;
  transition: all 0.25s var(--transition-spring);
}
.trust-badge-mini:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 25px rgba(0,240,255,0.4);
}
.trust-badge-mini svg { width: 16px; height: 16px; }
.trust-badge-mini svg path[fill="#00F0FF"] { fill: var(--bg-deep); opacity: 0.3; }
.trust-badge-mini svg path[stroke="#00F0FF"] { stroke: var(--bg-deep); }
.trust-badge-mini svg path[stroke="#00FF66"] { stroke: var(--bg-deep); }
/* Declared after the base rules above, not before: a media query adds no
 * specificity, so an earlier `display: none` loses the cascade to a later
 * `display: inline-flex` at equal weight. The FX widget carries an inline
 * `display: flex` from the template, which only !important can outrank. */
@media (max-width: 1400px) {
  .trust-badge-mini { display: none; }
}
@media (max-width: 1150px) {
  .store-fx-widget { display: none !important; }
}
.cart-btn {
  position: relative; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); border-radius: 50%;
  background: var(--glass); color: var(--text); cursor: pointer;
  transition: all 0.2s var(--transition-spring);
}
.cart-btn svg { width: 20px; height: 20px; }
.cart-btn:hover {
  border-color: var(--cyan); box-shadow: var(--shadow-cyan);
  transform: scale(1.05);
}
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan); color: var(--bg-deep);
  font-size: 0.65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  animation: badgePop 0.3s var(--transition-spring);
}
/* Overshoots past its resting size and glows on the way, so a count change is
   noticeable even when the visitor is looking at the button, not the corner. */
@keyframes badgePop {
  0%   { transform: scale(0.2); box-shadow: 0 0 0 0 rgba(0,240,255,0.85); }
  45%  { transform: scale(1.55); box-shadow: 0 0 14px 6px rgba(0,240,255,0.55); }
  72%  { transform: scale(0.9); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,240,255,0); }
}

.theme-btn {
  position: relative; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border); border-radius: 50%;
  background: var(--glass); color: var(--text); cursor: pointer;
  transition: all 0.2s var(--transition-spring);
}
.theme-btn:hover {
  border-color: var(--cyan); box-shadow: var(--shadow-cyan);
  transform: scale(1.05);
}

/* ─── LANGUAGE SWITCHER ─── */
.lang-switcher {
  position: relative;
}
.lang-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--text-dim);
  font-size: 0.78rem; font-weight: 700;
  transition: all 0.2s var(--transition-spring);
  white-space: nowrap;
}
.lang-btn:hover {
  color: var(--cyan); border-color: rgba(0,240,255,0.35);
  background: rgba(0,240,255,0.08);
}
/* Flags are inline SVG, not emoji: Windows ships no glyph for the regional-indicator
   pairs, so 🇬🇧 rendered as the literal letters "GB" in the dropdown. The hairline inset
   ring keeps the white bands of GB/ES/RU/IN from bleeding into the panel — so it has to
   invert with the theme, or it vanishes against the light panel it exists to separate. */
.lang-flag {
  width: 20px; height: 14px;
  flex-shrink: 0;
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  overflow: hidden;
}
[data-theme="light"] .lang-flag {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20);
}
.lang-flag-current { width: 19px; height: 13px; }
.lang-current { letter-spacing: 0.01em; }
.lang-arrow {
  width: 10px; height: 6px; transition: transform 0.2s;
}
.lang-btn[aria-expanded="true"] .lang-arrow { transform: rotate(180deg); }

/* Endonyms are wider than the old "EN" and the header also carries currency, theme,
   trust and cart. Below the nav/search breakpoint the trigger keeps only the flag —
   still a language control, just without the label competing for the row. */
@media (max-width: 768px) {
  .lang-btn { padding: 7px 10px; gap: 5px; }
  .lang-current { display: none; }
}

.lang-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: rgba(7,10,18,0.97);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(30px);
  min-width: 160px;
  overflow: hidden;
  /* visibility, not just opacity: neither opacity:0 nor pointer-events:none takes an
     element out of the sequential focus order, so the seven language buttons in here
     stayed tabbable while invisible -- seven presses with the focus ring nowhere on
     screen. Transitioned alongside opacity so it flips at the end of the fade out and
     at the start of the fade in, leaving the animation exactly as it was. */
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.2s var(--transition-smooth), transform 0.2s var(--transition-spring),
              visibility 0.2s var(--transition-smooth);
  z-index: 9999;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,240,255,0.05);
}
.lang-dropdown.open {
  opacity: 1; pointer-events: all; visibility: visible;
  transform: translateY(0) scale(1);
}
.lang-option {
  display: flex; align-items: center;
  width: 100%; padding: 11px 16px;
  font-size: 0.83rem; font-weight: 600;
  color: var(--text-dim); background: none; border: none; cursor: pointer;
  text-align: left; gap: 8px;
  transition: background 0.15s, color 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lang-option:last-child { border-bottom: none; }
.lang-option:hover { background: rgba(0,240,255,0.08); color: var(--text); }
.lang-option.active {
  color: var(--cyan);
  background: rgba(0,240,255,0.06);
}
.lang-option.active::after {
  content: '✓';
  margin-left: auto;
  font-size: 0.75rem;
}

/* ─── RTL SUPPORT ─── */
[dir="rtl"] .header-inner { flex-direction: row-reverse; }
[dir="rtl"] .hero-content { direction: rtl; }
[dir="rtl"] .hero-ctas { flex-direction: row-reverse; }
[dir="rtl"] .hero-stats { flex-direction: row-reverse; }
[dir="rtl"] .cart-drawer {
  right: auto; left: 0;
  border-left: none; border-right: 1px solid var(--glass-border);
  transform: translateX(-110%);
}
[dir="rtl"] .cart-drawer.open { transform: translateX(0); }
[dir="rtl"] .lang-dropdown { right: auto; left: 0; transform-origin: top left; }
[dir="rtl"] .lang-option { text-align: right; }
[dir="rtl"] .lang-option.active::after { margin-left: 0; margin-right: auto; }
[dir="rtl"] .footer-inner { direction: rtl; }
[dir="rtl"] .trust-item:not(:last-child) { border-right: none; border-left: 1px solid var(--glass-border); }
[dir="rtl"] .faq-q { text-align: right; }
[dir="rtl"] .faq-a { text-align: right; }
[dir="rtl"] .card-header { flex-direction: row-reverse; }
[dir="rtl"] .hero-eyebrow { flex-direction: row-reverse; }
[dir="rtl"] .plan-warranty { flex-direction: row-reverse; }

/* ─── HERO ─── */
.hero {
  position: relative; z-index: 2;
  padding: calc(var(--header-h) + 60px) 24px 60px;
  max-width: 1400px; margin: 0 auto;
}
.hero-content {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 20px;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.5); }
}
.hero-headline {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900; line-height: 1.08;
  letter-spacing: -0.03em; margin-bottom: 24px;
}
.hero-sub {
  font-size: 1.05rem; color: var(--text-dim); max-width: 480px;
  margin-bottom: 36px; line-height: 1.7;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 12px; font-weight: 700;
  font-size: 0.95rem; text-decoration: none;
  background: linear-gradient(135deg, var(--cyan), rgba(0,240,255,0.6));
  color: var(--bg-deep);
  box-shadow: 0 0 30px rgba(0,240,255,0.35), 0 4px 20px rgba(0,0,0,0.4);
  transition: all 0.25s var(--transition-spring);
}
.btn-primary svg { width: 18px; height: 18px; }
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 50px rgba(0,240,255,0.5), 0 8px 30px rgba(0,0,0,0.5);
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: 12px; font-weight: 700;
  font-size: 0.95rem; text-decoration: none;
  border: 1px solid rgba(0,255,102,0.35);
  color: var(--green); background: rgba(0,255,102,0.06);
  transition: all 0.25s var(--transition-spring);
}
.btn-secondary svg { width: 18px; height: 18px; }
.btn-secondary:hover {
  border-color: var(--green); background: rgba(0,255,102,0.12);
  box-shadow: 0 0 30px rgba(0,255,102,0.25); transform: translateY(-2px);
}
.hero-stats {
  display: flex; align-items: center; gap: 24px;
}
/* Ships hidden and is revealed by app.js once /api/public/stats answers, so the
   counters never animate up to a number nobody measured. Stated because the display
   above outranks the UA sheet's [hidden] rule -- without this the block is visible at
   0/0/0 for the length of the fetch, and permanently if it fails. Same reason as the
   note on .price-was[hidden]. */
.hero-stats[hidden] { display: none; }
.stat { display: flex; flex-direction: column; }
.stat-val-wrap { display: flex; align-items: baseline; }
.stat-num {
  font-size: 1.8rem; font-weight: 900; color: var(--cyan);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-suffix { font-size: 1.2rem; font-weight: 900; color: var(--cyan); }
.stat-label { font-size: 0.75rem; color: var(--text-dim); font-weight: 500; margin-top: 2px; }
.stat-divider { width: 1px; height: 40px; background: var(--glass-border); }

/* HERO DASHBOARD */
.hero-right { display: flex; justify-content: center; }
.hero-dashboard {
  position: relative;
  background: rgba(11,15,25,0.8);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px; width: 340px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 80px rgba(0,240,255,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: dashboardFloat 6s ease-in-out infinite;
}
@keyframes dashboardFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.dashboard-glow {
  position: absolute; inset: -1px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(153,51,255,0.1), rgba(0,255,102,0.1));
  z-index: -1; filter: blur(2px);
}
.dashboard-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  margin-bottom: 10px;
  transition: transform 0.3s var(--transition-spring);
}
.dashboard-card:hover { transform: translateX(4px); }
.db-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.db-icon.cyan   { background: rgba(0,240,255,0.12); }
.db-icon.purple { background: rgba(153,51,255,0.12); }
.db-icon.green  { background: rgba(0,255,102,0.12); }
.db-info { flex: 1; }
.db-name  { display: block; font-size: 0.82rem; font-weight: 600; }
.db-price { display: block; font-size: 0.9rem; font-weight: 800; color: var(--cyan); }
.db-badge {
  padding: 3px 8px; border-radius: 100px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
}
.pulse-green  { background: rgba(0,255,102,0.15); color: var(--green); animation: badgePulse 2s infinite; }
.pulse-cyan   { background: rgba(0,240,255,0.15); color: var(--cyan);  animation: badgePulse 2.4s infinite; }
.pulse-purple { background: rgba(153,51,255,0.15); color: var(--purple); animation: badgePulse 1.8s infinite; }
@keyframes badgePulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.6; }
}
.dashboard-stat-row {
  display: flex; gap: 10px; margin-top: 4px;
}
.db-stat {
  flex: 1; padding: 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border);
  display: flex; flex-direction: column; gap: 4px;
}
.db-stat-label { font-size: 0.68rem; color: var(--text-dim); font-weight: 500; }
.db-stat-val   { font-size: 0.8rem; font-weight: 700; }
.db-stat-val.cyan  { color: var(--cyan); }
.db-stat-val.green { color: var(--green); }

/* TRUST STRIP */
.trust-strip {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-top: 60px; padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.trust-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; font-size: 0.82rem; font-weight: 600; color: var(--text-dim);
}
.trust-item:not(:last-child) { border-right: 1px solid var(--glass-border); }
.trust-icon { font-size: 1rem; }

/* ─── FLASH BANNER ─── */
.flash-banner {
  position: relative; z-index: 2;
  background: linear-gradient(90deg, rgba(255,51,51,0.08) 0%, rgba(153,51,255,0.08) 50%, rgba(255,51,51,0.08) 100%);
  border-top: 1px solid rgba(255,51,51,0.2); border-bottom: 1px solid rgba(255,51,51,0.2);
  padding: 14px 24px;
}
.flash-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  flex-wrap: wrap;
}
.flash-icon { font-size: 1.2rem; animation: flashWave 1.5s ease-in-out infinite alternate; }
@keyframes flashWave { from { transform: scale(1); } to { transform: scale(1.2); } }
.flash-text { font-weight: 700; font-size: 0.9rem; color: var(--red); letter-spacing: 0.05em; }
.flash-timer { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.timer-block {
  background: rgba(255,51,51,0.12); border: 1px solid rgba(255,51,51,0.2);
  border-radius: 8px; padding: 6px 12px;
  font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums;
  min-width: 48px; text-align: center;
}
.timer-block small { font-size: 0.6rem; display: block; color: var(--text-dim); font-weight: 500; }

/* ─── SECTION HEADER ─── */
.section-header { text-align: center; margin-bottom: 48px; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -0.02em; }
.section-sub { color: var(--text-dim); font-size: 1rem; margin-top: 10px; }

/* ─── USE CASES SECTION ─── */
.use-cases {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto;
  padding: 20px 24px 60px;
}
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.use-case-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 32px 24px; text-align: center;
  background: rgba(11,15,25,0.85);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  transition: transform 0.35s var(--transition-spring), box-shadow 0.35s;
}
.use-case-card:hover { transform: translateY(-6px); }
.uc-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 20px;
}
.uc-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 12px; }
.uc-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }

.uc-cyan { border-top: 2px solid var(--cyan); }
.uc-cyan:hover { box-shadow: var(--shadow-cyan); border-color: rgba(0,240,255,0.3); }
.uc-cyan .uc-icon { background: rgba(0,240,255,0.1); border: 1px solid rgba(0,240,255,0.2); }

.uc-purple { border-top: 2px solid var(--purple); }
.uc-purple:hover { box-shadow: var(--shadow-purple); border-color: rgba(153,51,255,0.3); }
.uc-purple .uc-icon { background: rgba(153,51,255,0.1); border: 1px solid rgba(153,51,255,0.2); }

.uc-green { border-top: 2px solid var(--green); }
.uc-green:hover { box-shadow: var(--shadow-green); border-color: rgba(0,255,102,0.3); }
.uc-green .uc-icon { background: rgba(0,255,102,0.1); border: 1px solid rgba(0,255,102,0.2); }

.use-cases-grid.large-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 30px;
}
.uc-video-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.uc-video-wrapper {
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--glass-border);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.uc-video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.uc-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.uc-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.uc-desc {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}
.uc-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.uc-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
}
.tool-icon {
  font-size: 1rem;
}

/* ─── SMART FILTERS & SEARCH ─── */
.search-container {
  flex: 0 1 300px;
  width: 100%;
  max-width: 300px;
  margin: 0;
  position: relative;
  z-index: 10;
}
.search-input-wrapper {
  position: relative;
  width: 100%;
}
.nav-search-container {
  position: relative;
  width: 220px;
  margin-right: 15px;
}
.nav-search-input {
  padding: 8px 16px 8px 36px !important;
  font-size: 0.85rem !important;
}
.nav-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: rgba(11,15,25,0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 100;
}
.nav-search-suggestions.active {
  display: flex;
}
.nav-suggestion-item {
  padding: 10px 16px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s;
}
.nav-suggestion-item:hover {
  background: rgba(0, 240, 255, 0.1);
}
.nav-suggestion-icon {
  font-size: 1.2rem;
}
.nav-suggestion-title {
  font-size: 0.9rem;
  font-weight: 600;
}
.nav-suggestion-empty {
  padding: 12px;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}
@media (max-width: 768px) {
  .nav-search-container { display: none; }
  .search-container { flex-basis: 100%; max-width: 100%; margin-bottom: 15px; }
}

.no-results-msg {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-dim);
  font-size: 1.1rem;
  background: var(--glass);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--glass-border);
  margin-top: 20px;
}
.no-results-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 12px; opacity: 0.8; }
.no-results-title { font-weight: 700; color: var(--text); margin: 0 0 6px; }
.no-results-hint { font-size: 0.92rem; margin: 0; color: var(--text-dim); }
.no-results-hint:empty { display: none; }
.no-results-reset {
  margin-top: 18px;
  padding: 10px 22px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0b0f19;
  background: var(--cyan);
  border: 1px solid var(--cyan);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.no-results-reset:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 240, 255, 0.35); }
.no-results-reset:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ─── ACTIVE FILTER SUMMARY ───
 * Makes the current filter state visible and, more importantly, escapable:
 * before this, a narrow combination just produced an empty grid whose message
 * blamed stock ("not available at the moment") rather than the filters.
 */
.filter-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -20px 0 30px;
}
.filter-summary[hidden] { display: none; }
.filter-count {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-dim);
}
.filter-count strong { color: var(--text); font-weight: 800; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  animation: chipIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, color 0.2s ease;
}
.filter-chip-remove:hover { background: var(--cyan); color: #0b0f19; }
.filter-chip-remove:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.clear-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--glass-border);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.clear-all-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.clear-all-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.clear-all-btn[hidden] { display: none; }

[data-theme="light"] .filter-chip {
  background: rgba(0, 180, 216, 0.12);
  border-color: rgba(0, 180, 216, 0.35);
}
[data-theme="light"] .filter-chip-remove { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .filter-chip-remove:hover { background: #00b4d8; color: #ffffff; }
[data-theme="light"] .no-results-reset { background: #00b4d8; border-color: #00b4d8; color: #ffffff; }

/* Respect a reduced-motion preference: the springy pill/chip transforms are
   decoration, and the auto-centering scroll below is switched to instant in JS. */
@media (prefers-reduced-motion: reduce) {
  .pill,
  .pill-icon,
  .pill-badge,
  .rail-nav,
  .no-results-reset {
    transition: none;
  }
  .pill:hover,
  .pill.active,
  .rail-nav:hover,
  .no-results-reset:hover { transform: none; }
  .filter-chip { animation: none; }
}
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 14px 20px 14px 44px;
  border-radius: 100px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  backdrop-filter: blur(12px);
  transition: all 0.3s var(--transition-spring);
}
.search-input:hover {
  border-color: rgba(0,240,255,0.4);
}
.search-input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(11,15,25,0.9);
  box-shadow: 0 0 20px rgba(0,240,255,0.2);
}
.search-input::placeholder {
  color: var(--text-dim);
}
[data-theme="light"] .search-input {
  background: rgba(255,255,255,0.8);
  color: var(--text);
}
[data-theme="light"] .search-input:focus {
  background: #ffffff;
}
[dir="rtl"] .search-icon {
  left: auto;
  right: 16px;
}
[dir="rtl"] .search-input {
  padding: 14px 44px 14px 20px;
}

.smart-filters {
  display: flex; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; align-items: center;
}
.filter-group { display: flex; align-items: center; gap: 10px; position: relative; }
.filter-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-dim); }

.dropdown-wrapper {
  position: relative; min-width: 170px;
  outline: none;
}
.dropdown-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.25s var(--transition-spring);
  user-select: none;
}
.dropdown-wrapper:hover .dropdown-trigger,
.dropdown-wrapper:focus .dropdown-trigger {
  border-color: var(--cyan); background: rgba(0,240,255,0.08);
  box-shadow: 0 0 15px rgba(0,240,255,0.15);
}
.dropdown-wrapper.open .dropdown-trigger {
  border-color: var(--cyan); background: rgba(0,240,255,0.12);
  box-shadow: 0 0 20px rgba(0,240,255,0.2);
}
.dropdown-arrow {
  width: 16px; height: 16px; color: var(--cyan);
  transition: transform 0.3s var(--transition-spring);
}
.dropdown-wrapper.open .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: rgba(11,15,25,0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0,240,255,0.3);
  border-radius: var(--radius-sm);
  padding: 8px; z-index: 100;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,240,255,0.15);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s var(--transition-spring);
  transform-origin: top center;
}
.dropdown-wrapper.open .dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}

.dropdown-option {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 14px; border-radius: 8px;
  font-size: 0.85rem; font-weight: 500; color: var(--text-dim);
  cursor: pointer; transition: all 0.25s ease;
  position: relative; margin-bottom: 3px;
}
.dropdown-option-header {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.dropdown-option:hover {
  background: rgba(0,240,255,0.12); color: var(--text);
  box-shadow: inset 0 0 12px rgba(0,240,255,0.1);
}
.dropdown-option.active {
  background: rgba(0,240,255,0.18); color: var(--cyan); font-weight: 700;
  border-left: 3px solid var(--cyan);
}
.opt-desc {
  font-size: 0.75rem; color: rgba(255,255,255,0.55); margin-top: 3px; font-weight: 400; line-height: 1.35;
}
.opt-check {
  font-size: 0.8rem; opacity: 0; transform: scale(0);
  transition: all 0.2s var(--transition-spring);
}
.dropdown-option.active .opt-check {
  opacity: 1; transform: scale(1);
}

/* ─── PRODUCTS SECTION ─── */
.products-section {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto;
  padding: 60px 24px;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* ─── PRODUCT CARD BASE ─── */
.product-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 24px;
  background: rgba(11,15,25,0.85);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.35s var(--transition-spring), box-shadow 0.35s var(--transition-spring);
  transform-style: preserve-3d;
  will-change: transform;
  opacity: 0; 
}
.product-card.visible {
  animation: cardReveal 0.6s var(--transition-spring) forwards;
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.product-card:hover { transform: translateY(-6px) scale(1.01); }

/* Card Shine effect */
.card-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.3s, transform 0.5s;
  transform: translateX(-100%) skewX(-15deg);
}
.product-card:hover .card-shine { opacity: 1; transform: translateX(200%) skewX(-15deg); }

/* Glow border */
.card-glow-border {
  position: absolute; inset: -1px; border-radius: var(--radius-lg);
  pointer-events: none; z-index: 0; opacity: 0;
  transition: opacity 0.3s;
}
.product-card:hover .card-glow-border { opacity: 1; }

/* Color variants */
.cyan-card   { --card-accent: var(--cyan); --card-shadow: var(--shadow-cyan); }
.green-card  { --card-accent: var(--green); --card-shadow: var(--shadow-green); }
.purple-card { --card-accent: var(--purple); --card-shadow: var(--shadow-purple); }
.red-card    { --card-accent: var(--red); --card-shadow: var(--shadow-red); }

.cyan-card:hover   { border-color: rgba(0,240,255,0.35); box-shadow: var(--shadow-cyan), 0 20px 60px rgba(0,0,0,0.5); }
.green-card:hover  { border-color: rgba(0,255,102,0.35); box-shadow: var(--shadow-green), 0 20px 60px rgba(0,0,0,0.5); }
.purple-card:hover { border-color: rgba(153,51,255,0.35); box-shadow: var(--shadow-purple), 0 20px 60px rgba(0,0,0,0.5); }
.red-card:hover    { border-color: rgba(255,51,51,0.35); box-shadow: var(--shadow-red), 0 20px 60px rgba(0,0,0,0.5); }

.cyan-card   .card-glow-border { background: linear-gradient(135deg, rgba(0,240,255,0.15), transparent); }
.green-card  .card-glow-border { background: linear-gradient(135deg, rgba(0,255,102,0.15), transparent); }
.purple-card .card-glow-border { background: linear-gradient(135deg, rgba(153,51,255,0.15), transparent); }
.red-card    .card-glow-border { background: linear-gradient(135deg, rgba(255,51,51,0.15), transparent); }

/* Badges */
.popular-tag {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0,240,255,0.2), rgba(153,51,255,0.2));
  border: 1px solid rgba(0,240,255,0.3);
  color: var(--cyan); font-size: 0.7rem; font-weight: 700;
  padding: 4px 12px; border-radius: 100px; white-space: nowrap;
  animation: tagGlow 2s ease-in-out infinite alternate;
}
@keyframes tagGlow { from { box-shadow: none; } to { box-shadow: 0 0 12px rgba(0,240,255,0.3); } }
.savings-badge {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,51,51,0.15); border: 1px solid rgba(255,51,51,0.3);
  color: var(--red); font-size: 0.68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 100px;
}

/* Card Header */
.card-header {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; position: relative; z-index: 2;
}
.card-icon-wrap {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.cyan-icon   { background: rgba(0,240,255,0.1); border: 1px solid rgba(0,240,255,0.2); }
.green-icon  { background: rgba(0,255,102,0.1); border: 1px solid rgba(0,255,102,0.2); }
.purple-icon { background: rgba(153,51,255,0.1); border: 1px solid rgba(153,51,255,0.2); }
.red-icon    { background: rgba(255,51,51,0.1); border: 1px solid rgba(255,51,51,0.2); }
.card-title-group { flex: 1; }
.card-title { font-size: 1rem; font-weight: 800; }
.card-subtitle { font-size: 0.75rem; color: var(--text-dim); font-weight: 500; }
.instant-badge {
  font-size: 0.65rem; font-weight: 700; padding: 4px 10px; border-radius: 100px;
  background: rgba(0,240,255,0.1); border: 1px solid rgba(0,240,255,0.2); color: var(--cyan);
  white-space: nowrap;
}
.pulse-badge { animation: pulseBadge 2.5s ease-in-out infinite; }
@keyframes pulseBadge {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,240,255,0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(0,240,255,0); }
}

/* Segment Tabs */
.segment-tabs {
  display: flex; gap: 6px; background: rgba(255,255,255,0.04);
  border-radius: 10px; padding: 4px;
  position: relative; z-index: 2;
  /* A family can hold seven variants ("ChatGPT"); on a ~300px card a single row of
     nowrap tabs overflows, so tabs wrap onto a second line instead of clipping. */
  flex-wrap: wrap;
}
.seg-tab {
  flex: 1; padding: 8px 4px; border-radius: 8px; cursor: pointer;
  font-size: 0.72rem; font-weight: 700; color: var(--text-dim); border: none;
  background: transparent;
  transition: all 0.2s var(--transition-spring);
  white-space: nowrap;
}
.seg-tab.active {
  background: var(--glass); color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.cyan-card   .seg-tab.active { color: var(--cyan); box-shadow: 0 0 12px rgba(0,240,255,0.2); }
.green-card  .seg-tab.active { color: var(--green); box-shadow: 0 0 12px rgba(0,255,102,0.2); }
.purple-card .seg-tab.active { color: var(--purple); box-shadow: 0 0 12px rgba(153,51,255,0.2); }
.red-card    .seg-tab.active { color: var(--red); box-shadow: 0 0 12px rgba(255,51,51,0.2); }
.seg-tab:hover:not(.active) { background: rgba(255,255,255,0.06); color: var(--text); }

/* Plan Details */
.plan-details { position: relative; z-index: 2; }
.plan-desc {
  font-size: 0.78rem; color: var(--text-dim); line-height: 1.55; margin-bottom: 10px;
  min-height: 36px;
  transition: opacity 0.3s;
}
/* Two children, stacked, because the name is the product and the blurb is prose about
   it -- run together on one line they read as a single sentence with a stray title in
   front of it. Both are `hidden` when their column is empty, and `display:block` on a
   hidden element would still reserve a line, so the attribute has to win. */
.plan-name { display: block; color: var(--text); font-weight: 600; }
.plan-blurb { display: block; }
.plan-name[hidden], .plan-blurb[hidden] { display: none; }
.plan-warranty {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; color: var(--text-dim);
  margin-bottom: 8px;
}
.warranty-icon { font-size: 0.85rem; }
.warranty-bar-wrap {
  height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden;
}
.warranty-bar {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), rgba(0,240,255,0.4));
  transition: width 0.5s var(--transition-spring);
}
.green-bar  { background: linear-gradient(90deg, var(--green), rgba(0,255,102,0.4)); }
.purple-bar { background: linear-gradient(90deg, var(--purple), rgba(153,51,255,0.4)); }
.red-bar    { background: linear-gradient(90deg, var(--red), rgba(255,51,51,0.4)); }

/* Price Row */
.card-price-row {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2;
  margin-top: auto;
}
.price-group { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-label { font-size: 0.75rem; color: var(--text-dim); font-weight: 500; }
/* The secondary currency line. Vibrant, colorful, glowing pill display for converted PKR values. */
.fx-alt-price {
  font-size: 0.8rem;
  font-weight: 700;
  color: #00FFCC;
  background: linear-gradient(135deg, rgba(0, 255, 204, 0.15) 0%, rgba(0, 240, 255, 0.1) 100%);
  border: 1px solid rgba(0, 255, 204, 0.35);
  border-radius: 8px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 0 12px rgba(0, 255, 204, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.4);
  transition: all 0.3s ease;
  width: fit-content;
  margin-top: 4px;
}

.product-card:hover .fx-alt-price {
  background: linear-gradient(135deg, rgba(0, 255, 204, 0.25) 0%, rgba(0, 240, 255, 0.2) 100%);
  border-color: rgba(0, 255, 204, 0.6);
  box-shadow: 0 0 16px rgba(0, 255, 204, 0.35);
  transform: translateY(-1px);
}
.fx-refresh-btn.spinning { animation: fxSpin 0.8s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* ── Checkout: the payable amount in the shopper's own currency ──
   Same chip as a product card wears, scaled up: this one sits under a figure that has
   to be transferred by hand, so it is read carefully rather than glanced at. It is
   emitted by the shared renderFxConversions() in app.js, which means it appears only
   when a rate was actually fetched -- there is no styling here for an absent rate
   because there is no element for one. */
.pay-fx:empty { display: none; }
.pay-fx .fx-alt-price {
  font-size: 1rem;
  padding: 6px 13px;
  border-radius: 10px;
  margin-top: 10px;
}

/* Replayed by checkout.js on every currency switch. Without it the figure changes
   silently and the switch reads as having done nothing -- the chip is well below the
   selector that triggered it. */
.pay-fx .fx-alt-price.fx-flash {
  animation: fxFlash 0.55s var(--transition-spring, ease-out);
}
@keyframes fxFlash {
  0%   { transform: translateY(-3px) scale(0.94); opacity: 0.35; box-shadow: 0 0 26px rgba(0, 255, 204, 0.65); }
  60%  { transform: translateY(0) scale(1.03); opacity: 1; }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pay-fx .fx-alt-price.fx-flash { animation: none; }
}

.pay-fx-note {
  color: #a0a0b0;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 8px 0 0 0;
}
.pay-fx-note strong {
  color: #00FF66;
  font-family: monospace;
  font-weight: 700;
}
.price-amount {
  font-size: 1.9rem; font-weight: 900; color: var(--card-accent);
  font-variant-numeric: tabular-nums;
  transition: all 0.35s var(--transition-spring);
}
/* The price the shop was charging before the markdown. Deliberately quiet -- dimmed and
   about half the live figure's size -- because the only job it has is to give the number
   beside it a scale. Sized in rem rather than left to inherit so it stays legible next to
   a 1.9rem neighbour. The strikethrough comes from the <s> element, not from here. */
.price-was {
  font-size: 0.95rem; font-weight: 600; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 2px;
  opacity: 0.75;
}
/* The saving. Shaped like .instant-badge above so a card carrying both reads as one design
   rather than two, and green because this sheet already spends green on money saved --
   .discount-row at the cart. A saving is a saving wherever it is shown, so it gets
   the same colour in both places. It also
   means no new token: --green is redefined for the light theme with its contrast already
   taken care of, which a fresh hex here would not have been. */
.price-save {
  font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 100px;
  background: rgba(0, 255, 102, 0.1); border: 1px solid rgba(0, 255, 102, 0.28);
  color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
/* Stated rather than left to the UA sheet. Both are inline elements today, so [hidden]
   would hide them on its own -- but it is one `display` declaration away from silently
   not, which is how .view-note-btn[hidden] came to be needed. */
.price-was[hidden], .price-save[hidden] { display: none; }
[data-theme="light"] .price-save {
  background: rgba(0, 136, 51, 0.1);
  border-color: rgba(0, 136, 51, 0.3);
}
.stock-indicator {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600; color: var(--red);
}
.stock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); animation: stockPulse 1.5s ease-in-out infinite;
}
@keyframes stockPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.4); }
}

/* Add to Cart Button */
.add-to-cart-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 700; cursor: pointer; border: none;
  letter-spacing: 0.02em;
  position: relative; z-index: 2; overflow: hidden;
  transition: all 0.25s var(--transition-spring);
}
.add-to-cart-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.add-to-cart-btn::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.1); opacity: 0;
  transition: opacity 0.2s;
}
.add-to-cart-btn:hover::before { opacity: 1; }
.add-to-cart-btn:active { transform: scale(0.97); }
.cyan-btn {
  background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(0,240,255,0.08));
  border: 1px solid rgba(0,240,255,0.3); color: var(--cyan);
}
.cyan-btn:hover { box-shadow: 0 0 25px rgba(0,240,255,0.3); border-color: var(--cyan); transform: translateY(-2px); }
.green-btn {
  background: linear-gradient(135deg, rgba(0,255,102,0.2), rgba(0,255,102,0.08));
  border: 1px solid rgba(0,255,102,0.3); color: var(--green);
}
.green-btn:hover { box-shadow: 0 0 25px rgba(0,255,102,0.3); border-color: var(--green); transform: translateY(-2px); }
.purple-btn {
  background: linear-gradient(135deg, rgba(153,51,255,0.2), rgba(153,51,255,0.08));
  border: 1px solid rgba(153,51,255,0.3); color: var(--purple);
}
.purple-btn:hover { box-shadow: 0 0 25px rgba(153,51,255,0.3); border-color: var(--purple); transform: translateY(-2px); }
.red-btn {
  background: linear-gradient(135deg, rgba(255,51,51,0.2), rgba(255,51,51,0.08));
  border: 1px solid rgba(255,51,51,0.3); color: var(--red);
}
.red-btn:hover { box-shadow: 0 0 25px rgba(255,51,51,0.3); border-color: var(--red); transform: translateY(-2px); }

/* Hidden card */
.product-card.hidden { display: none; }

/* ─── HOW IT WORKS ─── */
.how-it-works {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; padding: 60px 24px;
}
.steps-grid {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap;
}
.step-card {
  flex: 1; min-width: 220px; max-width: 320px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 32px 24px; text-align: center;
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--transition-spring), box-shadow 0.3s;
}
.step-card:hover { transform: translateY(-6px); }
.step-num {
  font-size: 3.5rem; font-weight: 900; color: rgba(255,255,255,0.04);
  position: absolute; top: 8px; right: 16px; line-height: 1;
}
.step-icon {
  width: 64px; height: 64px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 16px;
}
.cyan-step   { background: rgba(0,240,255,0.1); border: 1px solid rgba(0,240,255,0.2); }
.green-step  { background: rgba(0,255,102,0.1); border: 1px solid rgba(0,255,102,0.2); }
.purple-step { background: rgba(153,51,255,0.1); border: 1px solid rgba(153,51,255,0.2); }
.step-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
.step-desc  { font-size: 0.83rem; color: var(--text-dim); line-height: 1.6; }
.step-card:nth-child(1):hover { box-shadow: var(--shadow-cyan); border-color: rgba(0,240,255,0.25); }
.step-card:nth-child(3):hover { box-shadow: var(--shadow-green); border-color: rgba(0,255,102,0.25); }
.step-card:nth-child(5):hover { box-shadow: var(--shadow-purple); border-color: rgba(153,51,255,0.25); }
.step-arrow {
  font-size: 1.5rem; color: var(--text-dim);
  display: flex; align-items: center;
}

/* ─── CART OVERLAY ─── */
.cart-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }

/* ─── CART DRAWER ─── */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
  width: min(420px, 100vw);
  background: rgba(7,10,18,0.97);
  border-left: 1px solid var(--glass-border);
  backdrop-filter: blur(30px);
  display: flex; flex-direction: column;
  transform: translateX(110%);
  /* Off-screen is not hidden: a translated drawer keeps its close button, the per-item
     quantity and remove controls and both checkout buttons in the tab order, so keyboard
     focus walks off the side of the page. See the note on .lang-dropdown. */
  visibility: hidden;
  transition: transform 0.4s var(--transition-spring),
              visibility 0.4s var(--transition-spring);
}
.cart-drawer.open { transform: translateX(0); visibility: visible; }
.cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.cart-title { font-size: 1.1rem; font-weight: 800; }
.cart-close {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--glass-border);
  cursor: pointer; color: var(--text); font-size: 0.9rem;
  transition: all 0.2s;
}
.cart-close:hover { background: rgba(255,51,51,0.15); border-color: rgba(255,51,51,0.3); color: var(--red); }
.cart-items {
  flex: 1; overflow-y: auto; padding: 20px;
  scrollbar-width: thin; scrollbar-color: rgba(0,240,255,0.2) transparent;
}
.cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 12px; text-align: center; color: var(--text-dim);
}
.cart-empty-icon { font-size: 3rem; opacity: 0.3; }
.cart-empty-sub { font-size: 0.8rem; }

/* Cart item */
.cart-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--glass-border);
  margin-bottom: 10px;
  animation: itemSlide 0.35s var(--transition-spring);
}
@keyframes itemSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ci-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: rgba(0,240,255,0.08);
}
.ci-info { flex: 1; }
.ci-name  { font-size: 0.85rem; font-weight: 700; }
.ci-plan  { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }
.ci-price { font-size: 0.92rem; font-weight: 800; color: var(--cyan); }
.ci-remove {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--text-dim); font-size: 0.8rem;
  transition: all 0.2s;
}
.ci-remove:hover { background: rgba(255,51,51,0.1); border-color: rgba(255,51,51,0.3); color: var(--red); }

/* Cart Footer */
.cart-footer {
  padding: 20px; border-top: 1px solid var(--glass-border); flex-shrink: 0; max-height: 75vh; overflow-y: auto;
  position: relative; z-index: 10; pointer-events: auto;
}
.cart-summary { margin-bottom: 16px; }
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 0.85rem; color: var(--text-dim);
}
.discount-row { color: var(--green); }
.discount-val { font-weight: 700; }
.summary-divider { height: 1px; background: var(--glass-border); margin: 8px 0; }
.total-row { font-size: 1rem; font-weight: 800; color: var(--text); }
.checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; border-radius: var(--radius-sm); text-decoration: none;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white; font-weight: 800; font-size: 0.92rem;
  box-shadow: 0 4px 24px rgba(37,211,102,0.35);
  transition: all 0.25s var(--transition-spring);
  pointer-events: auto; position: relative; z-index: 10;
}
.checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,211,102,0.45); }

/* ─── TOAST NOTIFICATIONS ─── */
.toast-container {
  position: fixed; bottom: 100px; left: 50%;
  transform: translateX(-50%); z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.toast {
  background: rgba(7,10,18,0.95); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: 12px 20px;
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  backdrop-filter: blur(20px);
  animation: toastIn 0.4s var(--transition-spring) forwards;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  white-space: nowrap;
}
.toast.fade-out { animation: toastOut 0.3s ease forwards; }
.toast-cyan   { border-color: rgba(0,240,255,0.3); }
.toast-green  { border-color: rgba(0,255,102,0.3); }
.toast-purple { border-color: rgba(153,51,255,0.3); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

/* ─── RESTOCK ARRIVAL CARDS ───
   Deliberately not a .toast. That one is nowrap, centre-bottom and pointer-events:none
   for a reason -- it is a one-line status line nobody clicks. A restock is several lines,
   carries a link and a close button, and must be dismissible, so it gets its own stack.

   Top-right, below the header rather than under it: the header is fixed at --header-h and
   z-index 1000, and a card overlapping it covers the cart and the language switcher. This
   sits at 1900 -- above the page, below the cart drawer (1200) is not enough since the
   drawer's own overlay would cover it, and below the language dropdown (9999) so an open
   dropdown still wins the corner they share. */
.restock-stack {
  position: fixed; top: calc(var(--header-h) + 12px); right: 16px;
  z-index: 1900;
  display: flex; flex-direction: column; gap: 10px;
  width: min(340px, calc(100vw - 32px));
  /* The stack itself must not eat clicks in the gaps between cards; each card turns
     pointer events back on for itself. */
  pointer-events: none;
}
.restock-card {
  position: relative; pointer-events: auto;
  background: rgba(7,10,18,0.96);
  border: 1px solid rgba(0,255,102,0.35);
  border-radius: var(--radius-md);
  padding: 14px 38px 14px 16px;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), var(--shadow-green);
  animation: restockIn 0.45s var(--transition-spring) forwards;
  overflow: hidden;
}
.restock-card.fade-out { animation: restockOut 0.3s ease forwards; }
/* The 5-second life, drawn. A card that vanishes with no warning reads as a glitch;
   a draining bar says it is on a timer and that hovering stopped it. */
.restock-progress {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; transform-origin: left center;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  animation: restockDrain linear forwards;
}
.restock-card:hover .restock-progress,
.restock-card:focus-within .restock-progress { animation-play-state: paused; }
.restock-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 6px;
}
.restock-name {
  font-size: 0.86rem; font-weight: 700; color: var(--text);
  line-height: 1.35; margin-bottom: 8px;
  /* Wraps, unlike .toast. A product title is long and truncating it hides the thing
     the card exists to name. */
  overflow-wrap: anywhere;
}
.restock-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 0.72rem; color: var(--text-dim);
}
.restock-meta strong { color: var(--text); font-weight: 700; }
.restock-price { color: var(--cyan); font-weight: 800; }
.restock-cta {
  display: inline-block; margin-top: 10px;
  font-size: 0.74rem; font-weight: 700; color: var(--green);
  text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0; font-family: inherit;
}
.restock-cta:hover { text-decoration: underline; }
.restock-close {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
  border-radius: 6px; cursor: pointer;
  color: var(--text-dim); font-size: 0.8rem; line-height: 1;
  transition: color 0.2s, background 0.2s;
}
.restock-close:hover { color: var(--text); background: rgba(255,255,255,0.12); }
.restock-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@keyframes restockIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes restockOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(24px) scale(0.96); }
}
@keyframes restockDrain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
/* Full width on a phone, and above the bottom nav's stacking context but still under
   the header. The corner is too narrow at 360px for a 340px card plus a margin. */
@media (max-width: 480px) {
  .restock-stack {
    left: 12px; right: 12px; width: auto;
    top: calc(var(--header-h) + 8px);
  }
}
/* Motion off, timing kept: the card still leaves after its five seconds, it just does
   not slide or drain. The bar would otherwise be a moving element on a page that asked
   for none, and JS owns the dismissal either way. */
@media (prefers-reduced-motion: reduce) {
  .restock-card { animation: none; }
  .restock-card.fade-out { animation: none; opacity: 0; }
  .restock-progress { display: none; }
}

/* ─── FOOTER ─── */
.footer {
  position: relative; z-index: 2;
  border-top: 1px solid var(--glass-border);
  padding: 60px 24px 40px;
}
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-link-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-link { text-decoration: none; color: var(--text-dim); font-size: 0.85rem; transition: color 0.2s; }
.footer-link:hover { color: var(--cyan); }
.footer-tagline { font-size: 0.85rem; color: var(--text-dim); margin: 16px 0 24px; max-width: 340px; line-height: 1.65; }
.whatsapp-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--radius-md); text-decoration: none;
  background: linear-gradient(135deg, rgba(37,211,102,0.15), rgba(18,140,126,0.1));
  border: 1px solid rgba(37,211,102,0.3); color: #25D366;
  font-weight: 700; font-size: 1rem;
  transition: all 0.25s var(--transition-spring);
}
.whatsapp-cta svg { width: 22px; height: 22px; }
.whatsapp-cta:hover {
  background: rgba(37,211,102,0.2);
  box-shadow: 0 0 30px rgba(37,211,102,0.25); transform: translateY(-2px);
}
.footer-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 20px; color: var(--text); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.faq-q {
  padding: 14px 16px; font-size: 0.83rem; font-weight: 600; cursor: pointer;
  list-style: none; transition: color 0.2s;
}
.faq-q:hover { color: var(--cyan); }
.faq-item[open] .faq-q { color: var(--cyan); }
.faq-a { padding: 0 16px 14px; font-size: 0.8rem; color: var(--text-dim); line-height: 1.6; }
.footer-bottom { border-top: 1px solid var(--glass-border); padding-top: 28px; }
.footer-trust-badges {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.footer-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--glass-border);
  font-size: 0.78rem; font-weight: 600; color: var(--text-dim);
}
.footer-copy { font-size: 0.75rem; color: rgba(240,244,255,0.3); text-align: center; }

/* ─── FOOTER SOCIAL LINKS ─── */
.footer-social-col { display: flex; flex-direction: column; gap: 12px; }
.footer-social-links { display: flex; flex-direction: column; gap: 10px; }
.footer-social-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm); text-decoration: none;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: all 0.25s var(--transition-spring);
  color: var(--text-dim);
}
.footer-social-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.footer-social-link span { display: flex; flex-direction: column; gap: 2px; }
.footer-social-link strong { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.footer-social-link small { font-size: 0.68rem; color: var(--text-dim); line-height: 1.2; }
/* WhatsApp Community */
.footer-social-wa-community { border-color: rgba(37,211,102,0.25); }
.footer-social-wa-community svg { color: #25D366; }
.footer-social-wa-community:hover { background: rgba(37,211,102,0.1); border-color: rgba(37,211,102,0.5); box-shadow: 0 4px 20px rgba(37,211,102,0.15); transform: translateX(3px); }
/* WhatsApp Channel */
.footer-social-wa-channel { border-color: rgba(37,211,102,0.25); }
.footer-social-wa-channel svg { color: #25D366; }
.footer-social-wa-channel:hover { background: rgba(37,211,102,0.1); border-color: rgba(37,211,102,0.5); box-shadow: 0 4px 20px rgba(37,211,102,0.15); transform: translateX(3px); }
/* Facebook */
.footer-social-fb { border-color: rgba(24,119,242,0.25); }
.footer-social-fb svg { color: #1877F2; }
.footer-social-fb:hover { background: rgba(24,119,242,0.1); border-color: rgba(24,119,242,0.5); box-shadow: 0 4px 20px rgba(24,119,242,0.15); transform: translateX(3px); }
/* Instagram */
.footer-social-ig { border-color: rgba(228,64,95,0.25); }
.footer-social-ig svg { color: #E4405F; }
.footer-social-ig:hover { background: rgba(228,64,95,0.1); border-color: rgba(228,64,95,0.5); box-shadow: 0 4px 20px rgba(228,64,95,0.15); transform: translateX(3px); }

/* ─── MOBILE BOTTOM NAV ─── */
.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  display: none;
  background: rgba(7,10,18,0.95); border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  padding: 10px 0 env(safe-area-inset-bottom);
}
.mob-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; font-size: 0.62rem; font-weight: 600; color: var(--text-dim);
  text-decoration: none; cursor: pointer; background: none; border: none;
  transition: color 0.2s;
  position: relative;
}
.mob-nav-item svg { width: 22px; height: 22px; }
.mob-nav-item.active { color: var(--cyan); }
.mob-cart-btn { color: var(--text-dim); }
.mob-cart-badge {
  position: absolute; top: 4px; right: calc(50% - 18px);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); color: white; font-size: 0.55rem;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* ─── REVEAL ANIMATIONS ─── */
.reveal-item {
  opacity: 0; transform: translateY(20px);
  will-change: opacity, transform;
}
.reveal-item.visible {
  animation: revealUp 0.7s var(--transition-spring) forwards;
}
.reveal-item:nth-child(1) { animation-delay: 0.1s; }
.reveal-item:nth-child(2) { animation-delay: 0.2s; }
.reveal-item:nth-child(3) { animation-delay: 0.3s; }
.reveal-item:nth-child(4) { animation-delay: 0.4s; }
.reveal-item:nth-child(5) { animation-delay: 0.5s; }
.reveal-item:nth-child(6) { animation-delay: 0.55s; }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card stagger delays */
.product-card:nth-child(1)  { animation-delay: 0.05s; }
.product-card:nth-child(2)  { animation-delay: 0.1s; }
.product-card:nth-child(3)  { animation-delay: 0.15s; }
.product-card:nth-child(4)  { animation-delay: 0.2s; }
.product-card:nth-child(5)  { animation-delay: 0.25s; }
.product-card:nth-child(6)  { animation-delay: 0.3s; }
.product-card:nth-child(7)  { animation-delay: 0.35s; }
.product-card:nth-child(8)  { animation-delay: 0.4s; }
.product-card:nth-child(9)  { animation-delay: 0.45s; }
.product-card:nth-child(10) { animation-delay: 0.5s; }
.product-card:nth-child(11) { animation-delay: 0.55s; }
.product-card:nth-child(12) { animation-delay: 0.6s; }
.product-card:nth-child(13) { animation-delay: 0.65s; }
.product-card:nth-child(14) { animation-delay: 0.7s; }
.product-card:nth-child(15) { animation-delay: 0.75s; }
.product-card:nth-child(16) { animation-delay: 0.8s; }

/* ─── SCROLL TO TOP ─── */
.scroll-top-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--cyan); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--bg-deep); opacity: 0; pointer-events: none;
  transform: translateY(20px);
  transition: all 0.3s var(--transition-spring);
  box-shadow: var(--shadow-cyan);
}
.scroll-top-btn.visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.scroll-top-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 40px rgba(0,240,255,0.5);
}
.scroll-top-btn svg { width: 24px; height: 24px; }
@media (max-width: 768px) {
  .scroll-top-btn {
    bottom: 80px; /* Above mobile nav */
    right: 16px;
    width: 40px; height: 40px;
  }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  body { padding-bottom: 72px; }
  .mobile-bottom-nav { display: flex; }
  .hero { padding-top: calc(var(--header-h) + 32px); }
  .hero-headline { font-size: 2rem; }
  .products-grid { grid-template-columns: 1fr; }
  .steps-grid { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); }
  .trust-item:not(:first-child):not(:last-child) { display: none; }
  .trust-item { border-right: none; }
  .category-rail {
    border-radius: 18px;
    padding: 6px 8px;
    width: 100%;
  }
  .category-rail::before { border-radius: 18px 0 0 18px; }
  .category-rail::after { border-radius: 0 18px 18px 0; }
  /* Touch already scrolls the strip natively, so the arrows are desktop-only
     chrome that would just eat horizontal room here. */
  .rail-nav { display: none !important; }
  .pill {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  .filter-summary { padding: 0 4px; }
  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .hero-stats { gap: 14px; }
  .stat-num { font-size: 1.4rem; }
}

/* ─── CHATBOT WIDGET ─── */
.chatbot-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.chatbot-toggle {
  pointer-events: auto;
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), #00a8ff);
  color: var(--bg-deep);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s var(--transition-spring);
}
.chatbot-toggle svg { width: 30px; height: 30px; transition: transform 0.3s; color: #070a12; }
.chatbot-toggle:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 32px rgba(0, 240, 255, 0.7);
}
.chatbot-toggle:hover svg {
  transform: rotate(-10deg) scale(1.1);
}

.chatbot-notif-badge {
  position: absolute;
  top: -4px;
  right: -2px;
  background: #ff3366;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-deep);
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.6);
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.chatbot-window {
  width: 380px;
  height: 540px;
  background: rgba(10, 14, 26, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 35px rgba(0, 240, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 16px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(20px) scale(0.94);
  transform-origin: bottom right;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.chatbot-window.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.chatbot-header {
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(0,240,255,0.12), rgba(153,51,255,0.08));
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chatbot-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chatbot-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.chatbot-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background: #00ff66;
  border-radius: 50%;
  border: 2px solid #0a0e1a;
  box-shadow: 0 0 8px #00ff66;
}
.chatbot-title-info {
  display: flex;
  flex-direction: column;
}
.chatbot-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
}
.chatbot-online-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}
.chatbot-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chatbot-header-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.chatbot-header-btn:hover {
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.15);
  transform: rotate(180deg);
}
.chatbot-close {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.chatbot-close:hover { color: #fff; background: rgba(255,255,255,0.15); }

/* Chatbot Category Bar */
.chat-category-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(5, 8, 16, 0.95);
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.chat-category-bar::-webkit-scrollbar { display: none; }
.chat-category-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s var(--transition-spring);
}
.chat-category-chip:hover,
.chat-category-chip.active {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

/* Chat Order Lookup Box */
.chat-order-box {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.chat-order-box label {
  font-size: 0.74rem;
  color: var(--text-dim);
  font-weight: 600;
}
.chat-order-input-row {
  display: flex;
  gap: 6px;
}
.chat-order-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  font-size: 0.8rem;
  outline: none;
}
.chat-order-input:focus {
  border-color: #00f0ff;
}
.chat-order-btn {
  background: #00f0ff;
  color: #070a12;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
  transition: transform 0.2s;
}
.chat-order-btn:hover {
  transform: scale(1.05);
}

/* Live suggestions popup above input */
.chat-live-suggestions {
  display: none;
  padding: 8px 12px;
  background: rgba(10, 14, 26, 0.98);
  border-top: 1px solid rgba(0, 240, 255, 0.25);
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
}
.chat-live-suggestions.active {
  display: flex;
}
.chat-live-chip {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}
.chat-live-chip:hover {
  background: rgba(0, 240, 255, 0.25);
  color: #fff;
}

/* In-Chat Cart Banner */
.chat-cart-banner {
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.12), rgba(0, 240, 255, 0.1));
  border: 1px solid rgba(0, 255, 102, 0.3);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 255, 102, 0.1);
}
.chat-cart-info {
  font-size: 0.76rem;
  color: #00ff66;
  font-weight: 600;
}
.chat-cart-actions {
  display: flex;
  gap: 6px;
}
.chat-cart-btn {
  background: #00ff66;
  color: #070a12;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.chat-cart-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 255, 102, 0.4);
}

.chatbot-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.chatbot-messages::-webkit-scrollbar { width: 4px; }
.chatbot-messages::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.3); border-radius: 4px; }

.chat-msg-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 90%;
}
.chat-msg-wrapper.user { align-self: flex-end; align-items: flex-end; }
.chat-msg-wrapper.bot { align-self: flex-start; align-items: flex-start; }

.chat-msg {
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.bot-msg {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.user-msg {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 168, 255, 0.25));
  color: #ffffff;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,240,255,0.15);
}

.chat-msg-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0 4px;
}

/* In-Chat Rich Product Cards */
.chat-product-card {
  width: 100%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  animation: slideInBot 0.35s ease-out;
}
.chat-prod-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-prod-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.chat-prod-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #00f0ff;
  letter-spacing: 0.3px;
}
.chat-prod-variants {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  gap: 8px;
  transition: all 0.2s;
}
.chat-variant-row:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.3);
}
.chat-variant-info {
  display: flex;
  flex-direction: column;
}
.chat-variant-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f1f5f9;
}
.chat-variant-sub {
  font-size: 0.68rem;
  color: #94a3b8;
}
.chat-variant-price-action {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-variant-price {
  font-weight: 800;
  font-size: 0.88rem;
  color: #00ff66;
}
.chat-add-cart-btn {
  background: linear-gradient(135deg, #00f0ff, #00a8ff);
  color: #070a12;
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.3);
}
.chat-add-cart-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 240, 255, 0.5);
}
.chat-add-cart-btn:active {
  transform: scale(0.95);
}

.chat-view-link-btn {
  margin-top: 4px;
  align-self: center;
  background: rgba(0, 240, 255, 0.08);
  border: 1px stroke rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-view-link-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

/* Typing indicator */
.chatbot-typing {
  padding: 8px 16px;
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.chatbot-typing.active {
  display: flex;
}
.typing-bubble {
  display: flex;
  gap: 4px;
}
.typing-bubble span {
  width: 6px;
  height: 6px;
  background: #00f0ff;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-bubble span:nth-child(1) { animation-delay: -0.32s; }
.typing-bubble span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.typing-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Input area */
.chatbot-input-area {
  padding: 12px 14px;
  background: rgba(8, 13, 24, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.chatbot-input-area input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 14px;
  padding: 11px 16px;
  color: #fff;
  font-size: 0.86rem;
  outline: none;
  transition: all 0.25s ease;
}
.chatbot-input-area input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.chatbot-input-area input:focus {
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.07);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3), inset 0 0 8px rgba(0, 240, 255, 0.08);
}
.chatbot-input-area button {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #00f0ff 0%, #0099ff 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #050810;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.chatbot-input-area button svg,
.chatbot-input-area button .send-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chatbot-input-area button:hover {
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.8);
}
.chatbot-input-area button:hover svg,
.chatbot-input-area button:hover .send-icon {
  transform: translate(2px, -2px) rotate(-10deg) scale(1.06);
}
.chatbot-input-area button:active {
  transform: scale(0.94);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

/* Suggestions */
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.chat-suggestion-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.28);
  color: #00f0ff;
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.chat-suggestion-btn:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: #00f0ff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 240, 255, 0.35);
  color: #ffffff;
}
.chat-suggestion-btn:active {
  transform: translateY(0) scale(0.97);
}

/* Card scroll-to highlight effect */
.product-card-highlight {
  animation: cardPulseGlow 2.5s ease-in-out;
}
@keyframes cardPulseGlow {
  0% { box-shadow: 0 0 0 rgba(0, 240, 255, 0); }
  30% { box-shadow: 0 0 40px rgba(0, 240, 255, 0.8), 0 0 80px rgba(0, 240, 255, 0.4); transform: scale(1.03); }
  60% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.5); transform: scale(1.01); }
  100% { box-shadow: 0 0 0 rgba(0, 240, 255, 0); transform: scale(1); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .chatbot-widget { bottom: 100px; right: 16px; }
  .chatbot-window { width: calc(100vw - 32px); height: 480px; }
}

/* ─── GIFTS FOR YOU ─── */
.gifts-for-you {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; padding: 60px 24px;
}
.gifts-grid {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
}
.gift-card {
  flex: 1; min-width: 300px; max-width: 380px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 32px 24px;
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--transition-spring), box-shadow 0.3s;
  display: flex; flex-direction: column; gap: 16px;
}
/* The 300px floor above is what a three-across grid needs to stop the cards
 * collapsing into slivers on a desktop, and `justify-content: center` hides its
 * cost almost everywhere: a card wider than its line box overflows evenly on
 * both sides, so the 24px section gutter quietly absorbs the excess. At 320px
 * the card runs 10..310 and the page is clean.
 *
 * It stops being free once the card is wider than the viewport itself. At 280px
 * -- the Galaxy Fold's cover screen -- the card is centred at -10..290 and the
 * right-hand 10px is off the edge, which is the whole of this page's horizontal
 * overflow at that width. The floor becomes the line box instead, so the cards
 * stack one per row at 232px with the gutters intact.
 *
 * `100%` and not `0`: `flex: 1` above carries `flex-basis: 0%`, so a zero floor
 * doesn't widen the cards, it lets all three share one line -- 61px each at
 * this width, three unreadable slivers. Pinning the floor to the full line box
 * is what forces the wrap.
 *
 * Scoped to 300px rather than to 320px on purpose. 300 is the last width that
 * still fits the 300px floor exactly (card 0..300), so this changes nothing at
 * any width that renders correctly today. */
@media (max-width: 300px) {
  .gift-card { min-width: 100%; }
}
.gift-card:hover { transform: translateY(-6px); }
.gift-card:hover .gift-glow { opacity: 1; }
.gift-glow {
  position: absolute; inset: -1px; border-radius: var(--radius-lg);
  pointer-events: none; z-index: 0; opacity: 0;
  transition: opacity 0.3s;
}
.gift-glow.cyan-glow { background: linear-gradient(135deg, rgba(0,240,255,0.15), transparent); }
.gift-glow.green-glow { background: linear-gradient(135deg, rgba(0,255,102,0.15), transparent); }
.gift-glow.purple-glow { background: linear-gradient(135deg, rgba(153,51,255,0.15), transparent); }

.gift-card > * { position: relative; z-index: 1; }
.gift-title { font-size: 1.25rem; font-weight: 800; line-height: 1.4; color: var(--text); }
.gift-desc { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; }
.gift-body { flex: 1; }
.gift-steps-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.gift-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gift-steps li { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
.gift-steps a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.gift-steps a:hover { color: #fff; }
.gift-steps strong { color: var(--text); font-weight: 700; }
.gift-footer {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-border);
  font-size: 0.85rem; color: var(--text); font-weight: 600;
  display: flex; flex-direction: column; gap: 6px;
}


/* ─── MORE INFO BUTTON & TOOLTIP ─── */
.more-info-wrapper {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
}
.more-info-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-dim);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--transition-spring);
  backdrop-filter: blur(4px);
}
.more-info-btn svg {
  width: 16px;
  height: 16px;
}
.more-info-btn:hover {
  background: var(--cyan);
  color: #000;
  border-color: var(--cyan);
  box-shadow: 0 0 15px rgba(0,240,255,0.5);
  transform: scale(1.1);
}
.more-info-tooltip {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  /* Wider than the 260px it held when the content was one wrapped paragraph. The panel
     now carries labelled rows -- "Expected delivery" beside a value -- and at 260px the
     label column wrapped mid-word on nearly every row. It grows rightward: the ⓘ sits at
     top:16px/left:16px of the card, so there is a card's width to the right of it. */
  width: 300px;
  max-width: calc(100vw - 48px);
  background: rgba(11,15,25,0.95);
  border: 1px solid rgba(0,240,255,0.3);
  border-radius: var(--radius-md);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s var(--transition-spring);
  transform-origin: top left;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  pointer-events: none;
  z-index: 20;
}
/* Hover *or* focus. Hover alone meant the six facts in here -- price basis, quantity
   bounds, warranty, stock -- were reachable only with a mouse: a keyboard user tabbing to
   the ⓘ button got nothing, and on a touchscreen there is no hover at all, so every phone
   visitor was reading a card with the spec panel permanently shut. `:focus-within` opens
   it on tab and on tap, since tapping the button focuses it. */
.more-info-wrapper:hover .more-info-tooltip,
.more-info-wrapper:focus-within .more-info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.more-info-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 10px;
  width: 12px;
  height: 12px;
  background: rgba(11,15,25,0.95);
  border-top: 1px solid rgba(0,240,255,0.3);
  border-left: 1px solid rgba(0,240,255,0.3);
  transform: rotate(45deg);
}
.tooltip-content h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--cyan);
  margin-bottom: 8px;
}
.tooltip-content p {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ─── SPEC ROWS (bot-parity product facts) ───
   Label left, value right, one fact per line -- the shape of the bot's card, which stacks
   "💵 Price: …" and "📦 Availability: …". A two-column grid rather than a flex row so the
   values line up with each other down the panel instead of starting wherever the label
   above them happened to end.

   `.spec-row` is a wrapper *inside* the <dl> because a dt/dd pair cannot be a grid item
   pair and stay associated for assistive tech; the wrapper keeps the pairing and carries
   the columns. */
.tooltip-specs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.spec-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 0.8rem;
  line-height: 1.45;
}
.spec-key {
  margin: 0;
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
}
.spec-icon { margin-right: 5px; }
.spec-val {
  margin: 0;
  color: var(--text);
  text-align: right;
  /* Long values wrap inside their own column instead of widening the panel. */
  overflow-wrap: anywhere;
}
/* The pre-discount price. Dimmed as well as struck: at full contrast the eye reads the
   larger, first-in-line figure as the price. */
.spec-val s {
  color: var(--text-dim);
  opacity: 0.75;
  margin-right: 2px;
}
.spec-basis {
  color: var(--text-dim);
  font-weight: 400;
}
.spec-off { color: var(--cyan); }


/* ═══════════════════════════════════════════════════════════════
   PRODUCT NOTE  (the operator's pasted checklist)
   ───────────────────────────────────────────────────────────────
   The card carries a button; the note opens in a dialog. Spelling the
   lines out on the card made every card with a note taller than its
   neighbours and pushed the price below the fold, and expanding one
   card in place reflows every card after it -- moving the Add to Cart
   button out from under the cursor reaching for it.

   The row geometry below (.note-line, .note-icon, .note-heading) is
   shared by three surfaces: this dialog, the cart drawer's warning
   box, and the checkout page. Keep it surface-agnostic.
═══════════════════════════════════════════════════════════════ */

/* ─── VIEW NOTE BUTTON ─── */
/* Red, and full width. The note is where "payment required" and "no refunds after
   delivery" live, so this is the one control on the card that is worth interrupting the
   cyan for. Sits between the plan details and the price so it is read on the way to
   the money, not after it. */
.view-note-btn {
  margin-top: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(255,51,51,0.08);
  border: 1px solid rgba(255,51,51,0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background 0.2s var(--transition-smooth),
              border-color 0.2s var(--transition-smooth),
              transform 0.2s var(--transition-spring);
}
.view-note-btn[hidden] { display: none; }
.view-note-btn:hover {
  background: rgba(255,51,51,0.16);
  border-color: var(--red);
  transform: translateY(-1px);
}
.view-note-btn:active { transform: translateY(0); }
.view-note-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.view-note-icon { font-size: 0.95rem; line-height: 1; }

/* A note carrying a `!` line is louder than one that does not: the solid left edge is
   the same mark the warning box uses at both checkouts, so the customer meets one visual
   language for "there is a condition here" from card to payment. */
.view-note-btn.has-warning {
  border-left: 3px solid var(--red);
  background: rgba(255,51,51,0.13);
}

/* Shared row geometry. `align-items: start` so the glyph stays on the first line of a
   wrapped label rather than floating to its vertical middle. */
.note-line,
.note-heading {
  display: flex;
  align-items: start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.note-icon {
  flex: 0 0 auto;
  width: 1.05em;
  text-align: center;
  /* The glyphs are emoji and inherit the surrounding dimming, which mutes a ✅ into
     grey. Full opacity keeps the bullet legible against the text it marks. */
  opacity: 1;
}
/* A line the owner gave their own glyph needs no bullet of ours, but it still needs the
   indent — without it that line alone starts flush left and the column breaks. */
.note-icon-none { width: 1.05em; }
.note-heading {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 4px;
}
/* "There was more than this." Ours, not the operator's, so it is set apart from the
   lines they typed: italic and dimmed, with no bullet slot, so nobody reads it as one
   more term of the sale. Still inside the list, because what it is about is the list. */
.note-trimmed {
  list-style: none;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-dim);
  opacity: 0.85;
  margin-top: 2px;
}

/* A blank line in the paste. Half a row, so the grouping the owner typed survives
   without opening a hole in the block. */
.note-break {
  height: 6px;
  list-style: none;
}

.note-lines,
.note-warnings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The warning box, on the two surfaces that take money. Boxed in red rather than left as
   more rows of the note, because "payment required, don't ask after buying" is the line
   that changes a decision and the customer is one click from paying. */
.note-warnings {
  background: rgba(255,51,51,0.08);
  border: 1px solid rgba(255,51,51,0.28);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.note-warnings .note-line {
  color: var(--text);
  font-weight: 700;
}

/* ─── NOTE MODAL ─── */
/* Above the cart overlay's 1100/1200 pair: a customer can open a note from the grid
   while the drawer is shut, but the two must never fight over who is on top. */
.note-modal-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--transition-smooth);
}
.note-modal-overlay.open { opacity: 1; pointer-events: all; }

.note-modal {
  position: fixed;
  z-index: 1400;
  top: 50%; left: 50%;
  width: min(460px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
  background: rgba(7,10,18,0.98);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(30px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Grows out of the middle. The scale is what the card "opening up" reads as without
     touching the grid: nothing around it moves. */
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  /* Same reason as .cart-drawer: a scaled-down dialog still holds its close button in
     the tab order, so focus walks into an invisible panel. */
  visibility: hidden;
  /* `visibility 0s` with a close-direction delay, not the interpolated form the drawer
     uses. An interpolated visibility still computes to `hidden` on the frame the class
     lands, so the focus() at the end of openNoteModal() was handed an unrendered button
     and silently left focus on the card behind the overlay. Flipping at 0s makes the
     dialog focusable in the same tick it opens; the 0.28s delay below defers the flip
     back to hidden until the fade-out has finished, which is the only direction the
     transition was ever needed for. */
  transition: transform 0.28s var(--transition-spring),
              opacity 0.2s var(--transition-smooth),
              visibility 0s linear 0.28s;
}
.note-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform 0.28s var(--transition-spring),
              opacity 0.2s var(--transition-smooth),
              visibility 0s linear 0s;
}

.note-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.note-modal-title {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}
.note-modal-close {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-dim);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.note-modal-close:hover {
  color: var(--text);
  background: rgba(255,51,51,0.15);
  border-color: rgba(255,51,51,0.4);
}
.note-modal-close:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Scrolls, because a 60-line note is a legitimate paste and the dialog is capped at
   78vh. The head stays put so the close button is always reachable. */
.note-modal-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* ─── PRODUCT PICTURE ───
   The same image the bot sends as its card photo, at the top of the note.

   Capped in height, not just width: these are operator uploads at whatever aspect the
   supplier's screenshot happened to be, and a tall portrait one at `width:100%` filled the
   entire 78vh dialog, pushing the terms the customer opened this to read below the fold.
   `contain` rather than `cover` because a cropped picture of a product is a picture of a
   different product -- letterboxing is the honest failure. */
.note-modal-image {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
  margin-bottom: 16px;
}
.note-modal-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}
.note-modal-label:not(:first-child) { margin-top: 18px; }
/* The rule above adds 18px to any label that is not first in the body. With a picture
   present the first label is no longer first, so that gap would be counted twice -- once
   here and once as the image's own margin-bottom. Must sit *after* that rule: both
   selectors score (0,2,0), so source order is the only thing that decides. */
.note-modal-image + .note-modal-label { margin-top: 0; }

/* A quote, matching the bot's <blockquote> for the same text. Logical border so it moves
   to the right edge under dir="rtl" with the rest of the block. */
.note-modal-quote {
  margin: 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--glass-border);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.note-modal-lines { gap: 7px; }

/* The lines are the owner's own text in whatever language they typed, so the block
   inherits the page direction rather than forcing LTR: under `dir="rtl"` the glyph
   column has to move to the right edge with everything else. `margin-inline-start`
   and the logical border radii above do that without a duplicated RTL ruleset. */

@media (prefers-reduced-motion: reduce) {
  .view-note-btn,
  .note-modal,
  /* .open too: it carries its own `transition` shorthand for the visibility timing, and
     at (0,2,0) that would outrank a bare `.note-modal` reset here and keep animating. */
  .note-modal.open,
  .note-modal-overlay { transition: none; }
  /* Transform still has to be cleared, not just un-animated: without it the dialog sits
     at 92% for as long as it is open rather than snapping to size. */
  .note-modal { transform: translate(-50%, -50%) scale(1); }
  .view-note-btn:hover { transform: none; }
}

/* The same warnings on every surface that asks for a decision: the product card above its
   Add to Cart button, the cart drawer above the pay buttons, and the confirmation page
   above the transfer instructions. Reuses .note-warnings for the box itself so none of the
   four can drift apart; only the spacing and the label above it are local. */
.pay-warnings { margin-bottom: 12px; }
.pay-warnings[hidden] { display: none; }
.pay-warnings-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}
/* One product's name inside a multi-item block. Set apart from the shop's other headings
   because here it labels whose warning follows, not a section of one note. */
.pay-warnings .note-heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
}
.pay-warnings .note-heading:first-child { margin-top: 0; }

/* On a card, the same box sits above the View Note button rather than above a pay button,
   so its margin closes the gap downward instead of up. z-index for the same reason the
   button carries one: .card-glow-border paints over the card's own content. */
.card-warnings {
  margin: 12px 0 0;
  position: relative;
  z-index: 2;
}
/* "There is more behind the button." Ours rather than the operator's, so it is set apart
   from the lines they typed the same way .note-trimmed is -- and it must not read as one
   more term of the sale, because the terms are the lines above it. */
.card-warnings .note-more {
  list-style: none;
  margin-top: 2px;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-dim);
  opacity: 0.9;
}
/* The button follows the box directly, so it drops its own top margin -- .card-warnings
   already spaced the pair away from the plan details above them. */
.card-warnings:not([hidden]) + .view-note-btn { margin-top: 8px; }


/* ═══════════════════════════════════════════════════════════════
   SKIP LINK
═══════════════════════════════════════════════════════════════ */
/* Parked off-canvas rather than `display: none`, because a hidden element is not
   focusable — and a skip link Tab cannot reach is the one thing it must never be.
   z-index clears the sticky header (1000); anything lower and the link is focused
   but painted underneath it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1300;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: var(--bg-deep);
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-cyan);
}
.skip-link:focus { left: 1rem; }


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════ */
/* This page moves a lot: three drifting aurora orbs, a spotlight tracking the
   cursor, 3D card tilt, and reveal animations on nearly every section. */
@media (prefers-reduced-motion: reduce) {
  /* Near-zero duration, never `animation: none`. `.product-card` and
     `.reveal-item` rest at opacity 0 and are made visible *by* their reveal
     animation running to a `forwards` fill — cancel the animation outright and the
     catalogue never appears at all. Collapsing the duration keeps the end state. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  html { scroll-behavior: auto; }

  /* Belt and braces: these are the two rules whose initial state hides content.
     Stated outright so a reveal still shows even if the observer never fires. */
  .product-card,
  .reveal-item,
  .step-card {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Decorative, endless, and with no end state worth preserving. The orbs stop
     where they are; the spotlight goes away, since its whole purpose is to follow
     the pointer. */
  .aurora-orb { animation: none !important; }
  .mouse-spotlight { display: none !important; }
}

/* ==========================================================================
   ULTRA-PREMIUM CUSTOM DROPDOWN DESIGN SYSTEM
   ========================================================================== */

.currency-selector-dropdown {
  background: rgba(13, 18, 30, 0.85);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.currency-selector-dropdown:hover,
.currency-selector-dropdown:focus {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
  color: #ffffff;
}

.currency-selector-dropdown option {
  background: #0d121e;
  color: #00F0FF;
  padding: 10px 14px;
  font-weight: 600;
}

/* The rate pill beside that dropdown.
 *
 * These five rules existed only in static/app.css -- the admin panel sheet --
 * which the storefront never loads. Unstyled, the pill had no flex context, so
 * the refresh button wrapped onto its own line and sat under the label as a
 * stray box, and .fx-rate-text inherited the header font size, printing
 * "USD Primary Currency" at near-heading scale. Sized here to the header's
 * own scale so it reads as a status chip, not a headline. */
.fx-rate-widget { display: inline-flex; align-items: center; gap: 8px; }

.fx-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fx-icon { font-size: 0.9rem; line-height: 1; }

.fx-rate-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: #00F0FF;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fx-refresh-btn {
  background: transparent;
  border: none;
  color: #00F0FF;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.8rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.3s var(--transition-spring);
}
/* Hover turns it; the shared :active press rule further down scales it. That
   later rule wins while held, which is the order we want -- turn, then press. */
.fx-refresh-btn:hover { transform: rotate(180deg) scale(1.15); }

.has-open-dropdown,
*:has(.custom-select-wrapper.open),
*:has(.search-suggestions-dropdown.is-active),
*:has(.cyber-search-suggestions.is-active),
*:has(.cyber-search-suggestions:not([hidden])),
*:has(.col-customizer-dropdown.open),
*:has(.col-customizer-menu.is-active),
*:has(.lang-dropdown.open),
*:has(.dropdown-wrapper.open),
*:has(.custom-dropdown.open) {
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
  z-index: 100;
}

.custom-select-wrapper.open {
  z-index: 100000 !important;
}

.custom-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(13, 18, 30, 0.85);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.custom-select-trigger:hover,
.custom-select-trigger:focus,
.custom-select-wrapper.open .custom-select-trigger {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00F0FF;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.45);
  color: #ffffff;
}

.curr-flag {
  width: 20px;
  height: 14px;
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  object-fit: cover;
}

[data-theme="light"] .curr-flag {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.custom-select-trigger .trigger-label,
.custom-select-option .opt-label-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.custom-select-trigger .trigger-arrow {
  font-size: 0.75rem;
  color: #00F0FF;
  transition: transform 0.25s ease;
}

.custom-select-wrapper.open .trigger-arrow {
  transform: rotate(180deg);
}

.custom-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 165px;
  background: #0b0f19 !important;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 240, 255, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10001 !important;
  max-height: 280px;
  overflow-y: auto;
}

.custom-select-wrapper.open .custom-select-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.15s ease;
}

.custom-select-option:hover {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  transform: translateX(2px);
}

.custom-select-option.selected {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.25), rgba(0, 240, 255, 0.08));
  color: #00F0FF;
  font-weight: 700;
  border-left: 3px solid #00F0FF;
}

.custom-select-option .option-check {
  font-size: 0.85rem;
  color: #00FFCC;
}

/* Storefront Sharp Autocomplete Suggestions Dropdown */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-clear-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 50%;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 5;
}

.search-clear-btn:hover {
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.15);
}

.search-clear-btn.is-hidden {
  display: none !important;
}

.search-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: rgba(10, 16, 28, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.2);
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  /* The panel is allowed to be wider than the field it hangs off. The navbar input
     is 220px, which left roughly 110px for a product name once the icon and price
     were placed -- every result truncated to "ChatGPT Bu...".
     Clamped rather than a flat 360px: min-width beats max-width when the two
     disagree, so on a 320px phone a flat value would have won and hung the panel
     past the right edge of the document. */
  min-width: min(360px, calc(100vw - 1.5rem));
  max-width: min(440px, calc(100vw - 1.5rem));
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.45) transparent;
}

/* Hanging off the 220px navbar field, a 360px panel grows to the right and off the
   edge of the window. Anchoring it to the field's right edge grows it inward. */
.nav-search-container .search-suggestions-dropdown {
  left: auto;
  right: 0;
}

.search-suggestions-dropdown::-webkit-scrollbar { width: 8px; }
.search-suggestions-dropdown::-webkit-scrollbar-track { background: transparent; }
.search-suggestions-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.35);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.search-suggestions-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.6);
  background-clip: content-box;
}

.search-suggestions-dropdown.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.suggestion-header {
  padding: 0.4rem 0.85rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00F0FF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.25rem;
  /* Both halves stay on one line. Wrapping put the result count under its own
     label and shoved the keyboard hint into the row below it. */
  white-space: nowrap;
}

.suggestion-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.suggestion-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  padding: 0.05rem 0.25rem;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* Pointer-only affordance: there is no Enter key to press on a touch keyboard's
   result list, and the hint is the first thing worth dropping when space is tight. */
@media (max-width: 768px), (hover: none) {
  .suggestion-hint { display: none; }
}

/* Three columns rather than a flex row so the middle cell is the only thing that
   flexes -- the icon and the price keep their intrinsic width and the name gets
   every remaining pixel. */
.suggestion-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.85rem;
  min-height: 3rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
}

.suggestion-item:hover,
.suggestion-item.is-selected {
  background: rgba(0, 240, 255, 0.14);
  border-left-color: #00F0FF;
}

.suggestion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.suggestion-item:hover .suggestion-icon,
.suggestion-item.is-selected .suggestion-icon {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.35);
}

/* `min-width: 0` is what actually lets the title ellipsis: a grid item's default
   `min-width: auto` floors it at its content width, so the text would push the
   column wider instead of truncating. */
.suggestion-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  overflow: hidden;
}

.suggestion-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.suggestion-cat {
  display: inline-block;
  max-width: 100%;
  padding: 0.05rem 0.4rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  white-space: nowrap;
  flex-shrink: 0;
  /* Prices sit in a ragged column otherwise, because the theme font gives digits
     proportional widths. */
  font-variant-numeric: tabular-nums;
}

.suggestion-highlight,
mark.suggestion-highlight {
  background: rgba(0, 240, 255, 0.25);
  color: #00F0FF;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.suggestion-more {
  padding: 0.5rem 0.85rem 0.35rem;
  margin-top: 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.suggestion-empty {
  padding: 1rem 0.85rem;
  text-align: center;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.6);
}





/* ═══════════════════════════════════════════════════════════════
   HIGHLY INTERACTIVE PREMIUM COPY BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(112, 0, 255, 0.08)) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  border-radius: 10px !important;
  color: #00f0ff !important;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0;
  outline: none !important;
  overflow: visible !important;
}

.copy-btn:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(112, 0, 255, 0.18)) !important;
  border-color: #00f0ff !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.45), inset 0 0 12px rgba(0, 240, 255, 0.25) !important;
}

.copy-btn:active {
  transform: translateY(0) scale(0.93) !important;
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.3) !important;
}

.copy-btn-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 18px;
  height: 18px;
}

.copy-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.2;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.copy-btn [data-icon="copy"],
.copy-btn .copy-icon {
  display: inline-block;
}

.copy-btn [data-icon="done"],
.copy-btn .done-icon {
  display: none;
  color: #34d399;
}

/* Floating "Copied!" Badge / Tooltip */
.copy-badge {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.85);
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
  letter-spacing: 0.03em;
}

.copy-badge::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #059669 transparent transparent transparent;
}

/* Copied Active State */
.copy-btn.copied {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(52, 211, 153, 0.15)) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.55), inset 0 0 10px rgba(52, 211, 153, 0.2) !important;
  animation: copy-pulse-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.copy-btn.copied [data-icon="copy"],
.copy-btn.copied .copy-icon {
  display: none !important;
}

.copy-btn.copied [data-icon="done"],
.copy-btn.copied .done-icon {
  display: inline-block !important;
  animation: check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.copy-btn.copied .copy-badge {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

@keyframes copy-pulse-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes check-pop {
  0% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}


/* ═══════════════════════════════════════════════════════════════
   INTERACTION LAYER
   ───────────────────────────────────────────────────────────────
   Everything above this line is ambient or scroll-triggered motion: aurora
   orbs drifting, cards revealing as they enter the viewport, counters
   spinning up. None of it answers the pointer. Two `:active` rules in 2900
   lines meant a click landed on a surface that never acknowledged it, so the
   page read as a picture of a store rather than a store.

   This block adds the missing half: press feedback, a focus ring worth
   seeing, and the styling behind the JS-driven ripple/flight effects.
   Additive only -- no geometry, no flow, no colour token is redefined here.
═══════════════════════════════════════════════════════════════ */

/* ─── PRESS FEEDBACK ───
   The press is the moment the interface proves it is listening, so it must be
   fast: ~90ms down, spring back up. Slower than that and the button feels
   sticky; any deeper than 0.97 and text visibly reflows mid-press.

   Transform only -- never width/height/padding -- so no press can trigger
   layout, and a mis-scoped selector costs at most a wobble. */
.btn-primary:active,
.btn-secondary:active,
.checkout-btn:active,
.clear-all-btn:active,
.more-info-btn:active,
.chat-suggestion-btn:active,
.no-results-reset:active,
.cyan-btn:active,
.green-btn:active,
.purple-btn:active,
.red-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 0.09s !important;
}

/* Cards and pills already sit on a hover lift, so the press has to read
   *against* that raised state. Dropping these to a flat scale would look like
   the element fell through the page. */
.pill:active,
.seg-tab:active,
.filter-chip:active,
.trust-item:active,
.faq-item:active {
  transform: scale(0.96);
  transition-duration: 0.09s;
}

/* Icon buttons are too small for a scale alone to register, so they take a
   brightness lift as well. */
.cart-btn:active,
.theme-btn:active,
.lang-btn:active,
.cart-close:active,
.chatbot-toggle:active,
.chatbot-close:active,
.scroll-top-btn:active,
.search-clear-btn:active,
.fx-refresh-btn:active,
.dropdown-trigger:active,
.custom-select-trigger:active,
.rail-nav:active {
  transform: scale(0.92);
  filter: brightness(1.15);
  transition-duration: 0.09s;
}

/* Menu rows shift instead of scaling: a scaling list item drags its
   neighbours baselines with it and the whole menu appears to breathe. */
.dropdown-option:active,
.custom-select-option:active,
.lang-option:active,
.suggestion-item:active,
.nav-suggestion-item:active {
  transform: translateX(2px);
  transition-duration: 0.09s;
}

.header-link:active,
.footer-link:active,
.mob-nav-item:active,
.footer-social-link:active {
  transform: scale(0.95);
  transition-duration: 0.09s;
}

/* Touch devices have no hover to preview an action, which makes the press the
   only feedback a thumb ever gets -- so deepen it there. The tap highlight is
   removed because our own press state replaces it; left on, iOS paints a grey
   box over the animation. */
@media (hover: none) {
  .btn-primary:active,
  .btn-secondary:active,
  .checkout-btn:active,
  .add-to-cart-btn:active {
    transform: scale(0.95) !important;
  }
  a, button, .pill, .seg-tab, .filter-chip, .product-card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ─── FOCUS RING ───
   Five focus-visible rules covered the catalogue filters and nothing else, so
   tabbing through the header, cart and checkout was invisible. `:focus-visible`
   (not `:focus`) keeps the ring off mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.product-card:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* The cart drawer sits on near-black glass where a thin cyan line is easy to
   lose; a soft halo lifts the ring off the panel without changing its colour. */
.cart-drawer a:focus-visible,
.cart-drawer button:focus-visible,
.checkout-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.18);
}

/* ─── RIPPLE ───
   Origin travels from JS as --rx/--ry so the circle grows from the exact point
   pressed rather than the centre. The span is inserted and removed by app.js;
   `overflow: hidden` on the host clips it to the button radius. */
/* Only a positioning context. Deliberately NOT `overflow: hidden` on the host:
   .cart-btn holds .cart-badge at top:-4px/right:-4px, so clipping the host
   would decapitate the cart count from the first press onward. The ink is
   clipped by its own wrapper instead, which inherits the host's radius and so
   works for a circle, a pill or a rectangle without knowing which it is. */
.ripple-host { position: relative; }
.ripple-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
.ripple {
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: var(--rsize, 120px);
  height: var(--rsize, 120px);
  margin-left: calc(var(--rsize, 120px) / -2);
  margin-top: calc(var(--rsize, 120px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.15) 45%, transparent 70%);
  pointer-events: none;
  z-index: 3;
  opacity: 0.75;
  transform: scale(0);
  animation: rippleOut 0.6s var(--transition-smooth) forwards;
}
/* Light-filled buttons need a dark ripple -- white on a cyan gradient is
   invisible. */
.btn-primary .ripple,
.checkout-btn .ripple,
.add-to-cart-btn .ripple {
  background: radial-gradient(circle, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.10) 45%, transparent 70%);
}
@keyframes rippleOut {
  to { transform: scale(2.4); opacity: 0; }
}

/* ─── SCROLL PROGRESS ───
   A 2px thread pinned above the header. Driven by transform: scaleX on a rAF
   tick; scaling rather than setting width keeps it off the layout path. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1001;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--purple) 60%, var(--green));
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  pointer-events: none;
  will-change: transform;
}

/* ─── ADD-TO-CART BURST ───
   Every piece here is created and destroyed in JS. They are all fixed or
   absolutely positioned with pointer-events: none, so none of them can take a
   click away from the button that spawned them.

   The projectile carries the product's own emoji rather than being an abstract
   dot: the eye tracks a recognisable object far better than a light, so the
   visitor reads "that item went into the cart" instead of "something flashed". */
.cart-flight {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  background: radial-gradient(circle at 32% 26%,
    rgba(255,255,255,0.95), rgba(0,240,255,0.88) 45%, rgba(0,118,175,0.92));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5),
              0 0 24px 6px rgba(0,240,255,0.7),
              0 0 60px 14px rgba(0,240,255,0.3);
  will-change: transform, opacity;
}

/* Comet tail. Separate nodes rather than a blur filter -- a filter on a moving
   element costs a repaint per frame on low-end phones, these are just paint. */
.cart-flight-trail {
  position: fixed;
  z-index: 2999;
  pointer-events: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,240,255,0.5), rgba(0,240,255,0));
  will-change: transform, opacity;
}

/* Shards thrown from the press point. Angle, distance, size, hue and duration
   all arrive as custom properties so one keyframe serves the whole burst. */
.cart-spark {
  position: fixed;
  z-index: 3001;
  pointer-events: none;
  width: var(--s, 8px); height: var(--s, 8px);
  border-radius: 50%;
  background: var(--spark, var(--cyan));
  box-shadow: 0 0 10px 2px var(--spark, var(--cyan));
  will-change: transform, opacity;
  animation: sparkFly var(--dur, 620ms) cubic-bezier(0.16, 0.62, 0.32, 1) forwards;
}
@keyframes sparkFly {
  0%   { transform: translate(0, 0) scale(0.35); opacity: 1; }
  65%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.08); opacity: 0; }
}

/* Rim-light on the card that was bought from. Inherits the card's radius so it
   traces the real edge, and sits above the card's own content but below the
   drawer and header. */
.card-burst-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  border: 1px solid rgba(0,240,255,0.9);
  box-shadow: 0 0 30px rgba(0,240,255,0.5), inset 0 0 40px rgba(0,240,255,0.16);
  animation: cardBurstFlash 520ms ease-out forwards;
}
@keyframes cardBurstFlash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Shockwave where the projectile lands, so the arrival has a beat of its own. */
.cart-impact {
  position: fixed;
  z-index: 2998;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(0,240,255,0.9);
  box-shadow: 0 0 18px rgba(0,240,255,0.6);
  will-change: transform, opacity;
  animation: cartImpact 520ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes cartImpact {
  0%   { transform: scale(0.3); opacity: 0.95; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Cart icon recoil when a flight lands. Overshoots, dips under, settles --
   the dip is what sells it as weight arriving rather than a size change. */
.cart-btn.cart-received { animation: cartReceive 0.6s var(--transition-spring); }
@keyframes cartReceive {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.34) rotate(-9deg); }
  55%  { transform: scale(0.93) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ─── HEADER CONDENSE ───
   The header already swapped background on scroll. Tightening its height at
   the same time hands back a little reading space and makes the page feel
   responsive to scrolling. Height is animated on .header itself rather than by
   reassigning --header-h, because the hero reads that token in a calc() for
   its padding -- animating the token would drag the hero down the page. */
.header { transition: background 0.3s var(--transition-smooth), box-shadow 0.3s, height 0.3s var(--transition-smooth); }
.header.scrolled { height: calc(var(--header-h) - 10px); }
.header .logo-icon { transition: transform 0.3s var(--transition-spring); }
.header.scrolled .logo-icon { transform: scale(0.88); }

/* ─── ENTRY TRANSITIONS ───
   Toasts and chips were inserted already at their final state, so they popped
   into existence. @starting-style gives the browser a "from" to interpolate
   out of; browsers without it simply show the element, which is exactly
   today's behaviour. */
@starting-style {
  .toast { opacity: 0; transform: translateY(20px) scale(0.9); }
  .filter-chip { opacity: 0; transform: scale(0.85); }
}

/* ─── CROSS-PAGE TRANSITIONS ───
   Navigating index -> trusted -> checkout was a hard cut. This cross-fades the
   two documents. Unsupported browsers ignore the at-rule entirely and keep
   today's instant navigation, so this cannot break a flow -- worst case it
   does nothing. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: 0.18s var(--transition-smooth) both fadeOutPage;
}
::view-transition-new(root) {
  animation: 0.28s var(--transition-smooth) both fadeInPage;
}
@keyframes fadeOutPage { to { opacity: 0; } }
@keyframes fadeInPage { from { opacity: 0; transform: translateY(8px); } }

/* The header is fixed and identical across pages -- giving it its own
   transition name stops it fading out and back in with the body underneath. */
.header { view-transition-name: site-header; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }

/* ─── REDUCED MOTION ───
   The global block near line 2326 flattens durations for everything above.
   These are the effects it cannot reach: elements this file creates at
   runtime, and the view-transition pseudo-elements, which the `*` selector
   does not match. Without this, a reduce-motion visitor would still get a full
   page cross-fade on every navigation. */
@media (prefers-reduced-motion: reduce) {
  .ripple,
  .cart-flight,
  .cart-flight-trail,
  .cart-spark,
  .cart-impact,
  .card-burst-flash { display: none !important; }

  .scroll-progress { transition: none !important; }

  .header.scrolled { height: var(--header-h); }
  .header.scrolled .logo-icon { transform: none; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }

  .cart-btn.cart-received { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-FUTURISTIC COCKPIT HUD & FLIGHT DECK STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Cockpit User Trigger Button & Hover Container */
.user-cockpit-wrapper {
  position: relative;
  display: inline-block;
}

.user-cockpit-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 100px;
  padding: 4px 14px 4px 6px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s var(--transition-spring);
  position: relative;
}

.user-cockpit-trigger:hover,
.user-cockpit-trigger:focus-within,
.user-cockpit-wrapper:hover .user-cockpit-trigger {
  background: rgba(0, 240, 255, 0.14);
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), inset 0 0 10px rgba(0, 240, 255, 0.2);
}

.pilot-avatar-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00F0FF, #9933FF);
  color: #070A12;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  position: relative;
}

.pilot-avatar-badge::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 8px; height: 8px;
  background: #00FF66;
  border-radius: 50%;
  border: 2px solid #070A12;
  box-shadow: 0 0 8px #00FF66;
}

.pilot-brief-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.pilot-brief-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pilot-brief-balance {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Helper & SVG icon constraints for Cockpit HUD */
.icon-sm-svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
}

.icon-arrow-svg {
  width: 10px;
  height: 6px;
  min-width: 10px;
  margin-left: 2px;
  color: var(--cyan, #00F0FF);
  flex-shrink: 0;
}

.pilot-avatar-badge.badge-md {
  width: 38px;
  height: 38px;
  font-size: 1rem;
}

.form-no-margin {
  margin: 0;
}

/* Futuristic Cockpit Dropdown Menu Card */
.cockpit-dropdown-card {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 310px;
  max-width: min(310px, calc(100vw - 32px));
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.2);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transition: all 0.25s var(--transition-spring, cubic-bezier(0.16, 1, 0.3, 1));
  z-index: 1000;
  pointer-events: none;
  box-sizing: border-box;
}

.cockpit-dropdown-card::before {
  content: '';
  position: absolute;
  top: -6px; right: 20px;
  width: 12px; height: 12px;
  background: rgba(11, 15, 25, 0.95);
  border-top: 1px solid rgba(0, 240, 255, 0.3);
  border-left: 1px solid rgba(0, 240, 255, 0.3);
  transform: rotate(45deg);
  z-index: 2;
}

/* Invisible hover bridge spanning the gap to prevent hover loss when moving cursor */
.cockpit-dropdown-card::after {
  content: '';
  position: absolute;
  top: -24px;
  left: -12px;
  right: -12px;
  height: 24px;
  background: transparent;
  z-index: 1;
}

.user-cockpit-wrapper:hover .cockpit-dropdown-card,
.user-cockpit-wrapper:focus-within .cockpit-dropdown-card,
.cockpit-dropdown-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-cockpit-wrapper:hover .icon-arrow-svg,
.user-cockpit-wrapper:focus-within .icon-arrow-svg,
.user-cockpit-wrapper.is-open .icon-arrow-svg,
.user-cockpit-trigger[aria-expanded="true"] .icon-arrow-svg {
  transform: rotate(180deg);
}

/* Cockpit Dropdown Components */
.cockpit-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(0, 240, 255, 0.2);
  margin-bottom: 12px;
}

.cockpit-header-meta {
  display: flex;
  flex-direction: column;
}

.cockpit-callsign {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
}

.cockpit-rank-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cockpit-status-pulse {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: pulsePulse 1.8s infinite;
}

@keyframes pulsePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.cockpit-balance-box {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(153, 51, 255, 0.1));
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cockpit-balance-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.cockpit-balance-val {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.cockpit-deposit-btn {
  background: rgba(0, 255, 102, 0.15);
  border: 1px solid rgba(0, 255, 102, 0.4);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}

.cockpit-deposit-btn:hover {
  background: rgba(0, 255, 102, 0.3);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.4);
  color: #FFFFFF;
}

.cockpit-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cockpit-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
  background: transparent;
  border: 1px solid transparent;
  font-family: inherit;
}

.cockpit-nav-item svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
}

.cockpit-nav-item:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.25);
  color: var(--cyan);
  transform: translateX(4px);
}

.cockpit-nav-item.primary-action {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(153, 51, 255, 0.2));
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #FFFFFF;
  font-weight: 800;
}

.cockpit-nav-item.primary-action:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.35), rgba(153, 51, 255, 0.35));
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.cockpit-nav-item.logout-action {
  color: #ff9999;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.cockpit-nav-item.logout-action:hover {
  background: rgba(255, 51, 51, 0.15);
  border-color: rgba(255, 51, 51, 0.3);
  color: #FF3333;
}

/* Status Badges & Action Buttons for Cockpit */
.status-badge-cockpit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.status-completed {
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.35);
  color: #00FF66;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.2);
}
.status-pending {
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.35);
  color: #FFAA00;
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.2);
}
.status-cancelled {
  background: rgba(255, 51, 51, 0.12);
  border: 1px solid rgba(255, 51, 51, 0.35);
  color: #FF3333;
}

.btn-telemetry-inspect {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #FFFFFF;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-telemetry-inspect:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: #00F0FF;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
  color: #00F0FF;
}

/* Guest Dropdown Card */
.cockpit-guest-card {
  text-align: center;
  padding: 12px 8px;
}

.cockpit-guest-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.cockpit-guest-sub {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.cockpit-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   COCKPIT FUEL RECHARGE MODAL STYLES
   ═══════════════════════════════════════════════════════════════ */
.cockpit-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(7, 10, 18, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all 0.3s var(--transition-smooth);
}

.cockpit-modal-overlay.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
}

.cockpit-modal-card {
  background: rgba(11, 15, 25, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: var(--radius-lg);
  max-width: 580px; width: 100%;
  padding: 2rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 240, 255, 0.2);
  position: relative;
  transform: scale(0.94);
  transition: transform 0.3s var(--transition-spring);
}

.cockpit-modal-overlay.is-active .cockpit-modal-card {
  transform: scale(1);
}

.cockpit-modal-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}

.cockpit-modal-close:hover {
  background: rgba(255, 51, 51, 0.2); color: #FF3333; border-color: #FF3333;
}

.cockpit-modal-head { margin-bottom: 1.5rem; }
.cockpit-modal-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 4px 10px; border-radius: 100px; color: var(--cyan);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 0.5rem;
}
.cockpit-modal-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 800; color: #FFFFFF; margin-bottom: 0.3rem;
}
.cockpit-modal-sub { color: var(--text-dim); font-size: 0.88rem; line-height: 1.4; }

.deposit-step-box { margin-bottom: 1.4rem; }
.deposit-label {
  display: block; font-size: 0.75rem; font-weight: 800; color: var(--cyan);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem;
}

.deposit-preset-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px;
}
.deposit-preset-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF; font-weight: 800; font-size: 0.9rem;
  padding: 8px 4px; border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.deposit-preset-btn:hover {
  background: rgba(0, 240, 255, 0.15); border-color: var(--cyan); color: var(--cyan);
}
.deposit-preset-btn.active {
  background: linear-gradient(135deg, #00F0FF, #9933FF);
  color: #070A12; border-color: transparent; box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.deposit-custom-input {
  width: 100%; background: rgba(7, 10, 18, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.25); border-radius: 10px;
  padding: 10px 14px; color: #FFFFFF; font-size: 0.92rem; outline: none; transition: all 0.2s;
}
.deposit-custom-input:focus {
  border-color: var(--cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.deposit-protocol-stack { display: flex; flex-direction: column; gap: 8px; }
.protocol-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: all 0.2s;
}
.protocol-card:hover, .protocol-card.active {
  background: rgba(0, 240, 255, 0.08); border-color: rgba(0, 240, 255, 0.35);
}
.protocol-icon { font-size: 1.4rem; }
.protocol-name { font-weight: 700; color: #FFFFFF; font-size: 0.9rem; }
.protocol-sub { font-size: 0.76rem; color: var(--text-dim); }

.deposit-submit-btn {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, #00F0FF, #9933FF);
  border: none; border-radius: 12px; color: #070A12; font-weight: 900; font-size: 0.95rem;
  cursor: pointer; transition: all 0.2s; box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}
.deposit-submit-btn:hover {
  transform: translateY(-2px); box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
}

.deposit-result-box {
  margin-top: 1.2rem; padding: 14px;
  background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 14px; display: flex; gap: 16px; align-items: center;
}
.qr-amount-display { font-size: 0.9rem; font-weight: 800; color: #FFFFFF; margin-bottom: 6px; }
.qr-address-label { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 2px; }
.qr-address-code { font-family: monospace; font-size: 0.82rem; color: var(--cyan); background: rgba(7,10,18,0.9); padding: 4px 8px; border-radius: 6px; margin-bottom: 8px; word-break: break-all; }
.copy-deposit-addr-btn {
  background: rgba(0, 255, 102, 0.15); border: 1px solid rgba(0, 255, 102, 0.4);
  color: #00FF66; font-size: 0.76rem; font-weight: 800; padding: 4px 10px; border-radius: 6px; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION — Premium Cyberpunk Pagination Component
   Styles for the shared render_pagination() macro
═══════════════════════════════════════════════════════════════ */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding: 0.9rem 1.4rem;
  background: linear-gradient(135deg, rgba(13, 18, 30, 0.85), rgba(7, 10, 18, 0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 14px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 20px rgba(0, 240, 255, 0.04);
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.pager:hover {
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 25px rgba(0, 240, 255, 0.08);
}

.pager-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.pager-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 0.45rem 1rem;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 100px;
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.08);
  letter-spacing: 0.01em;
}

.pager-status-icon {
  font-size: 0.9rem;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
  animation: pagerPulseIcon 2.5s infinite ease-in-out;
}

@keyframes pagerPulseIcon {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.9)); }
}

.pager-status strong {
  color: var(--cyan, #00f0ff);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.pager-count-divider {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.pager-range {
  color: #f1f5f9;
  font-weight: 700;
}

.pager-per-page {
  display: flex;
  align-items: center;
}

.pager-per-page-select {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pager-per-page-select:hover {
  border-color: rgba(0, 240, 255, 0.5);
  background: rgba(15, 23, 42, 1);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.pager-per-page-select:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.pager-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: pointer;
}

.pager-btn:not(.is-disabled):hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.45);
  color: #00f0ff;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.25);
}

.pager-btn:not(.is-disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.2);
}

.pager-btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.05);
}

.pager-btn-arrow {
  font-size: 1.1rem;
  line-height: 1;
}

.pager-numbers {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pager-num {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.pager-num:hover:not(.is-active) {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.35);
  color: #00f0ff;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 2px 10px rgba(0, 240, 255, 0.15);
}

.pager-num.is-active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.28), rgba(153, 51, 255, 0.35));
  border: 1px solid #00f0ff;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4), inset 0 0 8px rgba(0, 240, 255, 0.2);
  transform: scale(1.05);
}

.pager-ellipsis {
  padding: 0 0.2rem;
  color: #64748b;
  font-size: 0.9rem;
  user-select: none;
}

.pager-jump-form {
  display: flex;
  align-items: center;
}

.pager-jump-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.25rem 0.35rem 0.25rem 0.65rem;
  transition: all 0.2s ease;
}

.pager-jump-group:focus-within,
.pager-jump-group:hover {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}

.pager-jump-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  user-select: none;
}

.pager-jump-input {
  width: 52px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 6px;
  color: #00f0ff;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.25rem 0.35rem;
  outline: none;
  transition: all 0.2s ease;
  -moz-appearance: textfield;
}

.pager-jump-input::-webkit-outer-spin-button,
.pager-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pager-jump-input:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  background: rgba(0, 0, 0, 0.6);
}

.pager-jump-btn {
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  border-radius: 6px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pager-jump-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

@media (max-width: 768px) {
  .pager {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
  }
  .pager-left,
  .pager-controls,
  .pager-jump-form {
    justify-content: center;
    width: 100%;
  }
  .pager-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  .pager-numbers {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CYBER COCKPIT DATE & TIME PICKER — CUSTOMER PORTAL STYLING
   ═══════════════════════════════════════════════════════════════ */

/* Hide native dull browser picker indicator completely */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* Datepicker Enhanced Input Wrapper */
.cyber-datepicker-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
}

.cyber-datepicker-enhanced {
  padding-right: 2.85rem !important;
  cursor: pointer;
  letter-spacing: 0.03em;
}

/* Glowing Neon Calendar Icon Trigger */
.cyber-datepicker-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.28);
  color: #00F0FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 2;
}

.cyber-datepicker-btn:hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: #00F0FF;
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cyber-datepicker-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.cyber-cal-svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.cyber-datepicker-btn:hover .cyber-cal-svg {
  transform: scale(1.1);
}

/* Floating Cyber Calendar Popover HUD */
.cyber-calendar-popup {
  position: fixed;
  z-index: 100050;
  width: 340px;
  max-width: calc(100vw - 20px);
  background: linear-gradient(150deg, rgba(12, 18, 34, 0.97) 0%, rgba(7, 11, 22, 0.98) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 18px;
  box-shadow: 
    0 25px 60px -10px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(0, 240, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 15px rgba(0, 240, 255, 0.04);
  padding: 14px;
  color: #F8FAFC;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  animation: cyberCalendarIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

@keyframes cyberCalendarIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cyber-cal-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Quick Presets Bar */
.cyber-cal-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cyber-cal-chip {
  padding: 4px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.22);
  color: #00F0FF;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.cyber-cal-chip:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: #00F0FF;
  color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

.cyber-cal-chip:active {
  transform: translateY(0);
}

/* Header & Navigation */
.cyber-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}

.cyber-cal-title-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cyber-cal-title-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.18s ease;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.cyber-cal-title-btn:hover {
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
}

.cyber-cal-arrow {
  font-size: 0.72rem;
  color: #00F0FF;
  transition: transform 0.2s ease;
}

.cyber-cal-title-btn:hover .cyber-cal-arrow {
  transform: translateY(1px);
}

.cyber-cal-title-static {
  font-weight: 700;
  font-size: 0.92rem;
  color: #00F0FF;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.cyber-cal-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.18s ease;
}

.cyber-cal-nav-btn:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00F0FF;
  color: #00F0FF;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  transform: scale(1.08);
}

.cyber-cal-nav-btn:active {
  transform: scale(0.94);
}

/* Weekday Labels */
.cyber-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-top: 2px;
  margin-bottom: 4px;
}

.cyber-cal-wday {
  font-size: 0.7rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 0;
  font-family: 'JetBrains Mono', monospace;
}

/* Days Matrix */
.cyber-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cyber-cal-day {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #E2E8F0;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  font-family: inherit;
}

.cyber-cal-day:hover:not(.is-disabled) {
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.6);
  color: #FFFFFF;
  transform: scale(1.12);
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 240, 255, 0.4);
}

.cyber-cal-day:active:not(.is-disabled) {
  transform: scale(0.96);
}

.cyber-cal-day.other-month {
  color: rgba(255, 255, 255, 0.2);
  background: transparent;
  border-color: transparent;
}

.cyber-cal-day.is-today {
  border: 1px solid #00F0FF;
  color: #00F0FF;
  font-weight: 800;
  background: rgba(0, 240, 255, 0.08);
}

.cyber-today-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00F0FF;
  position: absolute;
  bottom: 3px;
  box-shadow: 0 0 6px #00F0FF;
}

.cyber-cal-day.is-selected {
  background: linear-gradient(135deg, #00F0FF 0%, #7000FF 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800;
  border-color: #00F0FF !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.65) !important;
  transform: scale(1.05);
  z-index: 2;
}

.cyber-cal-day.is-disabled {
  opacity: 0.22;
  cursor: not-allowed !important;
  pointer-events: none;
  background: transparent !important;
  border-color: transparent !important;
}

/* Month & Year Select View */
.cyber-cal-month-grid,
.cyber-cal-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px 0;
}

.cyber-cal-month-btn,
.cyber-cal-year-cell {
  padding: 10px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.cyber-cal-month-btn:hover,
.cyber-cal-year-cell:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00F0FF;
  color: #00F0FF;
  transform: scale(1.04);
}

.cyber-cal-month-btn.is-selected,
.cyber-cal-year-cell.is-selected {
  background: linear-gradient(135deg, #00F0FF 0%, #7000FF 100%) !important;
  color: #FFF !important;
  font-weight: 800;
  border-color: #00F0FF !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.5) !important;
}

/* Time Selector HUD for datetime-local */
.cyber-cal-time-hud {
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
}

.cyber-time-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #00F0FF;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}

.cyber-quick-time-chips {
  display: flex;
  gap: 4px;
}

.cyber-time-chip {
  padding: 2px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cyber-time-chip:hover {
  background: rgba(0, 240, 255, 0.3);
  color: #FFF;
}

.cyber-time-steppers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cyber-stepper-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 2px 8px;
  min-width: 52px;
}

.cyber-time-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 800;
  color: #00F0FF;
  margin: 1px 0;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.cyber-time-arrow {
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  font-size: 0.72rem;
  padding: 2px 6px;
  transition: all 0.15s ease;
}

.cyber-time-arrow:hover {
  color: #00F0FF;
  transform: scale(1.2);
}

.cyber-time-colon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.3rem;
  font-weight: 800;
  color: #00F0FF;
  animation: cyberBlink 1.5s infinite;
}

@keyframes cyberBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Footer Actions */
.cyber-cal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cyber-cal-btn-clear {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}

.cyber-cal-btn-clear:hover {
  color: #FF3366;
  border-color: #FF3366;
  background: rgba(255, 51, 102, 0.1);
}

.cyber-cal-btn-apply {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #00F0FF 0%, #7000FF 100%);
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
  font-family: inherit;
}

.cyber-cal-btn-apply:hover {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.7);
  transform: translateY(-1px);
}

.cyber-cal-btn-apply:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CYBER COCKPIT HUD NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════ */

.cockpit-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11, 15, 25, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0, 240, 255, 0.16);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 240, 255, 0.1);
  padding: 0.75rem 1.75rem;
  width: 100%;
}

.cockpit-nav-inner {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Cockpit Brand Emblem */
.cockpit-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cockpit-brand:hover {
  transform: scale(1.02);
}

.cockpit-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00F0FF 0%, #9933FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cockpit-brand:hover .cockpit-brand-mark {
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transform: rotate(4deg);
}

.brand-spark-svg {
  width: 20px;
  height: 20px;
  color: #070A12;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.cockpit-brand-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.cockpit-brand-name {
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.cockpit-brand-deck {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #00F0FF 20%, #B76EFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Floating Segmented Navigation Deck Capsule */
.cockpit-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(7, 10, 18, 0.7);
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 0 20px rgba(0, 240, 255, 0.04);
  position: relative;
  overflow: visible;
  max-width: 100%;
}

/* Navigation Pill Item */
.cockpit-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: none;
  letter-spacing: 0.01em;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  border: 1px solid transparent;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.cockpit-link span {
  display: inline-block;
  line-height: 1;
}

.cockpit-icon {
  width: 15px;
  height: 15px;
  min-width: 15px;
  color: #64748B;
  transition: all 0.22s ease;
  flex-shrink: 0;
}

/* Hover State */
.cockpit-link:hover {
  color: #F8FAFC;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.cockpit-link:hover .cockpit-icon {
  color: #00F0FF;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
  transform: scale(1.08);
}

/* Active State */
.cockpit-link.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.16) 0%, rgba(153, 51, 255, 0.14) 100%);
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

.cockpit-link.active .cockpit-icon {
  color: #00F0FF;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.85));
}

/* Active Pulse Beacon Dot */
.cockpit-link-beacon {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF, 0 0 14px rgba(0, 240, 255, 0.9);
  animation: cockpitBeaconPulse 2s infinite ease-in-out;
  margin-left: 2px;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes cockpitBeaconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 6px #00F0FF, 0 0 10px rgba(0, 240, 255, 0.7);
  }
  50% {
    transform: scale(1.35);
    opacity: 0.65;
    box-shadow: 0 0 12px #00F0FF, 0 0 18px rgba(0, 240, 255, 1);
  }
}

/* Storefront Link Distinction */
.cockpit-link-storefront {
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-left: 4px;
}

.cockpit-link-storefront:hover {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.09);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
}

.cockpit-link-storefront:hover .cockpit-icon {
  color: #00F0FF;
}

.cockpit-right-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* WhatsApp Support Top Header Button */
.cockpit-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #25D366;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.15);
  white-space: nowrap;
}

.cockpit-whatsapp-btn:hover {
  background: rgba(37, 211, 102, 0.22);
  border-color: #25D366;
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.45);
  transform: translateY(-1px);
}

.cockpit-whatsapp-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.cockpit-whatsapp-btn:hover svg {
  transform: scale(1.1);
}

/* Unread Messages Beacon Badge in Cockpit Nav */
.cust-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #FF3366 0%, #FF0055 100%);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.7);
  animation: custBadgePulse 2.5s infinite;
  margin-left: 2px;
}

.cust-unread-badge.is-hidden {
  display: none !important;
}

@keyframes custBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255, 51, 102, 0.6);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 14px rgba(255, 51, 102, 0.95);
  }
}

/* Responsive Navigation Breakpoints */
@media (max-width: 1024px) {
  .cockpit-nav {
    padding: 0.65rem 1rem;
  }
  .cockpit-nav-inner {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .cockpit-nav-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 6px;
    justify-content: flex-start;
  }
  .cockpit-nav-links::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  .cockpit-brand-name {
    font-size: 1.1rem;
  }
  .cockpit-brand-deck {
    font-size: 1.05rem;
  }
  .cockpit-link {
    padding: 6px 11px;
    font-size: 0.8rem;
    gap: 6px;
  }
  .cockpit-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
  }
}




/* The customer's own currency, beside the figure their account is actually settled in.
   Deliberately quieter than the amount it annotates: it is indicative, converted at a
   third-party rate, and never what the wallet is credited. If it competed visually the
   customer would read the rupee as the promise. Rendered only when a rate has really
   been fetched -- see the {% if reading_rate %} guard on every call site. */
.reading-currency-approx {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(240, 244, 255, 0.07);
  border: 1px solid rgba(240, 244, 255, 0.14);
  color: rgba(240, 244, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}