/**
 * Ported verbatim from demo/kimchee-booking-popup(1).html's <style> block
 * (minus the demo page's own `body`/`.demo-btn` rules, which were just for
 * previewing the mockup, not part of the popup itself). Same class names,
 * same values — this is the exact demo design. To change colors, edit the
 * hex values below. No other file needs to change for a text/color edit.
 */
:root {
	--kc-dark: #1d1e1c;
	--kc-panel: #262725;
	--kc-panel-hover: #2d2e2b;
	--kc-line: #3b3c38;
	--kc-lime: #b4bd3c;
	--kc-text: #f2f2ee;
	--kc-muted: #a7a8a1;
	--kc-head: "Unit Slab", "Roboto Slab", Georgia, serif;
	--kc-body: "Apercu", "Helvetica Neue", Arial, sans-serif;
}

.kb-modal {
	/* Native <dialog> is centered by the browser's own UA styles when
	   opened via showModal(), but a theme-wide CSS reset touching
	   `dialog` can silently cancel that — so center it explicitly here
	   instead of relying on the default. */
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(760px, calc(100% - 32px));
	max-height: calc(100dvh - 48px);
	padding: 0;
	border: 1px solid var(--kc-line);
	background: var(--kc-dark);
	color: var(--kc-text);
	font-family: var(--kc-body);
	overflow: auto;
}

.kb-modal::backdrop {
	background: rgba(10, 10, 9, 0.75);
	backdrop-filter: blur(3px);
}

.kb-modal[open] {
	animation: kb-in 0.25s ease-out;
}

@keyframes kb-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.kb-inner {
	position: relative;
	padding: 40px;
}

.kb-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	background: none;
	border: 1px solid var(--kc-line);
	color: var(--kc-text);
	font-size: 22px;
	cursor: pointer;
}

.kb-close:hover,
.kb-close:focus-visible {
	border-color: var(--kc-lime);
	color: var(--kc-lime);
}

.kb-title {
	margin: 0 0 24px;
	color: var(--kc-text); /* some themes set a global h1-h5 color that would otherwise win over inheritance */
	font: 400 clamp(28px, 4vw, 38px)/1.1 var(--kc-head);
}

.kb-label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kc-lime);
}

.kb-section + .kb-section {
	margin-top: 24px;
}

.kb-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.kb-card {
	display: block;
	padding: 20px;
	background: var(--kc-panel);
	border: 1px solid var(--kc-line);
	color: var(--kc-text);
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}

.kb-card:hover,
.kb-card:focus-visible {
	border-color: var(--kc-lime);
	background: var(--kc-panel-hover);
	outline: none;
}

.kb-card__title {
	margin: 0 0 6px;
	color: var(--kc-text); /* some themes set a global h1-h5 color that would otherwise win over inheritance */
	font: 400 22px/1.15 var(--kc-head);
}

.kb-card__title::after {
	content: " \2192";
	color: var(--kc-lime);
}

.kb-card__desc {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--kc-muted);
}

.kb-card__meta {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--kc-lime);
}

.kb-groups {
	display: block;
	margin-top: 24px;
	padding: 14px 20px;
	text-align: center;
	border: 1px solid var(--kc-lime);
	color: var(--kc-text);
	text-decoration: none;
	font-size: 14px;
}

.kb-groups strong {
	color: var(--kc-lime);
	font-weight: 500;
}

.kb-groups:hover,
.kb-groups:focus-visible {
	background: var(--kc-panel-hover);
	outline: none;
}

@media (max-width: 640px) {
	.kb-modal {
		width: 100%;
		max-width: 100%;
		/* `height: auto` + `inset: 0` (set on the base .kb-modal rule) lets
		   the box stretch to exactly fill the viewport top-to-bottom. An
		   explicit `height: 100dvh` here fought with that same `inset: 0`
		   and could end up taller than the actually-visible area on some
		   mobile browsers once the address bar shows/hides, pushing the
		   bottom of the popup off-screen. `max-height` is still capped at
		   100dvh as a safety net for browsers without good `inset` support. */
		height: auto;
		max-height: 100dvh;
		margin: 0;
		border: 0;
		overflow-y: auto; /* safety net: scrolls instead of clipping if content is ever still taller than one screen */
		-webkit-overflow-scrolling: touch;
	}

	.kb-inner {
		padding: 44px 14px max(16px, env(safe-area-inset-bottom));
	}

	.kb-close {
		top: 8px;
		right: 8px;
		width: 32px;
		height: 32px;
		font-size: 18px;
	}

	.kb-title {
		margin: 0 0 14px;
		font-size: 22px;
	}

	.kb-label {
		margin: 0 0 6px;
		font-size: 10px;
	}

	.kb-section + .kb-section {
		margin-top: 14px;
	}

	/* Keep the 2-up grid instead of stacking 4 full-width cards — two
	   narrower cards per row uses noticeably less total vertical space
	   than four full-width rows, which is what actually lets everything
	   fit on one screen without scrolling. */
	.kb-grid {
		gap: 8px;
	}

	.kb-card {
		padding: 10px;
	}

	.kb-card__title {
		margin: 0 0 3px;
		font-size: 15px;
	}

	.kb-card__desc {
		margin: 0 0 4px;
		font-size: 11px;
		line-height: 1.3;
	}

	.kb-card__meta {
		font-size: 10px;
	}

	.kb-groups {
		margin-top: 14px;
		padding: 10px 14px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-modal[open] {
		animation: none;
	}
}