/* Booking pages. Self-contained — the theme stylesheet is not loaded here — and
   deliberately the same dark palette and one teal accent as the rest of the site. */

:root {
	--bk-accent: #03CCF9;
	--bk-accent-tint: rgba(3, 204, 249, 0.13);
	--bk-on-accent: #04121A;
	--bk-paper: #070D17;
	--bk-paper-2: #0B1322;
	--bk-surface: #101A2C;
	--bk-surface-2: #17243A;
	--bk-line: #1F2C45;
	--bk-line-strong: #2C3C5A;
	--bk-ink: #F1F6FD;
	--bk-ink-2: #BFCADD;
	--bk-ink-3: #8896AF;
	--bk-good: #2DD48B;
	--bk-crit: #FF6B70;
	--bk-radius: 12px;
	--bk-ease: cubic-bezier(0.22, 0.8, 0.36, 1);
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body.ywd-bk-body {
	margin: 0;
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	background:
		radial-gradient(900px 500px at 85% -10%, rgba(3, 204, 249, 0.10), transparent 60%),
		radial-gradient(700px 460px at -5% 110%, rgba(3, 204, 249, 0.08), transparent 62%),
		var(--bk-paper);
	color: var(--bk-ink-2);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

/* ---------- chrome ---------- */

.bk-top {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 18px 24px;
	border-bottom: 1px solid var(--bk-line);
}
.bk-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bk-ink); font-weight: 700; text-decoration: none; }
.bk-brand em { font-style: normal; color: var(--bk-accent); }
.bk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bk-accent); box-shadow: 0 0 0 4px var(--bk-accent-tint); }
.bk-back { color: var(--bk-ink-3); text-decoration: none; font-size: 0.875rem; }
.bk-back:hover { color: var(--bk-accent); }

.bk-wrap { max-width: 760px; margin-inline: auto; padding: 40px 24px 72px; }
.bk-wrap--narrow { max-width: 560px; }

.bk-head { margin-bottom: 36px; }
.bk-eyebrow {
	margin: 0 0 10px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bk-accent);
}
.bk-head h1, .bk-panel h1 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1.15; color: var(--bk-ink); letter-spacing: -0.02em; }
.bk-lede { margin: 0; font-size: 1.0625rem; color: var(--bk-ink-3); max-width: 46ch; }

/* ---------- buttons ---------- */

