/* booking.css — Multi-step booking form */

.booking-page { background: var(--bg); min-height: 80vh; padding: 60px 0 80px; }
.booking-header { text-align: center; margin-bottom: 48px; }
.booking-header h1 { margin-bottom: 10px; }

/* Progress stepper */
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
}
.stepper-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--border-mid);
}
.stepper-step.done::after { background: var(--navy); }
.stepper-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-soft);
  z-index: 1;
  transition: all var(--transition);
}
.stepper-step.active .stepper-num {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.stepper-step.done .stepper-num {
  background: var(--success);
  border-color: var(--success);
  color: var(--white);
}
.stepper-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-soft);
}
.stepper-step.active .stepper-label { color: var(--navy); }

/* Form card */
.booking-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 44px;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

/* Form steps (show/hide) */
.form-step { display: none; }
.form-step.active { display: block; }

.form-step h3 { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

/* Form fields */
.field-group { margin-bottom: 20px; }
.field-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-bottom: 7px;
}
.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.97rem;
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--bg);
  transition: border-color var(--transition), background var(--transition);
  outline: none;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(13,31,60,0.06);
}
.field-group input.error,
.field-group select.error { border-color: var(--error); }
.field-error {
  font-size: 0.78rem;
  color: var(--error);
  margin-top: 5px;
  display: none;
}
.field-group.has-error .field-error { display: block; }
.field-group textarea { min-height: 90px; resize: vertical; }
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Vehicle selection */
.vehicle-options { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.vehicle-option {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 2px solid var(--border-mid);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  background: var(--bg);
}
.vehicle-option:hover { border-color: var(--navy-soft); background: var(--white); }
.vehicle-option.selected {
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(13,31,60,0.07);
}
.vehicle-option input[type="radio"] { display: none; }
.vehicle-option-icon {
  width: 52px;
  height: 40px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.vehicle-option-info { flex: 1; }
.vehicle-option-info strong {
  display: block;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 3px;
}
.vehicle-option-info small {
  font-size: 0.83rem;
  color: var(--text-soft);
}
.vehicle-option-price {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  white-space: nowrap;
}
.vehicle-option-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}
.vehicle-option.selected .vehicle-option-check {
  background: var(--navy);
  border-color: var(--navy);
}
.vehicle-option.selected .vehicle-option-check::after {
  content: '✓';
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Booking summary (step 4) */
.booking-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; }
.summary-row .label { color: var(--text-soft); font-weight: 500; }
.summary-row .value { font-weight: 600; color: var(--text); text-align: right; }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--border-mid);
  font-size: 1.05rem;
  font-weight: 700;
}
.summary-total .price {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  color: var(--navy);
}

/* Navigation buttons */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  gap: 12px;
}
.btn-back {
  background: none;
  border: 1.5px solid var(--border-mid);
  color: var(--text-mid);
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--ff-body);
}
.btn-back:hover { border-color: var(--navy); color: var(--navy); }

/* Consent checkbox */
.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.consent-field input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.consent-field label { font-size: 0.85rem; color: var(--text-mid); cursor: pointer; }

@media (max-width: 640px) {
  .booking-card { padding: 28px 20px; border-radius: var(--radius-lg); }
  .fields-row { grid-template-columns: 1fr; }
  .stepper-label { display: none; }
}