/* ==========================================================================
   Missebo — panier, commande, checkout : direction "futuriste premium"
   Palette de marque (dore / noir) + effets : verre depoli, halos lumineux,
   bordures fines brillantes, degrades subtils. Fond clair pour la lisibilite
   et la confiance sur les pages de paiement.
   Style pur : aucun balisage ni JS modifie. Scope par classes de ces pages.
   ========================================================================== */
:root {
    --fx-or: #c9971b;
    --fx-or-clair: #e9c866;
    --fx-n: #14130f;
    --fx-gris: #6f6a62;
    --fx-halo: rgba(201, 151, 27, 0.28);
    --fx-verre: rgba(255, 255, 255, 0.72);
    --fx-trait: rgba(20, 19, 15, 0.08);
}

/* Fond general des pages transactionnelles : blanc legerement froid, halo. */
.cart-box,
.cart-info,
.order-summary,
.address-book-section,
.payment-methods,
.shipping-address {
    position: relative;
}

/* ---------- Cartes en verre depoli ---------------------------------------- */
.cart-info.sidebar-sticky,
.order-summary,
.address-box,
.payment-accordion,
.cart-footer .cart-order-detail {
    background: var(--fx-verre) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--fx-trait) !important;
    border-radius: 20px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 12px 40px rgba(20, 19, 15, 0.08);
}

/* Le recapitulatif de commande : halo dore diffus derriere. */
.order-summary::before,
.cart-info.sidebar-sticky::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, var(--fx-or-clair), transparent 40%, transparent 60%, var(--fx-or));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- Lignes du panier --------------------------------------------- */
.cart-row.cart-header {
    background: transparent !important;
    border-bottom: 1px solid var(--fx-trait);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6875rem;
    color: var(--fx-gris);
}
.cart-box .row.border-bottom {
    border-bottom: 1px solid var(--fx-trait) !important;
    transition: background 0.2s ease;
    border-radius: 12px;
}
.cart-box .row.border-bottom:hover {
    background: rgba(201, 151, 27, 0.04);
}
.cart-box .product-img,
.cart-box .product-image img {
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(20,19,15,0.1);
}

/* Prix : chiffres nets, accent dore sur les totaux. */
.cart-subtotal-title,
.product-price,
.cart-order-detail .price {
    font-variant-numeric: tabular-nums;
}
.cart-order-detail .cart-total,
.order-summary .grand-total,
.order-summary .total {
    color: var(--fx-or) !important;
    font-weight: 800 !important;
    font-size: 1.25rem;
}

/* ---------- Etapes / adresses --------------------------------------------- */
.address-box {
    padding: 1rem 1.1rem !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.address-select-box {
    border-radius: 16px !important;
    border: 1.5px solid var(--fx-trait) !important;
    transition: all 0.2s ease;
}
.address-select-box.active,
.address-div.active,
.address-select-box:has(.address-radio:checked) {
    border-color: var(--fx-or) !important;
    box-shadow: 0 0 0 4px var(--fx-halo), 0 8px 24px rgba(201,151,27,0.15) !important;
    background: linear-gradient(180deg, rgba(233,200,102,0.08), transparent) !important;
}

/* ---------- Moyens de paiement ------------------------------------------- */
.payment-type .payment-image,
.payment-methods img {
    border-radius: 12px;
    transition: transform 0.15s ease;
}
.payment-type label:hover .payment-image { transform: translateY(-2px); }
.payment-accordion { padding: 0.6rem !important; }

/* ---------- Bouton de commande : dore lumineux avec halo ------------------ */
.btn.checkout,
.place-order-btn,
#place_order,
.btn-lg.checkout {
    background: linear-gradient(135deg, var(--fx-or-clair), var(--fx-or)) !important;
    border: 0 !important;
    color: var(--fx-n) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 8px 26px rgba(201, 151, 27, 0.4);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.btn.checkout:hover,
.btn-lg.checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(201, 151, 27, 0.55);
}
/* Reflet anime qui balaie le bouton. */
.btn.checkout::after,
.btn-lg.checkout::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    animation: fx-balayage 3.2s ease-in-out infinite;
}
@keyframes fx-balayage {
    0%, 60% { left: -60%; }
    100% { left: 140%; }
}

