/* clients/olga-hair/assets/styles.css */
/* Olga Hair — editorial-parigino restyle 2026-05-10 */

:root {
  --bg: #ffffff;
  --text: #0a0a0a;
  --muted: #555;
  --muted-soft: #888;
  --hairline: #d8d8d8;
  --soft: #e0e0e0;
  --accent: #b8924a;
  --accent-hover: #a07f3e;
  --alert: #b45454;
  --hover-bg: #f8f4ec;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, sans-serif;

  --label-size: 10px;
  --label-tracking: 0.28em;
  --ui-tracking: 0.22em;
}

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

html, body { background: var(--bg); color: var(--text); }
body {
  font-family: var(--sans);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 721px) {
  body { overflow: hidden; }
  main { overflow: hidden; min-height: 0; }
}

/* Utility: small-caps label (Inter, uppercase, tracked) */
.label {
  font-family: var(--sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted-soft);
}

/* Utility: hairline rule */
.hairline { border-bottom: 1px solid var(--hairline); }

/* Visually hidden (a11y) — clip pattern, safe for focusable elements */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- HEADER ---- */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 56px 18px;
  border-bottom: 1px solid var(--hairline);
}
.app-header > a { justify-self: start; }
.app-header .tagline {
  justify-self: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 17px; color: var(--muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.app-header .tagline .tagline-map {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.app-header .tagline .tagline-map:hover,
.app-header .tagline .tagline-map:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
  outline: none;
}
.app-header .logo { height: 72px; width: auto; }
.app-header .nav {
  justify-self: end;
  display: flex; gap: 32px; align-items: center;
  font-size: 11px; letter-spacing: var(--ui-tracking);
  text-transform: uppercase; color: var(--muted);
}
.app-header .nav > * { line-height: 1; display: inline-flex; align-items: center; }
.app-header .nav .back-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer;
}
.app-header .nav .back-link:hover { color: var(--text); }
.app-header .nav .back-link[hidden] { display: none; }
.app-header .nav .step-num {
  font-family: var(--serif); font-style: italic;
  font-size: 20px; letter-spacing: 0.04em;
  color: var(--text); text-transform: none;
}
.app-header .nav .step-num em { color: var(--accent); font-style: italic; }

/* Mobile-only tagline (lives inside step-service hero); hidden on desktop */
.tagline-mobile { display: none; }

/* ---- MAIN / STEP CONTAINER ---- */
main { flex: 1; min-height: 0; }
.step { display: none; }
.step.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Two-column body grid (each step uses its own .body) */
.step-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.step-body .left {
  padding: 56px 56px 36px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.step-body .right {
  padding: 48px 56px 36px;
  border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; justify-content: flex-start;
}

/* Hero block (left col) */
.hero h1.display {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 76px; line-height: 0.98; letter-spacing: -0.015em;
  color: var(--text); margin: 0;
}
.hero h1.display .gold { color: var(--accent); font-style: italic; }
.hero .lede {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 18px; line-height: 1.45; color: #444;
  margin-top: 26px;
}
.hero .label { margin-bottom: 26px; }

/* Orari di apertura — typographic block top-right of step-date hero, derived from config (renderOrari).
   No box/border: pure type aligned to the column edge, colophon-style (deboxed 5 giu). */
.hero-orari {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.hero-orari .hero-orari-text { flex: 1 1 auto; min-width: 0; }
.orari-panel {
  flex: 0 0 auto;
  min-width: 210px;
  text-align: right;
}
.orari-panel:empty { display: none; }
.orari-group + .orari-group { margin-top: 12px; }
.orari-group .days {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--muted-soft);
  margin-bottom: 2px;
}
.orari-group .hours {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.25; color: var(--text);
}

/* Footer-meta (left col bottom, step 1 only) */
.footer-meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: var(--label-size); letter-spacing: var(--ui-tracking);
  text-transform: uppercase; color: var(--muted-soft);
  margin-top: auto;
  padding-top: 32px;
}

/* Cal-strip sits right under the hero, anchored top — does not move when right-column slots populate */
.step-body .left .cal-strip { margin-top: 32px; }

/* Step-date: slots-area vertically centered in right col so empty-day grid sits balanced no-scroll */
#step-date .step-body .right { justify-content: center; }

/* ---- SINGLE-COLUMN CENTERED LAYOUT (step-service) ---- */
.step-center {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 48px 56px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.step-center .hero { text-align: center; }
.step-center .hero h1.display { font-size: 56px; }
.step-center .listino-header { margin-top: 8px; }

/* ---- STEP-CONFIRM: 2-col (hero+summary left, form right vertically centered) ---- */
#step-confirm .step-body .right {
  justify-content: center;
}
#step-confirm .step-body .right form {
  width: 100%;
  max-width: 440px;
}

