/* ════════════════════════════════════════════════════════════════════════
   reel-base.css — the phone-reel scaffolding, shared
   ════════════════════════════════════════════════════════════════════════
   The core structure every reel page needs: stage, shell, snap track,
   photo/content split, progress bar, side rail, and the typography and
   CTA primitives the slides are built from.

   Extracted 2026-08-13 so that converting a page to reel style is a
   markup job, not a 600-line CSS copy. The product reels (/, cityboy-v2,
   x27, revolt-v2, school-run) still carry their own inline <style> with
   this scaffolding plus their per-page colour DNA; they can be migrated
   onto this file separately, one at a time, without a flag day.

   Load order on a page MUST be:
     1. this file
     2. any page-specific <style>
     3. reel-desktop.css   ← last, it has to win on source order
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --bg-navy: #0a1628;
  --bg-navy-deep: #050b14;
  --bg-black: #0a0a0a;
  --accent: #FFB800;
  --accent-ink: #1a1000;
  --accent-deep: #E58B00;
  --green-save: #4DD0A0;
  --ink: #ffffff;
  --ink-80: rgba(255,255,255,0.80);
  --ink-65: rgba(255,255,255,0.65);
  --ink-55: rgba(255,255,255,0.55);
  --ink-35: rgba(255,255,255,0.35);
  --glass-white: rgba(255,255,255,0.04);
  --glass-white-b: rgba(255,255,255,0.08);
  --font-display: 'Hind Siliguri', 'Noto Serif Bengali', -apple-system, system-ui, sans-serif;
  --font-serif-bn: 'Noto Serif Bengali', serif;
  --rail-gutter: 80px;
  --side-pad: 22px;
}

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

html, body {
  height: 100%;
  background: var(--bg-black);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
body { overflow: hidden; }

/* ── Header injected by components.js ──────────────────────────────────
   Do NOT hide #header-placeholder. An earlier version did, on the theory
   that the header would be "relocated into the shell" by JS — but no such
   relocation code was ever written, so the header injected fine, inherited
   display:none from its parent, and rendered at 0x0. The contact page shipped
   with no logo, no language toggle and no menu (audit 2026-08-24).
   The header is position:absolute, so a visible placeholder costs no layout. */
header {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  width: 100% !important;
  z-index: 500;
  padding: 14px 0;
  pointer-events: none;
  background: transparent !important;
}
header > * { pointer-events: auto; }
header.scrolled { padding: 12px 0; background: transparent !important; }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 0 14px; gap: 8px; width: 100%; }
header .logo {
  display: inline-flex !important; align-items: center; height: 34px; padding: 0;
  background: transparent !important; border: none; text-decoration: none; line-height: 1;
}
header .logo img { height: 22px !important; width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.menu-btn {
  background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: none; cursor: pointer; width: 34px; height: 34px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.menu-icon { width: 16px; height: 12px; position: relative; }
.menu-icon span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 2px; left: 0; }
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 5px; }
.menu-icon span:nth-child(3) { top: 10px; }

.menu-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: var(--bg-navy); display: flex; justify-content: center; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 999; overflow-y: auto;
}
.menu-overlay.open { opacity: 1; visibility: visible; }
.menu-overlay nav { margin: auto 0; padding: 60px 0; }
.menu-close { position: absolute; top: 22px; right: 22px; background: none; border: none; cursor: pointer; z-index: 1001; color: #fff; padding: 8px; }
.menu-close svg { width: 26px; height: 26px; }
.nav-links { list-style: none; text-align: center; padding: 0; margin: 0; }
.nav-links li { margin: 14px 0; }
.nav-links a { color: #fff; text-decoration: none; font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; letter-spacing: -0.5px; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

.lang-toggle {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 17px !important; overflow: hidden !important; height: 30px !important;
  display: flex !important; align-items: stretch !important; padding: 0 !important;
}
.lang-toggle .lang-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 11px !important; font-size: 11px !important; font-weight: 700 !important;
  line-height: 1 !important; letter-spacing: 0.5px !important; border: none !important;
  background: transparent !important; color: rgba(255,255,255,0.65) !important; cursor: pointer !important;
}
.lang-toggle .lang-btn.active { background: var(--accent) !important; color: var(--accent-ink) !important; }

/* The reel supplies its own rail; components.js's floats would collide. */
.whatsapp-float, .wa-pulse-ring, .wa-chat-label, .sticky-cta-global,
.back-to-top, #returnVisitorBanner, #footer-placeholder, footer { display: none !important; }

/* ── Stage + shell ───────────────────────────────────────────────────── */
.stage { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; z-index: 1; }
.reel-shell { position: relative; width: 100%; height: 100%; max-width: 430px; background: var(--bg-navy); overflow: hidden; }
@media (min-width: 640px) {
  .reel-shell { width: 390px; height: min(92vh, 840px); border-radius: 28px; box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04); }
}
@media (min-width: 768px) and (orientation: portrait) { .reel-shell { width: min(460px, 62vw); height: min(94vh, 960px); } }
@media (min-width: 900px) and (orientation: landscape) and (min-height: 600px) { .reel-shell { width: min(420px, 38vw); height: min(94vh, 900px); } }