/* ---------- Livraison offerte / cashback : puce lumineuse ---------------- */
.cart-shipping.text-success,
.cashback-text {
    color: #1a7f3c !important;
    font-weight: 700;
}

/* ---------- Commandes (listing + details) -------------------------------- */
.order-card,
.order-listing-item,
.orders-list .order-item {
    background: var(--fx-verre) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--fx-trait) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(20,19,15,0.07);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.order-card:hover,
.orders-list .order-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(20,19,15,0.12);
}
/* Etat de commande : pastille lumineuse. */
.order-status,
.status-badge,
.order-tracking .status {
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.85rem;
    box-shadow: 0 0 0 3px rgba(201,151,27,0.1);
}

@media (prefers-reduced-motion: reduce) {
    .btn.checkout::after,
    .btn-lg.checkout::after { animation: none; display: none; }
    .cart-box .row.border-bottom,
    .address-select-box,
    .order-card { transition: none !important; }
}

/* ---------- Panier invite (rendu client sur /cart) ----------------------- */
#mm-guest-cart { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
#mm-guest-cart .cart-header {
    padding: 0.7rem 1rem;
    font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: #6f6a62; border-bottom: 1px solid rgba(20,19,15,0.08);
}
#mm-guest-cart .mm-gc-item {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 1rem; align-items: center;
    padding: 1rem 0.4rem;
}
#mm-guest-cart .mm-gc-img img {
    width: 84px; height: 104px; object-fit: cover;
    border-radius: 14px; box-shadow: 0 6px 18px rgba(20,19,15,0.1);
}
#mm-guest-cart .mm-gc-info .product-name {
    font-weight: 600; color: #14130f; text-decoration: none; display: block;
}
#mm-guest-cart .mm-gc-info .product-name:hover { color: #c9971b; }
#mm-guest-cart .mm-gc-info .product-price {
    color: #c9971b; font-weight: 800; margin-top: 0.3rem; font-variant-numeric: tabular-nums;
}
#mm-guest-cart .mm-gc-actions { display: flex; align-items: center; gap: 0.7rem; }
#mm-guest-cart .qtyField {
    display: inline-flex; align-items: center;
    border: 1.5px solid rgba(20,19,15,0.12); border-radius: 999px; overflow: hidden;
}
#mm-guest-cart .qtyField .qtyBtn {
    border: 0; background: transparent; width: 34px; height: 40px;
    font-size: 1.1rem; cursor: pointer; color: #14130f;
}
#mm-guest-cart .qtyField .qty {
    width: 38px; text-align: center; border: 0; background: transparent;
    font-weight: 700; font-variant-numeric: tabular-nums;
}
#mm-guest-cart .mm-gc-remove {
    border: 1.5px solid rgba(20,19,15,0.12); background: #fff;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #b4241b; cursor: pointer; transition: all 0.15s ease;
}
#mm-guest-cart .mm-gc-remove:hover { border-color: #b4241b; background: #fdecea; }
#mm-guest-cart .mm-gc-note {
    text-align: center; font-size: 0.75rem; color: #6f6a62; margin: 0.6rem 0 0;
}
@media (max-width: 575px) {
    #mm-guest-cart .mm-gc-item { grid-template-columns: 64px 1fr; }
    #mm-guest-cart .mm-gc-actions { grid-column: 1 / -1; justify-content: space-between; }
    #mm-guest-cart .mm-gc-img img { width: 64px; height: 80px; }
}

/* Correctif layout panier invite : la classe Bootstrap .row imposait
   flex-wrap et provoquait un debordement horizontal. On force la grille. */
#mm-guest-cart .mm-gc-item.row {
    display: grid !important;
    grid-template-columns: 84px 1fr auto !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
}
#mm-guest-cart .cart-box { overflow-x: hidden; }
#mm-guest-cart .qtyField .qtyBtn {
    line-height: 1; user-select: none;
}
@media (max-width: 575px) {
    #mm-guest-cart .mm-gc-item.row {
        grid-template-columns: 64px 1fr !important;
    }
}