.form-item--services:nth-child(4) {
    display: none;
}

input[type=radio]:disabled + label {
 opacity: 0.5;
 cursor: not-allowed !important;
 }


/* -------------------------------------------------------------
 * 1. Hide Image Banner & Expand Form Container for Payment Step
 * ------------------------------------------------------------- */
.booking-form-wrapper[data-webform-wizard-current-page="payment"] .booking-form__media,
.booking-form-wrapper:has(#edit-payment) .booking-form__media {
  display: none !important;
}

.booking-form-wrapper[data-webform-wizard-current-page="payment"] .booking-form__body,
.booking-form-wrapper:has(#edit-payment) .booking-form__body {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 1.5rem !important;
}

/* -------------------------------------------------------------
 * 2. Checkout Table Layout Grid
 * ------------------------------------------------------------- */
.checkout-review-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 768px) {
  .checkout-review-container {
    grid-template-columns: 1fr 340px;
  }
}

/* Card Styling */
.review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* T116: mobile-only override - .review-card own 20px side padding was the single biggest consumer of width available to the option-row grid text column on a real 390px phone (measured live). Scoped to max-width so desktop is untouched. */
@media (max-width: 767px) {
  .review-card {
    padding: 0.75rem !important;
  }
}

.review-card--summary {
  background-color: #f8fafc;
}

.review-card__title {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: #004489;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* -------------------------------------------------------------
 * 3. Tables Formatting (Customer Details & Summary)
 * ------------------------------------------------------------- */
.review-table,
.summary-table {
  width: 100%;
  border-collapse: collapse;
}

.review-table td,
.summary-table td {
  padding: 0.625rem 0;
  font-size: 0.875rem;
  border-bottom: 1px dashed #e2e8f0;
}

.review-table tr:last-child td,
.summary-table tr:last-child td {
  border-bottom: none;
}

.review-table__label,
.summary-table__label {
  color: #64748b;
  font-weight: 500;
  width: 40%;
}

.review-table__value,
.summary-table__value {
  color: #0f172a;
  font-weight: 600;
  text-align: right;
}

/* Highlight Total Row */
.summary-table__row--total td {
  border-top: 2px solid #004489 !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: #004489;
  padding-top: 0.875rem;
}

/* -------------------------------------------------------------
 * 4. Gateway Box & Badges
 * ------------------------------------------------------------- */
.gateway-banner {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  background-color: #f1f5f9;
  padding: 0.875rem;
  border-radius: 6px;
  font-size: 0.8125rem;
}

.gateway-banner__icon {
  font-size: 1.5rem;
}

.gateway-banner__info p {
  margin: 0.25rem 0 0 0;
  color: #64748b;
}

/* T100: VINCI blue + inverted hover, matching styles.scss's own .btn-primary convention (T70) - this button doesn't carry that class (Webform's own wizard-next markup), so the rule is restated here. 2px border in the rest state too (colour-matched, invisible) so hover's border doesn't grow the button and shift layout. */
#edit-actions-wizard-next {
  width: 100% !important;
  padding: 12px 18px !important;
  background-color: #004489 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 2px solid #004489 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

#edit-actions-wizard-next:hover,
#edit-actions-wizard-next:focus {
  background-color: #f1f5f9 !important;
  color: #004489 !important;
}

form[data-webform-wizard-current-page="payment"] {
display: block
}


form[data-webform-wizard-current-page="payment"] .booking-form__body {
  max-width: 1200px;
}

button[type=submit]:disabled, input[type=submit]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}