/* ==========================================================
   KidSitter — Checkout / Subscribe Page CSS
   ========================================================== */

/* Page background */
.ks-checkout-page {
  background: linear-gradient(to bottom, hsla(174, 56%, 46%, 0.06), hsla(174, 56%, 46%, 0.02));
  min-height: 100vh;
  padding-bottom: 3rem;
}

/* Back link */
.ks-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
  color: var(--ks-muted-foreground);
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  transition: color 0.2s;
}
.ks-back-link:hover { color: var(--ks-foreground); text-decoration: none; }
.ks-back-link .lucide { width: 1rem; height: 1rem; }

/* Step header */
.ks-step-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}
.ks-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--ks-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ks-step-title {
  font-family: var(--ks-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ks-foreground);
  margin: 0;
}

/* Order summary */
.ks-order-summary { margin-bottom: 1.5rem; }
.ks-order-summary h2 {
  font-family: var(--ks-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ks-foreground);
  margin: 0 0 1rem;
}
.ks-order-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: var(--ks-secondary);
  border-radius: var(--ks-radius);
  margin-bottom: 1rem;
}
.ks-order-toggle-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ks-order-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.ks-order-line-label { color: var(--ks-muted-foreground); }
.ks-order-line-price { font-weight: 600; color: var(--ks-foreground); }
.ks-order-billing-note {
  font-size: 0.875rem;
  color: var(--ks-muted-foreground);
}
.ks-order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--ks-border);
  font-size: 1.125rem;
  font-weight: 600;
}
.ks-order-total-price { color: var(--ks-primary); }

/* Toggle switch */
.ks-toggle-switch {
  position: relative;
  width: 3rem;
  height: 1.625rem;
  background: var(--ks-muted);
  border-radius: var(--ks-radius-full);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.2s;
}
.ks-toggle-switch.active { background: var(--ks-primary); }
.ks-toggle-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.375rem;
  height: 1.375rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.ks-toggle-switch.active .ks-toggle-switch-knob {
  transform: translateX(1.375rem);
}
.ks-billing-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ks-muted-foreground);
  transition: color 0.2s;
  cursor: pointer;
}
.ks-billing-label.active { color: var(--ks-foreground); }
.ks-save-badge {
  display: inline-block;
  background: var(--ks-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ks-radius-full);
}

/* Payment form card icon */
.ks-card-input-wrap { position: relative; }
.ks-card-input-wrap .ks-input { padding-right: 2.75rem; }
.ks-card-input-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ks-muted-foreground);
}
.ks-card-input-icon .lucide { width: 1.25rem; height: 1.25rem; }

/* Saved card display */
.ks-saved-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--ks-secondary);
  border-radius: var(--ks-radius);
  margin-bottom: 1rem;
}
.ks-saved-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ks-radius);
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
}
.ks-saved-card-icon .lucide { width: 1.25rem; height: 1.25rem; color: var(--ks-primary); }
.ks-saved-card-details { flex: 1; }
.ks-saved-card-number {
  font-weight: 600;
  color: var(--ks-foreground);
  font-size: 0.9375rem;
}
.ks-saved-card-name {
  font-size: 0.8125rem;
  color: var(--ks-muted-foreground);
}

/* Payment trust */
.ks-payment-trust {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 1rem;
}
.ks-payment-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ks-muted-foreground);
}
.ks-payment-trust-item .lucide {
  width: 1rem;
  height: 1rem;
  color: var(--ks-primary);
}
.ks-payment-terms {
  font-size: 0.75rem;
  color: var(--ks-muted-foreground);
  text-align: center;
  margin-top: 0.75rem;
}
.ks-payment-terms a { color: var(--ks-primary); }
.ks-payment-terms a:hover { text-decoration: underline; }

/* Stripe footer */
.ks-stripe-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--ks-muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.ks-stripe-footer .lucide { width: 0.75rem; height: 0.75rem; }

