/* Aspetto condiviso delle pagine pubbliche (prenota.html, conferma-asporto.html): neutri chiaro/scuro e accento del locale. */
/* Raggi: contenitori 24px, pannelli 16px, controlli 12px; tondo solo per i contatori. */
:root {
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --c-canvas: 244 245 243; --c-surface: 252 252 251; --c-field: 244 245 243; --c-raised: 236 238 235; --c-line: 219 223 218;
    --c-ink: 20 26 22; --c-soft: 79 89 83; --c-faint: 96 106 100; --c-warn: 146 84 6; --c-danger: 185 28 28;
    --c-accent: 15 118 86; --c-accent-ink: 252 252 250; --c-accent-text: 15 118 86;
    --card-shadow: 0 1px 2px rgb(20 26 22 / 0.04), 0 14px 34px -18px rgb(20 26 22 / 0.18);
}
@media (prefers-color-scheme: dark) {
    :root {
        --c-canvas: 11 15 20; --c-surface: 18 24 32; --c-field: 11 16 22; --c-raised: 28 36 46; --c-line: 40 50 62;
        --c-ink: 236 240 243; --c-soft: 164 175 186; --c-faint: 131 143 155; --c-warn: 251 191 36; --c-danger: 248 113 113;
        --c-accent: 52 190 140; --c-accent-ink: 11 15 20; --c-accent-text: 94 214 168;
        --card-shadow: 0 0 0 1px rgb(255 255 255 / 0.02);
    }
}
html { background: rgb(var(--c-canvas)); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: rgb(var(--c-canvas)); color: rgb(var(--c-ink)); }
.font-display { font-family: 'Fraunces', Georgia, serif; }
button, a, label, select, summary { touch-action: manipulation; }
button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, select, textarea { font-size: 16px; accent-color: rgb(var(--c-accent)); }
:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; border-radius: 8px; }

.card { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 24px; box-shadow: var(--card-shadow); }
.panel { background: rgb(var(--c-field)); border: 1px solid rgb(var(--c-line)); border-radius: 16px; }
.fld { width: 100%; min-height: 48px; padding: 12px 14px; background: rgb(var(--c-field)); border: 1px solid rgb(var(--c-line)); border-radius: 12px; color: rgb(var(--c-ink)); outline: none; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); }
textarea.fld { min-height: 88px; resize: vertical; }
.fld::placeholder { color: rgb(var(--c-faint)); }
.fld:focus, .fld-wrap:focus-within { border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.22); outline: none; }
.fld:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px rgb(var(--c-field)) inset; -webkit-text-fill-color: rgb(var(--c-ink)); }
.lbl { display: block; font-size: 13px; font-weight: 600; color: rgb(var(--c-soft)); margin-bottom: 6px; }
.lbl .opt { font-weight: 500; color: rgb(var(--c-faint)); }
.hint { font-size: 13px; color: rgb(var(--c-faint)); }
.btn { min-height: 52px; width: 100%; border-radius: 12px; font-weight: 700; font-size: 15px; transition: transform 0.12s var(--ease), filter 0.15s, opacity 0.15s; }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.6; }
.btn-primary { background: rgb(var(--c-accent)); color: rgb(var(--c-accent-ink)); }
.step { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: rgb(var(--c-raised)); border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-accent-text)); font-weight: 800; font-size: 20px; line-height: 1; transition: transform 0.12s var(--ease), background-color 0.15s; }
.step:active { transform: scale(0.94); }
.link { text-decoration: underline; text-underline-offset: 3px; }

.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: rgb(var(--c-field)); border: 1px solid rgb(var(--c-line)); border-radius: 16px; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: rgb(var(--c-surface)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(var(--c-line)); transition: transform 0.22s var(--ease); }
.seg[data-mode="asporto"] .seg-thumb, .seg[data-mode="consegna"] .seg-thumb { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; min-height: 44px; padding: 0 10px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1.2; color: rgb(var(--c-soft)); transition: color 0.15s; }
.seg button[aria-selected="true"] { color: rgb(var(--c-accent-text)); }

.logo-tile { width: 80px; height: 80px; flex-shrink: 0; border-radius: 20px; overflow: hidden; background: #fcfcfa; border: 1px solid rgb(var(--c-line)); box-shadow: 0 0 0 4px rgb(var(--c-surface)); display: flex; align-items: center; justify-content: center; }
.cover-plain { background: linear-gradient(135deg, rgb(var(--c-accent) / 0.3), rgb(var(--c-accent) / 0.08)); }

/* Una pagina che appare: gli elementi entrano uno dopo l'altro, una volta sola; un cambio di stato
   (form pronto, richiesta ricevuta, altro modulo) è una dissolvenza breve, senza rimbalzi. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal .rise { animation: rise 0.3s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.fade-in-state { animation: fadeInState 0.22s var(--ease); }
@keyframes fadeInState { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pulseOpacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.skel { background: rgb(var(--c-raised)); border-radius: 12px; animation: pulseOpacity 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .reveal .rise, .fade-in-state, .skel { animation: none; }
    .seg-thumb, .btn, .step { transition: none; }
}
/* Il tocco ha una risposta ovunque; il passaggio del mouse solo dove esiste il mouse. */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { filter: brightness(1.07); }
    .step:hover { background: rgb(var(--c-line)); }
    .link:hover { color: rgb(var(--c-ink)); }
}

