/* ============================================================================
   Relooking de la page Panier — VRAI gabarit WooCommerce classique (restauré
   depuis le hijack global d'Edwiser Bridge Pro, cf. PortalModule::boot() +
   CartBodyCustomizer). Un premier relooking purement CSS par-dessus le
   composant React d'Edwiser était insuffisant (image cassée, titre tronqué,
   icônes incohérentes) : ceci a le même niveau de contrôle que le Paiement.
   Chargé uniquement sur is_cart() — voir PortalAssets::enqueue().
   ============================================================================ */

body.woocommerce-cart .ar-portal-main { background: var(--ar-bg, #f8fafc); }
body.woocommerce-cart .ar-portal-page { max-width: 1180px; }
body.woocommerce-cart .woocommerce-notices-wrapper { margin: 0 0 18px; }

/* --------------------------------- En-tête ---------------------------------- */
.ar-cart-header { margin: 0 0 4px; display: flex; flex-direction: column; gap: 6px; }
.ar-cart-header-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 22px; font-weight: 900; color: var(--ar-ink, #0f172a);
}
.ar-cart-header-title svg { width: 22px; height: 22px; color: var(--ar-primary, #005064); }
.ar-cart-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ar-muted, #64748b); }
.ar-cart-breadcrumb a { color: var(--ar-muted, #64748b); text-decoration: none; }
.ar-cart-breadcrumb a:hover { color: var(--ar-primary, #005064); text-decoration: underline; }
.ar-cart-breadcrumb .is-current { color: var(--ar-ink, #0f172a); font-weight: 700; }

/* -------------------------- Mise en page 2 colonnes ------------------------- */
/* Placements de grille EXPLICITES sur les enfants directs de .woocommerce
   (notices, formulaire, colonne de droite) : sans grid-column sur CHACUN
   d'eux, l'auto-placement « sparse » de CSS Grid les disperse n'importe où
   dès qu'un des enfants est plus grand qu'une ligne — déjà rencontré et
   corrigé au Paiement, même cause ici. */
body.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 28px;
    align-items: start;
}
body.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; }
/* .ar-cart-header (« Votre commande » + fil d'Ariane) précède le <form> —
   enfant direct supplémentaire de .woocommerce, même besoin de grid-column
   explicite que .woocommerce-notices-wrapper juste au-dessus. */
.ar-cart-header { grid-column: 1 / -1; }
/* .ar-cart-right-col enveloppe la carte résumé + .cart-collaterals (voir
   CartBodyCustomizer::openRightCol/closeRightCol) — seul CE wrapper a besoin
   d'un grid-column, pas ses 2 enfants internes. */
.ar-cart-right-col { grid-column: 2; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 920px) {
    body.woocommerce-cart .woocommerce { display: flex; flex-direction: column; }
    .ar-cart-right-col { position: static; }
}

/* ------------------------------ Ligne d'article ------------------------------ */
/* Le tableau classique est reconstruit en carte via flexbox (table → block,
   tr → flex) : plus lisible et flexible qu'un vrai tableau pour ce contenu. */
body.woocommerce-cart table.cart { display: block; border: none; }
body.woocommerce-cart table.cart thead { display: none; }
body.woocommerce-cart table.cart tbody { display: flex; flex-direction: column; gap: 14px; }
body.woocommerce-cart table.cart tr { display: block; }

body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--ar-card, #fff);
    border: 1px solid var(--ar-border, #e8edf5);
    border-radius: var(--ar-radius-card, 20px);
    box-shadow: var(--ar-shadow-sm, 0 2px 10px rgba(15,23,42,.04));
    padding: 20px 22px;
}
/* WooCommerce colore lui-même chaque <td> en gris clair (rgba(128,128,128,.07),
   son style natif de tableau « responsive ») — annulé ici, c'est la carte
   entière (fond blanc) qui doit porter la couleur, pas chaque cellule. */
body.woocommerce-cart table.cart td { display: block; border: none; padding: 0; }
body.woocommerce-cart table.cart td:not(.product-thumbnail) { background: transparent !important; }
/* WooCommerce ajoute lui-même un « Produit: »/« Quantité: » via data-title en
   ::before à partir d'une certaine largeur (son propre mode responsive de
   tableau) — notre mise en page carte gère déjà la lisibilité mobile, ce
   préfixe est désactivé à toutes les tailles pour ne pas le voir apparaître. */
body.woocommerce-cart table.cart td::before { display: none !important; content: none !important; }

body.woocommerce-cart table.cart td.product-remove { order: 3; flex: 0 0 auto; align-self: flex-start; }
body.woocommerce-cart table.cart td.product-remove a.remove {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 10px;
    border: 1px solid var(--ar-border, #e8edf5);
    background: var(--ar-bg, #f8fafc);
    color: var(--ar-danger, #ef4444) !important;
    font-size: 16px;
    line-height: 1;
}
body.woocommerce-cart table.cart td.product-remove a.remove:hover { background: color-mix(in srgb, var(--ar-danger, #ef4444) 12%, #fff); border-color: color-mix(in srgb, var(--ar-danger, #ef4444) 30%, var(--ar-border, #e8edf5)); }

/* Vignette agrandie : c'est souvent une illustration déjà soignée (niveau/
   tome) plutôt qu'une simple photo produit — vaut la peine d'être mise en
   avant plutôt que réduite à une petite icône. */
body.woocommerce-cart table.cart td.product-thumbnail { order: 0; flex: 0 0 auto; width: 132px; height: 132px; border-radius: 20px; overflow: hidden; background: var(--ar-bg, #f8fafc); }
body.woocommerce-cart table.cart td.product-thumbnail img { width: 132px; height: 132px; object-fit: cover; display: block; border-radius: 20px; }

/* flex-basis à 0 (pas « auto ») : avec `auto`, le calcul initial de la taille
   se base sur le contenu avant application du grow, et un <a> avec
   overflow-wrap:anywhere dans un conteneur encore à largeur inconnue pouvait
   se replier caractère par caractère sur toute la hauteur de la carte. */
body.woocommerce-cart table.cart td.product-name { order: 1; flex: 1 1 0%; min-width: 0; }
body.woocommerce-cart table.cart td.product-name a:not(.remove) {
    display: block;
    font-size: 17px;
    font-weight: 900;
    color: var(--ar-ink, #0f172a);
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}
body.woocommerce-cart table.cart td.product-name a:not(.remove):hover { color: var(--ar-primary, #005064); }
body.woocommerce-cart table.cart td.product-name dl.variation { display: none; }

.ar-cart-item-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ar-cart-item-format,
.ar-cart-item-plan,
.ar-cart-item-for {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
}
.ar-cart-item-format { background: color-mix(in srgb, var(--ar-blue, #3b82f6) 14%, #fff); color: var(--ar-blue, #3b82f6); }
.ar-cart-item-plan { background: color-mix(in srgb, var(--ar-blue, #3b82f6) 10%, #fff); color: #1d4ed8; }
.ar-cart-item-for { background: color-mix(in srgb, var(--ar-purple, #1bd6e9) 12%, #fff); color: var(--ar-purple, #0e8490); }
.ar-cart-item-format svg, .ar-cart-item-plan svg, .ar-cart-item-for svg { width: 12px; height: 12px; }

/* Prix unitaire ET sous-total natifs masqués : pour un produit abonnement,
   WooCommerce Subscriptions y met une longue phrase descriptive (« 60,00$ /
   mois pour 4 mois avec un essai gratuit… ») qui, en mise en page carte,
   écrasait toute la largeur disponible (le titre se repliait caractère par
   caractère). Remplacés par .ar-cart-item-due, simple et cohérent avec la
   carte de droite — voir CartBodyCustomizer::enrichItem(). */
body.woocommerce-cart table.cart td.product-price,
body.woocommerce-cart table.cart td.product-subtotal { display: none; }

body.woocommerce-cart table.cart td.product-quantity { order: 4; flex: 0 0 auto; align-self: center; }
body.woocommerce-cart table.cart td.product-quantity .quantity { display: block; }
body.woocommerce-cart table.cart td.product-quantity input.qty {
    width: 56px;
    text-align: center;
    border: 1px solid var(--ar-border, #e8edf5);
    border-radius: 10px;
    padding: 8px 4px;
    font-size: 13px;
    background: var(--ar-bg, #f8fafc);
}

.ar-cart-item-due { margin-top: 12px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ar-cart-item-due span { font-size: 12px; font-weight: 700; color: var(--ar-muted, #64748b); }
.ar-cart-item-due b { font-size: 20px; font-weight: 900; color: var(--ar-orange, #f97316); }
/* Code promo appliqué (cf. CartSummaryMath::priceBlock()) : prix barré +
   nouveau prix en vert — spécificité égale à .ar-cart-item-due b (élément +
   classe), déclarée APRÈS pour gagner sur l'égalité. */
.ar-cart-item-due .ar-cs-was { font-size: 13px; color: var(--ar-muted, #64748b); text-decoration: line-through; }
.ar-cart-item-due b.ar-cs-amt-promo { color: var(--ar-green, #22c55e); }

/* ------------------------- Rappel « Paiement 100% sécurisé » (colonne gauche) ------------------------- */
.ar-cart-secure-standalone {
    display: flex; align-items: flex-start; gap: 12px;
    background: color-mix(in srgb, var(--ar-primary, #005064) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--ar-primary, #005064) 16%, var(--ar-border, #e8edf5));
    border-radius: var(--ar-radius-card, 20px);
    padding: 16px 20px;
}
.ar-cart-secure-standalone svg { width: 20px; height: 20px; color: var(--ar-primary, #005064); flex: 0 0 auto; margin-top: 2px; }
.ar-cart-secure-standalone strong { display: block; font-size: 13.5px; color: var(--ar-ink, #0f172a); }
.ar-cart-secure-standalone span { display: block; font-size: 12px; color: var(--ar-muted, #64748b); margin-top: 2px; }

/* Ligne « actions » : simple conteneur, pas sa propre carte — .coupon porte
   déjà son propre cadre (cf. plus bas) ; un 2e cadre autour aurait recréé le
   « trop de cadres imbriqués » déjà corrigé au Paiement. */
body.woocommerce-cart table.cart tr:not(.woocommerce-cart-form__cart-item) td.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
/* « Code promo » : redonne du sens au <label> natif de WooCommerce (masqué
   avant) en titre de mini-carte plutôt que de le supprimer — relabellé
   « Code promo » via CartBodyCustomizer::relabel(). */
body.woocommerce-cart .coupon {
    display: flex; flex-wrap: wrap; gap: 10px 12px; flex: 1 1 100%;
    background: color-mix(in srgb, var(--ar-blue, #3b82f6) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--ar-blue, #3b82f6) 16%, var(--ar-border, #e8edf5));
    border-radius: 16px;
    padding: 16px 18px;
}
/* Le <label> natif porte la classe .screen-reader-text de WordPress (position
   hors écran + clip, en !important dans le cœur de WP) — on annule cette
   position hors-écran spécifiquement ici pour le remettre en titre visible de
   la mini-carte, plutôt que de le laisser masqué pour l'accessibilité seule. */
body.woocommerce-cart .coupon label.screen-reader-text {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: normal !important;
    display: flex !important; align-items: center; gap: 7px;
    flex-basis: 100%;
    font-size: 13.5px; font-weight: 800; color: var(--ar-ink, #0f172a);
    margin: 0 0 2px;
}
body.woocommerce-cart .coupon label::before { content: "🏷️"; font-size: 14px; line-height: 1; }
body.woocommerce-cart .coupon .input-text { flex: 1 1 200px; margin: 0; border: 1px solid var(--ar-border, #e8edf5); border-radius: 12px; padding: 10px 14px; background: #fff; }
body.woocommerce-cart .coupon button {
    background: var(--ar-primary, #005064);
    color: #fff;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 13px;
    border: none;
}
.ar-coupon-help { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ar-muted, #64748b); }

/* La quantité n'a pas de raison de changer (1 enfant / 1 formule par
   inscription) — ce bouton n'aide personne ici, masqué (demande client). */
body.woocommerce-cart button[name="update_cart"] { display: none !important; }

/* ------------------------- Carte « Récapitulatif de la commande » ------------------------- */
/* Réutilise les classes .ar-cs-* déjà définies dans checkout.css (même
   composant visuel, même logique de calcul — cohérence entre les 2 pages). */
.ar-cart-summary-card { margin: 0; }

/* --------------------------- Bouton « Payer » --------------------------- */
/* Le bouton « Payer » vit maintenant DANS la carte « Récapitulatif » elle-même
   (.ar-cs-cta, cf. CartBodyCustomizer::summaryCardHtml() — demande client) —
   c'est un simple lien vers le paiement, pas dupliqué en logique. Le bloc
   natif WooCommerce (totaux + son propre bouton « Passer à la caisse ») est
   entièrement redondant ; gardé dans le DOM (recalcul du panier fonctionnel
   côté JS — coupon, panier récurrent…) mais masqué visuellement.
   IMPORTANT : la carte « Récapitulatif » vit maintenant DANS .cart_totals
   elle-même (cf. openTotalsCard()), pour bénéficier du même rafraîchissement
   AJAX natif que le formulaire panier (cart.js -> update_wc_div(), ne rejoue
   que .woocommerce-cart-form et .cart_totals — avant, notre carte était HORS
   de cette zone et restait figée après un changement de code promo, retour
   client). .cart_totals doit donc rester VISIBLE (elle contient notre carte) ;
   seuls le contenu natif (.ar-cart-native-plumbing) et les ventes croisées
   éventuelles (woocommerce_cross_sell_display, sibling de .cart_totals dans
   .cart-collaterals) restent masqués. */
body.woocommerce-cart .cart-collaterals > *:not(.cart_totals) { display: none; }
body.woocommerce-cart .ar-cart-native-plumbing { display: none; }
/* woocommerce-layout.css (natif) flotte .cart_totals à 48% — pensé pour son
   propre contexte 2 colonnes (à côté des ventes croisées) ; ici .cart_totals
   EST notre colonne de droite, elle doit occuper toute la largeur disponible.
   Constaté en desktop (>920px) : carte réduite à ~190px, texte tassé. */
body.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }

.ar-cs-cta-wrap-top {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ar-line, #eef2f7);
    margin-bottom: 18px;
}
.ar-cs-cta-wrap-bottom {
    padding-top: 18px;
    border-top: 1px solid var(--ar-line, #eef2f7);
    margin-top: 18px;
}
.ar-cs-cta {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    background: var(--ar-orange, #f97316);
    color: #fff !important;
    border-radius: var(--ar-radius-btn, 14px);
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ar-orange, #f97316) 35%, transparent);
    transition: filter .15s ease, transform .15s ease;
}
.ar-cs-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff !important; }
/* Prix avant/après DANS le bouton (demande client, cf. CartSummaryMath::
   ctaPriceText()) — le gris habituel de .ar-cs-was serait illisible sur
   l'orange : blanc semi-transparent à la place. */
.ar-cs-cta-was { color: rgba(255, 255, 255, .65); text-decoration: line-through; font-weight: 700; font-size: 0.9em; }

body.woocommerce-cart .wc-proceed-to-checkout { margin: 0; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--ar-orange, #f97316) !important;
    color: #fff !important;
    border-radius: var(--ar-radius-btn, 14px);
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ar-orange, #f97316) 35%, transparent);
    transition: filter .15s ease, transform .15s ease;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff !important; }
.ar-cart-fineprint { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: var(--ar-muted, #64748b); }

/* ------------------------------------ Mobile ------------------------------------ */
@media (max-width: 560px) {
    body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
        flex-wrap: wrap;
    }
    body.woocommerce-cart table.cart td.product-name { flex-basis: 100%; order: 2; }
    body.woocommerce-cart table.cart td.product-quantity { order: 3; margin-top: 10px; }
    body.woocommerce-cart table.cart td.product-remove { order: 1; margin-left: auto; }
}