/*
 * OLEA OpenTable reservation modal
 *
 * Enthält:
 * - OpenTable-Widget-Styling
 * - Modal-Animation von rechts unten
 * - Floating-Reservierungsbutton nach 200vh Scroll
 */


/* ==============================================================
 * Variablen
 * ============================================================== */

 :root {
	--olea-reservation-background: #4b4f47;
	--olea-reservation-text: #f5f5f2;
	--olea-reservation-muted: #d7d9d4;
	--olea-reservation-line: rgb(225 227 221 / 38%);

	--olea-reservation-button-background: #fff;
	--olea-reservation-button-text: #565a52;

	--olea-floating-button-background: #30342d;
	--olea-floating-button-text: #f4eee3;
}


/* ==============================================================
 * Seitenzustand bei geöffnetem Modal
 * ============================================================== */

html.olea-reservation-modal-is-open {
	overflow: hidden;
}


/* ==============================================================
 * Floating-Reservierungsbutton
 * ============================================================== */

.olea-reservation-floating-button {
	position: fixed;
	right: auto;
	bottom: max(
		16px,
		env(safe-area-inset-bottom)
	);
	left: 50%;
	z-index: 99990;

	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	width: min(
		465px,
		calc(100vw - 32px)
	);
	min-height: 60px;
	margin: 0;
	padding: 14px 28px;

	border: 0;
	border-radius: 999px;

	background:
		var(--olea-floating-button-background);
	color:
		var(--olea-floating-button-text);

	box-shadow:
		0 14px 36px rgb(0 0 0 / 16%);

	font-family: inherit;
	font-size: clamp(
		18px,
		1.4vw,
		20px
	);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;

	appearance: none;
	cursor: pointer;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transform:
		translate(
			-50%,
			calc(100% + 36px)
		);

	transition:
		transform 360ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		opacity 220ms ease,
		visibility 0s linear 360ms,
		background-color 160ms ease,
		box-shadow 160ms ease;
}

.olea-reservation-floating-button.is-visible {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;

	transform:
		translate(-50%, 0);

	transition:
		transform 460ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		opacity 220ms ease,
		visibility 0s linear 0s,
		background-color 160ms ease,
		box-shadow 160ms ease;
}

.olea-reservation-floating-button:hover {
	background: #252922;

	box-shadow:
		0 18px 42px rgb(0 0 0 / 21%);
}

.olea-reservation-floating-button:focus-visible {
	outline: 2px solid
		var(--olea-floating-button-text);
	outline-offset: 4px;
}


/* ==============================================================
 * Vollflächige Modal-Ebene
 * ============================================================== */

.olea-reservation-modal {
	position: fixed;
	inset: 0;

	/*
	 * The site header creates its own stacking context at 999999.
	 * Keep the reservation layer above it as a defensive fallback;
	 * normally the navigation has already finished closing first.
	 */
	z-index: 1000001;

	display: grid;
	align-items: end;
	justify-items: end;

	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 100dvh;
	padding: 16px;

	overflow: hidden;

	visibility: hidden;
	pointer-events: none;

	transition:
		visibility 0s linear 460ms;
}

.olea-reservation-modal.is-open {
	visibility: visible;
	pointer-events: auto;

	transition:
		visibility 0s linear 0s;
}


/* ==============================================================
 * Hintergrund
 * ============================================================== */

 .olea-reservation-modal__backdrop {
	position: absolute;
	inset: 0;

	background: transparent;

	backdrop-filter: none;
	-webkit-backdrop-filter: none;

	opacity: 1;

	transition: none;
}

/* ==============================================================
 * Modal-Panel
 *
 * Geschlossen:
 * - unterhalb des Viewports
 * - leicht nach rechts versetzt
 *
 * Geöffnet:
 * - unten rechts innerhalb der Modal-Ebene
 * ============================================================== */

.olea-reservation-modal__panel {
	position: relative;
	z-index: 1;

	box-sizing: border-box;
	width: min(
		430px,
		calc(100vw - 30px)
	);
	margin: 0;
	padding: 66px 16px 70px;

	border:
		1px solid
		rgb(255 255 255 / 28%);
	border-radius: 24px;

	background:
		var(--olea-reservation-background);
	color:
		var(--olea-reservation-text);

	box-shadow:
		0 28px 70px
		rgb(0 0 0 / 22%);

	/*
	 * OpenTable calendars and dropdowns must be allowed to extend
	 * beyond the visual panel.
	 */
	overflow: visible;

	opacity: 0;

	transform:
		translate3d(
			42px,
			calc(100% + 32px),
			0
		);

	will-change:
		transform,
		opacity;

	transition:
		transform 320ms
			cubic-bezier(
				0.4,
				0,
				1,
				1
			),
		opacity 180ms ease;
}

.olea-reservation-modal.is-open
	.olea-reservation-modal__panel {
	opacity: 1;

	transform:
		translate3d(0, 0, 0);

	transition:
		transform 480ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		opacity 180ms ease;
}


/* ==============================================================
 * Modal-Kopfzeile
 * ============================================================== */

.olea-reservation-modal__header {
	position: absolute;
	top: 13px;
	right: 12px;
	left: 16px;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;

	height: 40px;
}

.olea-reservation-modal__language {
	color:
		var(--olea-reservation-text);

	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.olea-reservation-modal__close {
	display: grid;
	place-items: center;

	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 50%;

	background: transparent;
	color:
		var(--olea-reservation-muted);

	font: inherit;
	line-height: 1;

	cursor: pointer;
	appearance: none;

	transition:
		background-color 150ms ease,
		color 150ms ease;
}

.olea-reservation-modal__close:hover {
	background:
		rgb(255 255 255 / 9%);
	color: #fff;
}

.olea-reservation-modal__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.olea-reservation-modal__close svg {
	width: 26px;
	height: 26px;
}

.olea-reservation-modal__close svg path {
	stroke: currentColor;
	stroke-width: 1.7;
}


/* ==============================================================
 * Barrierefreier, visuell ausgeblendeter Titel
 * ============================================================== */

.olea-reservation-modal__title {
	position: absolute;

	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;

	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);

	border: 0;
	white-space: nowrap;
}


/* ==============================================================
 * Widget-Wrapper
 * ============================================================== */

.olea-reservation-modal__widget {
	position: relative;

	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	padding: 0 0 26px;

	border-bottom:
		1px solid
		var(--olea-reservation-line);

	overflow: visible;
}


/* ==============================================================
 * OpenTable-Basiscontainer
 *
 * OpenTable besitzt dieses generierte Markup. Alle Regeln bleiben
 * auf das OLEA-Modal begrenzt.
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget,
.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker {
	box-sizing: border-box !important;

	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;
	box-shadow: none !important;

	font-family: inherit !important;

	overflow: visible !important;
}


/* Große OpenTable-Überschrift ausblenden */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker
	h1,
.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-title {
	display: none !important;
}


/* ==============================================================
 * Formularlayout
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;

	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;
	box-shadow: none !important;

	overflow: visible !important;
}


/* ==============================================================
 * Auswahlzeilen
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-selector {
	position: relative !important;
	float: none !important;

	display: block !important;

	box-sizing: border-box !important;
	width: 100% !important;
	height: 72px !important;
	min-height: 72px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-bottom:
		1px solid
		var(--olea-reservation-line) !important;
	border-radius: 0 !important;

	background: transparent !important;
	box-shadow: none !important;
}

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-selector:first-of-type {
	border-top:
		1px solid
		var(--olea-reservation-line) !important;
}


/* ==============================================================
 * Text innerhalb der Auswahlzeilen
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-selector-link {
	position: relative !important;

	display: flex !important;
	align-items: center !important;

	box-sizing: border-box !important;
	width: 100% !important;
	height: 72px !important;
	min-height: 72px !important;

	margin: 0 !important;
	padding:
		0
		52px
		0
		54px !important;

	border: 0 !important;

	background: transparent !important;
	color:
		var(--olea-reservation-text) !important;

	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;

	text-align: left !important;
	text-decoration: none !important;
}


/* ==============================================================
 * OpenTable-Icons links
 *
 * Die font-family darf hier nicht überschrieben werden, da
 * OpenTable einen eigenen Icon-Font verwendet.
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-selector-link::before {
	position: absolute !important;
	top: 50% !important;
	left: 14px !important;

	color:
		var(--olea-reservation-muted) !important;

	font-size: 25px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	opacity: 1 !important;

	transform:
		translateY(-50%) !important;
}


/* ==============================================================
 * Pfeile rechts
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-selector-link::after {
	position: absolute !important;
	top: 50% !important;
	right: 16px !important;

	color:
		var(--olea-reservation-muted) !important;

	font-size: 15px !important;
	line-height: 1 !important;

	opacity: 1 !important;

	transform:
		translateY(-50%) !important;
}


/* ==============================================================
 * Direkt ausgegebene OpenTable-SVGs
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-selector
	svg {
	color:
		var(--olea-reservation-muted) !important;

	fill: none !important;
	stroke:
		var(--olea-reservation-muted) !important;
}

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-selector
	svg
	path {
	fill: #ede6da !important;
	stroke: none !important;
}


/* ==============================================================
 * Unsichtbare native Selects
 *
 * Die echten Auswahlfelder bleiben voll interaktiv. OpenTables
 * sichtbare Auswahlzeile liefert lediglich das Design.
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-selector
	select {
	position: absolute !important;
	inset: 0 !important;
	z-index: 3 !important;

	display: block !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;

	opacity: 0 !important;

	cursor: pointer !important;
}


/* ==============================================================
 * Reservierungsbutton-Wrapper
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-dtp-picker-button {
	position: relative !important;
	float: none !important;

	display: block !important;

	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;

	margin: 0 !important;
	padding:
		18px
		14px
		0 !important;

	border: 0 !important;

	background: transparent !important;
}


/* ==============================================================
 * Reservierungsbutton
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-button,
.olea-reservation-modal
	#ot-reservation-widget
	input[type="submit"],
.olea-reservation-modal
	#ot-reservation-widget
	button[type="submit"] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 56px !important;

	margin: 0 !important;
	padding:
		12px
		20px !important;

	border:
		1px solid
		var(
			--olea-reservation-button-background
		) !important;

	border-radius: 9px !important;

	background:
		var(
			--olea-reservation-button-background
		) !important;

	color:
		var(
			--olea-reservation-button-text
		) !important;

	box-shadow: none !important;

	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;

	text-align: center !important;
	text-transform: none !important;

	appearance: none !important;
	cursor: pointer !important;

	transition:
		background-color 150ms ease,
		border-color 150ms ease,
		color 150ms ease;
}

.olea-reservation-modal
	#ot-reservation-widget
	.ot-button:hover,
.olea-reservation-modal
	#ot-reservation-widget
	input[type="submit"]:hover,
.olea-reservation-modal
	#ot-reservation-widget
	button[type="submit"]:hover {
	background:
		rgb(255 255 255 / 88%) !important;

	color:
		var(
			--olea-reservation-button-text
		) !important;
}


/* ==============================================================
 * OpenTable-Branding
 * ============================================================== */

.olea-reservation-modal
	#ot-reservation-widget
	.ot-powered-by {
	margin: 14px 0 0 !important;

	color:
		var(--olea-reservation-muted) !important;

	font-family: inherit !important;
	font-size: 10px !important;
	line-height: 1.3 !important;

	opacity: 0.72;
}

.olea-reservation-modal
	#ot-reservation-widget
	.ot-powered-by
	a {
	color: inherit !important;
}


/* ==============================================================
 * OpenTable-Ladezustände und ausfallsicherer Fallback
 * ============================================================== */

.olea-reservation-modal__status {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;

	box-sizing: border-box;
	min-height: 224px;
	padding: 32px 20px;

	border-top:
		1px solid
		var(--olea-reservation-line);

	color:
		var(--olea-reservation-muted);

	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.olea-reservation-modal__spinner {
	flex: 0 0 auto;

	box-sizing: border-box;
	width: 22px;
	height: 22px;

	border: 2px solid rgb(255 255 255 / 24%);
	border-top-color:
		var(--olea-reservation-text);
	border-radius: 50%;

	animation:
		olea-reservation-spinner
		760ms
		linear
		infinite;
}

@keyframes olea-reservation-spinner {
	to {
		transform: rotate(360deg);
	}
}


.olea-reservation-modal[
	data-olea-opentable-state="loading"
]
	.olea-reservation-modal__status {
	display: flex;
}

.olea-reservation-modal[
	data-olea-opentable-state="loading"
]
	.olea-reservation-modal__widget {
	min-height: 250px;
}

.olea-reservation-modal[
	data-olea-opentable-state="loading"
]
	#ot-reservation-widget {
	display: none !important;
}


