/**
 * reservation-flow.css
 * Styles for the automated reservation flow.
 * Only loaded when RESERVATION_MODE === 'automated' (see reservation-config.php).
 */

/*
 * KNOWN ISSUE (Task 3 round 2): Country dropdown search input underline is
 * broken since Task 3 changes. Likely a CSS cascade issue or Choices.js
 * re-init side effect from new conditional tabs. Under investigation.
 */

/* ============================================================
   GLOBAL TYPOGRAPHY — Buttons in the reservation flow
   ------------------------------------------------------------
   The site uses 'Open Sans' condensed via font-stretch: 75% as
   the canonical button typography. Some buttons (native and
   wa-button) were missing it. Apply uniformly to every button
   and wa-button label inside #reservationForm so individual
   component rules don't have to repeat the declaration.
   Component-specific rules (e.g. .lbdm-slot-pill) can still
   override font-size / font-weight / font-family as needed —
   font-stretch stays inherited from this baseline.
   ============================================================ */

#reservationForm button,
#reservationForm wa-button::part(label),
#reservationForm wa-button::part(base) {
  font-stretch: 75%;
}

.auto-slot-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 16px;
  margin: 12px 0 20px 0;
}

.auto-slot-pill i {
  font-size: 18px;
}

.auto-slot-pill strong {
  font-weight: 700;
}

/* Available variant — soft beige */
.auto-slot-pill.is-available {
  background: #faf8f5;
  color: #2c3e50;
  border: 1px solid #e8e2d9;
  margin-top: -15px;
}

.auto-slot-pill.is-available i {
  color: #c5a47e;
}

/* Unavailable variant — soft red */
.auto-slot-pill.is-unavailable {
  background: #f5e8e8;
  color: #c85a5a;
  border: 1px solid #e8d0d0;
}

.auto-slot-pill.is-unavailable i {
  color: #c85a5a;
}

/* Alternative slot — selectable */
.auto-alt-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-radius: 10px;
  background: #f0ece6;
  border: 2px solid transparent;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.auto-alt-slot:hover {
  background: #ebe5db;
}

.auto-alt-slot.is-selected {
  border-color: #c5a47e;
  background: #faf8f5;
}

.auto-alt-slot-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #2c3e50;
}

.auto-alt-slot-label i {
  color: #7a7065;
  font-size: 18px;
}

.auto-alt-slot-actions {
  display: flex;
  gap: 8px;
}

.auto-alt-slot-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #d0c8bc;
  color: #faf8f5;
  transition: background 0.2s ease, transform 0.2s ease;
}

.auto-alt-slot-btn:hover {
  background: #c5a47e;
}

/* When the row is selected, the confirm (V) button turns gold AND pulses
   to signal a second click is needed to commit the selection. */
.auto-alt-slot.is-selected .auto-alt-slot-btn.is-confirm {
  background: #c5a47e;
  animation: auto-pulse-confirm 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(197, 164, 126, 0.5);
}

@keyframes auto-pulse-confirm {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(197, 164, 126, 0.55);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 10px rgba(197, 164, 126, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(197, 164, 126, 0);
  }
}

/* ============================================================
   AVAILABILITY STEP — sub-states
   ============================================================ */

/* Hide sub-states by default; the state controller toggles them */
.auto-substate {
  display: none;
}

.auto-substate.is-active {
  display: block;
}

/* Checking sub-state — loading spinner */
.auto-checking-wrap {
  text-align: center;
  padding: 40px 20px;
}

.auto-checking-text {
  font-size: 16px;
  color: #c5a47e;
}

/* Available sub-state — key status message */
.auto-status-available {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 18px;
}

.auto-status-available strong {
  color: #6ba672;
  font-weight: 700;
}

.auto-status-unavailable {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 18px;
}

.auto-status-unavailable strong {
  color: #c85a5a;
  font-weight: 700;
}

/* Action buttons within the available sub-state */
.auto-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.auto-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: opacity 0.3s ease, transform 0.1s ease;
}

.auto-btn:active {
  transform: scale(0.98);
}

.auto-btn.is-primary {
  background: #6ba672;
  color: #fff;
}

.auto-btn.is-secondary {
  background: #c85a5a;
  color: #fff;
}

.auto-btn.is-escape {
  background: #c5a47e;
  color: #fff;
  margin-left: 12px;
  padding: 12px 20px;
  font-weight: 300;
}
.auto-btn:hover {
  opacity: 0.85;
}

