/**
 * @file
 * Checkout flow styling.
 *
 * Designed for clarity and trust: generous spacing, clear labels, visible
 * progress, and a calm professional palette that reassures customers
 * during the payment process.
 */


/* ==========================================================================
   Progress indicator
   ========================================================================== */

.checkout-progress {
  display: flex;
  list-style: none;
  margin: 0 0 var(--td-space-xl);
  padding: 0;
  counter-reset: checkout-step;
  gap: 0;
}

.checkout-progress--step {
  flex: 1;
  position: relative;
  text-align: center;
  padding: var(--td-space-md) var(--td-space-sm) 0;
  font-size: var(--td-font-size-sm);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-color-text-muted);
  counter-increment: checkout-step;
}

.checkout-progress--step::before {
  content: counter(checkout-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto var(--td-space-sm);
  border-radius: var(--td-radius-full);
  border: 2px solid var(--td-color-border);
  background: var(--td-color-bg);
  color: var(--td-color-text-muted);
  font-size: var(--td-font-size-base);
  font-weight: var(--td-font-weight-bold);
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* Connector line between steps */
.checkout-progress--step + .checkout-progress--step::after {
  content: "";
  position: absolute;
  top: calc(var(--td-space-md) + 18px);
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--td-color-border);
  z-index: 0;
}

/* Previous (completed) steps */
.checkout-progress--step__previous {
  color: var(--td-color-primary);
}

.checkout-progress--step__previous::before {
  background: var(--td-color-primary);
  border-color: var(--td-color-primary);
  color: var(--td-color-white);
  content: "\2713";
}

.checkout-progress--step__previous + .checkout-progress--step::after {
  background: var(--td-color-primary);
}

/* Current step */
.checkout-progress--step__current {
  color: var(--td-color-primary);
}

.checkout-progress--step__current::before {
  background: var(--td-color-primary);
  border-color: var(--td-color-primary);
  color: var(--td-color-white);
}

.checkout-progress--step__previous + .checkout-progress--step__current::after {
  background: var(--td-color-primary);
}


/* ==========================================================================
   Checkout layout — main + sidebar
   ========================================================================== */

.layout-checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--td-space-xl);
}

@media (min-width: 768px) {
  .layout-checkout-form {
    flex-direction: row;
    align-items: flex-start;
  }
}

.layout-region-checkout-main {
  flex: 1 1 auto;
  min-width: 0;
}

.layout-region-checkout-secondary {
  background: var(--td-color-bg-muted);
  border: 1px solid var(--td-color-border-light);
  border-radius: var(--td-radius-md);
  padding: var(--td-space-lg);
}

@media (min-width: 768px) {
  .layout-region-checkout-secondary {
    flex: 0 0 320px;
    position: sticky;
    top: var(--td-space-lg);
  }
}

.layout-region-checkout-secondary h3 {
  margin: 0 0 var(--td-space-md);
  font-size: var(--td-font-size-h3);
  color: var(--td-color-primary);
  padding-bottom: var(--td-space-sm);
  border-bottom: 1px solid var(--td-color-border-light);
}

/* Actions button inside the sidebar column */
.layout-region-checkout-secondary .form-actions {
  margin-top: var(--td-space-lg);
  padding-top: var(--td-space-lg);
  border-top: 1px solid var(--td-color-border-light);
}

.layout-region-checkout-secondary .form-actions .button,
.layout-region-checkout-secondary .form-actions input[type="submit"] {
  width: 100%;
}


/* ==========================================================================
   Checkout panes — card-style sections
   ========================================================================== */

.checkout-pane {
  background: var(--td-color-bg);
  border: 1px solid var(--td-color-border-light);
  border-radius: var(--td-radius-md);
  padding: var(--td-space-lg);
  margin-bottom: var(--td-space-lg);
}

.checkout-pane__title {
  font-size: var(--td-font-size-h2);
  color: var(--td-color-primary);
  margin: 0 0 var(--td-space-md);
  padding-bottom: var(--td-space-sm);
  border-bottom: 2px solid var(--td-color-primary-lightest);
}


/* ==========================================================================
   Checkout form fields — larger, easier to read/tap
   ========================================================================== */

.layout-checkout-form input[type="text"],
.layout-checkout-form input[type="email"],
.layout-checkout-form input[type="tel"],
.layout-checkout-form input[type="number"],
.layout-checkout-form input[type="password"],
.layout-checkout-form select,
.layout-checkout-form textarea {
  width: 100%;
  padding: 0.7em 0.8em;
  font-size: var(--td-font-size-base);
  font-family: var(--td-font-body);
  border: 1px solid var(--td-color-border);
  border-radius: var(--td-radius-sm);
  background-color: var(--td-color-bg);
  color: var(--td-color-text);
  transition: border-color var(--td-transition-duration) var(--td-transition-easing),
              box-shadow var(--td-transition-duration) var(--td-transition-easing);
}

.layout-checkout-form input[type="text"]:focus,
.layout-checkout-form input[type="email"]:focus,
.layout-checkout-form input[type="tel"]:focus,
.layout-checkout-form input[type="number"]:focus,
.layout-checkout-form input[type="password"]:focus,
.layout-checkout-form select:focus,
.layout-checkout-form textarea:focus {
  border-color: var(--td-color-primary);
  box-shadow: 0 0 0 3px var(--td-color-primary-lightest);
  outline: none;
}

.layout-checkout-form label {
  display: block;
  font-weight: var(--td-font-weight-bold);
  margin-bottom: 0.3em;
  color: var(--td-color-text);
  font-size: var(--td-font-size-base);
}

