/* ==========================================================================
   Lista variazioni del prodotto — stile griglia
   ==========================================================================

   Caricato SOLO sulla scheda di un prodotto variabile (vedi
   lvdp_enqueue_assets() nel file principale del plugin).

   La struttura a griglia responsive (4 colonne desktop, 3 su schermi medi,
   2 su tablet/mobile) è già gestita dalle classi del tema
   (.grid.grid-4col.xxl-grid-4col.xl-grid-3col.lg-grid-3col.md-grid-2col.
   sm-grid-2col.xs-grid-2col, le stesse usate in woocommerce/archive-product.php)
   — qui restano solo le regole per gli elementi specifici di questo plugin
   (card, prezzo, righe attributi, disponibilità).

   Le custom properties --zerodna-* sono definite sul :root dal tema
   (assets/css/custom.css) — essendo variabili CSS globali, restano
   utilizzabili qui anche se questo foglio di stile appartiene a un plugin
   diverso: la cascata le risolve in base al DOM, non al file di provenienza.
   ========================================================================== */

.lvdp-variation-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lvdp-variation-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.lvdp-price {
    line-height: 1.3;
    text-align: center;
}

/* Prezzo scontato: il vecchio prezzo barrato deve essere grigio — sia il
   testo sia la linea della barratura. Il tema aggiunge già la classe
   "text-muted" al <bdi> dentro <del> (vedi ppstore_price_html() in
   inc/woocommerce.php), che ne cambia il colore del testo, ma la sbarra
   di un <del> segue per default il colore dell'elemento <del> stesso, non
   quello del figlio: la impostiamo esplicitamente qui, altrimenti — a
   seconda del browser — può restare del colore di testo "pieno" invece
   che grigio. */
