/**
 * MyAssurBox — Styles Panier & Checkout
 * Design "Final v3"
 */

/* ============================================
   PAGE HEADER (panier / commande)
   ============================================ */
.mab-cart-page .wc-page-header,
.mab-checkout-page .wc-page-header {
    background: var(--gradient-dark);
    padding: 3rem 0 2.5rem;
    margin-top: calc(-1 * var(--header-height));
    padding-top: calc(var(--header-height) + 2rem);
}

/* ============================================
   CONTAINER WC
   ============================================ */
.mab-cart-page .woocommerce-container,
.mab-checkout-page .woocommerce-container {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* ============================================
   PANIER VIDE
   ============================================ */
.wc-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.wc-empty-state__icon {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    opacity: 0.4;
}

.wc-empty-state__text {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.wc-empty-state + .return-to-shop .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: var(--fw-semibold);
    color: #fff;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: var(--shadow-cta-glow);
    transition: all var(--transition-base);
}

.wc-empty-state + .return-to-shop .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(14, 165, 233, 0.45);
    color: #fff;
}

/* ============================================
   TABLE PANIER
   ============================================ */
.woocommerce table.shop_table {
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.woocommerce table.shop_table thead {
    background: var(--color-bg);
}

.woocommerce table.shop_table thead th {
    padding: 1rem 1.25rem;
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    text-align: left;
}

.woocommerce table.shop_table tbody td {
    padding: 1.25rem;
    border-top: 1px solid var(--color-border);
    vertical-align: middle;
    font-size: var(--fs-body);
    color: var(--color-text);
}

/* Image produit dans le panier */
.woocommerce table.shop_table .product-thumbnail img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* Nom produit */
.woocommerce table.shop_table .product-name a {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
    color: var(--color-accent);
}

/* Quantité */
.woocommerce table.shop_table .quantity .qty {
    width: 60px;
    padding: 0.5rem;
    text-align: center;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    background: var(--color-surface);
}

.woocommerce table.shop_table .quantity .qty:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Bouton supprimer */
.woocommerce table.shop_table .product-remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    text-decoration: none;
    font-size: 1.25rem;
    transition: all var(--transition-base);
}

.woocommerce table.shop_table .product-remove a:hover {
    background: rgba(220, 38, 38, 0.1);
    color: var(--color-error);
}

/* ============================================
   ACTIONS PANIER (coupon + mise à jour)
   ============================================ */
.woocommerce table.shop_table td.actions {
    padding: 1.25rem;
}

.woocommerce .coupon {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.woocommerce .coupon input.input-text {
    padding: 0.625rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition-base);
    max-width: 200px;
}

.woocommerce .coupon input.input-text:focus {
    outline: none;
    border-color: var(--color-accent);
}

.woocommerce .coupon button,
.woocommerce td.actions button[name="update_cart"] {
    padding: 0.625rem 1.25rem;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.woocommerce .coupon button:hover,
.woocommerce td.actions button[name="update_cart"]:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ============================================
   TOTAUX PANIER
   ============================================ */
.woocommerce .cart-collaterals {
    margin-top: 2rem;
}

.woocommerce .cart_totals {
    max-width: 480px;
    margin-left: auto;
}

.woocommerce .cart_totals h2 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin-bottom: 1.25rem;
}

.woocommerce .cart_totals table.shop_table {
    margin-bottom: 1.5rem;
}

.woocommerce .cart_totals table.shop_table th {
    padding: 1rem 1.25rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
}

.woocommerce .cart_totals table.shop_table .order-total th,
.woocommerce .cart_totals table.shop_table .order-total td {
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
}

/* Bouton "Passer commande" */
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    padding: 1rem 2rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: var(--fw-semibold);
    color: #fff;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow-cta-glow);
    transition: all var(--transition-base);
}

.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(14, 165, 233, 0.45);
    color: #fff;
}

/* ============================================
   CHECKOUT
   ============================================ */
/* Colonnes internes de WooCommerce (#customer_details).
   `.col-2` accueille la livraison et les notes de commande : les deux sont
   inactives ici (boutique 100 % numérique, `woocommerce_ship_to_countries` =
   disabled, et le champ `order_comments` est désactivé dans Checkout Field
   Editor Pro). La colonne était donc rendue vide et laissait la moitié de la
   largeur inoccupée à côté de « Détails de facturation ». Une seule colonne :
   si la livraison ou les notes reviennent un jour, elles s'empileront sous la
   facturation au lieu de rouvrir un trou. */
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100%;
}

/* Sur grand écran, le récapitulatif remonte à droite du formulaire.
   Les trois blocs sont des frères directs du <form> : on les place
   explicitement plutôt que de laisser le placement automatique décider. */
@media (min-width: 1024px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        grid-template-rows: auto 1fr;
        column-gap: 2.5rem;
        align-items: start;
    }

    .woocommerce-checkout form.checkout > #customer_details {
        grid-column: 1;
        grid-row: 1 / -1;
        margin-bottom: 0;
    }

    .woocommerce-checkout form.checkout > #order_review_heading {
        grid-column: 2;
        grid-row: 1;
    }

    .woocommerce-checkout form.checkout > #order_review {
        grid-column: 2;
        grid-row: 2;
    }

    /* Tout autre bloc inséré par WooCommerce ou un plugin (boutons de paiement
       express, champs additionnels) reste dans la colonne de gauche plutôt que
       de se glisser dans une cellule libre au milieu du récapitulatif. */
    .woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) {
        grid-column: 1;
    }

    /* Éléments sans rendu : ils occuperaient une cellule de la grille. */
    .woocommerce-checkout form.checkout > wc-order-attribution-inputs,
    .woocommerce-checkout form.checkout > input[type="hidden"] {
        display: none;
    }
}

.woocommerce-checkout h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin-bottom: 1.5rem;
}

/* Champs de formulaire */
.woocommerce form .form-row {
    margin-bottom: 1.25rem;
}

.woocommerce form .form-row label {
    display: block;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition-base);
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.woocommerce form .form-row.woocommerce-invalid .input-text {
    border-color: var(--color-error);
}

.woocommerce form .form-row .required {
    color: var(--color-error);
}

/* Récapitulatif commande */
.woocommerce-checkout #order_review_heading {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin-bottom: 1.5rem;
}

.woocommerce-checkout #order_review {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-card);
}

/* Bouton "Commander" */
.woocommerce #place_order {
    display: block;
    width: 100%;
    padding: 1rem 2rem;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
    color: #fff;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-cta-glow);
    transition: all var(--transition-base);
    margin-top: 1.5rem;
}

.woocommerce #place_order:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(14, 165, 233, 0.45);
}

/* Méthodes de paiement */
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base);
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--color-accent);
}

.woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    cursor: pointer;
}

.woocommerce-checkout #payment .payment_box {
    padding: 1rem 0 0 1.75rem;
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    background: transparent;
}

/* Privacy policy */
.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
}

/* Messages WC */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    margin-bottom: 1.5rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    .woocommerce table.shop_table thead {
        display: none;
    }

    .woocommerce table.shop_table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.5rem;
        padding: 1rem;
        border-bottom: 1px solid var(--color-border);
    }

    .woocommerce table.shop_table tbody td {
        padding: 0.25rem;
        border: none;
    }

    .woocommerce table.shop_table tbody td.product-thumbnail {
        grid-row: 1 / 3;
    }

    .woocommerce .cart_totals {
        max-width: 100%;
    }

    .woocommerce .coupon {
        flex-wrap: wrap;
    }
}