.bk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1;
	padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
	text-decoration: none; cursor: pointer;
	transition: transform 150ms var(--bk-ease), background 150ms var(--bk-ease), border-color 150ms var(--bk-ease), opacity 150ms var(--bk-ease);
}
.bk-btn--primary { background: var(--bk-accent); color: var(--bk-on-accent); }
.bk-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }
.bk-btn--ghost { background: transparent; color: var(--bk-ink-2); border-color: var(--bk-line-strong); }
.bk-btn--ghost:hover { border-color: var(--bk-accent); color: var(--bk-accent); }
.bk-btn--danger { background: transparent; color: var(--bk-crit); border-color: rgba(255, 107, 112, 0.5); }
.bk-btn--danger:hover { background: rgba(255, 107, 112, 0.12); }
.bk-btn--lg { padding: 16px 28px; font-size: 1rem; }
.bk-btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.bk-link { background: none; border: 0; padding: 0; font: inherit; color: var(--bk-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bk-chip {
	font: inherit; font-size: 0.8125rem; padding: 8px 14px; border-radius: 999px;
	background: var(--bk-surface); border: 1px solid var(--bk-line-strong); color: var(--bk-ink-2); cursor: pointer;
}
.bk-chip:disabled { opacity: 0.4; cursor: default; }
.bk-chip:hover:not(:disabled) { border-color: var(--bk-accent); color: var(--bk-accent); }

/* ---------- steps ---------- */

.bk-step {
	padding: 26px 0;
	border-top: 1px solid var(--bk-line);
	transition: opacity 200ms var(--bk-ease);
}
.bk-step.is-disabled { opacity: 0.4; pointer-events: none; }
.bk-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bk-step__n {
	width: 26px; height: 26px; flex: none; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--bk-surface-2); border: 1px solid var(--bk-line-strong);
	font-family: ui-monospace, monospace; font-size: 0.75rem; font-weight: 700; color: var(--bk-accent);
}
.bk-step h2 { margin: 0; font-size: 1.0625rem; color: var(--bk-ink); }

/* ---------- day strip ---------- */

.bk-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 12px 8px; border-radius: var(--bk-radius); cursor: pointer;
	background: var(--bk-surface); border: 1px solid var(--bk-line); color: var(--bk-ink-2);
	font: inherit;
	transition: border-color 150ms var(--bk-ease), background 150ms var(--bk-ease), transform 150ms var(--bk-ease);
}
.bk-day:hover:not(:disabled) { border-color: var(--bk-line-strong); transform: translateY(-2px); }
.bk-day.is-on { border-color: var(--bk-accent); background: var(--bk-accent-tint); }
.bk-day.is-empty { opacity: 0.35; cursor: default; }
.bk-day--skeleton { height: 92px; background: var(--bk-surface); animation: bk-pulse 1.2s ease-in-out infinite; }
@keyframes bk-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }
.bk-day__wd { font-family: ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-ink-3); }
.bk-day__d { font-size: 1.375rem; font-weight: 700; color: var(--bk-ink); line-height: 1.1; }
.bk-day__m { font-size: 0.75rem; color: var(--bk-ink-3); }
.bk-day__n { margin-top: 4px; font-size: 0.6875rem; color: var(--bk-accent); }
.bk-day.is-empty .bk-day__n { color: var(--bk-ink-3); }
.bk-days__nav { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- times ---------- */

.bk-tz { margin: 0 0 14px; font-size: 0.8125rem; color: var(--bk-ink-3); display: flex; gap: 10px; flex-wrap: wrap; }
.bk-tz strong { color: var(--bk-ink-2); font-weight: 600; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.bk-time {
	padding: 13px 8px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600;
	background: var(--bk-surface); border: 1px solid var(--bk-line); color: var(--bk-ink);
	transition: border-color 150ms var(--bk-ease), background 150ms var(--bk-ease), transform 150ms var(--bk-ease);
}
.bk-time:hover { border-color: var(--bk-accent); transform: translateY(-2px); }
.bk-time.is-on { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); }
.bk-empty { margin: 0; color: var(--bk-ink-3); font-size: 0.9375rem; }

/* ---------- fields ---------- */

.bk-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bk-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--bk-ink-3); }
.bk-field--wide { grid-column: 1 / -1; }
.bk-field em { font-style: normal; color: var(--bk-accent); }
.bk-field input, .bk-field textarea {
	padding: 12px 14px; border-radius: 10px; font: inherit; font-size: 0.9375rem;
	background: var(--bk-paper); border: 1px solid var(--bk-line-strong); color: var(--bk-ink);
	resize: vertical;
}
.bk-field input:focus-visible, .bk-field textarea:focus-visible,
.bk-btn:focus-visible, .bk-day:focus-visible, .bk-time:focus-visible, .bk-chip:focus-visible {
	outline: 2px solid var(--bk-accent); outline-offset: 2px;
}
.bk-err { display: block; min-height: 0; font-style: normal; font-size: 0.75rem; color: var(--bk-crit); }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bk-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.bk-chosen { margin: 0; font-size: 0.875rem; color: var(--bk-ink-2); }
.bk-formerr { margin: 12px 0 0; font-size: 0.875rem; color: var(--bk-crit); }
.bk-note { font-size: 0.875rem; color: var(--bk-ink-3); }

/* ---------- panels, confirmation ---------- */

.bk-panel {
	background: linear-gradient(180deg, var(--bk-surface) 0%, var(--bk-paper-2) 100%);
	border: 1px solid var(--bk-line);
	border-radius: 18px;
	padding: 32px;
	margin-bottom: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.bk-panel--notice { text-align: center; }
.bk-panel h2 { margin: 0 0 12px; font-size: 1.25rem; color: var(--bk-ink); }
.bk-manage__who { margin: 0 0 20px; color: var(--bk-ink-3); font-size: 0.9375rem; }
.bk-manage__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.bk-done { text-align: center; padding: 48px 24px; }
.bk-done__tick {
	width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.75rem;
	background: rgba(45, 212, 139, 0.14); color: var(--bk-good);
	border: 1px solid rgba(45, 212, 139, 0.45);
}
.bk-done h2 { margin: 0 0 10px; font-size: 1.75rem; color: var(--bk-ink); }
.bk-done__when { margin: 0 0 24px; font-size: 1.125rem; color: var(--bk-accent); font-weight: 600; }
.bk-done__note { margin: 22px auto 18px; max-width: 42ch; font-size: 0.9375rem; color: var(--bk-ink-3); }

@media (max-width: 620px) {
	.bk-wrap { padding: 28px 16px 56px; }
	.bk-panel { padding: 24px 20px; }
	.bk-days { grid-auto-columns: minmax(76px, 1fr); }
	.bk-btn { width: 100%; }
	.bk-submit { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
	.bk-btn, .bk-day, .bk-time, .bk-step { transition: none; }
	.bk-btn:hover, .bk-day:hover, .bk-time:hover { transform: none; }
	.bk-day--skeleton { animation: none; }
}