/* ============================================================
   Antiche Delizie — base.css (token + componenti condivisi)
   Palette: carta calda + ocra come unico accento
============================================================ */
:root{
  --paper:#FBF8F2; --bianco:#FFFFFF;
  --ocra:#C2872E; --ocra-2:#9A6A1E; --ocra-soft:#F3E6CE;
  --inchiostro:#2B241C; --fumo:#736A5C; --linea:#ECE4D6;   /* --fumo scurito: 3.8 -> 5.3 di contrasto */
  --ok:#3E7C4F; --stop:#B23A2E;
  --r:14px; --r-sm:10px; --r-pill:999px;
  --ombra:0 4px 16px rgba(43,36,28,.07);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --testo:'Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--inchiostro);
  font-family:var(--testo);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0}
a{color:inherit}
.ic{display:block;flex:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}   /* l'attributo hidden deve vincere su .modal/.drawer/ecc. */

/* Bottoni */
.btn{
  display:inline-flex;align-items:center;gap:.45em;justify-content:center;
  font-family:var(--testo);font-weight:600;font-size:.95rem;
  background:var(--ocra);color:#fff;border:0;border-radius:var(--r-pill);
  padding:.7em 1.2em;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease,transform .15s ease;
  text-decoration:none;
}
.btn:hover{background:var(--ocra-2)}
.btn:active{transform:translateY(1px)}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:var(--stop);border:1px solid var(--linea)}
.btn--ghost:hover{background:#fff}
.btn--quiet{background:var(--bianco);color:var(--inchiostro);border:1px solid var(--linea)}
.btn--quiet:hover{background:var(--ocra-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);
  background:var(--bianco);color:var(--inchiostro);cursor:pointer;
}
.icon-btn{transition:background .3s ease,color .3s ease}
.icon-btn:hover{background:var(--ocra-soft)}
:focus-visible{outline:2.5px solid var(--ocra);outline-offset:2px}

/* Form */
.form{display:flex;flex-direction:column;gap:.85rem}
.form.narrow{max-width:380px}
label{font-size:.86rem;font-weight:600;color:var(--inchiostro);display:flex;flex-direction:column;gap:.35rem}
label.inline{flex-direction:row;align-items:center;gap:.5rem;font-weight:500}
input,select,textarea{
  font-family:var(--testo);font-size:1rem;color:var(--inchiostro);
  background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r-sm);
  padding:.62em .75em;width:100%;
}
input[type=checkbox],input[type=radio]{width:auto}
textarea{resize:vertical}
.form-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.form-row .grow,.form-row .inline.grow{flex:1}
fieldset{border:1px solid var(--linea);border-radius:var(--r-sm);padding:.7rem .8rem;margin:0}
legend{font-size:.8rem;font-weight:600;color:var(--fumo);padding:0 .3rem}

/* Chips (giorni, allergeni) */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  border:1px solid var(--linea);border-radius:var(--r-pill);
  padding:.4em .8em;font-size:.85rem;font-weight:500;background:var(--bianco);user-select:none;
}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:checked){background:var(--ocra);border-color:var(--ocra);color:#fff}
.chip--stop:has(input:checked){background:var(--stop);border-color:var(--stop)}

/* Messaggi */
.msg{border-radius:var(--r-sm);padding:.6rem .8rem;font-size:.9rem;font-weight:500}
.msg--stop{background:#FBE9E7;color:var(--stop)}
.msg--ok{background:#E8F2EA;color:var(--ok)}
.hint{color:var(--fumo);font-size:.85rem;margin:.2rem 0}
.badge{background:var(--stop);color:#fff;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;padding:.05em .5em;min-width:1.4em;text-align:center}

/* Drawer + scrim + modal */
.scrim{position:fixed;inset:0;background:rgba(28,22,16,.42);z-index:40}
.drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(440px,92vw);z-index:50;
  background:var(--paper);box-shadow:var(--ombra);display:flex;flex-direction:column;
  animation:slideIn .22s ease;
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.1rem;border-bottom:1px solid var(--linea)}
.drawer-body{padding:1.1rem;overflow:auto;flex:1}
.drawer-foot{padding:1.1rem;border-top:1px solid var(--linea);background:var(--bianco)}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(28,22,16,.42);padding:0}
.modal-card{background:var(--paper);width:min(560px,100%);max-height:92dvh;overflow:auto;
  border-radius:18px 18px 0 0;padding:1.1rem}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.modal-actions{display:flex;justify-content:space-between;gap:.6rem;margin-top:.4rem}
@media(min-width:640px){.modal{align-items:center}.modal-card{border-radius:18px}}

/* Toast */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;
  background:var(--inchiostro);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:500;box-shadow:var(--ombra)}

.loader{padding:3rem 1rem;text-align:center;color:var(--fumo)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Occhio mostra/nascondi password */
.pw-wrap{position:relative;display:flex;width:100%}
.pw-wrap input{flex:1;width:100%;padding-right:2.6rem}
.pw-eye{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);border:0;background:none;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--fumo);cursor:pointer;border-radius:50%;padding:0}
.pw-eye:hover{color:var(--inchiostro);background:var(--paper)}

/* Autofill del browser: niente sfondo azzurro, resta lo stile dell'app */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--bianco) inset!important;
  -webkit-text-fill-color:var(--inchiostro)!important;
  caret-color:var(--inchiostro);
  border-radius:inherit;
  transition:background-color 9999s ease-in-out 0s;
}
input:autofill{background:var(--bianco)}

/* Con lo zoom di nuovo consentito, i campi devono partire da 16px:
   sotto quella misura iOS ingrandisce da solo al focus. */
input,select,textarea{font-size:16px}