/* NightBudz — panier coulissant. */

/* Spinner de chargement (avant injection AJAX du contenu). */
.nb-cart-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
.nb-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(138,43,226,0.25);
  border-top-color: var(--nb-green); animation: nb-spin 0.8s linear infinite; }
@keyframes nb-spin { to { transform: rotate(360deg); } }

.nb-cart-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.nb-cart-overlay.is-open { opacity: 1; }

.nb-sidecart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(440px, 100vw);
  border-left: 1px solid var(--nb-purple); box-shadow: -10px 0 60px rgba(138,43,226,0.35);
  transform: translateX(102%); transition: transform var(--duration-slow) var(--ease-out);
  display: flex; flex-direction: column;
}
.nb-sidecart.is-open { transform: translateX(0); }

.nb-sidecart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid rgba(138,43,226,0.35); }
.nb-sidecart-title { display: flex; align-items: center; gap: 10px; }
.nb-sidecart-title span:nth-child(2) { font: var(--text-h2); font-family: var(--font-display); color: var(--text-primary); }
.nb-sidecart-count { font: var(--text-body-sm); color: var(--text-tertiary); }
.nb-sidecart-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; display: flex; }
.nb-sidecart-close:hover { color: var(--nb-magenta); }

.nb-sidecart-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overscroll-behavior: contain; }
.nb-sidecart-loading { padding: 40px; text-align: center; color: var(--text-tertiary); }

/* Vide */
.nb-cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px; text-align: center; }
.nb-cart-empty-title { font: var(--text-h3); font-family: var(--font-heading); color: var(--text-secondary); }

/* Liste d'articles */
.nb-cart-items { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.nb-cart-item { display: flex; gap: 13px; align-items: center; }
.nb-cart-item img { width: 62px; height: 62px; object-fit: cover; border: 1px solid rgba(138,43,226,0.5); flex-shrink: 0;
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.nb-cart-item-info { flex: 1; min-width: 0; }
.nb-cart-item-name { font: var(--text-label-lg); font-family: var(--font-heading); color: var(--text-primary); }
.nb-cart-item-meta { font: var(--text-caption); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: 6px;
  display: flex; align-items: center; gap: 7px; }
.nb-cart-weight-wrap { display: inline-block; }
.nb-cart-weight { height: 26px; padding: 0 22px 0 9px; font: 700 11px/1 var(--font-mono); background: #050507; border-color: rgba(138,43,226,0.5); }
.nb-cart-weight-wrap::after { right: 8px; font-size: 7px; }
.nb-cart-item-type { color: var(--text-tertiary); }
.nb-cart-item-row { display: flex; align-items: center; gap: 10px; }
.nb-cart-item-price { font: 700 15px/1 var(--font-mono); color: var(--nb-green); text-shadow: var(--text-glow-green); }
.nb-cart-item-remove { background: none; border: none; color: var(--text-tertiary); cursor: pointer; align-self: flex-start; display: flex; }
.nb-cart-item-remove:hover { color: var(--nb-danger); }
.nb-cart-qty-mini { display: flex; align-items: center; border: 1px solid rgba(138,43,226,0.4); background: #050507;
  clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }
.nb-cart-qty-mini button { width: 26px; height: 26px; background: transparent; border: none; color: var(--nb-purple); font: 700 15px/1 var(--font-mono); cursor: pointer; }
.nb-cart-qty-mini span { width: 24px; text-align: center; font: 700 13px/1 var(--font-mono); color: var(--nb-green); }

/* Cross-sell dans le side-cart */
.nb-cart-suggest { padding: 14px 22px; border-top: 1px solid rgba(138,43,226,0.2); }
.nb-cart-suggest-title { font: var(--text-caption); color: var(--nb-magenta); text-transform: uppercase; letter-spacing: var(--tracking-widest); margin-bottom: 12px; }
.nb-suggest-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
  padding: 10px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-default); }
.nb-suggest-item img { width: 48px; height: 48px; object-fit: cover; border: 1px solid rgba(138,43,226,0.4); flex-shrink: 0;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.nb-suggest-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.nb-suggest-name { font: var(--text-label); font-family: var(--font-heading); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-suggest-price { font: 700 12px/1 var(--font-mono); color: var(--nb-green); }
/* Ligne de contrôles : capsule grammage (petite) + quantité. */
.nb-suggest-controls { display: flex; align-items: center; gap: 8px; }
.nb-suggest-select { flex: 0 0 auto; width: 116px; min-width: 0; height: 32px; padding: 0 8px; font-size: 11px;
  text-align: center; text-align-last: center; }
.nb-suggest-select option { text-align: center; }
.nb-suggest-qty { flex-shrink: 0; display: inline-flex; align-items: center; height: 32px;
  border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); }
.nb-suggest-qty button { width: 26px; height: 30px; border: 0; background: transparent; color: var(--text-secondary);
  font-size: 16px; line-height: 1; cursor: pointer; transition: color .12s, background .12s; }
.nb-suggest-qty button:hover { color: var(--nb-green); background: rgba(57,255,20,0.1); }
.nb-suggest-qty .nb-qty-val { min-width: 22px; text-align: center; font: 700 12px/1 var(--font-mono); color: var(--text-primary); }
/* Bouton « Ajouter au panier » du cross-sell : compact mais clair. */
.nb-suggest-add { width: 100%; justify-content: center; gap: 6px; padding: 9px 12px; font-size: 12px; }
.nb-suggest-add svg { width: 15px; height: 15px; }

/* Pied du panier (compact pour laisser de la place aux articles) */
.nb-cart-foot { padding: 14px 22px 18px; border-top: 1px solid rgba(138,43,226,0.35); background: rgba(5,5,7,0.55); }
.nb-cart-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.nb-cart-mode { padding: 8px; }
.nb-cart-mode { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; cursor: pointer;
  font: var(--text-label); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default);
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); transition: all var(--duration-base) var(--ease-out); }
.nb-cart-mode.is-active { background: rgba(57,255,20,0.1); color: var(--nb-green); border-color: var(--nb-green); box-shadow: var(--glow-green-sm); }

