/* ═══════════════════════════════════════════════════════════════════════════
   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(env(safe-area-inset-bottom, 0px) + 16px); /* The dock is retired (22 Aug): clearance no longer reserves dock height,
       only the home-indicator safe area plus breathing room. The old formula
       left a 164px phantom gap under every page (measured on the receipt). */
}

/* ── 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);
}

/* ── Shared crown header ──────────────────────────────────────────────────────
   Keep hero and product artwork below the masthead. The former translucent
   glass surface looked like a header overlap in macOS Safari. */
.header,
header.header,
#site-header {
  isolation: isolate;
  contain: paint;
  background: #050505 !important;
  background: linear-gradient(180deg, #090909 0%, var(--sbs-bg-black, #000) 100%) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--sbs-hairline-gold) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* ── 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);
}

/* Keep a feed legible while it is actively moving. The dock returns as soon as
   the shopper scrolls upward, reaches the top, or changes route. */
.sbs-dock-wrap.is-scroll-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 28px));
}

/* The customer chat launcher was a legacy 60pt gold/orange circle fixed in
   the lower-right. Customer chat belongs to the native app, so never allow a
   stale page fragment or an old cache entry to mount a competing web bubble. */
.chat-widget,
#customerChatWidget,
.chat-window,
#chatWindow,
.chat-button,
#chatToggleBtn,
#chatUnreadBadge,
.floating-help,
.sbs-help-btn,
.chat-bubble,
#chat-bubble,
.help-bubble,
#help-bubble,
.help-fab,
#help-fab,
.support-bubble,
#support-bubble,
.sbs-helper-modal,
#sbs-helper-modal,
.help-modal,
#help-modal,
#helpModal,
.bug-report-modal,
#bug-report-modal,
.bug-report-overlay,
.bug-report-dialog,
a[href*="wa.me/"] {
  /* R13: this rule used to also match a[href="/support"], a[href="/help"],
     and a[href^="mailto:"] — the same over-broad kill list functions/
     _middleware.js carried (see WEB_MESSAGING_OFF_STYLE there), duplicated
     here and loaded on every non-auth page. Since CSS rules are additive,
     fixing only the middleware's version left this file still hiding a
     shopper's only non-chat way to reach support on checkout/account/receipt
     pages. Scoped to the chat-widget UI (plus WhatsApp, a live
     chat-equivalent channel) only, matching the middleware fix exactly. */
  display: none !important;
}

.sbs-dock {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  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: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  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: 21px;
  height: 21px;
  fill: currentColor;
  stroke: none;
  display: block;
}

@media (max-width: 374px) {
  .sbs-dock { gap: 7px; padding-inline: 10px; }
  .sbs-dock-item { flex-basis: 42px; width: 42px; min-width: 42px; }
}

.sbs-dock-item .sbs-dock-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.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 count uses the app's gold-on-black badge treatment. */
.sbs-dock-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--sbs-r-pill);
  background: var(--sbs-gold-bright);
  color: #000;
  border: 1.5px solid #000;
  font-size: 9px;
  font-weight: 800;
  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;
  }
}
