/*
 * booking-flow.css
 * Overlay host + styles des écrans du flux de réservation.
 * Ne pas modifier les blocs .oco-layer* / .oco-drawer* / #oco-screen-* :
 * port fidèle depuis le prototype validé.
 */

/* =====================================================================
   DESIGN TOKENS — generic + theme-aware.
   Each token falls back to the prototype value but inherits the host
   design system when present: var(--site-token, <default>). Override
   --oco-* (or the site's --accent/--text/...) to re-skin per site.
   ===================================================================== */
.oco-overlay,
.oco-trigger-wrap {
  --oco-surface: var(--bg, #ffffff);
  --oco-surface-subtle: var(--gray-50, #f8fafc);
  --oco-surface-sunken: var(--gray-100, #f1f5f9);
  --oco-border: var(--border, #dcdfe1);
  --oco-border-strong: var(--gray-300, #cad5e2);
  --oco-heading: var(--text-subtle, #344054);
  --oco-text: var(--gray-600, #45556c);
  --oco-text-strong: var(--text, #101828);
  --oco-text-muted: var(--text-muted, #667085);
  --oco-text-faint: var(--gray-400, #98a2b3);
  --oco-accent: var(--accent, #0094e5);
  --oco-accent-bright: var(--accent-subtle, #00a5ff);
  --oco-accent-strong: var(--accent-emphasis, #0086cf);
  --oco-accent-wash: var(--bg-accent, #eff8ff);
  --oco-on-accent: var(--text-on-accent, #ffffff);
  --oco-warning: var(--accent-secondary-subtle, #f46e01);
  --oco-warning-text: var(--text-accent-secondary-subtle, #cb5c01);
  --oco-warning-wash: var(--bg-accent-secondary, #ffeacc);
  --oco-success: var(--accent-success, #06b400);
  --oco-success-text: var(--text-accent-success, #067647);
  --oco-success-wash: var(--bg-accent-success, #dcfce7);
  --oco-danger: #ff4b4b;
  --oco-danger-wash: #ffe0e0;
  --oco-scrim: #a0a0a0;
}



/* =====================================================================
   OVERLAY HOST
   ===================================================================== */
.oco-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  background: rgba(15, 22, 38, 0.6);
}
/* Open = mounted. is-closing plays the reverse, then JS removes is-open (display:none),
   so the closed state never intercepts clics. */
.oco-overlay.oco-is-open { display: block; animation: ocoBackdropIn .24s ease; }
/* E9 mode picker : la modale de réservation passe AU-DESSUS de « Quelle balade ? »
   (.oco-fs-overlay, z-index 100000) qui reste visible derrière. */
.oco-overlay.oco-is-picker { z-index: 100010; }
.oco-overlay.oco-is-open.oco-is-closing { animation: ocoBackdropOut .24s ease forwards; }
@keyframes ocoBackdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ocoBackdropOut { from { opacity: 1; } to { opacity: 0; } }

/* Panel motion: scales in (desktop) or slides up from the bottom (mobile).
   The backdrop opacity is handled above; here we only move the panel. */
.oco-overlay.oco-is-open .oco-stage[data-device="desktop"]    { animation: ocoEnterDesktop .26s cubic-bezier(.2,.7,.2,1); }
.oco-overlay.oco-is-open .oco-stage[data-device="mobile"]     { animation: ocoEnterMobile  .30s cubic-bezier(.32,.72,0,1); }
.oco-overlay.oco-is-closing .oco-stage[data-device="desktop"] { animation: ocoLeaveDesktop .22s ease forwards; }
.oco-overlay.oco-is-closing .oco-stage[data-device="mobile"]  { animation: ocoLeaveMobile  .24s ease forwards; }
@keyframes ocoEnterDesktop { from { transform: scale(.96); } to { transform: none; } }
@keyframes ocoLeaveDesktop { from { transform: none; } to { transform: scale(.96); } }
@keyframes ocoEnterMobile  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ocoLeaveMobile  { from { transform: translateY(0); } to { transform: translateY(100%); } }

.oco-stage {
  position: absolute;
  inset: 0;
  transition: opacity .15s ease, transform .15s ease;
}

/* Desktop: center the figma card */
.oco-stage[data-device="desktop"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop: figma card as inline-block. background:transparent neutralizes host
   themes that paint bare <section> (e.g. Bricks `section{background:var(--bg)}`),
   which would otherwise show a white square behind the card's rounded corners. */
.oco-stage[data-device="desktop"] .oco-screen { display: inline-block; background: transparent; }

/* Desktop step fade + subtle zoom (mobile uses slides/drawers, not is-fading) */
.oco-stage.oco-is-fading { opacity: 0; transform: scale(.98); }

/* Desktop nested info modal (alternative / waitlist) — overlaid on the calendar.
   The backdrop carries data-action="toDatetime": clicking outside the modal returns
   to the calendar instead of closing the whole flow. */
.oco-nested {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: opacity .15s ease;
}
.oco-nested.oco-is-leaving { opacity: 0; }
.oco-nested__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 38, 0.45);
  cursor: pointer;
}
.oco-nested__modal {
  position: relative;
  z-index: 1;
  animation: ocoNestedIn .18s ease;
}
@keyframes ocoNestedIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Trigger button */
.oco-trigger {
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent));
  border-radius: 999px;
  font-family: "Poetsen One", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.48px;
  color: var(--oco-surface);
  filter: drop-shadow(0px 3px 1.5px rgba(0, 0, 0, 0.06)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.04));
  transition: background 0.14s ease;
}
.oco-trigger:hover {
  background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent-strong));
}
.oco-trigger:active {
  opacity: 0.9;
}

/* =====================================================================
   GLOBAL SCOPED BOX-SIZING (was: * { box-sizing: border-box })
   ===================================================================== */
.oco-overlay * {
  box-sizing: border-box;
}

:root { --sky: var(--oco-accent); --sky-2: var(--oco-accent-bright); }

/* =====================================================================
   MOBILE LAYERS
   ===================================================================== */

/* Each mounted mobile screen is an absolute layer that fills the viewport and
   scrolls internally when its content is taller than the viewport.
   Anchored to .oco-stage (position:absolute context). */
.oco-layer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--oco-surface);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 34px rgba(16, 24, 40, 0.18);
}
.oco-layer .oco-screen { display: block; flex: none; }
.oco-layer .oco-screen > * { max-width: 100%; }
.oco-layer.oco-is-success { justify-content: center; }

/* ---- Lateral slide between wizard steps ---- */
.oco-layer.oco-slide-in-right  { animation: mslideInRight  .28s cubic-bezier(.4,0,.2,1) both; }
.oco-layer.oco-slide-out-left  { animation: mslideOutLeft  .28s cubic-bezier(.4,0,.2,1) both; }
.oco-layer.oco-slide-in-left   { animation: mslideInLeft   .28s cubic-bezier(.4,0,.2,1) both; }
.oco-layer.oco-slide-out-right { animation: mslideOutRight .28s cubic-bezier(.4,0,.2,1) both; }
@keyframes mslideInRight  { from { transform: translateX(100%);  } to { transform: translateX(0); } }
@keyframes mslideOutLeft  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes mslideInLeft   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes mslideOutRight { from { transform: translateX(0); } to { transform: translateX(100%);  } }

/* ---- Nested bottom-sheet drawer ---- */
.oco-drawer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.oco-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
}
.oco-drawer__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--oco-surface);
  border: 1px solid var(--oco-border);
  border-radius: 24px 24px 0 0;
  box-shadow: 0px 2px 6px 0px rgba(51, 67, 77, 0.1);
}
.oco-drawer__sheet > .oco-screen { display: block; width: 100%; }
.oco-drawer__sheet #oco-screen-waitlist .oco-root,
.oco-drawer__sheet #oco-screen-alternative-mobile .oco-inner {
  width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  height: auto;
  overflow: visible;
}

/* enter / exit animations */
.oco-drawer.oco-drawer-enter .oco-drawer__backdrop { animation: mbackdropIn .28s ease both; }
.oco-drawer.oco-drawer-enter .oco-drawer__sheet    { animation: msheetUp   .28s cubic-bezier(.4,0,.2,1) both; }
.oco-drawer.oco-drawer-exit  .oco-drawer__backdrop { animation: mbackdropOut .28s ease both; }
.oco-drawer.oco-drawer-exit  .oco-drawer__sheet    { animation: msheetDown   .28s cubic-bezier(.4,0,.2,1) both; }
@keyframes mbackdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes msheetUp     { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes msheetDown   { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* ============ Mobile: every screen is a bottom-sheet ============ */
.oco-layer > .oco-screen { width: 100%; }
/* Cap the fixed-width Figma roots AND their inner containers (402px / 412px) to the
   viewport — prevents horizontal overflow on narrow phones (e.g. iPhone SE, 375px).
   max-width only constrains elements that actually exceed their parent, so flex
   cells/slots and icons are untouched; it beats id-level `width:Npx` cleanly. */
.oco-layer .oco-screen,
.oco-layer .oco-screen * { max-width: 100%; }
.oco-layer #oco-screen-persons .oco-card {
  width: 100%; border: none; border-radius: 0; box-shadow: none;
}
.oco-layer #oco-screen-datetime-mobile.oco-screen { height: auto; overflow: visible; background: var(--oco-surface); }
.oco-layer #oco-screen-datetime-mobile .oco-card {
  position: static; transform: none; width: 100%; overflow: visible;
  border: none; border-radius: 0; box-shadow: none;
}
.oco-layer #oco-screen-recap-mobile .oco-root { height: auto; overflow: visible; }
.oco-layer #oco-screen-recap-mobile .oco-card {
  position: static; left: auto; top: auto; width: 100%; height: auto; overflow: visible;
  border: none; border-radius: 0; box-shadow: none;
}
/* Footer sticks to the bottom of the scrolling sheet; the scroll content passes
   underneath it (opaque bg + z-index). The content keeps a bottom padding so the
   last field clears the footer instead of touching it. */
.oco-layer #oco-screen-recap-mobile .oco-footer { position: sticky; bottom: 0; left: auto; top: auto; width: 100%; z-index: 2; }

/* ---- V5.65 — UX mobile booking-flow : footers sticky + edge-to-edge, code promo
   hors footer, padding cohérent résumé/formulaire. ---- */
/* Datetime (3602) : footer Retour/Suivant sticky en bas de la sheet (sinon il faut
   scroller tout en bas) + edge-to-edge (séparateur haut seulement). */
.oco-layer #oco-screen-datetime-mobile .oco-footer {
  position: sticky; bottom: 0; left: auto; top: auto; width: 100%; z-index: 2;
  background: var(--oco-surface);
  border: none; border-top: 1px solid var(--oco-border);
  padding: 12px 16px; margin: 0; border-radius: 0;
}
/* le dernier créneau doit dégager le footer collant */
.oco-layer #oco-screen-datetime-mobile .oco-slots-section { padding-bottom: 16px; }
/* Confirmation (3797) : footer collé au bas/bords (pas de boîte bordée). */
.oco-layer #oco-screen-recap-mobile .oco-footer {
  background: var(--oco-surface);
  border: none; border-top: 1px solid var(--oco-border);
  padding: 12px 16px; margin: 0; border-radius: 0;
}
/* Code promo : rendu SOUS le total, à l'intérieur de .oco-recap-inner (comme en
   desktop) et non plus en bas du formulaire. Le parent porte déjà padding:24 et
   le fond du résumé → la section ne remet ni padding latéral ni background,
   sinon double inset (48) et bandeau blanc au milieu du récap gris.
   box-sizing + width:100% sur le bloc/row pour que le bouton « Appliquer » ne
   déborde pas à droite ; pas de border-top du bloc (le gap flex sépare déjà). */
.oco-layer #oco-screen-recap-mobile .oco-promo-section { width: 100%; padding: 0; background: transparent; box-sizing: border-box; }
/* Le parent .oco-recap-inner est un flex a gap:32px : deux fois trop pour
   l'ecart total -> code promo, qui doit suivre le rythme de la grille (16px).
   On remonte la section plutot que de toucher au gap, qui espace correctement
   toutes les autres sections du recapitulatif. */
.oco-layer #oco-screen-recap-mobile .oco-promo-section { margin-top: -16px; }
.oco-layer #oco-screen-recap-mobile .ocoflow-promo-block { width: 100%; margin: 0; padding: 0; border-top: none; box-sizing: border-box; }
.oco-layer #oco-screen-recap-mobile .ocoflow-promo-row { width: 100%; box-sizing: border-box; gap: 10px; }
/* Padding input/bouton écrasé à 0 par un reset input/button WP sur mobile → forcer
   (scopé écran + !important pour battre le reset). */
.oco-layer #oco-screen-recap-mobile .ocoflow-promo-input { padding: 0 16px !important; }
.oco-layer #oco-screen-recap-mobile .ocoflow-promo-btn { padding: 0 22px !important; }
/* Chèque cadeau — même wrapper .oco-promo-section (le gap flex du parent
   sépare déjà les deux sections empilées), miroir des overrides ci-dessus
   pour les classes internes propres au bloc giftcard. */
.oco-layer #oco-screen-recap-mobile .ocoflow-giftcard-block { width: 100%; margin: 0; padding: 0; border-top: none; box-sizing: border-box; }
.oco-layer #oco-screen-recap-mobile .ocoflow-giftcard-row { width: 100%; box-sizing: border-box; gap: 10px; }
.oco-layer #oco-screen-recap-mobile .ocoflow-giftcard-input { padding: 0 16px !important; }
.oco-layer #oco-screen-recap-mobile .ocoflow-giftcard-btn { padding: 0 22px !important; }
/* Discount toggle (collapsed state) — same "no border-top, no extra margin"
   treatment as the blocks above: the flex gap on .oco-recap-inner already
   separates the stacked .oco-promo-section wrappers on mobile. */
.oco-layer #oco-screen-recap-mobile .ocoflow-gclink { width: 100%; margin: 6px 0 0; padding: 0; border: none; box-sizing: border-box; }
/* Padding du formulaire identique au résumé (24px) sur mobile. .oco-info /
   .oco-footer sont imbriqués DANS .oco-recap (div verbatim non fermée), donc
   insérés par son padding:24. On annule le padding du recap et on le reporte
   sur .oco-recap-inner + .oco-btn-back → résumé ET formulaire alignés à 24px,
   footer full-bleed. (Le code promo, lui, vit dans .oco-recap-inner.) */
.oco-layer #oco-screen-recap-mobile .oco-recap { padding: 0; background: var(--oco-surface); }
.oco-layer #oco-screen-recap-mobile .oco-recap-inner { padding: 24px; background: var(--oco-surface-subtle); }
.oco-layer #oco-screen-recap-mobile .oco-info-inner { padding: 24px; }
/* .oco-btn-back est déjà dans .oco-recap-inner (padding 24) → pas de marge en plus
   (sinon décalé à 48). Le formulaire (.oco-info) sur fond blanc comme en desktop
   (sinon il hérite du gris du récap → inputs « plus clairs »). */
.oco-layer #oco-screen-recap-mobile .oco-btn-back { margin: 16px 0 0; }
.oco-layer #oco-screen-recap-mobile .oco-info { background: var(--oco-surface); }

/* D8 — barrer les jours INDISPONIBLES (.oco-is-off = passés / sans dispo) dans les
   calendriers booking-flow (desktop/mobile). Les jours de remplissage
   (autre mois) ne portent pas .oco-is-off → non barrés. */
#oco-screen-datetime .oco-cell.oco-is-off .oco-num,
#oco-screen-datetime-mobile .oco-cell.oco-is-off .oco-num { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ============ iOS-style recess: base layer behind a drawer ============ */
.oco-layer.oco-is-recessed,
.oco-layer.oco-is-recessed-static,
.oco-layer.oco-is-unrecessing { overflow: hidden; transform-origin: 50% 0; }
.oco-layer.oco-is-recessed        { animation: mrecess   .34s cubic-bezier(.32,.72,0,1) both; }
.oco-layer.oco-is-recessed-static { transform: translateY(var(--recess-y,260px)) scale(.9); border-radius: 20px; }
.oco-layer.oco-is-unrecessing     { animation: munrecess .34s cubic-bezier(.32,.72,0,1) both; }
@keyframes mrecess   { from { transform: translateY(0) scale(1); border-radius: 24px 24px 0 0; } to { transform: translateY(var(--recess-y,260px)) scale(.9); border-radius: 20px; } }
@keyframes munrecess { from { transform: translateY(var(--recess-y,260px)) scale(.9); border-radius: 20px; } to { transform: translateY(0) scale(1); border-radius: 24px 24px 0 0; } }

/* =====================================================================
   SUCCESS / CONFIRMATION SCREEN
   ===================================================================== */
#oco-screen-success { font-family: "Mulish", sans-serif; }
#oco-screen-success * { margin: 0; padding: 0; box-sizing: border-box; }
#oco-screen-success .oco-su-card {
  width: 412px; max-width: 100%;
  background: var(--oco-surface); border: 1px solid var(--oco-border); border-radius: 24px;
  box-shadow: 0px 2px 6px 0px rgba(51,67,77,0.1);
  padding: 32px 24px; display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center;
}
#oco-screen-success .oco-su-badge {
  width: 64px; height: 64px; border-radius: 999px; background: var(--oco-success-wash);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* En attente de validation manuelle : wash ambre au lieu du vert "confirmé". */
#oco-screen-success .oco-su-badge--pending { background: #fef3c7; }
#oco-screen-success .oco-su-badge svg { width: 34px; height: 34px; display: block; }
#oco-screen-success .oco-su-head { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#oco-screen-success .oco-su-title {
  font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 24px;
  line-height: 1.1; letter-spacing: -0.5px; color: var(--oco-heading);
}
#oco-screen-success .oco-su-sub { font-size: 14px; line-height: 1.35; color: var(--oco-text); max-width: 300px; }
#oco-screen-success .oco-su-recap {
  width: 100%; background: var(--oco-surface-subtle); border: 1px solid var(--oco-surface-sunken); border-radius: 16px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 11px;
}
#oco-screen-success .oco-su-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
#oco-screen-success .oco-su-row span { font-size: 14px; color: var(--oco-text-muted); white-space: nowrap; }
#oco-screen-success .oco-su-row strong { font-size: 14px; font-weight: 800; color: var(--oco-heading); text-align: right; }
#oco-screen-success .oco-su-total {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding-top: 13px; margin-top: 2px; border-top: 1px solid var(--oco-border);
}
#oco-screen-success .oco-su-total span { font-size: 14px; color: var(--oco-text); }
#oco-screen-success .oco-su-total strong {
  font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 22px;
  letter-spacing: -0.4px; color: var(--oco-accent);
}
#oco-screen-success .oco-su-btn {
  width: 100%; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent)); cursor: pointer;
  filter: drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02));
}
#oco-screen-success .oco-su-btn:hover { background: linear-gradient(to bottom, var(--oco-accent), var(--oco-accent-strong)); }
#oco-screen-success .oco-su-btn span {
  font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px;
  letter-spacing: -0.48px; color: var(--oco-surface);
}
/* Mobile: success fills the overlay viewport */
.oco-stage[data-device="mobile"] #oco-screen-success .oco-su-card {
  width: 100%; border: none; box-shadow: none; border-radius: 0;
  justify-content: center; gap: 22px;
}

