/* =====================================================
   CHECKOUT - CHAMOY SPORT
===================================================== */

.checkout-page-modern{
    width:min(1280px,calc(100% - 40px));
    margin:0 auto;
    padding:30px 0 58px;
}

.checkout-modern-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.checkout-modern-header h1{
    margin:0;
    color:var(--theme-text);
    font-size:clamp(2.3rem,4vw,3.5rem);
    line-height:1;
}

.checkout-modern-header>div>p:last-child{
    margin:8px 0 0;
    color:var(--theme-text-soft);
    font-size:.9rem;
}

.checkout-secure-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    padding:0 12px;
    border:1px solid rgba(34,197,94,.20);
    border-radius:999px;
    color:#86efac;
    background:rgba(34,197,94,.08);
    font-size:.76rem;
    font-weight:900;
}

.checkout-secure-pill svg{
    width:16px;
    height:16px;
}

/* LAYOUT */
.checkout-modern-layout{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(330px,.55fr);
    gap:18px;
    align-items:start;
}

.checkout-main-column{
    display:grid;
    gap:16px;
}

.checkout-card,
.checkout-summary-card,
.checkout-empty{
    border:1px solid var(--theme-border);
    border-radius:16px;
    background:var(--theme-card);
    box-shadow:var(--theme-shadow);
}

.checkout-card{
    padding:20px;
}

/* CLIENTE */
.checkout-card-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.checkout-card-icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:11px;
    color:#c4b5fd;
    background:rgba(124,58,237,.12);
}

.checkout-card-icon svg{
    width:19px;
    height:19px;
}

.checkout-card-heading h2{
    margin:0;
    color:var(--theme-text);
    font-size:1.15rem;
}

.checkout-customer-info{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.checkout-customer-info>div{
    padding:12px;
    border:1px solid var(--theme-border);
    border-radius:10px;
    background:var(--theme-card-soft);
}

.checkout-customer-info small,
.checkout-customer-info strong{
    display:block;
}

.checkout-customer-info small{
    color:var(--theme-text-soft);
    font-size:.67rem;
}

.checkout-customer-info strong{
    margin-top:3px;
    overflow:hidden;
    color:var(--theme-text);
    font-size:.8rem;
    text-overflow:ellipsis;
}

/* MÉTODOS */
.checkout-method-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:15px;
}

.checkout-method-head h2{
    margin:0;
    color:var(--theme-text);
    font-size:1.35rem;
}

.checkout-method-head>div>p:last-child{
    margin:5px 0 0;
    color:var(--theme-text-soft);
    font-size:.78rem;
}

.checkout-method-head>span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:32px;
    padding:0 10px;
    border:1px solid var(--theme-border);
    border-radius:999px;
    color:#c4b5fd;
    background:rgba(124,58,237,.08);
    font-size:.67rem;
    font-weight:900;
    white-space:nowrap;
}

.checkout-method-head>span svg{
    width:14px;
    height:14px;
}

