/* Dreaming Italy Travel – Booking Italianway
   Valori ripresi dal widget Lodgify precedente e dai colori globali Elementor. */

/* contain: inline-size toglie al form una larghezza propria, così nei contenitori
   Elementor in riga la barra si adatta allo spazio disponibile invece di imporre il
   suo. Il layout orizzontale lo decide il JS (classe --wide) in base alla larghezza
   reale: con le container query Elementor misurava l'altezza sulla versione in
   colonna e lasciava ~200 px vuoti sotto la barra su desktop. */
.dit-booking-wrap {
	contain: inline-size;
	width: 100%;
}

/* Senza larghezza propria, se un contenitore Elementor allinea i figli a sinistra
   (es. Home e Alloggi su mobile) il form si ridurrebbe a 0 px: il widget che lo
   contiene va quindi sempre esteso a tutta la larghezza. */
.elementor-widget:has(.dit-booking-wrap) {
	align-self: stretch;
}

/* Il box alloggio, come il precedente widget Lodgify, non si allarga oltre una colonna. */
.dit-booking-wrap--box {
	max-width: 420px;
	margin-inline: auto;
}

.dit-booking {
	--dit-bg: #ffffff;
	--dit-text: #242e60;
	--dit-muted: #5b6386;
	--dit-border: #dddddd;
	--dit-focus: #0055ba;
	--dit-primary: #fac600;
	--dit-primary-hover: #fde380;
	--dit-primary-contrast: #333333;
	--dit-error: #b3261e;
	--dit-radius: 0.42em;
	--dit-input-radius: 6px;
	--dit-button-radius: 3.58em;
	--dit-shadow: 0 24px 54px 0 rgba(0, 0, 0, 0.1);

	box-sizing: border-box;
	display: grid;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 14px;
	background: var(--dit-bg);
	border-radius: var(--dit-radius);
	box-shadow: var(--dit-shadow);
	color: var(--dit-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.3;
}

.dit-booking *,
.dit-booking *::before,
.dit-booking *::after {
	box-sizing: border-box;
}

.dit-booking .dit-booking__dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.dit-booking .dit-booking__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dit-booking .dit-booking__field label {
	overflow: hidden;
	margin: 0;
	color: var(--dit-muted);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	/* Etichette su una riga: anche l'altezza misurata da Elementor resta quella reale. */
	white-space: nowrap;
}

.dit-booking .dit-booking__field input,
.dit-booking .dit-booking__field select {
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--dit-border);
	border-radius: var(--dit-input-radius);
	background-color: var(--dit-bg);
	color: var(--dit-text);
	font: inherit;
	line-height: 1.2;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.dit-booking .dit-booking__field select {
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23242e60' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

.dit-booking .dit-booking__field input:focus,
.dit-booking .dit-booking__field select:focus {
	border-color: var(--dit-focus);
	outline: 2px solid rgba(0, 85, 186, 0.2);
	outline-offset: 0;
}

/* Safari iOS: le date native altrimenti si restringono e perdono l'allineamento. */
.dit-booking .dit-booking__field input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
}

.dit-booking .dit-booking__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 24px;
	border: 0;
	border-radius: var(--dit-button-radius);
	background: var(--dit-primary);
	color: var(--dit-primary-contrast);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.dit-booking .dit-booking__submit:hover,
.dit-booking .dit-booking__submit:focus {
	background: var(--dit-primary-hover);
	color: var(--dit-primary-contrast);
}

.dit-booking .dit-booking__submit:focus-visible {
	outline: 2px solid var(--dit-focus);
	outline-offset: 2px;
}

.dit-booking .dit-booking__error {
	margin: 0;
	color: var(--dit-error);
	font-size: 0.85em;
}

.dit-booking .dit-booking__error[hidden] {
	display: none;
}

/* Barra in orizzontale quando c'è abbastanza spazio (classe aggiunta dal JS da 720px). */
.dit-booking-wrap--wide .dit-booking--bar {
	grid-template-columns: 2fr 1fr auto;
	align-items: end;
}

.dit-booking-wrap--wide .dit-booking--bar:has(.dit-booking__field--destination) {
	grid-template-columns: 1.2fr 2fr 1fr auto;
}

.dit-booking-wrap--wide .dit-booking--bar .dit-booking__submit {
	width: auto;
}

.dit-booking-wrap--wide .dit-booking--bar .dit-booking__error {
	grid-column: 1 / -1;
}

.dit-booking-notice {
	padding: 10px 14px;
	border: 1px dashed #b3261e;
	color: #b3261e;
	font-size: 0.9em;
}