.auto-btn i {
  font-size: 14px;
}

/* Alternatives sub-state — unavailable header row with escape button */
.auto-unavailable-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: -15px 0 20px 0;
}

.auto-unavailable-header .auto-slot-pill {
  margin: 0;
  flex: 1;
  min-width: 280px;
}

/* ============================================================
   GLOBAL COUNTDOWN PILL
   Fixed-position indicator that stays visible across all steps
   while the automation flow is active.
   Visibility controlled by body.auto-flow-active.
   ============================================================ */

.auto-countdown-pill {
  /* Hidden by default; shown via body.auto-flow-active */
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 10000;

  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: #faf8f5;
  border: 1px solid #e8e2d9;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(44, 62, 80, 0.12);
  font-size: 15px;
  color: #7a7065;
  white-space: nowrap;
}

.auto-countdown-pill i {
  color: #c5a47e;
  font-size: 16px;
}

.auto-countdown-pill .auto-countdown-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 16px;
  color: #2c3e50;
}

/* Urgency state: soft orange-tan when under 2 minutes remaining */
.auto-countdown-pill.is-urgent {
  background: #fff5e8;
  border-color: #e8c896;
  color: #a05a10;
}

.auto-countdown-pill.is-urgent i,
.auto-countdown-pill.is-urgent .auto-countdown-value {
  color: #c8811a;
}

/* Visibility toggle driven by body class */
body.auto-flow-active .auto-countdown-pill {
  display: inline-flex;
}

/* ============================================================
   AUTO RECAP / PAIEMENT — variant of summary tab
   ============================================================ */

.auto-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px 30px;
  margin-bottom: 24px;
}

.auto-summary-grid h6 {
  font-size: 13px;
  color: #2c3e50;
  margin-bottom: 4px;
  font-weight: 700;
}

.auto-summary-grid p {
  font-size: 14px;
  color: #7a7065;
  margin: 0;
}

.auto-summary-grid .auto-price-badge {
  display: inline-block;
  background: #ddc9b2;
  color: #2c3e50;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1;
}

.auto-price-box {
  background: #faf8f5;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}

.auto-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  color: #2c3e50;
}

.auto-price-row.is-total {
  border-top: 1px solid #e8e2d9;
  padding-top: 12px;
  margin-top: 8px;
  font-weight: 800;
  font-size: 16px;
}

/* EUR equivalent displayed next to the MAD badge (plain text, not pill) */
.auto-sum-price-eur {
  margin-left: 0.5rem;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .auto-sum-price-eur {
    font-size: 15px;
  }
}

/* Line-item rows inside .auto-price-box: three columns stretching edge-to-edge */
.auto-price-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.25rem 0;
}

.auto-price-line__label {
  text-align: left;
  font-weight: 400;
}

.auto-price-line__detail {
  text-align: center;
  justify-self: center;
  white-space: nowrap;
  font-weight: 400;
  color: #2c3e50;
}

/* The "× N" quantity portion is lighter and dimmed */
.auto-price-line__quantity {
  font-weight: 300;
  opacity: 0.65;
  margin-left: 0.5em;
}

.auto-price-line__subtotal {
  text-align: right;
  justify-self: end;
  min-width: 6rem;
  font-weight: 600;
  color: #2c3e50;
}

@media (max-width: 480px) {
  .auto-price-line {
    gap: 0.75rem;
    font-size: 14px;
  }
  .auto-price-line__subtotal {
    min-width: auto;
  }
}

/* Transient confirm-error callout, injected above the pay button by
   _showRecapError(). The price box above it already supplies its top gap
   (margin-bottom: 20px), so we only need a clean gap below to separate it from
   the CTA. Scoped to the injected element's class to avoid touching other
   reservation callouts. */
.auto-pay-error {
  margin-bottom: 16px;
}

.auto-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 999px;
  border: none;
  background: #c5a47e;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.auto-pay-btn:hover {
  background: #b89468;
}

.auto-pay-btn i {
  font-size: 14px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .auto-summary-grid {
    grid-template-columns: 1fr;
  }

  .auto-actions {
    flex-direction: column;
  }

  .auto-actions .auto-btn {
    justify-content: center;
  }

  /* Mobile: bottom-center, touch-friendly sizing */
  .auto-countdown-pill {
    bottom: 20px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    font-size: 14px;
  }
  .auto-countdown-pill i {
    font-size: 16px;
  }
}

/* ============================================================
   ALTERNATIVE SLOT — fade-out animation (FIX 9)
   ============================================================ */

