/* =========================================================
   NEXORAHOST — PANIER / CHECKOUT PREMIUM V1
   Interface uniquement.
   ========================================================= */

:root{
    --nx-commerce-bg:#090d16;
    --nx-commerce-panel:#101622;
    --nx-commerce-panel-2:#131a27;
    --nx-commerce-line:#273246;
    --nx-commerce-line-soft:rgba(148,163,184,.13);
    --nx-commerce-text:#f7f8fc;
    --nx-commerce-muted:#8290ab;
    --nx-commerce-purple:#8c63ff;
    --nx-commerce-purple-2:#a77cff;
    --nx-commerce-green:#4ade80;
    --nx-commerce-green-bg:rgba(74,222,128,.10);
    --nx-commerce-red:#fb7185;
    --nx-commerce-radius:18px;
}


/* ---------- PAGE ---------- */

body.nx-commerce-page{
    background:
        radial-gradient(
            circle at 45% -10%,
            rgba(124,86,255,.09),
            transparent 34%
        ),
        #090d16;
}

body.nx-commerce-page main{
    min-height:70vh;
}

#nxCartContent,
#nxCheckoutContent{
    width:100%;
}


/* ---------- PROGRESSION ---------- */

.nx-commerce-progress{
    display:flex;
    align-items:center;
    margin:22px 0 26px;
    padding:16px 18px;

    border:1px solid var(--nx-commerce-line-soft);
    border-radius:16px;

    background:
        linear-gradient(
            180deg,
            rgba(18,24,37,.93),
            rgba(13,18,29,.93)
        );
}

.nx-commerce-step{
    display:flex;
    align-items:center;
    gap:11px;
    flex:0 0 auto;
}

.nx-commerce-step-number{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border-radius:10px;
    border:1px solid #303b50;

    background:#111827;
    color:#7f8aa2;

    font-size:12px;
    font-weight:800;

    transition:.2s ease;
}

.nx-commerce-step-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.nx-commerce-step-copy strong{
    color:#c5cddd;
    font-size:12px;
    font-weight:800;
}

.nx-commerce-step-copy span{
    color:#68758d;
    font-size:10px;
}

.nx-commerce-step.is-active
.nx-commerce-step-number{
    color:#fff;
    border-color:rgba(140,99,255,.7);
    background:
        linear-gradient(
            135deg,
            #7448ed,
            #9a72ff
        );

    box-shadow:
        0 0 0 4px rgba(140,99,255,.08);
}

.nx-commerce-step.is-active
.nx-commerce-step-copy strong{
    color:#fff;
}

.nx-commerce-step.is-done
.nx-commerce-step-number{
    color:#65e89a;
    border-color:rgba(74,222,128,.30);
    background:rgba(74,222,128,.08);
}

.nx-commerce-progress-line{
    height:1px;
    flex:1;
    min-width:30px;
    margin:0 18px;

    background:
        linear-gradient(
            90deg,
            rgba(140,99,255,.45),
            rgba(77,89,112,.35)
        );
}


/* =========================================================
   PANIER
   ========================================================= */

.nxcart-layout{
    display:grid !important;
    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,370px);

    gap:20px !important;
    align-items:start;
}

.nxcart-items{
    display:flex;
    flex-direction:column;
    gap:12px !important;
}

.nxcart-item{
    position:relative;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:22px !important;

    padding:22px !important;

    border:
        1px solid var(--nx-commerce-line) !important;

    border-radius:
        var(--nx-commerce-radius) !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,24,37,.96),
            rgba(14,20,31,.96)
        ) !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.10);

    overflow:hidden;
}

.nxcart-item::before{
    content:"";

    position:absolute;
    inset:0 auto 0 0;

    width:3px;

    background:
        linear-gradient(
            180deg,
            var(--nx-commerce-purple),
            transparent 85%
        );

    opacity:.8;
}

.nxcart-item h3{
    margin:0 0 6px !important;

    color:#fff;
    font-size:18px !important;
    font-weight:800 !important;
}

.nxcart-item p,
.nxcart-item small{
    color:var(--nx-commerce-muted) !important;
}

.nxcart-options{
    display:flex !important;
    flex-wrap:wrap;
    gap:7px !important;

    margin-top:14px !important;
}

.nxcart-options span,
.nxcart-options li{
    padding:6px 9px !important;

    border:
        1px solid rgba(140,99,255,.18);

    border-radius:8px;

    background:
        rgba(140,99,255,.06);

    color:#bcb0e8 !important;
    font-size:10px !important;
}

