/* =============================================================================
 * Tőzsér Optika — időpontfoglalás beágyazás (minup.io)
 * =============================================================================
 *
 * A beágyazott widget egy teljes magasságú alkalmazás: a saját törzsét maga
 * görgeti, és nem küld magasságot a szülő oldalnak. Ezért nem próbáljuk a
 * tartalomhoz igazítani az iframe-et, hanem kényelmes, a viewporthoz méretezett
 * felületet adunk neki — asztalon egy nagy panelt, mobilon szinte teljes
 * képernyőt.
 *
 * A dvh egységet vh-s sor előzi meg, hogy a régebbi böngészők is kapjanak
 * használható magasságot.
 * ========================================================================== */

.booking-embed {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 26px;
	background-color: #fff;
	box-shadow: 0 26px 60px -28px rgba(31, 38, 60, 0.45), 0 2px 10px rgba(31, 38, 60, 0.06);
}

.booking-embed__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- A foglalás aloldal panelje ------------------------------------------ */

.booking-embed--page {
	height: 820px;
	height: clamp(620px, calc(100vh - 190px), 940px);
	height: clamp(620px, calc(100dvh - 190px), 940px);
}

/* --- A modál panelje ------------------------------------------------------ */

.booking-embed--modal {
	height: 700px;
	height: min(760px, calc(100vh - 15rem));
	height: min(760px, calc(100dvh - 15rem));
	min-height: 420px;
	border-radius: 0;
	box-shadow: none;
}

/* --- Betöltésjelző -------------------------------------------------------- */

.booking-embed__loader {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background-color: #fff;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.booking-embed--loaded .booking-embed__loader {
	opacity: 0;
	visibility: hidden;
}

.booking-embed__spinner {
	width: 38px;
	height: 38px;
	border: 3px solid rgba(153, 195, 56, 0.25);
	border-top-color: var(--zold, #99c338);
	border-radius: 50%;
	animation: booking-spin 0.9s linear infinite;
}

.booking-embed__loader-text {
	color: #6b6a85;
	font-size: 16px;
}

@keyframes booking-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.booking-embed__spinner {
		animation-duration: 3s;
	}
}

/* --- JS nélküli tartalék -------------------------------------------------- */

.booking-embed__fallback {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 24px;
	text-align: center;
	background-color: #fff;
}

.booking-embed__hint {
	color: #6b6a85;
	font-size: 16px;
}

/* --- Modál ---------------------------------------------------------------- */

/*
 * A téma fejléce z-index: 9999-cel ül a lap tetején, ami a Bootstrap modálja
 * (1050) fölé kerülne, és eltakarná a fejlécét a bezáró gombbal együtt. Nyitott
 * modálnál a fejléc a sötétítő réteg alá kerül — ez a helyes sorrend.
 */
body.modal-open .grop-header {
	z-index: 1020;
}

.booking-modal .modal-content {
	overflow: hidden;
	max-height: calc(100vh - 3.5rem);
	max-height: calc(100dvh - 3.5rem);
	border: 0;
	border-radius: 26px;
}

.booking-modal .modal-header,
.booking-modal .modal-footer {
	padding: 14px 22px;
	border-color: rgba(59, 55, 96, 0.08);
}

.booking-modal .modal-title {
	font-weight: 700;
}

.booking-modal .modal-body {
	padding: 0;
}

.booking-modal .modal-footer {
	justify-content: flex-start;
}

.booking-modal__external {
	color: #6b6a85;
	font-size: 15px;
}

.booking-modal__external:hover {
	color: var(--zold, #99c338);
}

/* Mobilon a modál teljes képernyős lapként viselkedik. */
@media (max-width: 767.98px) {
	.booking-modal .modal-dialog {
		max-width: 100%;
		margin: 0;
	}

	.booking-modal .modal-content {
		min-height: 100vh;
		min-height: 100dvh;
		border-radius: 0;
	}

	.booking-embed--modal {
		height: calc(100vh - 132px);
		height: calc(100dvh - 132px);
	}
}