/* Anora Booking — full-page layout for /dat-lich/ (no theme chrome).
   Derives every colour from the declared jade / cream / champagne system. */

.anora-booking-page {
	--abp-jade-700: oklch(42% 0.12 165);
	--abp-jade-900: oklch(25% 0.06 165);
	--abp-champagne: oklch(82% 0.10 88);
	--abp-cream: oklch(98% 0.012 88);
	--abp-paper: oklch(99% 0.008 88);
	--abp-ink: oklch(18% 0.01 240);
	--abp-muted: oklch(48% 0.01 240);

	--abp-space-section: clamp(48px, 8vw, 96px);
	--abp-ease: cubic-bezier(0.16, 1, 0.3, 1);

	margin: 0;
	background: var(--abp-cream);
	color: var(--abp-ink);
	font-family: 'Be Vietnam Pro', 'BeVietnam Fallback', system-ui, -apple-system, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

/* ---- Minimal header ---- */
.anora-booking-page .abp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px clamp(20px, 5vw, 48px);
}
.anora-booking-page .abp-logo {
	font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	color: var(--abp-jade-900);
	text-decoration: none;
}
.anora-booking-page .abp-logo span { color: var(--abp-champagne); }
.anora-booking-page .abp-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--abp-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--abp-ease) 200ms;
}
.anora-booking-page .abp-back svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.anora-booking-page .abp-back:hover { color: var(--abp-jade-700); }
.anora-booking-page .abp-back:focus-visible {
	outline: 2px solid var(--abp-champagne);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---- Hero strip ---- */
.anora-booking-page .abp-hero {
	background: linear-gradient(135deg, var(--abp-jade-900) 0%, var(--abp-jade-700) 100%);
	color: var(--abp-paper);
	padding: var(--abp-space-section) clamp(20px, 5vw, 48px);
	text-align: center;
}
.anora-booking-page .abp-hero-inner { max-width: 720px; margin: 0 auto; }
.anora-booking-page .abp-eyebrow {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--abp-champagne);
	font-weight: 600;
	margin: 0 0 18px;
}
.anora-booking-page .abp-h1 {
	font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
	font-weight: 600;
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	/* Explicit light colour: the Luxia theme sets a dark h1 colour via a direct
	   `h1` selector which beats the inherited `.abp-hero` paper colour, making
	   the heading unreadable on the dark jade band. Pin it to paper here. */
	color: var(--abp-paper);
}
.anora-booking-page .abp-h1 em { font-style: italic; color: var(--abp-champagne); }
.anora-booking-page .abp-lead {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}
.anora-booking-page .abp-stats {
	margin: 26px 0 0;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

/* ---- Booking form spans the full width ---- */
/* The shortcode ships its own intro hero (.ab-hero); on the full page the
   branded .abp-hero band above already serves that role, so the embedded
   one is suppressed here to avoid two stacked heroes. Scoped to the page
   wrapper so the shortcode embed and homepage modal keep their own hero. */
.anora-booking-page .ab-hero {
	display: none;
}
.anora-booking-page .abp-main {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 48px) 0;
}
.anora-booking-page .abp-main .anora-booking-widget {
	max-width: none;
	margin: 0;
	/* The shared widget wrapper sets overflow:hidden (to clip its rounded
	   corners). But any ancestor with overflow != visible cancels the summary
	   panel's position:sticky, so it scrolls away instead of tracking the page.
	   On the full page nothing actually overflows the corners (the embedded
	   .ab-hero is hidden and .ab-layout has no edge-bleeding background), so we
	   restore overflow:visible here to let the summary follow the scroll.
	   Scoped to the page wrapper — the embed + homepage modal keep clipping. */
	overflow: visible;
}

/* Keep the summary panel fully reachable (incl. the confirm button) when many
   treatments are selected: cap it to the viewport and let it scroll
   internally. A sticky element's OWN overflow does not break its stickiness —
   only an ancestor's does — so this is safe. */
.anora-booking-page .ab-sticky {
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

/* ---- Secondary info band below the form ---- */
.anora-booking-page .abp-info-band {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 48px) var(--abp-space-section);
}
.anora-booking-page .abp-info-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 768px) {
	.anora-booking-page .abp-info-inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		align-items: start;
	}
}
.anora-booking-page .abp-card {
	background: var(--abp-paper);
	border: 1px solid oklch(90% 0.04 165);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.anora-booking-page .abp-card h2 {
	font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--abp-jade-900);
	margin: 0 0 14px;
}
.anora-booking-page .abp-info-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 0.9375rem;
	color: var(--abp-ink);
	padding: 8px 0;
}
.anora-booking-page .abp-info-row + .abp-info-row {
	border-top: 1px solid oklch(96% 0.02 165);
}
.anora-booking-page .abp-info-row svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--abp-jade-700);
	margin-top: 2px;
}
.anora-booking-page .abp-info-row a {
	color: var(--abp-jade-700);
	text-decoration: none;
}
.anora-booking-page .abp-info-row a:hover { text-decoration: underline; }
.anora-booking-page .abp-info-row a:focus-visible {
	outline: 2px solid var(--abp-champagne);
	outline-offset: 2px;
	border-radius: 3px;
}
.anora-booking-page .abp-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.anora-booking-page .abp-trust li {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 0.9375rem;
	color: var(--abp-ink);
}
.anora-booking-page .abp-trust li svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--abp-champagne);
}
.anora-booking-page .abp-alt-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.anora-booking-page .abp-alt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 1px solid var(--abp-jade-700);
	color: var(--abp-jade-700);
	background: transparent;
	transition: background var(--abp-ease) 250ms, color var(--abp-ease) 250ms;
}
.anora-booking-page .abp-alt-btn:hover {
	background: var(--abp-jade-700);
	color: var(--abp-paper);
}
.anora-booking-page .abp-alt-btn:focus-visible {
	outline: 2px solid var(--abp-champagne);
	outline-offset: 2px;
}

/* ---- Minimal footer ---- */
.anora-booking-page .abp-footer {
	border-top: 1px solid oklch(90% 0.04 165);
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px clamp(20px, 5vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	color: var(--abp-muted);
}
.anora-booking-page .abp-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}
.anora-booking-page .abp-footer a {
	color: var(--abp-muted);
	text-decoration: none;
	transition: color var(--abp-ease) 200ms;
}
.anora-booking-page .abp-footer a:hover { color: var(--abp-jade-700); }
.anora-booking-page .abp-footer a:focus-visible {
	outline: 2px solid var(--abp-champagne);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.anora-booking-page * {
		transition-duration: 0.01ms !important;
	}
}