/* =====================================================================
   INTERACTION AFFORDANCES
   ===================================================================== */
[data-action] { cursor: pointer; }
[data-action]:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* persons stepper buttons */
#oco-screen-persons .oco-stepbtn[data-action] { transition: background .12s ease, border-color .12s ease, transform .06s ease; }
#oco-screen-persons .oco-stepbtn[data-action]:hover { background: var(--oco-surface-subtle); border-color: var(--oco-border-strong); }
#oco-screen-persons .oco-stepbtn[data-action]:active { transform: scale(0.94); background: var(--oco-surface-sunken); }
#oco-screen-persons .oco-stepbtn.oco-is-disabled { opacity: .4; cursor: not-allowed; }
#oco-screen-persons .oco-cta[data-action] { transition: background .12s ease, border-color .12s ease; }
#oco-screen-persons .oco-cta[data-action]:hover { background: var(--oco-surface-subtle); border-color: var(--oco-border-strong); }

/* calendar day cells */
#oco-screen-datetime .oco-cell.oco-is-clickable { cursor: pointer; transition: background .12s ease; }
#oco-screen-datetime .oco-cell.oco-is-clickable:hover:not(.oco-sel) { background: var(--oco-surface-sunken); }
#oco-screen-datetime-mobile .oco-cell.oco-is-clickable { cursor: pointer; transition: background .12s ease; }
#oco-screen-datetime-mobile .oco-cell.oco-is-clickable:hover:not(.oco-sel) { background: var(--oco-surface-sunken); }

/* slots */
#oco-screen-datetime .oco-input[data-action] { transition: border-color .12s ease, box-shadow .12s ease; }
#oco-screen-datetime .oco-input[data-action]:hover { border-color: var(--sky); }
#oco-screen-datetime .oco-input.oco-is-selected { border-color: var(--sky); background: var(--oco-accent-wash); box-shadow: 0 0 0 2px rgba(0,148,229,0.25); }
#oco-screen-datetime-mobile .oco-input[data-action] { transition: border-color .12s ease, box-shadow .12s ease; }
#oco-screen-datetime-mobile .oco-input[data-action]:hover { border-color: var(--sky); }
#oco-screen-datetime-mobile .oco-slot.oco-is-selected .oco-input { border-color: var(--sky); background: var(--oco-accent-wash); box-shadow: 0 0 0 2px rgba(0,148,229,0.25); }

/* footer / cta buttons */
#oco-screen-datetime .oco-fbtn[data-action]:not(.oco-dim):hover,
#oco-screen-datetime-mobile .oco-btn[data-action]:not(.oco-dim):hover { background: var(--oco-surface-subtle); }
#oco-screen-datetime .oco-fbtn.oco-dim, #oco-screen-datetime-mobile .oco-btn.oco-dim { cursor: not-allowed; }

/* alternative buttons */
#oco-screen-alternative .oco-btn[data-action] { transition: filter .12s ease, opacity .12s ease; }
#oco-screen-alternative .oco-btn[data-action]:hover { filter: brightness(1.04); }
#oco-screen-alternative .oco-btn[data-action]:active { opacity: .9; }
#oco-screen-alternative-mobile .oco-mbtn[data-action] { transition: filter .12s ease, opacity .12s ease; }
#oco-screen-alternative-mobile .oco-mbtn[data-action]:hover { filter: brightness(1.04); }
#oco-screen-alternative-mobile .oco-mbtn[data-action]:active { opacity: .9; }

/* waitlist buttons + date cards */
#oco-screen-waitlist .oco-btn-alert[data-action]:hover,
#oco-screen-waitlist .oco-btn-secondary[data-action]:hover { filter: brightness(1.03); }
#oco-screen-waitlist .oco-date-card[data-action] { cursor: pointer; transition: background .12s ease; }
#oco-screen-waitlist .oco-date-card[data-action]:hover { background: var(--oco-accent-wash); }
#oco-screen-waitlist .oco-waitlist-success {
  font-weight: 800; font-size: 14px; letter-spacing: -0.42px;
  color: var(--oco-success-text); margin-top: 2px;
}

