/* ===== CHECKOUT WALKTHROUGH (checkout.html) =====
   Tesla-style configurator layout: steps on the left, sticky live order
   summary on the right; Domino's-style progress tracker up top.
   Uses the global design tokens from css/styles.css. */

.checkout-page {
    /* Accessible muted text: the sitewide --medium-gray (#6c757d) only reaches
       ~3.7:1 on this page's dark card backgrounds (#141414/#1a1a1a) — below
       WCAG AA (4.5:1). Every var(--medium-gray) use in this file inherits this
       lighter shade (~6:1). Guarded by the contrast audit in
       tests/persona-review.spec.js — don't darken without re-running it. */
    --medium-gray: #9aa1a7;
    background: var(--bg-dark, #0f0f0f);
    padding: 3rem 0 5rem;
    min-height: 70vh;
}

.checkout-header {
    text-align: center;
    margin-bottom: 2rem;
}

.checkout-header h1 {
    color: var(--white, #fff);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.checkout-sub {
    color: var(--medium-gray, #6c757d);
    font-size: 1.05rem;
}

/* ---- Step tracker ---- */
.checkout-tracker {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    flex-wrap: wrap;
}

.checkout-tracker li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    color: var(--medium-gray, #6c757d);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    border: 1px solid transparent;
    white-space: nowrap;
}

.checkout-tracker li .tracker-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.checkout-tracker li.active {
    color: var(--white, #fff);
    border-color: var(--primary-color, #e01f26);
    background: rgba(224, 31, 38, 0.12);
}

.checkout-tracker li.done {
    color: #7ddb8a;
    cursor: pointer;
}

.checkout-tracker li.done .tracker-index {
    border-color: #7ddb8a;
}

/* ---- Layout ---- */
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2rem;
    align-items: start;
}

.checkout-steps {
    min-width: 0;
}

.checkout-loading {
    text-align: center;
    color: var(--medium-gray, #6c757d);
    padding: 4rem 1rem;
}

.checkout-loading i {
    font-size: 2rem;
    color: var(--primary-color, #e01f26);
    margin-bottom: 1rem;
}

/* ---- Step cards ---- */
.step-panel {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 2rem;
    animation: stepIn 0.25s ease-out;
}

@keyframes stepIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-panel h2 {
    color: var(--white, #fff);
    font-size: 1.5rem;
    margin: 0 0 0.35rem;
}

.step-panel .step-lead {
    color: var(--medium-gray, #6c757d);
    margin-bottom: 1.5rem;
}

/* Location-page embed: the gym is fixed, so a line replaces the picker. */
.step-panel .locked-location {
    color: var(--light-gray, #e9ecef);
    background: rgba(224, 31, 38, 0.08);
    border: 1px solid rgba(224, 31, 38, 0.35);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: -0.5rem 0 1.5rem;
    font-size: 0.95rem;
}

.step-panel .locked-location i { color: var(--primary-color, #e01f26); margin-right: 0.35rem; }
.step-panel .locked-location a { color: #ffb3b1; }

/* Option cards (location, plan, term, add-ons, payment method) */
.option-grid {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.option-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.option-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.option-card {
    position: relative;
    text-align: left;
    background: #141414;
    border: 1.5px solid #2e2e2e;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    color: var(--white, #fff);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    font: inherit;
    width: 100%;
}

.option-card:hover {
    border-color: #555;
    transform: translateY(-1px);
}

.option-card.selected {
    border-color: var(--primary-color, #e01f26);
    box-shadow: 0 0 0 2px rgba(224, 31, 38, 0.25);
}

.option-card.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    color: var(--primary-color, #e01f26);
    font-size: 0.85rem;
}

.option-card .option-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.option-card .option-meta {
    color: var(--medium-gray, #6c757d);
    font-size: 0.85rem;
    line-height: 1.4;
}

.option-card .option-price {
    color: var(--white, #fff);
    font-weight: 800;
    font-size: 1.15rem;
    margin-top: 0.4rem;
}

.option-card .option-price small {
    color: var(--medium-gray, #6c757d);
    font-weight: 500;
}

.option-card ul.option-features {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    color: #bdbdbd;
    font-size: 0.83rem;
}

.option-card ul.option-features li {
    padding-left: 1.1rem;
    position: relative;
    margin-bottom: 0.25rem;
}

.option-card ul.option-features li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--primary-color, #e01f26);
    font-size: 0.7rem;
    top: 0.2rem;
}

.option-badge {
    background: var(--primary-color, #e01f26);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.option-badge.badge-save {
    background: #1f7a2d;
}

.option-card.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---- Forms ---- */
.checkout-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkout-form .form-group {
    margin-bottom: 1.1rem;
    min-width: 0;
}

.checkout-form label {
    display: block;
    color: #cfcfcf;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.checkout-form label .optional {
    color: var(--medium-gray, #6c757d);
    font-weight: 400;
}

.checkout-form input,
.checkout-form select {
    width: 100%;
    background: #101010;
    border: 1.5px solid #2e2e2e;
    border-radius: 8px;
    color: var(--white, #fff);
    padding: 0.75rem 0.9rem;
    font-size: 1rem;
    transition: border-color 0.15s;
}

.checkout-form input:focus,
.checkout-form select:focus {
    outline: none;
    border-color: var(--primary-color, #e01f26);
}

.checkout-form input.invalid,
.checkout-form select.invalid {
    border-color: #d9534f;
}

.field-hint {
    font-size: 0.78rem;
    color: var(--medium-gray, #6c757d);
    margin-top: 0.3rem;
}

.field-error {
    font-size: 0.8rem;
    color: #ff6b6b;
    margin-top: 0.3rem;
}

.field-ok {
    font-size: 0.8rem;
    color: #7ddb8a;
    margin-top: 0.3rem;
}

/* Google Places address suggestions (progressive enhancement on #co-address) */
.checkout-form .form-group.has-address-suggestions {
    position: relative;
}

.address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    margin-top: 4px;
    background: #161616;
    border: 1.5px solid #2e2e2e;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.address-suggestion {
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    color: var(--white, #fff);
    cursor: pointer;
}

.address-suggestion:hover,
.address-suggestion.active {
    background: rgba(224, 31, 38, 0.18);
}

.address-suggestions-attribution {
    padding: 0.35rem 0.9rem;
    font-size: 0.7rem;
    color: var(--medium-gray, #6c757d);
    text-align: right;
    border-top: 1px solid #242424;
}

/* Paysafe hosted fields render into these shells. Deliberately light, unlike
   our dark inputs: the browser paints its own autofill/preview colors (near-
   black text, pale fill) inside the hosted iframe and nothing on our side can
   restyle those states, so the shell must be light to stay readable in all of
   them. Keep in sync with the input color in js/checkout.js setupPaysafeFields. */
.paysafe-field {
    background: #ffffff;
    border: 1.5px solid #2e2e2e;
    border-radius: 8px;
    height: 46px;
    padding: 0 0.9rem;
}

.paysafe-field:focus-within {
    border-color: var(--primary-color, #e01f26);
}

/* ---- Agreement ---- */
.agreement-box {
    background: #101010;
    border: 1px solid #2e2e2e;
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 1.25rem;
    color: #c9c9c9;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    white-space: pre-wrap;
}

/* Structured agreement rendering (renderAgreementText) */
.agreement-box.formatted {
    white-space: normal;
}

.agreement-heading {
    font-weight: 700;
    color: #f0f0f0;
    margin: 1.1rem 0 0.4rem;
}

.agreement-heading:first-child {
    margin-top: 0;
}

.agreement-para {
    margin: 0 0 0.6rem;
}

.agreement-bullet {
    position: relative;
    padding-left: 1.1rem;
    margin: 0 0 0.35rem;
}

.agreement-bullet::before {
    content: '\2022';
    position: absolute;
    left: 0.15rem;
    color: var(--primary-color, #e01f26);
}

hr.agreement-divider {
    border: 0;
    border-top: 1px solid #2a2a2a;
    margin: 1.1rem 0;
}

.agreement-check {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    color: #e5e5e5;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 1.5rem;
}

.agreement-check input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--primary-color, #e01f26);
    flex-shrink: 0;
}

/* ---- Step nav buttons ---- */
.step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.btn-step-back {
    background: none;
    border: none;
    color: var(--medium-gray, #6c757d);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.6rem 0.4rem;
    font-weight: 600;
}

.btn-step-back:hover { color: var(--white, #fff); }

.btn-step-next {
    background: var(--primary-color, #e01f26);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.95rem 2.2rem;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: background 0.15s, transform 0.15s;
}

.btn-step-next:hover:not(:disabled) {
    background: var(--primary-hover, #c01a20);
    transform: translateY(-1px);
}

.btn-step-next:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Order summary rail ---- */
.checkout-summary {
    position: sticky;
    top: 100px;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 1.5rem;
}

.checkout-summary h3 {
    color: var(--white, #fff);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1.1rem;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #cfcfcf;
    font-size: 0.92rem;
    padding: 0.4rem 0;
}

.summary-line .summary-label small {
    display: block;
    color: var(--medium-gray, #6c757d);
    font-size: 0.78rem;
}

.summary-line.muted { color: var(--medium-gray, #6c757d); }

.summary-divider {
    border: none;
    border-top: 1px solid #2e2e2e;
    margin: 0.8rem 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--white, #fff);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.3rem 0;
}

.summary-total .amount {
    font-size: 1.6rem;
    color: var(--primary-color, #e01f26);
}

.summary-recurring {
    color: var(--medium-gray, #6c757d);
    font-size: 0.85rem;
    text-align: right;
}

.summary-note {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--medium-gray, #6c757d);
    line-height: 1.5;
}

.summary-secure {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    color: #9a9a9a;
    font-size: 0.8rem;
}

.summary-secure i { color: #7ddb8a; }

.summary-breakdown {
    color: var(--medium-gray, #6c757d);
    font-size: 0.8rem;
    text-align: right;
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* ---- Discount code (summary rail) ---- */
.summary-promo {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed #2e2e2e;
}

.summary-line s,
.option-price s {
    color: var(--medium-gray, #6c757d);
    font-weight: 400;
    margin-right: 0.25rem;
}

.promo-open {
    background: none;
    border: none;
    padding: 0;
    color: #cfcfcf;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.promo-open:hover,
.promo-open:focus-visible { color: var(--white, #fff); }

.promo-label {
    display: block;
    color: #9a9a9a;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.promo-row {
    display: flex;
    gap: 0.5rem;
}

.promo-input {
    flex: 1;
    min-width: 0;
    background: #101010;
    border: 1px solid #333;
    border-radius: 8px;
    color: var(--white, #fff);
    font: inherit;
    font-size: 0.95rem;
    padding: 0.55rem 0.7rem;
    text-transform: uppercase;
}

.promo-input:focus {
    outline: none;
    border-color: var(--primary-color, #e01f26);
}

.promo-apply {
    background: transparent;
    border: 1px solid #555;
    border-radius: 8px;
    color: var(--white, #fff);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
}

.promo-apply:hover:not(:disabled) { border-color: var(--white, #fff); }
.promo-apply:disabled,
.promo-input:disabled { opacity: 0.6; cursor: default; }

.promo-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #101010;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    color: var(--white, #fff);
    font-size: 0.9rem;
}

.promo-chip i { color: var(--primary-color, #e01f26); }
.promo-chip .promo-code { flex: 1; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }

.promo-remove {
    background: none;
    border: none;
    padding: 0;
    color: #9a9a9a;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.promo-remove:hover { color: var(--white, #fff); }

.promo-note {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    margin-top: 0.55rem;
    color: #cfcfcf;
    font-size: 0.8rem;
    line-height: 1.45;
}

.promo-note i { margin-top: 0.15rem; flex-shrink: 0; }
.promo-note.ok i { color: #7ddb8a; }
.promo-note.warn { color: #e6c46a; }
.promo-note.error { color: #ff8a8a; }

/* "What happens after you join" strip on the payment step */
.after-join {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #2e2e2e;
}

.after-join h3 {
    color: #cfcfcf;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.8rem;
}

.after-join ul {
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0;
}

.after-join li {
    color: #bdbdbd;
    font-size: 0.9rem;
    padding-left: 1.7rem;
    position: relative;
    margin-bottom: 0.55rem;
    line-height: 1.5;
}

.after-join li i {
    position: absolute;
    left: 0;
    top: 0.25rem;
    color: var(--primary-color, #e01f26);
    font-size: 0.85rem;
}

/* ---- Confirmation ---- */
.confirmation-panel {
    text-align: center;
    padding: 3rem 2rem;
}

.confirmation-panel .confirm-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(31, 122, 45, 0.18);
    color: #7ddb8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

.confirmation-panel h2 { font-size: 1.9rem; }

.confirmation-next {
    text-align: left;
    max-width: 460px;
    margin: 1.75rem auto 0;
    color: #cfcfcf;
}

.confirmation-next li {
    margin-bottom: 0.7rem;
    list-style: none;
    padding-left: 1.8rem;
    position: relative;
}

.confirmation-next li i {
    position: absolute;
    left: 0;
    top: 0.2rem;
    color: var(--primary-color, #e01f26);
}

/* ---- Errors ---- */
.checkout-error {
    background: rgba(217, 83, 79, 0.12);
    border: 1px solid rgba(217, 83, 79, 0.5);
    color: #ffb3b1;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    font-size: 0.92rem;
    margin-bottom: 1.2rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.checkout-help {
    text-align: center;
    color: var(--medium-gray, #6c757d);
    margin-top: 2.5rem;
    font-size: 0.92rem;
}

.checkout-help a {
    color: var(--white, #fff);
    text-decoration: underline;
}

/* ---- Mobile ---- */
@media (max-width: 992px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    /* Summary becomes a compact bar pinned under the steps */
    .checkout-summary {
        position: static;
        order: -1;
        padding: 1.1rem 1.25rem;
    }

    .checkout-summary .summary-line,
    .checkout-summary .summary-note,
    .checkout-summary .summary-secure,
    .checkout-summary .summary-promo,
    .checkout-summary .summary-divider {
        display: none;
    }

    .checkout-summary.expanded .summary-promo,
    .checkout-summary.has-promo .summary-promo {
        display: block;
    }

    .checkout-summary.expanded .summary-line,
    .checkout-summary.expanded .summary-note,
    .checkout-summary.expanded .summary-secure,
    .checkout-summary.expanded .summary-divider {
        display: flex;
    }

    .checkout-summary.expanded .summary-note { display: block; }
    .checkout-summary.expanded .summary-divider { display: block; }

    .summary-toggle {
        display: inline-flex !important;
    }

    .option-grid.cols-2,
    .option-grid.cols-3 {
        grid-template-columns: 1fr;
    }

    .checkout-form .form-row {
        grid-template-columns: 1fr;
    }

    .step-panel { padding: 1.4rem; }

    .checkout-tracker li span.tracker-label { display: none; }
    .checkout-tracker li.active span.tracker-label { display: inline; }
}

.summary-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--medium-gray, #6c757d);
    font-size: 0.85rem;
    cursor: pointer;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    margin-top: 0.4rem;
}

/* Billing address block on the payment step (moved off "Your Info": it is
   only collected because the Paysafe vault needs a street address). */
.billing-address {
    margin: 1.25rem 0 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.billing-address h3 {
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 0.85rem;
}