.payment-choice-grid-modern{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.payment-choice-grid-modern .payment-choice-card{
    display:grid;
    grid-template-columns:18px 74px minmax(0,1fr) 18px;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:84px;
    padding:12px;
    text-align:left;
    border:1px solid var(--theme-border);
    border-radius:12px;
    color:var(--theme-text);
    background:var(--theme-card-soft);
    cursor:pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.payment-choice-grid-modern .payment-choice-card:hover{
    transform:translateY(-1px);
    border-color:var(--theme-border-hover);
}

.payment-choice-grid-modern .payment-choice-card.is-selected{
    border-color:#8b5cf6;
    background:rgba(124,58,237,.08);
    box-shadow:0 0 0 2px rgba(124,58,237,.08);
}

.payment-choice-check{
    width:16px;
    height:16px;
    border:2px solid var(--theme-border-hover);
    border-radius:50%;
}

.payment-choice-card.is-selected .payment-choice-check{
    border:5px solid #6d28d9;
}

.payment-choice-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    border-radius:10px;
}

.manual-brand{
    gap:5px;
}

.manual-brand em{
    display:grid;
    place-items:center;
    min-width:32px;
    height:32px;
    padding:0 7px;
    border-radius:999px;
    color:#fff;
    font-size:.65rem;
    font-style:normal;
    font-weight:900;
}

.manual-brand em:first-child{
    background:#7c3aed;
}

.manual-brand em:last-child{
    background:#0ea5e9;
}

.payment-brand-paypal{
    color:#1e40af;
    background:#eff6ff;
    font-size:.76rem;
    font-weight:900;
}

.payment-brand-culqi{
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#0891b2);
    font-size:.76rem;
    font-weight:900;
}

.payment-choice-copy{
    min-width:0;
}

.payment-choice-copy strong,
.payment-choice-copy small,
.payment-choice-copy b{
    display:block;
}

.payment-choice-copy strong{
    color:var(--theme-text);
    font-size:.86rem;
}

.payment-choice-copy small{
    margin-top:3px;
    color:var(--theme-text-soft);
    font-size:.71rem;
}

.payment-choice-copy b{
    width:max-content;
    margin-top:6px;
    padding:3px 7px;
    border-radius:999px;
    color:#86efac;
    background:rgba(34,197,94,.08);
    font-size:.6rem;
    font-weight:900;
    text-transform:uppercase;
}

.payment-choice-copy b.is-pending{
    color:#fde68a;
    background:rgba(245,158,11,.08);
}

.payment-choice-card>svg{
    width:16px;
    height:16px;
    color:var(--theme-text-muted);
}

.checkout-payment-note{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    gap:9px;
    margin-top:14px;
    padding:12px;
    border-radius:10px;
    color:var(--theme-text-soft);
    background:var(--theme-card-soft);
}

.checkout-payment-note>svg{
    width:18px;
    height:18px;
    color:#a78bfa;
}

.checkout-payment-note strong{
    display:block;
    color:var(--theme-text);
    font-size:.76rem;
}

.checkout-payment-note p{
    margin:4px 0 0;
    font-size:.72rem;
    line-height:1.5;
}

/* RESUMEN */
.checkout-summary-card{
    position:sticky;
    top:96px;
    padding:20px;
}

.checkout-summary-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.checkout-summary-heading h2{
    margin:0;
    color:var(--theme-text);
    font-size:1.25rem;
}

.checkout-summary-heading>span{
    color:var(--theme-text-muted);
    font-size:.7rem;
}

.checkout-summary-products{
    display:grid;
    gap:9px;
}

.checkout-summary-product{
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto;
    gap:9px;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid var(--theme-border);
}

.checkout-summary-image{
    display:grid;
    place-items:center;
    width:56px;
    height:46px;
    overflow:hidden;
    border:1px solid var(--theme-border);
    border-radius:8px;
    background:var(--theme-bg-soft);
}

.checkout-summary-image img{
    width:100%;
    height:100%;
    padding:3px;
    object-fit:contain;
}

.checkout-summary-product>div{
    min-width:0;
}

.checkout-summary-product>div strong{
    display:block;
    overflow:hidden;
    color:var(--theme-text);
    font-size:.74rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.checkout-summary-product small{
    display:block;
    margin-top:2px;
    color:var(--theme-text-soft);
    font-size:.63rem;
}

.checkout-summary-product>strong{
    color:var(--theme-text);
    font-size:.78rem;
    white-space:nowrap;
}

.checkout-summary-lines{
    display:grid;
    gap:10px;
    margin-top:16px;
}

.checkout-summary-lines>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.checkout-summary-lines span{
    color:var(--theme-text-soft);
    font-size:.78rem;
}

.checkout-summary-lines strong{
    color:var(--theme-text);
    font-size:.8rem;
}

.checkout-discount{
    color:#86efac !important;
}

.checkout-summary-total{
    margin-top:3px;
    padding-top:13px;
    border-top:1px solid var(--theme-border);
}

.checkout-summary-total span{
    color:var(--theme-text);
    font-weight:900;
}

.checkout-summary-total strong{
    font-size:1.4rem;
}

.checkout-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    min-height:48px;
    margin-top:17px;
}

.checkout-submit svg{
    width:16px;
    height:16px;
}

.checkout-summary-security{
    display:grid;
    gap:6px;
    margin-top:13px;
}

.checkout-summary-security span{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--theme-text-muted);
    font-size:.68rem;
}

.checkout-summary-security svg{
    width:13px;
    height:13px;
    color:#a78bfa;
}

/* VACÍO */
.checkout-empty{
    display:grid;
    place-items:center;
    min-height:380px;
    padding:30px;
    text-align:center;
}

.checkout-empty>span{
    display:grid;
    place-items:center;
    width:66px;
    height:66px;
    margin-bottom:12px;
    border-radius:18px;
    color:#c4b5fd;
    background:rgba(124,58,237,.12);
}

.checkout-empty>span svg{
    width:29px;
    height:29px;
}

.checkout-empty h2{
    margin:0;
    color:var(--theme-text);
}

.checkout-empty p{
    margin:7px 0 18px;
    color:var(--theme-text-soft);
}

/* MODAL */
.manual-payment-modal[hidden]{
    display:none !important;
}

.manual-payment-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    padding:20px;
}

.payment-modal-backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(7px);
}

.manual-payment-panel-modern{
    position:relative;
    z-index:1;
    width:min(700px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:24px;
    border:1px solid var(--theme-border);
    border-radius:18px;
    background:var(--theme-card);
    box-shadow:0 30px 80px rgba(0,0,0,.34);
}

.manual-payment-close{
    position:absolute;
    top:14px;
    right:14px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--theme-border);
    border-radius:10px;
    color:var(--theme-text-soft);
    background:var(--theme-card-soft);
    cursor:pointer;
}

