/* ═══ Campi di prenotazione — date, ospiti, stepper ═══════════════════
 *
 * Estratti da structure.css il 31/08/2026: erano nati per la pagina
 * struttura, e la scheda del singolo immobile era rimasta con i controlli
 * Bootstrap grezzi (form-control, form-select, label sopra separate) -
 * due box che fanno la stessa cosa con due aspetti diversi.
 *
 * Stanno qui, in un file che entrambe le pagine caricano, invece che
 * duplicati: cosi' restano allineati per costruzione e non per
 * disciplina. */

.paf-field {
	background: #f8f9fa;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: .6rem 1rem;
	min-height: 52px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: .75rem;
	transition: border-color .15s ease;
	cursor: pointer;
}

.paf-field:focus-within {
	border-color: transparent;
}

/* Label integrata */
.paf-field-label {
	display: block;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: var(--c-text-secondario, #6c6c6c);
	margin-bottom: 2px;
	pointer-events: none;
}

.paf-field-label i {
	font-size: 11px;
}

/* Input testo (date) */
.paf-field-input {
	display: block;
	width: 100%;
	border: none;
	background: transparent;
	font-family: var(--f-font1, "Raleway", sans-serif);
	font-weight: 600;
	/* 16px non 14px: sotto i 16px iOS Safari zooma automaticamente la
	   pagina al focus (input/select/textarea) - qui succedeva sui 5 campi
	   di testo del form Contatti (nome/cognome/email/telefono/messaggio,
	   directcontact.phtml). La classe e' condivisa anche col campo data
	   readonly e lo stepper ospiti del box Prenota, dove il focus non
	   apre tastiera e lo zoom non scattava comunque - ma un font piu'
	   grande li' non fa danno, meglio un solo valore per tutta la classe
	   che due varianti da mantenere allineate. */
	font-size: 16px;
	color: var(--c-text, #282828);
	padding: 0;
	outline: none;
	cursor: pointer;
}

.paf-field-input::placeholder {
	font-weight: 400;
	font-size: 16px;
	color: var(--c-text-secondario, #6c6c6c);
}

/* Stepper ospiti */
.paf-field--stepper {
	flex-direction: row;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1rem;
	cursor: default;
}

.paf-stepper-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--c-text-secondario, #6c6c6c);
	border-radius: 50%;
	background: transparent;
	color: var(--c-text, #282828);
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	flex-shrink: 0;
	padding: 0;
	line-height: 1;
}

.paf-stepper-btn:focus {
	outline: none;
	box-shadow: none;
}

.paf-stepper-btn:hover {
	background: var(--c-tasti, #5e5e5e);
	border-color: var(--c-tasti, #5e5e5e);
	color: #fff;
}

.paf-stepper-btn:active {
	transform: scale(.92);
}

.paf-stepper-value {
	flex: 1;
	text-align: center;
	font-family: var(--f-font1, "Raleway", sans-serif);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-text, #282828);
	user-select: none;
}


/* ═══ Campo ereditato — variante "sola lettura" ══════════════════════════
 *
 * Usata nel form "Richiedi maggiori informazioni" quando la pagina ha gia'
 * un box Prenota con date/ospiti: invece di richiederli una seconda volta,
 * si mostra qui il valore gia' scelto, in un campo che sembra un paf-field
 * ma non si clicca. Vedi booking-sync.js. */
.paf-field--readonly {
	cursor: default;
	background: #f0f1f2;
}

.paf-field--readonly .paf-field-value {
	font-family: var(--f-font1, "Raleway", sans-serif);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-text, #282828);
}

.paf-field--readonly .paf-field-value--empty {
	font-weight: 400;
	color: var(--c-text-secondario, #6c6c6c);
}

/* Variante cliccabile del campo ereditato: oggi solo le date (vedi
   directcontact.phtml), che si possono cambiare senza risalire al box
   Prenota - il pax resta un riepilogo muto, si cambia con lo stepper la'. */
.paf-field--clickable {
	cursor: pointer;
}

.paf-field--clickable:hover {
	background: #ebedee;
}


/* ═══ Prezzo/riepilogo del box Prenota (property) ═══════════════════════
 *
 * `label { color: #053864 }` in style.css e' una regola GLOBALE (vale su
 * tutto il sito) che qui colorava di blu anche le label degli extra costi
 * ("Custode notturno", "Pulizie") - un dettaglio che nella pagina
 * struttura non esiste (li' gli extra non passano da un checkbox in
 * questa forma). Non si tocca la regola globale, si sovrascrive solo
 * dentro il box prenotazione. */
#price_box label,
#discount_box label {
	color: var(--c-text, #282828);
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
}



/* ═══ Righe del riepilogo prezzo — nights/total/deposit ══════════════════
 *
 * ⚠️ TRASFERITE da structure.css il 31/08/2026, non semplicemente
 * copiate: erano rimaste solo li', e la scheda property - che le usa
 * nello stesso identico markup (vedi property_detail.phtml) - non carica
 * quel file. Risultato verificato in console: l'elemento aveva la classe
 * giusta ma NESSUNA regola per essa in nessun foglio caricato, quindi
 * vinceva il default del browser (18px) invece dei 15/14/11px voluti. */
.paf-sidebar-nights {
	font-size: 11px;
	font-weight: 600;
	color: var(--c-text-secondario, #6c6c6c);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.paf-sidebar-total-row {
	font-size: 15px;
}

.paf-sidebar-deposit-row {
	font-size: 14px;
	padding: 3px 0;
}

.paf-sidebar-deposit-row small {
	font-size: 11.5px;
}



/* ═══ Note informative del box (cancellazione, IVA, campi obbligatori) ═══
 *
 * ⚠️ TRASFERITE da structure.css il 31/08/2026, stessa causa delle righe
 * .paf-sidebar-* sopra: la property renderizza lo stesso #discount_box
 * (identico id, stesso markup) ma non caricava questo file - risultato,
 * le note restavano alla dimensione di default invece dei 12px voluti,
 * e "font-weight:400 !important" serviva a togliere un fw-bold che
 * altrimenti pesa su TUTTO il contenitore in Bootstrap. */
#discount_box {
	font-weight: 400 !important;
}

#discount_box .small {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: var(--c-text-secondario, #6c6c6c) !important;
	margin-bottom: 4px;
}


/* ═══ "Date non disponibili" — dentro il campo, non un box a parte ═════
 *
 * Tre passaggi. Il primo (rosso .alert-danger di Bootstrap) stonava nello
 * stile: pieno, angoli squadrati, font grande. Il secondo (.paf-booking-alert,
 * poi rimossa) sistemava la forma - stesso grigio dei campi, invito non
 * blocco - ma restava un box A PARTE sopra il campo data: nel peek mobile
 * (130px) finiva duplicato col riepilogo, e in generale spendeva altezza
 * per ripetere un concetto che il campo data, subito sotto, gia' risolve
 * (cambiare le date e' l'azione, non serve un secondo elemento per dirlo).
 *
 * REFACTOR 01/09/2026: l'errore e' ora .paf-field-note, un'appendice
 * DENTRO .paf-field (vedi property_detail.phtml, #errors_box dentro
 * #paf-field-dates-reservation) - stesso box del datepicker, non uno
 * nuovo. .paf-field--error aggiunge solo un bordo tenue al campo che gia'
 * contiene sia l'input sia la nota. */
.paf-field--error {
	border-color: var(--c-text-secondario, #c9c9c9);
}

.paf-field-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(0, 0, 0, .06);
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text, #282828);
	cursor: default;
}

.paf-field-note i {
	color: var(--c-text-secondario, #6c6c6c);
	font-size: 15px;
	margin-top: 1px;
}

.paf-field-note small {
	display: block;
	font-weight: 400;
	color: var(--c-text-secondario, #6c6c6c);
	margin-top: 1px;
}


/* ═══ Variante textarea (campo "Messaggio") ══════════════════════════════
 *
 * .paf-field ha min-height fisso e centra il contenuto in verticale: va
 * bene per un input a riga singola, non per un'area che deve poter
 * crescere. Qui l'altezza la decide il contenuto (align-items: stretch
 * di default), non un centraggio verticale. */
.paf-field--textarea {
	height: auto;
	align-items: stretch;
}

.paf-field--textarea .paf-field-input {
	resize: vertical;
	min-height: 74px;
	line-height: 1.4;
}


/* ═══ Form "Richiedi maggiori informazioni" — stessa pulizia del box
       Prenota ═══════════════════════════════════════════════════════════
 *
 * Era rimasto indietro: mentre il box Prenota (property_detail.phtml)
 * e' passato a .paf-field, questo form aveva ancora form-control di
 * Bootstrap con label BLU (color: #053864, regola globale in style.css)
 * separate sopra ogni campo - stessa causa gia' vista su
 * #price_box/#discount_box, qui pero' sull'intero form. Copre anche la
 * checkbox privacy, che ne era rimasta fuori.
 *
 * ⚠️ NON `#direct_contact label` generico: essendo una regola per ID batte
 * in specificita' .paf-field-label (classe), quindi il suo
 * `font-size: inherit` sovrascriveva anche le label GIA' sistemate,
 * riportandole ai 18px del contenitore - verificato in console
 * (label[for=contact-phone] leggeva 18px invece dei 12px voluti, l'unica
 * regola che la definisce e' .paf-field-label ma perdeva per specificita').
 * Si scopera esplicitamente FUORI da .paf-field-label: qui restano solo le
 * label "nude" del form (nessuna, oggi, ma se ne arrivasse una nuova senza
 * passare da .paf-field non deve tornare blu). */
#direct_contact label:not(.paf-field-label) {
	color: var(--c-text, #282828);
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
}

/* ═══ Piu' compatto — meno aria fra un campo e l'altro ═══════════════════
 *
 * .paf-field "di base" (52px min-height, .75rem di margine sotto) va bene
 * per il box Prenota, che ha 2-3 campi. Qui sono 6-7 di fila (nome,
 * cognome, email, telefono, date/ospiti ereditati, messaggio): la stessa
 * densita' allungava il pannello ben oltre il box Prenota accanto - due
 * form della stessa famiglia con un peso visivo molto diverso. */
#direct_contact .paf-field {
	min-height: 44px;
	padding: .45rem .9rem;
	margin-bottom: .5rem;
}

#direct_contact .paf-field--textarea .paf-field-input {
	min-height: 56px;
}

#direct_contact .send_contact {
	margin-top: .25rem;
}

#contact-privacy-row {
	font-size: 12.5px;
	color: var(--c-text-secondario, #6c6c6c);
	margin-bottom: .6rem !important;
}

#contact-privacy-row label {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-weight: 400;
}

/* Il link Privacy Policy usava il blu/sottolineato di default del browser
   - stessa famiglia del resto del form, non un link "web" qualsiasi. */
#contact-privacy-row a {
	color: var(--c-text, #282828);
	text-decoration: underline;
	font-weight: 600;
}