/* recap + confirmation primary buttons */
#oco-screen-recap .oco-btn-confirm[data-action]:hover,
#oco-screen-recap .oco-btn-retour[data-action]:hover { filter: brightness(1.04); }
#oco-screen-recap-mobile .oco-btn-confirm[data-action]:hover,
#oco-screen-recap-mobile .oco-btn-back[data-action]:hover { filter: brightness(1.04); }


/* =====================================================================
   SCREEN persons — PERSONS COUNTER
   ===================================================================== */
#oco-screen-persons *,
#oco-screen-persons *::before,
#oco-screen-persons *::after { box-sizing: border-box; margin: 0; padding: 0; }

#oco-screen-persons {
  font-family: "Mulish", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#oco-screen-persons .oco-card {
  width: 412px;
  background: var(--oco-surface);
  border: 1px solid var(--oco-border);
  border-radius: 24px;
  box-shadow: 0px 2px 3px rgba(51, 67, 77, 0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

#oco-screen-persons .oco-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  word-break: break-word;
}
#oco-screen-persons .oco-header__title {
  font-weight: 800;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.48px;
  color: var(--oco-heading);
  text-align: center;
  white-space: nowrap;
}
#oco-screen-persons .oco-header__sub {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.42px;
  color: var(--oco-text);
  width: 100%;
}

#oco-screen-persons .oco-rows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
#oco-screen-persons .oco-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#oco-screen-persons .oco-row__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
#oco-screen-persons .oco-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
#oco-screen-persons .oco-row__name {
  font-weight: 800;
  font-size: 20px;
  line-height: normal;
  letter-spacing: -0.6px;
  color: var(--oco-heading);
  white-space: nowrap;
}
#oco-screen-persons .oco-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border: 1px solid var(--oco-border-strong);
  border-radius: 999px;
}
#oco-screen-persons .oco-pill__txt {
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  letter-spacing: -0.36px;
  color: var(--oco-heading);
  white-space: nowrap;
}
#oco-screen-persons .oco-row__sub {
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.48px;
  color: rgba(49, 65, 88, 0.65);
  white-space: nowrap;
}

#oco-screen-persons .oco-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
#oco-screen-persons .oco-stepbtn {
  width: 40px;
  height: 40px;
  background: var(--oco-surface);
  border: 1px solid var(--oco-border-strong);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow:
    0px 19px 2.5px rgba(0, 0, 0, 0),
    0px 12px 2.5px rgba(0, 0, 0, 0),
    0px 7px 2px rgba(0, 0, 0, 0.01),
    0px 3px 1.5px rgba(0, 0, 0, 0.02),
    0px 1px 1px rgba(0, 0, 0, 0.02);
}
#oco-screen-persons .oco-stepbtn svg { width: 24px; height: 24px; display: block; }
#oco-screen-persons .oco-count {
  font-weight: 800;
  font-size: 20px;
  line-height: normal;
  letter-spacing: -0.6px;
  color: var(--oco-heading);
  white-space: nowrap;
}
#oco-screen-persons .oco-count--muted { font-weight: 400; color: var(--oco-text); }

#oco-screen-persons .oco-divider { width: 100%; height: 1px; background: var(--oco-border); }

#oco-screen-persons .oco-warn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  background: rgba(244, 110, 1, 0.1);
  border-radius: 16px;
  word-break: break-word;
}
#oco-screen-persons .oco-warn__title {
  font-weight: 800;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.48px;
  color: var(--oco-warning-text);
  width: 100%;
}
#oco-screen-persons .oco-warn__body {
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.42px;
  color: rgba(178, 80, 1, 0.75);
  width: 100%;
}

#oco-screen-persons .oco-totals {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  white-space: nowrap;
  word-break: break-word;
}
#oco-screen-persons .oco-totals__col { display: flex; flex-direction: column; gap: 4px; }
#oco-screen-persons .oco-totals__col--right { align-items: flex-end; }
#oco-screen-persons .oco-totals__label {
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.48px;
  color: rgba(49, 65, 88, 0.65);
}
#oco-screen-persons .oco-totals__value {
  font-weight: 800;
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.54px;
  color: var(--oco-heading);
}
#oco-screen-persons .oco-totals__price {
  font-weight: 800;
  font-size: 24px;
  line-height: normal;
  letter-spacing: -0.72px;
  color: var(--oco-heading);
}

#oco-screen-persons .oco-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 12px 20px;
  background: var(--oco-surface);
  border: 1px solid var(--oco-border-strong);
  border-radius: 999px;
  box-shadow:
    0px 19px 2.5px rgba(0, 0, 0, 0),
    0px 12px 2.5px rgba(0, 0, 0, 0),
    0px 7px 2px rgba(0, 0, 0, 0.01),
    0px 3px 1.5px rgba(0, 0, 0, 0.02),
    0px 1px 1px rgba(0, 0, 0, 0.02);
}
#oco-screen-persons .oco-cta__txt {
  font-family: "Poetsen One", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.48px;
  color: var(--oco-heading);
  white-space: nowrap;
}


/* =====================================================================
   SCREEN datetime — DATETIME DESKTOP
   ===================================================================== */
#oco-screen-datetime * { margin: 0; padding: 0; box-sizing: border-box; }
#oco-screen-datetime {
  font-family: "Mulish", sans-serif;
  -webkit-font-smoothing: antialiased;
}
#oco-screen-datetime .oco-root {
  width: 652px; height: 538px;
  background: var(--oco-surface);
  border: 1px solid var(--oco-border);
  border-radius: 24px;
  box-shadow: 0px 2px 6px 0px rgba(51,67,77,0.1);
  display: flex; flex-direction: column; align-items: flex-start;
  overflow: hidden;
  position: relative;
}
#oco-screen-datetime .oco-top { display: flex; align-items: stretch; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#oco-screen-datetime .oco-calpanel {
  width: 412px;
  border-right: 1px solid var(--oco-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
#oco-screen-datetime .oco-datepicker {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  width: 100%; overflow: hidden;
}
#oco-screen-datetime .oco-title {
  color: var(--oco-heading); font-size: 16px; font-weight: 800; line-height: 24px;
  letter-spacing: -0.48px; text-align: center; white-space: nowrap; word-break: break-word;
}
#oco-screen-datetime .oco-month {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
#oco-screen-datetime .oco-navbtn {
  display: flex; align-items: center; justify-content: center;
  padding: 8px; border-radius: 8px; overflow: hidden;
}
#oco-screen-datetime .oco-navbtn svg { width: 20px; height: 20px; display: block; }
#oco-screen-datetime .oco-monthlabel {
  color: var(--oco-heading); font-size: 16px; font-weight: 800; line-height: 24px;
  letter-spacing: -0.48px; text-align: center; white-space: nowrap; word-break: break-word;
}
#oco-screen-datetime .oco-content { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; }
#oco-screen-datetime .oco-calendar { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
#oco-screen-datetime .oco-dates { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; }
#oco-screen-datetime .oco-row { display: flex; align-items: flex-start; width: 100%; border-radius: 20px; overflow: hidden; }
#oco-screen-datetime .oco-headrow { display: flex; align-items: flex-start; width: 100%; }
#oco-screen-datetime .oco-cell {
  flex: 1 0 0; min-width: 1px; height: 40px;
  position: relative; border-radius: 20px;
}
#oco-screen-datetime .oco-cell .oco-num {
  position: absolute; left: 50%; top: calc(50% - 10px); transform: translateX(-50%);
  width: 24px; font-size: 14px; line-height: 20px; letter-spacing: -0.42px;
  text-align: center; font-weight: 400; color: var(--oco-heading); white-space: nowrap; word-break: break-word;
}
#oco-screen-datetime .oco-cell .oco-dow {
  position: absolute; left: 50%; top: calc(50% - 10px); transform: translateX(-50%);
  font-size: 14px; line-height: 20px; letter-spacing: -0.42px;
  text-align: center; font-weight: 400; color: var(--oco-heading); white-space: nowrap; word-break: break-word;
}
#oco-screen-datetime .oco-num.oco-muted { color: var(--oco-text-muted); }
#oco-screen-datetime .oco-num.oco-semi { font-weight: 800; }
#oco-screen-datetime .oco-cell.oco-sel { background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent)); }
#oco-screen-datetime .oco-cell.oco-sel .oco-num { color: var(--oco-surface); font-weight: 800; }
#oco-screen-datetime .oco-cell.oco-today { background: var(--oco-surface-sunken); }
#oco-screen-datetime .oco-cell.oco-soft { background: var(--oco-surface-subtle); }
#oco-screen-datetime .oco-daydot {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
}
#oco-screen-datetime .oco-dot-green { background: var(--oco-success); }
#oco-screen-datetime .oco-dot-orange { background: var(--oco-warning-text); }
#oco-screen-datetime .oco-legend { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
#oco-screen-datetime .oco-legitem { display: flex; gap: 6px; align-items: center; }
#oco-screen-datetime .oco-legdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
#oco-screen-datetime .oco-legitem p {
  color: var(--oco-text); font-size: 12px; font-weight: 400; letter-spacing: -0.36px;
  line-height: normal; white-space: nowrap; word-break: break-word;
}
#oco-screen-datetime .oco-slotswrap {
  display: flex; flex-direction: row; align-items: center; align-self: stretch;
}
#oco-screen-datetime .oco-slots {
  background: var(--oco-surface-subtle); width: 240px; height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
}
#oco-screen-datetime .oco-slots-inner {
  flex: 1 0 0; min-height: 1px; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#oco-screen-datetime .oco-slots-stack {
  flex: 1 0 0; min-height: 1px; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
}
#oco-screen-datetime .oco-slots-groups { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; }
#oco-screen-datetime .oco-slots-group { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
#oco-screen-datetime .oco-slots-group.oco-dim { opacity: 0.5; }
#oco-screen-datetime .oco-input {
  background: var(--oco-surface); border: 1px solid var(--oco-border); border-radius: 999px;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05);
  display: flex; align-items: center; overflow: hidden;
  padding: 8px 14px; width: 100%;
}
#oco-screen-datetime .oco-input-content {
  flex: 1 0 0; min-width: 1px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
#oco-screen-datetime .oco-input-time { display: flex; gap: 10px; align-items: center; width: 100%; }
#oco-screen-datetime .oco-input-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
#oco-screen-datetime .oco-input-time p {
  color: var(--oco-text-strong); font-size: 16px; font-weight: 800; letter-spacing: -0.48px;
  line-height: normal; white-space: nowrap; word-break: break-word;
}
#oco-screen-datetime .oco-input-sub {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding-left: 16px;
}
#oco-screen-datetime .oco-input-sub p {
  flex: 1 0 0; min-width: 1px;
  font-size: 12px; font-weight: 400; letter-spacing: -0.36px; line-height: normal;
  word-break: break-word;
}
#oco-screen-datetime .oco-sub-gray { color: var(--oco-text); }
#oco-screen-datetime .oco-sub-orange { color: var(--oco-warning-text); }
#oco-screen-datetime .oco-footer {
  background: var(--oco-surface); border: 1px solid var(--oco-border);
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 24px; width: 100%;
}
#oco-screen-datetime .oco-footer-row {
  display: flex; align-items: flex-start; justify-content: space-between; width: 100%;
}
#oco-screen-datetime .oco-fbtn {
  background: var(--oco-surface); border: 1px solid var(--oco-border-strong); border-radius: 999px;
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 12px 20px;
  filter: drop-shadow(0px 19px 2.5px rgba(0,0,0,0)) drop-shadow(0px 12px 2.5px rgba(0,0,0,0)) drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02));
}
#oco-screen-datetime .oco-fbtn.oco-dim { opacity: 0.5; }
#oco-screen-datetime .oco-fbtn p {
  font-family: "Poetsen One", sans-serif;
  color: var(--oco-heading); font-size: 16px; font-weight: 400; letter-spacing: -0.48px;
  line-height: normal; white-space: nowrap; word-break: break-word;
}
#oco-screen-datetime .oco-fbtn .oco-fico { width: 24px; height: 24px; display: block; flex-shrink: 0; }
#oco-screen-datetime .oco-fbtn .oco-fico.oco-flip { transform: rotate(180deg); }


