/**
 * Stili frontend del widget di prenotazione.
 *
 * Regole per la compatibilità coi page builder (Avada/Divi/Astra):
 * - tutte le classi sono prefissate .opensync- per evitare collisioni
 * - nessun reset globale (niente "*", niente reset di box-sizing globale)
 * - colori/font esposti come CSS custom properties, sovrascrivibili
 *   facilmente da un CSS custom del tema o dalle impostazioni del plugin
 */

.opensync-widget {
	/* Palette brand OpenSync: petrolio come colore primario, verde come
	   accento per stati positivi/successo, grigio molto chiaro per sfondi
	   e bordi. Tutto esposto come custom property, facilmente sovrascrivibile
	   da un CSS custom del tema o da future impostazioni "Aspetto" del plugin. */
	--opensync-primary: #4A818D;       /* petrolio chiaro - bottoni, elementi interattivi */
	--opensync-primary-hover: #275960; /* petrolio scuro - hover/stati attivi */
	--opensync-accent: #97C93D;        /* verde brand - conferme, stati positivi */
	--opensync-text: #275960;          /* testo principale, in tono col brand */
	--opensync-muted: #6b7280;         /* testo secondario neutro */
	--opensync-border: #e5e7eb;        /* grigio molto chiaro - bordi */
	--opensync-bg: #ffffff;            /* bianco - sfondo widget */
	--opensync-bg-subtle: #f7f8f8;     /* grigio molto chiaro - sfondi secondari */
	--opensync-radius: 8px;

	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0 0 16px 0;
	padding: 24px;
	background: var(--opensync-bg);
	border: 1px solid var(--opensync-border);
	border-radius: var(--opensync-radius);
	font-family: inherit; /* eredita il font del tema/builder, non lo forza */
	color: var(--opensync-text);
}

/* Affiancamento a due colonne: SOLO quando frontend.js rileva davvero un
   altro [opensync_booking] nello stesso blocco (vedi initPairing()). Di
   default un widget riempie tutta la larghezza disponibile — prima invece
   assumeva sempre "50%, come se ci fosse un secondo widget affiancato",
   anche quando era da solo, lasciando spazio vuoto a destra nel blocco del
   template (specialmente con colonne larghe del page builder). */
.opensync-widget.opensync-widget--paired {
	display: inline-block;
	vertical-align: top;
	width: calc(50% - 24px);
	min-width: 260px;
	max-width: 480px;
	margin: 0 16px 16px 0;
}

.opensync-widget *,
.opensync-widget *::before,
.opensync-widget *::after {
	box-sizing: border-box;
}

.opensync-widget__header {
	padding-bottom: 16px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--opensync-border);
}

.opensync-widget__title {
	margin: 0 0 4px;
	font-size: 1.25em;
	color: var(--opensync-text);
}

.opensync-widget__date {
	margin: 0 0 4px;
	color: var(--opensync-muted);
	font-size: 0.9em;
}

.opensync-widget__description {
	margin: 0 0 8px;
	color: var(--opensync-text);
	font-size: 0.95em;
	line-height: 1.5;
}

.opensync-widget__description p {
	margin: 0 0 8px;
}

.opensync-widget__description p:last-child {
	margin-bottom: 0;
}

.opensync-widget__availability {
	margin: 0 0 4px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--opensync-text);
}

.opensync-widget__closed {
	color: #b91c1c;
	font-weight: 600;
	background: var(--opensync-bg-subtle);
	padding: 10px 12px;
	border-radius: 6px;
}

/* Due colonne su desktop per i campi "corti" (Nome/Cognome, Email/
   Telefono...): ogni figlio diretto del form occupa entrambe le colonne
   di default (piena larghezza), i campi che si prestano ad affiancarsi
   dichiarano esplicitamente .opensync-field--pair per tornare a una sola
   colonna. Calendario, fasce orarie, textarea, testo informativo,
   checkbox e privacy restano sempre a piena larghezza (nessuna classe da
   aggiungere, è il comportamento di default). Sotto i 680px torna sempre
   a una sola colonna, riga per riga, come oggi. */
.opensync-widget__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
}

.opensync-widget__form > * {
	grid-column: 1 / -1;
}

.opensync-field--pair {
	grid-column: auto;
}

@media (max-width: 680px) {
	.opensync-widget__form {
		grid-template-columns: 1fr;
	}
}

/* Separa visivamente la scelta data/fascia oraria dai campi anagrafici
   sottostanti (Nome, Cognome, ecc.), ora affiancati in coppia. */
