/* ─────────────────────────────────────────────────────────────
   PAGE PANIER YURLED
   ─────────────────────────────────────────────────────────────
   Extrait de style.css le 24/07/2026 (style.css devenait trop
   volumineux pour y travailler sereinement). Chargé uniquement
   sur la page panier, voir yurled_enqueue_assets() / le bloc
   wp_enqueue_scripts dédié dans functions.php.
   Dépend de yurled-style (variables --yrl-color-*, etc.) —
   déclaré comme dépendance à l'enqueue, ne pas charger seul.
   ───────────────────────────────────────────────────────────── */

.yrl-cart-page {
  max-width: var(--yrl-container-wide);
  margin: 0 auto;
  padding: var(--yrl-spacing-lg) var(--yrl-spacing-md) var(--yrl-spacing-xl);
  box-sizing: border-box;
}

.yrl-cart-hero, .yrl-cart-empty { max-width: 760px; margin-bottom: var(--yrl-spacing-md); }

.yrl-cart-kicker {
  margin: 0 0 0.5rem; color: var(--yrl-color-accent); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.yrl-cart-hero h1, .yrl-cart-empty h1 {
  margin: 0; color: #fff; font-family: var(--yrl-font-heading); font-size: clamp(2rem, 4vw, 4rem);
}

.yrl-cart-hero p:not(.yrl-cart-kicker), .yrl-cart-empty p:not(.yrl-cart-kicker) {
  max-width: 580px; margin: 0.75rem 0 0; color: rgba(255, 255, 255, 0.62); font-size: 1rem;
}

.yrl-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }

.yrl-cart-form, .yrl-cart-summary, .yrl-cart-empty {
  background: #111; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px;
}

.yrl-cart-form { padding: 1rem; }

.yrl-cart-items { display: flex; flex-direction: column; gap: 0.85rem; }

.yrl-cart-item {
  display: grid; grid-template-columns: 132px 1fr; gap: 1rem; padding: 1rem;
  background: #181818; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px;
}