/* =====================================================================
   SCREEN alternative — ALTERNATIVE DESKTOP
   ===================================================================== */
#oco-screen-alternative.oco-screen {
  font-family: "Mulish", sans-serif;
  display: inline-block;
}
#oco-screen-alternative *,
#oco-screen-alternative *::before,
#oco-screen-alternative *::after { box-sizing: border-box; }
#oco-screen-alternative .oco-root {
  width: 412px; height: 373px;
  background: var(--oco-surface); border: 1px solid var(--oco-border); border-radius: 24px;
  box-shadow: 0px 2px 6px 0px rgba(51, 67, 77, 0.1);
  overflow: hidden; display: flex; flex-direction: column; align-items: stretch;
}
#oco-screen-alternative .oco-header {
  display: flex; gap: 12px; align-items: flex-start; padding: 24px;
  border-bottom: 1px solid var(--oco-border);
}
#oco-screen-alternative .oco-icon-circle {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: var(--oco-warning-wash);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#oco-screen-alternative .oco-icon-circle svg { width: 24px; height: 24px; display: block; }
#oco-screen-alternative .oco-header-text {
  flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
}
#oco-screen-alternative .oco-header-title {
  margin: 0; font-weight: 800; font-size: 16px; line-height: 24px; letter-spacing: -0.48px; color: var(--oco-heading);
}
#oco-screen-alternative .oco-header-sub {
  margin: 0; font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); width: 100%;
}
#oco-screen-alternative .oco-body {
  display: flex; flex-direction: column; gap: 24px; align-items: stretch; padding: 24px;
}
#oco-screen-alternative .oco-alt-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#oco-screen-alternative .oco-alt-caption {
  margin: 0; font-weight: 400; font-size: 14px; line-height: 1.2;
  letter-spacing: -0.42px; color: var(--oco-text); width: 316px; max-width: 100%;
}
#oco-screen-alternative .oco-alt-card {
  width: 100%; background: var(--oco-surface-sunken); border-radius: 12px; padding: 12px; display: flex; align-items: center;
}
#oco-screen-alternative .oco-alt-card-inner { display: flex; gap: 12px; align-items: flex-start; }
#oco-screen-alternative .oco-alt-thumb { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; display: block; }
#oco-screen-alternative .oco-alt-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: center; padding-top: 4px; }
#oco-screen-alternative .oco-alt-title { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: var(--oco-heading); white-space: nowrap; }
#oco-screen-alternative .oco-alt-meta { display: flex; gap: 4px; align-items: center; }
#oco-screen-alternative .oco-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 999px; background: var(--oco-success); }
#oco-screen-alternative .oco-alt-meta-text { margin: 0; font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); white-space: nowrap; }
#oco-screen-alternative .oco-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#oco-screen-alternative .oco-btn {
  height: 44px; width: 100%; border-radius: 999px;
  display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px 20px;
  filter: drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02));
}
#oco-screen-alternative .oco-btn-secondary { background: var(--oco-surface); border: 1px solid var(--oco-border-strong); }
#oco-screen-alternative .oco-btn-primary { background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent)); border: none; }
#oco-screen-alternative .oco-btn-label { margin: 0; font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: -0.48px; white-space: nowrap; }
#oco-screen-alternative .oco-btn-secondary .oco-btn-label { color: var(--oco-heading); }
#oco-screen-alternative .oco-btn-primary .oco-btn-label { color: var(--oco-surface); }


/* =====================================================================
   SCREEN waitlist — WAITLIST
   ===================================================================== */
#oco-screen-waitlist * { margin: 0; padding: 0; box-sizing: border-box; }
#oco-screen-waitlist { font-family: "Mulish", sans-serif; }
#oco-screen-waitlist .oco-root {
  width: 412px; min-height: 435px;
  background: var(--oco-surface); border: 1px solid var(--oco-border); border-radius: 24px;
  box-shadow: 0px 2px 6px 0px rgba(51, 67, 77, 0.1);
  overflow: hidden; display: flex; flex-direction: column; align-items: stretch;
}
#oco-screen-waitlist .oco-header { display: flex; gap: 12px; align-items: flex-start; padding: 24px; border-bottom: 1px solid var(--oco-border); }
#oco-screen-waitlist .oco-icon-badge {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: var(--oco-danger-wash);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#oco-screen-waitlist .oco-icon-badge svg { width: 24px; height: 24px; display: block; }
#oco-screen-waitlist .oco-header-text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
#oco-screen-waitlist .oco-title { font-weight: 800; font-size: 16px; line-height: 24px; letter-spacing: -0.48px; color: var(--oco-heading); white-space: nowrap; }
#oco-screen-waitlist .oco-subtitle { font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); width: 100%; word-break: break-word; }
#oco-screen-waitlist .oco-body { display: flex; flex-direction: column; gap: 24px; align-items: stretch; padding: 24px; }
#oco-screen-waitlist .oco-alert-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#oco-screen-waitlist .oco-label { font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); word-break: break-word; }
#oco-screen-waitlist .oco-alert-row { display: flex; gap: 8px; align-items: stretch; width: 100%; }
#oco-screen-waitlist .oco-email-input { flex: 1 0 0; min-width: 0; display: flex; align-items: center; padding: 16px; background: var(--oco-surface-sunken); border-radius: 12px; }
#oco-screen-waitlist .oco-email-input span { font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: var(--oco-heading); white-space: nowrap; }
#oco-screen-waitlist .oco-btn-alert {
  flex-shrink: 0; height: 52px; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 16px 24px;
  border-radius: 999px; background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent));
  filter: drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02));
}
#oco-screen-waitlist .oco-btn-alert span { font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: -0.48px; color: var(--oco-surface); white-space: nowrap; }
#oco-screen-waitlist .oco-avail-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#oco-screen-waitlist .oco-dates-row { display: flex; gap: 8px; align-items: stretch; width: 100%; white-space: nowrap; }
#oco-screen-waitlist .oco-date-card {
  flex: 1 0 0; min-width: 0; aspect-ratio: 106 / 106; background: var(--oco-surface-sunken); border-radius: 12px;
  display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center;
}
#oco-screen-waitlist .oco-date-dow,
#oco-screen-waitlist .oco-date-mon { font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-heading); }
#oco-screen-waitlist .oco-date-num {
  font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.56px;
  background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
#oco-screen-waitlist .oco-btn-secondary {
  width: 100%; height: 44px; display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 12px 20px; background: var(--oco-surface); border: 1px solid var(--oco-border-strong); border-radius: 999px;
  filter: drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02));
}
#oco-screen-waitlist .oco-btn-secondary span { font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: -0.48px; color: var(--oco-heading); white-space: nowrap; word-break: break-word; }


/* =====================================================================
   SCREEN recap — RECAP DESKTOP
   ===================================================================== */
#oco-screen-recap.oco-screen { font-family: "Mulish", sans-serif; color: var(--oco-heading); }
#oco-screen-recap * { box-sizing: border-box; }
#oco-screen-recap .oco-root {
  width: 721px; min-height: 420px;
  background: var(--oco-surface); border: 1px solid var(--oco-border); border-radius: 24px;
  box-shadow: 0px 2px 6px 0px rgba(51, 67, 77, 0.1);
  display: flex; align-items: stretch; overflow: hidden; position: relative;
}
#oco-screen-recap .oco-left {
  width: 309px; background: var(--oco-surface-subtle); border-right: 1px solid var(--oco-border);
  padding: 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; flex-shrink: 0;
}
#oco-screen-recap .oco-left-top { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; width: 100%; }
#oco-screen-recap .oco-panel-title { font-weight: 800; font-size: 16px; line-height: 24px; letter-spacing: -0.48px; color: var(--oco-heading); text-align: center; white-space: nowrap; margin: 0; }
#oco-screen-recap .oco-summary-grid { display: grid; grid-template-columns: fit-content(100%) minmax(0, 1fr); column-gap: 32px; row-gap: 16px; width: 100%; }
#oco-screen-recap .oco-sum-label { font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); margin: 0; align-self: start; }
#oco-screen-recap .oco-sum-label.oco-fixed-w { width: 72px; }
#oco-screen-recap .oco-sum-value { font-weight: 800; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-heading); margin: 0; align-self: start; }
#oco-screen-recap .oco-grid-divider { grid-column: 1 / span 2; height: 0; border-top: 1px solid var(--oco-border); }
#oco-screen-recap .oco-total-label { grid-column: 1; font-weight: 800; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-heading); margin: 0; align-self: center; }
#oco-screen-recap .oco-total-value { grid-column: 2; font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: -0.6px; color: var(--oco-heading); text-align: right; margin: 0; align-self: start; }
#oco-screen-recap .oco-btn-retour {
  background: var(--oco-surface); border: 1px solid var(--oco-border-strong);
  display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; flex-shrink: 0;
  filter: drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02));
}
#oco-screen-recap .oco-btn-retour .oco-icon { width: 24px; height: 24px; flex-shrink: 0; display: block; color: var(--oco-heading); }
#oco-screen-recap .oco-btn-retour .oco-label { font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: -0.48px; color: var(--oco-heading); white-space: nowrap; margin: 0; }
#oco-screen-recap .oco-right { width: 412px; display: flex; flex-direction: column; align-items: stretch; border-radius: 24px; flex-shrink: 0; }
#oco-screen-recap .oco-right-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; padding: 24px 24px 0; width: 100%; overflow: hidden; }
#oco-screen-recap .oco-form-fields { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; width: 100%; max-height: 60vh; overflow-y: auto; padding-right: 8px; padding-bottom: 24px; }
#oco-screen-recap .oco-field { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
#oco-screen-recap .oco-field-label { font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: var(--oco-text); width: 316px; margin: 0; }
#oco-screen-recap .oco-field-input { background: var(--oco-surface-sunken); display: flex; align-items: center; padding: 16px; border-radius: 12px; width: 100%; }
#oco-screen-recap .oco-field-input.oco-textarea { height: 96px; align-items: flex-start; }
#oco-screen-recap .oco-field-input .oco-placeholder { font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: var(--oco-heading); opacity: 0.65; white-space: nowrap; margin: 0; }
#oco-screen-recap .oco-right-footer { position: static; width: 100%; background: var(--oco-surface); border-top: 1px solid var(--oco-border); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; }
#oco-screen-recap .oco-btn-confirm {
  background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent)); height: 44px;
  display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; width: 100%;
  filter: drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02));
}
#oco-screen-recap .oco-btn-confirm .oco-label { font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: -0.48px; color: var(--oco-surface); white-space: nowrap; margin: 0; }


/* =====================================================================
   SCREEN datetime-mobile — DATETIME MOBILE
   ===================================================================== */