.layout-checkout-form .description,
.layout-checkout-form .form-item .description {
  color: var(--td-color-text-muted);
  font-size: var(--td-font-size-sm);
  margin-top: 0.3em;
}

.layout-checkout-form .form-item {
  margin-bottom: var(--td-space-md);
}


/* ==========================================================================
   Checkout buttons — prominent and clear
   ========================================================================== */

.layout-checkout-form .form-actions .button,
.layout-checkout-form .form-actions input[type="submit"] {
  font-size: var(--td-font-size-lg);
  padding: 0.75em 2em;
  border-radius: var(--td-radius-sm);
  font-weight: var(--td-font-weight-bold);
  cursor: pointer;
}

.layout-checkout-form .form-actions .button--primary,
.layout-checkout-form .form-actions input[type="submit"]:not(.button--secondary) {
  background-color: var(--td-color-primary);
  border-color: var(--td-color-primary-mid);
  color: var(--td-color-white);
}

.layout-checkout-form .form-actions .button--primary:hover,
.layout-checkout-form .form-actions input[type="submit"]:not(.button--secondary):hover {
  background-color: var(--td-color-primary-mid);
  border-color: var(--td-color-primary-dark);
}


/* ==========================================================================
   Order summary table
   ========================================================================== */

.checkout-order-summary table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--td-font-size-sm);
}

.checkout-order-summary table td {
  padding: var(--td-space-sm) 0;
  vertical-align: top;
  border-bottom: 1px solid var(--td-color-border-faint);
}

.checkout-order-summary table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: var(--td-font-weight-bold);
}

.checkout-order-summary table tr:last-child td {
  border-bottom: none;
}


/* ==========================================================================
   Trust signals
   ========================================================================== */

.checkout-trust {
  margin-top: var(--td-space-lg);
  padding-top: var(--td-space-md);
  border-top: 1px solid var(--td-color-border-light);
  font-size: var(--td-font-size-sm);
  color: var(--td-color-text-muted);
}

.checkout-trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--td-space-sm);
  margin-bottom: var(--td-space-sm);
  line-height: 1.4;
}

.checkout-trust__item:last-child {
  margin-bottom: 0;
}

.checkout-trust__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: var(--td-color-primary);
}


/* ==========================================================================
   Review step — clear summary of order details before payment
   ========================================================================== */

.checkout-pane--review .review-pane {
  margin-bottom: var(--td-space-md);
  padding: var(--td-space-md);
  background: var(--td-color-bg-muted);
  border: 1px solid var(--td-color-border-faint);
  border-radius: var(--td-radius-sm);
}

.checkout-pane--review .review-pane__label {
  font-weight: var(--td-font-weight-bold);
  color: var(--td-color-primary);
  margin-bottom: var(--td-space-xs);
}


/* ==========================================================================
   Payment details fieldset — make card fields prominent
   ========================================================================== */

.layout-checkout-form fieldset {
  border: 1px solid var(--td-color-border-light);
  border-radius: var(--td-radius-md);
  padding: var(--td-space-lg);
  margin: 0 0 var(--td-space-md);
  background: var(--td-color-bg);
}

.layout-checkout-form fieldset > legend {
  font-size: var(--td-font-size-lg);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-color-primary);
  padding: 0 var(--td-space-sm);
}


/* ==========================================================================
   Error states — clear but not alarming
   ========================================================================== */

.layout-checkout-form .form-item--error input,
.layout-checkout-form .form-item--error select,
.layout-checkout-form input.error,
.layout-checkout-form select.error {
  border-color: var(--td-color-sale);
  box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.1);
}

.layout-checkout-form .form-item--error-message {
  color: var(--td-color-sale);
  font-size: var(--td-font-size-sm);
  margin-top: 0.3em;
}


/* ==========================================================================
   3D Secure step — centre the Opayo challenge iframe and its hint text
   ========================================================================== */

.checkout-pane-opayo-pi-3ds {
  text-align: center;
}

.commerce-opayo-3d-iframe {
  display: block;
  margin: var(--td-space-lg) auto;
  max-width: 100%;
  border: 1px solid var(--td-color-border-light);
  border-radius: var(--td-radius-md);
  box-shadow: var(--td-shadow-sm);
  background: var(--td-color-bg);
}


/* ==========================================================================
   Completion page
   ========================================================================== */

.checkout-complete {
  text-align: center;
  padding: var(--td-space-2xl) var(--td-space-lg);
}

.checkout-complete__message {
  font-size: var(--td-font-size-lg);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto;
}


/* ==========================================================================
   Coupon pane in sidebar
   ========================================================================== */

.layout-region-checkout-secondary .checkout-pane {
  border: none;
  padding: 0;
  margin-bottom: 0;
  background: transparent;
}

.layout-region-checkout-secondary .checkout-pane + .checkout-pane {
  margin-top: var(--td-space-md);
  padding-top: var(--td-space-md);
  border-top: 1px solid var(--td-color-border-light);
}


/* ==========================================================================
   Responsive: tighten spacing on small screens
   ========================================================================== */

@media (max-width: 767px) {
  .checkout-progress--step {
    font-size: var(--td-font-size-xs);
    padding-top: var(--td-space-sm);
  }

  .checkout-progress--step::before {
    width: 28px;
    height: 28px;
    font-size: var(--td-font-size-sm);
  }

  .checkout-progress--step + .checkout-progress--step::after {
    top: calc(var(--td-space-sm) + 14px);
  }

  .checkout-pane {
    padding: var(--td-space-md);
  }

  .layout-region-checkout-secondary {
    padding: var(--td-space-md);
  }
}