.yrl-cart-item-media { aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #0c0c0c; }
.yrl-cart-item-media a, .yrl-cart-item-media img { display: block; width: 100%; height: 100%; }
.yrl-cart-item-media img { object-fit: cover; }

.yrl-cart-item-main { min-width: 0; display: flex; flex-direction: column; gap: 0.85rem; }

.yrl-cart-item-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.yrl-cart-item-heading h2 { margin: 0; font-size: 1rem; line-height: 1.25; }
.yrl-cart-item-heading a { color: #fff; text-decoration: none; }
.yrl-cart-item-heading a:hover { color: var(--yrl-color-accent); }

.yrl-cart-item {
  transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease, padding 0.35s ease;
  overflow: hidden;
}

.yrl-cart-item.is-removing {
  opacity: 0;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
}

.yrl-cart-remove {
  display: flex !important; align-items: center; justify-content: center; width: 28px; height: 28px;
  min-width: 28px; border-radius: 50%; background: rgba(255, 68, 68, 0.1); color: #ff6b6b !important;
  font-size: 1.25rem; line-height: 1; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.yrl-cart-remove:hover { background: rgba(255, 68, 68, 0.2); transform: scale(1.06); }

.yrl-cart-item-options { color: rgba(255, 255, 255, 0.48); font-size: 0.82rem; margin: 0.35rem 0 0; }
.yrl-cart-item-options dl, .yrl-cart-item-options p { margin: 0; }

/* CRT-019 (10/08) : "Options sélectionnées :" + une ligne par attribut,
   sous le titre — remplace l'ancien suffixe "- 2.5m, Oui" collé au nom.
   Le gris est déjà hérité de .yrl-cart-item-options ci-dessus, on
   n'ajoute ici que l'espacement entre les lignes. */
.yrl-cart-item-options__label { margin-bottom: 0.2rem !important; }
.yrl-cart-item-options__line { line-height: 1.5; }

.yrl-cart-edit-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--yrl-color-accent);
  text-decoration: none;
}

.yrl-cart-edit-link:hover { color: #fff; }

.yrl-cart-item-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.9rem; align-items: end; }

.yrl-cart-price, .yrl-cart-quantity, .yrl-cart-subtotal {
  display: flex; flex-direction: column; gap: 0.35rem; color: #fff; font-weight: 800;
}

.yrl-cart-price > span, .yrl-cart-quantity > span, .yrl-cart-subtotal > span {
  color: rgba(255, 255, 255, 0.38); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

.yrl-cart-quantity .quantity {
  display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px; overflow: hidden; width: fit-content; background: #0d0d0d;
}

.yrl-cart-quantity input.qty {
  width: 48px; padding: 0.55rem 0.2rem; background: transparent; border: none;
  color: #fff; text-align: center; font-weight: 800;
}

.yrl-cart-quantity input.qty::-webkit-outer-spin-button,
.yrl-cart-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.yrl-cart-quantity input.qty[type=number] { -moz-appearance: textfield; }

.yrl-qty-btn {
  width: 30px; height: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: none; color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: background 0.2s ease;
}

.yrl-qty-btn:hover { background: var(--yrl-color-accent); }
.yrl-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.yrl-cart-subtotal { align-items: flex-end; }

/* Bouton "Mettre à jour le panier" natif — requis par le cart.js de
   WooCommerce (déclenché en JS après un changement de quantité),
   masqué visuellement mais jamais en display:none pour rester
   déclenchable par un clic programmatique et accessible au lecteur
   d'écran. */
.yrl-cart-update-native.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.yrl-cart-actions {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.yrl-cart-coupon { display: flex; flex-direction: column; gap: 0.45rem; }

.yrl-cart-coupon label {
  color: rgba(255, 255, 255, 0.42); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

.yrl-cart-coupon div { display: flex; gap: 0.5rem; }

.yrl-cart-coupon input {
  min-width: 180px; padding: 0.72rem 0.85rem; background: #0d0d0d; border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px; color: #fff;
}

.yrl-cart-primary, .yrl-cart-secondary, .yrl-cart-page .checkout-button, .yrl-cart-page .wc-proceed-to-checkout .button {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px;
  padding: 0.75rem 1rem !important; border: none !important; border-radius: 8px !important;
  text-decoration: none !important; font-size: 0.85rem !important; font-weight: 800 !important; cursor: pointer;
}

.yrl-cart-primary, .yrl-cart-page .checkout-button, .yrl-cart-page .wc-proceed-to-checkout .button {
  background: var(--yrl-color-accent) !important; color: #fff !important;
}

.yrl-cart-secondary { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }

.yrl-cart-summary { position: sticky; top: calc(var(--yrl-header-height) + 1rem); padding: 1.1rem; }

/* GEO-001 / PRD-020 (29/07) : ligne "Livraison — à partir de / Gratuit"
   sous le résumé panier natif (woocommerce_cart_totals), + widget code postal. */
.yrl-cart-shipping-estimate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.yrl-cart-shipping-from { opacity: 0.7; margin-right: 0.3rem; font-size: 0.8rem; }

.yrl-cart-shipping-free { color: var(--yrl-color-accent); font-weight: 800; }

/* Mention "Gratuit" (violet), réutilisée par la ligne récap "Livraison"
   ci-dessus, le choix grouper/séparer (yrl-shipment-preference) et la
   ligne "Livraison le..." — même classe que product-layout.css. */
.yrl-shipping-free-tag { color: var(--yrl-color-accent); font-weight: 700; }

.yrl-geo-postal-widget {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  opacity: 0.7;
}

.yrl-geo-edit-link {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}

.yrl-geo-edit-link:hover { color: var(--yrl-color-accent); }

.yrl-geo-postal-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.yrl-geo-postal-input {
  width: 6.5rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.yrl-geo-postal-submit {
  background: var(--yrl-color-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.yrl-cart-summary > h2 { margin: 0 0 0.8rem; font-size: 1rem; font-weight: 800; }

.yrl-cart-summary .cart_totals { width: 100%; }
.yrl-cart-summary .cart_totals h2 { display: none; }

.yrl-cart-summary table { width: 100%; border-collapse: collapse; color: #fff; }

.yrl-cart-summary th, .yrl-cart-summary td {
  padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: left; vertical-align: top;
}

.yrl-cart-summary td { text-align: right; font-weight: 800; }
.yrl-cart-summary th { color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; }

.yrl-cart-summary .wc-proceed-to-checkout { padding: 1rem 0 0; }
.yrl-cart-summary .wc-proceed-to-checkout a { width: 100%; box-sizing: border-box; }

.yrl-cart-slider-section {
  margin-top: var(--yrl-spacing-lg); padding-top: var(--yrl-spacing-md); padding-bottom: var(--yrl-spacing-md);
}

.yrl-cart-slider-section .sectiontitle { max-width: 1360px; margin-left: auto; margin-right: auto; }

.yrl-cart-empty {
  max-width: 760px; margin: 0 auto var(--yrl-spacing-lg); padding: var(--yrl-spacing-lg); text-align: center;
}

.yrl-cart-empty .yrl-cart-primary { margin-top: 1.25rem; }

@media (max-width: 1024px) {
  .yrl-cart-layout { grid-template-columns: 1fr; }
  .yrl-cart-summary { position: static; }
}

@media (max-width: 700px) {
  .yrl-cart-page { padding: var(--yrl-spacing-md) 1rem var(--yrl-spacing-lg); }
  .yrl-cart-form { padding: 0.75rem; }
  .yrl-cart-item { grid-template-columns: 86px 1fr; padding: 0.75rem; }
  .yrl-cart-item-controls { grid-template-columns: 1fr; }
  .yrl-cart-subtotal { align-items: flex-start; }
  .yrl-cart-actions, .yrl-cart-coupon div { flex-direction: column; align-items: stretch; }
  .yrl-cart-coupon input { min-width: 0; }
}
/* MIX-005 (29/07) : choix grouper/séparer les colis, affiché au-dessus
   du résumé panier via woocommerce_before_cart_totals — uniquement
   quand le panier mélange plusieurs délais (voir multi-colis.php §18.5). */
.yrl-shipment-preference {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: opacity 0.2s ease;
}

.yrl-shipment-preference__title {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.yrl-shipment-preference label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.yrl-shipment-preference input[type="radio"] {
  accent-color: var(--yrl-color-accent);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* 02/08 : prix estimé entre parenthèses, poussé à droite de chaque
   option (label en flex-row, __price prend la place restante via
   margin-left:auto — __text reste aligné à gauche, aucun changement
   pour les paniers sans __price puisque la classe n'est alors pas
   rendue). */
.yrl-shipment-preference__text { flex: 1 1 auto; }

.yrl-shipment-preference__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.yrl-shipment-preference__price {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.5rem;
  font-weight: 700;
  white-space: nowrap;
}

/* "Livraison dès le... — et le..." — sous le bouton "Valider la commande"
   (woocommerce_after_cart_totals, toujours dans .cart_totals). */
.yrl-cart-delivery-date-line {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ============================================================
 * CRT-017 — Écran de chargement panier (remplace le "flash blanc")
 * ─────────────────────────────────────────────────────────────
 * Deux mécanismes à couvrir séparément, sur cette seule page (le
 * thème est sombre, l'overlay blanc par défaut de WooCommerce y
 * est particulièrement visible) :
 *
 * 1. Rafraîchissements NATIFS WooCommerce (changement de quantité,
 *    application d'un code promo) — déjà bloqués par WC core via
 *    jQuery blockUI (`form.block()`), avec un overlay BLANC par
 *    défaut (`overlayCSS: { background: '#fff' }`). On ne réinvente
 *    pas ce mécanisme de blocage (il fonctionne déjà) : on réhabille
 *    juste son overlay + son spinner pour rester sur le thème sombre.
 *    Même style de spinner que celui déjà utilisé au checkout
 *    (`.yrl-shipping-loading__spinner`, CHK-016) — cohérence visuelle
 *    entre les deux écrans.
 *
 * 2. Rafraîchissements CUSTOM (CartService.applyFragments/fadeReplace :
 *    suppression d'article, MIX-005 grouper/séparer, GEO-001 code
 *    postal) — géré en JS via un fondu court plutôt qu'un remplacement
 *    instantané (voir cart-service.js/cart.js). Classes ci-dessous.
 *    Candidat retenu pour devenir la convention `CRT-018` (fondu site
 *    entier) une fois validé ici.
 * ============================================================ */

body.woocommerce-cart .blockUI.blockOverlay {
  background: var(--yrl-color-bg-mid) !important;
  opacity: 0.85 !important;
}

body.woocommerce-cart .blockUI.blockOverlay::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  margin: -0.7rem 0 0 -0.7rem;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--yrl-color-accent);
  border-radius: 50%;
  animation: yrl-spin 0.7s linear infinite;
}

@keyframes yrl-spin {
  to { transform: rotate(360deg); }
}

.yrl-fade-swap-out {
  opacity: 0 !important;
  transition: opacity 0.15s ease;
}

.yrl-fade-swap-in {
  opacity: 0;
  animation: yrl-fade-in 0.2s ease forwards;
}

@keyframes yrl-fade-in {
  to { opacity: 1; }
}

/* CRT-020 (10/08) — en-tête au-dessus des groupes d'articles "retardés"
   (mode "Recevoir dès que prêt...", colis séparés uniquement — voir
   $yrl_show_delay_headers dans woocommerce/cart/cart.php). Élément
   frère des .yrl-cart-item à l'intérieur de .yrl-cart-items (flex
   column), volontairement discret : ce n'est qu'une info de contexte,
   pas une carte. */
.yrl-cart-delay-heading {
  margin: 0.4rem 0 -0.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--yrl-color-accent);
}
/* ============================================================
 * CRT-021 (10/08) — Section "hors stock"
 * ─────────────────────────────────────────────────────────────
 * Réutilise directement .yrl-cart-item/-media/-main/-heading/-options
 * (styles déjà définis plus haut) pour rester visuellement cohérent
 * avec la liste principale — seuls les éléments propres à cette
 * section (en-tête, variante grisée de la carte, bouton "Me notifier")
 * sont ajoutés ici.
 * ============================================================ */

.yrl-cart-out-of-stock {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Le conteneur existe TOUJOURS dans le DOM (voir render-items.php) pour
   rester une cible valide de fragment AJAX — cette règle garantit que
   l'attribut [hidden] l'emporte réellement sur le display:flex ci-dessus
   (même spécificité CSS ; sans ce !important, hidden serait ignoré). */
.yrl-cart-out-of-stock[hidden] {
  display: none !important;
}

.yrl-cart-out-of-stock__heading {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Carte légèrement estompée pour marquer visuellement que ces
   articles ne font pas partie de la commande en l'état — sans les
   griser au point de devenir illisibles (le client doit pouvoir
   identifier facilement quel produit est concerné). */
.yrl-cart-item--out-of-stock {
  opacity: 0.7;
}

.yrl-cart-item--out-of-stock .yrl-cart-item-media {
  filter: grayscale(0.6);
}

/* Bouton "Me notifier" déplacé dans la ligne d'en-tête (titre + bouton +
   suppression) suite au retour du 10/08 — le titre prend l'espace
   disponible (flex-grow), ce qui pousse naturellement bouton + suppression
   ensemble à droite, sans changer l'en-tête de la liste principale
   (.yrl-cart-item-heading est partagée entre les deux, ce correctif est
   donc scopé à .yrl-cart-item--out-of-stock uniquement). */
.yrl-cart-item--out-of-stock .yrl-cart-item-heading {
  flex-wrap: wrap;
}

.yrl-cart-item--out-of-stock .yrl-cart-item-heading h2 {
  flex: 1 1 auto;
}

.yrl-cart-item-oos-price {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 800;
}

.yrl-cart-notify-btn {
  align-self: center;
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--yrl-color-accent);
  border-radius: 999px;
  color: var(--yrl-color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.yrl-cart-notify-btn:hover {
  background: var(--yrl-color-accent);
  color: #fff;
}