/* ── Vouchiva Public CSS ─────────────────────────────────────── */
:root {
    --vch-primary:  #4038C9;
    --vch-accent:   #5B4FE8;
    --vch-bg:       #f8f9fa;
    --vch-card-bg:  #ffffff;
    --vch-radius:   12px;
    --vch-shadow:   0 4px 20px rgba(0,0,0,.08);
    --vch-font:     inherit;
    --vch-gradient: linear-gradient(135deg, #4038C9 0%, #5B4FE8 55%, #7C6CF0 100%);
    --vch-ring:     0 0 0 4px rgba(91,79,232,.12);
}

/* Shop grid — larghezza intera (supera il max-width del tema) + almeno 3 card per riga da 600px in su (Patrick, 05/09/2026) */
#vouchiva-app.vouchiva-shop {
    max-width: 1200px !important;
    width: 100%;
    box-sizing: border-box;
    /* Senza margine verticale il modulo finiva incollato all'header/footer
       del tema (Patrick, 09/09/2026). Il centraggio orizzontale (margin
       left/right: auto) prima di questo fix NON era dichiarato qui: il
       modulo restava centrato solo perché il tema di alpencity.it/
       voucherly applica di suo un "margin: auto !important" ai figli
       diretti dei blocchi is-layout-constrained — un dettaglio del tema,
       non una garanzia del plugin. Segnalato da Patrick il 09/09/2026:
       il centraggio deve essere nostro ed esplicito, non un effetto
       collaterale del tema ospitante (il prodotto sarà installato su
       temi diversi). Scritto con la shorthand "margin" per avere in un
       unico posto sia le due nuove longhand auto sia gli 80px top/bottom
       già presenti. */
    margin: 80px auto !important;
}
/* Margine laterale 10px su mobile (Patrick, 09/09/2026) — il modulo esce
   deliberatamente dal max-width del tema (vedi commento sopra), quindi
   senza questo padding tocca il bordo dello schermo. */
