.booking-hero {
  background:
    radial-gradient(circle at 78% 20%, rgba(233, 193, 118, 0.12), transparent 28%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.97), rgba(10, 10, 10, 0.72)),
    url("https://lh3.googleusercontent.com/aida-public/AB6AXuBWa3G54_URPLHur08AmWzFI0EtP_e3RGbUanW-GkaTk0qlCIrW7B0LdlFNcjq_lLN_S4TcHlYDw1J8e8QZpUm4xPUpe4Jbm00aQaG3c1whKwoikeFYooNcrGaYfnHEzB18kzjhzqLTQ0A6MCx1d3HDOL90wwg9K2xE1zV3_5jACI2r4W5rru1axBP9N4yoTkE4RykQF8P5O6geAlwhyHzeGysme8s9HkcIoEB1kpkBaKR7lFBuDigDIH9oatWDpINCIos6bBdrPCg") center 42% / cover;
}

.booking-progress-section {
  position: relative;
}

.booking-layout {
  grid-template-columns: minmax(0, 1fr);
}

.booking-progress {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.booking-step {
  align-items: center;
  background: rgba(23, 22, 22, 0.72);
  border: 1px solid rgba(78, 70, 57, 0.7);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  position: relative;
  text-align: left;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.booking-step:not(:disabled):hover,
.booking-step:not(:disabled):focus-visible {
  border-color: #e9c176;
  transform: translateY(-1px);
}

.booking-step:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.booking-step.is-active {
  background: linear-gradient(135deg, rgba(233, 193, 118, 0.16), rgba(233, 193, 118, 0.05));
  border-color: #e9c176;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

.booking-step.is-complete {
  cursor: pointer;
}

.booking-step-dot {
  align-items: center;
  background: #353534;
  border: 1px solid #4e4639;
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  position: relative;
  width: 32px;
  z-index: 1;
}

.booking-step.is-active .booking-step-dot,
.booking-step.is-complete .booking-step-dot {
  background: #e9c176;
  border-color: #e9c176;
  color: #0a0a0a;
}

.booking-step-copy {
  display: block;
  min-width: 0;
}

.booking-step-kicker {
  color: #77716a;
  display: block;
  font-size: 6px;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-bottom: 3px;
}

.booking-step-label {
  color: #aaa39a;
  display: block;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-step.is-active .booking-step-label,
.booking-step.is-complete .booking-step-label {
  color: #e9c176;
}

.booking-step-edit {
  color: #e9c176;
  font-size: 14px;
  margin-left: auto;
  opacity: 0.72;
}

.wizard-option {
  border-radius: 10px;
  border: 1px solid #4e4639;
  cursor: pointer;
  min-width: 0;
  outline: none;
  position: relative;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.wizard-option:hover,
.wizard-option:focus-visible {
  border-color: #9a8f80;
  transform: translateY(-2px);
}

.wizard-option.is-selected {
  border-color: #e9c176;
  box-shadow: inset 0 0 0 1px #e9c176, 0 12px 28px rgba(0, 0, 0, 0.2);
}

.selection-check {
  align-items: center;
  background: #e9c176;
  color: #0a0a0a;
  display: none;
  height: 22px;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
  right: 10px;
  top: 10px;
  width: 22px;
  z-index: 2;
}

.wizard-option.is-selected .selection-check {
  display: flex;
}

.wizard-panel {
  animation: wizard-enter 180ms ease both;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-color: #4e4639 transparent;
  scrollbar-width: thin;
}

.booking-shell {
  background:
    radial-gradient(circle at 90% 0%, rgba(233, 193, 118, 0.055), transparent 30%),
    #171616;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  height: 720px;
  min-width: 0;
}

@keyframes wizard-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.date-card.is-selected,
.time-slot.is-selected {
  background: #e9c176;
  border-color: #e9c176;
  color: #261900;
}

.date-card,
.time-slot,
[data-action="previous-dates"],
[data-action="next-dates"] {
  border-radius: 8px;
}

.time-slot:disabled,
.date-card:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.booking-field {
  background: #0e0e0e;
  border: 1px solid #4e4639;
  border-radius: 9px;
  color: #e5e2e1;
  outline: none;
  transition: border-color 180ms ease;
}

.booking-field:focus {
  border-color: #e9c176;
}

.booking-field::placeholder {
  color: #77716a;
}

.booking-input-wrap {
  display: block;
  position: relative;
}

.booking-input-icon {
  align-items: center;
  color: #e9c176;
  display: flex;
  font-size: 19px;
  font-variation-settings: "wght" 300;
  height: 100%;
  justify-content: center;
  left: 13px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 22px;
  z-index: 1;
}

.booking-input-wrap .booking-field {
  padding-left: 46px;
}

.booking-alert,
.slot-conflict-dialog {
  border-radius: 12px;
  overflow: hidden;
}

[data-form="customer"] button,
[data-action="submit-booking"],
[data-action="retry-catalog"],
#choose-another-slot,
.wizard-panel a[href="/"] {
  border-radius: 9px;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

[data-form="customer"] button:hover,
[data-action="submit-booking"]:hover,
#choose-another-slot:hover {
  transform: translateY(-1px);
}

.confirmation-card {
  background: linear-gradient(145deg, rgba(35, 33, 31, 0.96), rgba(24, 23, 22, 0.96));
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.booking-alert {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.booking-alert.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.slot-conflict-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(5px);
}

.slot-conflict-dialog[open] {
  animation: slot-conflict-enter 200ms ease both;
}

@keyframes slot-conflict-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 639px) {
  .booking-hero {
    background-position: 62% center;
  }

  .booking-progress {
    display: flex;
    margin-inline: -16px;
    overflow-x: auto;
    padding: 0 16px 5px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .booking-progress::-webkit-scrollbar {
    display: none;
  }

  .booking-step {
    flex: 0 0 154px;
    padding: 10px;
    scroll-snap-align: center;
  }

  .booking-step-label {
    font-size: 7px;
    letter-spacing: 0.06em;
  }

  .booking-shell {
    height: auto;
    min-height: 590px;
  }

  .wizard-panel {
    overflow: visible;
    padding-right: 0;
  }

  .step-heading h2 {
    line-height: 1.08;
  }

  .service-option {
    height: 152px;
  }

}

@media (min-width: 640px) {
  .booking-shell {
    height: 680px;
  }
}

@media (min-width: 1024px) {
  .booking-shell {
    height: 650px;
  }
}

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

  .slot-conflict-dialog[open] {
    animation: none;
  }
}