/* ============================================================
   TOPKEBAB — foglio di stile pubblico.

   Il tema vive nei TOKEN, non nei componenti: i colori si
   ridefiniscono una volta sola per tema e tutto il resto pesca
   da lì. Prima ogni componente aveva la sua regola scura scritta
   a mano, e ogni pagina nuova rischiava di dimenticarsene —
   testo scuro su fondo scuro senza che nessuno se ne accorgesse.

   Tre livelli di preferenza, in ordine di forza:
     1. tema di sistema        (@media prefers-color-scheme)
     2. scelta esplicita       (:root[data-theme=...])
   La seconda deve poter vincere sulla prima in entrambi i versi.
   ============================================================ */

/* Carattere display: Anton (Copyright 2020 The Anton Project Authors),
   SIL Open Font License 1.1 — testo completo in assets/fonts/OFL.txt.
   Ospitato qui e non preso da Google: nessuna dipendenza da CDN esterni
   come tutto il resto del progetto, e gli indirizzi IP dei visitatori non
   finiscono a un terzo solo per caricare un carattere.
   Se il file mancasse, la pila ripiega su Impact senza rompere nulla. */
@font-face {
    font-family: "TK Display";
    src: url("/assets/fonts/tk-display.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- marchio: costante in ogni tema ---
       Questi tre vanno cambiati INSIEME: sono lo stesso rosso a tre
       intensità. --tk-red-acceso serve dove il fondo è scuro per scelta
       (la fascia del calcolatore), perché lì il rosso pieno sparirebbe;
       non si può ricavare dal primo schiarendolo, perché verrebbe
       slavato invece che acceso. */
    --tk-red: #d81222;
    --tk-red-dark: #a80e1a;
    --tk-red-acceso: #ff6257;
    --tk-white: #ffffff;

    /* Colore dei link dentro il contenuto. È un token e non il rosso di
       marca scritto direttamente, perché sul fondo scuro il rosso pieno non
       basta: #d81222 su #14100e dà contrasto 3.63, sotto il minimo di 4.5
       per il testo corrente. --tk-red-acceso arriva a 6.43 ed è nato
       proprio per questo. */
    --tk-link: var(--tk-red);

    /* --- caratteri --- */
    --tk-display: "TK Display", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
    --tk-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --tk-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* --- superfici e testo (tema chiaro) --- */
    --tk-bg: #f2efec;
    --tk-surface: #ffffff;
    --tk-surface-2: #f7f4f1;
    --tk-fg: #191512;
    --tk-fg-mut: #6f655e;
    --tk-black: #191512;
    --tk-gray: #6f655e;
    --tk-gray-light: #f2efec;
    --tk-border: #e3dcd6;
    --tk-border-strong: #cdc3bb;

    /* --- semantica --- */
    --tk-green: #1e7e34;
    --tk-green-bg: #e7f4ea;
    --tk-orange: #a15c00;
    --tk-orange-bg: #fbf1de;
    --tk-danger: #8a1f1f;
    --tk-danger-bg: #fbeae7;

    --tk-up: #1e7e34;
    --tk-up-bg: #e7f4ea;
    --tk-down: #a8442a;
    --tk-down-bg: #fbeae5;
    --tk-wait: #8a6412;
    --tk-wait-bg: #fbf2dd;

    --tk-radius: 10px;

    /* Larghezza della colonna del sito. Sta qui perché la usano in tre:
       intestazione, contenuto largo e piè di pagina. Cambiandola in un
       punto solo, quei tre restano allineati fra loro — che è esattamente
       ciò che prima non succedeva. */
    --tk-larghezza: 1100px;
    --tk-larghezza-stretta: 560px;
    --tk-radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tk-bg: #14100e;
        --tk-surface: #1c1714;
        --tk-surface-2: #221c19;
        --tk-fg: #f2ece7;
        --tk-fg-mut: #9b9089;
        --tk-black: #f2ece7;
        --tk-gray: #9b9089;
        --tk-gray-light: #221c19;
        --tk-border: #2f2823;
        --tk-border-strong: #453b34;

        --tk-green: #4cc46e;
        --tk-green-bg: #13301f;
        --tk-orange: #d59a2c;
        --tk-orange-bg: #2e2413;
        --tk-danger: #e8836b;
        --tk-danger-bg: #331813;

        --tk-up: #2ea86a;
        --tk-up-bg: #12301f;
        --tk-down: #c4553a;
        --tk-down-bg: #331813;
        --tk-wait: #c8912c;
        --tk-wait-bg: #2e2413;

        --tk-link: var(--tk-red-acceso);
    }
}

:root[data-theme="dark"] {
    --tk-bg: #14100e;
    --tk-surface: #1c1714;
    --tk-surface-2: #221c19;
    --tk-fg: #f2ece7;
    --tk-fg-mut: #9b9089;
    --tk-black: #f2ece7;
    --tk-gray: #9b9089;
    --tk-gray-light: #221c19;
    --tk-border: #2f2823;
    --tk-border-strong: #453b34;
    --tk-green: #4cc46e;
    --tk-green-bg: #13301f;
    --tk-orange: #d59a2c;
    --tk-orange-bg: #2e2413;
    --tk-danger: #e8836b;
    --tk-danger-bg: #331813;
    --tk-up: #2ea86a;
    --tk-up-bg: #12301f;
    --tk-down: #c4553a;
    --tk-down-bg: #331813;
    --tk-wait: #c8912c;
    --tk-wait-bg: #2e2413;
    --tk-link: var(--tk-red-acceso);
}