/* ---- CTA BAR — single canonical pattern: .detached, anchored bottom of step ---- */
.cta-bar.detached {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 56px;
  margin: 0;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
  flex-shrink: 0;
}
.cta-bar .back {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: var(--ui-tracking); text-transform: uppercase;
  color: var(--muted);
}
.cta-bar .back:hover { color: var(--text); }
/* Header back-link uses display:none (collapses); cta-bar back uses visibility:hidden to preserve layout space — design-intentional asymmetry. */
.cta-bar .back[hidden] { visibility: hidden; display: inline-block; }
.cta-bar .next {
  background: var(--text); color: #fff;
  border: 0; padding: 14px 28px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: var(--ui-tracking); text-transform: uppercase;
  cursor: pointer; border-radius: 999px;
  transition: background 0.15s ease;
}
.cta-bar .next:hover:not(:disabled) { background: var(--accent); }
.cta-bar .next:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- POWERED-BY FOOTER ---- */
.app-footer {
  text-align: center;
  padding: 24px 20px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--muted-soft);
}
/* Canonical RIC.LABS logotype — proportions match docs/branding/generate-logos.mjs (dot = 14.6% of fontSize) */
.app-footer .rl-logotype {
  display: inline-flex; align-items: baseline;
  font-family: 'Cabinet Grotesk', var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.10em;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.app-footer .rl-logotype:hover { opacity: 0.65; }
.app-footer .rl-logotype .rl-dot {
  display: inline-block;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--accent);
  align-self: flex-end;
  margin: 0 2px 2px;
}
.app-footer .rl-logotype .rl-labs { color: var(--accent); }

/* ---- LISTINO (used by step-service & step-barber) ---- */
.listino-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.listino-header .meta {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--muted-soft);
}

.voce {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.voce:last-child { border-bottom: 0; }
.voce .nome-row {
  display: flex; align-items: baseline; gap: 14px;
}
.voce .nome {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 24px; line-height: 1.1; color: var(--text);
  transition: color 0.15s ease;
}
.voce .durata {
  font-family: var(--sans);
  font-size: var(--label-size); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--muted-soft);
}
.voce .descrizione {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; line-height: 1.45; color: var(--muted);
  margin-top: 6px;
}
.voce .selector {
  width: 18px; height: 18px;
  border: 1px solid var(--text);
  border-radius: 50%;
  align-self: center;
  transition: background 0.15s ease;
}
.voce.selected .nome { color: var(--accent); }
.voce.selected .selector { background: var(--text); }
.voce:hover:not(.selected) .nome { color: #2a2a2a; }

/* ---- WEEKLY STRIP CALENDAR ---- */
.cal-strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
}
.cal-strip-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.cal-strip-head .month-label {
  font-family: var(--sans);
  font-size: var(--label-size); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--muted-soft);
}
.cal-strip-head .nav-arrow {
  background: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--text);
  padding: 0 8px;
}
.cal-strip-head .nav-arrow:disabled { color: var(--hairline); cursor: not-allowed; }

