/* ================================================================
   selezione-dropdown.css — Leonardo Edition
   Mini-anteprima Selezione (dropdown desktop ≥1000px only).
   Aperto da selezione-dropdown.js al click su .util-btn--selezione.
   Posizionamento: position:fixed, coordinate calcolate da JS sotto
   il trigger, allineato al bordo destro del trigger stesso.

   Struttura:
     .sel-dropdown
       ├ .sel-dropdown__header  (titolo + tasto X)
       ├ .sel-dropdown__body    (lista | stato-vuoto, scrollabile)
       │   ├ .sel-dropdown__empty  (stato vuoto)
       │   └ .sel-dropdown__list   (lista item)
       │       └ .sel-item × n
       └ .sel-dropdown__footer  (CTA link, solo se lista piena)
================================================================ */

/* ── Container ─────────────────────────────────────────────────── */
.sel-dropdown {
  position: fixed;
  /*
    250 = stesso livello del dropdown Catalogo (dropdown.css).
    Deve stare SOPRA il megamenu (160), altrimenti i pannelli
    Prodotti/Tessuti aperti coprono la lista selezione.
    Sotto i popup modali di prodotto/tessuto (500).
    Scala: header 100 · backdrop 150 · megamenu 160 · drawer 200 · dropdown 250
  */
  z-index: 250;
  width: 380px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-hairline);
  box-shadow: 0 4px 24px rgba(14, 14, 13, 0.07);
  display: flex;
  flex-direction: column;

  /* Animazione apertura: fade + slight slide-down */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity     200ms var(--ease-out),
    transform   200ms var(--ease-out),
    visibility  0ms   linear 200ms;    /* delay: sparisce DOPO il fade-out */
}

.sel-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity   200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0ms  linear 0ms;       /* no delay su apertura */
}


/* ── Header ────────────────────────────────────────────────────── */
.sel-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--color-hairline);
  flex-shrink: 0;
}

.sel-dropdown__title {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Count [n] in header: tono più basso */
.sel-dropdown__hcount {
  color: var(--color-mid);
  font-weight: 400;
}

.sel-dropdown__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-mid);
  padding: 0;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.sel-dropdown__close:hover {
  color: var(--color-accent);
}


/* ── Body ──────────────────────────────────────────────────────── */
.sel-dropdown__body {
  flex: 1;
  overflow-y: auto;
  max-height: 350px;
  overscroll-behavior: contain;
}

/* Scrollbar discreta — WebKit */
.sel-dropdown__body::-webkit-scrollbar       { width: 3px; }
.sel-dropdown__body::-webkit-scrollbar-track { background: transparent; }
.sel-dropdown__body::-webkit-scrollbar-thumb {
  background-color: var(--color-hairline);
  border-radius: 2px;
}


/* ── Stato vuoto ───────────────────────────────────────────────── */
.sel-dropdown__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-40) var(--space-24);
  min-height: 180px;
  text-align: center;
}

.sel-dropdown__empty-text {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-mid);
}

.sel-dropdown__empty-link {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.sel-dropdown__empty-link:hover {
  color: var(--color-accent-hover);
}


/* ── Lista item ────────────────────────────────────────────────── */
.sel-dropdown__list {
  list-style: none;
}


/* ── Singolo item ──────────────────────────────────────────────── */
.sel-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  overflow: hidden;        /* necessario per l'animazione height-collapse */
}

/*
  Hairline tra item: solo DOPO il primo.
  Tecnica standard: selector + ~ per non mettere bordo sopra il primo
  né sotto l'ultimo senza JavaScript.
*/
.sel-item + .sel-item {
  border-top: 1px solid var(--color-hairline);
}

/* Variante "in rimozione" — gestita via inline style da JS,
   qui solo come reference: transition inline sovrascrive il default */
.sel-item.is-removing {
  opacity: 0;
}

.sel-item__info {
  flex: 1;
  min-width: 0;              /* previene overflow testo in flex */
}

/* Nome in contesto di interfaccia: Satoshi (Instrument Serif e' da titoli, da 20px in su) */
.sel-item__name {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel-item__details {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-mid);
  line-height: 1.4;
}

.sel-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-mid);
  padding: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.sel-item__remove:hover {
  color: var(--color-accent);
}


/* ── Footer ────────────────────────────────────────────────────── */
.sel-dropdown__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-hairline);
}

.sel-dropdown__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-16) var(--space-20);
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.sel-dropdown__cta:hover {
  color: var(--color-accent-hover);
}


/* ── Controllo quantità inline [−] N [+] ──────────────────────── */
/*
  Stile coerente con .qty-selector del form preventivo:
  stessa tipologia border-hairline / hover bordeaux.
  Versione compatta: altezza 28px, tasti 22px di larghezza.
*/
.sel-item__qty-ctrl {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  border: 1px solid var(--color-hairline);
  border-radius: 2px;
  overflow: hidden;
}

.sel-item__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  font-family: var(--font-utility);
  font-size: var(--text-13);
  line-height: 1;
  padding: 0;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out);
}

/* Separatori interni: − a destra, + a sinistra */
.sel-item__qty-btn--minus { border-right: 1px solid var(--color-hairline); }
.sel-item__qty-btn--plus  { border-left:  1px solid var(--color-hairline); }

@media (hover: hover) {
  .sel-item__qty-btn:hover:not(:disabled) {
    background-color: rgba(14, 14, 13, 0.05);
    color: var(--color-accent);
  }
}

.sel-item__qty-btn:active:not(:disabled) {
  background-color: rgba(14, 14, 13, 0.10);
}

.sel-item__qty-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.sel-item__qty-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  z-index: 1;
}

.sel-item__qty-val {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  color: var(--color-ink);
  min-width: 22px;
  text-align: center;
  letter-spacing: 0;
  user-select: none;
  padding-inline: 2px;
}

/* Flash bordeaux 200ms sulla cifra — feedback immediato, non celebrativo */
@keyframes sel-qty-flash {
  0%   { color: var(--color-ink);    }
  35%  { color: var(--color-accent); }
  100% { color: var(--color-ink);    }
}

.sel-item__qty-val.is-flashing {
  animation: sel-qty-flash 200ms var(--ease-out) forwards;
}