#oco-screen-datetime-mobile.oco-screen * { box-sizing: border-box; margin: 0; padding: 0; }
#oco-screen-datetime-mobile.oco-screen {
  width: 402px; height: 874px; position: relative; overflow: hidden;
  background: var(--oco-scrim);
  font-family: "Mulish", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
#oco-screen-datetime-mobile .oco-card {
  position: absolute; left: 50%; top: 164px; transform: translateX(-50%);
  width: 402px; display: flex; flex-direction: column; align-items: stretch;
  background: var(--oco-surface); border: 1px solid var(--oco-border); border-radius: 24px 24px 0 0;
  box-shadow: 0px 2px 6px 0px rgba(51,67,77,0.1); overflow: hidden;
}
#oco-screen-datetime-mobile .oco-cal-section { border-bottom: 1px solid var(--oco-border); padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#oco-screen-datetime-mobile .oco-datepicker { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
#oco-screen-datetime-mobile .oco-dp-title { width: 100%; color: var(--oco-heading); font-size: 16px; line-height: 24px; font-weight: 800; letter-spacing: -0.48px; text-align: center; white-space: nowrap; }
#oco-screen-datetime-mobile .oco-month { width: 100%; display: flex; align-items: center; justify-content: space-between; }
#oco-screen-datetime-mobile .oco-month .oco-nav { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 8px; }
#oco-screen-datetime-mobile .oco-month .oco-nav svg { width: 20px; height: 20px; display: block; }
#oco-screen-datetime-mobile .oco-month .oco-month-label { color: var(--oco-heading); font-size: 16px; line-height: 24px; font-weight: 800; letter-spacing: -0.48px; text-align: center; white-space: nowrap; }
#oco-screen-datetime-mobile .oco-cal-content { width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
#oco-screen-datetime-mobile .oco-calendar { width: 100%; display: flex; flex-direction: column; }
#oco-screen-datetime-mobile .oco-dates { width: 100%; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
#oco-screen-datetime-mobile .oco-row { width: 100%; display: flex; align-items: flex-start; border-radius: 20px; overflow: hidden; }
#oco-screen-datetime-mobile .oco-cell { flex: 1 0 0; min-width: 1px; height: 40px; position: relative; border-radius: 20px; }
#oco-screen-datetime-mobile .oco-cell .oco-num { position: absolute; left: 50%; top: calc(50% - 10px); transform: translateX(-50%); width: 24px; color: var(--oco-heading); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.42px; text-align: center; white-space: nowrap; }
#oco-screen-datetime-mobile .oco-cell .oco-wd { position: absolute; left: 50%; top: calc(50% - 10px); transform: translateX(-50%); color: var(--oco-heading); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.42px; text-align: center; white-space: nowrap; }
#oco-screen-datetime-mobile .oco-cell .oco-num.oco-muted { color: var(--oco-text-muted); }
#oco-screen-datetime-mobile .oco-cell.oco-sel { background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent)); }
#oco-screen-datetime-mobile .oco-cell.oco-sel .oco-num { color: var(--oco-surface); font-weight: 800; }
#oco-screen-datetime-mobile .oco-cell.oco-fill-200 { background: var(--oco-surface-sunken); }
#oco-screen-datetime-mobile .oco-cell.oco-fill-200 .oco-num { font-weight: 800; }
#oco-screen-datetime-mobile .oco-cell.oco-fill-50 { background: var(--oco-surface-subtle); }
#oco-screen-datetime-mobile .oco-cell.oco-fill-50 .oco-num { font-weight: 800; }
#oco-screen-datetime-mobile .oco-cell .oco-dot { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; }
#oco-screen-datetime-mobile .oco-dot-green { background: var(--oco-success); }
#oco-screen-datetime-mobile .oco-dot-orange { background: var(--oco-warning); }
#oco-screen-datetime-mobile .oco-dot-grey { background: var(--oco-text-faint); }
#oco-screen-datetime-mobile .oco-legend { width: 100%; display: flex; gap: 16px; align-items: flex-start; }
#oco-screen-datetime-mobile .oco-legend .oco-item { display: flex; gap: 6px; align-items: center; }
#oco-screen-datetime-mobile .oco-legend .oco-ldot { width: 6px; height: 6px; border-radius: 50%; }
#oco-screen-datetime-mobile .oco-legend .oco-ltxt { color: var(--oco-text); font-size: 12px; line-height: normal; font-weight: 400; letter-spacing: -0.36px; white-space: nowrap; }
#oco-screen-datetime-mobile .oco-slots-section { background: var(--oco-surface-subtle); padding: 24px; display: flex; flex-direction: column; align-items: stretch; }
#oco-screen-datetime-mobile .oco-slots-grid { width: 100%; display: flex; flex-direction: column; gap: 12px; }
#oco-screen-datetime-mobile .oco-slots-row { width: 100%; display: flex; gap: 8px; align-items: stretch; }
#oco-screen-datetime-mobile .oco-slot { flex: 1 0 0; min-width: 1px; display: flex; }
#oco-screen-datetime-mobile .oco-slot.oco-dim { opacity: 0.5; }
#oco-screen-datetime-mobile .oco-input {
  width: 100%; background: var(--oco-surface); border: 1px solid var(--oco-border); border-radius: 999px;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05);
  padding: 8px 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}
#oco-screen-datetime-mobile .oco-slot-top { width: 100%; display: flex; gap: 10px; align-items: center; }
#oco-screen-datetime-mobile .oco-slot-top .oco-sdot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
#oco-screen-datetime-mobile .oco-slot-time { color: var(--oco-text-strong); font-size: 16px; line-height: normal; font-weight: 800; letter-spacing: -0.48px; white-space: nowrap; }
#oco-screen-datetime-mobile .oco-slot-sub-wrap { width: 100%; display: flex; align-items: center; justify-content: center; padding-left: 16px; }
#oco-screen-datetime-mobile .oco-slot-sub { flex: 1 0 0; min-width: 1px; font-size: 12px; line-height: normal; font-weight: 400; letter-spacing: -0.36px; }
#oco-screen-datetime-mobile .oco-slot-sub.oco-green { color: var(--oco-text); }
#oco-screen-datetime-mobile .oco-slot-sub.oco-orange { color: var(--oco-warning-text); }
#oco-screen-datetime-mobile .oco-footer { width: 100%; background: var(--oco-surface); border: 1px solid var(--oco-border); padding: 12px 24px; display: flex; flex-direction: column; align-items: stretch; }
#oco-screen-datetime-mobile .oco-btn-row { width: 100%; display: flex; gap: 8px; align-items: stretch; }
#oco-screen-datetime-mobile .oco-btn {
  flex: 1 0 0; min-width: 1px; background: var(--oco-surface); border: 1px solid var(--oco-border-strong); border-radius: 999px;
  padding: 12px 20px; display: flex; gap: 8px; align-items: center; justify-content: center;
  filter: drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02));
}
#oco-screen-datetime-mobile .oco-btn.oco-dim { opacity: 0.5; }
#oco-screen-datetime-mobile .oco-btn svg { width: 24px; height: 24px; display: block; flex: none; }
#oco-screen-datetime-mobile .oco-btn .oco-blabel { color: var(--oco-heading); font-size: 16px; line-height: normal; letter-spacing: -0.48px; white-space: nowrap; font-family: "Poetsen One", sans-serif; font-weight: 400; }
#oco-screen-datetime-mobile .oco-btn .oco-rot { transform: rotate(180deg); }


/* =====================================================================
   SCREEN alternative-mobile — ALTERNATIVE MOBILE
   ===================================================================== */
