/* =========================================================
   Satphone theme — global base reset.
   Loaded site-wide before every other theme stylesheet so that
   borders and padding are drawn INSIDE an element's declared box
   (border-box) and never add extra width/height to containers.
   ========================================================= */

/* Barlow — global brand typeface (must precede all style rules) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Custom scrollbars — transparent track, 6px rounded white thumb */
* {
  scrollbar-width: thin;
  scrollbar-color: #ffffff transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 1); border-radius: 3px; }

/* =========================================================
   Autofilled fields — keep the dark field colour.
   Chrome paints autofilled inputs with its own opaque background that
   `background-color` cannot override, so the field flashes white/yellow against
   the dark forms. A large inset box-shadow repaints the padding box in the field
   colour (the border still shows through), and -webkit-text-fill-color keeps the
   typed value legible.
   ========================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--spc-bg-2, #12233c) inset !important;
  box-shadow: 0 0 0 1000px var(--spc-bg-2, #12233c) inset !important;
  -webkit-text-fill-color: var(--spc-fg, #eaf0f8) !important;
  caret-color: var(--spc-fg, #eaf0f8);
  /* The border needs an OPAQUE colour here. --spc-line is rgba(255,255,255,.1), and
     a background paints under the border while the inset shadow above only covers
     the padding box — so a translucent border lets the browser's light autofill
     background show through as a bright edge. color-mix reproduces exactly how
     --spc-line composites over the field colour at rest, but solid.
     !important because the per-page field rules (e.g. `.customer-account-create
     input[type="text"]`, 0,2,1) outrank this selector's 0,1,1. */
  border-color: color-mix(in srgb, #fff 10%, var(--spc-bg-2, #12233c)) !important;
}
/* ...but keep the accent focus ring: the rule above would otherwise pin an
   autofilled field to the resting border colour even while it has focus */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  border-color: var(--spc-accent, #f27221) !important;
}

/* =========================================================
   Global page transitions — cross-document View Transitions.
   Same-origin navigations cross-fade (old page fades out, new
   page fades in with a subtle rise) instead of snapping into
   view. Progressive enhancement: browsers without the API just
   navigate normally, so nothing breaks.
   ========================================================= */
@view-transition { navigation: auto; }

@keyframes sp-page-out { to { opacity: 0; } }
@keyframes sp-page-in  { from { opacity: 0; transform: translateY(10px); } }

::view-transition-old(root) { animation: sp-page-out .22s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: sp-page-in .42s cubic-bezier(.4, 0, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* =========================================================
   Header scroll behaviour — retracts on the way down, returns on the way up,
   transparent at the origin and blurred once the page has moved.

   Driven by js/nav-scroll, which only sets two classes on .site-header:
     .is-hidden — scrolling down
     .is-stuck  — page is away from the top

   TWO DELIBERATE CHOICES, BOTH ABOUT THE CART DRAWER
   `transform` and `backdrop-filter` each make an element the containing block
   for its fixed descendants. The minicart drawer is `position: fixed` and lives
   *inside* .site-header until its first open moves it to <body>, so either
   property on the header traps it. Hence:
     - the slide is a `top` transition, not a transform;
     - the blur sits on ::before, which has no descendants to trap.
   The same warning is recorded next to the header rule in homepage.css.

   This block owns the header's background and bottom rule. Neither
   satphone-chrome.css nor homepage.css sets them any more: a background there
   would paint *behind* the ::before below and leave its blur sampling an opaque
   colour instead of the page. State selectors are two classes deep so they beat
   the plain `.site-header` (0,1,0) in those later-loading files on specificity
   rather than losing to them on source order.
   ========================================================= */
.site-header {
  /* Transparent at every scroll position — the tint comes from ::before, which
     fades in. The rule is declared at full width and transparent so turning it
     on later cannot shift the bar's height. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: top .32s cubic-bezier(.4, 0, .2, 1), border-color .3s ease;
}
/* 74px bar + its 1px rule, so it clears the viewport completely */
.site-header.is-hidden { top: -75px; }
.site-header.is-stuck { border-bottom-color: var(--spc-line); }

/* The blurred backing. Separate element so the filter never lands on the header
   itself; z-index keeps it behind the logo and nav but above the header's own
   (transparent) background. */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--spc-bg) 60%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s ease;
}
.site-header.is-stuck::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header::before { transition: none; }
}

/* =========================================================
   Global button variants — the outline buttons from the minicart,
   promoted to reusable classes. Uses the --spc-* tokens (cart-drawer.css).
     .sp-btn--primary   = accent outline, fills accent on hover
     .sp-btn--secondary = muted outline, accent on hover
   ========================================================= */
.sp-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .5em;
  box-sizing: border-box; cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent !important; border-radius: 0 !important; height: 50px !important; padding: 0 16px; line-height: 1;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: .7rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: transparent !important; color: var(--spc-fg) !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sp-btn--primary { border-color: var(--spc-accent) !important; }
.sp-btn--primary:hover { background: var(--spc-accent) !important; color: #10203a !important; }
/* Arrow is a real <span class="sp-btn-arrow">↗</span> element injected by JS — the exact
   same mechanism as the minicart's Proceed-to-Checkout button (not a ::after pseudo). */
.sp-btn--primary .sp-btn-arrow { font-size: 1.05em; line-height: 0; transition: transform .18s ease; }
.sp-btn--primary:hover .sp-btn-arrow { transform: translate(2px, -2px); }
.sp-btn--secondary { border-color: var(--spc-line) !important; }
.sp-btn--secondary:hover { border-color: var(--spc-accent) !important; color: var(--spc-accent) !important; }

/* =========================================================
   Toast notifications — a toast slides down from the top of the page with a
   fade-in, lives for 4s, then retracts upward to its origin. Built and shown
   by js/toast (window.spToast(message, type)).
   ========================================================= */
/* focus overlay: 2px blur over the whole page, above everything but the toast */
.sp-toast-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 16, 30, .28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0;
  /* The overlay only exists in the DOM for the toast's lifecycle, so capturing
     pointer events blocks clicks/taps on the page beneath (buttons, links, …)
     for exactly that window — the whole point of the backdrop. */
  pointer-events: auto;
  transition: opacity .4s ease;
}
.sp-toast-overlay.is-visible { opacity: 1; }
.sp-toast-host {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000; /* above the overlay */
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-top: 22px; pointer-events: none;
}
.sp-toast {
  display: inline-flex; align-items: center; gap: .7em;
  max-width: min(92vw, 460px); box-sizing: border-box; padding: 14px 20px;
  background: var(--spc-bg-2, #12233c); color: var(--spc-fg, #eaf0f8);
  border: 1px solid var(--spc-line, rgba(255,255,255,.1));
  border-left: 3px solid var(--spc-accent, #f27221);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .9rem; line-height: 1.35; letter-spacing: .01em;
  pointer-events: auto;
  /* origin: fully above the viewport, transparent */
  transform: translateY(calc(-100% - 28px)); opacity: 0;
  transition: transform .52s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.sp-toast.is-visible { transform: translateY(0); opacity: 1; } /* slid down into view */
.sp-toast-msg { font-weight: 600; }
.sp-toast-ico { flex: 0 0 auto; display: inline-flex; line-height: 0; color: var(--spc-accent, #f27221); }
.sp-toast-ico svg { width: 20px; height: 20px; display: block; }
.sp-toast--success { border-left-color: #47c67e; }
.sp-toast--success .sp-toast-ico { color: #47c67e; }
.sp-toast--error { border-left-color: #f2544e; }
.sp-toast--error .sp-toast-ico { color: #f2544e; }
.sp-toast--danger { border-left-color: #f2544e; }
.sp-toast--danger .sp-toast-ico { color: #f2544e; }
.sp-toast--info { border-left-color: #3b9df2; }
.sp-toast--info .sp-toast-ico { color: #3b9df2; }
/* flip the thumb so the wrist sits toward the message text */
.sp-toast--info .sp-toast-ico svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .sp-toast-overlay { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-toast { transition: opacity .3s ease; transform: translateY(0); }
}