/* Info notice */
.ks-checkout-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: hsla(174, 56%, 46%, 0.06);
  border: 1px solid hsla(174, 56%, 46%, 0.15);
  border-radius: var(--ks-radius);
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ks-muted-foreground);
  line-height: 1.5;
}
.ks-checkout-notice .lucide {
  width: 1rem;
  height: 1rem;
  color: var(--ks-primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Payment error */
.ks-payment-error {
  padding: 0.75rem 1rem;
  background: hsla(0, 80%, 55%, 0.08);
  border: 1px solid hsla(0, 80%, 55%, 0.2);
  border-radius: var(--ks-radius);
  color: #e53e3e;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* Checkout form overrides */
.ks-checkout-form .ks-form-group { margin-bottom: 1rem; }

/* Billing address checkbox */
.ks-checkout-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.ks-checkout-checkbox input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.ks-checkout-checkbox label {
  font-size: 0.875rem;
  color: var(--ks-muted-foreground);
  font-weight: 400;
  cursor: pointer;
}
.ks-checkout-checkbox .ks-address-display {
  color: var(--ks-primary);
  font-weight: 500;
}

/* Billing address reveal */
.ks-billing-address { display: none; margin-bottom: 1rem; }
.ks-billing-address.active { display: block; }

/* --------------------------------------------------------
   Address-edit-block restyling inside checkout
   The included component uses old Bootstrap / legacy classes.
   These overrides bring it in line with the ks- design system.
   -------------------------------------------------------- */
.ks-billing-address .address-search {
  padding: 1rem;
  background: var(--ks-secondary);
  border-radius: var(--ks-radius);
}

/* Labels */
.ks-billing-address label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ks-foreground);
  margin-bottom: 0.25rem;
}
.ks-billing-address .label--required { font-weight: 600; }

/* Text inputs & selects — match .ks-input */
.ks-billing-address .form-control,
.ks-billing-address input[type="text"],
.ks-billing-address select {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ks-foreground);
  background-color: var(--ks-background);
  border: 1px solid var(--ks-input);
  border-radius: var(--ks-radius);
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.ks-billing-address .form-control:focus,
.ks-billing-address input[type="text"]:focus,
.ks-billing-address select:focus {
  outline: none;
  border-color: var(--ks-ring);
  box-shadow: 0 0 0 3px hsla(174, 56%, 46%, 0.15);
}

/* Select arrow indicator */
.ks-billing-address select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

/* Form groups — spacing */
.ks-billing-address .form-group {
  margin-bottom: 0.75rem;
}
.ks-billing-address .form__address-block .form-group:last-child {
  margin-bottom: 0;
}

/* Postcode search row */
.ks-billing-address .reduced-gutter-wrap {
  margin-bottom: 0.5rem;
}
.ks-billing-address .reduced-gutter {
  padding-left: 7.5px;
  padding-right: 7.5px;
}

/* Search button — match ks-btn-outline */
.ks-billing-address .address-search-button,
.ks-billing-address .btn--blue-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--ks-primary);
  border-radius: var(--ks-radius);
  background: transparent;
  color: var(--ks-primary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  width: 100%;
  height: auto;
  line-height: 1.5;
}
.ks-billing-address .address-search-button:hover,
.ks-billing-address .btn--blue-out:hover {
  background: hsla(174, 56%, 46%, 0.08);
}

/* Address dropdown (results) — hidden until postcode search populates it */
.ks-billing-address .booking_select_dropdown {
  margin-top: 0.5rem;
  display: none;
}
.ks-billing-address .booking_select_dropdown.active {
  display: block;
}
.ks-billing-address .booking_select_dropdown select {
  width: 100%;
}

/* "OR" separator */
.ks-billing-address .or-sep {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ks-muted-foreground);
  margin: 0.75rem 0;
  letter-spacing: 0.05em;
}

/* Error state */
.ks-billing-address .has-error .form-control,
.ks-billing-address .has-error input[type="text"] {
  border-color: #e53e3e;
}
.ks-billing-address .help-block {
  font-size: 0.8125rem;
  color: #e53e3e;
  margin-top: 0.25rem;
}

/* Responsive — stack postcode search + manual on small screens */
@media (max-width: 767px) {
  .ks-billing-address .or-sep {
    margin: 0.5rem 0;
  }
}

/* Payment processing modal overlay */
.ks-payment-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.ks-payment-overlay.active { display: flex; }
.ks-payment-overlay-card {
  background: var(--ks-card);
  border-radius: var(--ks-radius-lg);
  padding: 2rem;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.ks-payment-overlay-card h3 {
  font-family: var(--ks-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  color: var(--ks-foreground);
}
.ks-payment-overlay-card p {
  font-size: 0.875rem;
  color: var(--ks-muted-foreground);
  margin: 0;
}

/* Spinner */
@keyframes ks-spin { to { transform: rotate(360deg); } }
.ks-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--ks-border);
  border-top-color: var(--ks-primary);
  border-radius: 50%;
  animation: ks-spin 0.8s linear infinite;
}

/* Plan switch notice */
.ks-plan-switch-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: hsla(28, 85%, 55%, 0.08);
  border: 1px solid hsla(28, 85%, 55%, 0.25);
  border-radius: var(--ks-radius-lg);
  margin-bottom: 1.25rem;
}
.ks-plan-switch-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: hsla(28, 85%, 55%, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ks-plan-switch-icon .lucide {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ks-accent);
}
.ks-plan-switch-text strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--ks-foreground);
  margin-bottom: 0.375rem;
}
.ks-plan-switch-text p {
  font-size: 0.8125rem;
  color: var(--ks-muted-foreground);
  line-height: 1.6;
  margin: 0 0 0.25rem;
}
.ks-plan-switch-text p strong {
  display: inline;
  font-size: inherit;
  color: var(--ks-foreground);
}

