/* Modulo di richiesta della pagina Prenota (sezione #richiedi, design in
 * designs/03-notte-rooftop/prenota.html). Contact Form 7 genera il proprio
 * markup con le sue classi (wpcf7-form-control, wpcf7-select,
 * wpcf7-acceptance, wpcf7-checkbox...): qui rivestito con i token del
 * design invece di provare a rinominare le classi CF7, più fragile a ogni
 * aggiornamento del plugin. .field/.form-row restano invece markup scritto
 * a mano nel modulo CF7 (etichette + contenitori), non generato dal
 * plugin. Ogni colore ha un fallback letterale via var(--nome, fallback):
 * funziona anche se le variabili di design non sono definite altrove nel
 * sito.
 *
 * !important diffuso di proposito: gli stili tipografici/spaziatura
 * globali di Blocksy (dimensione testo, margini di label/paragrafi
 * nell'area contenuto) vincono altrimenti sulle regole qui sotto anche
 * quando questo file si carica per ultimo, perché Blocksy li applica con
 * selettori più specifici (scoped all'area contenuto). Verificato sul
 * sito reale: senza !important il modulo prende la tipografia di Blocksy
 * invece della propria (testo troppo grande, spaziatura troppo larga).
 */

.booking-grid{ display:grid; grid-template-columns:.85fr 1fr; gap:56px; align-items:stretch; text-align:left; margin-top:56px; }
/* Niente più box visivo (background/bordo/padding) dietro il modulo: tolto
 * il 2026-08-13 per allineare Prenota al look "senza scatola" del modulo
 * di iscrizione evento — i campi stanno direttamente sullo sfondo della
 * pagina, come nella pagina di un singolo evento.
 *
 * Le regole di altezza restano necessarie a prescindere dal box visivo:
 * .booking-grid__form sta dentro una Sezione a 2 colonne di Blocksy (foto |
 * modulo), il cui allineamento verticale di default forza la colonna ad
 * "allungarsi" all'altezza della colonna della foto. Se la foto è più
 * bassa del contenuto del modulo, il modulo resta "schiacciato" a
 * quell'altezza e il bottone finisce a ridosso del bordo inferiore.
 * height/max-height/overflow forzano l'elemento a calcolare la propria
 * altezza solo dal proprio contenuto, ignorando l'altezza imposta dalla
 * colonna della foto accanto; align-self copre il caso in cui sia questo
 * stesso elemento (non un contenitore attorno) il figlio flessibile
 * allungato dalla Sezione. */
.booking-grid__form{
  height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important;
  align-self:flex-start !important; align-self:start !important;
}
/* Copre anche il contenitore colonna attorno al modulo, nel caso sia lui
 * (non il modulo stesso) ad avere l'altezza forzata dalla Sezione. Il
 * markup nativo di Gutenberg per una colonna è .wp-block-column: se
 * Blocksy ne usa uno diverso questa regola semplicemente non fa nulla,
 * innocua da lasciare. */
.wp-block-column:has(.booking-grid__form){
  align-self:flex-start !important; height:auto !important; min-height:0 !important; overflow:visible !important;
}
@media (max-width:900px){ .booking-grid{ grid-template-columns:1fr; } }

/* Blocksy dà un margine di default ai <form> nell'area contenuto (la
 * stessa tipografia generica che ha già richiesto !important su
 * label/select più sotto): senza azzerarlo qui, resta uno spazio sotto
 * l'ultimo elemento del modulo (il bottone) prima del bordo inferiore
 * della card, anche a .wpcf7-response-output già a altezza zero.
 *
 * display/height/overflow/position azzerati per esclusione: DevTools ha
 * mostrato il box di <form class="wpcf7-form"> stesso più basso del suo
 * contenuto reale, con il bottone "Invia richiesta" tagliato a metà fuori
 * dal box misurato — quindi non è più solo la card attorno (già coperta
 * sopra) ma il <form> stesso a essere vincolato in altezza o posizionato
 * in modo non standard da qualche stile generico del tema. */