.auto-alt-slot.is-fading-out {
  animation: auto-fade-out 0.4s ease-out forwards;
  overflow: hidden;
}

@keyframes auto-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0);
    max-height: 80px;
    margin-bottom: 10px;
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}

/* ─── wa-dialog: hold-warning + hold-expired ───────────────────────────── */

.lbdm-dialog {
  --width: 480px;
  --spacing: 1.5rem;
}

.lbdm-dialog::part(dialog)::backdrop {
  background: #2c2a28bf;
}

.lbdm-dialog::part(body) {
  font-family: inherit;
  color: var(--lbdm-text, #1a1a1a);
  line-height: 1.55;
}

.lbdm-dialog__body-text {
  margin: 0;
  font-size: 1rem;
}

/* Hold-expired specifics */
.lbdm-dialog--expired {
  --width: 600px;
}

.lbdm-hold-expired__body {
  text-align: center;
  padding: 0.5rem 0;
}

.lbdm-hold-expired__title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lbdm-accent, #c5a47e);
}

.lbdm-hold-expired__text {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.55;
}

.lbdm-hold-expired__reload-notice {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
  font-style: italic;
}

.lbdm-hold-expired__timer {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lbdm-accent, #c5a47e);
}

/* Footer buttons — let wa-button handle styling, just add gap */
.lbdm-dialog wa-button[slot="footer"] + wa-button[slot="footer"] {
  margin-left: 0.5rem;
}

@media (max-width: 540px) {
  .lbdm-dialog {
    --width: 92vw;
  }
  .lbdm-dialog wa-button[slot="footer"] {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0;
  }
  .lbdm-dialog wa-button[slot="footer"] + wa-button[slot="footer"] {
    margin-left: 0;
  }
}

/* ─── dialog typography, layout, and icon alignment ─────────────────────── */

#lbdm-hold-warning-dialog wa-button::part(label),
#lbdm-voucher-warning-dialog wa-button::part(label),
#lbdm-hold-expired-dialog wa-button::part(label) {
  font-family: 'Open Sans', sans-serif;
  font-stretch: 75%;
  font-weight: 300;
}

/* Match primary button typography with .auto-btn elsewhere in the form */
#lbdm-hold-warning-dialog wa-button[data-action="confirm"]::part(label),
#lbdm-voucher-warning-dialog wa-button[data-action="confirm"]::part(label),
#lbdm-hold-expired-dialog wa-button[data-action="retry"]::part(label),
#lbdm-hold-expired-dialog wa-button[data-action="cancel"]::part(label) {
  font-size: 16px;
  font-weight: 700;
}

/* Center-align footer buttons in the expired dialog (warning dialog
   keeps its default right-alignment) */
#lbdm-hold-expired-dialog::part(footer) {
  justify-content: center;
}

/* Annuler button in hold-expired dialog: LBDM red (not wa-button's default danger) */
#lbdm-hold-expired-dialog wa-button[data-action="cancel"]::part(base) {
  background-color: #c85a5a;
  border-color: #c85a5a;
  color: #fff;
}

#lbdm-hold-expired-dialog wa-button[data-action="cancel"]:hover::part(base) {
  background-color: #c85a5a;
  border-color: #c85a5a;
  color: #fff;
  opacity: 0.85;
}

/* Horizontal alignment of the triangle-exclamation icon with "Attention" text */
.lbdm-dialog--warning [slot="label"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
}

/* ============================================================
   ROLLING-ROW ALTERNATIVES PICKER
   Visual layer for window.__LBDM_renderAlternativesPicker.
   Gold accent matches the existing site palette (#c5a47e),
   not the slightly different mockup gold — to keep the new
   picker visually consistent with the rest of the form.
   ============================================================ */

.lbdm-alternatives-picker {
  /* padding: 2rem;
  max-width: 560px; */
  margin: 0 auto;
  color: #1F2937;
}

.lbdm-alternatives-picker[hidden] {
  display: none;
}

