/* =========================================================================
 *  YOUNGO — Personalizzazione modulo di prenotazione Bookly
 *  ---------------------------------------------------------------------
 *  Da v0.24.0 questo foglio è CARICATO DAL PLUGIN.
 *
 *  Viene accodato da Youngo_Kbox_Frontend::enqueue_assets() solo sulle
 *  pagine che contengono lo shortcode [bookly-form], con dipendenza dagli
 *  stili di Bookly così da restare sempre dopo di loro nella cascata.
 *
 *  IMPORTANTE — non duplicarlo:
 *  il campo Bookly → Impostazioni → Aspetto → CSS personalizzato deve
 *  essere SVUOTATO. Se resta compilato le regole vivono in due posti e
 *  torna il problema che questa integrazione risolve.
 *
 *  COLORE: si mantiene il verde di brand #45ee39, impostato da Bookly.
 *  Attenzione: il testo BIANCO su quel verde ha contrasto 1,55:1 (illeggibile).
 *  Qui il testo dei bottoni è scuro: stesso verde, contrasto 8,95:1.
 * ========================================================================= */

/* ---- 1. Variabili di brand: per cambiare tema, si toccano solo queste ---- */
.bookly-form {
	--yk-primary: #45ee39;        /* verde Youngo */
	--yk-primary-dark: #33d128;   /* stato hover */
	--yk-on-primary: #16330f;     /* testo sopra il verde (mai bianco) */
	--yk-dark: #2d2a3e;           /* testo forte */
	--yk-gray: #6b6580;           /* testo secondario */
	--yk-border: #d9d5e5;
	--yk-surface: #f8f7fb;
	--yk-radius: 10px;
	--yk-gap: 14px;
}

/* ---- 2. Tipografia coerente col sito ---- */
.bookly-form,
.bookly-form input,
.bookly-form select,
.bookly-form textarea,
.bookly-form button {
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- 3. Campi: aspetto uniforme e più respiro ---- */
.bookly-form .bookly-form-group input[type="text"],
.bookly-form .bookly-form-group input[type="email"],
.bookly-form .bookly-form-group input[type="tel"],
.bookly-form .bookly-form-group input[type="number"],
.bookly-form .bookly-form-group select,
.bookly-form .bookly-form-group textarea {
	border: 1px solid var(--yk-border);
	border-radius: var(--yk-radius);
	padding: 11px 13px;
	font-size: 15px;
	color: var(--yk-dark);
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	width: 100%;
	box-sizing: border-box;
}
.bookly-form .bookly-form-group input:focus,
.bookly-form .bookly-form-group select:focus,
.bookly-form .bookly-form-group textarea:focus {
	border-color: var(--yk-primary);
	box-shadow: 0 0 0 3px rgba(69, 238, 57, 0.30);
	outline: none;
}

/* Etichette: meno gridate del verde di default. */
.bookly-form .bookly-form-group label,
.bookly-form label {
	color: var(--yk-gray);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
	display: block;
}

/* Testi di aiuto sotto i campi: più discreti. */
.bookly-form .bookly-form-group small,
.bookly-form .bookly-hint {
	color: #8b85a0;
	font-size: 12px;
}

/* ---- 4. INDIRIZZO su due colonne ----
 * Ogni campo indirizzo sta in un .bookly-box a sé, quindi di default
 * occupa una riga intera: sei campi = sei righe. Trasformando il
 * contenitore in griglia, i box si affiancano e l'altezza si dimezza. */
#bookly-js-address {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yk-gap);
	align-items: start;
	margin-bottom: 6px;
}
#bookly-js-address > .bookly-box {
	margin: 0;
	min-width: 0;
}
/* L'intestazione "Address" occupa tutta la larghezza. */
#bookly-js-address > .bookly-box.bookly-bold {
	grid-column: 1 / -1;
	color: var(--yk-dark);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-bottom: 1px solid #ece9f3;
	padding-bottom: 6px;
	margin-bottom: 2px;
}

/* ---- 5. CAMPI PERSONALIZZATI su due colonne ----
 * Codice fiscale, P.IVA, nome festeggiato, età stanno bene affiancati.
 * Le aree di testo (allergie, note) e i gruppi radio prendono tutta la
 * riga: :has() lo risolve senza dipendere dall'ordine dei campi. */
.bookly-custom-fields-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yk-gap);
	align-items: start;
}
.bookly-custom-fields-container > * {
	margin: 0;
	min-width: 0;
}
.bookly-custom-fields-container > *:has(textarea),
.bookly-custom-fields-container > *:has(input[type="radio"]),
.bookly-custom-fields-container > *:has(input[type="checkbox"]) {
	grid-column: 1 / -1;
}

/* ---- 6. Gruppo radio "Tipo fattura" come due schede affiancate ---- */
.bookly-custom-fields-container input[type="radio"] + label,
.bookly-form .bookly-form-group input[type="radio"] {
	cursor: pointer;
}
.bookly-form .bookly-form-group input[type="radio"] {
	accent-color: var(--yk-primary);
	width: auto;
	margin-right: 7px;
}