#oco-screen-alternative-mobile * { margin: 0; padding: 0; box-sizing: border-box; }
#oco-screen-alternative-mobile { font-family: "Mulish", sans-serif; -webkit-font-smoothing: antialiased; }
#oco-screen-alternative-mobile .oco-root { position: relative; width: 402px; height: 874px; background: var(--oco-scrim); overflow: hidden; }
#oco-screen-alternative-mobile .oco-cal-sheet { position: absolute; top: 486px; left: 50%; transform: translateX(-50%); width: 374px; background: var(--oco-surface); border: 0.93px solid var(--oco-border); border-radius: 22.328px 22.328px 0 0; box-shadow: 0px 1.861px 5.582px 0px rgba(51,67,77,0.1); overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; }
#oco-screen-alternative-mobile .oco-cal-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; }
#oco-screen-alternative-mobile .oco-cal-pad { border-bottom: 0.93px solid var(--oco-border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22.328px; width: 100%; }
#oco-screen-alternative-mobile .oco-datepicker { display: flex; flex-direction: column; gap: 11.164px; align-items: flex-start; overflow: hidden; width: 100%; }
#oco-screen-alternative-mobile .oco-dp-title { font-weight: 800; font-size: 14.886px; line-height: 22.328px; letter-spacing: -0.4466px; color: var(--oco-heading); text-align: center; white-space: nowrap; width: 100%; }
#oco-screen-alternative-mobile .oco-month-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
#oco-screen-alternative-mobile .oco-month-btn { display: flex; align-items: center; justify-content: center; padding: 7.443px; border-radius: 7.443px; overflow: hidden; }
#oco-screen-alternative-mobile .oco-month-btn svg { width: 18.607px; height: 18.607px; display: block; }
#oco-screen-alternative-mobile .oco-month-label { font-weight: 800; font-size: 14.886px; line-height: 22.328px; letter-spacing: -0.4466px; color: var(--oco-heading); text-align: center; white-space: nowrap; }
#oco-screen-alternative-mobile .oco-cal-content { display: flex; flex-direction: column; gap: 14.886px; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-cal-grid { display: flex; flex-direction: column; gap: 3.721px; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-cal-row { display: flex; align-items: flex-start; width: 100%; border-radius: 18.607px; overflow: hidden; }
#oco-screen-alternative-mobile .oco-cell { flex: 1 0 0; min-width: 1px; height: 37.214px; position: relative; border-radius: 18.607px; }
#oco-screen-alternative-mobile .oco-cell .oco-num { position: absolute; left: calc(50% - 0.27px); top: calc(50% - 9.3px); transform: translateX(-50%); width: 22.328px; font-weight: 400; font-size: 13.025px; line-height: 18.607px; letter-spacing: -0.3907px; text-align: center; color: var(--oco-heading); }
#oco-screen-alternative-mobile .oco-cell .oco-hdr { position: absolute; left: calc(50% - 0.27px); top: calc(50% - 9.3px); transform: translateX(-50%); font-weight: 400; font-size: 13.025px; line-height: 18.607px; letter-spacing: -0.3907px; text-align: center; color: var(--oco-heading); white-space: nowrap; }
#oco-screen-alternative-mobile .oco-cell .oco-num.oco-muted { color: var(--oco-text-muted); }
#oco-screen-alternative-mobile .oco-cell.oco-sel { background: linear-gradient(180deg, var(--oco-accent-bright) 0%, var(--oco-accent) 100%); }
#oco-screen-alternative-mobile .oco-cell.oco-sel .oco-num { color: var(--oco-surface); font-weight: 800; }
#oco-screen-alternative-mobile .oco-cell.oco-today { background: var(--oco-surface-sunken); }
#oco-screen-alternative-mobile .oco-cell.oco-today .oco-num { font-weight: 800; }
#oco-screen-alternative-mobile .oco-cell.oco-faint { background: var(--oco-surface-subtle); }
#oco-screen-alternative-mobile .oco-cell.oco-faint .oco-num { font-weight: 800; }
#oco-screen-alternative-mobile .oco-cell .oco-dot { position: absolute; bottom: 3.72px; left: calc(50% - 0.27px); transform: translateX(-50%); width: 4.652px; height: 4.652px; border-radius: 50%; }
#oco-screen-alternative-mobile .oco-dot-grey { background: var(--oco-text-faint); }
#oco-screen-alternative-mobile .oco-dot-green { background: var(--oco-success); }
#oco-screen-alternative-mobile .oco-dot-orange { background: var(--oco-warning); }
#oco-screen-alternative-mobile .oco-dot-pale { background: var(--oco-border); }
#oco-screen-alternative-mobile .oco-legend { display: flex; gap: 14.886px; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-legend-item { display: flex; gap: 5.582px; align-items: center; }
#oco-screen-alternative-mobile .oco-legend-dot { width: 5.582px; height: 5.582px; border-radius: 50%; }
#oco-screen-alternative-mobile .oco-legend-label { font-weight: 400; font-size: 11.164px; letter-spacing: -0.3349px; color: var(--oco-text); white-space: nowrap; }
#oco-screen-alternative-mobile .oco-slots-wrap { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-slots-bg { background: var(--oco-surface-subtle); display: flex; flex-direction: column; align-items: flex-start; padding: 22.328px; width: 100%; }
#oco-screen-alternative-mobile .oco-slots-stack { display: flex; flex-direction: column; gap: 11.164px; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-slots-line { display: flex; gap: 7.443px; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-field { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 5.582px; align-items: flex-start; }
#oco-screen-alternative-mobile .oco-field.oco-stretch { align-self: stretch; }
#oco-screen-alternative-mobile .oco-field.oco-dim { opacity: 0.5; }
#oco-screen-alternative-mobile .oco-input { background: var(--oco-surface); border: 0.93px solid var(--oco-border); border-radius: 929.418px; box-shadow: 0px 0.93px 1.861px 0px rgba(16,24,40,0.05); display: flex; align-items: center; overflow: hidden; padding: 7.443px 13.025px; width: 100%; }
#oco-screen-alternative-mobile .oco-field.oco-stretch .oco-input { flex: 1 0 0; min-height: 1px; align-items: flex-start; }
#oco-screen-alternative-mobile .oco-input-content { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
#oco-screen-alternative-mobile .oco-input-top { display: flex; gap: 9.303px; align-items: center; width: 100%; }
#oco-screen-alternative-mobile .oco-input-dot { width: 4.652px; height: 4.652px; border-radius: 50%; flex-shrink: 0; }
#oco-screen-alternative-mobile .oco-input-time { font-weight: 800; font-size: 14.886px; letter-spacing: -0.4466px; color: var(--oco-text-strong); white-space: nowrap; }
#oco-screen-alternative-mobile .oco-input-sub-row { display: flex; align-items: center; justify-content: center; padding-left: 14.886px; width: 100%; }
#oco-screen-alternative-mobile .oco-input-sub { flex: 1 0 0; min-width: 1px; font-weight: 400; font-size: 11.164px; letter-spacing: -0.3349px; color: var(--oco-text); }
#oco-screen-alternative-mobile .oco-input-sub.oco-orange { color: var(--oco-warning-text); }
#oco-screen-alternative-mobile .oco-cal-foot { background: var(--oco-surface); border: 0.93px solid var(--oco-border); display: flex; flex-direction: column; align-items: flex-start; padding: 11.164px 22.328px; width: 100%; }
#oco-screen-alternative-mobile .oco-cal-foot-row { display: flex; gap: 7.443px; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-ftbtn { flex: 1 0 0; min-width: 1px; background: var(--oco-surface); border: 0.93px solid var(--oco-border-strong); border-radius: 929.418px; display: flex; gap: 7.443px; align-items: center; justify-content: center; padding: 11.164px 18.607px; filter: drop-shadow(0px 0.93px 0.93px rgba(0,0,0,0.02)) drop-shadow(0px 2.791px 1.396px rgba(0,0,0,0.02)) drop-shadow(0px 6.512px 1.861px rgba(0,0,0,0.01)); }
#oco-screen-alternative-mobile .oco-ftbtn.oco-dim { opacity: 0.5; }
#oco-screen-alternative-mobile .oco-ftbtn svg { width: 22.328px; height: 22.328px; display: block; }
#oco-screen-alternative-mobile .oco-ftbtn .oco-lbl { font-family: "Poetsen One", cursive; font-weight: 400; font-size: 14.886px; letter-spacing: -0.4466px; color: var(--oco-heading); white-space: nowrap; }
#oco-screen-alternative-mobile .oco-flip { transform: rotate(180deg); }
#oco-screen-alternative-mobile .oco-overlay { position: absolute; top: 0; left: 0; width: 402px; height: 874px; background: rgba(0,0,0,0.25); }
#oco-screen-alternative-mobile .oco-modal { position: absolute; top: 501px; left: 0; width: 402px; background: var(--oco-surface); border: 1px solid var(--oco-border); border-radius: 24px 24px 0 0; box-shadow: 0px 2px 6px 0px rgba(51,67,77,0.1); display: flex; align-items: flex-start; overflow: hidden; }
#oco-screen-alternative-mobile .oco-inner { border: 1px solid var(--oco-border); display: flex; flex-direction: column; align-items: flex-start; width: 412px; flex-shrink: 0; }
#oco-screen-alternative-mobile .oco-dp { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; overflow: hidden; width: 100%; }
#oco-screen-alternative-mobile .oco-head { border-bottom: 1px solid var(--oco-border); display: flex; gap: 12px; align-items: flex-start; padding: 24px; width: 100%; }
#oco-screen-alternative-mobile .oco-alert-badge { background: var(--oco-warning-wash); border-radius: 999px; flex-shrink: 0; width: 40px; height: 40px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#oco-screen-alternative-mobile .oco-alert-badge svg { width: 24px; height: 24px; display: block; }
#oco-screen-alternative-mobile .oco-head-txt { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
#oco-screen-alternative-mobile .oco-head-title { font-weight: 800; font-size: 16px; line-height: 24px; letter-spacing: -0.48px; color: var(--oco-heading); text-align: center; white-space: nowrap; }
#oco-screen-alternative-mobile .oco-head-sub { font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); width: 100%; }
#oco-screen-alternative-mobile .oco-body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding: 0 24px 24px; width: 100%; }
#oco-screen-alternative-mobile .oco-sec { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-avail { font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); width: 316px; }
#oco-screen-alternative-mobile .oco-ride-card { background: var(--oco-surface-sunken); border-radius: 12px; display: flex; align-items: center; padding: 12px; width: 100%; }
#oco-screen-alternative-mobile .oco-ride-inner { display: flex; gap: 12px; align-items: flex-start; }
#oco-screen-alternative-mobile .oco-ride-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; display: block; pointer-events: none; flex-shrink: 0; }
#oco-screen-alternative-mobile .oco-ride-txt { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: center; padding-top: 4px; }
#oco-screen-alternative-mobile .oco-ride-title { font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: var(--oco-heading); white-space: nowrap; }
#oco-screen-alternative-mobile .oco-ride-meta { display: flex; gap: 4px; align-items: center; }
#oco-screen-alternative-mobile .oco-ride-meta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--oco-success); flex-shrink: 0; }
#oco-screen-alternative-mobile .oco-ride-meta-txt { font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); white-space: nowrap; }
#oco-screen-alternative-mobile .oco-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
#oco-screen-alternative-mobile .oco-mbtn { height: 44px; border-radius: 999px; width: 100%; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px 20px; filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.02)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 7px 2px rgba(0,0,0,0.01)); }
#oco-screen-alternative-mobile .oco-mbtn.oco-secondary { background: var(--oco-surface); border: 1px solid var(--oco-border-strong); }
#oco-screen-alternative-mobile .oco-mbtn.oco-primary { background: linear-gradient(180deg, var(--oco-accent-bright) 0%, var(--oco-accent) 100%); }
#oco-screen-alternative-mobile .oco-mbtn .oco-mlbl { font-family: "Poetsen One", cursive; font-weight: 400; font-size: 16px; letter-spacing: -0.48px; white-space: nowrap; }
#oco-screen-alternative-mobile .oco-mbtn.oco-secondary .oco-mlbl { color: var(--oco-heading); }
#oco-screen-alternative-mobile .oco-mbtn.oco-primary .oco-mlbl { color: var(--oco-surface); }


/* =====================================================================
   SCREEN recap-mobile — RECAP MOBILE
   ===================================================================== */
#oco-screen-recap-mobile *,
#oco-screen-recap-mobile *::before,
#oco-screen-recap-mobile *::after { box-sizing: border-box; margin: 0; padding: 0; }
#oco-screen-recap-mobile { font-family: "Mulish", sans-serif; }
#oco-screen-recap-mobile .oco-root { position: relative; width: 402px; height: 874px; background: var(--oco-scrim); overflow: hidden; }
#oco-screen-recap-mobile .oco-card { position: absolute; left: 0; top: 48px; width: 402px; height: 826px; display: flex; flex-direction: column; align-items: flex-start; background: var(--oco-surface); border: 1px solid var(--oco-border); border-top-left-radius: 24px; border-top-right-radius: 24px; box-shadow: 0px 2px 6px 0px rgba(51,67,77,0.1); overflow: hidden; }
#oco-screen-recap-mobile .oco-recap { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; width: 100%; padding: 24px; background: var(--oco-surface-subtle); border-right: 1px solid var(--oco-border); }
#oco-screen-recap-mobile .oco-recap-inner { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; width: 100%; }
#oco-screen-recap-mobile .oco-section-title { font-weight: 800; font-size: 16px; line-height: 24px; letter-spacing: -0.48px; color: var(--oco-heading); text-align: center; white-space: nowrap; }
#oco-screen-recap-mobile .oco-grid { display: grid; grid-template-columns: fit-content(100%) minmax(0, 1fr); column-gap: 32px; row-gap: 16px; width: 100%; align-items: start; }
#oco-screen-recap-mobile .oco-label { font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-text); }
#oco-screen-recap-mobile .oco-label-fixed { width: 72px; }
#oco-screen-recap-mobile .oco-value { font-weight: 800; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-heading); }
#oco-screen-recap-mobile .oco-divider { grid-column: 1 / span 2; height: 0; border-top: 1px solid var(--oco-border); }
#oco-screen-recap-mobile .oco-total-label { font-weight: 800; font-size: 14px; line-height: 1.2; letter-spacing: -0.42px; color: var(--oco-heading); }
#oco-screen-recap-mobile .oco-total-value { font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: -0.6px; color: var(--oco-heading); text-align: right; }
#oco-screen-recap-mobile .oco-btn-back { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: var(--oco-surface); border: 1px solid var(--oco-border-strong); border-radius: 999px; filter: drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02)); }
#oco-screen-recap-mobile .oco-btn-back svg { width: 24px; height: 24px; display: block; }
#oco-screen-recap-mobile .oco-btn-back-label { font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: -0.48px; color: var(--oco-heading); white-space: nowrap; }
#oco-screen-recap-mobile .oco-info { display: flex; flex-direction: column; align-items: center; width: 100%; border-radius: 24px; }
#oco-screen-recap-mobile .oco-info-inner { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; width: 100%; padding: 24px; overflow: hidden; }
#oco-screen-recap-mobile .oco-fields { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; width: 100%; }
#oco-screen-recap-mobile .oco-field { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
#oco-screen-recap-mobile .oco-field-label { font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: var(--oco-text); width: 316px; }
#oco-screen-recap-mobile .oco-input { display: flex; align-items: center; width: 100%; padding: 16px; background: var(--oco-surface-sunken); border-radius: 12px; }
#oco-screen-recap-mobile .oco-input.oco-textarea { height: 96px; align-items: flex-start; }
#oco-screen-recap-mobile .oco-input-text { font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: var(--oco-heading); opacity: 0.65; white-space: nowrap; }
#oco-screen-recap-mobile .oco-footer { position: absolute; left: -1px; top: 733px; width: 412px; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; background: var(--oco-surface); border: 1px solid var(--oco-border); }
#oco-screen-recap-mobile .oco-btn-confirm { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 12px 20px; background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent)); border-radius: 999px; filter: drop-shadow(0px 7px 2px rgba(0,0,0,0.01)) drop-shadow(0px 3px 1.5px rgba(0,0,0,0.02)) drop-shadow(0px 1px 1px rgba(0,0,0,0.02)); }
#oco-screen-recap-mobile .oco-btn-confirm-label { font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: -0.48px; color: var(--oco-surface); white-space: nowrap; }

