/**
 * Bagliori Booking — la finestra di prenotazione.
 *
 * Sta su ogni pagina del sito, quindi e' corto di proposito: qui c'e' solo la
 * finestra, il bottone e la sagoma che si vede mentre il modulo arriva. Tutto
 * il resto — calendario, targhette, campi — vive in booking.css, che si
 * carica solo al primo tocco.
 *
 * Scritto pensando prima al telefono: li' la finestra prende tutto lo schermo
 * e deve sembrare un'app. Il riquadro centrato e' l'eccezione, e comincia da
 * 700px in su.
 */

/* ------------------------------------------------------------------ */
/* Il bottone                                                          */
/* ------------------------------------------------------------------ */

/*
 * Due classi con due mestieri diversi, e tenerle separate conta.
 *
 * .bgl-apri dice soltanto "questo apre la finestra" e non vale un solo
 * colore: e' quella da mettere su un bottone gia' disegnato in Kadence, che
 * deve restare esattamente com'e'.
 *
 * .bgl-pop-btn e' l'aspetto, e la mette solo lo shortcode [bgl_bottone] per
 * chi non ha voglia di disegnarselo. Se le due cose fossero una classe sola,
 * aggiungerla a un bottone Kadence ne cancellerebbe lo stile — e sarebbe una
 * sorpresa sgradevole scoperta a sito pubblicato.
 *
 * I colori sono quelli decisi per tutto il plugin: nero con bordo bianco, e al
 * passaggio del mouse si rovescia. Il bordo bianco su pagina bianca non si
 * vede, ed e' voluto: serve dove il bottone appoggia su una foto o su una
 * sezione colorata, dove senza si perderebbe.
 *
 * Le due classi insieme fanno 0,2,0 di specificita': abbastanza da non farsi
 * sovrascrivere da regole del tema tipo `.entry-content button`, che da sole
 * batterebbero una classe singola.
 */