.wpcf7, .wpcf7-form{
  margin:0 !important; padding:0 !important; display:block !important;
  height:auto !important; min-height:0 !important; max-height:none !important;
  overflow:visible !important; position:static !important; float:none !important;
}
/* Clearfix: se un figlio qualunque del modulo finisce float (dal tema o
 * da un plugin), l'altezza automatica del <form> lo esclude a meno che
 * qualcosa non "chiuda" il float — ::after con clear:both forza il form a
 * contare comunque tutta l'altezza reale dei figli float, bottone incluso. */
.wpcf7-form::after{ content:""; display:table; clear:both; }

.field{ margin-bottom:14px !important; }
.field label{
  display:block !important; font-size:.7rem !important; text-transform:uppercase !important; letter-spacing:.08em !important;
  color:var(--text-muted, #B8AFA2) !important; margin-bottom:6px !important; font-weight:600 !important; line-height:1.3 !important;
}
.form-row{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr !important; } }

/* CF7 avvolge ogni tag in un proprio <span class="wpcf7-form-control-wrap">
 * (e i tag acceptance/checkbox anche in .wpcf7-acceptance/.wpcf7-checkbox
 * sopra il .wpcf7-list-item): di base sono inline/inline-block con un
 * proprio display che varia da un tag all'altro, per questo lo spazio tra
 * etichetta e campo non era uguale per tutti i campi (es. select vs testo)
 * e i due checkbox avevano un distacco doppio del previsto. Azzerati qui a
 * blocco pieno larghezza, senza margini propri: lo spazio verticale lo
 * decidono solo .field/.form-row e i margini sotto sui checkbox. */