.nxcart-item-right{
    min-width:130px;

    display:flex !important;
    flex-direction:column;
    align-items:flex-end !important;
    justify-content:space-between;
    gap:18px;
}

.nxcart-item-right strong{
    color:#fff;
    font-size:19px;
    font-weight:850;
}

[data-cart-remove]{
    border:
        1px solid rgba(251,113,133,.18) !important;

    background:
        rgba(251,113,133,.05) !important;

    color:#fda4af !important;

    border-radius:9px !important;

    transition:.18s ease;
}

[data-cart-remove]:hover{
    border-color:
        rgba(251,113,133,.5) !important;

    background:
        rgba(251,113,133,.11) !important;
}


/* ---------- RÉSUMÉ PANIER ---------- */

.nxcart-summary{
    position:sticky;
    top:86px;

    padding:22px !important;

    border:
        1px solid var(--nx-commerce-line) !important;

    border-radius:
        var(--nx-commerce-radius) !important;

    background:
        linear-gradient(
            150deg,
            rgba(18,24,37,.98),
            rgba(13,18,29,.98)
        ) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.18);
}

.nxcart-summary::before{
    content:"RÉSUMÉ";

    display:block;

    margin-bottom:17px;

    color:#9b76ff;

    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
}

.nxcart-summary > *{
    position:relative;
    z-index:1;
}

.nxcart-summary strong{
    color:#fff;
}

.nxcart-total{
    margin-top:13px !important;
    padding-top:16px !important;

    border-top:
        1px solid var(--nx-commerce-line-soft);
}

.nxcart-summary .btn.primary{
    width:100%;

    display:flex !important;
    justify-content:center;
    align-items:center;

    margin-top:18px !important;
    min-height:48px;

    border:0 !important;
    border-radius:11px !important;

    background:
        linear-gradient(
            135deg,
            #7a50ed,
            #976cff
        ) !important;

    color:#fff !important;
    font-weight:800;

    box-shadow:
        0 12px 30px rgba(123,80,237,.20);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.nxcart-summary .btn.primary:hover{
    transform:translateY(-1px);

    box-shadow:
        0 15px 35px rgba(123,80,237,.29);
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.nxcheckout-layout{
    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(310px,370px);

    gap:20px !important;

    align-items:start;
}

.nxcheckout-main{
    padding:22px !important;

    border:
        1px solid var(--nx-commerce-line) !important;

    border-radius:
        var(--nx-commerce-radius) !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,24,37,.97),
            rgba(13,19,30,.97)
        ) !important;
}

.nxcheckout-main > span:first-child{
    display:block;

    margin-bottom:9px;

    color:#9b76ff !important;

    font-size:10px !important;
    font-weight:900;
    letter-spacing:.11em;
}

.nxcheckout-main h2{
    margin:0 0 24px;

    color:#fff;

    font-size:
        clamp(24px,3vw,34px);

    letter-spacing:-.035em;
}

.nxcheckout-item{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    padding:17px 0 !important;

    border-bottom:
        1px solid var(--nx-commerce-line-soft);
}

.nxcheckout-item:last-child{
    border-bottom:0;
}

.nxcheckout-item strong{
    color:#fff;
    font-weight:800;
}

.nxcheckout-item small{
    display:block;

    margin-top:5px;

    color:
        var(--nx-commerce-muted) !important;
}

.nxcheckout-summary{
    position:sticky;
    top:86px;

    padding:22px !important;

    border:
        1px solid var(--nx-commerce-line) !important;

    border-radius:
        var(--nx-commerce-radius) !important;

    background:
        linear-gradient(
            150deg,
            #111825,
            #0d131e
        ) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.18);
}

.nxcheckout-summary > span:first-child{
    display:block;

    margin-bottom:11px;

    color:#9b76ff !important;

    font-size:10px !important;
    font-weight:900;
    letter-spacing:.12em;
}

.nxcheckout-summary h2,
.nxcheckout-summary strong{
    color:#fff;
}

.nxcheckout-summary h2{
    font-size:27px !important;
    letter-spacing:-.035em;
}