.lbdm-alternatives-picker > header {
  text-align: left;
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------
   PRESERVED FOR FUTURE RE-ENABLE — picker header / callout.
   Currently no element uses these rules; the picker no longer
   renders its own header (h6 + subtitle) or wa-callout in the
   active flow. Preserved for parity with _renderPickerHeader
   and _renderPickerCallout in reservation-flow.js, so that
   re-enabling either helper requires only a JS change.
   ------------------------------------------------------------ */
.lbdm-alternatives-picker__title {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #1F2937;
  margin: 0;
  padding: 0;
  text-transform: none;
}

.lbdm-alternatives-picker__subtitle {
  margin: 0.4rem 0 0;
  font-size: 13px;
  color: #8B8270;
}

.lbdm-alternatives-picker__callout {
  margin: 0.5rem 0 1.5rem;
  font-size: 15px !important;
}
/* End preserved-for-re-enable block */

/* Day pill row */
.lbdm-alternatives-picker__day-row {
  display: block;
  margin: 0.5rem 0 1.5rem;
}

.lbdm-alternatives-picker__day-row-inner {
  display: flex;
  gap: 8px;
  padding: 4px 2px;
}

.lbdm-day-pill {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 12px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(197, 164, 126, 0.4);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: #747474;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lbdm-day-pill:hover:not(.selected) {
  border-color: #c5a47e;
}

.lbdm-day-pill:focus-visible {
  outline: 2px solid #c5a47e;
  outline-offset: 2px;
}

.lbdm-day-pill__weekday {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8B8270;
  line-height: 1.2;
}

.lbdm-day-pill__number {
  font-size: 18px;
  line-height: 1.2;
  margin-top: 2px;
  font-weight: 500;
}

.lbdm-day-pill.selected {
  background: #c5a47e;
  border-color: #c5a47e;
  color: #FFFFFF;
}

.lbdm-day-pill.selected .lbdm-day-pill__weekday {
  color: #FAF0DA;
}

.lbdm-day-pill.selected .lbdm-day-pill__number {
  color: #FFFFFF;
  font-weight: 600;
}

/* Slot bucket sections */
.lbdm-alternatives-picker__bucket {
  margin-bottom: 1.25rem;
}

.lbdm-bucket-label {
  font-family: inherit;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8B8270;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  padding: 0 0 0 5px;
}

.lbdm-slot-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Slot pills (wa-button) — override CSS parts to match mockup. Font matches
   the site-wide button typography ('Open Sans' condensed via font-stretch). */
.lbdm-slot-pill::part(base) {
  background-color: #FFFFFF;
  border-color: rgba(197, 164, 126, 0.4);
  color: #1F2937;
  font-family: 'Open Sans', sans-serif;
  font-stretch: 75%;
  font-weight: 500;
}

.lbdm-slot-pill::part(label) {
  font-family: 'Open Sans', sans-serif;
  font-stretch: 75%;
  font-weight: 500;
  font-size: 15px;
}

.lbdm-slot-pill:hover::part(base) {
  background-color: rgba(197, 164, 126, 0.08);
  border-color: #c5a47e;
  color: #1F2937;
}

.lbdm-slot-pill:focus-visible::part(base) {
  outline: 2px solid #c5a47e;
  outline-offset: 2px;
}

/* Tentative-selection state — matches the day-pill selected look so the
   user has an unmistakable "this is what's about to be confirmed" cue. */
.lbdm-slot-pill.selected::part(base) {
  background-color: #c5a47e;
  border-color: #c5a47e;
  color: #FFFFFF;
}

.lbdm-slot-pill.selected::part(label) {
  color: #FFFFFF;
}

/* Confirmer button — the explicit commit step in the double-confirmation
   pattern. Centered between divider and manual escape link. */
.lbdm-alternatives-picker__confirm {
  display: block;
  margin: 0 auto 1rem;
}

/* Subtle gold-tinted divider above the manual escape link */
.lbdm-alternatives-picker__divider {
  --color: rgba(197, 164, 126, 0.18);
  margin: 1.25rem 0 1rem;
}

/* Manual escape link — intentionally subtle to discourage manual fallthrough */
.lbdm-alternatives-picker__manual-escape {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #c5a47e;
  text-decoration: none !important;
  transition: color 0.15s ease;
  cursor: pointer;
  width: max-content;
  margin: 0 auto 15px;
}

.lbdm-alternatives-picker__manual-escape:hover,
.lbdm-alternatives-picker__manual-escape:focus {
  color: #b89468;
  text-decoration: none;
}

/* Devtools test host — only used by __LBDM_testAlternativesPicker fallback */
.lbdm-alternatives-picker-test-host {
  margin: 2rem auto;
}

@media (max-width: 540px) {
  .lbdm-alternatives-picker {
    padding: 1.25rem;
    border-radius: 6px;
  }
  .lbdm-day-pill {
    min-width: 56px;
    padding: 10px 14px;
  }
}