.manual-payment-close svg{
    width:17px;
    height:17px;
}

.manual-payment-heading{
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:12px;
    align-items:start;
    padding-right:45px;
}

.manual-payment-heading>span{
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    border-radius:13px;
    color:#c4b5fd;
    background:rgba(124,58,237,.12);
}

.manual-payment-heading>span svg{
    width:22px;
    height:22px;
}

.manual-payment-heading h2{
    margin:0;
    color:var(--theme-text);
    font-size:1.4rem;
}

.manual-payment-heading>div>p:last-child{
    margin:6px 0 0;
    color:var(--theme-text-soft);
    font-size:.78rem;
    line-height:1.5;
}

.manual-payment-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    gap:16px;
    margin-top:20px;
}

.manual-payment-details{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.manual-payment-details>div{
    padding:10px;
    border:1px solid var(--theme-border);
    border-radius:9px;
    background:var(--theme-card-soft);
}

.manual-payment-details span,
.manual-payment-details strong{
    display:block;
}

.manual-payment-details span{
    color:var(--theme-text-soft);
    font-size:.65rem;
}

.manual-payment-details strong{
    margin-top:3px;
    color:var(--theme-text);
    font-size:.78rem;
}

.manual-payment-instructions{
    margin:12px 0 0;
    color:var(--theme-text-soft);
    font-size:.73rem;
    line-height:1.5;
}

.manual-payment-qr-area{
    display:grid;
    place-items:center;
    align-content:start;
    gap:7px;
}

.payment-qr,
.payment-qr-placeholder{
    width:160px;
    height:160px;
    border:1px solid var(--theme-border);
    border-radius:12px;
    background:var(--theme-card-soft);
}

.payment-qr{
    padding:8px;
    object-fit:contain;
}

.payment-qr-placeholder{
    display:grid;
    place-items:center;
    color:var(--theme-text-muted);
}

.payment-qr-placeholder svg{
    width:42px;
    height:42px;
}

.payment-qr-placeholder span{
    font-size:.72rem;
    font-weight:900;
}

.manual-payment-qr-area small{
    color:var(--theme-text-muted);
    font-size:.65rem;
}

.manual-proof-field-modern{
    display:grid;
    gap:7px;
    margin-top:18px;
    padding:13px;
    border:1px dashed var(--theme-border-hover);
    border-radius:11px;
    background:var(--theme-card-soft);
}

.manual-proof-field-modern>span{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--theme-text);
    font-size:.78rem;
    font-weight:800;
}

.manual-proof-field-modern svg{
    width:16px;
    height:16px;
    color:#a78bfa;
}

.manual-proof-field-modern input{
    width:100%;
    color:var(--theme-text-soft);
}

.manual-proof-field-modern small{
    color:var(--theme-text-muted);
    font-size:.65rem;
}

.manual-payment-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    min-height:48px;
    margin-top:14px;
}

/* LIGHT */
html[data-theme="light"] .checkout-card,
html[data-theme="light"] .checkout-summary-card,
html[data-theme="light"] .checkout-empty{
    box-shadow:0 16px 42px rgba(15,23,42,.07);
}

html[data-theme="light"] .checkout-customer-info>div,
html[data-theme="light"] .payment-choice-grid-modern .payment-choice-card,
html[data-theme="light"] .checkout-payment-note{
    background:#fff;
}

html[data-theme="light"] .checkout-card-icon,
html[data-theme="light"] .checkout-empty>span,
html[data-theme="light"] .manual-payment-heading>span{
    color:#5b21b6;
    background:#f3f0ff;
}

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

    .checkout-summary-card{
        position:static;
    }
}

@media(max-width:760px){
    .checkout-page-modern{
        width:min(100% - 24px,1280px);
    }

    .checkout-modern-header,
    .checkout-method-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .checkout-customer-info{
        grid-template-columns:1fr;
    }

    .manual-payment-layout{
        grid-template-columns:1fr;
    }

    .manual-payment-qr-area{
        justify-items:start;
    }
}

@media(max-width:560px){
    .checkout-page-modern{
        width:min(100% - 20px,1280px);
        padding-top:22px;
    }

    .checkout-card,
    .checkout-summary-card,
    .manual-payment-panel-modern{
        padding:18px;
    }

    .payment-choice-grid-modern .payment-choice-card{
        grid-template-columns:18px 54px minmax(0,1fr) 16px;
        gap:9px;
    }

    .payment-choice-brand{
        min-height:42px;
    }

    .manual-brand{
        flex-direction:column;
    }

    .manual-brand em{
        min-width:30px;
        height:25px;
    }

    .manual-payment-details{
        grid-template-columns:1fr;
    }

    .manual-payment-heading{
        grid-template-columns:42px minmax(0,1fr);
    }

    .manual-payment-heading>span{
        width:42px;
        height:42px;
    }
}