.cal-strip-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-day {
  text-align: center;
  padding: 10px 0 8px;
  cursor: pointer;
  position: relative;
}
.cal-day .dow {
  font-family: var(--sans);
  font-size: 9px; letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--muted-soft);
  margin-bottom: 6px;
}
.cal-day .num {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 24px; line-height: 1; color: var(--text);
}
.cal-day.disabled { cursor: default; }
.cal-day.disabled .num { color: #c0c0c0; }
/* "pieno" (occupato) ≠ "chiuso": non cliccabile, num barrata + tinta distinta,
   badge alert come segnale primario (vedi 02b plan Task 11). */
.cal-day.full {
  cursor: not-allowed;
  pointer-events: none;
}
.cal-day.full .num {
  color: var(--muted-soft);
  text-decoration: line-through;
}
.cal-day.full .badge {
  font-family: var(--sans); font-weight: 500;
  font-size: 8.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--alert);
  margin-top: 6px;
}
.cal-day.selected .num {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ---- SLOT GRID ---- */
.slots-block + .slots-block { margin-top: 18px; }
.slots-block-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.slots-block-head .meta {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--muted-soft);
}
.slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.slot {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 16px;
  text-align: center;
  padding: 9px 0;
  border: 1px solid var(--hairline);
  margin: 0 -1px -1px 0; /* collapse adjacent borders so only filled cells show lines */
  cursor: pointer;
  background: var(--bg);
  transition: background 0.15s ease;
  position: relative;
}
.slot:hover:not(.disabled):not(.selected),
.slot.selected { z-index: 1; }
.slot:hover:not(.disabled):not(.selected) { background: var(--hover-bg); }
.slot.selected {
  background: var(--text);
  color: #fff;
}
.slot.disabled {
  color: var(--muted-soft);
  text-decoration: line-through;
  cursor: not-allowed;
}
/* Scroll indicator pill — hidden on desktop, shown on mobile (see @media max-width: 720px) */
.slots-scroll-indicator { display: none; }

.slots-empty {
  padding: 32px 0; text-align: center;
  font-family: var(--serif); font-style: italic;
  color: var(--muted-soft);
}

/* ---- SUMMARY (left col, step 4) — card style ---- */
.summary {
  margin-top: 32px;
  background: var(--hover-bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 4px 24px;
}
.summary .row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.summary .row:last-child { border-bottom: 0; }
.summary .row .label { letter-spacing: var(--ui-tracking); }
.summary .row .valore {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--text);
}
.summary .row .valore .valore-map {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.summary .row .valore .valore-map:hover,
.summary .row .valore .valore-map:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
  outline: none;
}

/* ---- FORM (right col, step 4) ---- */
.form-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 40px;
}
.form-head .meta {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--muted-soft);
}
.field { margin-bottom: 26px; }
.field > label {
  display: block;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
  margin-bottom: 6px;
}
.field > label .opt {
  font-family: var(--serif); font-style: italic;
  font-size: 11px; letter-spacing: 0; text-transform: none;
  color: var(--muted-soft); margin-left: 6px;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"] {
  width: 100%;
  border: 0; border-bottom: 1px solid var(--hairline);
  background: transparent;
  font-family: var(--serif); font-style: italic;
  font-size: 20px; color: var(--text);
  padding: 6px 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.field input::placeholder {
  color: #bcbcbc; font-style: italic;
}
.field input:focus { border-bottom-color: var(--accent); }
.field .error-msg {
  display: none;
  font-family: var(--sans); font-size: 11px;
  color: var(--alert);
  margin-top: 4px;
}
.field.has-error input { border-bottom-color: var(--alert); }
.field.has-error .error-msg { display: block; }

/* Privacy checkbox */
.consent {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 18px 0;
}
.consent input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  appearance: none;
  border: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: grid; place-items: center;
}
.consent input[type="checkbox"]:checked {
  background: var(--text);
}
.consent input[type="checkbox"]:checked::after {
  content: '✓'; color: #fff; font-size: 12px; line-height: 1;
}
.consent label {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--muted); line-height: 1.45;
}
.consent label a {
  color: var(--accent); text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 3px;
}

/* Submit button check icon (step-confirm) */
.cta-bar .next .check { color: var(--accent); margin-left: 8px; }