.wpcf7-form-control-wrap,
.wpcf7-acceptance,
.wpcf7-checkbox{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; }

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-date,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-textarea{
  width:100% !important; background:var(--bg, #120D08) !important; border:1px solid var(--line-strong, rgba(255,248,237,.24)) !important;
  color:var(--text, #FFF8ED) !important; padding:13px 15px !important; font-family:var(--sans, inherit) !important;
  font-size:.92rem !important; line-height:1.4 !important; border-radius:10px !important; margin:0 !important;
  height:auto !important; box-sizing:border-box !important;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-number:focus,
.wpcf7-form-control.wpcf7-date:focus,
.wpcf7-form-control.wpcf7-select:focus,
.wpcf7-form-control.wpcf7-textarea:focus{
  outline:none !important; border-color:var(--green, #C3DC2E) !important; box-shadow:0 0 0 3px rgba(195,220,46,.2) !important;
}
/* color-scheme:dark fa sì che il popup nativo del calendario (il riquadro
 * che si apre al click) sia scuro con testo chiaro, ma non colora anche
 * l'iconcina dentro il campo: quella resta nera per conto suo, e nessun
 * filter sul suo pseudo-elemento l'ha cambiata in modo affidabile. Quindi
 * qui l'icona nativa viene resa invisibile (ma resta cliccabile, apre
 * comunque il calendario) e sostituita da un'icona SVG bianca disegnata
 * come sfondo dell'input, nella stessa posizione. */
.wpcf7-form-control.wpcf7-date{
  color-scheme:dark;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFF8ED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 13px center !important; background-size:16px !important;
}
.wpcf7-form-control.wpcf7-date::-webkit-calendar-picker-indicator{
  cursor:pointer !important; opacity:0;
}

.wpcf7-form-control.wpcf7-select{
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 15px center !important; background-size:16px !important;
  padding-right:42px !important; cursor:pointer;
}
/* "Seleziona il tipo di evento" (opzione first_as_label) deve leggersi
 * come placeholder, non come una scelta già fatta: :invalid è affidabile
 * qui perché il campo è obbligatorio ([select* categoria...]), quindi
 * corrisponde esattamente allo stato "nessuna vera opzione selezionata",
 * senza dover indovinare come CF7 marca internamente quella prima voce. */
.wpcf7-form-control.wpcf7-select:invalid{ color:var(--text-muted, #B8AFA2) !important; }

/* [acceptance]/[checkbox]: CF7 avvolge già ogni opzione in .wpcf7-list-item
 * > label > input + span.wpcf7-list-item-label, niente wrapper <label>
 * scritto a mano attorno (creerebbe un <label> annidato dentro l'altro). */
.wpcf7-acceptance .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item{
  display:block !important; margin:0 0 14px !important; font-size:.84rem !important;
  color:var(--text-muted, #B8AFA2) !important; line-height:1.45 !important;
}
.wpcf7-acceptance .wpcf7-list-item label,
.wpcf7-checkbox .wpcf7-list-item label{
  display:flex !important; align-items:flex-start !important; gap:10px !important; cursor:pointer;
  text-transform:none !important; font-weight:400 !important; letter-spacing:normal !important; font-size:inherit !important;
}
.wpcf7-acceptance input[type=checkbox],
.wpcf7-checkbox input[type=checkbox]{
  flex-shrink:0; width:17px !important; height:17px !important; margin-top:2px !important;
  accent-color:var(--green, #C3DC2E); cursor:pointer;
}
.wpcf7-acceptance a, .wpcf7-checkbox a{ color:var(--green, #C3DC2E) !important; }

/* float:none/clear:both/position:static qui sono il punto chiave: se il
 * bottone (o il suo antenato più vicino) è float dal tema, l'altezza
 * automatica del <form> non lo conta affatto (i float escono dal flusso
 * normale a meno che qualcosa li "chiuda") — combacia esattamente con
 * quanto visto in DevTools, il box di <form> più corto del bottone che
 * doveva contenere, e col messaggio di risposta sovrapposto invece che
 * impilato sotto. */
.wpcf7-submit{
  font-family:var(--sans, inherit) !important; font-weight:700 !important; font-size:.92rem !important; letter-spacing:.01em !important;
  padding:17px 32px !important; border:none !important; border-radius:999px !important; cursor:pointer;
  background:var(--gradient-cta, linear-gradient(135deg, #D5E481, #C3DC2E)) !important; color:#14210a !important;
  box-shadow:0 8px 30px -8px rgba(195,220,46,.5); margin-top:8px !important;
  transition:transform .18s ease, box-shadow .18s ease;
  display:inline-block !important; float:none !important; clear:both !important; position:static !important;
}
.wpcf7-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -8px rgba(195,220,46,.65); }

/* position:static qui perché nello screenshot i "Compila questo campo."
 * comparivano spostati sopra la riga successiva invece che subito sotto
 * il proprio campo: sintomo dello stesso posizionamento non-statico che
 * ha tagliato il bottone (vedi .wpcf7-form più sotto). */
.wpcf7-not-valid-tip{
  color:var(--coral, #FF6B4A) !important; font-size:.8rem !important; margin-top:4px !important;
  display:block !important; position:static !important; float:none !important;
}
/* CF7 stampa sempre questo div dopo il modulo, anche vuoto/invisibile
 * (nessuna classe di stato finché non arriva una risposta): dargli
 * padding/margine incondizionati lasciava uno spazio fantasma sotto il
 * bottone anche prima di qualsiasi invio. :not(:empty) lo riserva a
 * quando c'è davvero un messaggio da mostrare. position:static/float:none/
 * clear:both perché nello screenshot il messaggio di errore compariva
 * sovrapposto al bottone invece che impilato pulito sotto: stesso
 * posizionamento non-statico responsabile del bottone tagliato dal box
 * di <form> (vedi .wpcf7-form più sotto). */
.wpcf7-response-output{
  font-size:.95rem !important; font-weight:700 !important; font-style:normal !important; border-radius:10px !important; margin:0 !important; padding:0 !important;
  display:block !important; position:static !important; float:none !important; clear:both !important; width:auto !important;
  outline:none !important; border:none !important; line-height:1.5 !important;
  /* CSS di default collassa gli "a capo" in un testo come uno spazio
     singolo: senza questa riga, un messaggio scritto su più righe nella
     scheda "Messaggi" di CF7 (Impostazioni aggiuntive) apparirebbe
     comunque tutto su una riga sola qui. */
  white-space:pre-line !important;
}
/* CF7 mette tabindex="-1" su questo div per potervi spostare il focus
 * (screen reader) dopo un invio: da vuoto/altezza zero, l'anello di focus
 * di default del browser si vedeva come una sottile riga colorata piena
 * larghezza anche a modulo appena caricato, prima di qualsiasi invio. */
.wpcf7-response-output:focus{ outline:none !important; box-shadow:none !important; }
.wpcf7-response-output:not(:empty){ margin-top:16px !important; padding:15px 18px !important; }
/* Il colore/bordo non si aggancia più a data-status o a classi generate
 * da CF7 (markup verificato inaffidabile su questo sito: né come figlio
 * né come fratello del form, né con classi automatiche sul div). La
 * classe form-msg--* qui sotto la aggiunge direttamente lo script
 * prenota-prefill.js in risposta agli eventi DOM ufficiali di CF7
 * (wpcf7mailsent/wpcf7invalid/wpcf7mailfailed/wpcf7spam), quindi non
 * dipende da nessuna assunzione sul markup generato dal plugin. */
.wpcf7-response-output.form-msg--success{
  color:var(--green, #C3DC2E) !important; border:2px solid var(--green, #C3DC2E) !important; background:rgba(195,220,46,.14) !important;
}
.wpcf7-response-output.form-msg--success::before{ content:"✓  "; }
/* Campi mancanti/non validi: l'utente può correggerli da solo, quindi
 * rosso "errore" (stesso corallo già usato altrove nel design per gli
 * stati di errore). */
.wpcf7-response-output.form-msg--error{
  color:var(--coral, #FF6B4A) !important; border:2px solid var(--coral, #FF6B4A) !important; background:rgba(255,107,74,.14) !important;
}
.wpcf7-response-output.form-msg--error::before{ content:"⚠  "; }
/* mail-failed/spam non sono "campi mancanti": sono un problema lato
 * server (invio fallito) o un blocco antispam, non qualcosa che l'utente
 * risolve compilando meglio il modulo. Giallo di avviso per distinguerli
 * dal rosso "correggi i tuoi dati" sopra. */
.wpcf7-response-output.form-msg--warning{
  color:var(--amber, #E8B93A) !important; border:2px solid var(--amber, #E8B93A) !important; background:rgba(232,185,58,.14) !important;
}
.wpcf7-response-output.form-msg--warning::before{ content:"ⓘ  "; }

/* Barra "Posti prenotati X / Y" sopra il modulo di iscrizione evento
 * (inc/iscrizione-evento-*.php, shortcode [evento_se_disponibile] in
 * eventi-shortcodes.php). Non esisteva ancora sul sito reale prima
 * dell'iscrizione eventi: Prenota non ha mai avuto bisogno di una barra di
 * capienza, quindi queste regole (presenti nel mockup
 * designs/03-notte-rooftop/style.css) non erano mai state portate qui.
 * Stesso trattamento delle regole sopra: !important + fallback letterale
 * su ogni var(--nome), per lo stesso motivo (tipografia generica di
 * Blocksy altrimenti vincente, variabili di design non garantite altrove
 * sul sito). */
.capacity-status{ margin-bottom:18px !important; max-width:65ch; }
.capacity-status__row{
  display:flex !important; justify-content:space-between !important; align-items:baseline !important;
  margin-bottom:8px !important; font-size:.82rem !important; color:var(--text-muted, #B8AFA2) !important;
}
.capacity-status__row strong{ color:var(--text, #FFF8ED) !important; font-weight:700 !important; }
.capacity-status__bar{
  height:6px !important; border-radius:999px !important; overflow:hidden !important;
  background:var(--line-strong, rgba(255,248,237,.24)) !important;
}
.capacity-status__fill{
  height:100% !important; border-radius:999px !important;
  background:var(--gradient-cta, linear-gradient(135deg, #D5E481, #C3DC2E)) !important;
}