/* Checkout (checkout/show, checkout/complete). Two steps + order summary, modeled on the OwnYourCase checkout.
   Text sizes come from frnd.css; this file sets layout, color and spacing only. */
.checkout { padding: calc(var(--header-clear, 90px) + var(--space-8)) 0 var(--space-16); background: #FFFFFF; }
.checkout__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.checkout__head h1 { margin: 0; }
.checkout__secure { margin: 0; color: #1F6B45; }
.checkout__secure i { margin-right: var(--space-1); }

/* Progress */
.checkout-progress { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0 0 var(--space-8); padding: 0; flex-wrap: wrap; }
.checkout-progress__step { display: flex; align-items: center; gap: var(--space-2); color: #767676; font-weight: 600; }
.checkout-progress__step + .checkout-progress__step::before { content: ""; width: 2.5rem; height: 1px; background: #E4DECF; margin-right: var(--space-2); }
.checkout-progress__dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #E4DECF; background: #FFFFFF; font-size: 0.8125rem; }
.checkout-progress__step.is-active { color: #262626; }
.checkout-progress__step.is-active .checkout-progress__dot { background: #1B4A63; border-color: #1B4A63; color: #FFFFFF; }
.checkout-progress__step.is-done { color: #1F6B45; }
.checkout-progress__step.is-done .checkout-progress__dot { background: #1F6B45; border-color: #1F6B45; color: #FFFFFF; }

/* Layout */
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.checkout__main { display: flex; flex-direction: column; gap: var(--space-6); }
.checkout__summary { position: sticky; top: calc(var(--header-clear, 90px) + var(--space-4)); }
@media (max-width: 61.9375em) { .checkout__grid { grid-template-columns: 1fr; } .checkout__summary { position: static; order: -1; } }

/* Panels: same frame as .card.surface */
.checkout-panel { background: #FFFFFF; border: 1px solid rgba(38, 38, 38, 0.06); border-radius: var(--bs-card-border-radius, 0.375rem);
  box-shadow: inset -1px -1px rgba(38, 38, 38, 0.1), inset 1px 1px rgba(38, 38, 38, 0.15), 0 4px 16px -8px rgba(38, 38, 38, 0.115); margin: 0; }
.checkout-panel__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid #E4DECF; background: #F4F1E8; border-radius: var(--bs-card-border-radius, 0.375rem) var(--bs-card-border-radius, 0.375rem) 0 0; }
.checkout-panel__header h2 { margin: 0; }
.checkout-panel__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #1B4A63; color: #FFFFFF; font-weight: 700; font-size: 0.875rem; }
.checkout-panel.is-complete .checkout-panel__num { background: #1F6B45; }
.checkout-panel__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

/* Fields */
.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.checkout-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.checkout-field label { font-weight: 600; }
.checkout-field .form-control.is-invalid { border-color: #B3261E; }
.checkout-field .form-control[readonly] { background: #F4F1E8; }
.checkout-field__error { margin: 0; min-height: 0; color: #B3261E; }
.checkout-field__error:empty { display: none; }
.checkout-field__hint { margin: 0; color: #505050; }
@media (max-width: 35.9375em) { .checkout-row { grid-template-columns: 1fr; } }

.checkout-btn { align-self: flex-start; margin: 0; }
.checkout-btn.is-busy { opacity: 0.65; cursor: progress; }
.checkout-payment { min-height: 3rem; }
.checkout-assurance { margin: 0; color: #505050; }

/* Order summary */
.checkout-summary__plan { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); background: #1B4A63; border-radius: var(--bs-card-border-radius, 0.375rem) var(--bs-card-border-radius, 0.375rem) 0 0; }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .checkout-summary__plan p { color: #FFFFFF; margin: 0; }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .checkout-summary__plan .checkout-summary__name { font-family: var(--heading-font); font-size: var(--heading-size); font-weight: 700; }
.checkout-summary__change { color: #FFFFFF; text-decoration: underline; white-space: nowrap; }
.checkout-summary__change:hover { color: #FFFFFF; }
.checkout-summary__items { padding: var(--space-6); border-bottom: 1px solid #E4DECF; }
.checkout-summary__label { margin: 0 0 var(--space-3); font-weight: 600; }
.checkout-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.checkout-features li { position: relative; padding-left: 1.75rem; }
.checkout-features li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: #1F6B45; }
.checkout-summary__totals { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.checkout-summary__line { display: flex; justify-content: space-between; gap: var(--space-4); }
.checkout-summary__line--total { padding-top: var(--space-3); border-top: 1px solid #E4DECF; font-weight: 700; font-size: 1.125rem; }
.checkout-summary__note { margin: 0; color: #505050; }

/* Confirmation */
.checkout-confirm { max-width: 40rem; margin: 0 auto; text-align: center; }
.checkout-confirm .checkout-panel__body { align-items: center; padding: var(--space-12) var(--space-8); }
.checkout-confirm h1 { margin: 0; }
.checkout-confirm p { margin: 0; }
.checkout-confirm .thm-btn { margin: 0; }
.checkout-confirm__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #E8F2F8; color: #1B4A63; font-size: 1.75rem; }
.checkout-confirm__icon--ok { background: #E6F4EC; color: #1F6B45; }
.checkout-confirm__icon--warn { background: #FDECEA; color: #B3261E; }

/* Preview mode (Stripe keys not set yet) */
.checkout-payment--preview { display: flex; flex-direction: column; gap: var(--space-4); }
.checkout-payment--preview .form-control:disabled, .checkout-payment--preview .form-select:disabled { background: #F4F1E8; cursor: not-allowed; }
#btn-checkout-pay:disabled { opacity: 0.6; cursor: not-allowed; }

/* Enhance Your Order (Public Markers add-on) */
.checkout-bump { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid #E4DECF; display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-bump__heading { margin: 0; font-weight: 700; }
.checkout-bump__box { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 2px dashed #1B4A63; border-radius: var(--bs-card-border-radius, 0.375rem); background: #E8F2F8; cursor: pointer; }
.checkout-bump__box:has(.checkout-bump__check:checked) { border-style: solid; background: #E6F4EC; border-color: #1F6B45; }
.checkout-bump__check { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: #1F6B45; }
.checkout-bump__content { display: flex; flex-direction: column; gap: var(--space-1); }
.checkout-bump__title { font-weight: 700; color: #262626; }
.checkout-bump__desc { color: #484136; }
.checkout-testmode { margin: 0; color: #645C50; font-style: italic; }
.checkout-payment--preview .form-control.is-invalid { border-color: #B3261E; }
.checkout-payment--preview .form-control:not(:disabled), .checkout-payment--preview .form-select:not(:disabled) { background: #FFFFFF; cursor: text; }