:root[data-theme="light"] {
    --tk-bg: #f2efec;
    --tk-surface: #ffffff;
    --tk-surface-2: #f7f4f1;
    --tk-fg: #191512;
    --tk-fg-mut: #6f655e;
    --tk-black: #191512;
    --tk-gray: #6f655e;
    --tk-gray-light: #f2efec;
    --tk-border: #e3dcd6;
    --tk-border-strong: #cdc3bb;
    --tk-green: #1e7e34;
    --tk-green-bg: #e7f4ea;
    --tk-orange: #a15c00;
    --tk-orange-bg: #fbf1de;
    --tk-danger: #8a1f1f;
    --tk-danger-bg: #fbeae7;
    --tk-up: #1e7e34;
    --tk-up-bg: #e7f4ea;
    --tk-down: #a8442a;
    --tk-down-bg: #fbeae5;
    --tk-wait: #8a6412;
    --tk-wait-bg: #fbf2dd;
    --tk-link: var(--tk-red);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--tk-body);
    background: var(--tk-bg);
    color: var(--tk-fg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* I link dentro il testo.
   Non esisteva nessuna regola generica: erano colorati solo dentro .tk-nav,
   .tk-footer e .tk-links, e in ogni altro punto restava il blu predefinito
   del browser. Sul chiaro si legge e infatti non se n'era accorto nessuno;
   sul fondo scuro il contrasto è 2.01, meno della metà del minimo. Il tema
   scuro c'era già via prefers-color-scheme, quindi il difetto è vecchio:
   l'interruttore l'ha solo reso facile da incontrare.
   Selettore di elemento nudo, la specificità più bassa che esista: le tre
   regole con la classe continuano a vincere e nessuna barra cambia colore. */
a {
    color: var(--tk-link);
}

/* ---------- intestazione ---------- */

/* Il rosso resta da bordo a bordo, ma logo e menù si allineano alla stessa
   colonna del contenuto: prima l'intestazione era larga quanto lo schermo
   mentre sotto tutto era limitato a 900px, e su un monitor grande logo e
   menù finivano agli angoli opposti, scollegati dalla pagina.
   Il margine calcolato evita di dover aggiungere un contenitore nel
   markup, che vive in lib/ e si carica a mano. */
.tk-header {
    background: var(--tk-red);
    color: var(--tk-white);
    padding: 1.4rem max(1.5rem, calc((100% - var(--tk-larghezza)) / 2));
    display: flex;
    /* Centrato, non su linea di base: per un'immagine la linea di base è il
       suo bordo inferiore, quindi il menù finiva schiacciato in fondo con
       tutto il vuoto sopra. Con il logo a 40px si notava appena, a 62 no. */
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tk-logo {
    font-weight: 800;
    /* 35px. L'immagine, se caricata, la segue in proporzione: sono due
       forme dello stesso logo e devono pesare uguale nella banda. */
    font-size: 2.2rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--tk-white);
}

.tk-logo span {
    color: color-mix(in srgb, var(--tk-red) 15%, white);
}

/* max-width oltre all'altezza: su schermi molto stretti l'immagine deve
   poter rimpicciolirsi invece di spingere il menù fuori dalla banda. */
.tk-logo-img {
    display: block;
    height: 50px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.tk-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    letter-spacing: 0.02em;
}

/* La navigazione va a fondo riga e su schermo stretto passa sotto da sé:
   niente menù a scomparsa da aprire con un clic, che richiederebbe
   JavaScript per una manciata di voci. */
.tk-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.tk-nav a {
    color: var(--tk-white);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tk-nav a:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tk-nav a:focus-visible {
    outline: 2px solid var(--tk-white);
    outline-offset: 1px;
}

/* L'azione del cliente: piena, è quella che deve saltare all'occhio. */
.tk-nav .tk-nav-forte {
    background: var(--tk-white);
    color: var(--tk-red);
    font-weight: 700;
}

.tk-nav .tk-nav-forte:hover {
    background: color-mix(in srgb, var(--tk-red) 8%, white);
}

/* L'ingresso dei locali: presente ma sommesso, perché parla a un altro
   pubblico e non deve competere con l'azione del cliente. */
.tk-nav .tk-nav-partner {
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

/* Interruttore chiaro/scuro, condiviso da sito, pannello partner e admin
   (entrambi importano questo foglio).

   Le due icone stanno sempre visibili e il cursore scorre sotto quella
   attiva, che si accende in controluce: si capisce cosa è acceso senza
   leggere niente. Un pallino nudo direbbe solo "c'è un interruttore", non
   quale dei due stati sia in corso.

   Due vesti, perché vive su fondi opposti. Quella base usa i token e serve
   sulle superfici chiare — la barra del pannello partner. La variante
   `tk-tema-su-scuro` è bianca e serve dove i token di sfondo non arrivano:
   l'intestazione rossa del sito e la barra nera dell'admin. */
.tk-tema {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: 3.4rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: 999px;
    background: var(--tk-surface-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tk-tema:hover {
    border-color: var(--tk-red);
}

.tk-tema:focus-visible {
    outline: 2px solid var(--tk-red);
    outline-offset: 2px;
}

.tk-tema .tk-tema-cursore {
    background: var(--tk-red);
}

.tk-tema .tk-tema-icona {
    color: var(--tk-fg-mut);
}

.tk-tema[aria-checked="false"] .tk-tema-icona:first-of-type,
.tk-tema[aria-checked="true"] .tk-tema-icona:last-of-type {
    color: var(--tk-white);
}

/* Variante per barre scure o rosse: cambia solo i colori, la geometria
   resta quella di base. */
.tk-tema-su-scuro {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.15);
}

.tk-tema-su-scuro:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.28);
}

.tk-tema-su-scuro:focus-visible {
    outline-color: var(--tk-white);
}

.tk-tema-su-scuro .tk-tema-cursore {
    background: var(--tk-white);
}

.tk-tema-su-scuro .tk-tema-icona {
    color: rgba(255, 255, 255, 0.75);
}

/* Sopra il cursore bianco l'icona va scritta in rosso, o sparirebbe. */
.tk-tema-su-scuro[aria-checked="false"] .tk-tema-icona:first-of-type,
.tk-tema-su-scuro[aria-checked="true"] .tk-tema-icona:last-of-type {
    color: var(--tk-red);
}

.tk-tema-cursore {
    position: absolute;
    top: 50%;
    left: 0.18rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.625rem;
    border-radius: 50%;
    transition: transform 0.18s ease;
}

.tk-tema[aria-checked="true"] .tk-tema-cursore {
    transform: translateX(1.55rem);
}

.tk-tema-icona {
    position: relative;
    z-index: 1;
    width: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .tk-tema-cursore {
        transition: none;
    }
}

/* ---------- impaginazione ---------- */

/* Colonna con spaziatura invece di margini sui riquadri: le sezioni
   consecutive si toccavano bordo contro bordo e sembravano un blocco unico
   diviso da righe. La spaziatura sta sul contenitore, così vale per
   qualunque figlio — riquadri, avvisi, titoli — senza eccezioni per
   l'ultimo elemento e senza margini che collassano fra loro. */
.tk-main {
    max-width: var(--tk-larghezza-stretta);
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tk-main-wide {
    max-width: var(--tk-larghezza);
}

.tk-card {
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 1.75rem;
}

.tk-card h1 {
    margin-top: 0;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    color: var(--tk-fg);
}

.tk-card h2 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--tk-fg);
}

/* ---------- avvisi ---------- */

.tk-alert {
    padding: 0.85rem 1rem;
    border-radius: var(--tk-radius-sm);
    margin: 1rem 0;
    font-size: 0.94rem;
    border: 1px solid transparent;
}

.tk-alert-error {
    background: var(--tk-danger-bg);
    border-color: var(--tk-danger);
    color: var(--tk-danger);
}

.tk-alert-success {
    background: var(--tk-green-bg);
    border-color: var(--tk-green);
    color: var(--tk-green);
}

.tk-alert-warning {
    background: var(--tk-orange-bg);
    border-color: var(--tk-orange);
    color: var(--tk-orange);
}

/* ---------- moduli ---------- */

.tk-field {
    margin-bottom: 1rem;
}

.tk-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.tk-field small {
    display: block;
    color: var(--tk-fg-mut);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    line-height: 1.45;
}

.tk-field input[type="text"],
.tk-field input[type="email"],
.tk-field input[type="password"],
.tk-field input[type="number"],
.tk-field input[type="tel"],
.tk-field input[type="date"],
.tk-field select,
.tk-field textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--tk-surface);
    color: var(--tk-fg);
}

.tk-field input:focus-visible,
.tk-field select:focus-visible,
.tk-field textarea:focus-visible {
    outline: 2px solid var(--tk-red);
    outline-offset: 1px;
}

.tk-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tk-checkbox input {
    margin-top: 0.25rem;
}

.tk-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.tk-btn {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: var(--tk-radius-sm);
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-family: inherit;
}

.tk-btn:focus-visible {
    outline: 2px solid var(--tk-red);
    outline-offset: 2px;
}

.tk-btn-primary {
    background: var(--tk-red);
    color: var(--tk-white);
}

.tk-btn-primary:hover {
    background: var(--tk-red-dark);
}

.tk-btn-secondary {
    background: var(--tk-surface);
    color: var(--tk-fg);
    border: 1px solid var(--tk-border-strong);
}

.tk-btn-secondary:hover {
    background: var(--tk-surface-2);
}

/* ---------- tabelle ---------- */

.tk-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.tk-table th,
.tk-table td {
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--tk-border);
}

.tk-table th {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    font-weight: 700;
}

.tk-ok {
    color: var(--tk-green);
    font-weight: 600;
}

.tk-ko {
    color: var(--tk-danger);
    font-weight: 600;
}

.tk-mono {
    font-family: var(--tk-mono);
    background: var(--tk-surface-2);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    word-break: break-all;
}

/* ---------- prodotti ---------- */

/* In alto e non centrati.

   Con la riga centrata, un prodotto che ha la descrizione su due righe si
   porta il prezzo e i comandi a metà altezza, cioè più in basso del nome: e
   siccome alcuni prodotti la descrizione ce l'hanno e altri no, ogni riga
   cadeva a un'altezza diversa dalla precedente. Allineando in alto, nome,
   prezzo e comandi stanno sulla stessa linea in tutte le righe, con o senza
   descrizione. */
.tk-prodotto {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--tk-border);
}

.tk-prodotto > img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.tk-prodotto-testo {
    flex: 1 1 55%;
    min-width: 8rem;
}

.tk-prodotto-nome {
    font-weight: 600;
}

.tk-prodotto-desc {
    font-size: 0.85rem;
    color: var(--tk-fg-mut);
    line-height: 1.4;
}

