/**
 * PTP Checkout — Amazon-Style Override v304.1.1
 * Loaded AFTER existing checkout CSS. Transforms to clean Amazon UX.
 */

/* ═══ 1. TOKENS ═══ */
:root {
    --amz-bg: #ffffff;
    --amz-bg-soft: #f7f8fa;
    --amz-border: #d5d9d9;
    --amz-border-strong: #888c8c;
    --amz-text: #0f1111;
    --amz-text-muted: #565959;
    --amz-link: #007185;
    --amz-link-hover: #c7511f;
    --amz-cta: #FCB900;
    --amz-cta-hover: #E5A800;
    --amz-cta-border: #d49a00;
    --amz-price: #b12704;
    --amz-success: #007600;
    --amz-radius: 8px;
    --amz-shadow: 0 2px 5px rgba(15,17,17,.15);
}

/* ═══ 2. PAGE BASE ═══ */
/* Only style the form area — sidebar keeps its own dark theme */
body.ptp-checkout-page,
.checkout-page {
    background: var(--amz-bg-soft) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.checkout-main {
    color: var(--amz-text) !important;
}
/* ═══ 3. SIDEBAR — keep original dark theme, don't override text colors ═══ */
/* The sidebar uses background:var(--black) + color:var(--white) from ptp-checkout-inline.css */
/* We only make it sticky and override the total from gold to white */

.checkout-sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
}

/* Total amount — white bold on dark bg, not gold */
.checkout-sidebar .order-line.total .order-amount,
.checkout-sidebar #orderTotal {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 22px !important;
}

/* Keep all other sidebar text as-is from inline CSS (white on black) */
/* Do NOT override .order-item-name, .order-item-meta, .order-line etc. */

/* ═══ 4. STEP CARDS ═══ */
.form-section,
.checkout-section,
.accordion-card {
    background: var(--amz-bg) !important;
    border: 1px solid var(--amz-border) !important;
    border-radius: var(--amz-radius) !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.section-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: background .1s;
}
.section-header:hover {
    background: rgba(0,0,0,.01);
}
.section-body {
    padding: 0 20px 20px !important;
}

/* Step numbers — clean gray circles, active = dark */
.section-number {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: #f0f2f2 !important;
    color: var(--amz-text) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--amz-border) !important;
}
.section-body.open ~ .section-header .section-number,
.form-section.active .section-number {
    background: var(--amz-text) !important;
    color: #fff !important;
    border-color: var(--amz-text) !important;
}

/* Step titles — sentence case */
.section-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--amz-text) !important;
}
.section-summary {
    font-size: 13px !important;
    color: var(--amz-text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

/* ═══ 5. CTA BUTTONS — Amazon pill ═══ */
.submit-btn,
button[type="submit"],
.rv-continue,
.btn-primary,
.continue-btn {
    background: var(--amz-cta) !important;
    border: 1px solid var(--amz-cta-border) !important;
    border-radius: 100px !important;
    color: #0f1111 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    padding: 11px 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 5px rgba(213,217,217,.5) !important;
    transition: background .15s !important;
    cursor: pointer !important;
}
.submit-btn:hover,
button[type="submit"]:hover,
.rv-continue:hover {
    background: var(--amz-cta-hover) !important;
}

/* Main payment button — wider */
#submitBtn,
.submit-btn {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
}

/* ═══ 6. MOBILE BOTTOM BAR — Amazon style ═══ */
@media (max-width: 991px) {
    .mobile-summary {
        border-top: 1px solid var(--amz-border) !important;
        background: var(--amz-bg) !important;
        padding: 10px 14px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -1px 0 rgba(0,0,0,.04) !important;
    }
    .mobile-summary-btn {
        background: var(--amz-cta) !important;
        color: #0f1111 !important;
        border-radius: 100px !important;
        padding: 10px 18px !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        border: 1px solid var(--amz-cta-border) !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-family: inherit !important;
    }
    .mobile-summary-total {
        font-weight: 700 !important;
        color: var(--amz-text) !important;
    }
}

/* ═══ 7. ORDER SUMMARY — keep dark sidebar, style form totals only ═══ */
/* The sidebar is dark-themed — only override totals in the FORM area (.rv-totals) */

/* Summary heading — only in form area */
.rv-summary-title,
.rv-summary .rv-summary-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--amz-text) !important;
}

/* Line items — form area only (sidebar keeps its dark theme) */
.rv-line {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--amz-border) !important;
    font-size: 14px !important;
}

.rv-line-name {
    color: var(--amz-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.rv-line-price {
    font-weight: 700 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    color: var(--amz-text) !important;
}

/* Totals — form area (.rv-totals) only */
.rv-totals-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    padding: 4px 0 !important;
}

/* Form area total — dark bold (not red, not gold) */
.rv-totals-row.grand,
.rv-totals-row.grand span {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--amz-text) !important;
}
/* Sidebar total stays gold on dark bg — handled above in section 3 */

