/* Form: informazioni pratiche + calendario + form di richiesta. */

  /* ============ Prezzi e informazioni pratiche ============ */
  /* Stanno nella sezione della richiesta, dove si guardano le date: prima erano
     solo nel footer (orari) o da nessuna parte (prezzi). Due pannelli su card. */
  .pratiche{
    display:grid; grid-template-columns:1fr; gap:clamp(1rem,2.5vw,1.6rem);
    margin:clamp(1.6rem,4vw,2.4rem) 0 clamp(1.8rem,4vw,2.6rem);
  }
  .pratiche > div{ background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:clamp(1.1rem,2.4vw,1.5rem); }
  .pratiche h3{ font-size:1.05rem; margin:0 0 .9rem; }
  .tariffe{ margin:0; display:grid; gap:.4rem .9rem; }
  .pratiche__prezzi .tariffe{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tariffe > div{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
    padding-bottom:.35rem; border-bottom:1px solid var(--line); }
  .tariffe dt{ color:var(--ink-soft); font-size:.92rem; }
  .tariffe dd{ margin:0; font-family:'Young Serif',serif; font-size:1.05rem; color:var(--ink); white-space:nowrap; }
  .pratiche__nota{ margin:.9rem 0 0; font-size:.88rem; color:var(--ink-soft); }
  
  

  /* ============ Disponibilità + form ============ */
  /* stretch (non start): le due card prendono la stessa altezza, quella del più alto */
  .book__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:stretch; margin-top:2rem; }
  /* senza min-width:0 gli item della griglia non scendono sotto il proprio min-content
     (gli input date/number sono "larghi" di natura) e sfondano il contenitore su mobile */
  .book__grid > *{ min-width:0; }
  

  /* colonna flex: così legenda e note si distribuiscono e la card riempie l'altezza
     invece di lasciare un buco in fondo quando il form è più alto */
  .cal{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.2rem 1.4rem; box-shadow:var(--shadow-sm);
    display:flex; flex-direction:column; }
  .cal__tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
  .cal__tab{ appearance:none; border:1px solid var(--line); background:var(--surface2); color:var(--ink); font:inherit; font-weight:700; font-size:.9rem;
    padding:.4rem .9rem; border-radius:999px; cursor:pointer; transition:.2s; }
  .cal__tab[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .cal__head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:0 0 .6rem; }
  .cal__month{ font-weight:700; margin:0; text-align:center; flex:1; }
  .cal__arrow{ appearance:none; border:1px solid var(--line); background:var(--surface2); color:var(--ink);
    width:2rem; height:2rem; flex:none; border-radius:8px; cursor:pointer;
    display:grid; place-items:center; transition:.2s var(--ease); }
  .cal__arrow:hover:not(:disabled){ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .cal__arrow:disabled{ opacity:.32; cursor:default; }
  .cal__arrow .icon{ width:1.05rem; height:1.05rem; stroke-width:2; }
  .cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  /* .cal__grid ne dichiara `display` esplicitamente, quindi batte la regola
     dello user-agent stylesheet [hidden]{display:none}: senza questa riga
     la griglia della suite non attiva resta impilata sotto quella visibile
     invece di sparire (stesso problema già risolto per .gb-lightbox). */
  .cal__grid[hidden]{ display:none; }
  .cal__dow{ text-align:center; font-size:.7rem; font-weight:700; color:var(--ink-soft); padding-bottom:.2rem; text-transform:uppercase; letter-spacing:.03em; }
  .cal__day{ aspect-ratio:1; display:grid; place-items:center; border-radius:7px; font-size:.85rem; background:var(--surface2); color:var(--ink); }
  .cal__day.is-empty{ background:transparent; }
  /* giorni già passati nel mese in corso: né liberi né occupati */
  .cal__day.is-past{ background:transparent; color:color-mix(in srgb, var(--ink) 30%, transparent); }
  .cal__day.is-busy{ background:var(--busy-bg); color:var(--busy); font-weight:700; text-decoration:line-through; }
  /* dato mancante (feed giù per quella unità): NON è "libero" — deve leggersi
     diverso sia da .is-busy sia dallo sfondo piatto del giorno libero, quindi
     un tratteggio invece di un colore pieno (il colore pieno lo usa già .is-busy). */
  .cal__day.is-unknown{ background:repeating-linear-gradient(135deg, var(--surface2), var(--surface2) 3px, var(--line) 3px, var(--line) 5px); color:var(--ink-soft); }
  /* margin-top auto qui: legenda, timbro e nota formano un gruppo unico in fondo,
     così l'altezza in eccesso non lascia un buco isolato in mezzo alla card */
  .cal__legend{ display:flex; gap:1.2rem; margin-top:auto; padding-top:1.1rem; font-size:.8rem; color:var(--ink-soft); }
  .cal__legend span{ display:inline-flex; align-items:center; gap:.4rem; }
  .cal__dot{ width:.85rem; height:.85rem; border-radius:4px; } .cal__dot.free{ background:var(--surface2); border:1px solid var(--line); } .cal__dot.busy{ background:var(--busy-bg); }
  .cal__dot.unknown{ background:repeating-linear-gradient(135deg, var(--surface2), var(--surface2) 2px, var(--line) 2px, var(--line) 3px); border:1px solid var(--line); }
  .cal__stamp{ margin:.4rem 0 0; font-size:.74rem; color:var(--ink-soft); }
  .cal__note{ margin:.9rem 0 0; padding-top:.9rem; border-top:1px solid var(--line);
    font-size:.82rem; color:var(--ink-soft); }

  .form{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:clamp(1.2rem,3vw,1.6rem); box-shadow:var(--shadow-sm); }
  .form h3{ margin-bottom:.2rem; }
  .form .sub{ color:var(--ink-soft); font-size:.94rem; margin-bottom:1.1rem; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
  .field{ margin-bottom:.7rem; min-width:0; }
  /* su schermi stretti i campi appaiati vanno in colonna: due input data affiancati non ci stanno */
  
  .field label{ display:block; font-size:.8rem; font-weight:700; color:var(--ink-soft); margin-bottom:.25rem; }
  .field input,.field select,.field textarea{ width:100%; min-width:0; font:inherit; font-size:.94rem; color:var(--ink);
    background:var(--surface2); border:1px solid var(--line); border-radius:8px; padding:.6rem .7rem; }
  .field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--ring); outline-offset:1px; border-color:var(--accent); }
  /* Il campo data apre il selettore da qualunque punto (vedi main.js), quindi
     deve anche sembrare cliccabile: senza questo il puntatore resta a "testo"
     e chi passa sopra non capisce che c'e' qualcosa da premere. */
  .field input[type="date"]{ cursor:pointer; }
  .field textarea{ resize:vertical; min-height:80px; }
  .field-help{ margin:-.2rem 0 .8rem; font-size:.78rem; color:var(--ink-soft); }
  /* nota rassicurante al posto del consenso a checkbox (testo ripreso dal form di /prove-colore/) */
  .privacy-note{ margin:.7rem 0 0; font-size:.78rem; color:var(--ink-soft); }
  /* la culla: unica cosa che nel listino di Roberto cambia il conteggio */
  .check{ display:flex; align-items:flex-start; gap:.6rem; margin:.2rem 0 1rem; cursor:pointer;
    font-size:.92rem; color:var(--ink-soft); line-height:1.5; }
  .check input{ appearance:none; flex:none; width:1.15rem; height:1.15rem; margin-top:.15em;
    border:1.5px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius:5px;
    background:var(--card); cursor:pointer; transition:background-color .15s, border-color .15s; }
  .check input:checked{ background:var(--accent); border-color:var(--accent);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4.5 4.5L19 7'/></svg>");
    background-size:.8rem; background-position:center; background-repeat:no-repeat; }
  .check input:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
  .check b{ font-weight:600; color:var(--ink); }
  .form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; }

  /* ============ Honeypot (Task 11) ============ */
  /* Fuori dal riquadro visibile per chiunque navighi, non solo `display:none`
     (alcuni bot lo controllano e saltano il campo se lo trovano) — resta nel
     DOM e nel flusso del documento, quindi un bot che compila "ogni input"
     lo trova comunque. position:absolute lo toglie dal flusso: zero impatto
     sull'altezza o sulla larghezza del form, zero differenza col render
     dell'oracolo (che non lo ha). */
  .hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

  /* ============ Stato del modulo (Task 11) ============ */
  /* Riferimento visivo: le pagine di esito di root/invia.php (card neutra,
     solo il titolo cambia colore) — nella palette del tema, non negli hex
     letterali di quella pagina. Niente fascia/bordo laterale colorato: è il
     tratto più riconoscibile delle interfacce generate, e qui basta il
     titolo a portare il segnale, come nell'originale. Il rosso
     dell'occupato (--busy/--busy-bg) resta riservato al calendario e non
     compare qui: gli stati non-ok tengono il colore di testo di default
     (--ink), solo il successo prende --accent. Assente per default (nessun
     `?richiesta=` in query string): zero impatto sul confronto con
     l'oracolo. */
  .form__stato{ background:var(--surface2); border:1px solid var(--line);
    border-radius:10px; padding:.9rem 1.1rem; margin:0 0 1.2rem;
    /* stesso stacco delle sezioni (hero.css): senza, atterrandoci sopra il
       messaggio finisce sotto la barra di navigazione, che e' fissa. */
    /* 6.5rem e non i 5.5 delle sezioni: la barra fissa arriva a 75px e con
       5.5rem (88px) il messaggio atterrava a 73, cioe' col bordo sotto la
       nav. Misurato il 20-08 a 1280 e 390. */
    scroll-margin-top:6.5rem;
    animation:va-esito-in .45s ease-out both; }
  /* Evidenziatore che decade: la sola dissolvenza non basta, perche' ci si
     atterra sopra a comparsa gia' finita e quel movimento non lo si vede.
     Parte dal verde dei chip e si spegne: dice "e' appena successo" senza
     lasciare rumore permanente. Solo sull'esito riuscito. */
  .form__stato--ok{ animation:va-esito-in .45s ease-out both, va-esito-luce 1.6s ease-out both; }
  @keyframes va-esito-luce{ 0%,25%{ background:var(--chip); border-color:var(--accent); } 100%{ background:var(--surface2); border-color:var(--line); } }
  .form--inviato .form__stato{ margin-bottom:1rem; }
  .form__dopo{ margin:0 0 .4rem; font-size:.92rem; color:var(--ink-soft); }
  .form__dopo a{ color:var(--accent); font-weight:700; }
  /* Staccato dal resto (richiesta di Paolo, 20-08): non e' un'alternativa
     allo stesso livello del messaggio, e' una via d'uscita per il caso raro
     di chi vuole mandare una seconda richiesta diversa. */
  .form__ancora{ margin:1.8rem 0 0; font-size:.85rem; }
  .form__ancora a{ color:var(--ink-soft); text-decoration:underline; }
  @keyframes va-esito-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .form__stato strong{ display:block; font-family:'Young Serif',serif; font-size:1.05rem; margin-bottom:.3rem; color:var(--ink); }
  .form__stato p{ margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
  .form__stato a{ color:var(--accent); font-weight:700; }
  .form__stato--ok strong{ color:var(--accent); }