.tk-prodotto-prezzo {
    font-weight: 700;
    color: var(--tk-red);
    margin-top: 2px;
}

/* Il prezzo come colonna propria, quando è figlio diretto della riga.

   I nomi dei prodotti hanno lunghezze diverse: lasciando il prezzo sotto il
   nome, ogni cifra cadeva a una distanza diversa dal bordo e confrontarle
   scorrendo era impossibile. Incolonnato a destra si allineano tutte, e il
   nome resta comunque la prima cosa che si legge — chi cerca in un menù
   cerca "kebab", non "15.00".

   tabular-nums allinea anche i decimali: senza, un "1" occupa meno di un "8"
   e le virgole ballano di qualche pixel proprio dove l'occhio le confronta. */
.tk-prodotto > .tk-prodotto-prezzo {
    flex: none;
    margin-top: 0;
    min-width: 6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Sullo stretto la riga va a capo da sola: il prezzo apre la seconda riga e i
   comandi restano all'estremità opposta. Incolonnare a destra su 360 pixel
   vorrebbe dire spezzare i nomi in tre righe per guadagnare un allineamento
   che lì non serve, perché i prodotti si leggono uno alla volta. */
@media (max-width: 560px) {
    /* Il testo si prende tutta la prima riga, prezzo e comandi stanno insieme
       sulla seconda.

       Lasciandoli liberi di andare a capo per conto loro il blocco cresceva a
       quattro righe — nome, descrizione, comandi, e solo allora la pastiglia
       delle salse — che finiva staccata dal prodotto a cui si riferisce.
       Prezzo e comandi sulla stessa riga fanno risalire tutto di una. */
    .tk-prodotto > .tk-prodotto-testo {
        flex-basis: 100%;
    }

    .tk-prodotto > .tk-prodotto-prezzo {
        min-width: 0;
        text-align: left;
    }

    .tk-prodotto > .tk-prodotto-azione,
    .tk-prodotto > .tk-carrello-azioni {
        margin-left: auto;
    }
}

.tk-prodotto-azione {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.tk-prodotto-azione input[type="number"] {
    width: 3rem;
    text-align: center;
    padding: 0.5rem 0.2rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    background: var(--tk-surface);
    color: var(--tk-fg);
}

/* ---------- comandi in fila, tutti della stessa altezza ----------

   Campo della quantità, «+», «Aggiorna», «✕»: ognuno prendeva la sua altezza
   da una regola diversa — il bottone dal padding di .tk-btn, l'icona da
   quello di .tk-btn-icona, il campo dal suo — e i tre risultati non
   coincidevano mai. Uno sfalsamento di due pixel non si nota su un bottone
   solo; ripetuto su ogni riga del listino sì, e fa sembrare storta tutta la
   colonna.

   Un'altezza dichiarata una volta al posto di tre padding che si inseguono. */
.tk-prodotto-azione,
.tk-carrello-azioni {
    --tk-comando-h: 2.6rem;
}

.tk-prodotto-azione input[type="number"],
.tk-carrello-azioni input[type="number"],
.tk-prodotto-azione .tk-btn,
.tk-carrello-azioni .tk-btn {
    height: var(--tk-comando-h);
    box-sizing: border-box;
}

/* Il testo va ricentrato a mano: con un'altezza fissa il padding verticale
   non lo mette più a metà da solo. */
.tk-prodotto-azione .tk-btn,
.tk-carrello-azioni .tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* ---------- "vuoi aggiungere altro?" nel carrello ----------

   Pastiglie in fila e non righe di menù: sono un ripensamento veloce, non
   una seconda spesa. Una riga per prodotto con foto e descrizione
   riaprirebbe il menù dentro il carrello e allontanerebbe la conferma, che
   è il contrario di quello che serve a chi sta concludendo. */
.tk-suggerimenti {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--tk-border);
}

.tk-suggerimenti > h2 {
    font-size: 1rem;
    margin: 0 0 0.7rem;
}

.tk-suggerimenti-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tk-suggerimento-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: 999px;
    background: var(--tk-surface);
    color: var(--tk-fg);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tk-suggerimento-btn:hover,
.tk-suggerimento-btn:focus-visible {
    border-color: var(--tk-red);
    background: var(--tk-surface-2);
}

.tk-suggerimento-prezzo {
    color: var(--tk-fg-mut);
    font-size: 0.9em;
}

.tk-suggerimento-piu {
    color: var(--tk-red);
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tk-suggerimento-btn {
        transition: none;
    }
}

/* ---------- salse e ingredienti sul prodotto ----------

   Il modulo avvolge la riga del prodotto perché deve contenere anche la
   scelta, che sta sotto. La riga tiene il suo bordo inferiore solo quando è
   sola: se sotto c'è la scelta, il bordo separerebbe il prodotto dai suoi
   stessi ingredienti. */
.tk-prodotto-modulo {
    border-bottom: 1px solid var(--tk-border);
}

.tk-prodotto-modulo > .tk-prodotto {
    border-bottom: 0;
}

.tk-ingredienti {
    padding: 0 0 0.8rem;
    font-size: 0.9rem;
}

/* La domanda è la parte importante: chi scorre in fretta deve accorgersi che
   può togliere qualcosa, senza che chi non ha preferenze debba aprire niente.

   Perciò è una pastiglia e non una riga di testo: in un elenco di undici
   prodotti una scritta rossa in più si perde fra i prezzi, che sono già
   rossi; una forma no. Sembra premibile perché lo è.

   Fondo grigio e scritta rossa, NON bordo rosso: il contorno rosso ripetuto
   sotto ogni prodotto caricava troppo la pagina — undici richiami della
   stessa intensità del pulsante di acquisto, che è la cosa che deve vincere.
   La forma basta a farla riconoscere, il rosso resta solo nel testo. */
.tk-ingredienti > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--tk-red);
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    margin: 0.2rem 0;
    border: 1px solid var(--tk-border);
    border-radius: 999px;
    background: var(--tk-surface-2);
    list-style: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Il triangolino nativo va tolto in due modi diversi: WebKit usa uno
   pseudo-elemento proprio, gli altri il list-style di sopra. */
.tk-ingredienti > summary::-webkit-details-marker {
    display: none;
}

.tk-ingredienti > summary::after {
    content: "▾";
    font-size: 0.85em;
}

.tk-ingredienti[open] > summary::after {
    content: "▴";
}

/* Il rosso torna solo al passaggio del mouse e sul fuoco da tastiera: lì è
   una pastiglia sola, non undici. */
.tk-ingredienti > summary:hover,
.tk-ingredienti > summary:focus-visible {
    border-color: var(--tk-red);
}

@media (prefers-reduced-motion: reduce) {
    .tk-ingredienti > summary {
        transition: none;
    }
}

/* Nel carrello la stessa pastiglia è più piccola: lì la domanda arriva a chi
   ha già scelto, e non deve competere col nome del prodotto. */
.tk-ingredienti-carrello {
    padding-bottom: 0;
    font-size: 0.85rem;
}

/* Il pulsante di conferma resta agganciato al fondo dello schermo finché il
   riquadro è aperto.

   Con diciotto voci il pulsante finisce sotto la piega, e quando si smette di
   spuntare l'attenzione è dove si è cliccato — non quaranta pixel più in
   basso, fuori campo. Il risultato era che si chiudeva il riquadro credendo
   di aver scelto. Non è un pulsante in più: è lo stesso, portato dove
   l'occhio arriva.

   Il fondo pieno serve: senza, le caselle gli scorrerebbero sotto e si
   leggerebbero due cose sovrapposte. */
.tk-ingredienti .tk-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0.7rem 0 0;
    padding: 0.7rem 0;
    background: var(--tk-surface);
    border-top: 1px solid var(--tk-border);
}

.tk-ingredienti-gruppo {
    margin: 0.6rem 0 0;
}

.tk-ingredienti-gruppo > strong {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tk-fg-mut);
    margin-bottom: 0.3rem;
}

.tk-ingrediente {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0;
    cursor: pointer;
}

/* Il sovrapprezzo accanto al nome, non in una colonna a parte: è la ragione
   per cui quella voce non è già spuntata, e va letto insieme al nome. */