/* ---- RESULT SCREENS ---- */
.result {
  max-width: 640px; margin: 0 auto;
  padding: 88px 56px 56px;
  text-align: center;
}
.result .label { display: inline-block; margin-bottom: 28px; }
.result h1 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 56px; line-height: 1; letter-spacing: -0.01em;
  color: var(--text); margin: 0;
}
.result h1 .gold { color: var(--accent); font-style: italic; }
.result .lede {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--muted); line-height: 1.5;
  margin-top: 22px;
}
.result .recap {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--text); line-height: 1.6;
  margin-top: 24px;
}
.result .actions {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 36px;
}
.result .actions .next {
  background: var(--text); color: #fff;
  border: 0;
  padding: 14px 28px; border-radius: 999px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: var(--ui-tracking); text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.result .actions .next:hover { background: var(--accent); }
.result .actions .ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--text);
  padding: 14px 28px; border-radius: 999px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: var(--ui-tracking); text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.result .actions .ghost:hover { background: var(--text); color: #fff; }
.result.error h1 .gold { color: var(--alert); }

/* Editorial fine-print pattern: hairline above, small muted note below */
.result .fine-rule {
  width: 48px;
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 32px auto 18px;
}
.result .fine-print {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--muted-soft); line-height: 1.55;
  margin-top: 0;
}
.result .fine-print a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: opacity 160ms ease;
}
.result .fine-print a:hover,
.result .fine-print a:focus-visible { opacity: 0.7; outline: none; }

