/**
 * 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-bg: transparent;
	--kwl-booking-border: transparent;
	--kwl-booking-radius: var(--kwl-radius-lg, 12px);
	--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;
	width: 100%;
	min-height: 50px;
	background: var(--kwl-booking-bg);
	border: 1px solid var(--kwl-booking-border);
	border-radius: var(--kwl-booking-radius);
	box-sizing: border-box;
}

/* ---------------------------------------------------------
   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. Title
   --------------------------------------------------------- */
.kw-booking-title {
	margin: 0 0 var(--kwl-space-lg, 1.5rem) 0;
	padding-bottom: var(--kwl-space-md, 1rem);
	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;
}

/* 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)
   --------------------------------------------------------- */
.kw-booking-wrapper .d21-availabilityCalendar {
	max-width: 100%;
}

/* ---------------------------------------------------------
   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;
	}

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