/* ---------- Orari e giorni a pulsanti, passi della richiesta, riepilogo ---------- */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
#bk-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 640px) { #bk-days { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); } }
.chip { min-height: 48px; padding: 6px 8px; border-radius: 12px; background: rgb(var(--c-field)); border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink)); font-weight: 700; font-size: 15px; line-height: 1.15; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.12s var(--ease), background-color 0.15s, border-color 0.15s, color 0.15s; }
.chip small { font-size: 12px; font-weight: 600; color: rgb(var(--c-soft)); text-transform: capitalize; }
.chip:active { transform: scale(0.96); }
.chip[aria-checked="true"] { background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); color: rgb(var(--c-accent-ink)); }
.chip[aria-checked="true"] small { color: rgb(var(--c-accent-ink) / 0.85); }
.prog { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.prog li { flex: 1; min-width: 0; }
.prog button, .prog span { display: block; width: 100%; text-align: left; min-height: 44px; padding-top: 10px; border-top: 4px solid rgb(var(--c-line)); font-size: 13px; font-weight: 700; color: rgb(var(--c-faint)); }
.prog li[aria-current="step"] button, .prog li[aria-current="step"] span { border-color: rgb(var(--c-accent)); color: rgb(var(--c-ink)); }
.prog li.done button { border-color: rgb(var(--c-accent) / 0.45); color: rgb(var(--c-soft)); }
.btn-ghost { background: transparent; border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink)); }
.sum { border: 1px solid rgb(var(--c-line)); border-radius: 16px; background: rgb(var(--c-field)); padding: 2px 16px; margin: 0; }
.sum > div { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgb(var(--c-line)); }
.sum > div:last-child { border-bottom: 0; }
.sum dt { font-size: 13px; font-weight: 600; color: rgb(var(--c-soft)); width: 5.2rem; flex-shrink: 0; }
.sum dd { margin: 0; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sum .edit { flex-shrink: 0; font-size: 13px; font-weight: 700; color: rgb(var(--c-accent-text)); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; padding: 0 4px; }
.sr-only-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: rgb(var(--c-accent)); } .btn-ghost:hover { background: rgb(var(--c-raised)); } }

/* ---------- Stili scelti dal ristorante (Impostazioni → Pagina pubblica → Stile) ---------- */
/* Classico: caratteri con le grazie, schede con ombra morbida (è quello di base, sopra). */
/* Moderno: caratteri senza grazie, tutto tondo. */
html[data-style="moderno"] .font-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.035em; }
html[data-style="moderno"] .card { border-radius: 28px; }
html[data-style="moderno"] .btn, html[data-style="moderno"] .seg, html[data-style="moderno"] .seg-thumb, html[data-style="moderno"] .seg button, html[data-style="moderno"] .chip, html[data-style="moderno"] .step { border-radius: 999px; }
html[data-style="moderno"] .fld, html[data-style="moderno"] .panel { border-radius: 16px; }
html[data-style="moderno"] .logo-tile { border-radius: 999px; }
/* Minimale: niente copertina (una riga di colore), schede piatte, poco peso. */
html[data-style="minimale"] .card { box-shadow: none; border-radius: 14px; }
html[data-style="minimale"] .panel, html[data-style="minimale"] .fld, html[data-style="minimale"] .chip, html[data-style="minimale"] .btn, html[data-style="minimale"] .step { border-radius: 8px; }
html[data-style="minimale"] #cover { height: 6px !important; background: rgb(var(--c-accent)); }
html[data-style="minimale"] #cover > * { display: none; }
html[data-style="minimale"] .id-body { margin-top: 0; padding-top: 22px; }
html[data-style="minimale"] .logo-tile { box-shadow: none; border-radius: 12px; }
/* Scuro: sempre scuro, anche con il telefono in chiaro. */
html[data-style="scuro"] { color-scheme: dark; --c-canvas: 11 15 20; --c-surface: 18 24 32; --c-field: 11 16 22; --c-raised: 28 36 46; --c-line: 40 50 62; --c-ink: 236 240 243; --c-soft: 164 175 186; --c-faint: 131 143 155; --c-warn: 251 191 36; --c-danger: 248 113 113; --card-shadow: 0 0 0 1px rgb(255 255 255 / 0.02); }