/* Discount lines — form area */
.rv-totals-row.save,
.rv-totals-row .discount {
    color: var(--amz-success) !important;
}

/* Processing fee — form area */
.rv-totals-row .fee-info {
    color: var(--amz-text-muted) !important;
    font-size: 13px !important;
}

/* Review section totals */
.rv-totals-row {
    font-size: 14px !important;
}
.rv-totals-row.grand,
.rv-totals-row.grand span {
    font-size: 18px !important;
    color: var(--amz-text) !important;
    font-weight: 700 !important;
}
.rv-totals-row.save,
.rv-totals-row .discount {
    color: var(--amz-success) !important;
}

/* ═══ 8. FORM INPUTS — Amazon style ═══ */
.checkout-main input[type="text"],
.checkout-main input[type="tel"],
.checkout-main input[type="date"],
.checkout-main input[type="email"],
.checkout-main input[type="number"],
.checkout-main select,
.checkout-main textarea,
.field-input,
.f-input,
.f-select {
    width: 100% !important;
    border: 1px solid var(--amz-border-strong) !important;
    border-radius: 3px !important;
    padding: 8px 10px !important;
    font-size: 15px !important;
    background: linear-gradient(#f7f8fa, #fff) !important;
    box-shadow: inset 0 1px 2px rgba(15,17,17,.08) !important;
    color: var(--amz-text) !important;
    box-sizing: border-box !important;
}
.checkout-main input:focus,
.checkout-main select:focus,
.checkout-main textarea:focus,
.field-input:focus,
.f-input:focus {
    outline: none !important;
    border-color: #e77600 !important;
    box-shadow: 0 0 3px 2px rgba(228,121,17,.5) !important;
}
.checkout-main label,
.field-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--amz-text) !important;
    margin-bottom: 4px !important;
    display: block !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

@media (max-width: 991px) {
    .checkout-main input,
    .checkout-main select,
    .checkout-main textarea,
    .field-input,
    .f-input {
        font-size: 16px !important;
    }
}