/* ── Snap track ──────────────────────────────────────────────────────── */
.reels {
  position: absolute; inset: 0; overflow-y: scroll;
  scroll-snap-type: y mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }

.reel {
  position: relative; width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; display: flex; flex-direction: column;
}

.reel-photo { position: relative; flex: 0 0 55%; height: 55%; width: 100%; overflow: hidden; background: var(--bg-navy); }
.reel-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block; }
.reel-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 35%, var(--content-bg, var(--bg-navy)) 100%);
  pointer-events: none;
}

.reel-content {
  position: relative; flex: 1 1 45%; min-height: 0; width: 100%;
  padding: 18px var(--rail-gutter) 24px var(--side-pad);
  background: var(--content-bg, var(--bg-navy)); color: #fff;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
  touch-action: pan-y; scrollbar-width: none;
}
.reel-content::-webkit-scrollbar { display: none; }

/* ── Progress ────────────────────────────────────────────────────────── */
.progress { position: absolute; top: 54px; left: 16px; right: 16px; display: flex; gap: 4px; z-index: 20; pointer-events: none; }
.progress-bar { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.5); opacity: 0.85; }
.progress-bar.done, .progress-bar.active { background: #fff; opacity: 1; }

/* ── Side rail ───────────────────────────────────────────────────────── */
.side-rail { position: absolute; right: 10px; top: 42%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 15; }
.rail-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.rail-btn {
  width: 40px; height: 40px; border-radius: 20px;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.rail-btn:active { transform: scale(0.93); }
.rail-btn svg { display: block; }
.rail-label { font-size: 9px; color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6); letter-spacing: 0.3px; }
.reel-shell.on-yellow .rail-btn { background: rgba(255,255,255,0.55); color: var(--accent-ink); border-color: rgba(0,0,0,0.15); }
.reel-shell.on-yellow .rail-label { color: var(--accent-ink); text-shadow: none; }

/* ── Typography primitives ───────────────────────────────────────────── */
.eyebrow { font-size: 10px; letter-spacing: 0.5px; color: var(--ink-55); font-weight: 700; font-family: var(--font-display); }
.h-hero { font-family: var(--font-display); font-size: 42px; font-weight: 900; line-height: 0.95; letter-spacing: -1.5px; text-shadow: 0 4px 20px rgba(0,0,0,0.6); }
.h-big { font-family: var(--font-display); font-size: 36px; font-weight: 900; line-height: 0.95; letter-spacing: -1.2px; margin-top: 6px; }
.h-accent { color: var(--accent); }
.en-subtitle { font-size: 13px; color: var(--ink-55); margin-top: 6px; font-style: italic; }
.stock-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }

