/* tessera.css — la TESSERA del coupon, cioe' la card della griglia, e i gettoni
   di colore di CouponWab. Estratto da index.php il 06/09/2026, quando la stessa
   card e' servita a una seconda pagina (/feste, la selezione di stagione intera):
   le regole erano 220 righe dentro lo <style> della home e si sarebbero dovute
   copiare. Lo caricano index.php e feste.php nell'head con $cw_css.

   Tutto quello che c'e' qui vale per le card dentro #risultati.grid-mode. La riga
   orizzontale (.cw-riga, le viste filtrate) e la card del carosello feste
   (.cw-tk--festa) restano in index.php: hanno selettori propri.

   I gettoni stanno qui e non piu' in index.php perche' le tessere ne hanno
   bisogno ovunque compaiano; negozio.css ne ha una copia sua dal 06/09. */

:root {
    --cw-viola: #8A2BE2;
    --cw-viola-forte: #5F00A3;
    --cw-verde: #2BE29B;
    --cw-verde-scuro: #0E7A55;
    --cw-verde-velo: #E4FBF1;
    --cw-ink: #15161A;
    --cw-ink-3: #95989F;
    --cw-segno: #06322A;
    --cw-filo: #EAE8E4;
    /* Aggiunti il 05/09/2026. --cw-filo-2 e' il filo delle tessere: quello
       chiaro resta per i separatori DENTRO una tessera. --cw-alza e' l'ombra
       di weareblog, due strati: un pelo di contatto piu' una campana larga e
       bassa, che e' cio' che fa leggere una card come un oggetto staccato. */
    --cw-filo-2: #DEDBD5;
    --cw-alza: 0 1px 2px rgba(21,22,26,.04), 0 10px 28px -12px rgba(21,22,26,.14);
    --cw-velo: #F4E9FD;
}

/* ---- La griglia: tagliandi, non piu' schede verticali ----
   Prima della griglia c'era una regola vecchia (minmax 220px, gap 1.5rem) che
   questa sovrascriveva per cascata: tolta, adesso la misura e' scritta una volta. */
.grid-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 18px;
    margin-bottom: 3rem;
}
/* La card della home: la PASTIGLIA, ripristinata il 04/09/2026.
   Fra le due prove vince questa: in home le card sono quindici, e la matrice a
   sinistra — anche in velo viola — le rendeva confuse. La matrice resta invece
   sulla scheda negozio, dove le offerte di uno stesso negozio sono undici in
   fila e la densita' conta piu' della forma. */
.grid-mode .cw-tk {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: #FFFFFF;
    border: 1px solid var(--cw-filo-2);
    border-radius: 14px;
    padding: 15px 16px 16px;
    box-shadow: var(--cw-alza);
    transition: box-shadow .18s ease, border-color .18s ease;
    overflow: visible;
    position: static;
}

/* ---- Il coupon in evidenza, cioe' il posto pagato (05/09/2026) ----
   Il filo viola sopra e il tagliando: la card resta ALTA COME LE ALTRE, cambia
   solo il cappello, se no in una griglia da quindici si vede il buco.
   Sulla riga il filo va a sinistra e non sopra, perche' li' l'occhio scorre in
   verticale e un filo orizzontale sembrerebbe un separatore. */
.grid-mode .cw-tk--spinto {
    border-color: var(--cw-velo);
    box-shadow: var(--cw-alza), inset 0 3px 0 var(--cw-viola);
    padding-top: 18px;
}
.cw-riga--spinta {
    border-color: var(--cw-velo);
    box-shadow: var(--cw-alza), inset 3px 0 0 var(--cw-viola);
}

/* Le due etichettine della riga «quando». `.cw-nuovo` era definita solo dentro
   .cw-tk--festa e .cw-riga: sulla card della griglia usciva come un <em> nudo,
   cioe' la parola «nuovo» in corsivo. Una regola generale le copre tutte e tre. */