.opensync-widget__divider {
	grid-column: 1 / -1;
	height: 1px;
	margin: 18px 0 4px;
	border: none;
	background: var(--opensync-border);
}

.opensync-field--spacer {
	visibility: hidden;
	pointer-events: none;
}

.opensync-field {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.opensync-field label {
	font-size: 0.85em;
	font-weight: 600;
}

.opensync-field input,
.opensync-field select,
.opensync-field textarea {
	padding: 8px 10px;
	background: var(--opensync-bg-subtle);
	border: 1px solid var(--opensync-border);
	border-radius: 6px;
	font-size: 1em;
	width: 100%;
	transition: border-color 0.15s ease;
	font-family: inherit;
}

.opensync-field textarea {
	resize: vertical;
}

.opensync-field input:focus,
.opensync-field select:focus,
.opensync-field textarea:focus {
	outline: none;
	border-color: var(--opensync-primary);
	background: var(--opensync-bg);
}

/* Asterisco sui campi obbligatori: solo un'indicazione visiva discreta,
   non un contorno rosso permanente (quello arriva solo dopo un tentativo
   di invio con campi non compilati, vedi .opensync-invalid più sotto). */
.opensync-required-mark {
	color: #dc2626;
}

/* Contorno rosso: applicato via JS solo ai campi effettivamente incriminati
   dopo un tentativo di invio fallito, non permanentemente su tutti i campi
   obbligatori vuoti (che risulterebbe troppo invasivo prima ancora che
   l'utente abbia iniziato a compilare il form). */
/* Neutralizza lo stile nativo del browser su :invalid (Firefox in
   particolare mostra un contorno/ombra rossa di default sui campi
   obbligatori vuoti, indipendentemente dal nostro CSS e anche con
   novalidate sul form): torniamo al bordo normale finché non è il
   nostro JS a marcare esplicitamente un campo come .opensync-invalid. */
.opensync-field input:invalid,
.opensync-field select:invalid,
.opensync-field textarea:invalid,
.opensync-field--checkbox input:invalid {
	box-shadow: none;
	border-color: var(--opensync-border);
}

.opensync-field input.opensync-invalid,
.opensync-field select.opensync-invalid,
.opensync-field textarea.opensync-invalid,
.opensync-field--checkbox input.opensync-invalid {
	border-color: #dc2626;
}

/* Testo informativo scritto dall'admin: testo semplice, nessun box */
.opensync-field--info p {
	margin: 0;
	font-size: 0.9em;
	color: var(--opensync-text);
}

/* Card "mini": solo il titolo della sessione, cliccabile per rivelare il
   form. Di default riempie tutta la larghezza disponibile, esattamente
   come .opensync-widget: si affianca ad un'altra card mini SOLO quando
   frontend.js rileva davvero un fratello nello stesso blocco (vedi
   initPairing() e la classe .opensync-mini-card--paired sotto). */
.opensync-mini-card {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0 0 16px 0;
}

.opensync-mini-card.opensync-mini-card--paired {
	display: inline-block;
	vertical-align: top;
	width: calc(50% - 24px);
	min-width: 260px;
	max-width: 480px;
	margin: 0 16px 16px 0;
}

/* Da aperta, la card torna sempre a occupare tutto lo spazio disponibile
   (anche se era affiancata): il form completo che contiene ha bisogno di
   più spazio di quanto ne dia metà riga, e forzarlo in una larghezza
   ridotta lo schiaccerebbe. Nessun max-width residuo: stessa filosofia
   "riempi il blocco" di .opensync-widget. */
.opensync-mini-card.opensync-mini-open {
	display: block;
	width: 100%;
	max-width: none;
	margin-right: 0;
}

.opensync-mini-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 600px;
	text-align: left;
	padding: 14px 18px;
	background: var(--opensync-bg, #fff);
	border: 1px solid var(--opensync-border, #e5e7eb);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.opensync-mini-toggle:hover {
	border-color: var(--opensync-primary, #4A818D);
}

.opensync-mini-toggle__main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.opensync-mini-icon {
	font-size: 1.5em;
	color: var(--opensync-primary, #4A818D);
	flex-shrink: 0;
}

.opensync-mini-toggle__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.opensync-mini-title {
	font-size: 1.05em;
	font-weight: 600;
	color: var(--opensync-primary-hover, #275960);
}

.opensync-mini-desc {
	font-size: 0.85em;
	color: var(--opensync-text-muted, #6b7280);
	margin-top: 2px;
}

.opensync-mini-arrow {
	flex-shrink: 0;
	font-size: 1.4em;
	line-height: 1;
	color: var(--opensync-primary, #4A818D);
	transition: transform 0.2s ease;
}

.opensync-mini-card.opensync-mini-open .opensync-mini-arrow {
	transform: rotate(180deg);
}

.opensync-mini-form {
	margin-top: 8px;
}

/* Selettore fasce orarie */
.opensync-slot-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0; /* Safari: senza questo, i figli flex non si restringono e traboccano */
}

.opensync-slot-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0; /* fix overflow Safari: i flex-item di default non si restringono sotto al contenuto */
	padding: 10px 12px;
	background: var(--opensync-bg-subtle);
	border: 1px solid var(--opensync-border);
	border-radius: 8px;
	font-weight: 400;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.opensync-slot-option:hover {
	border-color: var(--opensync-primary);
}

/* Evidenzia visivamente la fascia selezionata */
.opensync-slot-option:has(input:checked) {
	border-color: var(--opensync-primary);
	background: var(--opensync-bg);
	box-shadow: 0 0 0 1px var(--opensync-primary);
}

.opensync-slot-option input[type="radio"] {
	flex-shrink: 0; /* il radio non deve mai restringersi, solo il testo accanto */
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--opensync-primary);
}

.opensync-slot-option > span {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	min-width: 0; /* fix overflow Safari, vedi sopra */
	flex: 1;
}

.opensync-slot-option .opensync-slot-time {
	font-weight: 600;
}

.opensync-slot-option em {
	font-style: normal;
	color: var(--opensync-muted);
	font-size: 0.85em;
	white-space: nowrap;
}

.opensync-slot-option--full {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Calendario ricorrente (sezione Appuntamenti): mese navigabile con
   frecce, un puntino sotto il numero segna i giorni prenotabili (stile
   "indicatore evento"), invece di riquadri colorati per ogni stato — così
   il mese resta leggibile come mese anche con molti giorni chiusi.
   Circa metà della larghezza disponibile, centrato. Nota: .opensync-field
   (il genitore) è un flex container in colonna — un "margin: 0 auto" da
   solo, senza una width esplicita, fa restringere l'elemento al contenuto
   invece di occupare la percentuale voluta (comportamento delle righe
   flex con margini automatici sull'asse trasversale): va sempre abbinato
   a una width dichiarata, non basta un max-width. */
.opensync-calendar {
	width: 37%;
	min-width: 320px;
	margin: 0 auto;
	background: var(--opensync-bg-subtle);
	border: 1px solid var(--opensync-border);
	border-radius: 10px;
	padding: 16px;
}

.opensync-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 13px;
}

.opensync-calendar__label {
	text-align: center;
	font-size: 1.05em;
	font-weight: 600;
	color: var(--opensync-text);
}

.opensync-calendar__prev,
.opensync-calendar__next {
	background: var(--opensync-bg);
	border: 1px solid var(--opensync-border);
	border-radius: 6px;
	width: 32px;
	height: 32px;
	line-height: 1;
	font-size: 0.9em;
	cursor: pointer;
	color: var(--opensync-text);
	transition: border-color 0.15s ease;
}

.opensync-calendar__prev:hover,
.opensync-calendar__next:hover {
	border-color: var(--opensync-primary);
}

.opensync-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

.opensync-calendar__dow {
	text-align: center;
	font-size: 0.7em;
	font-weight: 600;
	color: var(--opensync-muted);
	padding-bottom: 8px;
}

.opensync-calendar__day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 0.92em;
	color: var(--opensync-text);
	border-radius: 8px;
}

.opensync-calendar__day--empty {
	visibility: hidden;
}

.opensync-calendar__day--closed {
	color: var(--opensync-muted);
	opacity: 0.55;
}

.opensync-calendar__day--open {
	cursor: pointer;
	font-weight: 600;
	transition: background 0.15s ease;
}

.opensync-calendar__day--open:hover {
	background: var(--opensync-bg);
}

.opensync-calendar__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--opensync-accent);
	visibility: hidden;
}

.opensync-calendar__day--open .opensync-calendar__dot {
	visibility: visible;
}

.opensync-calendar__day--selected {
	background: var(--opensync-primary);
	color: #fff;
}

.opensync-calendar__day--selected .opensync-calendar__dot {
	background: #fff;
}

.opensync-calendar__loading {
	margin: 0;
	font-size: 0.85em;
	color: var(--opensync-muted);
}

/* Stesso trattamento "contorno rosso dopo un invio fallito" delle altre
   sezioni obbligatorie del form (vedi .opensync-invalid più sopra), qui
   applicato all'intero riquadro calendario invece che a un singolo input,
   dato che la data selezionata vive in un campo hidden non visibile. */
.opensync-calendar.opensync-invalid {
	border-color: #dc2626;
}

/* Su schermi davvero stretti (telefoni, non un normale schermo da laptop:
   quello resta sempre sopra i 680px) il calendario torna a piena
   larghezza e si riduce un altro po' oltre alla dimensione "base" qui
   sopra (che è già la versione compatta vista su desktop/laptop).
   font-size in em su tutti gli elementi interni (label, intestazione
   giorni, numeri) fa scalare il testo automaticamente insieme a questo.
   IMPORTANTE: questo blocco deve stare DOPO tutte le regole desktop del
   calendario qui sopra, non prima — in CSS, a parità di importanza, la
   regola scritta più in basso nel file vince sempre, anche dentro un
   media query che sta per conto suo "vincendo" per via dello schermo:
   messo prima, quasi tutte queste riduzioni venivano subito sovrascritte
   dai valori desktop dichiarati più sotto, e il calendario restava
   visivamente uguale su mobile. */
@media (max-width: 680px) {
	.opensync-calendar {
		width: 100%;
		min-width: 0;
		font-size: 0.85em;
	}

	.opensync-calendar__grid {
		gap: 4px;
	}
}

/* Campo privacy: card coerente con lo stile delle fasce orarie */
.opensync-field--privacy label,
.opensync-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	font-weight: 400;
	font-size: 0.85em;
	cursor: pointer;
	padding: 10px 12px;
	background: var(--opensync-bg-subtle);
	border: 1px solid var(--opensync-border);
	border-radius: 8px;
	transition: border-color 0.15s ease;
}

.opensync-field--privacy label:hover,
.opensync-field--checkbox label:hover {
	border-color: var(--opensync-primary);
}

.opensync-field--privacy input[type="checkbox"],
.opensync-field--checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--opensync-primary);
}