/* Champs de saisie réels du récap (formulaire client) — reset fort pour
   neutraliser les styles d'input hérités du thème (Bricks/WordPress). */
#oco-screen-recap .oco-field-control,
#oco-screen-recap-mobile .oco-field-control {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: "Mulish", sans-serif;
  font-size: 15px;
  line-height: 1.35;
  color: var(--oco-heading);
  -webkit-appearance: none;
  appearance: none;
}
#oco-screen-recap .oco-field-control::placeholder,
#oco-screen-recap-mobile .oco-field-control::placeholder { color: var(--oco-text-muted); opacity: 1; }
#oco-screen-recap .oco-field-control--area { resize: none; min-height: 72px; }
#oco-screen-recap-mobile .oco-field-control--area { resize: none; min-height: 64px; }

/* Champ optionnel : mention discrète à côté du label */
#oco-screen-recap .oco-field-opt,
#oco-screen-recap-mobile .oco-field-opt { color: var(--oco-text-muted); font-weight: 400; font-size: 0.82em; }

/* Validation inline : contour rouge du champ (inset = pas de reflow) + message */
#oco-screen-recap .oco-wrap-error,
#oco-screen-recap-mobile .oco-wrap-error { box-shadow: inset 0 0 0 1.5px var(--oco-danger); }
#oco-screen-recap .oco-field-error,
#oco-screen-recap-mobile .oco-field-error { margin: 0; color: #c81e1e; font-size: 12px; line-height: 1.3; font-weight: 600; }

/* Bannière d'erreur de soumission (échec serveur/réseau), affichée sur le récap */
#oco-screen-recap .oco-recap-error,
#oco-screen-recap-mobile .oco-recap-error {
  width: 100%; margin-bottom: 12px; padding: 10px 14px;
  background: var(--oco-danger-wash); border-radius: 12px;
  color: #c81e1e; font-size: 13px; line-height: 1.35; font-weight: 600;
}

/* Créneaux non réservables (complet / trop petit) : pastille grise + opacité réduite */
#oco-screen-datetime .oco-dot-grey,
#oco-screen-datetime-mobile .oco-dot-grey { background: var(--oco-text-muted, #98a2b3) !important; }
#oco-screen-datetime .oco-input.oco-is-unbookable,
#oco-screen-datetime-mobile .oco-input.oco-is-unbookable { opacity: 0.5; }
/* Jour de calendrier sans disponibilité : grisé, non cliquable */
#oco-screen-datetime .oco-cell.oco-is-off,
#oco-screen-datetime-mobile .oco-cell.oco-is-off { opacity: 0.4; cursor: default; }
/* Pastilles de disponibilité du calendrier : couleur forcée + au-dessus du numéro */
#oco-screen-datetime .oco-cell .oco-daydot { display: block !important; z-index: 3; }
#oco-screen-datetime .oco-daydot.oco-dot-green { background: #12b76a !important; }
#oco-screen-datetime .oco-daydot.oco-dot-orange { background: #f59e0b !important; }

/* Vignette alternative sans image réelle : placeholder neutre (pas de 404) */
#oco-screen-alternative .oco-alt-thumb--ph,
#oco-screen-alternative-mobile .oco-alt-thumb--ph {
  background: linear-gradient(135deg, var(--oco-surface-sunken, #f2f4f7), var(--oco-border, #e4e7ec));
  position: relative;
}
#oco-screen-alternative .oco-alt-thumb--ph::after,
#oco-screen-alternative-mobile .oco-alt-thumb--ph::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--oco-accent, #f46e01);
  opacity: 0.45;
}

/* Mobile — créneau complet : opacité réduite + sous-texte gris */
#oco-screen-datetime-mobile .oco-slot.oco-is-unbookable { opacity: 0.5; }
#oco-screen-datetime-mobile .oco-slot-sub.oco-gray { color: var(--oco-text-muted, #98a2b3); }

/* Mobile — vignette alternative sans image réelle : placeholder neutre */
#oco-screen-alternative-mobile .oco-ride-img--ph {
  background: linear-gradient(135deg, var(--oco-surface-sunken, #f2f4f7), var(--oco-border, #e4e7ec));
  position: relative;
}
#oco-screen-alternative-mobile .oco-ride-img--ph::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--oco-accent, #f46e01);
  opacity: 0.45;
}

/* =====================================================================
   Inputs décomposés (Participants · Date & créneau · Réserver)
   Composants placés dans la page ; chacun ouvre le flux à son étape.
   ===================================================================== */