/* ---- 7. Bottoni ---- */
.bookly-form .bookly-nav-steps button,
.bookly-form button.bookly-round {
	background: var(--yk-primary);
	border: none;
	border-radius: var(--yk-radius);
	color: var(--yk-on-primary);
	font-weight: 600;
	font-size: 15px;
	padding: 12px 26px;
	text-transform: none;
	letter-spacing: 0;
	transition: background 0.15s;
}
.bookly-form .bookly-nav-steps button:hover,
.bookly-form button.bookly-round:hover {
	background: var(--yk-primary-dark);
}
/* Il pulsante "Indietro" è secondario: non deve competere col principale. */
.bookly-form .bookly-nav-steps .bookly-back-step,
.bookly-form .bookly-nav-steps button.bookly-js-back-step {
	background: #fff;
	color: var(--yk-gray);
	border: 1px solid var(--yk-border);
}
.bookly-form .bookly-nav-steps .bookly-back-step:hover {
	background: var(--yk-surface);
}

/* ---- 8. Barra di avanzamento in cima ---- */
.bookly-progress-tracker .active {
	color: var(--yk-primary);
}
.bookly-progress-tracker .active .step,
.bookly-stepper .bookly-step-active {
	background: var(--yk-primary) !important;
}

/* ---- 9. Errori di validazione più leggibili ---- */
.bookly-form .bookly-label-error {
	color: #c0392b;
	font-size: 12px;
	margin-top: 4px;
}

/* ---- 10. Mobile: torna tutto a una colonna ---- */
@media (max-width: 720px) {
	#bookly-js-address,
	.bookly-custom-fields-container {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 *  CORREZIONI
 * ========================================================================= */

/* ---- Telefono: il selettore di prefisso ha bisogno del suo spazio ----
 * La regola generale sul padding faceva sovrapporre bandierina e numero. */
.bookly-form .bookly-form-group input[type="tel"],
.bookly-form .iti input,
.bookly-form .intl-tel-input input {
	padding-left: 52px;
}
.bookly-form .iti,
.bookly-form .intl-tel-input {
	width: 100%;
	display: block;
}

/* ---- Gruppo radio "Tipo fattura": opzioni affiancate su una riga ----
 * Le opzioni finivano in celle diverse della griglia. Qui il blocco occupa
 * tutta la larghezza e le scelte si dispongono in linea. */
.bookly-custom-fields-container > *:has(input[type="radio"]) {
	grid-column: 1 / -1;
	display: block;
}
.bookly-custom-fields-container > *:has(input[type="radio"]) label:has(input[type="radio"]),
.bookly-form .bookly-form-group label:has(input[type="radio"]) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 20px 0 0;
	padding: 9px 16px;
	border: 1px solid var(--yk-border);
	border-radius: var(--yk-radius);
	background: #fff;
	font-weight: 500;
	color: var(--yk-dark);
	cursor: pointer;
}
.bookly-form label:has(input[type="radio"]:checked) {
	border-color: var(--yk-primary);
	box-shadow: 0 0 0 2px rgba(69, 238, 57, 0.25);
}

/* ---- Checkbox dei termini ----
 * Struttura reale di Bookly:
 *   .bookly-checkbox-group
 *     input.bookly-js-terms          (nascosto)
 *     label.bookly-square            (il quadrato visibile, con stili INLINE)
 *     label                          (il testo, label SEPARATA)
 *     .bookly-js-terms-error
 * Il quadrato ha width/float inline, quindi serve !important per ridimensionarlo.
 * Nessun display:flex sul contenitore esterno: restringeva la riga e mandava
 * il testo a capo. */
.bookly-form .bookly-box:has(.bookly-checkbox-group) {
	display: block;
}
.bookly-form .bookly-checkbox-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	line-height: 1.45 !important;
}
.bookly-form .bookly-checkbox-group > label.bookly-square {
	/* Non ridimensioniamo il quadrato: Bookly lo disegna con una sua struttura
	   interna (icona inclusa) e forzarne width/height lo deforma. Correggiamo
	   solo float e margini, che servono all'allineamento sulla riga. */
	float: none !important;
	margin: 0 !important;
	flex: 0 0 auto;
}
.bookly-form .bookly-checkbox-group > label:not(.bookly-square) {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--yk-dark);
	cursor: pointer;
	flex: 1 1 auto;
}
/* L'eventuale messaggio d'errore va su una riga sua. */
.bookly-form .bookly-checkbox-group > .bookly-label-error {
	flex-basis: 100%;
	margin-top: 2px;
}

/* ---- Allineamento verticale più regolare tra le due colonne ----
 * I testi di aiuto sotto alcuni campi rendevano le righe irregolari. */
.bookly-custom-fields-container > * {
	align-self: start;
}