.lvdp-price del {
    color: var(--zerodna-muted, #6B7B75);
    text-decoration-color: var(--zerodna-muted, #6B7B75);
}

.lvdp-price del bdi {
    color: inherit;
}

/* ── Righe attributi: alternate in tonalità più chiare del blu ZeroDNA ── */
.lvdp-attributes {
    border-radius: 4px;
    overflow: hidden;
}

.lvdp-attr-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 13px;
}

.lvdp-attr-row-odd {
    background-color: rgba(24, 148, 189, 0.05);
}

.lvdp-attr-row-even {
    background-color: rgba(24, 148, 189, 0.11);
}

.lvdp-attr-name {
    font-weight: 600;
    color: var(--zerodna-dark, #252525);
    margin-right: 10px;
}

.lvdp-attr-value {
    color: var(--zerodna-muted, #6B7B75);
    text-align: right;
}

/* Righe "specifiche" ricavate dalla Descrizione della variazione (vedi
   render_description_specs() in class-lvdp-render.php): a differenza di
   .lvdp-attr-name/.lvdp-attr-value qui non c'è distinzione nome/valore in
   due span separati, quindi nessun grassetto — solo testo normale,
   allineato a sinistra come tutte le altre righe del blocco. */
.lvdp-attr-full {
    font-weight: 400;
    color: var(--zerodna-dark, #252525);
    text-align: left;
}

/* ── Disponibilità ── */
.lvdp-availability {
    text-align: center;
}

.lvdp-stock-in {
    color: var(--zerodna-green, #39AD52);
    font-weight: 500;
}

.lvdp-stock-out {
    color: #b3261e;
    font-weight: 500;
}

.lvdp-stock-backorder {
    color: var(--zerodna-blue, #1894BD);
    font-weight: 500;
}

/* ── Form aggiunta al carrello: spinge sempre in fondo alla card, anche a
   altezze diverse tra i vari blocchi della stessa riga della griglia ── */
.lvdp-add-to-cart-form {
    margin-top: auto;
}

/* Segnaposto al posto del vecchio pulsante disabilitato "Esaurito" nel box
   variazione esaurita: stessa identica struttura del selettore quantità
   (.quantity mb-10px, vedi class-lvdp-render.php), così la sua altezza
   combacia sempre con quella reale del box "disponibile" — anche se in
   futuro cambia nel tema — senza valori fissi in px. La disponibilità è
   già segnalata dalla scritta rossa in .lvdp-stock-out poco sopra: qui
   serve solo lo spazio, non il contenuto. */
.lvdp-quantity-placeholder {
    visibility: hidden;
}

.lvdp-empty {
    padding: 15px 0;
    color: var(--zerodna-muted, #6B7B75);
}

/* ==========================================================================
   Barra filtri — una <select> per attributo (più una per il prezzo),
   stessa convenzione già usata dal tema per il dropdown "Ordina per" dello
   shop (.form-select.border-0.background-position-right): l'aspetto della
   select arriva dal tema, qui solo spaziatura, sfondo e colore testo.
   ========================================================================== */

.lvdp-filters-bar {
    background-color: var(--zerodna-blue, #1894BD);
    border-radius: 6px;
    padding: 5px;
}

/* Etichette degli attributi (es. "Colore spoon", "Prezzo"): testo bianco
   sul fondo blu della barra. */
.lvdp-filters-bar .lvdp-filter-group > span {
    color: #fff;
}

/* La select in sé resta con sfondo chiaro e testo scuro (leggibilità del
   valore selezionato) — solo l'etichetta sopra diventa bianca. */
.lvdp-filter-group select.form-select {
    background-color: #fff;
    padding: 6px 12px;
}

/* Barra dei filtri attivi (badge), fuori da .lvdp-filters-bar: usa già le
   classi globali del tema (.ppstore-active-filters/.ppstore-filter-chip/
   .ppstore-filter-clear-all), nessuna regola aggiuntiva necessaria. */

/* ==========================================================================
   Barra ordinamento — un pulsante toggle indipendente per criterio (non
   una select: click = attiva quel campo, ricliccare lo stesso = inverte
   crescente/decrescente), su fondo verde ZeroDNA (per distinguerla dalla
   barra filtri, in blu) con testo bianco.
   ========================================================================== */

.lvdp-sort-bar {
    background-color: var(--zerodna-green, #39AD52);
    border-radius: 6px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lvdp-sort-label {
    color: #fff;
    margin-right: 4px;
}

.lvdp-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lvdp-sort-toggle:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* ── Pulsante "Avvisami quando disponibile" (plugin terzo "Waitlist
   Woocommerce Premium" - Xoo): stesse dimensioni/spaziature del pulsante
   "Aggiungi al carrello" (.single_add_to_cart_button.btn.btn-medium —
   padding 10px 20px e font-size 14px per .btn-medium, vedi
   assets/css/custom.css del tema; border-radius 5px per .border-radius-5px),
   cosi' il box "esaurito" e quello "disponibile" risultano sempre della
   stessa altezza, indipendentemente da quale dei due viene stampato in
   quella posizione della card. Solo il box model viene sovrascritto, non
   il colore: resta quello di default del plugin, utile a distinguere
   visivamente lo stato "esaurito" da quello "disponibile". Il selettore
   ".xoo-wl-open-form-btn" è la classe reale del pulsante generato dal
   plugin (già verificata in produzione, vedi override width preesistente
   qui sotto prima di questa modifica). */
.lvdp-waitlist-wrap {
    width: 100%;
}
.lvdp-waitlist-wrap .xoo-wl-open-form-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 5px;
    border: none;
    box-sizing: border-box;
}

/* Campo attualmente attivo: pillola bianca piena, testo verde scuro. */
.lvdp-sort-toggle.lvdp-sort-active {
    background-color: #fff;
    color: var(--zerodna-green-dark, #2E8A42);
    font-weight: 700;
}

.lvdp-sort-toggle.lvdp-sort-active:hover {
    background-color: #fff;
}

/* Icona freccia: visibile e nella direzione corrente solo sul pulsante
   attivo; sui pulsanti inattivi resta presente ma sbiadita, come indizio
   che il campo è ordinabile. */
.lvdp-sort-icon-inactive {
    opacity: 0.5;
}