/**
 * Price Table Widget – Premium Design 2026
 * BEM: kw-price-table  |  Wrapper: kw-price-table-wrapper
 * Container Queries: Card-Stack unter 600px
 */

/* =========================================================
   1. Custom Properties (Widget-Scope)
   ========================================================= */

.kw-price-table-wrapper {
	--kwl-pt-accent: var(--kwl-accent, #BD9B5C);
	--kwl-pt-border: var(--kwl-border, #e2e8f0);
	--kwl-pt-radius: var(--kwl-radius-lg, 12px);
	--kwl-pt-row-bg: var(--kwl-bg, #ffffff);
	--kwl-pt-row-bg-alt: var(--kwl-bg-alt, #f7fafc);
	--kwl-pt-hover-bg: color-mix(in srgb, var(--kwl-primary, #00315d) 5%, transparent);
	--kwl-pt-cell-border: var(--kwl-border, #e2e8f0);
	--kwl-pt-price-color: var(--kwl-primary, #00315d);
	--kwl-pt-badge-bg: color-mix(in srgb, var(--kwl-primary, #00315d) 8%, transparent);
	--kwl-pt-na-color: var(--kwl-text-muted, #718096);
	--kwl-pt-sticky-bg: var(--kwl-bg, #ffffff);
	--kwl-pt-sticky-bg-alt: var(--kwl-bg-alt, #f7fafc);
	--kwl-pt-sticky-border: var(--kwl-border, #e2e8f0);
	--kwl-pt-link-color: var(--kwl-text, #1a202c);
	--kwl-pt-link-hover: var(--kwl-primary, #00315d);
	--kwl-pt-easing: var(--kwl-ease-default);
}

/* =========================================================
   2. Wrapper — Card via [data-kwl-card]
   ========================================================= */

/* Bridge: Widget-Tokens → Shared Card-Component */
.kw-price-table-wrapper[data-kwl-card] {
	--kwl-card-accent: var(--kwl-pt-accent, var(--kwl-accent, #BD9B5C));
	--kwl-card-bg: var(--kwl-pt-row-bg, var(--kwl-bg, #ffffff));
	--kwl-card-border: var(--kwl-pt-border, var(--kwl-border, #e2e8f0));
}

.kw-price-table-wrapper {
	width: 100%;
	overflow-x: auto;
	position: relative;
	color: var(--kwl-text, #1a202c);
}

/* Inner-Div fuer Container Queries */
.kw-price-table-inner {
	container-name: price-table;
	container-type: inline-size;
}

/* =========================================================
   3. Table Base
   ========================================================= */

.kw-price-table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-body, 1.5);
}

/* =========================================================
   4. Header — Schlicht mit Accent-Akzent
   ========================================================= */

.kw-price-table thead th {
	padding: 0.75rem var(--kwl-space-md, 1rem);
	text-align: left;
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-text, #1a202c);
	background-color: var(--kwl-pt-row-bg-alt);
	border-bottom: 2px solid var(--kwl-pt-accent);
	white-space: nowrap;
}

/* =========================================================
   5. Cells
   ========================================================= */

.kw-price-table th,
.kw-price-table td {
	padding: 0.75rem var(--kwl-space-md, 1rem);
	text-align: left;
	border-bottom: 1px solid var(--kwl-pt-cell-border);
	font-size: var(--kwl-fsize-body, 1rem);
	vertical-align: middle;
	transition: background-color 250ms var(--kwl-pt-easing);
}

/* =========================================================
   6. Zebra Stripes
   ========================================================= */

.kw-price-table tbody tr {
	background-color: var(--kwl-pt-row-bg);
}

.kw-price-table tbody tr:nth-child(even) {
	background-color: var(--kwl-pt-row-bg-alt);
}

/* =========================================================
   7. Row Hover — Highlight + Akzent-Border auf Sticky
   ========================================================= */

@media (hover: hover) {
	.kw-price-table tbody tr:hover {
		background-color: var(--kwl-pt-hover-bg);
	}

	.kw-price-table tbody tr:hover .kw-col-sticky {
		background-color: var(--kwl-pt-hover-bg);
		box-shadow: inset 3px 0 0 0 var(--kwl-pt-accent);
	}
}

/* =========================================================
   8. Sticky Column (Zimmername)
   ========================================================= */

.kw-price-table .kw-col-sticky {
	position: sticky;
	left: 0;
	z-index: 2;
	background-color: var(--kwl-pt-sticky-bg);
	text-align: left;
	font-weight: var(--kwl-fw-medium);
	border-right: 1px solid var(--kwl-pt-sticky-border);
	min-width: 160px;
	transition: background-color 250ms var(--kwl-pt-easing), box-shadow 250ms var(--kwl-pt-easing);
}

.kw-price-table tbody tr:nth-child(even) .kw-col-sticky {
	background-color: var(--kwl-pt-sticky-bg-alt);
}

.kw-price-table thead th.kw-col-sticky {
	z-index: 3;
	text-align: left;
}

/* Sticky Shadow-Indikator */
.kw-price-table .kw-col-sticky::after {
	content: '';
	position: absolute;
	top: 0;
	right: -6px;
	bottom: 0;
	width: 6px;
	background: linear-gradient(to right, color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent), transparent);
	pointer-events: none;
}

/* =========================================================
   9. Room Link — Underline Animation + Arrow Slide-In
   ========================================================= */

.kw-price-table .kw-col-sticky a {
	--kwl-link-color: var(--kwl-pt-link-color);
	--kwl-link-hover-color: var(--kwl-pt-link-hover);
	font-weight: var(--kwl-fw-semibold);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}

/* Underline via ::before */
.kw-price-table .kw-col-sticky a::before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--kwl-pt-accent);
	transition: width 300ms var(--kwl-pt-easing);
}

/* Arrow via ::after */
.kw-price-table .kw-col-sticky a::after {
	content: '→';
	display: inline-block;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 250ms var(--kwl-pt-easing), transform 250ms var(--kwl-pt-easing);
	font-size: 0.85em;
}

@media (hover: hover) {
	.kw-price-table .kw-col-sticky a:hover::before {
		width: 100%;
	}

	.kw-price-table .kw-col-sticky a:hover::after {
		opacity: 1;
		transform: translateX(0);
	}
}

.kw-price-table .kw-col-sticky a:active {
	opacity: 0.8;
}

/* =========================================================
   10. Price Badges — Premium mit Accent-Glow
   ========================================================= */

.kw-price-val {
	display: inline-block;
	font-weight: var(--kwl-fw-bold);
	white-space: nowrap;
	color: var(--kwl-pt-price-color);
	background: var(--kwl-pt-badge-bg);
	padding: 0.25rem 0.75rem;
	border-radius: var(--kwl-radius-sm, 4px);
	border: 1px solid color-mix(in srgb, var(--kwl-primary, #00315d) 12%, transparent);
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
	min-width: 7rem;
	text-align: center;
	transition: transform 200ms var(--kwl-pt-easing), box-shadow 200ms var(--kwl-pt-easing);
}

@media (hover: hover) {
	.kw-price-table tbody tr:hover .kw-price-val {
		transform: scale(1.04);
		box-shadow: 0 2px 8px color-mix(in srgb, var(--kwl-pt-accent) 25%, transparent);
	}
}

.kw-price-na {
	color: var(--kwl-pt-na-color);
}

/* =========================================================
   11. Zustellbett-Indikator — Glassmorphism Icon
   ========================================================= */

.kw-extra-bed-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 6px;
	vertical-align: middle;
	color: var(--kwl-pt-accent);
	background: color-mix(in srgb, var(--kwl-pt-accent) 12%, transparent);
	border-radius: var(--kwl-radius-full, 9999px);
	border: 1px solid color-mix(in srgb, var(--kwl-pt-accent) 20%, transparent);
}

.kw-extra-bed-icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ---------------------------------------------------------
   12. Bettmaße
   --------------------------------------------------------- */
.kw-pt-bed-dimensions,
.kw-pt-room-size {
	display: block;
	font-size: var(--kwl-fsize-caption);
	color: var(--kwl-text-muted);
	line-height: var(--kwl-lh-tight);
	letter-spacing: var(--kwl-ls-wide);
	margin-top: var(--kwl-space-xs, 0.25rem);
}


/* =========================================================
   13. Accessibility: Focus Visible
   ========================================================= */

.kw-price-table-wrapper:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kw-price-table .kw-col-sticky a:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: var(--kwl-radius-sm, 4px);
}

/* =========================================================
   14. Dark Mode
   ========================================================= */

@media (prefers-color-scheme: dark) {
	.kw-price-table-wrapper {
		--kwl-pt-border: var(--kwl-border, #4a5568);
		--kwl-pt-row-bg: var(--kwl-bg, #1a202c);
		--kwl-pt-row-bg-alt: var(--kwl-bg-alt, #2d3748);
		--kwl-pt-hover-bg: rgba(255, 255, 255, 0.05);
		--kwl-pt-cell-border: var(--kwl-border, #4a5568);
		--kwl-pt-sticky-bg: var(--kwl-bg, #1a202c);
		--kwl-pt-sticky-bg-alt: var(--kwl-bg-alt, #2d3748);
		--kwl-pt-sticky-border: var(--kwl-border, #4a5568);
		--kwl-pt-na-color: var(--kwl-text-muted, #a0aec0);
		--kwl-pt-link-color: var(--kwl-text, #f7fafc);
		--kwl-pt-link-hover: var(--kwl-primary, #63b3ed);
		--kwl-pt-price-color: var(--kwl-primary, #63b3ed);
		--kwl-pt-badge-bg: rgba(255, 255, 255, 0.08);
		--kwl-pt-accent: var(--kwl-accent, #d4b87a);
		color: var(--kwl-text, #f7fafc);
	}

	.kw-price-table thead th {
		color: var(--kwl-text, #f7fafc);
	}

	.kw-price-val {
		border-color: rgba(255, 255, 255, 0.1);
	}

	.kw-extra-bed-icon {
		background: color-mix(in srgb, var(--kwl-pt-accent) 15%, transparent);
		border-color: color-mix(in srgb, var(--kwl-pt-accent) 25%, transparent);
	}

	.kw-price-table .kw-col-sticky a:focus-visible,
	.kw-price-table-wrapper:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}
}

/* =========================================================
   15. Open Skin — Typografisch, ohne Card-Wrapper
   Konsistent mit PriceList Open-Skin:
   Keine Badges, keine Zebra-Stripes, kein min-width, tabular-nums.
   ========================================================= */

/* Wrapper: Kein Card-Chrome */
.kw-price-table-wrapper--open {
	border-radius: 0;
}

/* Tabelle: Kein forced min-width (verhindert Scrollbalken) */
.kw-price-table-wrapper--open .kw-price-table {
	min-width: 0;
}

/* Preis-Badges → Typografische Preise (konsistent mit PriceList Open-Skin) */
.kw-price-table-wrapper--open .kw-price-val {
	background: none;
	border: none;
	padding: 0;
	min-width: auto;
	text-align: right;
	font-family: var(--kwl-font-heading);
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: var(--kwl-ls-tight);
	white-space: nowrap;
	box-shadow: none;
}

/* Inline-Einheit "/ pro Nacht" (konsistent mit PriceList .kw-pl-unit-inline) */
.kw-price-table-wrapper--open .kw-pt-unit-inline {
	font-family: var(--kwl-font-body);
	font-weight: var(--kwl-fw-regular);
	font-size: 0.8em;
	color: var(--kwl-text-muted, #718096);
	letter-spacing: 0;
}

@media (hover: hover) {
	.kw-price-table-wrapper--open .kw-price-table tbody tr:hover .kw-price-val {
		transform: none;
		box-shadow: none;
	}
}

/* Kein Zebra-Striping: ALLE Rows + Sticky-Column transparent.
   Spezifität (0,4,2) bzw. (0,4,0) schlägt alle Basis-Regeln. */
.kw-price-table-wrapper--open .kw-price-table tbody tr,
.kw-price-table-wrapper--open .kw-price-table tbody tr:nth-child(even) {
	background-color: transparent;
}

/* Sticky-Column: Spezifität (0,4,2) schlägt .kw-price-table tbody tr:nth-child(even) .kw-col-sticky (0,3,2) */
.kw-price-table-wrapper--open .kw-price-table tbody tr .kw-col-sticky,
.kw-price-table-wrapper--open .kw-price-table tbody tr:nth-child(even) .kw-col-sticky {
	background-color: transparent;
}

/* Sticky-Column: Kein Shadow-Indikator, kein Sticky-Verhalten im Open-Skin */
.kw-price-table-wrapper--open .kw-price-table .kw-col-sticky {
	position: static;
	border-right: none;
}

/* Sticky Shadow-Indikator deaktivieren */
.kw-price-table-wrapper--open .kw-price-table .kw-col-sticky::after {
	display: none;
}

/* Zellen: tabular-nums */
.kw-price-table-wrapper--open .kw-price-table th,
.kw-price-table-wrapper--open .kw-price-table td {
	font-variant-numeric: lining-nums tabular-nums;
}

/* Dezenter Hover: 3% Primary-Tint */
@media (hover: hover) {
	.kw-price-table-wrapper--open .kw-price-table tbody tr:hover {
		background-color: color-mix(in srgb, var(--kwl-primary, #00315d) 3%, transparent);
	}

	.kw-price-table-wrapper--open .kw-price-table tbody tr:hover .kw-col-sticky {
		background-color: color-mix(in srgb, var(--kwl-primary, #00315d) 3%, transparent);
		box-shadow: none;
	}
}

/* Dark Mode: Open Skin */
@media (prefers-color-scheme: dark) {
	.kw-price-table-wrapper--open .kw-price-table tbody tr,
	.kw-price-table-wrapper--open .kw-price-table tbody tr:nth-child(even) {
		background-color: transparent;
	}

	.kw-price-table-wrapper--open .kw-price-table tbody tr .kw-col-sticky,
	.kw-price-table-wrapper--open .kw-price-table tbody tr:nth-child(even) .kw-col-sticky {
		background-color: transparent;
	}

	@media (hover: hover) {
		.kw-price-table-wrapper--open .kw-price-table tbody tr:hover {
			background-color: rgba(255, 255, 255, 0.04);
		}

		.kw-price-table-wrapper--open .kw-price-table tbody tr:hover .kw-col-sticky {
			background-color: rgba(255, 255, 255, 0.04);
		}
	}
}

/* =========================================================
   16. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.kw-price-table th,
	.kw-price-table td,
	.kw-price-table .kw-col-sticky,
	.kw-price-table .kw-col-sticky a,
	.kw-price-table .kw-col-sticky a::before,
	.kw-price-table .kw-col-sticky a::after,
	.kw-price-val {
		transition: none;
	}
}

/* =========================================================
   16. Container Query: Card Stack (≤600px)
   ========================================================= */

@container price-table (max-width: 600px) {
	.kw-price-table {
		min-width: 0;
	}

	.kw-price-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		border: 0;
	}

	.kw-price-table tbody tr {
		display: block;
		background: var(--kwl-pt-row-bg);
		border: 1px solid var(--kwl-pt-cell-border);
		border-top: 3px solid var(--kwl-pt-accent);
		border-radius: var(--kwl-radius-md, 8px);
		box-shadow:
			0 1px 3px color-mix(in srgb, var(--kwl-text, #1a202c) 5%, transparent),
			0 2px 8px color-mix(in srgb, var(--kwl-text, #1a202c) 8%, transparent);
		margin-bottom: var(--kwl-space-md, 1rem);
		overflow: hidden;
		transition: box-shadow 200ms ease, transform 200ms ease;
	}

	.kw-price-table tbody tr:nth-child(even) {
		background: var(--kwl-pt-row-bg);
	}

	@media (hover: hover) {
		.kw-price-table tbody tr:hover {
			box-shadow:
				0 2px 6px color-mix(in srgb, var(--kwl-text, #1a202c) 8%, transparent),
				0 8px 24px color-mix(in srgb, var(--kwl-text, #1a202c) 12%, transparent);
			transform: translateY(-2px);
		}

		.kw-price-table tbody tr:hover .kw-col-sticky {
			background-color: var(--kwl-pt-row-bg-alt);
			box-shadow: none;
		}

		.kw-price-table tbody tr:hover .kw-price-val {
			transform: none;
			box-shadow: none;
		}
	}

	.kw-price-table th,
	.kw-price-table td {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 0.125rem;
		padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
		border-bottom: 1px solid var(--kwl-pt-cell-border);
	}

	.kw-price-table tbody tr > :last-child {
		border-bottom: none;
	}

	/* Labels via data-label */
	.kw-price-table td::before {
		content: attr(data-label);
		font-family: var(--kwl-font-body);
		font-size: var(--kwl-fsize-caption, 0.75rem);
		font-weight: var(--kwl-fw-semibold);
		text-transform: uppercase;
		letter-spacing: 0.4px;
		color: var(--kwl-pt-na-color);
	}

	/* Preisbadges an Card-Breite anpassen */
	.kw-price-val {
		white-space: normal;
		max-width: 100%;
		min-width: 0;
	}

	/* Zimmername als Card-Header */
	.kw-price-table .kw-col-sticky {
		position: static;
		border-right: none;
		background: var(--kwl-pt-row-bg-alt);
		font-family: var(--kwl-font-heading);
		font-size: var(--kwl-fsize-body, 1rem);
		min-width: 0;
		display: block;
		text-align: left;
	}

	.kw-price-table .kw-col-sticky::after {
		display: none;
	}

	.kw-price-table tbody tr:nth-child(even) .kw-col-sticky {
		background: var(--kwl-pt-row-bg-alt);
	}

	/* Arrow immer sichtbar auf Mobile */
	.kw-price-table .kw-col-sticky a::after {
		opacity: 1;
		transform: translateX(0);
	}

}

/* Container Query: Extra schmale Darstellung (≤380px) */
@container price-table (max-width: 380px) {
	.kw-price-table th,
	.kw-price-table td {
		padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-sm, 0.5rem);
		font-size: var(--kwl-fsize-small);
	}
}

/* Dark Mode fuer Card-Stack */
@media (prefers-color-scheme: dark) {
	@container price-table (max-width: 600px) {
		.kw-price-table tbody tr {
			box-shadow: var(--kwl-shadow-md);
		}

		@media (hover: hover) {
			.kw-price-table tbody tr:hover {
				box-shadow: var(--kwl-shadow-lg);
			}
		}
	}
}

/* V4 Pink-Reset: zentral in kwl-shared-components.css via [data-kwl-link] (§281) */