/* Responsive */
@media (min-width: 640px) {
}
@media (max-width: 479px) {
  .ks-order-toggle-row { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
}

/* ==========================================================================
   Holiday / special-rates banner — used on booking-details and payment pages.
   Driven by `kidsitter.rateBanner.message` property; fragment in
   booking-rate-banner.jsp.
   ========================================================================== */
.ks-rate-banner {
  margin: 0 0 1.5rem 0;
  padding: 0.875rem 1rem;
  background: var(--ks-destructive);
  color: #fff;
  border-radius: var(--ks-radius);
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ks-rate-banner .lucide { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.0625rem; }
.ks-rate-banner-title { font-weight: 700; margin-right: 0.25rem; }
.ks-rate-banner-body { opacity: 0.95; }
@media (max-width: 480px) {
  .ks-rate-banner { flex-direction: column; align-items: flex-start; }
}

/* Two-column checkout layout for booking payment pages.
   Left = ks-checkout-form, right = ks-checkout-summary.
   Falls back to single column under 768px. */
.ks-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .ks-checkout-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }
  .ks-checkout-grid > .ks-checkout-summary { position: sticky; top: 90px; }
}
.ks-checkout-summary .ks-summary-line {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.9375rem;
}
.ks-checkout-summary .ks-summary-line strong { font-weight: 600; }
.ks-checkout-summary .ks-summary-total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.625rem;
  margin-top: 0.625rem;
  border-top: 1px solid var(--ks-border);
  font-size: 1.125rem;
  font-weight: 700;
}
.ks-checkout-summary .ks-summary-total .ks-summary-total-amount {
  color: var(--ks-primary);
}
.ks-checkout-summary .booking-table__cost del { color: var(--ks-muted-foreground); }
.ks-checkout-summary .booking-table__discount {
  display: block;
  font-size: 0.875rem;
  color: var(--ks-muted-foreground);
}
.ks-checkout-summary .booking-table__discount.orange { color: #f0793b; }

.ks-voucher-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.ks-voucher-form .voucher-code-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  height: 2.5rem;
}

.ks-saved-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: #f5f6f8;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  margin-bottom: 0.75rem;
}
.ks-saved-card .lucide { color: var(--ks-primary); }
.ks-saved-card .ks-saved-card-info { flex: 1; }
.ks-saved-card-num { font-weight: 600; }
.ks-saved-card-meta { font-size: 0.8125rem; color: var(--ks-muted-foreground); }

/* Legacy booking-payment billing-address toggle (driven by JS adding/removing
   .inactive). Used on nrm-*-booking-payment-new.jsp pages. */
.ks-checkout-page .billing-address { display: block; margin-top: 0.75rem; }
.ks-checkout-page .billing-address.inactive { display: none; }

/* --------------------------------------------------------
   Validation error messages (jquery.validate `errorClass: help-block`).
   Display red on the booking + payment pages.
   -------------------------------------------------------- */
.ks-checkout-page .help-block,
.ks-checkout-page .payment-errors,
.ks-checkout-page #accept-cancellation-policy-error,
.ks-checkout-page #accept-pricing-error,
.ks-checkout-page #code-error,
.ks-checkout-page label.error,
.ks-checkout-page span.error {
  color: #b91c1c;            /* dark red, more legible than --ks-destructive */
  font-size: 0.75rem;
  font-weight: 600;
  display: block;
  margin-top: 0.25rem;
  width: 100%;
}
.ks-checkout-page .form-group.has-error input,
.ks-checkout-page .form-group.has-error select,
.ks-checkout-page .form-group.has-error textarea {
  border-color: var(--ks-destructive);
}
.ks-checkout-page .ks-input.error,
.ks-checkout-page input.error,
.ks-checkout-page select.error,
.ks-checkout-page textarea.error {
  border-color: var(--ks-destructive);
}

/* Voucher form is flex (input + Apply button). When jquery.validate inserts
   #code-error before/after the input, force it onto its own line below the
   row so the input doesn't get squished and the button doesn't balloon. */
.ks-voucher-form { flex-wrap: wrap; }
.ks-voucher-form #code-error,
.ks-voucher-form .help-block,
.ks-voucher-form label.error {
  flex-basis: 100%;
  order: 99;
  margin-top: 0.5rem;
}

/* The dedicated #accept-*-error containers sit OUTSIDE the .ks-checkout-checkbox
   flex container in markup, so they naturally appear below the checkbox/label
   row as block elements styled by the .help-block / label.error rules above. */

/* On booking-payment pages keep the trust strip left-aligned with the
   checkbox text above it (rather than centred as on subscription checkout). */
.ks-book-page .ks-payment-trust { justify-content: flex-start; }