/* ── CTA slide primitives ────────────────────────────────────────────── */
.reel--cta { background: linear-gradient(180deg, #FFB800 0%, #E58B00 100%); color: var(--accent-ink); }
.reel--cta .reel-photo { display: none; }
.reel--cta .reel-content { flex: 1 1 100%; background: transparent; color: var(--accent-ink); padding-top: 110px; }
.cta-eyebrow { font-size: 11px; letter-spacing: 0.5px; font-weight: 800; opacity: 0.75; }
.cta-headline { font-family: var(--font-display); font-size: 48px; font-weight: 900; line-height: 0.9; letter-spacing: -1.8px; margin-top: 14px; }
.cta-sub { font-size: 14px; margin-top: 10px; opacity: 0.75; }
.cta-group { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.cta-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(26,16,0,0.2); display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 1px; font-weight: 700; opacity: 0.65; }
.white-blur { position: absolute; bottom: -100px; right: -100px; width: 300px; height: 300px; border-radius: 50%; background: #fff; opacity: 0.15; pointer-events: none; }

/* Action row used on contact-style slides */
.action-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--glass-white-b);
  border: 1px solid rgba(255,255,255,0.14); color: #fff; text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.action-btn:hover { border-color: var(--accent); background: rgba(255,184,0,0.10); }
.action-btn .ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 17px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }
.action-btn .lbl { font-size: 14px; font-weight: 700; line-height: 1.2; }
.action-btn .val { font-size: 11px; color: var(--ink-65); margin-top: 2px; }
.reel--cta .action-btn { background: rgba(26,16,0,0.08); border-color: rgba(26,16,0,0.18); color: var(--accent-ink); }
.reel--cta .action-btn .ico { background: var(--accent-ink); color: var(--accent); }
.reel--cta .action-btn .val { color: rgba(26,16,0,0.7); }

/* Numbered step list */
.step-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.step-row { display: flex; gap: 12px; align-items: flex-start; }
.step-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 13px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.step-text { font-size: 13px; line-height: 1.45; color: var(--ink-80); }

/* ── Form fields ─────────────────────────────────────────────────────── */
.reel-form { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.reel-form input, .reel-form select, .reel-form textarea {
  width: 100%; padding: 12px 13px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  color: #fff; font-family: inherit; font-size: 16px; /* 16px: stops iOS zooming on focus */
  outline: none; transition: border-color 0.18s ease;
}
.reel-form input:focus, .reel-form select:focus, .reel-form textarea:focus { border-color: var(--accent); }
.reel-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23999' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; }
.reel-form select option { background: var(--bg-navy); color: #fff; }
.reel-form textarea { resize: none; min-height: 64px; }
/* ── Floating labels ──────────────────────────────────────────────────
   This form used to be placeholder-only: three of its six controls had no
   label at all, and a placeholder disappears the moment the user types. On
   a phone, mid-form, with the keyboard covering half the screen, someone who
   looks away has no way to recover what the field wanted (WCAG 3.3.2).

   Stacked labels would have added ~108px to a form that already exactly
   fills its reel slide, so the label starts in the field's place and rises
   out of the way once there is content. Zero added height, label always
   visible. The empty placeholder=" " is what :placeholder-shown keys off.
   ─────────────────────────────────────────────────────────────────────── */
.reel-form .ff { position: relative; }
.reel-form .ff > label {
  position: absolute; left: 13px; top: 13px;
  font-size: 16px; line-height: 1.15; color: rgba(255,255,255,0.55);
  pointer-events: none; transform-origin: left top;
  transition: transform 0.16s ease, color 0.16s ease;
}
.reel-form .ff > input,
.reel-form .ff > textarea { padding-top: 20px; padding-bottom: 6px; }
.reel-form .ff > textarea { min-height: 64px; }

/* Raised: focused, or holding a value. */
.reel-form .ff > input:focus + label,
.reel-form .ff > input:not(:placeholder-shown) + label,
.reel-form .ff > textarea:focus + label,
.reel-form .ff > textarea:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(0.68);
  color: var(--accent);
}
.reel-form .ff > input:not(:focus):not(:placeholder-shown) + label,
.reel-form .ff > textarea:not(:focus):not(:placeholder-shown) + label {
  color: rgba(255,255,255,0.55);
}

/* A <select> always renders its chosen option, so :placeholder-shown never
   applies. Its label is permanently raised instead, and the control keeps
   room for it. */
.reel-form .ff--select > select { padding-top: 20px; padding-bottom: 6px; }
.reel-form .ff--select > label {
  transform: translateY(-9px) scale(0.68);
  color: rgba(255,255,255,0.55);
}
.reel-form .ff--select > select:focus ~ label { color: var(--accent); }

.reel-form button[type="submit"] {
  margin-top: 4px; padding: 14px; border: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.2px;
}
.reel-form button[type="submit"]:hover { background: #ffc32e; }
.form-privacy { font-size: 10px; color: var(--ink-55); margin-top: 8px; text-align: center; }

@media (max-height: 700px) { .h-hero { font-size: 36px; } .cta-headline { font-size: 40px; } }
@media (max-height: 600px) { .h-hero { font-size: 32px; } .cta-headline { font-size: 34px; } }
@media (max-width: 360px) { .h-hero { font-size: 34px; } .cta-headline { font-size: 34px; } }

@media (prefers-reduced-motion: reduce) {
  .reels { scroll-behavior: auto; }
  * { transition: none !important; }
}