/* Barre de paliers */
.nb-ladder { margin-bottom: 2px; }
.nb-ladder-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font: var(--text-body-sm); color: var(--text-primary); }
.nb-ladder-head b { color: var(--nb-green); text-shadow: var(--text-glow-green); }
.nb-ladder-track { position: relative; height: 8px; margin: 0 16px; background: #050507; border: 1px solid rgba(138,43,226,0.3); border-radius: 999px; }
.nb-ladder-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--nb-green-dim), var(--nb-lime));
  box-shadow: var(--glow-green-sm); border-radius: 999px; transition: width var(--duration-slow) var(--ease-out); }
.nb-ladder-node { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%;
  background: var(--nb-obsidian-4); border: 2px solid var(--nb-hairline); transition: all var(--duration-base) var(--ease-out); }
.nb-ladder-node.is-done { background: var(--nb-lime); border-color: var(--nb-lime); box-shadow: var(--glow-green-sm); }
/* Montant + récompense sous chaque point ; les libellés d'extrémité s'alignent sur leur bord. */
.nb-ladder-labels { position: relative; margin: 9px 16px 0; height: 18px; }
.nb-ladder-label { position: absolute; top: 0; transform: translateX(-50%); text-align: center;
  display: flex; flex-direction: column; gap: 3px; width: max-content; max-width: 110px; }
.nb-ladder-label--end   { transform: translateX(-100%); text-align: right; align-items: flex-end; }
.nb-ladder-label--start { transform: translateX(0);     text-align: left;  align-items: flex-start; }
.nb-ladder-amount { font: 800 14px/1 var(--font-mono); color: var(--text-secondary); }
.nb-ladder-reward { font: 700 10px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-tertiary); }
.nb-ladder-label.is-done .nb-ladder-amount { color: var(--nb-green); text-shadow: var(--text-glow-green); }
.nb-ladder-label.is-done .nb-ladder-reward { color: var(--text-secondary); }

/* Totaux */
.nb-cart-line { display: flex; justify-content: space-between; font: var(--text-body-sm); color: var(--text-secondary); margin: 12px 0 5px; }
.nb-cart-line + .nb-cart-line { margin: 0 0 10px; }
.nb-cart-line .nb-mono { font-family: var(--font-mono); }
.nb-cart-line .is-free { color: var(--nb-green); text-shadow: var(--text-glow-green); }
.nb-cart-total { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--border-default); margin-bottom: 12px; }
.nb-cart-total-label { font: var(--text-label); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.nb-cart-total-val { font: 800 28px/1 var(--font-mono); color: var(--nb-green); text-shadow: var(--text-glow-green); }
.nb-cart-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font: var(--text-caption); color: var(--text-tertiary); letter-spacing: var(--tracking-wide); text-align: center; }

/* Mobile : tout le side-cart défile d'un bloc (la barre de progression n'est plus fixe). */
@media (max-width: 640px) {
  .nb-sidecart-body { display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .nb-cart-items { overflow: visible; flex: none; }
  .nb-cart-foot { position: static; }
}