.bgl-apri.bgl-pop-btn {
	-webkit-appearance: none;
	appearance: none;
	background: #111318;
	border: 2px solid #fff;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	/* 48px di altezza minima: sotto, il dito sbaglia. */
	min-height: 48px;
	padding: 0.85em 1.9em;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.bgl-apri.bgl-pop-btn:hover,
.bgl-apri.bgl-pop-btn:focus-visible {
	background: #fff;
	border-color: #111318;
	color: #111318;
}

.bgl-apri.bgl-pop-btn:focus-visible {
	outline: 3px solid #111318;
	outline-offset: 3px;
}

.bgl-apri.bgl-pop-btn.is-chiaro {
	background: #fff;
	border-color: #111318;
	color: #111318;
}

.bgl-apri.bgl-pop-btn.is-chiaro:hover,
.bgl-apri.bgl-pop-btn.is-chiaro:focus-visible {
	background: #111318;
	border-color: #fff;
	color: #fff;
}

.bgl-apri.bgl-pop-btn.is-linea {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.bgl-apri.bgl-pop-btn.is-linea:hover,
.bgl-apri.bgl-pop-btn.is-linea:focus-visible {
	background: #111318;
	border-color: #111318;
	color: #fff;
}

.bgl-apri.bgl-pop-btn.is-largo {
	display: block;
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* La finestra                                                         */
/* ------------------------------------------------------------------ */

.bgl-pop {
	background: #fff;
	border: 0;
	color: #1f2328;
	display: flex;
	flex-direction: column;
	margin: 0;
	max-height: none;
	max-width: none;
	overflow: hidden;
	padding: 0;
	width: 100%;

	/*
	 * 100vh su telefono e' piu' alto dell'area davvero visibile, per via della
	 * barra degli indirizzi: il pulsante in fondo finisce sotto il bordo dello
	 * schermo. 100dvh segue la barra mentre compare e scompare. La riga sopra
	 * resta per i browser che non conoscono dvh: in quel caso vale quella e la
	 * seconda viene ignorata.
	 */
	height: 100vh;
	height: 100dvh;

	/* Da cui parte l'animazione di entrata. */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.bgl-pop.is-in {
	opacity: 1;
	transform: none;
}

.bgl-pop::backdrop {
	background: rgba(12, 10, 20, 0.55);
}

@supports (backdrop-filter: blur(2px)) {
	.bgl-pop::backdrop {
		backdrop-filter: blur(3px);
	}
}

/* Chi ha chiesto meno movimento non lo riceve: compare e basta. */
@media (prefers-reduced-motion: reduce) {
	.bgl-pop {
		transform: none;
		transition: opacity 0.12s linear;
	}
}

/* ---- Intestazione ---- */

.bgl-pop-head {
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #e6e9ee;
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	justify-content: space-between;
	/* Il notch e la fotocamera degli iPhone stanno qui sopra. */
	padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
}

.bgl-pop-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	min-width: 0;
}

.bgl-pop-x {
	-webkit-appearance: none;
	appearance: none;
	background: #f2f4f7;
	border: 0;
	border-radius: 999px;
	color: #1f2328;
	cursor: pointer;
	flex: 0 0 auto;
	height: 44px;
	padding: 10px;
	width: 44px;
}

.bgl-pop-x svg {
	display: block;
	height: 100%;
	width: 100%;
}

.bgl-pop-x:hover,
.bgl-pop-x:focus-visible {
	background: #111318;
	color: #fff;
}

.bgl-pop-x:focus-visible {
	outline: 3px solid #111318;
	outline-offset: 2px;
}

/* ---- Corpo ---- */

.bgl-pop-body {
	flex: 1 1 auto;
	/*
	 * Senza questo, arrivati in fondo al modulo il gesto continua sulla pagina
	 * dietro: si chiama scroll chaining ed e' il motivo per cui certi popup
	 * sembrano "scivolare via" sotto il dito.
	 */
	overscroll-behavior: contain;
	overflow-y: auto;
	padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
	-webkit-overflow-scrolling: touch;
}

/*
 * Dentro la finestra il modulo non ha bisogno del suo riquadro: la finestra
 * e' gia' il riquadro. Doppi bordi e doppie ombre sono la firma di un popup
 * costruito incollando due cose.
 */
.bgl-pop .bgl-widget {
	border: 0;
	box-shadow: none;
	margin: 0;
	max-width: none;
	padding: 0;
}

/* ---- La sagoma ---- */

.bgl-pop-skel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 4px;
}

.bgl-pop-bar {
	background: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 50%, #eef0f4 75%);
	background-size: 400% 100%;
	border-radius: 10px;
	height: 54px;
}

.bgl-pop-bar.is-title {
	height: 26px;
	width: 62%;
}

.bgl-pop-bar.is-wide {
	height: 120px;
}

@media (prefers-reduced-motion: no-preference) {
	.bgl-pop-bar {
		animation: bgl-pop-shimmer 1.4s ease-in-out infinite;
	}
}

@keyframes bgl-pop-shimmer {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: 0 0;
	}
}

/* ---- Quando non si riesce ad aprire ---- */

.bgl-pop-fail {
	padding: 24px 4px;
	text-align: center;
}

.bgl-pop-fail p {
	margin: 0 0 18px;
}

.bgl-pop-link {
	background: #111318;
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-weight: 700;
	min-height: 48px;
	padding: 0.85em 1.8em;
	text-decoration: none;
}

.bgl-pop-link:hover,
.bgl-pop-link:focus-visible {
	background: #fff;
	box-shadow: inset 0 0 0 2px #111318;
	color: #111318;
}

/* ------------------------------------------------------------------ */
/* Da tablet in su: riquadro centrato                                  */
/* ------------------------------------------------------------------ */

@media (min-width: 700px) {
	.bgl-pop {
		border-radius: 18px;
		box-shadow: 0 30px 80px rgba(10, 8, 20, 0.35);
		height: auto;
		/*
		 * Non 90vh fisso: se il modulo e' corto la finestra e' corta. Una
		 * finestra alta tre quarti dello schermo con dentro due righe sembra
		 * rotta.
		 */
		max-height: min(88vh, 940px);
		max-height: min(88dvh, 940px);
		width: min(760px, calc(100vw - 48px));
	}

	.bgl-pop-head {
		padding: 18px 22px;
	}

	.bgl-pop-title {
		font-size: 1.2rem;
	}

	.bgl-pop-body {
		padding: 22px 26px 28px;
	}
}

/* ------------------------------------------------------------------ */
/* Tema scuro                                                          */
/* ------------------------------------------------------------------ */

/*
 * Solo se il tema della pagina lo chiede davvero. Il modulo dentro ha gia' le
 * sue regole: qui si accorda solo la cornice, per non avere una finestra
 * bianca attorno a un modulo nero.
 */
@media (prefers-color-scheme: dark) {
	.bgl-pop:not(.is-chiara) {
		background: #14161b;
		color: #e9edf2;
	}

	.bgl-pop:not(.is-chiara) .bgl-pop-head {
		background: #14161b;
		border-bottom-color: #2a2f38;
	}

	.bgl-pop:not(.is-chiara) .bgl-pop-x {
		background: #232830;
		color: #e9edf2;
	}

	.bgl-pop:not(.is-chiara) .bgl-pop-x:hover,
	.bgl-pop:not(.is-chiara) .bgl-pop-x:focus-visible {
		background: #e9edf2;
		color: #14161b;
	}

	.bgl-pop:not(.is-chiara) .bgl-pop-bar {
		background: linear-gradient(90deg, #1e222a 25%, #272c35 50%, #1e222a 75%);
		background-size: 400% 100%;
	}
}