.oco-inputs-bar {
  display: inline-flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
  padding: 6px; background: var(--oco-surface, #fff);
  border: 1px solid var(--oco-border, #e4e7ec); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(51,67,77,0.08);
  font-family: "Mulish", sans-serif;
}
.oco-input-field {
  appearance: none; border: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; min-width: 148px; padding: 8px 20px;
  background: transparent; border-radius: 999px;
  transition: background 0.12s ease;
}
.oco-input-field:hover { background: var(--oco-surface-sunken, #f2f4f7); }
.oco-input-field:focus-visible { outline: 2px solid var(--oco-accent, #0094e5); outline-offset: 2px; }
.oco-input-field__label {
  font-size: 12px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--oco-text-muted, #98a2b3);
}
.oco-input-field__value {
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--oco-heading, #1d2939); white-space: nowrap;
}
.oco-input-field--cta {
  flex-direction: row; align-items: center; justify-content: center;
  min-width: 0; padding: 12px 28px;
  background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent));
  filter: drop-shadow(0px 3px 1.5px rgba(0,0,0,0.06)) drop-shadow(0px 1px 1px rgba(0,0,0,0.04));
}
.oco-input-field--cta:hover { background: linear-gradient(to bottom, var(--oco-accent), var(--oco-accent-strong)); }
.oco-input-field__cta {
  font-family: "Poetsen One", sans-serif; font-weight: 400; font-size: 16px;
  letter-spacing: -0.48px; color: var(--oco-surface); white-space: nowrap;
}
@media (max-width: 640px) {
  .oco-inputs-bar { display: flex; flex-direction: column; width: 100%; border-radius: 24px; }
  .oco-input-field { width: 100%; min-width: 0; }
  .oco-input-field--cta { padding: 14px 28px; }
}

/* Inputs INDÉPENDANTS (booking-flow) : chaque contrôle est autonome (bordure, fond
   et ombre propres), pas fusionné dans une pill. Réutilise la base .oco-input-field. */
.oco-inputs {
  display: inline-flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
  font-family: "Mulish", sans-serif;
}
.oco-input-field--solo {
  background: var(--oco-surface, #fff);
  border: 1px solid var(--oco-border, #e4e7ec);
  box-shadow: 0 2px 8px rgba(51,67,77,0.08);
  padding: 12px 24px;
}
.oco-input-field--solo:hover {
  background: var(--oco-surface-sunken, #f2f4f7);
  border-color: var(--oco-border-strong, #d0d5dd);
}
.oco-input-field--solo.oco-input-field--cta {
  border: 0;
  background: linear-gradient(to bottom, var(--oco-accent-bright), var(--oco-accent));
}
.oco-input-field--solo.oco-input-field--cta:hover {
  background: linear-gradient(to bottom, var(--oco-accent), var(--oco-accent-strong));
}
@media (max-width: 640px) {
  .oco-inputs { display: flex; flex-direction: column; width: 100%; }
  .oco-input-field--solo { width: 100%; }
}

/* =====================================================================
   PROMO-CODE BLOCK (recap step)
   Affiché uniquement quand plugin-promotions est actif (guard PHP + JS).
   ===================================================================== */
.ocoflow-promo-block {
  /* 16px sous le total avant le filet, 12px entre le filet et le champ. Le
     total est la ligne forte du recapitulatif, il a besoin de respirer avant
     qu'on change de sujet. */
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--oco-border, #dcdfe1);
}
.ocoflow-promo-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ocoflow-promo-input {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--oco-border-strong, #cad5e2);
  border-radius: 8px;
  background: var(--oco-surface, #fff);
  color: var(--oco-text-strong, #101828);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.ocoflow-promo-input:focus {
  border-color: var(--oco-accent, #0094e5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oco-accent, #0094e5) 14%, transparent);
}
.ocoflow-promo-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--oco-accent, #0094e5);
  border-radius: 8px;
  background: transparent;
  color: var(--oco-accent, #0094e5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ocoflow-promo-btn:hover:not([disabled]) {
  background: var(--oco-accent, #0094e5);
  color: var(--oco-on-accent, #fff);
}
.ocoflow-promo-btn[disabled] {
  opacity: 0.55;
  cursor: default;
}
.ocoflow-promo-feedback {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.ocoflow-promo-feedback--error {
  color: var(--oco-danger, #ff4b4b);
}
.ocoflow-promo-feedback--ok {
  color: var(--oco-success-text, #067647);
}

/* =====================================================================
   GIFT-CARD BLOCK (recap step) — miroir exact de PROMO-CODE BLOCK ci-dessus.
   Affiché uniquement quand plugin-giftcards est actif (guard PHP + JS).
   ===================================================================== */
.ocoflow-giftcard-block {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--oco-border, #dcdfe1);
}
.ocoflow-giftcard-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ocoflow-giftcard-input {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--oco-border-strong, #cad5e2);
  border-radius: 8px;
  background: var(--oco-surface, #fff);
  color: var(--oco-text-strong, #101828);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.ocoflow-giftcard-input:focus {
  border-color: var(--oco-accent, #0094e5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oco-accent, #0094e5) 14%, transparent);
}
.ocoflow-giftcard-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--oco-accent, #0094e5);
  border-radius: 8px;
  background: transparent;
  color: var(--oco-accent, #0094e5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ocoflow-giftcard-btn:hover:not([disabled]) {
  background: var(--oco-accent, #0094e5);
  color: var(--oco-on-accent, #fff);
}
.ocoflow-giftcard-btn[disabled] {
  opacity: 0.55;
  cursor: default;
}
.ocoflow-giftcard-feedback {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.ocoflow-giftcard-feedback--error {
  color: var(--oco-danger, #ff4b4b);
}
.ocoflow-giftcard-feedback--ok {
  color: var(--oco-success-text, #067647);
}
/* Discount value shown in recap grid (both desktop and mobile) — shared by
   both the promo-code row and the gift-card row. */
.ocoflow-discount-value {
  color: var(--oco-success-text, #067647);
}

/* =====================================================================
   DISCOUNT TOGGLE — "Vous avez un code promo / chèque cadeau ?" (recap)
   Discreet reveal link shown instead of .ocoflow-promo-block/
   .ocoflow-giftcard-block while the section is collapsed. Same top-border
   separator + spacing as the blocks it replaces, so revealing it doesn't
   shift the layout. One-way (see ACTIONS.togglePromoField/toggleGiftcardField
   in booking-flow.js) — no expanded/collapsed CSS variant needed, only
   rendered while collapsed.
   ===================================================================== */

/* =====================================================================
   CHAMPS PERSONNALISÉS — PILLS (radio + checkbox) + SWITCH (toggle)
   + SELECT CHEVRON + NUMBER (pas de spinners)
   Scopé sur les deux récaps : desktop #oco-screen-recap,
   mobile  #oco-screen-recap-mobile.
   ===================================================================== */

/* ---------- Conteneur pills ------------------------------------------ */
#oco-screen-recap .oco-choices,
#oco-screen-recap-mobile .oco-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* ---------- Pill individuelle ----------------------------------------- */
#oco-screen-recap .oco-choice,
#oco-screen-recap-mobile .oco-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--oco-surface-sunken);
  border: 1px solid var(--oco-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--oco-heading);
  line-height: 1.2;
  letter-spacing: -0.28px;
  user-select: none;
  transition: border-color 0.14s ease, background 0.14s ease;
  position: relative;
}

#oco-screen-recap .oco-choice:hover,
#oco-screen-recap-mobile .oco-choice:hover {
  border-color: var(--oco-border-strong);
}

/* Pill sélectionnée (via :has — graceful degradation si non supporté) */
#oco-screen-recap .oco-choice:has(.oco-choice-input:checked),
#oco-screen-recap-mobile .oco-choice:has(.oco-choice-input:checked) {
  border-color: var(--oco-accent);
  background: var(--oco-accent-wash);
}

/* ---------- Input caché ----------------------------------------------- */
#oco-screen-recap .oco-choice-input,
#oco-screen-recap-mobile .oco-choice-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ---------- Indicateur visuel (marque) --------------------------------- */
#oco-screen-recap .oco-choice-mark,
#oco-screen-recap-mobile .oco-choice-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--oco-border-strong);
  background: var(--oco-surface);
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  position: relative;
}

/* Radio : cercle */
#oco-screen-recap .oco-choices--radio .oco-choice-mark,
#oco-screen-recap-mobile .oco-choices--radio .oco-choice-mark {
  border-radius: 50%;
}

/* Radio checked : dot accent via box-shadow interne */
#oco-screen-recap .oco-choices--radio .oco-choice-input:checked ~ .oco-choice-mark,
#oco-screen-recap-mobile .oco-choices--radio .oco-choice-input:checked ~ .oco-choice-mark {
  border-color: var(--oco-accent);
  box-shadow: inset 0 0 0 4px var(--oco-accent);
}

/* Checkbox : carré arrondi */
#oco-screen-recap .oco-choices--checkbox .oco-choice-mark,
#oco-screen-recap-mobile .oco-choices--checkbox .oco-choice-mark {
  border-radius: 5px;
}

/* Checkbox checked : fond accent + coche blanche */
#oco-screen-recap .oco-choices--checkbox .oco-choice-input:checked ~ .oco-choice-mark,
#oco-screen-recap-mobile .oco-choices--checkbox .oco-choice-input:checked ~ .oco-choice-mark {
  border-color: var(--oco-accent);
  background: var(--oco-accent);
}

#oco-screen-recap .oco-choices--checkbox .oco-choice-input:checked ~ .oco-choice-mark::after,
#oco-screen-recap-mobile .oco-choices--checkbox .oco-choice-input:checked ~ .oco-choice-mark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--oco-on-accent);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

/* Texte de la pill */
#oco-screen-recap .oco-choice-text,
#oco-screen-recap-mobile .oco-choice-text {
  flex: 1;
  min-width: 0;
}

/* Erreur au-dessus des pills (pas dans un wrapper sunken) */
#oco-screen-recap .oco-choices-error,
#oco-screen-recap-mobile .oco-choices-error {
  margin-bottom: 4px;
}

/* ---------- Toggle switch --------------------------------------------- */
#oco-screen-recap .oco-field-switch,
#oco-screen-recap-mobile .oco-field-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--oco-heading);
  line-height: 1.2;
  letter-spacing: -0.28px;
}

/* Input caché */
#oco-screen-recap .oco-switch-input,
#oco-screen-recap-mobile .oco-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Track (44×26 px) */
#oco-screen-recap .oco-switch-track,
#oco-screen-recap-mobile .oco-switch-track {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--oco-border-strong);
  transition: background 0.18s ease;
}

#oco-screen-recap .oco-switch-input:checked ~ .oco-switch-track,
#oco-screen-recap-mobile .oco-switch-input:checked ~ .oco-switch-track {
  background: var(--oco-accent);
}

/* Knob (20×20 px, centré verticalement, décalé à droite quand on) */
#oco-screen-recap .oco-switch-knob,
#oco-screen-recap-mobile .oco-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--oco-on-accent);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18);
  transition: transform 0.18s ease;
}

#oco-screen-recap .oco-switch-input:checked ~ .oco-switch-track .oco-switch-knob,
#oco-screen-recap-mobile .oco-switch-input:checked ~ .oco-switch-track .oco-switch-knob {
  transform: translateX(18px);
}

/* Libellé du switch (Oui / Non ou label perso) */
#oco-screen-recap .oco-switch-text,
#oco-screen-recap-mobile .oco-switch-text {
  color: var(--oco-text);
}

/* Bascule Oui/Non du switch, pilotée par :checked (pas de re-render JS) */
#oco-screen-recap .oco-switch-on,
#oco-screen-recap-mobile .oco-switch-on { display: none; }
#oco-screen-recap .oco-switch-input:checked ~ .oco-switch-text .oco-switch-on,
#oco-screen-recap-mobile .oco-switch-input:checked ~ .oco-switch-text .oco-switch-on { display: inline; }
#oco-screen-recap .oco-switch-input:checked ~ .oco-switch-text .oco-switch-off,
#oco-screen-recap-mobile .oco-switch-input:checked ~ .oco-switch-text .oco-switch-off { display: none; }

/* ---------- Select + chevron ------------------------------------------ */
#oco-screen-recap .oco-select-wrap,
#oco-screen-recap-mobile .oco-select-wrap {
  position: relative;
}

/* Flèche bas (chevron SVG inliné comme background) */
#oco-screen-recap .oco-select-wrap::after,
#oco-screen-recap-mobile .oco-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2398a2b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Padding droit pour éviter que le texte chevauche la flèche */
#oco-screen-recap .oco-field-control--select,
#oco-screen-recap-mobile .oco-field-control--select {
  padding-right: 36px !important;
  cursor: pointer;
}

/* ---------- Number : masquer les spinners natifs ----------------------- */
#oco-screen-recap .oco-field-control--number::-webkit-inner-spin-button,
#oco-screen-recap .oco-field-control--number::-webkit-outer-spin-button,
#oco-screen-recap-mobile .oco-field-control--number::-webkit-inner-spin-button,
#oco-screen-recap-mobile .oco-field-control--number::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#oco-screen-recap .oco-field-control--number,
#oco-screen-recap-mobile .oco-field-control--number {
  -moz-appearance: textfield;
}

/* =====================================================================
   CHÈQUE CADEAU — ligne discrète sous le code promo + fenêtre de saisie
   ---------------------------------------------------------------------
   Le code promo reste affiché tel quel, c'est le champ historique du
   récapitulatif. Le chèque cadeau tient sur une ligne, SANS séparateur :
   la quasi-totalité des clients n'en a pas, la saisie n'a donc pas à
   occuper l'écran où l'on confirme. Le clic ouvre une fenêtre dédiée.
   ===================================================================== */
.ocoflow-gclink {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 6px 0 0;         /* juste ce qu'il faut pour décoller du champ */
  padding: 0;
  border: none;            /* pas de séparateur */
}
.ocoflow-gclink-btn {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--oco-accent, #0094e5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ocoflow-gclink-btn:hover { text-decoration-thickness: 2px; }
.ocoflow-gclink-btn:focus-visible {
  outline: 2px solid var(--oco-accent, #0094e5);
  outline-offset: 2px;
  border-radius: 3px;
}
.ocoflow-gclink-ok {
  color: var(--oco-success, #1a7f37);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* Le bloc de saisie réutilisé tel quel n'a plus besoin de son séparateur
   ni de sa marge : il est seul dans la fenêtre. */

/* Panneau du chèque cadeau — le positionnement, le fond et l'animation
   viennent de .oco-nested (motif de fenêtre imbriquée du tunnel) ; ici on
   n'habille que la boîte. */
.ocoflow-gcbox {
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 14px;
  background: var(--oco-surface, #fff);
  box-shadow: 0 18px 48px rgba(16, 24, 40, .28);
  box-sizing: border-box;
}
.ocoflow-gcbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}
.ocoflow-gcbox-title {
  margin: 0;
  color: var(--oco-heading, #101828);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.ocoflow-gcbox-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--oco-text-muted, #667085);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ocoflow-gcbox-close:hover { background: var(--oco-surface-subtle, #f4f6f8); }
.ocoflow-gcbox-close:focus-visible {
  outline: 2px solid var(--oco-accent, #0094e5);
  outline-offset: 2px;
}
.ocoflow-gcbox-help {
  margin: 0 0 14px;
  color: var(--oco-text, #45556c);
  font-size: 13px;
  line-height: 1.5;
}
/* Le bloc de saisie réutilisé tel quel : seul dans la fenêtre, il n'a plus
   besoin de son séparateur ni de sa marge. */
.ocoflow-gcbox .ocoflow-giftcard-block {
  margin: 0;
  padding: 0;
  border-top: none;
}

/* Groupe code promo + chèque cadeau, enfant de .oco-left-top (recap desktop).
   .oco-left-top a gap:32px ; on le neutralise pour que l'écart total → code
   promo soit celui du bloc promo lui-même (8 + 7 + 1px de filet = 16px), soit
   le row-gap de .oco-summary-grid juste au-dessus. */
#oco-screen-recap .ocoflow-discounts { width: 100%; margin-top: -32px; }

/* Chèque cadeau en tiroir sur mobile — .oco-drawer/.oco-drawer__sheet
   fournissent déjà le fond, les coins arrondis et l'ombre, comme pour
   « autre réservation sur le même créneau ». La boîte ne fait plus que
   l'habillage intérieur. */
.ocoflow-gcbox--sheet {
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 20px 20px 28px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Le tiroir doit couvrir tout l'écran du tunnel, pas seulement le
   récapitulatif dans lequel ce markup est rendu. */
.ocoflow-gcdrawer { position: fixed; z-index: 100020; }

/* Le tiroir chèque cadeau est rendu DANS #oco-screen-recap-mobile, dont le
   reset universel (`#oco-screen-recap-mobile *` — margin:0; padding:0) a une
   spécificité d'identifiant et écrase donc les classes de la boîte. On rétablit
   ici, scopé sous le même identifiant pour repasser devant. Même procédé que
   les surcharges .ocoflow-promo-* / .ocoflow-giftcard-* plus haut. */
#oco-screen-recap-mobile .ocoflow-gcbox--sheet { padding: 20px 20px 28px; }
#oco-screen-recap-mobile .ocoflow-gcbox-head { margin: 0 0 8px; }
#oco-screen-recap-mobile .ocoflow-gcbox-close { margin: -4px -4px 0 0; }
#oco-screen-recap-mobile .ocoflow-gcbox-help { margin: 0 0 16px; }
/* Dans le tiroir, le bloc de saisie est seul : il reprend sa largeur pleine
   mais n'hérite pas des marges nulles voulues pour le récapitulatif. */
#oco-screen-recap-mobile .ocoflow-gcbox .ocoflow-giftcard-row { gap: 10px; }