/* ═══════════════════════════════════════════════════════════════════════════
   APP-SHELL.CSS — brings the SBS iOS app's look to the website.
   Injected last in <head> by functions/_middleware.js so it wins the cascade
   over each page's inline <style> block. Mirrors ios/SBS/Core/Theme/Theme.swift
   and the Liquid Glass / floating dock language from the app.
   Skin only (colour, glass, radius, shadow, motion) — no layout rewrites.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Gold scale — matches Theme.Color */
  --sbs-gold: #d4af37;
  --sbs-gold-bright: #ffd700;
  --sbs-gold-orange: #ffa500;
  --sbs-gold-gradient: linear-gradient(135deg, #ffd700, #ffa500);

  /* Liquid Glass surface — web analogue of .ultraThinMaterial + hairline stroke */
  --sbs-glass-bg: rgba(18, 18, 20, 0.55);
  --sbs-glass-bg-strong: rgba(10, 10, 12, 0.72);
  --sbs-glass-blur: 22px;
  --sbs-glass-saturate: 180%;
  --sbs-hairline: rgba(255, 255, 255, 0.10);
  --sbs-hairline-gold: rgba(212, 175, 55, 0.22);

  /* 8pt spacing grid — Theme.Spacing */
  --sbs-xs: 4px;  --sbs-sm: 8px;  --sbs-md: 16px;
  --sbs-lg: 24px; --sbs-xl: 32px; --sbs-2xl: 48px;

  /* Radii — Theme.Radius */
  --sbs-r-sm: 8px; --sbs-r-md: 12px; --sbs-r-card: 16px; --sbs-r-pill: 999px;

  /* Shadows — Theme.Shadow */
  --sbs-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.25);
  --sbs-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.55);
  --sbs-shadow-gold: 0 8px 22px rgba(255, 215, 0, 0.35);

  /* Motion */
  --sbs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sbs-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Floating dock metrics */
  --sbs-dock-h: 60px;
  --sbs-dock-clearance: calc(var(--sbs-dock-h) + env(safe-area-inset-bottom, 0px) + 28px);
}

/* ── Clean app surface — kill the muddy gradient; match app pure black ─────── */
html { background: #000 !important; }
body {
  background: #000 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Liquid Glass utility ──────────────────────────────────────────────────── */
.sbs-glass {
  background: var(--sbs-glass-bg);
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  border: 1px solid var(--sbs-hairline);
}

/* ── Glass header — translucent frosted bar instead of solid black ─────────── */
.header,
header.header,
#site-header {
  background: var(--sbs-glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  border-bottom: 1px solid var(--sbs-hairline-gold) !important;
}

/* ── Pills — every primary control becomes a capsule (app chipSurface) ─────── */
.btn,
.btn-gold,
.btn-outline,
.cart-toggle,
.btn-basket {
  border-radius: var(--sbs-r-pill) !important;
  transition: transform 0.12s var(--sbs-ease-spring),
              box-shadow 0.2s var(--sbs-ease-out),
              background 0.2s var(--sbs-ease-out),
              color 0.2s var(--sbs-ease-out) !important;
}

.btn-gold {
  background: var(--sbs-gold-gradient) !important;
  border: none !important;
  color: #000 !important;
  box-shadow: var(--sbs-shadow-gold);
}

/* Tactile press — quick spring scale on tap (mirrors Haptics.tap) */
.btn:active,
.btn-gold:active,
.btn-outline:active,
.cart-toggle:active,
.btn-basket:active,
.action-link:active,
a.action-link:active {
  transform: scale(0.96);
}

/* ── Glass cards — continuous radius + hairline gold + soft shadow ─────────── */
.card {
  background: var(--sbs-glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  border: 1px solid var(--sbs-hairline-gold) !important;
  border-radius: var(--sbs-r-card) !important;
  box-shadow: var(--sbs-shadow-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING GLASS DOCK — the app's signature bottom navigation.
   DOM is injected by /js/app-dock.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.sbs-dock-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex;
  justify-content: center;
  z-index: 950;
  pointer-events: none; /* only the capsule itself catches taps */
  transition: opacity 0.3s var(--sbs-ease-out), transform 0.3s var(--sbs-ease-out);
}

.sbs-dock {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: var(--sbs-r-pill);
  background: var(--sbs-glass-bg-strong);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sbs-hairline);
  box-shadow: var(--sbs-shadow-strong), 0 0 0 0.5px rgba(255, 215, 0, 0.08);
}

.sbs-dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 58px;
  padding: 7px 6px 6px;
  border-radius: var(--sbs-r-pill);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s var(--sbs-ease-out),
              transform 0.18s var(--sbs-ease-spring);
}

.sbs-dock-item svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.sbs-dock-item .sbs-dock-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
}

.sbs-dock-item:hover { color: rgba(255, 255, 255, 0.85); }
.sbs-dock-item:active { transform: scale(0.88); }

/* Active tab — gold, slightly lifted (mirrors dock active icon) */
.sbs-dock-item.is-active {
  color: var(--sbs-gold-bright);
}
.sbs-dock-item.is-active svg {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.35));
}

/* Bag badge — red capsule, numeric (mirrors dock saved/cart badge) */
.sbs-dock-badge {
  position: absolute;
  top: 1px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--sbs-r-pill);
  background: #ff3b30;
  color: #fff;
  border: 1.5px solid var(--sbs-glass-bg-strong);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  transition: transform 0.2s var(--sbs-ease-spring);
}
.sbs-dock-badge.is-visible { display: inline-flex; }
.sbs-dock-badge.pop { transform: scale(1.4); }

/* Give scrollable content room so the last row clears the floating dock */
html.sbs-dock-on body { padding-bottom: var(--sbs-dock-clearance) !important; }

/* Keep a page's floating "scroll to top" button and the wishlist hint clear of
   the dock instead of overlapping the Account tab / the dock itself. */
html.sbs-dock-on .scroll-to-top,
html.sbs-dock-on #scroll-to-top,
html.sbs-dock-on .wishlist-hint {
  bottom: var(--sbs-dock-clearance) !important;
}

/* Hide the dock when a full-screen menu / modal is open */
body.menu-open .sbs-dock-wrap,
body.modal-open .sbs-dock-wrap,
body.cart-open .sbs-dock-wrap,
body.dev-notice-locked .sbs-dock-wrap {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  .sbs-dock-wrap,
  .sbs-dock-item,
  .sbs-dock-badge,
  .btn, .btn-gold, .cart-toggle, .btn-basket {
    transition: none !important;
  }
}