.tk-ingrediente em {
    font-style: normal;
    color: var(--tk-red);
    font-weight: 600;
}

/* Cosa il cliente ha tolto e cosa ha aggiunto: `-cipolla +feta`.

   Il segno sta attaccato alla parola e il colore lo raddoppia, non lo
   sostituisce — chi non distingue rosso e verde legge comunque il meno, e su
   una comanda stampata in bianco e nero pure.

   Rosso-terra e verde sono gli stessi di salita e discesa in classifica: in
   questo progetto vogliono già dire "meno" e "più". */
.tk-ing-tolto,
.tk-ing-aggiunto,
.tk-ing-tutto {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92em;
    line-height: 1.5;
    white-space: nowrap;
    /* Lo spazio fra le parole non basta a separarle: attaccate sembrano una
       pastiglia sola spezzata, e «senza cipolla senza piccante» si legge come
       un blocco unico. Il margine sotto serve quando vanno a capo, dove
       altrimenti si toccherebbero riga con riga. */
    margin: 0.1rem 0.3rem 0.1rem 0;
}

/* Il blocco di colore si vede da lontano, il testo resta leggibile da vicino:
   fondo tenue e scritta piena, non il contrario. Un pieno saturo su una riga
   di comanda con tre variazioni diventa una bandiera e copre il nome del
   prodotto, che è l'informazione principale. */
.tk-ing-tolto {
    color: var(--tk-down);
    background: color-mix(in srgb, var(--tk-down) 14%, transparent);
}

.tk-ing-aggiunto {
    color: var(--tk-up);
    background: color-mix(in srgb, var(--tk-up) 14%, transparent);
}

/* «con tutto» è neutro di proposito: non è una variazione, è il valore
   predefinito. In rosso o in verde suggerirebbe che sia successo qualcosa,
   e il suo lavoro è solo far sapere che quel prodotto si poteva cambiare. */
.tk-ing-tutto {
    color: var(--tk-fg-mut);
    background: var(--tk-surface-2);
    font-weight: 600;
}

/* color-mix è recente: dove manca, la pastiglia resta senza fondo e il testo
   colorato in grassetto regge da solo. Nessun fondo è meglio di un fondo
   sbagliato che rende il testo illeggibile. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .tk-ing-tolto,
    .tk-ing-aggiunto {
        padding-left: 0;
        padding-right: 0;
    }
}

.tk-btn-icona {
    padding: 0.55rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
}

.tk-msg-inline {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 2px;
}

.tk-msg-inline-successo {
    color: var(--tk-green);
}

.tk-msg-inline-errore {
    color: var(--tk-danger);
}

.tk-carrello-azioni {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.tk-carrello-azioni input[type="number"] {
    width: 3.5rem;
    text-align: center;
    padding: 0.5rem 0.2rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    background: var(--tk-surface);
    color: var(--tk-fg);
}

/* ---------- piè di pagina ---------- */

.tk-footer {
    text-align: center;
    color: var(--tk-fg-mut);
    font-size: 0.8rem;
    padding: 1.5rem max(1.5rem, calc((100% - var(--tk-larghezza)) / 2));
}

/* Sotto i 640px l'intestazione arrivava a 125px di altezza — e con un
   visitatore non registrato, che ha quattro voci invece di tre, andava
   oltre: un sesto dello schermo consumato prima di qualsiasi contenuto.
   Nascondo le due voci che esistono già altrove invece di seppellire
   tutto dietro un menù a tendina: "Assistenza" sta nel piè di pagina,
   e ai kebabbari la home dedica una fascia intera. */
@media (max-width: 40rem) {
    .tk-nav a[href="/assistenza.php"],
    .tk-nav-partner {
        display: none;
    }

    /* Anche con due sole voci il logo e il menù non stavano in 375 pixel,
       quindi l'intestazione restava su due righe alta 125px. Qui il logo
       resta più grande di prima ma sotto la misura del desktop, altrimenti
       spinge il menù a capo e si torna al punto di partenza. */
    .tk-header {
        padding: 0.85rem 1rem;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .tk-logo {
        font-size: 1.6rem;
    }

    .tk-logo-img {
        height: 45px;
    }

    .tk-nav {
        gap: 0.15rem;
        flex-wrap: nowrap;
    }

    .tk-nav a {
        font-size: 0.82rem;
        padding: 0.3rem 0.5rem;
    }

    /* Il sottotitolo è una firma, non un'informazione: sul telefono
       ruberebbe la riga a qualcosa di utile. */
    .tk-subtitle {
        display: none;
    }
}

.tk-footer a {
    color: var(--tk-fg-mut);
}

.tk-links {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.tk-links a {
    color: var(--tk-red);
    text-decoration: none;
}

.tk-links a:hover {
    text-decoration: underline;
}

/* ============================================================
   CLASSIFICA
   Le tre voci tipografiche: display condensato per i titoli,
   monospaziato per etichette e dati, corpo normale per il resto.
   ============================================================ */

.tk-clas-titolo {
    font-family: var(--tk-display);
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    line-height: 0.9;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0 0 1rem;
    color: var(--tk-fg);
}

.tk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.tk-chip {
    display: inline-block;
    font-size: 0.82rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--tk-border-strong);
    color: var(--tk-fg-mut);
    text-decoration: none;
    white-space: nowrap;
}

.tk-chip:hover {
    border-color: var(--tk-fg-mut);
}

.tk-chip-attivo {
    background: var(--tk-red);
    border-color: var(--tk-red);
    color: var(--tk-white);
    font-weight: 600;
}

/* riga: rango | attività | andamento | punteggio | variazione */
.tk-clas-riga {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0 0.9rem;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--tk-border);
}

.tk-clas-riga:last-of-type {
    border-bottom: 0;
}

.tk-clas-riga-inattiva {
    opacity: 0.58;
}

.tk-clas-pos {
    font-family: var(--tk-display);
    font-size: 1.6rem;
    line-height: 1.05;
    color: var(--tk-fg-mut);
    font-variant-numeric: tabular-nums;
}

.tk-clas-riga-podio .tk-clas-pos {
    color: var(--tk-red);
}

.tk-clas-etichetta {
    display: block;
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tk-wait);
    margin-bottom: 0.1rem;
}

.tk-clas-nome {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-decoration: none;
    color: var(--tk-fg);
}

.tk-clas-nome:hover {
    color: var(--tk-red);
}

.tk-clas-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--tk-fg-mut);
    margin-top: 0.1rem;
}

/* Lo stato e il pulsante occupano lo stesso posto perché sono le due
   facce della stessa domanda: o puoi ordinare, o la riga ti dice perché
   no. Non compaiono mai insieme, e le righe restano allineate. */
.tk-clas-stato {
    display: inline-block;
    font-family: var(--tk-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    border: 1px solid var(--tk-border-strong);
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    margin-top: 0.35rem;
}

.tk-clas-ordina {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--tk-red);
    color: var(--tk-white);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.tk-clas-ordina:hover {
    background: var(--tk-red-dark);
}

.tk-clas-ordina:focus-visible {
    outline: 2px solid var(--tk-fg);
    outline-offset: 2px;
}

.tk-clas-destra {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: right;
}

.tk-clas-punt {
    font-family: var(--tk-display);
    font-size: 1.6rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--tk-fg);
    white-space: nowrap;
}

/* Il "/5" serve a dare la scala, non a competere col numero: corpo del
   testo, piccolo e smorzato, così l'occhio legge prima il punteggio. */
.tk-clas-punt small {
    font-family: var(--tk-body);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--tk-fg-mut);
    letter-spacing: 0.02em;
    margin-left: 0.1em;
}