/* Modal di ringraziamento (creato dinamicamente da frontend.js) */
.opensync-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.opensync-modal-box {
	background: var(--opensync-bg, #fff);
	color: var(--opensync-text, #275960);
	padding: 28px;
	border-radius: 10px;
	max-width: 420px;
	width: 100%;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.opensync-modal-text {
	margin: 0 0 20px;
	font-size: 1.05em;
	white-space: pre-line;
}

.opensync-modal-close {
	padding: 10px 24px;
	background: var(--opensync-primary, #4A818D);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1em;
}

.opensync-modal-close:hover {
	background: var(--opensync-primary-hover, #275960);
}

.opensync-widget__submit {
	margin-top: 18px;
	padding: 10px 18px;
	background: var(--opensync-primary);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 1em;
	cursor: pointer;
	width: 100%;
}

.opensync-widget__submit:hover {
	background: var(--opensync-primary-hover);
}

.opensync-widget__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.opensync-widget__feedback {
	margin-top: 10px;
	font-size: 0.9em;
}

.opensync-widget__feedback[data-state="error"] {
	color: #b91c1c;
}

.opensync-manage__cancel-btn {
	margin-top: 10px;
	width: 100%;
	padding: 10px 18px;
	background: transparent;
	color: #b91c1c;
	border: 1px solid #b91c1c;
	border-radius: 6px;
	font-size: 0.95em;
	cursor: pointer;
}

.opensync-manage__cancel-btn:hover {
	background: rgba(185, 28, 28, 0.06);
}

.opensync-manage__cancel-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.opensync-widget__feedback[data-state="success"] {
	color: var(--opensync-primary-hover);
	background: var(--opensync-bg-subtle);
	padding: 8px 10px;
	border-radius: 6px;
	border-left: 3px solid var(--opensync-accent);
}

/* Su schermi stretti, un widget/card "affiancato" (.opensync-widget--paired
   / .opensync-mini-card--paired) torna comunque a riempire tutta la
   larghezza: senza questa regola, min-width:260px impedirebbe di restringersi
   fino al margine reale dello schermo, lasciando uno spazio vuoto a destra
   anche quando è già andato a capo su una riga tutta sua (un solo elemento
   per riga, ma largo meno del blocco che lo contiene). */
@media (max-width: 680px) {
	.opensync-widget.opensync-widget--paired,
	.opensync-mini-card.opensync-mini-card--paired {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0 0 16px 0;
	}
}