/* ==========================================================================
   UncleTrips — Booking steps for ground services (transfer & chauffeur)
   A configuration step between results and cart: route / service summary,
   chosen vehicle, service-specific details, extras and a live price summary.
   Panels, forms, steps and switch come from ui.css; vehicle bits from vehicles.css.
   ========================================================================== */

.booking-step {
  padding-block-end: var(--sp-6);
}

.step-head {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-2) var(--sp-6);
}

.step-form {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.step-form .panel + .panel {
  margin: 0;
}

.step-sub {
  margin-block: calc(var(--sp-2) * -1) var(--sp-4);
}

.step-kv {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--c-border);
}

.step-check {
  margin-block-start: var(--sp-4);
}

/* Chosen vehicle */
.chosen-vehicle {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
}

/* Extras */
.extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}

.extra-row + .extra-row {
  border-block-start: 1px solid var(--c-border);
}

.extra-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
}

.extra-name .icon {
  width: 20px;
  height: 20px;
  color: var(--c-navy-600);
}

.extra-note {
  margin-block-start: 2px;
  font-size: var(--fs-13);
  color: var(--c-text-muted);
}

.extra-row .stepper button[data-extra-step="1"]:not(:disabled),
.option-row .stepper button[data-extra-step="1"]:not(:disabled) {
  border-color: var(--c-orange-500);
  color: var(--c-orange-500);
}

.return-fields {
  margin-block-start: var(--sp-4);
}

.return-fields[hidden] {
  display: none;
}

/* Summary */
.step-summary {
  display: grid;
  gap: var(--sp-4);
}

.price-lines {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  color: var(--c-grey-600);
}

.price-lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}

.price-lines li > span:last-child {
  flex: none;
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}

.step-error {
  display: flex;
  gap: 6px;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: #b4351f;
}

.step-error[hidden] {
  display: none;
}

/* Chauffeur: hour packages */
.hour-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--sp-2);
}

.hour-options .choice {
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
}

.hour-options .choice-mark {
  display: none;
}

.stop-list {
  display: grid;
  gap: var(--sp-2);
  counter-reset: stop;
}

.stop-list .input-wrap::before {
  counter-increment: stop;
  content: counter(stop);
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-navy-100);
  color: var(--c-navy-800);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  transform: translateY(-50%);
}

.stop-list .input {
  padding-inline-start: 44px;
}

@media (max-width: 1023px) {
  .step-summary .btn--lg {
    display: none;
  }

  /* summary sits under the form; the sticky bar carries the action */
  .booking-step {
    padding-block-end: calc(var(--sp-12) + 40px);
  }
}

@media (min-width: 1024px) {
  .booking-step .selection-bar {
    display: none;
  }
}

@media (max-width: 767px) {
  .chosen-vehicle {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--sp-3);
  }

  .chosen-vehicle .feature-list li:nth-child(n + 3) {
    display: none;
  }
}

/* fieldset used as a panel */
.step-fieldset {
  margin: 0;
  min-inline-size: 0;
}

.step-fieldset legend {
  float: inline-start;
  width: 100%;
  margin-block-end: var(--sp-4);
  padding: 0;
}

[dir="rtl"] .step-fieldset legend {
  float: right;
}

.step-fieldset legend + * {
  clear: both;
}

.add-stop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-block-start: var(--sp-2);
}

.add-stop[hidden] {
  display: none;
}

.rate-kv {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-grey-50);
  font-size: var(--fs-13);
}