[data-checkout-create]{
    width:100% !important;

    min-height:49px !important;

    margin-top:18px !important;

    border:0 !important;
    border-radius:11px !important;

    background:
        linear-gradient(
            135deg,
            #7950ed,
            #976bff
        ) !important;

    color:#fff !important;

    font-weight:850 !important;

    box-shadow:
        0 12px 30px rgba(123,80,237,.22);

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

[data-checkout-create]:hover{
    transform:translateY(-1px);

    box-shadow:
        0 15px 35px rgba(123,80,237,.32);
}

[data-checkout-create]:disabled{
    cursor:wait;
    opacity:.65;
    transform:none;
}


/* ---------- SÉCURITÉ ---------- */

.nx-commerce-secure{
    margin-top:15px;

    padding:13px;

    display:flex;
    gap:11px;
    align-items:flex-start;

    border:
        1px solid rgba(74,222,128,.15);

    border-radius:11px;

    background:
        rgba(74,222,128,.045);
}

.nx-commerce-secure-icon{
    width:29px;
    height:29px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:
        rgba(74,222,128,.10);

    color:#5ee790;
}

.nx-commerce-secure strong{
    display:block;

    color:#d9fbe5 !important;

    font-size:11px;
}

.nx-commerce-secure p{
    margin:3px 0 0;

    color:#728399 !important;

    font-size:9px;
    line-height:1.5;
}


/* ---------- INFO BAS DE PAGE ---------- */

.nx-commerce-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;

    margin-top:16px;
}

.nx-commerce-benefit{
    padding:13px;

    border:
        1px solid var(--nx-commerce-line-soft);

    border-radius:12px;

    background:
        rgba(255,255,255,.018);
}

.nx-commerce-benefit strong{
    display:block;

    margin-bottom:3px;

    color:#dfe5f1;
    font-size:10px;
}

.nx-commerce-benefit span{
    color:#6f7d94;
    font-size:9px;
    line-height:1.45;
}


/* ---------- EMPTY / ERROR ---------- */

.nxcart-empty{
    padding:64px 25px !important;

    text-align:center;

    border:
        1px dashed #2d3850 !important;

    border-radius:
        var(--nx-commerce-radius) !important;

    background:
        rgba(18,24,37,.75) !important;
}

.nxcart-empty h2{
    color:#fff;
}

#nxCartContent > .alert,
#nxCheckoutContent > .alert{
    padding:20px !important;

    border:
        1px solid rgba(251,113,133,.18) !important;

    border-radius:14px !important;

    background:
        rgba(251,113,133,.045) !important;
}


/* ---------- COMMANDE CRÉÉE ---------- */

.nxcheckout-created{
    position:relative;

    padding:
        clamp(35px,6vw,70px)
        clamp(22px,5vw,55px) !important;

    border:
        1px solid rgba(74,222,128,.24) !important;

    border-radius:
        var(--nx-commerce-radius) !important;

    background:
        linear-gradient(
            145deg,
            #111926,
            #0e151f
        ) !important;

    text-align:center;

    overflow:hidden;
}

.nxcheckout-created::before{
    content:"";

    position:absolute;

    width:380px;
    height:380px;

    top:-270px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        rgba(74,222,128,.12);

    filter:blur(70px);

    pointer-events:none;
}

.nxcheckout-success{
    width:52px !important;
    height:52px !important;

    display:grid !important;
    place-items:center;

    margin:
        0 auto 22px !important;

    border-radius:50% !important;

    background:
        rgba(74,222,128,.13) !important;

    color:#4ade80 !important;

    font-size:22px !important;
}

.nxcheckout-created h2{
    color:#fff;
    font-size:25px;
}

.nxcheckout-created p{
    color:#8491a9;
}

.nxcheckout-status{
    max-width:650px;
    margin:25px auto 0 !important;

    display:grid !important;
    grid-template-columns:repeat(3,1fr);

    gap:10px;
}

.nxcheckout-status > *{
    padding:14px !important;

    border:
        1px solid var(--nx-commerce-line) !important;

    border-radius:11px;

    background:
        rgba(255,255,255,.018);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .nxcart-layout,
    .nxcheckout-layout{
        grid-template-columns:1fr !important;
    }

    .nxcart-summary,
    .nxcheckout-summary{
        position:static;
    }

    .nx-commerce-benefits{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){

    .nx-commerce-progress{
        padding:12px;
    }

    .nx-commerce-step-copy span{
        display:none;
    }

    .nx-commerce-progress-line{
        margin:0 8px;
    }

    .nx-commerce-step-number{
        width:29px;
        height:29px;
    }

    .nxcart-item{
        grid-template-columns:1fr !important;
    }

    .nxcart-item-right{
        width:100%;

        flex-direction:row !important;
        align-items:center !important;
    }

    .nxcheckout-status{
        grid-template-columns:1fr;
    }
}