/* ═══ 9. UPSELL SECTIONS — clean, not heavy ═══ */
.rv-upsell-h {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--amz-text) !important;
}
.rv-upsell-h svg {
    color: var(--amz-cta) !important;
}
.rv-save-tag {
    background: rgba(0,118,0,.08) !important;
    color: var(--amz-success) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.ptp-add-week {
    border: 1px solid var(--amz-border) !important;
    border-radius: var(--amz-radius) !important;
    background: var(--amz-bg) !important;
}
.ptp-add-week:hover {
    border-color: var(--amz-link) !important;
}
.ptp-add-week-btn {
    background: var(--amz-cta) !important;
    color: #0f1111 !important;
    border: 1px solid var(--amz-cta-border) !important;
    border-radius: 100px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
}
.ptp-add-week-name {
    color: var(--amz-link) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Trainer upsell cards */
.rv-trainer {
    border: 1px solid var(--amz-border) !important;
    border-radius: var(--amz-radius) !important;
}
.rv-trainer:hover {
    border-color: var(--amz-link) !important;
}
.rv-trainer-add {
    background: var(--amz-cta) !important;
    color: #0f1111 !important;
    border-radius: 100px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
}

/* ═══ 10. TRUST BADGES ═══ */
.trust-badges {
    border-top: 1px solid var(--amz-border) !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
}
.trust-badge {
    color: var(--amz-text-muted) !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ═══ 11. WAIVER ═══ */
.waiver-box {
    border: 1px solid var(--amz-border) !important;
    border-radius: var(--amz-radius) !important;
    background: var(--amz-bg) !important;
}
.waiver-check label {
    font-size: 14px !important;
    color: var(--amz-text) !important;
}

/* ═══ 12. EXPRESS CHECKOUT ═══ */
#express-buttons {
    border: 1px solid var(--amz-border) !important;
    border-radius: var(--amz-radius) !important;
    padding: 14px !important;
    background: var(--amz-bg) !important;
    margin-bottom: 16px !important;
}

/* ═══ 13. PROGRESS STEPPER ═══ */
.progress-stepper,
.checkout-steps {
    background: var(--amz-bg) !important;
    border-bottom: 1px solid var(--amz-border) !important;
    padding: 10px 16px !important;
}

/* ═══ 14. REMOVE ITEM — teal link ═══ */
.remove-item-btn,
.cart-remove,
button[onclick*="Remove"] {
    color: var(--amz-link) !important;
    background: none !important;
    border: none !important;
    font-size: 12px !important;
    text-transform: none !important;
    cursor: pointer !important;
}
.remove-item-btn:hover,
.cart-remove:hover {
    color: var(--amz-link-hover) !important;
    text-decoration: underline !important;
}

/* ═══ 15. COUPON/PROMO SECTION ═══ */
.coupon-section,
.promo-row,
.discount-input-row {
    background: var(--amz-bg) !important;
    border: 1px solid var(--amz-border) !important;
    border-radius: var(--amz-radius) !important;
    padding: 12px !important;
}
.coupon-apply-btn,
.promo-apply-btn {
    background: #f0f2f2 !important;
    border: 1px solid var(--amz-border) !important;
    border-radius: var(--amz-radius) !important;
    color: var(--amz-text) !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    cursor: pointer !important;
}
.coupon-apply-btn:hover {
    background: #e3e6e6 !important;
}

/* ═══ 16. MOBILE COMPACT ═══ */
@media (max-width: 600px) {
    /* Match the existing checkout-inline breakpoint */
    .form-section {
        margin-bottom: 8px !important;
        border-radius: 6px !important;
    }
    .section-header {
        padding: 14px 14px !important;
    }
    .section-body {
        padding: 0 14px 16px !important;
    }
    .section-title {
        font-size: 15px !important;
    }
}

@media (max-width: 991px) {
    /* Upsells — horizontal scroll on mobile */
    .rv-trainer-grid {
        display: flex !important;
        overflow-x: auto !important;
        gap: 10px !important;
        scroll-snap-type: x mandatory !important;
        padding-bottom: 8px !important;
    }
    .rv-trainer-grid > * {
        flex: 0 0 85% !important;
        scroll-snap-align: start !important;
    }
}

/* ═══ 17. HEADER — clean secure bar ═══ */
.checkout-header,
.ptp-checkout-header {
    background: var(--amz-bg) !important;
    border-bottom: 1px solid var(--amz-border) !important;
    box-shadow: none !important;
}

/* ═══ 18. ERROR MESSAGES ═══ */
#paymentError,
.error-message,
.checkout-error {
    background: #fff5f5 !important;
    border: 1px solid #fecaca !important;
    border-radius: var(--amz-radius) !important;
    color: #991b1b !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}

/* ═══ 19. FREE SESSION BANNER ═══ */
.free-session-banner,
.bundle-banner {
    background: var(--amz-bg) !important;
    border: 1px solid var(--amz-border) !important;
    border-radius: var(--amz-radius) !important;
    color: var(--amz-text) !important;
}

/* ═══ 20. CHECKOUT UX REVIEW FIXES ═══ */

/* Stepper: completed=green, current=yellow, upcoming=gray */
.step-indicator.completed,
.progress-step.completed {
    color: var(--amz-success) !important;
}
.step-indicator.completed .step-circle,
.progress-step.completed .step-circle {
    background: var(--amz-success) !important;
    border-color: var(--amz-success) !important;
    color: #fff !important;
}
.step-indicator.active .step-circle,
.progress-step.active .step-circle {
    background: var(--amz-cta) !important;
    border-color: var(--amz-cta-border) !important;
    color: var(--amz-text) !important;
}
.step-connector.completed {
    background: var(--amz-success) !important;
}
.step-connector {
    background: var(--amz-border) !important;
}

/* Total: NOT red or gold — use bold dark text (form area only) */
.rv-total-val,
.review-total,
.summary-total-amount {
    color: var(--amz-text) !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}
/* Sidebar total stays gold — don't override .order-line.total .order-amount */

/* Sticky footer: solid white bg with border, not floating */
.mobile-sticky-bar,
.sticky-bottom-bar {
    background: var(--amz-bg) !important;
    border-top: 1px solid var(--amz-border) !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important;
    padding: 10px 16px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Hide native scrollbar on trainer carousel, use snap */
.rv-trainer-grid::-webkit-scrollbar,
.upsell-scroll::-webkit-scrollbar {
    display: none !important;
}
.rv-trainer-grid,
.upsell-scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-snap-type: x mandatory !important;
}
.rv-trainer-grid > *,
.upsell-scroll > * {
    scroll-snap-align: start !important;
}

/* Camp titles in upsells — NOT link-blue, dark text */
.ptp-add-week-name {
    color: var(--amz-text) !important;
}

/* Express checkout buttons — constrained width */
.express-btn,
.gpay-button,
.link-button {
    max-width: 320px !important;
    margin: 4px auto !important;
}

/* Back arrow + "Secure" lock — higher contrast */
.checkout-back-btn,
.secure-badge {
    color: var(--amz-text-muted) !important;
    opacity: 1 !important;
}
.secure-badge svg,
.secure-badge .lock-icon {
    color: var(--amz-success) !important;
}

/* Discount line — label the discount */
.rv-totals-row.discount::after,
.discount-line::after {
    content: '' !important;
}

/* Focus visible states */
.checkout-main button:focus-visible,
.checkout-main input:focus-visible,
.checkout-main select:focus-visible,
.checkout-main a:focus-visible {
    outline: 2px solid var(--amz-cta) !important;
    outline-offset: 2px !important;
}

/* Prevent double-submit: disabled state */
.submit-btn:disabled,
button[type="submit"]:disabled {
    background: #e3e6e6 !important;
    color: #888 !important;
    cursor: not-allowed !important;
    border-color: var(--amz-border) !important;
}