.tk-badge {
    font-family: var(--tk-mono);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-badge-su {
    background: var(--tk-up-bg);
    color: var(--tk-up);
}

.tk-badge-giu {
    background: var(--tk-down-bg);
    color: var(--tk-down);
}

.tk-badge-fermo {
    background: var(--tk-surface-2);
    color: var(--tk-fg-mut);
}

.tk-badge-attesa {
    background: var(--tk-wait-bg);
    color: var(--tk-wait);
}

/* andamento */
.tk-spark {
    display: block;
}

.tk-spark .ln {
    fill: none;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.tk-spark .ln-su { stroke: var(--tk-up); }
.tk-spark .ln-giu { stroke: var(--tk-down); }
.tk-spark .ln-fermo { stroke: var(--tk-fg-mut); }
.tk-spark .pt-su { fill: var(--tk-up); }
.tk-spark .pt-giu { fill: var(--tk-down); }
.tk-spark .pt-fermo { fill: var(--tk-fg-mut); }

.tk-spark .base {
    stroke: var(--tk-border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

/* ============================================================
   HOME
   Niente foto dei locali (per scelta: le immagini stanno sul catalogo
   centrale e le carica solo l'admin), quindi il colpo d'occhio lo deve
   dare la tipografia. Il rosso pieno del blocco d'apertura è l'unico
   punto della parte pubblica dove il colore prende tutta la larghezza:
   è la firma, e proprio per questo non va ripetuta altrove.
   ============================================================ */

.tk-hero {
    background: var(--tk-red);
    color: var(--tk-white);
    padding: 2.5rem 1rem 2rem;
}

.tk-hero-dentro {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.tk-hero-titolo {
    font-family: var(--tk-display);
    font-size: clamp(2.4rem, 9vw, 4.2rem);
    /* Anton è già molto stretto e compatto: a 0.95 le due righe si
       toccavano quasi. 1.08 le fa respirare senza perdere il blocco. */
    line-height: 1.08;
    letter-spacing: 0.01em;
    margin: 0 0 0.75rem;
    color: var(--tk-white);
    text-wrap: balance;
}

.tk-hero-sotto {
    font-size: 1.02rem;
    line-height: 1.45;
    margin: 0 auto 1.5rem;
    max-width: 34rem;
    opacity: 0.92;
}

.tk-cerca {
    display: flex;
    gap: 0.5rem;
    max-width: 32rem;
    margin: 0 auto;
}

.tk-cerca input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--tk-white);
    color: #191512;
}

.tk-cerca input[type="search"]:focus {
    outline: none;
    border-color: #191512;
}

/* Dentro la fascia rossa il pulsante primario sarebbe rosso su rosso, cioè
   invisibile: qui diventa scuro. Vale per la ricerca della home e per la
   chiamata all'azione della pagina d'iscrizione. */
.tk-hero .tk-btn-primary,
.tk-cerca .tk-btn-primary {
    background: #191512;
    border-color: #191512;
    color: var(--tk-white);
    flex: 0 0 auto;
}

.tk-hero .tk-btn-primary:hover,
.tk-cerca .tk-btn-primary:hover {
    background: #000;
    border-color: #000;
}

/* ============================================================
   IL BENVENUTO IN FRANCHI (pagina d'iscrizione partner)
   Fascia scura fra il rosso dell'apertura e il bianco delle schede.
   Colori fissi e non da token: è una superficie disegnata scura, come
   il riquadro del QR è disegnato bianco — se seguisse il tema, in tema
   scuro il testo chiaro finirebbe su un fondo chiaro.
   ============================================================ */

.tk-conto {
    background: #191512;
    color: #f2ece7;
    padding: 2rem 1rem;
}

.tk-conto-dentro {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.tk-conto-eti {
    display: block;
    font-family: var(--tk-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a09589;
    margin-bottom: 0.75rem;
}

.tk-conto-intro {
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
}

.tk-conto-intro strong {
    color: var(--tk-red-acceso);
}

/* Le colonne si impilano da sole sul telefono: i segni × e = restano
   allineati perché sono voci della stessa riga flessibile. */
.tk-conto-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
}

.tk-conto-blocco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

/* Il bordo trasparente non è decorazione: dà ai numeri la stessa altezza
   di scatola del campo, che sotto ha una riga tratteggiata da 3px. Senza,
   gli elementi grandi resterebbero sfalsati di quei 3 pixel. */
.tk-conto-num {
    font-family: var(--tk-display);
    font-size: clamp(2.2rem, 6vw, 3rem);
    line-height: 1.1;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.tk-conto-sub {
    font-family: var(--tk-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a09589;
}

.tk-conto-segno {
    font-family: var(--tk-display);
    font-size: 1.6rem;
    color: #a09589;
}

/* Il campo è vistosamente un campo: se sembrasse testo nessuno lo
   toccherebbe, e tutta la fascia perderebbe il suo scopo. */
.tk-conto-input {
    width: 5.5rem;
    padding: 0;
    font-family: var(--tk-display);
    font-size: clamp(2.2rem, 6vw, 3rem);
    line-height: 1.1;
    text-align: center;
    color: #f2ece7;
    background: transparent;
    border: 0;
    border-bottom: 3px dashed #a09589;
    border-radius: 0;
    -moz-appearance: textfield;
}

/* Via le freccette su/giù: rubano spazio, spostano il numero dal centro e
   invitano a cliccare invece che a digitare — mentre qui il gesto che
   vogliamo è proprio che scriva il SUO scontrino. La tastiera resta
   numerica sul telefono grazie a inputmode. */
.tk-conto-input::-webkit-outer-spin-button,
.tk-conto-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tk-conto-input:focus {
    outline: none;
    border-bottom-color: var(--tk-red-acceso);
    border-bottom-style: solid;
}

.tk-conto-esito .tk-conto-num {
    color: var(--tk-red-acceso);
}

.tk-conto-chiusa {
    margin: 1.5rem 0 0;
    font-size: 0.9rem;
    color: #cbc0b6;
}

.tk-conto-chiusa strong {
    color: #f2ece7;
}

/* Sul telefono i quattro elementi più i due segni non stanno in riga: a
   capo si spezzerebbero a caso, con i segni orfani. Meglio incolonnarli,
   che si legge come un conto scritto a mano. */
@media (max-width: 30rem) {
    .tk-conto-riga {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tk-conto-segno {
        line-height: 1;
    }
}

.tk-hero-vicino {
    margin: 0.75rem 0 0;
    min-height: 1.4rem;
    font-size: 0.9rem;
}

.tk-link-azione {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--tk-white);
    text-decoration: underline;
    cursor: pointer;
}

.tk-hero-esito {
    display: block;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 0.2rem;
}

.tk-hero-numeri {
    font-family: var(--tk-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 1.5rem 0 0;
    opacity: 0.85;
}

/* --- intestazione di sezione: titolo a sinistra, rimando a destra --- */

.tk-sez-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 1rem;
    margin-bottom: 1rem;
}

.tk-sez-testa h2 {
    margin: 0;
}

.tk-sez-nota {
    font-family: var(--tk-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
}

.tk-mappa {
    height: 360px;
    border-radius: 8px;
    border: 1px solid var(--tk-border);
    margin-bottom: 1.25rem;
}

.tk-lista-locali {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tk-lista-locali li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--tk-border);
}

.tk-lista-locali li:last-child {
    border-bottom: 0;
}

.tk-lista-locali a {
    font-weight: 700;
    text-decoration: none;
}

.tk-lista-locali span {
    font-size: 0.86rem;
    color: var(--tk-fg-mut);
}

.tk-distanza {
    font-style: normal;
    color: var(--tk-fg);
    font-weight: 600;
}

/* --- numeri grandi: quanto costa, detto in tre cifre ---
   A un commerciante interessano prima i soldi e poi tutto il resto. Le
   cifre in Anton fanno il lavoro che altrove farebbe una fotografia. */

.tk-numeroni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem;
    margin: 1.25rem 0;
}

.tk-numerone {
    display: block;
    font-family: var(--tk-display);
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    line-height: 1;
    color: var(--tk-red);
}

.tk-numerone-eti {
    display: block;
    font-family: var(--tk-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    margin: 0.35rem 0 0.4rem;
}

.tk-numeroni small {
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--tk-fg-mut);
}

.tk-nota-forte {
    border-top: 1px solid var(--tk-border);
    padding-top: 1rem;
    margin-bottom: 0;
}

/* --- passi numerati: il numero è dato dal contatore, non scritto a mano,
   così inserire un passo in mezzo non richiede di rinumerare tutto. --- */

.tk-passi-numerati {
    list-style: none;
    counter-reset: passo;
    padding: 0;
    margin: 1.25rem 0;
}

.tk-passi-numerati li {
    counter-increment: passo;
    position: relative;
    padding: 0 0 1.1rem 3rem;
    line-height: 1.5;
}

.tk-passi-numerati li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: -0.15rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--tk-red);
    color: var(--tk-white);
    font-family: var(--tk-display);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tk-passi-numerati li:last-child {
    padding-bottom: 0;
}

/* --- fascia rivolta ai kebabbari --- */

.tk-invito-partner {
    border-left: 4px solid var(--tk-red);
}

.tk-invito-punti {
    font-family: var(--tk-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--tk-fg-mut);
}

/* ============================================================
   CARRELLO E CHECKOUT
   ============================================================ */

/* Il totale non è "un dato fra gli altri": è la cifra su cui la persona
   decide. Prima era un paragrafo qualsiasi. */
.tk-totale {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 1rem;
    border-top: 2px solid var(--tk-fg);
    margin-top: 1rem;
    padding-top: 0.9rem;
}

.tk-totale-eti {
    font-family: var(--tk-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
}

.tk-totale-cifra {
    font-family: var(--tk-display);
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tk-totale-riga {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--tk-fg-mut);
    padding: 0.15rem 0;
}

/* Scelte grandi da toccare: ritiro o consegna cambiano prezzo e percorso,
   quindi meritano più di un pallino da 13 pixel. Tutta l'area è
   cliccabile perché l'etichetta avvolge il campo. */
.tk-opzioni {
    display: grid;
    gap: 0.6rem;
    margin: 0.5rem 0 1.25rem;
}

.tk-opzione {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 2px solid var(--tk-border);
    border-radius: var(--tk-radius);
    cursor: pointer;
}

.tk-opzione:hover {
    border-color: var(--tk-border-strong);
}

.tk-opzione input {
    margin: 0.2rem 0 0;
    flex-shrink: 0;
}

.tk-opzione-testo {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tk-opzione-testo strong {
    font-size: 1rem;
}

.tk-opzione-testo small {
    color: var(--tk-fg-mut);
    line-height: 1.4;
}

.tk-opzione:has(input:checked) {
    border-color: var(--tk-red);
    background: var(--tk-red-bg, transparent);
}

.tk-opzione:has(input:checked) .tk-opzione-testo strong {
    color: var(--tk-red);
}

/* Dove sei nel percorso. Il momento di massimo attrito è crearsi
   l'account a metà acquisto: senza sapere quanto manca, si abbandona. */
.tk-fasi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    font-family: var(--tk-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tk-fase {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--tk-fg-mut);
}

.tk-fase::before {
    content: counter(fase);
    counter-increment: fase;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid var(--tk-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.tk-fasi {
    counter-reset: fase;
}

.tk-fase + .tk-fase {
    margin-left: 0.4rem;
}

.tk-fase.is-corrente {
    color: var(--tk-fg);
    font-weight: 700;
}

.tk-fase.is-corrente::before {
    background: var(--tk-red);
    border-color: var(--tk-red);
    color: var(--tk-white);
}

.tk-fase.is-fatta::before {
    content: "✓";
    background: var(--tk-green);
    border-color: var(--tk-green);
    color: var(--tk-white);
}

/* Il riepilogo è ciò che la persona sta per confermare: va separato dal
   modulo, o si legge come un'altra riga qualsiasi da compilare. */
.tk-riepilogo {
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    background: var(--tk-bg);
}

.tk-riepilogo-locale {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
}

.tk-riepilogo-dove {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--tk-fg-mut);
    line-height: 1.45;
}

.tk-riepilogo p:last-child {
    margin-bottom: 0;
}

/* CAP e città sulla stessa riga: erano affiancati con stili in linea,
   che nessuno può correggere dal foglio di stile. */
.tk-campi-affiancati {
    display: flex;
    gap: 0.75rem;
}

.tk-campo-stretto {
    flex: 1 1 6rem;
    min-width: 0;
}

.tk-campo-largo {
    flex: 3 1 10rem;
    min-width: 0;
}

/* Riga di ritorno discreta: prima era un pulsante grande che competeva
   con l'azione vera della pagina. */
.tk-indietro {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* ============================================================
   STATO DELL'ORDINE
   In cima va la cosa che serve davvero in mano alla cassa: il
   codice. Non il totale, non lo stato — quelli si leggono dopo.
   ============================================================ */

.tk-ord-codice {
    text-align: center;
    padding: 0.5rem 0 1.25rem;
}

.tk-ord-etichetta {
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    display: block;
    margin-bottom: 0.25rem;
}

.tk-ord-valore {
    font-family: var(--tk-display);
    font-size: clamp(2.6rem, 13vw, 4rem);
    line-height: 0.95;
    color: var(--tk-red);
    letter-spacing: 0.02em;
    display: block;
}

.tk-ord-nota {
    font-size: 0.86rem;
    color: var(--tk-fg-mut);
    display: block;
    margin-top: 0.3rem;
}

/* Ordine chiuso male: il codice serve ancora a citarlo all'assistenza,
   ma gridarlo in rosso a tutta pagina prometterebbe un ritiro che non
   ci sarà. Stessa struttura, voce più bassa. */
.tk-ord-codice.is-chiuso .tk-ord-valore {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    color: var(--tk-fg-mut);
}

.tk-ord-completo {
    font-family: var(--tk-mono);
    font-size: 0.68rem;
    color: var(--tk-fg-mut);
    display: block;
    margin-top: 0.5rem;
}

/* --- QR di ritiro ---
   Il fondo è bianco fisso anche in tema scuro: un QR chiaro su fondo scuro
   molti lettori non lo leggono, e qui deve funzionare al primo colpo con
   qualcuno che aspetta. */
.tk-ord-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--tk-border);
    border-radius: 12px;
    padding: 1rem;
    margin: 0 auto 1.25rem;
    max-width: 20rem;
}

/* Misura fissa invece di max-width in percentuale: un QR rimpicciolito
   smette di essere letto dai lettori, quindi non deve mai adattarsi al
   contenitore. 180px stanno anche sul telefono più stretto (320px meno i
   padding), e fissare l'ingombro evita che il riquadro salti quando
   l'immagine viene generata dallo script. */
.tk-ord-qr img,
.tk-ord-qr canvas {
    display: block;
    width: 180px;
    height: 180px;
}

/* Istruzione sopra, beneficio sotto: due pesi diversi perché sono due cose
   diverse — una la devi fare, l'altra spiega perché conviene. */
.tk-ord-qr-nota {
    margin: 0;
    line-height: 1.35;
    text-align: center;
    /* Colori espliciti, non ereditati: il riquadro resta bianco anche quando
       la pagina è scura, e i token del tema lì diventerebbero illeggibili. */
    color: #6f655e;
}

.tk-ord-qr-nota strong {
    display: block;
    font-size: 0.95rem;
    color: #191512;
}

.tk-ord-qr-nota span {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* --- passi di avanzamento --- */

.tk-passi {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.tk-passo {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0 0.85rem;
    position: relative;
    padding-bottom: 1.1rem;
}

.tk-passo:last-child {
    padding-bottom: 0;
}

/* Il filo che unisce i passi parte dal segno e arriva al successivo:
   sull'ultimo non c'è, altrimenti penderebbe nel vuoto. */
.tk-passo:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.69rem;
    top: 1.5rem;
    bottom: 0.1rem;
    width: 2px;
    background: var(--tk-border-strong);
}

.tk-passo-segno {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--tk-border-strong);
    background: var(--tk-surface);
    position: relative;
    z-index: 1;
}

.tk-passo-titolo {
    font-weight: 700;
    line-height: 1.5rem;
}

.tk-passo-ora {
    display: block;
    font-size: 0.84rem;
    color: var(--tk-fg-mut);
    margin-top: 0.1rem;
}

/* Fatto: pieno, non serve altro.
   In corso: anello rosso spesso, l'unico elemento vuoto ma marcato.
   Futuro: contorno tenue e testo smorzato — c'è, ma non è ancora. */
.tk-passo.is-fatto .tk-passo-segno {
    background: var(--tk-green);
    border-color: var(--tk-green);
}

.tk-passo.is-fatto:not(:last-child)::before {
    background: var(--tk-green);
}

.tk-passo.is-corrente .tk-passo-segno {
    border-color: var(--tk-red);
    border-width: 4px;
}

.tk-passo.is-corrente .tk-passo-titolo {
    color: var(--tk-red);
}

.tk-passo.is-futuro .tk-passo-titolo,
.tk-passo.is-futuro .tk-passo-ora {
    color: var(--tk-fg-mut);
    font-weight: 400;
}

.tk-ord-azioni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
    margin: 1.25rem 0;
}

.tk-ord-azioni .tk-btn {
    width: 100%;
}

/* ============================================================
   SCHEDA DEL LOCALE
   ============================================================ */

.tk-scheda-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.tk-scheda-nome {
    font-family: var(--tk-display);
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 0.92;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--tk-fg);
    max-width: 14ch;
}

.tk-scheda-valori {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: right;
}

.tk-scheda-punt {
    font-family: var(--tk-display);
    font-size: 2.2rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-scheda-punt small {
    font-family: var(--tk-body);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--tk-fg-mut);
    margin-left: 0.1em;
}

.tk-scheda-pos {
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
}

.tk-scheda-etichette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.tk-etichetta {
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    border: 1px solid var(--tk-border-strong);
    border-radius: 3px;
    padding: 0.18rem 0.5rem;
}

/* ---------- voto sui singoli piatti (facoltativo) ----------
   Chiuso di serie: la recensione di base non deve allungarsi di una riga
   per nessuno, perché ogni domanda in più costa recensioni e le recensioni
   sono ciò che alimenta le classifiche. Si apre solo a chi ha voglia. */

.tk-piatti-stato {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tk-piatti-apri {
    display: block;
    cursor: pointer;
    border: 1px dashed var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.tk-piatti-apri small {
    display: block;
    font-weight: 400;
    color: var(--tk-fg-mut);
    margin-top: 0.2rem;
}

.tk-piatti-apri::before {
    content: "▸ ";
    color: var(--tk-red);
}

.tk-piatti-stato:checked + .tk-piatti-apri::before {
    content: "▾ ";
}

.tk-piatti-stato:not(:checked) + .tk-piatti-apri + .tk-piatti {
    display: none;
}

/* Il fuoco da tastiera deve vedersi: l'interruttore vero è nascosto, quindi
   il contorno va disegnato sull'etichetta, che è ciò che si naviga. */
.tk-piatti-stato:focus-visible + .tk-piatti-apri {
    outline: 2px solid var(--tk-red);
    outline-offset: 2px;
}

.tk-piatti {
    border-left: 3px solid var(--tk-border-strong);
    padding-left: 0.9rem;
    margin-bottom: 1rem;
}

/* Gruppi di scelta della classifica. L'etichetta a sinistra dice quale
   domanda si sta rispondendo: senza, tre file di pastiglie identiche
   sembrano tre file di filtri intercambiabili. */
.tk-clas-gruppo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.7rem;
    margin-bottom: 0.6rem;
}

.tk-clas-gruppo-eti {
    flex: 0 0 7rem;
    font-family: var(--tk-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
}

.tk-clas-gruppo .tk-chips {
    flex: 1 1 16rem;
    margin: 0;
}

@media (max-width: 45.99rem) {
    /* Su schermo stretto l'etichetta va sopra le sue pastiglie, altrimenti
       si porta via metà della riga utile. */
    .tk-clas-gruppo-eti {
        flex-basis: 100%;
    }
}

/* ---------- consegna sulla scheda pubblica ----------
   Fin dove si arriva, quanto costa, e la risposta secca alla domanda che
   uno si fa prima di ordinare. Prima la scheda diceva solo l'etichetta
   "Consegna a domicilio": tutto il resto si scopriva alla fine del
   checkout, dopo aver composto l'ordine. */

.tk-consegna-info {
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 1.1rem 1.2rem;
    margin: 1.25rem 0;
}

.tk-consegna-info h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.tk-consegna-regole {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.tk-consegna-fasce {
    margin: 0.3rem 0 0;
    padding-left: 1.1rem;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.tk-zona-verifica {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tk-border);
}

.tk-zona-titolo {
    margin: 0 0 0.6rem;
    font-weight: 600;
}

/* I due modi di rispondere stanno sulla stessa riga finché ci stanno: sono
   alternative, non passaggi in sequenza. */
.tk-zona-comandi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tk-zona-comandi input[type="text"] {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--tk-surface);
    color: var(--tk-fg);
}

.tk-zona-oppure {
    font-size: 0.85rem;
    color: var(--tk-fg-mut);
}

.tk-zona-comandi .tk-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

#tk-zona-esito:empty {
    display: none;
}

#tk-zona-esito .tk-alert {
    margin-bottom: 0;
}

/* Gemella di .tkp-mappa-nota del pannello: la stessa avvertenza serve anche
   qui, perché il cerchio è in linea d'aria e sconfina. */
.tk-mappa-nota {
    font-size: 0.86rem;
    color: var(--tk-fg-mut);
    line-height: 1.45;
    margin: -0.4rem 0 1.25rem;
}

.tk-etichetta-aperto {
    color: var(--tk-up);
    border-color: var(--tk-up);
}

/* --- barre dei criteri con il trattino della media --- */

.tk-crit-titolo {
    font-family: var(--tk-mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-fg-mut);
    margin: 1.5rem 0 0.85rem;
}

.tk-crit {
    margin-bottom: 0.85rem;
}

.tk-crit-testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

.tk-crit-nome {
    font-size: 0.9rem;
}

.tk-crit-val {
    font-family: var(--tk-mono);
    font-size: 0.76rem;
    color: var(--tk-fg-mut);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-crit-val b {
    color: var(--tk-fg);
    font-size: 0.88rem;
}

.tk-barra {
    position: relative;
    height: 7px;
    background: var(--tk-surface-2);
    border-radius: 4px;
    border: 1px solid var(--tk-border);
}

.tk-barra i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: var(--tk-fg-mut);
}

.tk-barra-sopra i { background: var(--tk-up); }
.tk-barra-sotto i { background: var(--tk-down); }

/* Il trattino è la media della piattaforma: sporge sopra e sotto la
   barra perché deve leggersi come un riferimento esterno, non come
   parte del riempimento. */
.tk-barra u {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--tk-fg);
    opacity: 0.7;
}

.tk-clas-nota {
    margin: 1.25rem 0 0;
    padding: 0.8rem 0.9rem;
    background: var(--tk-surface-2);
    border-radius: var(--tk-radius-sm);
    font-size: 0.8rem;
    color: var(--tk-fg-mut);
    line-height: 1.5;
}

/* su schermo largo l'andamento diventa una colonna sua */
@media (min-width: 46rem) {
    .tk-clas-riga {
        grid-template-columns: 2.4rem minmax(0, 1fr) 6.5rem 5rem 5.2rem;
        align-items: center;
    }

    .tk-clas-destra {
        display: contents;
    }

    .tk-clas-destra .tk-spark {
        justify-self: end;
    }

    .tk-clas-destra .tk-clas-punt {
        justify-self: end;
    }

    .tk-clas-destra .tk-badge {
        justify-self: end;
    }

    .tk-clas-intestazione {
        display: grid;
        grid-template-columns: 2.4rem minmax(0, 1fr) 6.5rem 5rem 5.2rem;
        gap: 0 0.9rem;
        padding: 0.5rem 0;
        border-bottom: 2px solid var(--tk-fg);
        font-family: var(--tk-mono);
        font-size: 0.6rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--tk-fg-mut);
    }

    .tk-clas-intestazione span:nth-child(n+3) {
        text-align: right;
    }
}

@media (max-width: 45.99rem) {
    .tk-clas-intestazione {
        display: none;
    }
}

/* ---------- tessera fedeltà ---------- */

/* Deve somigliare a una tessera vera, non a un riquadro con dentro un
   contatore: è l'unico oggetto del sito che ha il compito di far venire
   voglia di tornare, e un elenco di numeri non lo fa.

   Fondo rosso fisso in entrambi i temi, e non i token di superficie: la
   tessera è un oggetto, non una parte della pagina, e deve staccarsi dallo
   sfondo tanto sul chiaro quanto sullo scuro. */
.tk-tessera {
    background: linear-gradient(140deg, var(--tk-red) 0%, var(--tk-red-dark) 100%);
    color: var(--tk-white);
    border-radius: var(--tk-radius);
    padding: 1rem 1.1rem 1.15rem;
    max-width: 26rem;
}

.tk-tessera-testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.tk-tessera-locale {
    font-family: var(--tk-display);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
}

/* Cifre a larghezza fissa: il conto cambia a ogni ordine e senza questo
   il resto della riga si sposterebbe da 9/10 a 10/10. */
.tk-tessera-conto {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    font-size: 0.9rem;
}

/* Cinque per riga: due file da cinque si contano a colpo d'occhio, dieci in
   fila no. */
.tk-tessera-timbri {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.tk-tessera-timbro {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tk-tessera-timbro.is-pieno {
    border-style: solid;
    border-color: transparent;
    background: var(--tk-white);
}

.tk-tessera-timbro img {
    width: 62%;
    height: auto;
}

.tk-tessera-timbro span {
    color: var(--tk-red);
    font-size: 1.1rem;
    line-height: 1;
}

.tk-tessera-premio {
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.tk-tessera-nota {
    font-size: 0.87rem;
    opacity: 0.92;
}

.tk-tessera-ferma {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* La tessera piena si annuncia da sola con un bordo chiaro, senza
   animazioni: comparirà mentre il cliente sta facendo altro. */
/* Tessera piena: il bordo bianco pieno c'era ma non si notava — su un
   riquadro già rosso, una cornice in più passa per decorazione.

   Tratteggiato perché il tratteggio è la convenzione del "ritaglia qui" e
   dei buoni sconto: dice da solo che c'è qualcosa da staccare.

   `outline` e non `border`: segue il raggio degli angoli, non entra nel
   calcolo delle dimensioni e quindi non fa muovere il contenuto di un
   pixel quando compare. */
.tk-tessera-completa {
    outline: 3px dashed var(--tk-white);
    outline-offset: 3px;
    animation: tk-tessera-pulsa 0.75s ease-in-out 4;
}

/* Quattro pulsazioni e poi basta. Un elemento che lampeggia per sempre
   diventa rumore che si impara a ignorare, e in una pagina che si tiene
   aperta darebbe fastidio invece che attirare. Il ritmo è lento di
   proposito: sopra le tre pulsazioni al secondo si entra nel territorio
   che può dare problemi a chi soffre di fotosensibilità. */
@keyframes tk-tessera-pulsa {
    0%, 100% { outline-color: var(--tk-white); outline-offset: 3px; }
    50% { outline-color: rgba(255, 255, 255, 0.2); outline-offset: 7px; }
}

/* Chi ha chiesto meno animazioni tiene il bordo tratteggiato fermo: il
   segnale è nel tratteggio, il movimento serviva solo a farlo notare. */
@media (prefers-reduced-motion: reduce) {
    .tk-tessera-completa {
        animation: none;
    }
}

/* L'annuncio del premio, che è la riga per cui esiste tutta la tessera. */
.tk-tessera-evviva {
    display: block;
    font-family: var(--tk-display);
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
}

.tk-tessera-retro {
    max-width: 26rem;
    margin-top: 0.5rem;
    font-size: 0.87rem;
    color: var(--tk-fg-mut);
}

.tk-tessera-retro summary {
    cursor: pointer;
    padding: 0.35rem 0;
}

.tk-tessera-retro ul {
    margin: 0.35rem 0;
    padding-left: 1.1rem;
}

/* Avviso del timbro nel carrello e sull'ordine: una riga, non un riquadro
   che compete col totale. */
.tk-timbro-avviso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--tk-radius-sm);
    background: var(--tk-surface-2);
    border-left: 3px solid var(--tk-red);
}

.tk-timbro-avviso.is-manca {
    border-left-color: var(--tk-border-strong);
    color: var(--tk-fg-mut);
}

/* Etichetta della tessera fedeltà sulla scheda del partner. Verde come
   «Aperto ora» perché è la stessa specie di informazione: qualcosa che
   questo locale offre adesso. Non esiste la gemella rossa per chi non ce
   l'ha — vedi il commento in partner-pubblico.php. */
.tk-etichetta-tessera {
    color: var(--tk-up);
    border-color: var(--tk-up);
}

/* ---------- interruttore a scorrimento per le caselle di un modulo ----------

   Vive dentro un <form> e si applica al salvataggio, a differenza di quello
   del tema che agisce subito. Da qui due accorgimenti: la casella vera resta
   nel documento (spostata fuori vista ma non `display:none`, o sparirebbe
   anche per la tastiera e per i lettori di schermo), e chi lo usa deve
   dirgli accanto che la modifica va salvata. */
.tk-switch {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.tk-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tk-switch-cursore {
    position: relative;
    flex: none;
    width: 3.4rem;
    height: 1.85rem;
    border-radius: 999px;
    background: var(--tk-surface-2);
    border: 1px solid var(--tk-border-strong);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.tk-switch-cursore::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.22rem;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: -0.675rem;
    border-radius: 50%;
    background: var(--tk-border-strong);
    transition: transform 0.18s ease, background 0.18s ease;
}

/* Verde e non rosso: qui acceso vuol dire "il servizio è offerto", ed è la
   stessa lingua dell'etichetta sulla scheda pubblica. */
.tk-switch input:checked + .tk-switch-cursore {
    background: var(--tk-up);
    border-color: var(--tk-up);
}

.tk-switch input:checked + .tk-switch-cursore::after {
    transform: translateX(1.5rem);
    background: var(--tk-white);
}

.tk-switch input:focus-visible + .tk-switch-cursore {
    outline: 2px solid var(--tk-red);
    outline-offset: 2px;
}

.tk-switch input:disabled + .tk-switch-cursore {
    opacity: 0.5;
}

/* ---------- Variante acceso/spento a colori ----------

   Il grigio dice "non acceso" ma non dice "spento": in un elenco di venti
   righe da scorrere in fretta, la differenza fra grigio e verde si nota meno
   di quella fra rosso e verde. Serve dove la riga è una delle tante e la
   risposta dev'essere leggibile con la coda dell'occhio.

   Spento è --tk-down e NON --tk-red: il rosso è il colore del marchio, e
   usarlo per dire "disattivato" gli insegnerebbe a significare "sbagliato"
   su un sito che è rosso dappertutto. --tk-down è il rosso-terra già usato
   per le discese in classifica, quindi vuol già dire "verso il basso". */
.tk-switch-stato .tk-switch-cursore {
    background: var(--tk-down);
    border-color: var(--tk-down);
}

.tk-switch-stato .tk-switch-cursore::after {
    background: var(--tk-white);
}

@media (prefers-reduced-motion: reduce) {
    .tk-switch-cursore,
    .tk-switch-cursore::after {
        transition: none;
    }
}

/* ---------- "premimi": scuotimento di un bottone che va premuto ----------

   Serve quando una modifica è stata fatta ma non ancora salvata, e il
   bottone che la registra è l'unica cosa che manca. Si applica da JavaScript
   togliendo e rimettendo la classe, così l'animazione riparte a ogni
   cambiamento invece di girare una volta sola.

   Due giri e basta: un bottone che si agita all'infinito diventa un tic
   nervoso della pagina, e dopo dieci secondi si guarda altrove. La
   rotazione è piccola di proposito — deve farsi notare con la coda
   dell'occhio, non far ballare l'interfaccia. */
@keyframes tk-scuoti {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
}

.tk-scuoti {
    animation: tk-scuoti 0.55s ease-in-out 2;
}

/* Chi ha chiesto meno animazioni non perde niente: il messaggio ce l'ha già
   scritto, lo scuotimento serviva solo a farglielo notare. */
@media (prefers-reduced-motion: reduce) {
    .tk-scuoti {
        animation: none;
    }
}

/* L'avviso "hai una modifica non salvata". Rosso perché non è una nota di
   contorno: se non si agisce, quello che si è appena fatto non esiste. */
.tk-da-salvare {
    color: var(--tk-red);
    font-weight: 600;
}