@media (max-width: 640px) {
    #vouchiva-app.vouchiva-shop {
        /* I temi WordPress a blocchi con "padding globale" (classe
           has-global-padding sul contenitore .entry-content, presente su
           alpencity.it) aggiungono IN PIÙ un padding laterale proprio,
           esposto tramite le custom property --wp--style--root--padding-*.
           Questo si sommava al nostro padding di 10px qui sotto, creando
           due fasce vuote laterali ben più larghe di 10px su mobile
           (segnalato da Patrick su alpencity.it il 09/09/2026, evidenziate
           in verde nel pannello Elements/box-model di Chrome DevTools).
           Fix: margine negativo pari esattamente a quel padding tema (se
           il tema non lo definisce, la custom property non esiste e la
           formula vale 0 — nessun effetto su temi senza questa
           impostazione, come "voucherly"), così il modulo torna a toccare
           il bordo dello schermo e SOLO il nostro padding di 10px qui
           sotto resta visibile. !important necessario: verificato dal vivo
           su alpencity.it che senza, una regola propria del tema vince
           comunque sul margin-left/right (stesso principio già usato per
           max-width qui sopra e su .vouchiva-checkout più sotto).

           Bug scoperto il 09/09/2026 (Patrick: "ma non vedi che è allineato
           a sinistra?"): il fix sopra sposta SOLO la posizione del modulo
           (margin negativo), ma non ne allarga la larghezza. Siccome qui
           sopra c'è "width: 100%" esplicito (non "auto"), il browser NON
           ricalcola da solo la larghezza per compensare il margine negativo
           (lo farebbe solo con width:auto) — risultato: il bordo sinistro
           tocca correttamente lo schermo, ma quello destro resta troppo
           indietro, lasciando uno spazio vuoto asimmetrico a destra
           (misurato dal vivo su alpencity.it a 565px di viewport: 79px di
           spazio vuoto a destra). Serve anche allargare esplicitamente la
           larghezza della stessa quantità tolta dal margine negativo —
           stessa tecnica usata da WordPress per i blocchi "alignfull"
           (margine negativo + larghezza aumentata della stessa quantità,
           sempre insieme). */
        margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
        margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
        width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)) !important;
        padding-left: 10px;
        padding-right: 10px;
    }
}
.vouchiva-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    margin: 24px 0;
}
@media (min-width: 600px) {
    .vouchiva-products { grid-template-columns: repeat(3, 1fr); }
}
.vouchiva-card {
    background: var(--vch-card-bg);
    border-radius: var(--vch-radius);
    box-shadow: var(--vch-shadow);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.vouchiva-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

/* Slider immagini prodotto (galleria foto del voucher), frecce e dots dentro la foto (Patrick, 05/09/2026) */
.vouchiva-card-img      { position: relative; }
.vouchiva-slider        { position: relative; width: 100%; height: 180px; overflow: hidden; }
.vouchiva-slider-track  { display: flex; height: 100%; transition: transform .3s ease; }
.vouchiva-slider-track img { width: 100%; height: 180px; object-fit: cover; flex: 0 0 100%; display: block; }
.vouchiva-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(20,20,25,.45); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    backdrop-filter: blur(2px);
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.vouchiva-slider-arrow svg { display: block; margin: 0; } /* SVG, non un glifo di testo: si centra da solo, sempre esatto (Patrick, 06/09/2026) */
.vouchiva-slider-arrow:hover  { background: rgba(20,20,25,.7); box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.vouchiva-slider-arrow:active { transform: translateY(-50%) scale(.92); }
.vouchiva-slider-prev   { left: 8px; }
.vouchiva-slider-next   { right: 8px; }
.vouchiva-slider-dots   {
    position: absolute; bottom: 10px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px; z-index: 2;
}
.vouchiva-slider-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.55); border: none; padding: 0; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.vouchiva-slider-dot.is-active { background: #fff; transform: scale(1.3); }

.vouchiva-card-body    { padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.vouchiva-card-body h3 { margin: 0 0 8px; font-size: 18px; }
.vouchiva-card-body p  { color: #666; font-size: 14px; margin: 0 0 12px; }
.vouchiva-card-footer  { margin-top: auto; }
.vouchiva-card-price   { font-size: 22px; font-weight: 700; color: var(--vch-accent); margin-bottom: 16px; }

/* ── Barra filtri vetrina (Struttura / Visualizza / Mostra) ─────────────
   Copiata e adattata dal modulo Manutenzioni di ac-manager (stesso pattern
   "tab pillola" + "widget tendina a comparsa"), colori sostituiti con la
   palette Vouchiva (Patrick, 09/09/2026). */
.vouchiva-shop-filters { margin: 4px 0 8px; }

/* Scroll orizzontale su mobile invece di andare a capo (come le tab di
   ac-manager) — con la scrollbar nascosta cross-browser (Patrick, 09/09/2026). */
.vch-filter-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* Edge/IE legacy */
}
.vch-filter-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge Chromium */

.vch-filter-tab {
    /* display/font/line-height/box-sizing espliciti: le tab Struttura sono
       <button>, quelle Visualizza/Mostra sono <span> — senza questo reset i
       due elementi HTML hanno un'altezza leggermente diversa di default
       (segnalato da Patrick il 09/09/2026). */
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: 1.3;
    padding: 7px 16px;
    border-radius: 50px;
    background: #f7f6f3;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid #e6e3dd;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.vch-filter-tab:hover:not(.active) {
    border-color: var(--vch-accent);
    color: var(--vch-primary);
}

.vch-filter-tab.active {
    background: var(--vch-gradient);
    border-color: var(--vch-primary);
    color: #fff;
}

/* Widget "Visualizza"/"Mostra": pulsante + tendina a comparsa, posizionata
   via JS (vedi shop.php) per non finire tagliata dal layout della pagina. */
.vch-dropdown-widget { display: contents; }

.vch-dropdown-panel {
    display: none;
    position: fixed;
    background: var(--vch-gradient);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    padding: 8px;
    z-index: 1000000;
    min-width: 170px;
    /* Rete di sicurezza: su schermi molto stretti la tendina non deve mai
       richiedere più spazio di quanto ce ne sia in pagina, altrimenti il
       posizionamento JS (vedi shop.php) non riesce a tenerla allineata
       dentro la barra filtri (Patrick, 09/09/2026). */
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
}

/* display:flex invece di block per usare "gap" tra le voci — mancava
   qualsiasi spaziatura tra una voce e l'altra (es. "Tutti"/"Importo" si
   toccavano direttamente), segnalato da Patrick il 09/09/2026. */
.vch-dropdown-panel.visible { display: flex; flex-direction: column; gap: 4px; }

.vch-dropdown-panel button.vch-filtro-opzione,
.vch-dropdown-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    /* Senza questo, i <label> delle voci "Mostra" (checkbox) restavano al
       box-sizing di default del browser (content-box), mentre i <button>
       delle voci "Visualizza" lo ricevevano "per caso" da una regola
       generica del tema (".../style.css: button{box-sizing:border-box}")
       che non tocca i <label>. Risultato: la voce "Mostra" (es. "Suite
       Panorama") si allargava a larghezza+padding invece che restare
       dentro i suoi 170px, sborda dalla tendina — l'hover appariva quindi
       diverso/storto rispetto alle voci di "Visualizza" (segnalato da
       Patrick su alpencity.it il 09/09/2026). Impostandolo esplicitamente
       qui, entrambi i tipi di voce si comportano allo stesso modo a
       prescindere da cosa fa il tema del sito ospitante. */
    box-sizing: border-box;
    text-align: left;
    font-family: inherit;
}

.vch-dropdown-panel button.vch-filtro-opzione:hover,
.vch-dropdown-panel label:hover { background: rgba(255,255,255,.18); color: #fff; }

.vch-dropdown-panel button.vch-filtro-opzione.attivo { background: rgba(255,255,255,.28); color: #fff; }

/* Checkbox nativo del browser tolto e ridisegnato su misura (era una
   piccola casella grigia squadrata, fuori stile rispetto alla pillola
   arrotondata del resto della tendina — segnalato da Patrick il
   09/09/2026 come "overlay grigino sproporzionato" al passaggio del
   mouse sulla voce). */
.vch-dropdown-panel input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.65);
    border-radius: 4px;
    background: rgba(255,255,255,.12);
    cursor: pointer;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}
.vch-dropdown-panel input[type="checkbox"]:hover { border-color: #fff; }
.vch-dropdown-panel input[type="checkbox"]:checked {
    background: #fff;
    border-color: #fff;
}
.vch-dropdown-panel input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid var(--vch-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Checkout */
/* .vouchiva-checkout è ora solo un wrapper esterno invisibile (centraggio +
   spazio verticale), separato dalla card vera e propria (.vouchiva-checkout-
   wizard, più sotto): un margin-top sull'elemento con lo sfondo bianco
   collassava con il wrapper del tema e spariva visivamente (bug segnalato da
   Patrick il 09/09/2026 — solo il margin-bottom si vedeva). Il padding non
   collassa mai, quindi qui è affidabile su qualsiasi tema. 80px sopra/sotto
   (era 50px di margin): il modulo risultava schiacciato tra header e footer. */
.vouchiva-checkout      {
    padding: 80px 20px;
    /* box-sizing:border-box + width:100% espliciti (09/09/2026): senza
       questi, il fix mobile qui sotto (margine negativo + larghezza calc())
       non avrebbe una base prevedibile — width:auto "si auto-corregge" in
       parte da solo quando il margine diventa negativo, ma non in modo
       preciso/simmetrico su tutti i temi (verificato dal vivo su
       alpencity.it: restava comunque ~15px di spazio vuoto a destra).
       Stessa tecnica esplicita già usata su #vouchiva-app.vouchiva-shop qui
       sopra, per lo stesso motivo: niente affidato a comportamenti
       "automatici" del browser o del tema. */
    box-sizing: border-box;
    width: 100%;
    /* I temi WordPress a blocchi (compreso quello di alpencity.it)
       applicano automaticamente un max-width "larghezza contenuto" globale
       ai figli DIRETTI di un blocco is-layout-constrained (regola del tema
       stesso, tipo ".is-layout-constrained > *"), che vinceva sul nostro
       max-width:1100px interno a .vouchiva-checkout-wizard qui sotto —
       il modulo risultava schiacciato a ~672px invece che largo come
       disegnato (segnalato da Patrick su alpencity.it il 09/09/2026,
       "la larghezza è diventata minuscola"). Stesso motivo per cui
       #vouchiva-app.vouchiva-shop qui sotto ha già !important sul proprio
       max-width — mancava solo su questo wrapper. Nessun limite qui: la
       larghezza vera è comunque disegnata da .vouchiva-checkout-wizard
       (max-width:1100px, margin:0 auto) più sotto. */
    max-width: none !important;
}
/* Badge "Powered by Vouchiva" (white label, Patrick, 09/09/2026): nascosto
   solo sul piano che include il white label (Agency) — vedi
   License::can('white_label') in checkout.php. Discreto, centrato, sotto
   il wizard di checkout. */
.vouchiva-powered-by {
    text-align: center;
    font-size: 12px;
    color: #bbb;
    margin-top: 20px;
}
/* Margine laterale 10px su mobile (Patrick, 09/09/2026) — stessa richiesta
   già applicata a #vouchiva-app.vouchiva-shop: sotto i 640px il padding
   orizzontale di 20px viene ridotto a 10px, lasciando invariato l'80px
   verticale (solo le longhand left/right vengono sovrascritte). */
@media (max-width: 640px) {
    .vouchiva-checkout {
        /* Stesso fix applicato a #vouchiva-app.vouchiva-shop qui sopra: il
           padding globale del tema (custom property --wp--style--root--
           padding-*, presente sui temi a blocchi con "padding globale"
           come quello di alpencity.it) si sommava al nostro, creando due
           fasce laterali vuote più larghe dei 10px previsti (segnalato da
           Patrick il 09/09/2026). Margine negativo per annullarlo — vale 0
           su temi che non definiscono questa custom property. !important
           necessario: verificato dal vivo su alpencity.it che senza, una
           regola propria del tema vince comunque sul margin-left/right.

           Stesso bug scoperto il 09/09/2026 su #vouchiva-app.vouchiva-shop
           qui sopra ("ma non vedi che è allineato a sinistra?"): il margine
           negativo da solo sposta il modulo ma non lo allarga. Con
           box-sizing:border-box + width:100% dichiarati esplicitamente qui
           sopra, serve la stessa larghezza calc() per compensare — identica
           tecnica "alignfull" di WordPress (margine negativo + larghezza
           aumentata della stessa quantità, sempre insieme). */
        margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
        margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
        width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)) !important;
        padding-left: 10px;
        padding-right: 10px;
    }
}
.vouchiva-checkout h2   { font-size: 22px; margin-bottom: 20px; color: var(--vch-primary); }
.vouchiva-step          { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.vouchiva-field         { margin-bottom: 16px; }
.vouchiva-field label   { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #444; }
.vouchiva-field input,
.vouchiva-field textarea { width: 100%; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 15px; transition: border-color .2s; box-sizing: border-box; }
.vouchiva-field input:focus,
.vouchiva-field textarea:focus { outline: none; border-color: var(--vch-accent); }

.vouchiva-toggle-row    { margin-bottom: 16px; }
.vouchiva-summary-card  { display: flex; gap: 14px; align-items: center; background: #f5f5f5; border-radius: 10px; padding: 14px; margin-bottom: 20px; }
.vouchiva-summary-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }

.vouchiva-step-actions  { display: flex; gap: 12px; margin-top: 20px; }

/* Gateways */
.vouchiva-gateway-option {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid #eee; border-radius: 10px; padding: 14px 18px;
    margin-bottom: 10px; cursor: pointer; transition: border-color .2s, background .2s;
}
.vouchiva-gateway-option:hover   { border-color: var(--vch-accent); }
.vouchiva-gateway-option.selected { border-color: var(--vch-accent); background: #f7f6ff; box-shadow: var(--vch-ring); }
.vouchiva-gw-label               { font-weight: 600; }
.vouchiva-gateways-empty {
    font-size: 14px; color: #666; line-height: 1.6;
    background: #fff8e8; border-left: 3px solid #e0a030;
    border-radius: 6px; padding: 14px 16px; margin: 0;
}

/* Campi carta Stripe separati (numero / scadenza / cvv) dentro un pannello
   dedicato: più compatto, elegante e coerente col resto del form invece del
   vecchio blocco largo e spoglio (Patrick, 06/09/2026 v2). */
.vouchiva-stripe-card {
    margin-top: 16px;
    padding: 20px;
    background: #fafafc;
    border: 1px solid #ececf2;
    border-radius: var(--vch-radius);
}
.vouchiva-stripe-field      { margin-bottom: 14px; }
.vouchiva-stripe-field:last-child { margin-bottom: 0; }
.vouchiva-stripe-row        { display: flex; gap: 12px; margin-bottom: 0; }
.vouchiva-stripe-field label,
.vouchiva-stripe-row label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: #767685; margin-bottom: 6px;
}
.vouchiva-stripe-row .vouchiva-stripe-field { flex: 1 1 0; margin-bottom: 0; }

.vouchiva-card-element {
    border: 1.5px solid #e1e1ea; border-radius: 8px; padding: 12px 14px;
    background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.vouchiva-card-element.StripeElement--focus   { border-color: var(--vch-accent); box-shadow: var(--vch-ring); }
.vouchiva-card-element.StripeElement--invalid { border-color: #e5424d; }
.vouchiva-card-element.StripeElement--webkit-autofill { border-color: var(--vch-accent); }

@media (max-width: 480px) {
    .vouchiva-stripe-row { flex-direction: column; gap: 14px; }
}

/* Bank transfer */
.vouchiva-bank-info       { background: #f5f5f5; border-radius: 10px; padding: 20px; margin-top: 12px; }
.vouchiva-bank-info table { width: 100%; border-collapse: collapse; }
.vouchiva-bank-info td    { padding: 6px 8px; font-size: 14px; }
.vouchiva-bank-info td:first-child { color: #888; width: 130px; }
.vouchiva-bank-note       { color: #666; font-size: 13px; font-style: italic; margin-top: 12px; }

/* Buttons */
.vouchiva-btn {
    display: inline-block; background: var(--vch-gradient); color: #fff;
    border: none; border-radius: 10px; padding: 13px 28px;
    font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
    box-shadow: 0 6px 16px -4px rgba(64,56,201,.45);
    transition: box-shadow .2s ease, transform .15s ease;
}
.vouchiva-btn:hover        { box-shadow: 0 10px 24px -6px rgba(64,56,201,.55); transform: translateY(-2px); color: #fff; }
.vouchiva-btn:active       { transform: translateY(0); }
.vouchiva-btn:disabled     { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.vouchiva-btn-outline      { display: inline-block; background: transparent; color: var(--vch-primary); border: 2px solid var(--vch-primary); border-radius: 10px; padding: 11px 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease; }
.vouchiva-btn-outline:hover { background: var(--vch-primary); color: #fff; transform: translateY(-2px); }

/* Confirmation */
.vouchiva-confirmation        { text-align: center; max-width: 480px; margin: 0 auto; padding: 40px 20px; }
.vouchiva-success-icon        { font-size: 64px; margin-bottom: 16px; }
.vouchiva-code-display        { background: var(--vch-primary); color: #fff; border-radius: 12px; padding: 20px; margin: 20px auto; display: inline-block; }
.vouchiva-code-label          { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .6; margin-bottom: 6px; }
.vouchiva-code-value          { display: block; font-size: 24px; letter-spacing: 4px; font-family: monospace; color: #fff; }
.vouchiva-confirmation-note   { color: #888; font-size: 14px; }

/* Redeem */
.vouchiva-redeem          { max-width: 480px; }
.vouchiva-code-info       { background: #f5f5f5; border-radius: 10px; padding: 20px; margin-top: 16px; }
.vouchiva-code-info.valid { border-left: 4px solid #28a745; }
.vouchiva-code-info.invalid { border-left: 4px solid #dc3545; }

/* Error / Success messages */
.vouchiva-error   { color: #dc3545; font-size: 14px; margin-top: 8px; }
.vouchiva-success { color: #28a745; font-size: 15px; font-weight: 600; }
.vouchiva-loading { color: #888; padding: 30px 0; text-align: center; }

/* Spinner */
.vouchiva-spinner {
    width: 48px; height: 48px; border: 4px solid #eee;
    border-top-color: var(--vch-accent); border-radius: 50%;
    animation: spin .8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Amount selector */
#vouchiva-amount-selector label   { font-weight: 600; }
#vouchiva-custom-amount           { width: 100px; padding: 8px 12px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 16px; }
.vouchiva-currency                { font-size: 16px; font-weight: 600; color: var(--vch-accent); }

/* ─── Selettore importo (tagli fissi / range libero) ────────────────────── */
.vouchiva-amount-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}
.vouchiva-amount-preset {
    padding: 10px 18px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.vouchiva-amount-preset:hover    { border-color: var(--vch-accent); }
.vouchiva-amount-preset.selected { border-color: var(--vch-accent); background: var(--vch-gradient); color: #fff; box-shadow: 0 6px 16px -4px rgba(64,56,201,.4); }

/* ─── Selettore numero di partecipanti (esperienze) ─────────────────────── */
.vouchiva-participants-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}
.vouchiva-participants-preset {
    min-width: 44px;
    padding: 10px 16px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.vouchiva-participants-preset:hover    { border-color: var(--vch-accent); }
.vouchiva-participants-preset.selected { border-color: var(--vch-accent); background: var(--vch-gradient); color: #fff; box-shadow: 0 6px 16px -4px rgba(64,56,201,.4); }
#vouchiva-amount-range { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
#vouchiva-amount-range input { padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 15px; width: 140px; }

/* ─── Selettore durata (prezzi in base alla durata, esperienze) ─────────── */
.vouchiva-duration-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}
.vouchiva-duration-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 84px;
    padding: 10px 16px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.vouchiva-duration-preset .vouchiva-duration-preset-price { font-size: 12px; font-weight: 500; color: #999; }
.vouchiva-duration-preset:hover    { border-color: var(--vch-accent); }
.vouchiva-duration-preset.selected { border-color: var(--vch-accent); background: var(--vch-gradient); color: #fff; box-shadow: 0 6px 16px -4px rgba(64,56,201,.4); }
.vouchiva-duration-preset.selected .vouchiva-duration-preset-price { color: rgba(255,255,255,.85); }

/* ══════════════════════════════════════════════════════════════════════
   Checkout wizard — "Personalizza il tuo buono" (step 1) + stepper
   ══════════════════════════════════════════════════════════════════════ */

/* 04/09/2026: the whole wizard now sits on its own elevated card, with a slim
   brand-gradient top edge — the goal is to make the purchase flow feel like a
   dedicated, polished product rather than a form dropped on the page. */
.vouchiva-checkout-wizard {
    max-width: 1100px;
    /* Prima il centraggio orizzontale veniva da .vouchiva-checkout (stesso
       elemento); ora che le due classi sono su due div distinti (vedi nota
       sopra), lo tiene qui. !important per lo stesso motivo del centraggio
       di #vouchiva-app.vouchiva-shop qui sopra: deve essere garantito dal
       nostro CSS, non da un comportamento eventuale del tema ospitante
       (Patrick, 09/09/2026). */
    margin: 0 auto !important;
    background: #fff;
    border-radius: 24px;
    padding: 44px 48px 48px;
    box-shadow: 0 24px 60px -12px rgba(64,56,201,.16), 0 2px 10px rgba(0,0,0,.04);
    position: relative;
    overflow: hidden;
}
.vouchiva-checkout-wizard::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--vch-gradient);
}
@media (max-width: 640px) {
    .vouchiva-checkout-wizard { padding: 28px 20px 32px; border-radius: 16px; }
}

/* Stepper header */
.vouchiva-stepper       { margin-bottom: 28px; }
.vouchiva-stepper-tabs  { display: flex; gap: 4px; flex-wrap: wrap; }
.vouchiva-stepper-tab {
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #aaa;
    padding: 0 0 12px;
    white-space: nowrap;
}
.vouchiva-stepper-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: #eee; color: #999;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    transition: background .2s, color .2s;
}
.vouchiva-stepper-tab.is-active        { color: var(--vch-primary); }
.vouchiva-stepper-tab.is-active .vouchiva-stepper-num { background: var(--vch-gradient); color: #fff; transform: scale(1.08); }
.vouchiva-stepper-tab.is-done          { color: var(--vch-primary); }
.vouchiva-stepper-tab.is-done .vouchiva-stepper-num   { background: var(--vch-primary); color: #fff; }
.vouchiva-stepper-track { height: 3px; background: #eee; border-radius: 3px; overflow: hidden; }
.vouchiva-stepper-fill  { height: 100%; width: 25%; background: var(--vch-gradient); transition: width .3s ease; }

@media (max-width: 640px) {
    .vouchiva-stepper-tab small,
    .vouchiva-stepper-tab { font-size: 11px; }
}

/* Step 1 two-column layout: form + live preview */
.vouchiva-step-layout   { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.vouchiva-step-preview  { position: sticky; top: 20px; }
@media (max-width: 880px) {
    .vouchiva-step-layout  { grid-template-columns: 1fr; }
    .vouchiva-step-preview { position: static; order: -1; margin-bottom: 24px; }
}

.vouchiva-product-intro     { margin-bottom: 24px; }
.vouchiva-product-title     { font-size: 22px; margin: 0 0 6px; color: var(--vch-primary); }
/* Ripristinata allo stile originale (09/09/2026): la versione centrata/
   corsivo era stata applicata qui per errore — quella formattazione andava
   sull'anteprima del buono a destra (.vouchiva-live-card-desc qui sotto),
   non sulla sezione di configurazione a sinistra. Qui il testo torna
   normale, allineato a sinistra, come il resto del form. */
.vouchiva-product-desc      { color: #666; font-size: 14px; margin: 0; }

.vouchiva-field-group       { margin-bottom: 26px; }
.vouchiva-group-label       { display: block; font-size: 13px; font-weight: 700; letter-spacing: .3px; margin-bottom: 10px; color: var(--vch-primary); }

/* Formato del buono (digitale / da stampare) */
.vouchiva-format-toggle     { display: flex; gap: 12px; flex-wrap: wrap; }
.vouchiva-format-option {
    flex: 1 1 200px;
    max-width: 50%;
    display: flex; align-items: center; gap: 12px;
    border: 2px solid #eee; border-radius: 10px; padding: 14px 16px;
    background: #fff; cursor: pointer; text-align: left;
    transition: border-color .2s, background .2s;
}
.vouchiva-format-option:hover      { border-color: var(--vch-accent); }
.vouchiva-format-option.is-selected { border-color: var(--vch-accent); background: #f7f6ff; box-shadow: var(--vch-ring); }
.vouchiva-format-option-locked:disabled { opacity: 1; cursor: default; }
.vouchiva-format-icon       { font-size: 22px; }
.vouchiva-format-copy       { display: flex; flex-direction: column; }
.vouchiva-format-copy strong { font-size: 14px; color: var(--vch-primary); }
.vouchiva-format-copy small  { font-size: 12px; color: #888; }

/* Su mobile un solo formato per riga sfrutta meglio lo spazio: il 50%
   fisso pensato per due card affiancate su schermi larghi lasciava un
   vuoto ingiustificato accanto al pulsante preselezionato "Digitale"
   quando c'e' posto per una sola colonna (Patrick, 06/09/2026: "fammelo
   al 100%"). */
@media (max-width: 640px) {
    .vouchiva-format-option { max-width: 100%; }
}

/* Galleria immagini di copertina */
.vouchiva-cover-gallery     { display: flex; gap: 12px; flex-wrap: wrap; }
.vouchiva-cover-thumb {
    width: 76px; height: 76px; padding: 0; border-radius: 10px;
    border: 3px solid transparent; overflow: hidden; cursor: pointer;
    background: #eee; transition: border-color .2s, transform .1s;
}
.vouchiva-cover-thumb img    { width: 100%; height: 100%; object-fit: cover; display: block; }
.vouchiva-cover-thumb:hover  { transform: translateY(-2px); }
.vouchiva-cover-thumb.is-selected { border-color: var(--vch-accent); box-shadow: var(--vch-ring); }

/* Saluto/messaggio + contatore caratteri */
.vouchiva-char-count        { display: block; text-align: right; font-size: 11px; color: #aaa; margin-top: 4px; }

/* Anteprima live (rispecchia il PDF generato, vedi PdfGenerator::build_html) —
   restyle 02/09/2026: sfondo chiaro, colori usati con parsimonia (barra sottile,
   etichette, bordo della citazione), pensata per restare leggibile anche stampata. */
.vouchiva-live-card {
    --vouchiva-preview-bg: var(--vch-primary);
    --vouchiva-preview-accent: var(--vch-accent);
    background: #fff;
    color: #2b2b2b;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 44px -12px rgba(64,56,201,.22), 0 2px 8px rgba(0,0,0,.05);
    transition: transform .25s ease, box-shadow .25s ease;
}
.vouchiva-live-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 54px -12px rgba(64,56,201,.28), 0 2px 8px rgba(0,0,0,.05);
}
.vouchiva-live-card-cover   { height: 240px; background-size: cover; background-position: center; }
.vouchiva-live-card-cover + .vouchiva-live-card-body { border-top: 4px solid var(--vouchiva-preview-bg); }
.vouchiva-live-card-body    { padding: 24px; }
.vouchiva-live-card-logo    { font-size: 15px; font-weight: 700; color: #333; text-align: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #eee; }
.vouchiva-live-card-logo img { max-height: 32px; display: inline-block; }
.vouchiva-live-card-label   { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--vouchiva-preview-accent); text-align: center; font-weight: 700; margin-bottom: 6px; }
.vouchiva-live-card-title   { font-size: 19px; font-weight: 700; text-align: center; color: #1f1f1f; margin-bottom: 4px; }
/* Descrizione del prodotto sotto al titolo del buono, centrata e in
   corsivo (Patrick, 09/09/2026) — va qui sull'anteprima, non nella sezione
   di configurazione a sinistra (dove invece resta il testo normale). */
.vouchiva-live-card-desc    { font-size: 12.5px; color: #666; text-align: center; font-style: italic; line-height: 1.5; margin-bottom: 10px; }
.vouchiva-live-card-value   { font-size: 30px; font-weight: 800; color: #1f1f1f; text-align: center; margin-bottom: 10px; }
.vouchiva-live-card-msg     { font-size: 12.5px; color: #555; font-style: italic; line-height: 1.6; text-align: center; margin-bottom: 14px; padding: 10px 14px; background: #faf9fd; border-left: 3px solid var(--vouchiva-preview-accent); }
.vouchiva-live-card-terms   { font-size: 11px; color: #999; line-height: 1.6; margin-bottom: 14px; padding-top: 12px; border-top: 1px solid #eee; }
.vouchiva-live-card-venues  { font-weight: 700; color: #777; margin-bottom: 4px; }
.vouchiva-live-card-duration{ font-weight: 700; color: #777; margin-bottom: 4px; }
.vouchiva-live-card-limit   { font-weight: 700; color: #777; margin-bottom: 4px; }
.vouchiva-live-card-policy  { white-space: pre-line; }
.vouchiva-live-card-footer  { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding-top: 14px; margin-top: 6px; }
.vouchiva-live-card-code    { font-size: 11px; color: #999; max-width: 60%; }
.vouchiva-live-card-qr {
    width: 40px; height: 40px; border: 1px dashed #ddd; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; letter-spacing: 1px; color: #bbb;
}
.vouchiva-preview-hint      { font-size: 12px; color: #999; text-align: center; margin: 10px 0 20px; }

.vouchiva-preview-summary       { border-top: 1px solid #eee; padding-top: 14px; }
.vouchiva-preview-summary-row   { display: flex; justify-content: space-between; font-size: 14px; color: #666; padding: 4px 0; }
.vouchiva-preview-summary-total { font-size: 16px; font-weight: 700; color: var(--vch-primary); }
.vouchiva-preview-summary-total strong { color: var(--vch-accent); font-size: 20px; }

/* Step 4 — Riepilogo */
.vouchiva-review-card    { display: flex; gap: 14px; align-items: center; background: #f5f5f5; border-radius: 10px; padding: 14px; margin-bottom: 18px; }
.vouchiva-review-thumb   { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.vouchiva-review-main    { display: flex; flex-direction: column; gap: 4px; }
.vouchiva-review-amount  { font-size: 18px; font-weight: 700; color: var(--vch-accent); }
.vouchiva-review-list    { margin: 0; }
.vouchiva-review-list > div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.vouchiva-review-list dt { color: #888; margin: 0; }
.vouchiva-review-list dd { margin: 0; font-weight: 600; color: var(--vch-primary); text-align: right; }