/* Increment 2 — booking flow rebuilt as the .aui configurator (mirrors /admin/_styleguide).
   Loads AFTER design_system.css so these layout rules win. Slot step first; add-ons/review follow.
   The look comes from the proven .aui-* components; this file only adds layout + booking-specific bits. */

/* ---- Shell: one centered configurator, like /services ---- */
.booking-config-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.booking-config-back {
  align-self: flex-start;
}

/* The panel mirrors the styleguide: one calm .aui-panel with generous internal rhythm */
.booking-config-panel {
  display: grid;
  gap: 24px;
}
.booking-config-head {
  display: grid;
  gap: 6px;
}
.booking-config-head .aui-display,
.booking-config-head .aui-lead {
  margin: 0;
}

/* ---- Two-column body: controls | live summary ---- */
.booking-config-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}
.booking-config-controls {
  gap: 22px;
}
.booking-config-field {
  display: grid;
  gap: 10px;
}

/* Vehicle type — a tidy, uniform grid of tiles (every tile the same size, icon + name + price).
   Consistent with the add-ons options + the Specialty row below. */
.booking-vehicle-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.booking-vehicle-tiles .aui-option {
  width: 100%;
  min-height: 64px;
}
.booking-vehicle-tiles .aui-option-media {
  flex: 0 0 auto;
  color: var(--aui-ink-soft, #9aa3af);
}
.booking-vehicle-tiles .aui-option-desc {
  font-weight: 500;
  color: var(--aui-ink-faint, #6a727d);
}
/* selected tile: icon + accent for a cohesive, premium state */
.booking-vehicle-tiles .aui-option.is-selected .aui-option-media {
  color: var(--aui-accent, var(--brand-red, #e52929));
}
/* Specialty icon picks up the brand red on hover for the same cohesion */
.booking-specialty:hover .booking-specialty-media {
  color: var(--aui-accent, var(--brand-red, #e52929));
}

@media (max-width: 560px) {
  .booking-vehicle-tiles {
    grid-template-columns: 1fr;
  }
}

/* Specialty / oversized — a separate, secondary path to a manual quote. Visible but never
   competing with the standard sizes (Airbnb-style "can't find it? here's the other way" row). */
.booking-specialty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--aui-line, rgba(255, 255, 255, 0.08));
  border-radius: var(--aui-radius, 12px);
  background: var(--aui-surface-2, rgba(255, 255, 255, 0.03));
  color: var(--aui-ink, #f4f6f8);
  text-decoration: none;
  transition: border-color 0.14s, background 0.14s;
}
.booking-specialty:hover {
  border-color: var(--aui-accent, var(--brand-red, #e52929));
}
.booking-specialty-media {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--aui-ink-soft, #9aa3af);
}
.booking-specialty-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.booking-specialty-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.booking-specialty-desc {
  font-size: 0.82rem;
  color: var(--aui-ink-soft, #9aa3af);
}
.booking-specialty-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--aui-accent, var(--brand-red, #e52929));
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Date input styled to match the dark system */
.booking-config-date {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--dd-surface-2, rgba(10, 14, 23, 0.92));
  color: var(--dd-text-100, #f4f6fb);
  font: inherit;
  color-scheme: dark;
}
.booking-config-date:focus-visible {
  outline: 2px solid var(--brand-red, #e52929);
  outline-offset: 2px;
}

/* Select styled to match the dark system (e.g. the quote vehicle-type) */
.booking-config-select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--aui-surface-2, rgba(10, 14, 23, 0.92));
  color: var(--aui-ink, #f4f6fb);
  font: inherit;
  color-scheme: dark;
  cursor: pointer;
}
.booking-config-select:focus-visible {
  outline: 2px solid var(--brand-red, #e52929);
  outline-offset: 2px;
}

/* Availability messages */
.booking-config-alert {
  padding: 10px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(229, 41, 41, 0.5);
  background: rgba(229, 41, 41, 0.12);
  color: #ffd7d7;
  font-size: 0.92rem;
}

.booking-config-alert--success {
  border-color: rgba(79, 195, 138, 0.5);
  color: var(--dd-success, #4fc38a);
}

.booking-waitlist { display: grid; gap: 10px; margin-top: 14px; text-align: left; }
.booking-waitlist-lead { font-size: 0.9rem; }
.booking-waitlist-row { display: flex; gap: 8px; flex-wrap: wrap; }
.booking-waitlist-row input[type="email"] { flex: 1; min-width: 200px; }
.booking-waitlist .hidden { display: none; }
.booking-config-empty {
  display: grid;
  gap: 2px;
  padding: 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: var(--dd-surface-2, rgba(255, 255, 255, 0.03));
}
.booking-config-empty strong {
  color: var(--dd-text-100, #fff);
}
.booking-config-empty span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* Slot times — a tidy grid of .aui-swatch pills */
.booking-slot-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.booking-slot-times:empty {
  display: none;
}

/* ---- Right column: live summary preview ---- */
.booking-config-aside {
  gap: 14px;
}
/* The service leads with its image — big imagery, name over a soft gradient (Porsche-style) */
.booking-config-preview {
  position: relative;
  min-height: 168px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.booking-config-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.booking-config-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 62%);
  z-index: 1;
}
.booking-config-preview .aui-preview-label {
  position: relative;
  z-index: 2;
  margin: 12px 14px;
  font-weight: 600;
  color: #fff;
}
.booking-config-rows {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
}
.booking-config-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  background: var(--dd-surface-2, rgba(10, 14, 23, 0.9));
  font-size: 0.92rem;
}
.booking-config-row span {
  color: rgba(255, 255, 255, 0.6);
}
.booking-config-row strong {
  color: var(--dd-text-100, #fff);
  text-align: right;
}
.booking-config-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.booking-config-flag {
  padding: 10px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(229, 41, 41, 0.4);
  background: rgba(229, 41, 41, 0.1);
  color: #ffd7d7;
  font-size: 0.85rem;
}

/* ---- Pricebar: total + continue ---- */
.booking-config-pricebar {
  margin-top: 4px;
}
.booking-config-pricebar #continue-btn {
  min-height: 48px;
}

/* ---- Add-ons step ---- */
.booking-addon-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.booking-addon-options .aui-option {
  width: 100%;
  cursor: pointer;
  align-items: center;
}
/* The native checkbox/radio is hidden — the label + .aui-option-check carry the UI */
.addon-native-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.addon-option-media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.addon-option-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Recommended upsells — compact chips, not a wall of text */
.booking-addon-suggest {
  display: grid;
  gap: 8px;
}
.booking-addon-suggest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.booking-addon-suggest-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--aui-radius-pill, 999px);
  border: 1px solid var(--aui-line, rgba(255, 255, 255, 0.12));
  background: var(--aui-surface-2, rgba(255, 255, 255, 0.03));
  color: var(--aui-ink, #f4f6f8);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.booking-addon-suggest-item:hover {
  border-color: var(--aui-accent, var(--brand-red, #e52929));
}
.booking-addon-suggest-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--aui-accent, var(--brand-red, #e52929));
  font-weight: 600;
}

/* ---- Review step ---- */
.booking-review-section {
  display: grid;
  gap: 9px;
}
.field-opt {
  color: var(--aui-ink-faint, #6a727d);
  font-weight: 400;
}
.booking-review-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--aui-ink-soft, #9aa3af);
  cursor: pointer;
}
.booking-review-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--aui-accent, var(--brand-red, #e52929));
  cursor: pointer;
}
.booking-review-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--aui-ink-soft, #9aa3af);
}
/* A16 F-1617 — promo input + Apply button row (flag-gated feature). */
.booking-review-promo {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0.5rem;
}
.booking-review-promo input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}
.booking-review-promo .aui-btn {
  flex: 0 0 auto;
}
.booking-review-note.is-warning {
  color: var(--aui-danger, #e5534b);
}
.booking-review-policy {
  opacity: 0.92;
}
.booking-review-policy-link {
  font-size: 0.85rem;
}

/* Tip pills: native radio hidden, selection shown via :has (no JS needed) */
.booking-tip-option {
  cursor: pointer;
}
.booking-tip-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.booking-tip-option:has(input:checked) {
  border-color: var(--aui-accent, var(--brand-red, #e52929));
  color: var(--aui-ink, #f4f6f8);
  box-shadow: inset 0 0 0 1px var(--aui-accent, var(--brand-red, #e52929));
}

/* ---- Entry step (guest / account fork) ---- */
.booking-entry-shell {
  max-width: 560px;
}
.booking-entry-options {
  gap: 12px;
}
.booking-entry-options form {
  display: block;
}
.booking-entry-option {
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}
.booking-entry-option .aui-option-body {
  flex: 1 1 auto;
  min-width: 0;
}
.booking-entry-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--aui-ink-faint, #6a727d);
  transition: color 0.14s, transform 0.14s;
}
.booking-entry-option:hover .booking-entry-arrow {
  color: var(--aui-ink, #f4f6f8);
  transform: translateX(2px);
}

/* ---- Confirmation step ---- */
.booking-confirm-claim {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--aui-line, rgba(255, 255, 255, 0.08));
  border-radius: var(--aui-radius, 12px);
  background: var(--aui-surface-2, rgba(255, 255, 255, 0.03));
}
.booking-confirm-claim .aui-btn {
  justify-self: start;
}
.booking-confirm-meaning {
  display: grid;
  gap: 8px;
}
.booking-confirm-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--aui-ink-soft, #9aa3af);
}
.booking-confirm-list strong {
  color: var(--aui-ink, #f4f6f8);
  font-weight: 600;
}
.booking-confirm-help {
  display: grid;
  gap: 10px;
}

/* ---- One button language across the public site ----
   The configurator's primary CTA adopts the home button look (uppercase, 46px, radius 6px, red glow)
   so /services -> booking -> pay all match the home page. Same brand red (var(--brand-red, #e52929)) either way. */
.booking-config-shell .aui-btn--primary {
  height: auto;
  min-height: 46px;
  padding: 0 24px;
  border-radius: var(--radius-xs);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px rgba(229, 41, 41, 0.18), 0 16px 34px rgba(0, 0, 0, 0.3);
}
.booking-config-shell .aui-btn--primary:hover {
  background: var(--brand-red-strong, #c91d1d);
  border-color: var(--brand-red-strong, #c91d1d);
}
/* Back is quiet nav — a text link, never competing with the CTA */
.booking-config-back.aui-btn {
  height: auto;
  min-height: 0;
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--aui-ink-soft, #9aa3af);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.booking-config-back.aui-btn:hover {
  color: var(--aui-ink, #f4f6f8);
  background: none;
}

/* The global .hidden must always win over the layout displays above */
.booking-config-alert.hidden,
.booking-config-empty.hidden,
.booking-config-flag.hidden,
.booking-config-rows.hidden {
  display: none;
}

/* ---- Responsive: stack on small screens ---- */
@media (max-width: 860px) {
  .booking-config-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .booking-config-shell {
    padding: 18px 14px 48px;
  }
  .booking-config-pricebar {
    flex-wrap: wrap;
  }
  .booking-specialty {
    flex-wrap: wrap;
  }
  .booking-specialty-cta {
    width: 100%;
    justify-content: flex-end;
  }
}