/* ============================================================
   Pneumolog Cluj — Booking modal
   Uses the theme design tokens (CSS custom properties from design-tokens.css).
   Colours are set explicitly on interactive elements so they never inherit the
   theme's button styling (which sets white text — that made chip labels vanish).
   ============================================================ */

.booking-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(14,43,42,.55); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .35s; display: grid; place-items: center; padding: clamp(.5rem,3vw,1.5rem); }
.booking-overlay.is-open { opacity: 1; visibility: visible; }
.booking-modal {
  width: min(560px, 100%); max-height: 94vh; overflow-y: auto;
  background: var(--bone-50, #FBF8F2); border-radius: var(--r-lg, 14px);
  box-shadow: var(--sh-lg, 0 28px 60px -22px rgba(16,43,42,.28)); border: 1px solid var(--brass-200, #DECBA1);
  transform: translateY(16px) scale(.985); transition: transform .4s var(--ease, cubic-bezier(.22,.61,.36,1));
  -webkit-overflow-scrolling: touch;
}
.booking-overlay.is-open .booking-modal { transform: none; }

/* Header ---------------------------------------------------- */
.booking-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding: clamp(1.3rem,4vw,1.7rem) clamp(1.3rem,4vw,2rem) 0; }
.booking-head .eyebrow { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--brass, #AE8E4F); font-weight:700; display:inline-flex; align-items:center; gap:.5rem; }
.booking-head .eyebrow::before { content:""; width:22px; height:1px; background: var(--brass, #AE8E4F); display:inline-block; }
.booking-title { font-family: var(--serif, Georgia, serif); font-size: 1.2rem; line-height:1.15; color: var(--petrol-900, #0E2B2A); margin-top:.45rem; font-weight:600; }
.booking-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line, rgba(32,38,42,.12)); background: var(--surface, #fff); display:grid; place-items:center; font-size: 1.25rem; line-height:1; color: var(--ink-700, #353C40); flex-shrink:0; cursor:pointer; transition: transform .3s; }
.booking-close:hover { background: var(--bone-200, #E9E1D1); border-color: var(--brass-200,#DECBA1); transform: rotate(90deg); }

.booking-body { padding: .4rem clamp(1.3rem,4vw,2rem) clamp(1.5rem,4vw,2rem); }

/* Stepper --------------------------------------------------- */
#stepper { margin: 1rem 0 1.3rem; }
.stepper { display:flex; align-items:center; gap: .35rem; }
.stepper-item { display:flex; align-items:center; gap:.35rem; flex: 1; }
.stepper-item:last-child { flex: 0; }
.stepper-dot { width: 26px; height:26px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--line-strong, rgba(32,38,42,.22)); display:grid; place-items:center; font-size:.78rem; font-weight:700; color: var(--muted, #767D81); background: var(--surface, #fff); transition: all .35s; }
.stepper-line { flex:1; height:2px; border-radius:2px; background: var(--line, rgba(32,38,42,.12)); transition: background .35s; }
.stepper-item.is-active .stepper-dot { background: var(--petrol-800, #133837); border-color: var(--petrol-800, #133837); color: var(--bone-50, #FBF8F2); box-shadow: 0 0 0 4px rgba(19,56,55,.12); }
.stepper-item.is-done .stepper-dot { background: var(--sage, #A2B7A9); border-color: var(--sage, #A2B7A9); color: var(--petrol-900, #0E2B2A); }
.stepper-item.is-done .stepper-line { background: var(--sage, #A2B7A9); }
.stepper-caption { margin-top:.7rem; font-size:.8rem; font-weight:600; letter-spacing:.02em; color: var(--muted, #767D81); }
.stepper-caption b { color: var(--petrol-800, #133837); font-weight:700; }

/* Step heading ---------------------------------------------- */
.step-title { font-family: var(--serif, Georgia, serif); font-size: 1.42rem; line-height:1.2; color: var(--petrol-900, #0E2B2A); margin-bottom: .35rem; font-weight:600; }
.step-sub { color: var(--muted, #767D81); font-size: .94rem; line-height:1.5; margin-bottom: 1.3rem; }
.step-fieldlabel { font-size:.82rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color: var(--ink-700, #353c40); margin:.2rem 0 .6rem; }

/* Option tiles ---------------------------------------------- */
.opt-grid { display:grid; gap: .7rem; }
.opt-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width:520px){ .opt-grid--2 { grid-template-columns:1fr; } }
.opt {
  text-align:left; display:flex; gap:.85rem; align-items:center; width:100%; cursor:pointer;
  padding: 1rem 1.05rem; border:1px solid var(--line-strong, rgba(32,38,42,.22)); border-radius: var(--r, 10px);
  background: var(--surface, #fff); color: var(--ink, #20262A); transition: border-color .25s, background .25s, box-shadow .25s, transform .15s;
}
.opt:hover { border-color: var(--petrol-300, #5C8682); transform: translateY(-1px); box-shadow: 0 6px 18px -12px rgba(16,43,42,.5); }
.opt:focus-visible { outline:none; border-color: var(--petrol-700,#1A4746); box-shadow: 0 0 0 3px rgba(33,83,79,.18); }
.opt.is-selected { border-color: var(--petrol-800, #133837); background: var(--sage-50, #E8EEE8); box-shadow: inset 0 0 0 1px var(--petrol-800, #133837); }
.opt-radio { width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong, rgba(32,38,42,.22)); flex-shrink:0; display:grid; place-items:center; transition: border-color .25s; }
.opt.is-selected .opt-radio { border-color: var(--petrol-800, #133837); }
.opt.is-selected .opt-radio::after { content:""; width:10px;height:10px;border-radius:50%;background:var(--petrol-800, #133837); }
.opt b { font-weight:600; color: var(--petrol-900, #0E2B2A); display:block; font-size:.98rem; line-height:1.25; }
.opt small { color: var(--muted, #767D81); font-size:.84rem; display:block; margin-top:.15rem; line-height:1.35; }
.opt .opt-price { margin-left:auto; align-self:center; font-weight:700; color: var(--petrol-700, #1A4746); white-space:nowrap; font-size:.95rem; }

/* Date / time chips ----------------------------------------- */
.chip-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap:.55rem; }
.chip {
  cursor:pointer; padding: .6rem .4rem; border:1px solid var(--line-strong, rgba(32,38,42,.22)); border-radius: var(--r, 10px);
  background: var(--surface, #fff); color: var(--petrol-900, #0E2B2A); text-align:center; line-height:1.15;
  transition: border-color .2s, background .2s, color .2s, transform .12s, box-shadow .2s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.12rem; min-height:46px;
}
.chip:hover:not(:disabled){ border-color: var(--petrol-300, #5C8682); transform: translateY(-1px); box-shadow: 0 6px 16px -12px rgba(16,43,42,.5); }
.chip:focus-visible { outline:none; border-color: var(--petrol-700,#1A4746); box-shadow: 0 0 0 3px rgba(33,83,79,.18); }
.chip.is-selected { background: var(--petrol-800, #133837); border-color: var(--petrol-800, #133837); color: var(--bone-50, #FBF8F2); box-shadow: 0 8px 20px -12px rgba(19,56,55,.8); }
.chip:disabled { opacity:.4; cursor:not-allowed; }
.chip b { font-weight:700; color: inherit; }
.chip small { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--muted, #767D81); font-weight:600; }
.chip.is-selected small { color: var(--sage-200, #C9D5CB); }

/* date chip: weekday · big day · month */
.chip--day b { font-size:1.15rem; }
/* time chip: single readable pill */
.chip--time { padding:.7rem .4rem; }
.chip--time b { font-size:1rem; letter-spacing:.01em; }

/* fixed return-day badge (next working day, not chosen) */
.return-day { display:inline-flex; align-items:center; gap:.55rem; padding:.6rem .95rem; border-radius: var(--r, 10px); background: var(--sage-50, #E8EEE8); border:1px solid var(--sage, #A2B7A9); color: var(--petrol-900, #0E2B2A); font-weight:600; font-size:.98rem; }
.return-day-ico { font-size:1rem; line-height:1; }

/* Form fields ----------------------------------------------- */
.field { margin-bottom: 1.05rem; }
.field label { display:block; font-size:.86rem; font-weight:600; color: var(--ink-700, #353C40); margin-bottom: .4rem; }
.field label .req { color: var(--brass, #AE8E4F); }
.field input, .field textarea, .field select {
  width:100%; padding: .8rem .95rem; font: inherit; font-size:1rem;
  border:1px solid var(--line-strong, rgba(32,38,42,.22)); border-radius: var(--r, 10px); background: var(--surface, #fff); color: var(--ink, #20262A);
  transition: border-color .25s, box-shadow .25s;
}
.field input::placeholder, .field textarea::placeholder { color: #A6ABAF; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--petrol-700, #1A4746); box-shadow: 0 0 0 3px rgba(33,83,79,.14); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:520px){ .field-row { grid-template-columns:1fr; } }
.field-error { color: #B23A2E; font-size:.8rem; margin-top:.35rem; display:none; }
.field.has-error input, .field.has-error textarea { border-color:#B23A2E; box-shadow:0 0 0 3px rgba(178,58,46,.1); }
.field.has-error .field-error { display:block; }

.checkbox-row { display:flex; gap:.65rem; align-items:flex-start; font-size:.9rem; line-height:1.45; color: var(--ink-700, #353C40); }
.checkbox-row input { width:20px;height:20px; margin-top:1px; accent-color: var(--petrol-800, #133837); flex-shrink:0; cursor:pointer; }
.checkbox-row a { color: var(--petrol-700,#1A4746); }

/* Footer / actions ------------------------------------------ */
.booking-foot { display:flex; flex-direction:column; gap:.9rem; margin-top: 1.5rem; padding-top:1.1rem; border-top:1px solid var(--line, rgba(32,38,42,.1)); }
.booking-summary { font-size:.85rem; color: var(--muted, #767D81); text-align:center; }
.booking-summary b { color: var(--petrol-800, #133837); font-weight:700; }
.booking-summary .summary-line { display:inline; }
.booking-actions { display:flex; gap:.8rem; align-items:center; }
.booking-actions .btn--primary { margin-left:auto; }
.booking-actions .btn--ghost:only-child { margin-right:auto; }
@media (max-width:420px){
  .booking-actions .btn--primary { flex:1; justify-content:center; }
}

.booking-alert { background:#FBEDEA; border:1px solid #E7B7AE; color:#8A2C21; padding:.75rem 1rem; border-radius: var(--r, 10px); font-size:.9rem; line-height:1.45; margin-bottom:1rem; }
.booking-note { background: var(--sage-50, #E8EEE8); border:1px solid var(--sage, #A2B7A9); color: var(--petrol-900, #0E2B2A); padding:.7rem .95rem; border-radius: var(--r, 10px); font-size:.88rem; line-height:1.45; margin-bottom:1rem; }
.booking-note b { font-weight:700; }

.booking-inline-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin:1rem 0; }
.booking-inline-actions .btn { min-height:44px; justify-content:center; }
@media (max-width:420px){ .booking-inline-actions .btn { width:100%; } }

/* Waitlist mini-form (full-day fallback) */
.waitlist { margin-top:1.1rem; padding:1rem 1.05rem; background: var(--sage-50, #E8EEE8); border:1px solid var(--sage, #A2B7A9); border-radius: var(--r, 10px); }
.wl-title { font-weight:600; color: var(--petrol-900, #0E2B2A); font-size:.94rem; margin-bottom:.7rem; }
.wl-row { display:flex; gap:.6rem; }
.wl-row input { flex:1; min-width:0; padding:.7rem .9rem; font:inherit; font-size:.95rem; border:1px solid var(--line-strong, rgba(32,38,42,.22)); border-radius: var(--r, 10px); background: var(--surface,#fff); color: var(--ink,#20262A); }
.wl-row input:focus { outline:none; border-color: var(--petrol-700,#1A4746); box-shadow:0 0 0 3px rgba(33,83,79,.14); }
.wl-note { margin-top:.6rem; font-size:.78rem; line-height:1.45; color: var(--muted,#63696E); }
.wl-note a { color: var(--petrol-700,#1A4746); }
@media (max-width:420px){ .wl-row { flex-direction:column; } }

/* Confirmation ---------------------------------------------- */
.confirm-mark { width:68px;height:68px;border-radius:50%; background: var(--sage-50, #E8EEE8); border:1px solid var(--sage, #A2B7A9); display:grid; place-items:center; margin: .5rem auto 1.3rem; }
.confirm-mark svg { width:32px;height:32px; stroke: var(--petrol-800, #133837); fill:none; }

/* Keep the fixed mobile CTA from covering an equivalent CTA in the offer. */
@media (max-width:700px) {
  .mobile-cta.mobile-cta--contextual {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(100%);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .mobile-cta.mobile-cta--contextual.is-visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .mobile-cta.mobile-cta--contextual { transition:none; }
}