/* ---- MOBILE (≤ 720px) ---- */
@media (max-width: 720px) {
  /* Mobile stacking heights — content padding-bottom must clear footer + CTA */
  :root {
    --mobile-header-h: 76px;     /* fixed header height (logo 52 + 12+12 padding) */
    --mobile-footer-h: 44px;     /* single-line footer height + breathing */
    --mobile-cta-h: 64px;
    --mobile-bottom-stack: 124px; /* footer + cta + breathing room */
  }

  body { padding-top: var(--mobile-header-h); }

  .app-header {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--bg);
    z-index: 21;
    grid-template-columns: 1fr auto;
    padding: 12px 16px;
    align-items: center;
  }
  /* Logo PNG has visual mass biased toward upper bbox — shift only the logo down
     to compensate; step-num stays centered via symmetric header padding. */
  .app-header > a { display: block; line-height: 0; transform: translateY(6px); }
  .app-header .tagline { display: none; } /* desktop tagline hidden on mobile; see .tagline-mobile inside hero */
  .app-header .logo { height: 52px; display: block; }
  .app-header .nav { gap: 16px; font-size: 8px; letter-spacing: 0.20em; }
  .app-header .nav .back-link { display: none !important; } /* mobile: back nella cta-bar basta */
  .app-header .nav .step-num { font-size: 24px; }

  /* Mobile-only tagline injected inside step-service hero (hidden on desktop) */
  .tagline-mobile {
    display: block;
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 17px; color: var(--muted);
    letter-spacing: 0.01em;
    margin-top: 14px;
  }
  .tagline-mobile .tagline-map {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
  }
  .tagline-mobile .tagline-map:hover,
  .tagline-mobile .tagline-map:focus-visible {
    color: var(--text);
    border-bottom-color: var(--accent);
    outline: none;
  }

  /* Step-center mobile */
  .step-center { padding: 24px 22px var(--mobile-bottom-stack); gap: 24px; overflow: visible; }
  .step-center .hero h1.display { font-size: 38px; }

  .step-body {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .step-body .left,
  .step-body .right {
    padding: 28px 22px 24px;
  }
  .step-body .right {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-bottom: var(--mobile-bottom-stack); /* room for stacked footer + CTA */
  }

  .hero h1.display { font-size: 38px; }
  .hero .lede { font-size: 18px; max-width: 100%; }
  .hero .label { margin-bottom: 18px; }

  /* Step-date hero mobile: panel resta a destra del titolo come su desktop
     (richiesta Ric 5 giu), compattato — min-width 0 + font ridotti — per non
     schiacciare il titolo (motivo dello stack precedente). */
  .hero-orari { gap: 20px; }
  .orari-panel { min-width: 0; }
  .orari-group .days { font-size: 9px; }
  .orari-group .hours { font-size: 15px; }

  .footer-meta { display: none; } /* taglio per spazio mobile */

  .voce { padding: 14px 0; }
  .voce .nome { font-size: 20px; }
  .voce .descrizione { display: none; } /* taglio per spazio */

  .cal-strip { padding: 14px 0; }
  .cal-strip-grid { grid-template-columns: repeat(7, 1fr); }
  .cal-day { padding: 8px 0 6px; }
  .cal-day .num { font-size: 28px; }

  /* Remove hairline between cal-strip (date) and slots-area on step-date — cal-strip
     already provides top+bottom borders, the extra rule felt heavy on small screens.
     Also balance the gap below the cal-strip with the 32px above it (cal-strip margin-top). */
  #step-date .step-body .left { padding-bottom: 0; }
  #step-date .step-body .right { border-top: 0; padding-top: 32px; }

  .slots-grid { grid-template-columns: repeat(4, 1fr); }
  .slot { padding: 8px 0; font-size: 18px; }

  .summary .row { grid-template-columns: 80px 1fr; padding: 12px 0; }
  .summary .row .valore { font-size: 16px; }

  .field input { font-size: 18px; }

  /* Sticky CTA at bottom — sits ABOVE the fixed footer */
  .cta-bar.detached {
    position: fixed; left: 0; right: 0;
    bottom: var(--mobile-footer-h);
    padding: 14px 18px;
    z-index: 20;
  }
  .cta-bar .next { padding: 12px 22px; font-size: 10px; }

  /* Scroll indicator pill — hint that more slots exist below the fold (mobile only).
     Sits just above the CTA bar; JS toggles .show based on slots-area overflow vs viewport. */
  .slots-scroll-indicator {
    display: block;
    position: fixed; left: 50%;
    bottom: calc(var(--mobile-footer-h) + var(--mobile-cta-h) + 14px);
    transform: translateX(-50%) translateY(6px);
    z-index: 18;
    padding: 7px 14px;
    background: rgba(10, 10, 10, 0.86);
    color: #fff;
    font-family: var(--sans, system-ui, -apple-system, sans-serif);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .slots-scroll-indicator.show {
    opacity: 0.92;
    transform: translateX(-50%) translateY(0);
  }

  /* App footer fixed at very bottom, below the CTA bar — single line on mobile.
     Height locked to --mobile-footer-h so .cta-bar (bottom: var(--mobile-footer-h)) sits flush — no transparent gap. */
  .app-footer {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: var(--mobile-footer-h);
    display: flex; justify-content: center; align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: var(--bg);
    z-index: 19;
    font-size: 10px;
  }
  .app-footer .rl-logotype { font-size: 12px; }

  /* Result screens */
  .result { padding: 56px 22px var(--mobile-bottom-stack); }
  .result h1 { font-size: 36px; }
  .result .lede { font-size: 20px; }
  .result .fine-rule { margin: 24px auto 14px; }
  .result .fine-print { font-size: 16px; }
}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step.active { animation: fadeUp 0.4s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .step.active { animation: none; }
}

/* hover transitions already inline on .voce, .slot, .cta-bar .next */
/* focus transition on form input is inline */

/* ============================================================
   EXPLORATIVE — Olga TEST 13 mag (revert-friendly block)
   - Tropical strip under cal-strip on step-date (desktop only)
   To revert: delete this block + tropical-strip.jpg + HTML div
   ============================================================ */

/* Tropical strip — desktop only, sits in white space below cal-strip */
.tropical-strip {
  display: block;
  width: 100%;
  height: 180px;
  margin-top: 40px;
  background-image: url("tropical-strip.jpg?v=20260513-ed-20");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at center, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at center, #000 30%, transparent 100%);
  opacity: 0.65;
}

/* Hide tropical strip on mobile (≤720px) — desktop accent only */
@media (max-width: 720px) {
  .tropical-strip { display: none; }
}
/* ============================================================
   END EXPLORATIVE BLOCK
   ============================================================ */

/* ---- TOAST (form errors, network errors) ---- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--alert);
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  z-index: 100;
  transition: transform 0.3s ease;
  max-width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }