/**
 * Room Booking Widget – Dirs21 Buchungsmaske (Redesign §155)
 * BEM: kw-booking  |  Wrapper: kw-booking-wrapper
 * Features: Deeplink Card-Modus, Scroll-Reveal, Enhanced Loading
 */

/* ---------------------------------------------------------
   1. Custom Properties
   --------------------------------------------------------- */
.kw-booking-wrapper {
	--kwl-booking-title-color: var(--kwl-primary, #00315d);
	--kwl-booking-btn-bg: var(--kwl-primary, #00315d);
	--kwl-booking-btn-text: var(--kwl-btn-text, #ffffff);
}

/* ---------------------------------------------------------
   2. Container (Kalender-Modus)
   --------------------------------------------------------- */
.kw-booking-wrapper {
	position: relative;
	z-index: 100;
	width: 100%;
	min-height: 50px;
	box-sizing: border-box;
}

/* Card-Variante (optional, via show_card-Switcher): nutzt [data-kwl-card] aus
   kwl-shared-components.css — bringt automatisch Border, Goldakzent oben (3px solid
   var(--kwl-accent)), Schatten und Hover-Lift. Wir ergaenzen hier nur das Padding,
   das [data-kwl-card] bewusst NICHT setzt (jedes Widget bestimmt selbst).
   Hinweis: KEIN background/border/border-radius hier setzen — Selektor-Spezifitaet
   waere identisch zu [data-kwl-card] (0,1,0) und wuerde durch DOM-Order gewinnen,
   wodurch der Goldakzent verschwindet. */
.kw-booking-wrapper--card {
	padding: var(--kwl-space-lg, 1.5rem);
}

/* ---------------------------------------------------------
   3. Deeplink Card — delegiert an [data-kwl-card]
   --------------------------------------------------------- */
.kw-booking-wrapper--deeplink {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kwl-space-md, 1rem);
	padding: var(--kwl-space-lg, 1.5rem);
	text-align: center;
}

/* Card Bridge: Widget-Tokens → Shared Component */
.kw-booking-wrapper--deeplink[data-kwl-card] {
	--kwl-card-accent: var(--kwl-accent, #BD9B5C);
}

/* Deeplink: Titel ohne extra Bottom-Margin (Card-Padding reicht) */
.kw-booking-wrapper--deeplink .kw-booking-title {
	margin-bottom: var(--kwl-space-sm, 0.5rem);
	padding-bottom: var(--kwl-space-sm, 0.5rem);
}

/* ---------------------------------------------------------
   4. Header (Heading-Block via WidgetHeadingDesignTrait)
   --------------------------------------------------------- */
.kw-booking-head {
	margin-bottom: var(--kwl-space-lg, 1.5rem);
}

.kw-booking-title {
	margin: 0;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h3);
	line-height: var(--kwl-lh-heading, 1.2);
	color: var(--kwl-booking-title-color);
}

/* ---------------------------------------------------------
   5. Loading Indicator + Spinner
   --------------------------------------------------------- */
.kw-booking-wrapper .kw-loading-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-xl, 2rem) var(--kwl-space-lg, 1.5rem);
}

.kw-booking-wrapper .kw-spinner {
	width: 40px;
	height: 40px;
	animation: kw-booking-spin 1s linear infinite;
}

.kw-booking-wrapper .kw-spinner circle {
	stroke: var(--kwl-accent, #BD9B5C);
	stroke-dasharray: 90, 150;
	stroke-dashoffset: 0;
	stroke-linecap: round;
}

@keyframes kw-booking-spin {
	100% {
		transform: rotate(360deg);
	}
}

/* Placeholder-Status: Spinner sichtbar */
.kw-booking-wrapper.kw-booking-placeholder .kw-loading-indicator {
	display: flex;
}

/* Crossfade: Spinner bleibt bis Dirs21-UI gerendert hat (frontend.js MutationObserver),
   fadet dann 200ms aus, bevor er aus dem DOM entfernt wird. Vermeidet "leere Luecke"
   zwischen onload und tatsaechlichem Render. */
.kw-booking-wrapper .kw-loading-indicator {
	transition: opacity 200ms ease;
}

.kw-booking-wrapper.kw-booking-loaded .kw-loading-indicator {
	opacity: 0;
	pointer-events: none;
}

/* Loading-Text */
.kw-booking-loading-text {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-text-muted, #718096);
}

/* ---------------------------------------------------------
   6. Dirs21-Override (externe Elemente)
   --------------------------------------------------------- */

/* Dirs21-Module sollen volle Container-Breite einnehmen.
   Schatten/Border werden am .kw-booking-wrapper gesetzt (siehe Block 2) — Dirs21 selbst
   resettet sein Render-Target via `all: initial !important`, dort wuerden Schatten/Border
   nicht greifen. */
.kw-booking-wrapper .d21-availabilityCalendar,
.kw-booking-wrapper .d21-roomList,
.kw-booking-wrapper .d21-packageList,
.kw-booking-wrapper .d21-quickbook {
	max-width: 100%;
}

/* Trigger-Buttons (1 Nacht / 2 Erwachsene / Kinder 0) leichter heben.
   Hover-Verstaerkung folgt prefers-reduced-motion (siehe Block 11). */
.kw-booking-wrapper .d21-widget button {
	box-shadow: var(--kwl-shadow-sm);
	transition: box-shadow var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-booking-wrapper .d21-widget button:hover {
		box-shadow: var(--kwl-shadow-md);
	}
}

/* ---------------------------------------------------------
   7. Focus Visible (BFSG)
   --------------------------------------------------------- */
.kw-booking-wrapper :focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* ---------------------------------------------------------
   8. Deeplink-Button — delegiert an [data-kwl-btn]
   Kontrast: #00315d auf #fff = 10.7:1 (BFSG-konform)
   --------------------------------------------------------- */
.kw-booking-wrapper [data-kwl-btn="gradient"] {
	--kwl-btn-bg: var(--kwl-booking-btn-bg, var(--kwl-accent, #BD9B5C));
	--kwl-btn-color: var(--kwl-booking-btn-text, var(--kwl-btn-text, #ffffff));
}

.kw-booking-deeplink-btn {
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-xl, 2rem);
	min-height: 44px;
	white-space: nowrap;
	font-size: var(--kwl-fsize-body, 1rem);
}

/* ---------------------------------------------------------
   9. Scroll-Reveal Entry Animation
   --------------------------------------------------------- */
/* CSS-only: Scroll-Driven Animation (shared keyframe aus frontend.css) */
@supports (animation-timeline: view()) {
	.kw-booking-wrapper {
		animation: kwl-reveal-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}
}

/* ---------------------------------------------------------
   10. Dark Mode
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.kw-booking-wrapper {
		--kwl-booking-title-color: var(--kwl-text, #e2e8f0);
		--kwl-booking-btn-bg: var(--kwl-primary, #63b3ed);
	}

	.kw-booking-wrapper .kw-spinner circle {
		stroke: var(--kwl-accent, #d4b87a);
	}

	.kw-booking-loading-text {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-booking-wrapper :focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}
}

/* ---------------------------------------------------------
   11. Reduced Motion (Barrierefreiheit)
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kw-booking-wrapper .kw-spinner {
		animation: none;
	}

	.kw-booking-wrapper .kw-loading-indicator,
	.kw-booking-wrapper .d21-widget button {
		transition: none;
	}

	/* Scroll-Reveal deaktivieren */
	@supports (animation-timeline: view()) {
		.kw-booking-wrapper {
			animation: none;
		}
	}
}