/* =========================================================
   WIDGET: Smart Booking Entry — Premium Card 2026
   Datepicker + Gäste-Auswahl → Dirs21 IBE Overlay / Deeplink
   Token-Kaskade, Gradient-Button, Dark Mode, BFSG
   ========================================================= */

/* ---------------------------------------------------------
   1. Custom Properties
   --------------------------------------------------------- */
.kw-sbe {
	--kwl-sbe-heading-color: var(--kwl-primary, #00315d);
	--kwl-sbe-label-color: var(--kwl-text-muted, #4a5568);
	--kwl-sbe-input-bg: var(--kwl-bg, #ffffff);
	--kwl-sbe-input-border: var(--kwl-border, #cbd5e0);
	--kwl-sbe-input-color: var(--kwl-text, #1a202c);
	--kwl-sbe-btn-bg: var(--kwl-accent, #BD9B5C);
	--kwl-sbe-btn-color: var(--kwl-btn-text, #ffffff);
}

/* Bridge: Widget-Tokens → Shared Card-Component */
.kw-sbe[data-kwl-card] {
	--kwl-card-bg: var(--kwl-sbe-card-bg, var(--kwl-bg, #ffffff));
	--kwl-card-border: var(--kwl-sbe-card-border, var(--kwl-border, #e2e8f0));
	--kwl-card-radius: var(--kwl-sbe-card-radius, var(--kwl-radius-lg, 12px));
	--kwl-card-accent: var(--kwl-accent, #BD9B5C);
}

/* ---------------------------------------------------------
   2. Container — Card via [data-kwl-card]
   --------------------------------------------------------- */
/* Mobile-First: kompakteres Padding und volle Breite als Basis */
.kw-sbe {
	max-width: 100%;
	margin-left: var(--kwl-space-sm, 0.5rem);
	margin-right: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-md, 1rem) var(--kwl-space-sm, 0.5rem);
	box-sizing: border-box;
}

@media (min-width: 481px) {
	.kw-sbe {
		padding: var(--kwl-space-md, 1rem);
	}
}

@media (min-width: 769px) {
	.kw-sbe {
		margin-left: 0;
		margin-right: 0;
		padding: var(--kwl-space-lg, 1.5rem);
	}
}

/* ---------------------------------------------------------
   3. Heading — Gold-Gradient-Separator
   --------------------------------------------------------- */
.kw-sbe__heading {
	margin: 0 0 var(--kwl-space-md, 1rem) 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-sbe-heading-color);
}

/* ---------------------------------------------------------
   4. Form Layout
   --------------------------------------------------------- */
.kw-sbe__form {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md, 1rem);
}

/* Mobile-First: Vertikal gestapelt als Basis, ab 481px flexible Felder */
.kw-sbe__fields {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-sbe__field {
	flex: 1 1 100%;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xs, 0.25rem);
}

@media (min-width: 481px) {
	.kw-sbe__fields {
		flex-direction: row;
	}

	.kw-sbe__field {
		flex: 1 1 140px;
	}
}

/* ---------------------------------------------------------
   5. Labels
   --------------------------------------------------------- */
.kw-sbe__label {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-sbe-label-color);
	line-height: var(--kwl-lh-snug);
}

/* ---------------------------------------------------------
   6. Inputs & Selects
   --------------------------------------------------------- */
.kw-sbe__input {
	height: 44px;
	padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-sm, 0.5rem);
	background: var(--kwl-sbe-input-bg);
	border: 1px solid var(--kwl-sbe-input-border);
	border-radius: var(--kwl-radius-md, 8px);
	color: var(--kwl-sbe-input-color);
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-relaxed);
	box-sizing: border-box;
	transition: border-color var(--kwl-transition), box-shadow var(--kwl-transition);
	appearance: none;
	-webkit-appearance: none;
}

.kw-sbe__input:focus-visible {
	border-color: var(--kwl-focus, #7B6835);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kwl-focus, #7B6835) 15%, transparent);
}

.kw-sbe__select {
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5568' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

@media (hover: hover) {
	.kw-sbe__input:hover {
		border-color: var(--kwl-sbe-heading-color);
	}
}

/* ---------------------------------------------------------
   7. Kinder-Alter (dynamisch)
   --------------------------------------------------------- */
.kw-sbe__children-ages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 0.5rem);
	width: 100%;
}

.kw-sbe__child-age {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xs, 0.25rem);
	flex: 0 1 100px;
}

/* ---------------------------------------------------------
   8. Button — Delegates to shared [data-kwl-btn="gradient"]
   --------------------------------------------------------- */
.kw-sbe__btn {
	min-height: 44px;
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-xl, 2rem);
	white-space: nowrap;
	font-size: var(--kwl-fsize-body, 1rem);
}

/* Bridge: Widget-Tokens → Shared Gradient-Button-Component */
.kw-sbe [data-kwl-btn="gradient"] {
	--kwl-btn-bg: var(--kwl-sbe-btn-bg, var(--kwl-accent, #BD9B5C));
	--kwl-btn-color: var(--kwl-sbe-btn-color, var(--kwl-btn-text, #ffffff));
}

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

/* ---------------------------------------------------------
   10. Container Query (Form-Layout)
   --------------------------------------------------------- */
@container (max-width: 400px) {
	.kw-sbe__fields {
		flex-direction: column;
	}

	.kw-sbe__field {
		flex: 1 1 100%;
	}
}

@container (min-width: 500px) {
	.kw-sbe__form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
	}

	.kw-sbe__fields {
		flex: 1 1 auto;
	}

	.kw-sbe__btn {
		flex: 0 0 auto;
		align-self: flex-end;
	}
}

/* ---------------------------------------------------------
   11. Dark Mode
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.kw-sbe {
		--kwl-sbe-heading-color: var(--kwl-text, #e2e8f0);
		--kwl-sbe-label-color: var(--kwl-text-muted, #a0aec0);
		--kwl-sbe-input-bg: var(--kwl-bg-alt, #2d3748);
		--kwl-sbe-input-border: var(--kwl-border, #4a5568);
		--kwl-sbe-input-color: var(--kwl-text, #e2e8f0);
	}

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

	.kw-sbe__input,
	.kw-sbe__select {
		color-scheme: dark;
	}

	.kw-sbe__select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0aec0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	.kw-sbe__input:focus-visible {
		border-color: var(--kwl-focus, #c9a84c);
		box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
	}

	.kw-sbe__info {
		border-top-color: var(--kwl-border, #4a5568);
	}

	.kw-sbe__info-text {
		color: var(--kwl-text, #e2e8f0);
	}
}

/* ---------------------------------------------------------
   12. Reduced Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kw-sbe__input {
		transition: none;
	}
}

/* ---------------------------------------------------------
   13. Buchungsinfo-Akkordeon
   --------------------------------------------------------- */

.kw-sbe__info {
	margin-top: var(--kwl-space-md, 1rem);
	border-top: 1px solid var(--kwl-sbe-input-border);
	padding-top: var(--kwl-space-md, 1rem);
}

.kw-sbe__info-summary {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	min-height: 44px;
	cursor: pointer;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-sbe-heading-color);
	list-style: none;
}

.kw-sbe__info-summary:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: var(--kwl-radius-sm, 6px);
}

.kw-sbe__info-summary::-webkit-details-marker {
	display: none;
}

.kw-sbe__info-summary::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--kwl-transition);
	flex-shrink: 0;
}

.kw-sbe__info[open] > .kw-sbe__info-summary::before {
	transform: rotate(45deg);
}

.kw-sbe__info-list {
	margin: var(--kwl-space-sm, 0.5rem) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-sbe__info-item {
	padding: var(--kwl-space-sm, 0.5rem);
	background: var(--kwl-sbe-input-bg);
	border-radius: var(--kwl-radius-sm, 6px);
}

.kw-sbe__info-label {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-sbe-label-color);
	letter-spacing: var(--kwl-ls-wide, 0.04em);
	text-transform: uppercase;
	margin-bottom: var(--kwl-space-xs, 0.25rem);
}

.kw-sbe__info-text {
	margin: 0;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-relaxed, 1.5);
	color: var(--kwl-text, #1a202c);
}

@media (hover: hover) {
	.kw-sbe__info-summary:hover {
		color: var(--kwl-accent, #BD9B5C);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kw-sbe__info-summary::before {
		transition: none;
	}
}

/* ---------------------------------------------------------
   14. CTA-Modus (Angebote ohne Dirs21)
   --------------------------------------------------------- */

.kw-sbe--cta .kw-sbe__cta-wrap {
	display: flex;
	justify-content: center;
	padding: var(--kwl-space-md, 1rem) 0 0;
}

.kw-sbe--cta .kw-sbe__cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-size: var(--kwl-fsize-body-lg, 1.125rem);
	font-weight: var(--kwl-fw-semibold);
	letter-spacing: var(--kwl-ls-wide, 0.04em);
	text-decoration: none;
}

.kw-sbe--cta .kw-sbe__cta-link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}