/* =============================================================
   YURLED — PDP v2 — product-configurator.css
   ─────────────────────────────────────────────────────────────
   Habillage du configurateur généré automatiquement par main.js
   (setupVariationTabs, table WooCommerce native masquée) : passage
   de simples boutons à de vraies "cartes" de sélection avec coche,
   légère élévation et changement de bordure au clic — sera repris
   en JS pur (verrouillage progressif réel) en Phase 3, mais le
   habillage visuel est déjà celui visé.

   Éléments générés par le JS (ne pas renommer) :
     .custom-configurator-container, .tabs-nav, .nav-item,
     .tabs-content, .tab-panel, .swatch-btn
   ───────────────────────────────────────────────────────────── */

.product-selection-area .variations { display: none !important; }
.woocommerce-variation-add-to-cart { display: flex; margin: 0; padding: 0; }
.single_variation_wrap .woocommerce-variation { display: none; height: 0; overflow: hidden; }
.woocommerce-variation-price, .woocommerce-variation-availability { display: none; }

form.cart:not(.variations_form) { display: flex; gap: 10px; margin: 0; }

.custom-configurator-container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* ── Étapes (nav) ── */
.tabs-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  counter-reset: yrlp-step;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1rem 1.2rem;
  background: #161616;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  counter-increment: yrlp-step;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.nav-item::before {
  content: counter(yrlp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 800;
  transition: background 0.25s ease, color 0.25s ease;
}

.nav-item.active {
  background: #2b2b2b;
  color: #fff;
}

.nav-item.active::before {
  background: #404040;
  color: #fff;
}

.nav-item.is-done::before {
  background: #1e1e1e;
  color: #fff;
  content: '✓';
  font-size: 0.8rem;
}

.nav-item.is-done.active::before {
  background: var(--yrl-color-accent);
  color: #fff;
  content: '✓';
  font-size: 0.8rem;
}

/* Étape pas encore accessible (Phase 3 JS : product-variation.js) */
.nav-item.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.nav-item.is-locked .curr-val { display: none; }

.nav-item .curr-val {
  color: #6a6a6a;
  font-size: 0.88rem;
  font-weight: 600;
}

.nav-item.active .curr-val { color: #8e4cea; opacity: 0.85; }

/* ── Contenu des étapes ── */
.tab-panel {
  display: none;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 0.25rem 0 0.5rem;
}

.tab-panel.active { display: flex; }

/* ── Cartes de sélection (swatch-btn) ── */
.swatch-btn {
  position: relative;
  padding: 0.85rem 1.3rem;
  background: #141414;
  color: #fff;
  cursor: pointer;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 88px;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.swatch-btn:hover {
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

/* Surcoût par option par rapport à la config "sans option" — calculé en JS (annotateOptionPrices) et
   toujours présent dans le DOM car le récap "Votre configuration" le
   réutilise tel quel (voir .yrlp-summary__delta), mais on ne l'affiche
   plus sur les boutons eux-mêmes : décision produit, pas technique. */
.swatch-btn__delta {
  display: none;
}

/* Même delta réaffiché dans le récap "Votre configuration" */
.yrlp-summary__delta {
  font-size: 0.78em;
  font-weight: 400;
  opacity: 0.6;
}

/* Carte sélectionnée : monte légèrement, bordure accent, ombre douce, coche animée */
.swatch-btn.active {
  background: #2b2b2b;
  color: #fff;
  /*! transform: translateY(-2px); */
}

/*.swatch-btn.active::after {
  content: '✓';
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%) scale(1);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--yrl-color-bg-light);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: yrlp-check-in 0.25s ease;
}*/

@keyframes yrlp-check-in {
  from { transform: translateY(-50%) scale(0); opacity: 0; }
  to   { transform: translateY(-50%) scale(1); opacity: 1; }
}

/* Option indisponible (peut être posé par une future logique de stock
   par variante en Phase 3 — classe prête à l'emploi dès maintenant) */
.swatch-btn.is-unavailable {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}

/* ── Quantité (masquée sur la PDP, comme avant) ── */
.product-selection-area .quantity { display: none !important; }

/* ── Bouton d'ajout au panier ── */
.product-selection-area .single_add_to_cart_button {
  display: block;
  width: 100%;
  margin-top: 1.4rem;
  padding: 1.05rem;
  background: var(--yrl-color-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.product-selection-area .single_add_to_cart_button:hover {
  background: var(--yrl-color-accent-dark);
  transform: translateY(-2px);
}

.product-selection-area .single_add_to_cart_button.disabled {
  background: #1c1c1c;
  color: #555;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.product-selection-area p.stock,
.product-selection-area .stock { display: none; }

/* ── Message « configuration par défaut » ──
   Sous le bouton d'ajout au panier. Disparaît (via [hidden]) dès la
   1ère sélection réelle d'une option — voir product-variation.js. */
.yrlp-default-config-notice {
  margin: 0rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #8a8a8a;
  text-align: center;
}

.yrlp-default-config-notice[hidden] { display: none; }