.olea-reservation-modal__fallback {
	display: none;

	box-sizing: border-box;
	margin: 0;
	padding: 24px 14px 0;

	color:
		var(--olea-reservation-text);

	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
}

.olea-reservation-modal[
	data-olea-opentable-state="error"
]
	.olea-reservation-modal__widget {
	display: none;
}

.olea-reservation-modal[
	data-olea-opentable-state="error"
]
	.olea-reservation-modal__fallback {
	display: block;
}

.olea-reservation-modal__fallback p {
	margin: 0 0 18px;
}

.olea-reservation-modal__fallback-actions {
	display: grid;
	gap: 10px;
}

.olea-reservation-modal__retry,
.olea-reservation-modal__direct-link {
	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 18px;

	border: 1px solid
		var(--olea-reservation-button-background);
	border-radius: 9px;

	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	appearance: none;
	cursor: pointer;
}

.olea-reservation-modal__retry {
	background:
		var(--olea-reservation-button-background);
	color:
		var(--olea-reservation-button-text);
}

.olea-reservation-modal__direct-link {
	background: transparent;
	color:
		var(--olea-reservation-text);
}

.olea-reservation-modal__retry:hover {
	background: rgb(255 255 255 / 88%);
}

.olea-reservation-modal__direct-link:hover {
	background: rgb(255 255 255 / 9%);
	color: #fff;
}

.olea-reservation-modal__retry:focus-visible,
.olea-reservation-modal__direct-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}


/* ==============================================================
 * Reduzierte Bewegungen
 * ============================================================== */

@media (prefers-reduced-motion: reduce) {
	.olea-reservation-floating-button,
	.olea-reservation-modal,
	.olea-reservation-modal__backdrop,
	.olea-reservation-modal__panel,
	.olea-reservation-modal__close,
	.olea-reservation-modal__retry,
	.olea-reservation-modal__direct-link,
	.olea-reservation-modal
		#ot-reservation-widget
		.ot-button,
	.olea-reservation-modal
		#ot-reservation-widget
		input[type="submit"],
	.olea-reservation-modal
		#ot-reservation-widget
		button[type="submit"] {
		transition: none !important;
	}

	.olea-reservation-modal__spinner {
		animation: none !important;
	}
}


/* ==============================================================
 * Kleine Bildschirme
 * ============================================================== */

@media (max-width: 480px) {
	.olea-reservation-floating-button {
		bottom: max(
			12px,
			env(safe-area-inset-bottom)
		);

		width:
			calc(100vw - 24px);
		min-height: 58px;
		padding:
			13px
			22px;

		font-size: 18px;
	}

	.olea-reservation-modal {
		padding: 12px;
	}

	.olea-reservation-modal__panel {
		width: min(
			400px,
			calc(100vw - 24px)
		);

		padding:
			60px
			12px
			58px;

		border-radius: 21px;

		transform:
			translate3d(
				24px,
				calc(100% + 24px),
				0
			);
	}

	.olea-reservation-modal.is-open
		.olea-reservation-modal__panel {
		transform:
			translate3d(0, 0, 0);
	}

	.olea-reservation-modal
		#ot-reservation-widget
		.ot-dtp-picker-selector,
	.olea-reservation-modal
		#ot-reservation-widget
		.ot-dtp-picker-selector-link {
		height: 64px !important;
		min-height: 64px !important;
	}

	.olea-reservation-modal
		#ot-reservation-widget
		.ot-dtp-picker-selector-link {
		padding-right: 46px !important;
		padding-left: 48px !important;

		font-size: 16px !important;
	}

	.olea-reservation-modal
		#ot-reservation-widget
		.ot-dtp-picker-selector-link::before {
		left: 12px !important;

		font-size: 23px !important;
	}

	.olea-reservation-modal
		#ot-reservation-widget
		.ot-dtp-picker-selector-link::after {
		right: 13px !important;
	}

	.olea-reservation-modal
		#ot-reservation-widget
		.ot-button,
	.olea-reservation-modal
		#ot-reservation-widget
		input[type="submit"],
	.olea-reservation-modal
		#ot-reservation-widget
		button[type="submit"] {
		min-height: 52px !important;

		font-size: 15px !important;
	}
}