.cw-nuovo, .cw-evidenza-tk {
    font-style: normal; font-size: .62rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.cw-nuovo { color: #0E7A55; background: var(--cw-verde-velo); }
.cw-evidenza-tk { color: var(--cw-viola-forte); background: var(--cw-velo); }

.grid-mode .cw-tk::before,
.grid-mode .cw-tk::after { content: none; }
.grid-mode .cw-tk:hover {
    border-color: var(--cw-viola);
    transform: none;
    box-shadow: 0 6px 20px -12px rgba(20,16,40,.35);
}
.grid-mode .cw-tk-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.grid-mode .cw-tk-neg {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-width: 0;
}
.grid-mode .cw-tk-neg img {
    width: 30px; height: 30px;
    object-fit: contain;
    flex: none;
    border-radius: 5px;
}
.grid-mode .cw-tk-neg span {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--cw-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grid-mode .cw-tk-neg:hover span { color: var(--cw-viola); }
/* La pastiglia dello sconto: l'unico elemento colorato della scheda. Verde
   pieno con il segno scuro sopra — sul bianco il verde scritto non si
   leggerebbe, riempito si'. */
.grid-mode .cw-sconto {
    flex: none;
    background: var(--cw-verde);
    color: #06322A;
    font-family: "Sora", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -.02em;
    line-height: 1;
    padding: 7px 13px;
    border-radius: 100px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.grid-mode .cw-sconto--parole {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--cw-verde-velo);
    color: var(--cw-verde-scuro);
    padding: 6px 11px;
    white-space: normal;
    text-align: right;
    max-width: 46%;
}
.grid-mode .cw-tk h3 {
    font-family: "Sora", system-ui, sans-serif;
    font-size: .97rem;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -.02em;
    margin: 0;
    height: auto;
    overflow: visible;
}
.grid-mode .cw-tk h3 a { color: var(--cw-ink); text-decoration: none; }
.grid-mode .cw-tk h3 a:hover { color: var(--cw-viola); }
.grid-mode .cw-tk-quando {
    font-size: .74rem;
    color: var(--cw-ink-3);
    margin-top: auto;
    padding-bottom: 2px;
}
.grid-mode .cw-presto {
    color: #8A4A00;
    background: #FFF3DF;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
}
.grid-mode .cw-tk .action-area { padding: 2px 0 0; }
/* ---- Il chip al posto del bottone ----
   Dal 06/09/2026 queste regole NON hanno piu' .grid-mode davanti: lo stesso chip
   sta anche sulla scheda negozio (negozio.php carica questo foglio), dove le
   offerte stanno in riga e non in griglia. Il carosello feste ha le sue copie
   con .cw-tk--festa davanti, piu' specifiche, e non cambia.
   «VEDI CODICE» era un rettangolo pieno che non diceva niente. Adesso l'azione
   E' il codice: mascherato, dentro un bordo tratteggiato come un tagliando da
   staccare, con la parte piena a destra. Si vede che un codice esiste e che
   forma ha, prima di cliccare — che e' l'unica cosa che il lettore vuole
   sapere. Per le offerte senza codice non si finge un chip: un link con la
   freccia dice la verita', cioe' che non c'e' niente da copiare. */
.cw-chip {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 3px 3px 3px 0;
    background: #ffffff;
    border: 1.5px dashed var(--cw-viola);
    border-radius: 100px;
    cursor: pointer;
    font: inherit;
    max-width: 100%;
    transition: background .18s ease;
}
.cw-chip:hover { background: var(--cw-velo); }
.cw-chip:focus-visible { outline: 2px solid var(--cw-viola); outline-offset: 2px; }
.cw-chip-cod {
    padding: 7px 12px 7px 16px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: #16141C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cw-chip-az {
    display: grid;
    place-items: center;
    padding: 7px 15px;
    border-radius: 100px;
    background: var(--cw-viola);
    color: #ffffff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.cw-chip:hover .cw-chip-az { background: var(--cw-viola-forte); }
.cw-vai {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    padding: 8px 2px;
    cursor: pointer;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    color: var(--cw-viola);
    border-bottom: 2px solid var(--cw-verde);
    border-radius: 0;
}
.cw-vai:hover { color: var(--cw-viola-forte); border-bottom-color: var(--cw-viola); }

.grid-mode .cw-tk .btn-get-code {
    background: var(--cw-viola);
    /* Bianco dichiarato: dentro la card il bottone eredita il colore del link,
       che qui e' ciano — e viola su ciano non si legge. Visto in pagina il
       04/09/2026. */
    color: #ffffff;
    box-shadow: none;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 800;
    padding: 10px 20px;
    width: auto;
}
.grid-mode .cw-tk .btn-get-code:hover { background: var(--cw-viola-forte); color: #ffffff; box-shadow: none; }

@media (max-width: 560px) {
    .grid-mode { grid-template-columns: 1fr; }
    .grid-mode .cw-sconto { font-size: .92rem; padding: 6px 11px; }
}