/* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */

/* ────────────────────────────────────────────────────────────────────────
 * DatePicker — Airbnb-style calendar
 *
 * Visual language adopted from airbnb.gr's date picker:
 *   - Soft rounded card with a layered shadow
 *   - Circular nav arrows in the top corners with a thin border
 *   - 16px, weight 500 month label
 *   - Single-letter weekday headers (mixed case, muted)
 *   - Day cells are 40px circles
 *   - Hover renders a thin circle outline around the day number
 *   - Selected day is a solid filled circle with inverted text
 *   - Today (when unselected) gets the circle outline + bolder weight
 *   - Range midline is a light gray bar that extends behind the days,
 *     meeting the endpoint circles flush via half-gradient bookends
 *
 * Typography + colours come from the theme tokens — the wizard's
 * Harbor / Helm direction restyles the calendar automatically via the
 * [data-cb-direction] blocks in tokens.css.  No hex codes in the
 * component CSS, only var() references with practical fallbacks for
 * admin-context rendering where no direction is active.
 *
 * Responsive: below 640px viewport the two-month layout stacks
 * vertically and the popover clamps to viewport width.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Wrapper + text input (the field above the popover) ────────────────── */

.cb-datepicker {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 18rem;
	font-family: var( --cb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif );
}

.cb-datepicker__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.cb-datepicker__input {
	width: 100%;
	height: 3rem;
	padding: 0 2.75rem 0 1rem;
	border: 1px solid var( --cb-border, #dddddd );
	border-radius: 12px;
	background: var( --cb-card, #ffffff );
	color: var( --cb-text, #222222 );
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cb-datepicker__input::-moz-placeholder {
	color: var( --cb-muted, #717171 );
	opacity: 1;
}

.cb-datepicker__input::placeholder {
	color: var( --cb-muted, #717171 );
	opacity: 1;
}

.cb-datepicker__input:hover:not(:disabled) {
	border-color: var( --cb-text, #222222 );
}

.cb-datepicker__input:focus {
	outline: none;
	border-color: var( --cb-text, #222222 );
	box-shadow: 0 0 0 1px var( --cb-text, #222222 );
}

.cb-datepicker__input:disabled {
	background: var( --cb-surface-2, #f7f7f7 );
	color: var( --cb-muted, #717171 );
	cursor: not-allowed;
}

.cb-datepicker__trigger {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY( -50% );
	width: 2rem;
	height: 2rem;
	border: 0;
	background: transparent;
	color: var( --cb-muted, #717171 );
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 120ms ease, color 120ms ease;
}

.cb-datepicker__trigger:hover:not(:disabled) {
	background: var( --cb-surface-2, #f2f2f2 );
	color: var( --cb-text, #222222 );
}

.cb-datepicker__trigger:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

/* ── Popover chrome ────────────────────────────────────────────────────── */

.cb-datepicker__popover {
	position: absolute;
	z-index: 50;
	top: calc( 100% + 0.5rem );
	left: 0;
	background: var( --cb-card, #ffffff );
	border: 1px solid var( --cb-border, rgba( 0, 0, 0, 0.04 ) );
	/* Generous 16px radius to echo Airbnb's card-like popover */
	border-radius: 16px;
	box-shadow:
		0 6px 20px rgba( 0, 0, 0, 0.14 ),
		0 2px 4px rgba( 0, 0, 0, 0.08 );
	padding: 1.5rem 1.25rem 1.25rem;
	min-width: 18rem;
	font-family: var( --cb-font-family, inherit );
	color: var( --cb-text, #222222 );
}

/* Phase 2 — when the trigger sits near the viewport's right edge (admin
 * topbar, day plan), DatePicker.jsx measures the popover on open and adds
 * this modifier to flip it to right-anchored so it doesn't clip off-screen. */
.cb-datepicker__popover--align-right {
	left: auto;
	right: 0;
}

/* ── Inline variant (embed product page) ────────────────────────────────────
 * v2.71.1 — the public [cb_cruise_product] page renders the calendar INLINE
 * (always visible) instead of in a click-to-open popover, so it can't open as a
 * dropdown that overflows the narrow booking card (which produced a page
 * scrollbar and overlapped the price/CTA). Static + in-flow + full width; the
 * calendar grid itself is styled by the shared :is(...) rules below. */
.cb-datepicker__inline {
	position: static;
	width: 100%;
	font-family: var( --cb-font-family, inherit );
	color: var( --cb-text, inherit );
}

/* ── react-day-picker v9 structural reset ──────────────────────────────── */

/* Library ships .rdp-day with default padding, border, and hover bg — we
 * flatten all of that so our selectors below are the single source of truth. */

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-root,
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-root * {
	box-sizing: border-box;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-root {
	--rdp-accent-color:             var( --cb-primary, #222222 );
	--rdp-accent-background-color:  var( --cb-surface-2, #f2f2f2 );
	--rdp-day-height:               2.75rem;
	--rdp-day-width:                2.75rem;
	--rdp-day_button-width:         2.5rem;
	--rdp-day_button-height:        2.5rem;
	--rdp-day_button-border-radius: 999px;
	--rdp-today-color:              inherit;
	--rdp-range_middle-background-color: var( --cb-surface-2, #f0f0f0 );
	--rdp-range_middle-color:       var( --cb-text, #222222 );
	--rdp-selected-border:          0;
	font-family: var( --cb-font-family, inherit );
	color: var( --cb-text, #222222 );
	margin: 0;
}

/* Kill the library's default day padding + borders */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day {
	padding: 0;
	border: 0;
	vertical-align: middle;
	text-align: center;
}

/* ── Month caption row — label centered, nav buttons absolute ──────────── */

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-month {
	margin: 0;
}

/* Caption row = [prev] [label] [next] in a single flex row, with the
 * nav wrapper flattened via `display: contents` so its children
 * participate directly in the parent flexbox. This keeps the arrows
 * vertically centered on the month label (the old absolute-positioning
 * approach dropped them onto the weekday row below). */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-month_caption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 1rem;
	gap: 0.5rem;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-caption_label {
	flex: 1;
	font-family: var( --cb-display-font, var( --cb-font-family, inherit ) );
	font-size: 1rem;
	font-weight: 500;
	color: var( --cb-text, #222222 );
	letter-spacing: normal;
	text-transform: none;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	line-height: 1.4;
	text-align: center;
}

/* ── Nav arrows — chromeless round icon buttons ────────────────────────── */

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-nav {
	display: contents;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-button_previous,
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-button_next {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var( --cb-border, #dddddd );
	background: var( --cb-card, #ffffff );
	color: var( --cb-text, #222222 );
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 120ms ease, border-color 120ms ease;
}
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-button_previous { order: -1; }
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-button_next     { order: 1;  }

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-button_previous:hover:not([disabled]),
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-button_next:hover:not([disabled]) {
	background: var( --cb-surface-2, #f7f7f7 );
	border-color: var( --cb-text, #222222 );
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-button_previous[disabled],
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-button_next[disabled] {
	opacity: 0.3;
	cursor: default;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-chevron {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ── Weekday headers ───────────────────────────────────────────────────── */

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-weekdays {
	border-bottom: 0;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-weekday {
	font-family: var( --cb-font-family, inherit );
	font-size: 0.75rem;
	font-weight: 400;
	color: var( --cb-muted, #717171 );
	text-transform: none;
	letter-spacing: normal;
	text-align: center;
	padding: 0.25rem 0;
	width: 2.75rem;
}

/* ── Day cells ─────────────────────────────────────────────────────────── */

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day_button {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 1px solid transparent;
	background: transparent;
	color: var( --cb-text, #222222 );
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Hover — thin circle outline around the day number (Airbnb's signature) */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day_button:hover:not([disabled]) {
	border-color: var( --cb-text, #222222 );
	background: transparent;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day_button:focus-visible {
	outline: none;
	border-color: var( --cb-text, #222222 );
	box-shadow: 0 0 0 2px var( --cb-card, #ffffff ), 0 0 0 3px var( --cb-text, #222222 );
}

/* Today (when not selected) — bolder weight + outlined ring so it stands
 * out against neighbours without stealing the selected style */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-today:not(.rdp-selected):not(.rdp-range_start):not(.rdp-range_end) .rdp-day_button {
	font-weight: 600;
	border-color: var( --cb-text, #222222 );
}

/* Selected — solid fill with inverted text.  Drives the primary
 * brand colour (so each preset's selection picks up the theme). */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day.rdp-selected .rdp-day_button,
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day.rdp-range_start .rdp-day_button,
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day.rdp-range_end .rdp-day_button {
	background: var( --cb-primary, #222222 );
	color: var( --cb-on-primary, var( --cb-card, #ffffff ) );
	border-color: var( --cb-primary, #222222 );
	font-weight: 500;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day.rdp-selected .rdp-day_button:hover,
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day.rdp-range_start .rdp-day_button:hover,
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day.rdp-range_end .rdp-day_button:hover {
	background: var( --cb-primary-dark, var( --cb-primary, #222222 ) );
	border-color: var( --cb-primary-dark, var( --cb-primary, #222222 ) );
}

/* Disabled / outside-month */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-disabled .rdp-day_button,
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-outside .rdp-day_button {
	color: var( --cb-muted, #dddddd );
	opacity: 0.4;
	cursor: default;
}

/* G3 (v2.4.1) — 135° hatching pattern for blocked / past dates per the B3
 * punch list row P-3. Applied only to actually-disabled days (past, beyond
 * window, blocked-dates), NOT outside-month padding cells which already
 * have the muted-grey treatment above. The pattern reads at every viewport
 * — including 360px mobile where text-decoration-only failed before — and
 * the color-mix keeps it token-driven so Harbor / Helm direction restyles. */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-disabled:not(.rdp-outside) .rdp-day_button {
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0,
		transparent 4px,
		color-mix( in oklab, var( --cb-text, #16243a ) 18%, transparent ) 4px,
		color-mix( in oklab, var( --cb-text, #16243a ) 18%, transparent ) 5px
	);
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-disabled .rdp-day_button:hover,
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-outside .rdp-day_button:hover {
	border-color: transparent;
	/* `background-color` (not the `background` shorthand) so the G3 hatching
	 * pattern applied on `.rdp-disabled:not(.rdp-outside)` is preserved when
	 * the cursor passes over a disabled day. */
	background-color: transparent;
}

/* Hidden cells (month-padding spacers) */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-hidden {
	visibility: hidden;
}

/* ── Range-bar bookends — endpoints meet the midline flush ─────────────── */

/* The .rdp-day <td> gets the gray bar; the inner day_button stays
 * transparent so its text reads through. */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-range_middle {
	background: var( --cb-surface-2, #f0f0f0 );
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-range_middle .rdp-day_button {
	background: transparent;
	color: var( --cb-text, #222222 );
	border-color: transparent;
	font-weight: 400;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-range_middle .rdp-day_button:hover {
	border-color: var( --cb-text, #222222 );
}

/* Half-gradient bookends on the range endpoints so the grey bar meets
 * the circle flush on one side only. */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-range_start {
	background: linear-gradient( to right, transparent 50%, var( --cb-surface-2, #f0f0f0 ) 50% );
}
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-range_end {
	background: linear-gradient( to right, var( --cb-surface-2, #f0f0f0 ) 50%, transparent 50% );
}
/* Single-day "range" (start === end) gets no bar */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-range_start.rdp-range_end {
	background: transparent;
}

[dir="rtl"] :is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-range_start {
	background: linear-gradient( to left, transparent 50%, var( --cb-surface-2, #f0f0f0 ) 50% );
}
[dir="rtl"] :is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-range_end {
	background: linear-gradient( to left, var( --cb-surface-2, #f0f0f0 ) 50%, transparent 50% );
}

/* ── Two-month layout for range picker ─────────────────────────────────── */

:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-months {
	display: flex;
	/* Library default is `flex-wrap: wrap` — combined with our `display:
	 * contents` on `.rdp-nav`, that wrapped the prev/next buttons onto
	 * separate rows whenever the popover container was narrower than
	 * [prev]+[month]+[next] (e.g. inside a constrained admin layout).
	 * `nowrap` keeps them in one row and lets the popover grow to natural
	 * content width. */
	flex-wrap: nowrap;
	gap: 2.5rem;
	justify-content: center;
	align-items: flex-start;
}

/* ── Responsive: stack on mobile ───────────────────────────────────────── */

@media ( max-width: 640px ) {
	.cb-datepicker__popover {
		min-width: auto;
		max-width: calc( 100vw - 1.5rem );
		padding: 1.25rem 0.75rem 1rem;
	}

	:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-months {
		flex-direction: column;
		gap: 1.5rem;
	}

	:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-root {
		--rdp-day-height:        2.5rem;
		--rdp-day-width:         2.5rem;
		--rdp-day_button-width:  2.25rem;
		--rdp-day_button-height: 2.25rem;
	}

	:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-day_button {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 0.85rem;
	}

	:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-weekday {
		width: 2.5rem;
		font-size: 0.7rem;
	}
}

/* ── v2.6.0 — Mobile bottom-sheet (B2 picker spec) ─────────────────────────
 * At <640px the popover is suppressed and the calendar renders as a
 * fixed-bottom sheet that slides up from the viewport edge. Backdrop dims
 * the page; the sheet itself has the iOS-style grab handle, a Cancel /
 * Title / Done bar, and the calendar below it. Day cells go up to 42px
 * for thumb-friendly hit targets per the design.
 * ──────────────────────────────────────────────────────────────────────── */

.cb-datepicker__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(22, 36, 58, 0.42);
	z-index: 60;
	-webkit-tap-highlight-color: transparent;
}

.cb-datepicker__sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 61;
	background: var( --bu-bg-elev, #fff );
	border-top-left-radius: var( --bu-radius-lg, 18px );
	border-top-right-radius: var( --bu-radius-lg, 18px );
	box-shadow: 0 -16px 40px -8px rgba(0, 0, 0, 0.18);
	padding: 14px 16px 18px;
	max-height: 90vh;
	overflow-y: auto;
	animation: cb-datepicker-sheet-rise 0.22s ease-out;
}

@keyframes cb-datepicker-sheet-rise {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.cb-datepicker__sheet-handle {
	width: 36px;
	height: 4px;
	border-radius: 999px;
	background: var( --bu-line, rgba(22, 36, 58, 0.10) );
	margin: 0 auto 12px;
}

.cb-datepicker__sheet-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	gap: 8px;
}

.cb-datepicker__sheet-title {
	font-family: var( --bu-font-display, var( --cb-display-font, serif ) );
	font-weight: 600;
	font-size: var( --bu-fs-base, 15px );
	color: var( --bu-ink, #16243a );
}

.cb-datepicker__sheet-action {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	border: 1px solid transparent;
	background: transparent;
	font-family: inherit;
	font-size: var( --bu-fs-sm, 13px );
	padding: 8px 14px;
	border-radius: var( --bu-radius, 10px );
	cursor: pointer;
	font-weight: 500;
	white-space: nowrap;
}

.cb-datepicker__sheet-action--ghost {
	color: var( --bu-ink-2, #3d4a60 );
	border-color: var( --bu-line );
}

.cb-datepicker__sheet-action--primary {
	background: var( --bu-primary, #16243a );
	color: #fff;
	font-weight: 600;
}

/* Mobile bottom-sheet — bump day-cell touch targets so they're thumb-friendly.
 * The popover styles above already apply (see :is() unifying them in v2.10.1);
 * these are sheet-only tweaks on top.
 *
 * v2.10.2 — operator phone walk surfaced two layout issues with the
 * bottom-sheet calendar:
 *   1) The forward (next-month) arrow was rendering BELOW the grid instead
 *      of next to the back arrow. React-day-picker v9 emits .rdp-nav as a
 *      sibling of .rdp-month_caption (not a child), so the v2.6.0
 *      `display: contents` + flex `order` trick didn't reposition it.
 *   2) The grid was content-sized + centered, leaving wasted side padding.
 *
 * v2.13.1 — the v2.10.2 fix put the grid on .rdp-month, but the prev/next
 * buttons live in .rdp-nav which is a *sibling* of .rdp-month, not a
 * descendant — both are children of .rdp-months. The buttons' grid-area
 * declarations had no grid context to bind to, so they fell back to the
 * parent's flex layout: prev wrapped to the row above the calendar, next
 * wrapped to the row below. Operator-reported on iOS (390x844) on demo.
 *
 * Fix: hoist the grid to .rdp-months and make BOTH .rdp-nav and .rdp-month
 * `display: contents` so their direct descendants (prev, next, caption,
 * grid) all become grid items of .rdp-months. The grid-template-areas
 * registration is unchanged. */
.cb-datepicker__sheet .rdp {
	margin: 0;
}

.cb-datepicker__sheet .rdp-months {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"prev caption next"
		"grid grid    grid";
	-moz-column-gap: 0.5rem;
	     column-gap: 0.5rem;
	row-gap: 0.75rem;
	width: 100%;
	align-items: center;
}

.cb-datepicker__sheet .rdp-month_caption {
	grid-area: caption;
	padding: 0;
	justify-content: center;  /* dropdowns / label centred between the arrows */
}

.cb-datepicker__sheet .rdp-month_grid {
	grid-area: grid;
	width: 100%;
	table-layout: fixed;
}

/* Both .rdp-nav and .rdp-month collapse to `display: contents` so their
 * direct children (prev, next, caption, grid) become the grid items of
 * .rdp-months. */
.cb-datepicker__sheet .rdp-nav,
.cb-datepicker__sheet .rdp-month {
	display: contents;
}
.cb-datepicker__sheet .rdp-button_previous { grid-area: prev; }
.cb-datepicker__sheet .rdp-button_next     { grid-area: next; }

.cb-datepicker__sheet .rdp-root {
	--rdp-day-height:        3rem;
	--rdp-day-width:         100%;
	--rdp-day_button-width:  2.75rem;
	--rdp-day_button-height: 2.75rem;
}
.cb-datepicker__sheet .rdp-weekdays { width: 100%; }
.cb-datepicker__sheet .rdp-weekday  {
	width: auto;
	font-size: 0.7rem;
}
/* table-layout:fixed + width:100% on the grid distributes the 7 columns
 * evenly. Days now fill the sheet's content area edge-to-edge. */
.cb-datepicker__sheet .rdp-day {
	width: auto;
}

/* ── v2.75.2 — Inline (product-page) calendar: grid-based month nav ─────────
 * The inline variant ([cb_cruise_product] / [cb_rental_product]) laid the month
 * caption out with `.rdp-month_caption { display:flex; justify-content:
 * space-between }` + `.rdp-nav { display:contents }`. But react-day-picker v9
 * emits `.rdp-nav` as a SIBLING of `.rdp-month` (both children of
 * `.rdp-months`), so the prev/next buttons became flex children of
 * `.rdp-months` and OVERFLOWED the calendar's container whenever
 * [prev]+[grid]+[next] exceeded its width — on the product page the prev arrow
 * escaped the booking card's left edge into the gutter.
 *
 * Mirror the bottom-sheet's explicit grid (the v2.10.2 / v2.13.1 fix): hoist
 * `.rdp-nav` + `.rdp-month` to `display:contents` so prev / caption / next /
 * grid all become grid items of `.rdp-months`, place prev/caption/next in one
 * row with the grid spanning full-width below. Nav can no longer escape, and
 * `table-layout:fixed; width:100%` distributes the 7 day columns evenly across
 * the booking rail. */
.cb-datepicker__inline .rdp-months {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"prev caption next"
		"grid grid    grid";
	-moz-column-gap: 0.5rem;
	     column-gap: 0.5rem;
	row-gap: 0.75rem;
	width: 100%;
	align-items: center;
}

.cb-datepicker__inline .rdp-nav,
.cb-datepicker__inline .rdp-month {
	display: contents;
}

.cb-datepicker__inline .rdp-button_previous { grid-area: prev; }
.cb-datepicker__inline .rdp-button_next     { grid-area: next; }

.cb-datepicker__inline .rdp-month_caption {
	grid-area: caption;
	justify-content: center; /* label centred between the flanking arrows */
	padding: 0;
}

.cb-datepicker__inline .rdp-month_grid {
	grid-area: grid;
	width: 100%;
	table-layout: fixed;
}

.cb-datepicker__inline .rdp-root { --rdp-day-width: 100%; }
.cb-datepicker__inline .rdp-weekdays { width: 100%; }
.cb-datepicker__inline .rdp-weekday  { width: auto; }
.cb-datepicker__inline .rdp-day      { width: auto; }

/* ── v2.10.1 — DOB picker (captionLayout="dropdown") fixes ──────────────
 * When react-day-picker renders both the dropdowns AND the rdp-caption_label
 * text, "May 2026" appears twice. Hide the redundant label visually but keep
 * it for screen readers. :has() is supported in Chrome 105+, Safari 15.4+,
 * Firefox 121+ — ample for our admin + customer-flow targets. */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-month_caption:has(.rdp-dropdowns) .rdp-caption_label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Style the native dropdowns so they don't render as bare browser controls. */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-dropdowns {
	display: flex;
	gap: 0.5rem;
	flex: 1;
	justify-content: center;
}
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-dropdown_root {
	position: relative;
}
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-dropdown {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	background: var( --cb-card, #ffffff );
	border: 1px solid var( --cb-border, #dddddd );
	border-radius: 8px;
	padding: 0.4rem 1.5rem 0.4rem 0.7rem;
	font-family: var( --cb-display-font, var( --cb-font-family, inherit ) );
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --cb-text, #222222 );
	cursor: pointer;
	min-width: 5.5rem;
}
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline) .rdp-dropdown:focus {
	outline: 2px solid var( --cb-primary, #222222 );
	outline-offset: 2px;
}

/* When dropdowns are present (DOB context), the heavy 135° hatching that
 * reads as "blocked / booked" on the wizard's date pickers is the wrong
 * affordance — out-of-range future dates aren't blocked, they're just outside
 * the valid window. Replace with a soft grayed-out treatment. */
:is(.cb-datepicker__popover, .cb-datepicker__sheet, .cb-datepicker__inline):has(.rdp-dropdowns) .rdp-disabled:not(.rdp-outside) .rdp-day_button {
	background-image: none;
	color: var( --cb-muted, #9ba3b3 );
	opacity: 0.55;
}

/* BoatUP — design tokens (Phase R)
 *
 * Single source of truth for the visual layer across all 3 surfaces:
 *   - Admin UI         (#cb-root scope)
 *   - Customer wizard  (.cb-booking-widget scope, with operator-overridable colors)
 *   - Partner portal   (.cb-partner-portal-body scope, with operator-overridable colors)
 *
 * Design direction: modern minimal (Stripe / Vercel / Linear).
 *
 * Tokens are layered:
 *   1. Raw scale  — `--cb-color-blue-500`, `--cb-space-4`, `--cb-text-base`
 *   2. Semantic   — `--cb-text-primary`, `--cb-surface`, `--cb-border`
 *
 * Components ALWAYS read the semantic tokens. Surface-level customisation
 * (operator branding, theme presets, dark mode in the future) only needs to
 * remap the semantic tokens to different raw-scale values.
 */

/* ── BoatUP admin tokens (Phase 2 / Phase U) ────────────────────────────────
 *
 * The admin SPA uses --bu-* tokens (the handoff naming) rather than --cb-*
 * (the wizard naming) so the handoff JSX in BoatUP-handoff/boatup/project/
 * admin.jsx can be ported almost line-for-line. Most --bu-* aliases map to
 * existing --cb-* tokens; a few admin-only tokens (--bu-bg-elev, --bu-bg-sunk,
 * --bu-line, the soft/strong success/danger pairs, fs-3xl) don't have --cb-*
 * equivalents and live here as the source of truth for the admin chrome.
 *
 * The admin is direction-agnostic — always Harbor (cream + serif). No
 * [data-cb-direction] block is needed here; admin chrome reads --bu-*
 * directly. Values are sampled from BoatUP-handoff/boatup/project/tokens.css.
 */
:root {
    /* Ink scale — primary / secondary / tertiary text */
    --bu-ink-1:          #16243a;
    --bu-ink-2:          #3d4a60;
    --bu-ink-3:          #6b7689;
    --bu-ink-4:          #9ba3b3;

    /* Surfaces */
    --bu-bg:             #f8f5ef;       /* page background (Harbor cream) */
    --bu-bg-elev:        #ffffff;       /* card / panel background */
    --bu-bg-sunk:        #f0ebe1;       /* hover / track / inset */
    --bu-line:           rgba(22, 36, 58, 0.10);
    --bu-line-2:         rgba(22, 36, 58, 0.06);

    /* Brand */
    --bu-primary:        #16243a;
    --bu-primary-rgb:    22, 36, 58;
    --bu-primary-ink:    #ffffff;
    --bu-primary-soft:   rgba(22, 36, 58, 0.08);
    --bu-accent:         #c1683a;       /* terracotta */
    --bu-accent-soft:    #f3e3d6;

    /* Status — strong + soft pairs for KPI deltas, schedule bars, etc. */
    --bu-success:        #2e7a55;
    --bu-success-soft:   #d8ead9;
    --bu-warn:           #b87a14;
    --bu-warn-soft:      #f4e6c5;
    --bu-danger:         #a52a2a;
    --bu-danger-soft:    #f1d9d4;

    /* Type families */
    --bu-display:        'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --bu-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bu-mono:           ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', monospace;

    /* Type scale (admin uses fixed sizes, no scale multiplier) */
    --bu-fs-xs:          11px;
    --bu-fs-sm:          13px;
    --bu-fs-md:          15px;
    --bu-fs-lg:          17px;
    --bu-fs-xl:          24px;
    --bu-fs-2xl:         28px;
    --bu-fs-3xl:         34px;
    --bu-fs-4xl:         64px;

    /* Radii */
    --bu-radius-sm:      6px;
    --bu-radius-md:      10px;
    --bu-radius-lg:      18px;
    --bu-radius-pill:    999px;

    /* Shadows */
    --bu-shadow-1:       0 1px 2px rgba(22, 36, 58, 0.06), 0 0 0 1px rgba(22, 36, 58, 0.04);
    --bu-shadow-2:       0 2px 6px rgba(22, 36, 58, 0.06), 0 8px 24px rgba(22, 36, 58, 0.08);
    /* ── Color: raw scale ──────────────────────────────────────────────────── */

    /* Slate (neutral) */
    --cb-color-slate-50:  #f8fafc;
    --cb-color-slate-100: #f1f5f9;
    --cb-color-slate-200: #e2e8f0;
    --cb-color-slate-300: #cbd5e1;
    --cb-color-slate-400: #94a3b8;
    --cb-color-slate-500: #64748b;
    --cb-color-slate-600: #475569;
    --cb-color-slate-700: #334155;
    --cb-color-slate-800: #1e293b;
    --cb-color-slate-900: #0f172a;

    /* Blue (primary brand) */
    --cb-color-blue-50:   #eff6ff;
    --cb-color-blue-100:  #dbeafe;
    --cb-color-blue-200:  #bfdbfe;
    --cb-color-blue-300:  #93c5fd;
    --cb-color-blue-400:  #60a5fa;
    --cb-color-blue-500:  #3b82f6;
    --cb-color-blue-600:  #2563eb;
    --cb-color-blue-700:  #1d4ed8;
    --cb-color-blue-800:  #1e40af;
    --cb-color-blue-900:  #1e3a8a;

    /* Green (success) */
    --cb-color-green-50:  #f0fdf4;
    --cb-color-green-100: #dcfce7;
    --cb-color-green-500: #22c55e;
    --cb-color-green-600: #16a34a;
    --cb-color-green-700: #15803d;

    /* Amber (warning) */
    --cb-color-amber-50:  #fffbeb;
    --cb-color-amber-100: #fef3c7;
    --cb-color-amber-500: #f59e0b;
    --cb-color-amber-600: #d97706;
    --cb-color-amber-700: #b45309;

    /* Red (danger / error) */
    --cb-color-red-50:    #fef2f2;
    --cb-color-red-100:   #fee2e2;
    --cb-color-red-500:   #ef4444;
    --cb-color-red-600:   #dc2626;
    --cb-color-red-700:   #b91c1c;

    /* Pure */
    --cb-color-white:     #ffffff;
    --cb-color-black:     #000000;

    /* ── Color: semantic ───────────────────────────────────────────────────── */

    /* Surfaces */
    --cb-bg:                   var( --cb-color-slate-50  );  /* page background */
    --cb-surface:              var( --cb-color-white     );  /* cards, panels */
    --cb-surface-raised:       var( --cb-color-white     );  /* modals, popovers */
    --cb-surface-subtle:       var( --cb-color-slate-100 );  /* striped rows, hover bg */

    /* Text */
    --cb-text-primary:         var( --cb-color-slate-900 );
    --cb-text-secondary:       var( --cb-color-slate-700 );
    --cb-text-muted:           var( --cb-color-slate-500 );
    --cb-text-inverse:         var( --cb-color-white     );

    /* Borders / dividers */
    --cb-border:               var( --cb-color-slate-200 );
    --cb-border-strong:        var( --cb-color-slate-300 );
    --cb-border-subtle:        var( --cb-color-slate-100 );

    /* Brand (operator-overridable on wizard / partner — semantic stays the same) */
    --cb-brand:                var( --cb-color-blue-600  );
    --cb-brand-hover:          var( --cb-color-blue-700  );
    --cb-brand-subtle:         var( --cb-color-blue-50   );
    --cb-brand-text:           var( --cb-color-blue-700  );
    --cb-on-brand:             var( --cb-color-white     );

    /* Status */
    --cb-success:              var( --cb-color-green-600 );
    --cb-success-subtle:       var( --cb-color-green-50  );
    --cb-success-text:         var( --cb-color-green-700 );

    --cb-warning:              var( --cb-color-amber-600 );
    --cb-warning-subtle:       var( --cb-color-amber-50  );
    --cb-warning-text:         var( --cb-color-amber-700 );

    --cb-danger:               var( --cb-color-red-600   );
    --cb-danger-hover:         var( --cb-color-red-700   );
    --cb-danger-subtle:        var( --cb-color-red-50    );
    --cb-danger-text:          var( --cb-color-red-700   );

    /* ── Spacing: 4px grid ─────────────────────────────────────────────────── */

    --cb-space-0:   0;
    --cb-space-1:   0.25rem;   /*  4px */
    --cb-space-2:   0.5rem;    /*  8px */
    --cb-space-3:   0.75rem;   /* 12px */
    --cb-space-4:   1rem;      /* 16px */
    --cb-space-5:   1.25rem;   /* 20px */
    --cb-space-6:   1.5rem;    /* 24px */
    --cb-space-8:   2rem;      /* 32px */
    --cb-space-10:  2.5rem;    /* 40px */
    --cb-space-12:  3rem;      /* 48px */
    --cb-space-16:  4rem;      /* 64px */
    --cb-space-20:  5rem;      /* 80px */

    /* ── Border radius ─────────────────────────────────────────────────────── */

    --cb-radius-none: 0;
    --cb-radius-sm:   0.25rem;  /* 4px */
    --cb-radius-md:   0.375rem; /* 6px — default for buttons + inputs */
    --cb-radius-lg:   0.5rem;   /* 8px — default for cards */
    --cb-radius-xl:   0.75rem;  /* 12px */
    --cb-radius-2xl:  1rem;     /* 16px */
    --cb-radius-full: 9999px;   /* pills, avatars */

    /* ── Shadows ───────────────────────────────────────────────────────────── */

    /* Shadow scale tuned for light backgrounds + minimal-modern feel.
     * `focus` is the focus-visible ring; never use box-shadow for non-focus rings. */
    --cb-shadow-none: none;
    --cb-shadow-sm:   0 1px 2px 0 rgba( 15, 23, 42, 0.04 );
    --cb-shadow-md:   0 1px 3px 0 rgba( 15, 23, 42, 0.06 ), 0 1px 2px -1px rgba( 15, 23, 42, 0.04 );
    --cb-shadow-lg:   0 4px 6px -1px rgba( 15, 23, 42, 0.08 ), 0 2px 4px -2px rgba( 15, 23, 42, 0.04 );
    --cb-shadow-xl:   0 10px 15px -3px rgba( 15, 23, 42, 0.10 ), 0 4px 6px -4px rgba( 15, 23, 42, 0.06 );
    --cb-shadow-focus: 0 0 0 3px rgba( 59, 130, 246, 0.35 );  /* blue-500 @ 35% */

    /* ── Typography ────────────────────────────────────────────────────────── */

    /* Font stack — Inter takes priority when locally installed (some operators have
     * it as a system font). Falls back to native system fonts so the plugin works
     * out of the box without shipping woff2 binaries. Operators who want guaranteed
     * Inter rendering can drop the woff2 files into assets/branding/fonts/ later. */
    --cb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --cb-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Type scale (tight, info-dense, but readable) */
    --cb-text-xs:   0.75rem;   /* 12px — meta text */
    --cb-text-sm:   0.8125rem; /* 13px — body small */
    --cb-text-base: 0.875rem;  /* 14px — body default */
    --cb-text-lg:   1rem;      /* 16px — large body */
    --cb-text-xl:   1.125rem;  /* 18px — section heading */
    --cb-text-2xl:  1.5rem;    /* 24px — page heading */
    --cb-text-3xl:  1.875rem;  /* 30px — display */

    /* Weight + line-height + letter spacing */
    --cb-font-weight-regular:  400;
    --cb-font-weight-medium:   500;
    --cb-font-weight-semibold: 600;
    --cb-font-weight-bold:     700;

    --cb-line-height-tight:    1.2;
    --cb-line-height-snug:     1.4;
    --cb-line-height-normal:   1.5;
    --cb-line-height-relaxed:  1.6;

    --cb-letter-spacing-tight: -0.01em;  /* headings */
    --cb-letter-spacing-wide:  0.025em;  /* small caps, labels */

    /* ── Motion ────────────────────────────────────────────────────────────── */

    --cb-duration-fast:    100ms;
    --cb-duration-base:    150ms;
    --cb-duration-medium:  200ms;
    --cb-duration-slow:    300ms;

    --cb-ease-standard:    cubic-bezier( 0.4, 0, 0.2, 1 );
    --cb-ease-in:          cubic-bezier( 0.4, 0, 1, 1 );
    --cb-ease-out:         cubic-bezier( 0, 0, 0.2, 1 );

    /* ── Z-index ───────────────────────────────────────────────────────────── */

    --cb-z-base:     0;
    --cb-z-dropdown: 1000;
    --cb-z-sticky:   1020;
    --cb-z-overlay:  1040;
    --cb-z-modal:    1050;
    --cb-z-toast:    1080;
}

/* ─────────────────────────────────────────────────────────────
 * Phase T — Customer wizard directions (BoatUP design system)
 *
 * Two directions replace the four Phase-S presets (ocean / sunset /
 * minimal / classic). Each direction re-declares every token the
 * wizard reads, scoped under [data-cb-direction] so the swap is a
 * single attribute on the wizard root with no residual state.
 *
 *   Harbor — warm editorial: Fraunces serif display + Inter body,
 *            terracotta accent on a cream/navy palette.
 *   Helm   — cool dense: Inter throughout, deep teal primary on a
 *            cool gray palette.
 *
 * Operators on the four old presets are migrated by
 * `class-settings.php::migrate_theme_preset_to_direction()` on
 * plugin load:
 *   ocean | sunset | classic | custom → harbor
 *   minimal                            → helm
 *
 * Live operator tweaks layer on top via [data-cb-density],
 * [data-cb-radius], [data-cb-btn], and an inline `--cb-scale` font
 * multiplier. See sections further down.
 * ───────────────────────────────────────────────────────────── */

/* Token consumers — the wizard reads these names today (build_wizard_css
 * and inline JSX), so direction blocks meet consumers where they live:
 *
 *   --cb-background  page bg              --cb-primary         brand
 *   --cb-card        card / popover bg    --cb-primary-rgb     "r, g, b"
 *   --cb-border      divider / input      --cb-primary-dark    hover
 *   --cb-text        body text            --cb-primary-light   subtle fill
 *   --cb-muted       muted text colour    --cb-accent          secondary brand
 *   --cb-surface-2   second surface tint  --cb-accent-soft     subtle accent fill
 *   --cb-display-font headings            --cb-font-family     body font
 *   --cb-btn-radius  button + input       --cb-card-radius     larger card corners
 *   --cb-density     padding multiplier   --cb-scale           font-size multiplier
 *
 * Admin UI keeps its own --cb-text-muted etc. in :root — there is
 * intentionally a two-namespace split between admin and wizard. */

/* Harbor — DEFAULT direction. Tokens emitted both with no attribute
 * (so existing wizards without the attr render as Harbor) and under
 * the explicit [data-cb-direction="harbor"] selector for clarity. */
.cb-booking-widget,
[data-cb-direction="harbor"] {
    --cb-background:   #f8f5ef;
    --cb-card:         #ffffff;
    --cb-surface-2:    #f0ebe1;
    --cb-border:       rgba(22, 36, 58, 0.10);
    --cb-text:         #16243a;
    --cb-muted:        #6b7689;
    --cb-primary:      #16243a;
    --cb-primary-rgb:  22, 36, 58;
    --cb-primary-dark: #0c1525;
    --cb-primary-light: rgba(22, 36, 58, 0.08);
    --cb-accent:       #c1683a;
    --cb-accent-rgb:   193, 104, 58;
    --cb-accent-soft:  #f3e3d6;
    --cb-display-font: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --cb-font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cb-btn-radius:   14px;
    --cb-card-radius:  22px;
}

[data-cb-direction="helm"] {
    --cb-background:   #f6f7f8;
    --cb-card:         #ffffff;
    --cb-surface-2:    #eef0f2;
    --cb-border:       rgba(13, 27, 34, 0.10);
    --cb-text:         #0d1b22;
    --cb-muted:        #5b6873;
    --cb-primary:      #0a6f6a;
    --cb-primary-rgb:  10, 111, 106;
    --cb-primary-dark: #075752;
    --cb-primary-light: rgba(10, 111, 106, 0.08);
    --cb-accent:       #d3791d;
    --cb-accent-rgb:   211, 121, 29;
    --cb-accent-soft:  #faecd7;
    --cb-display-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cb-font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cb-btn-radius:   14px;
    --cb-card-radius:  22px;
}

/* ── Live operator tweaks ─────────────────────────────────────
 *
 * These three attribute blocks override radius across the wizard,
 * which is the most user-visible tweak. Density is a multiplier
 * applied as a CSS variable that consumers (button heights, card
 * paddings, gaps) read via calc(). Font-scale is set inline on the
 * wizard root from JS (operator setting) — there's no preset block
 * for it, just the variable definition below.
 * ───────────────────────────────────────────────────────────── */

/* Density multiplier — defaults below; overrides via attribute */
.cb-booking-widget,
[data-cb-direction="harbor"],
[data-cb-direction="helm"] {
    --cb-density: 1;
    --cb-scale:   1;
}
[data-cb-density="compact"]     { --cb-density: 0.78; }
[data-cb-density="cozy"]        { --cb-density: 0.9;  }
[data-cb-density="comfortable"] { --cb-density: 1.1;  }

/* Radius tweak — overrides direction's btn + card radius */
[data-cb-radius="sharp"] {
    --cb-btn-radius:   4px;
    --cb-card-radius:  6px;
}
[data-cb-radius="rounded"] {
    --cb-btn-radius:   14px;
    --cb-card-radius:  22px;
}
[data-cb-radius="pill"] {
    --cb-btn-radius:   999px;
    --cb-card-radius:  28px;
}

/* Button-style tweak — soft and outline variants apply at the
 * component layer (booking.css reads --cb-btn-bg / --cb-btn-fg
 * accordingly). Filled is the default. */
[data-cb-btn="filled"] {
    --cb-btn-bg: var(--cb-primary);
    --cb-btn-fg: var(--cb-on-brand, #ffffff);
    --cb-btn-border: transparent;
}
[data-cb-btn="outline"] {
    --cb-btn-bg: transparent;
    --cb-btn-fg: var(--cb-primary);
    --cb-btn-border: var(--cb-primary);
}
[data-cb-btn="soft"] {
    --cb-btn-bg: rgba(var(--cb-primary-rgb), 0.12);
    --cb-btn-fg: var(--cb-primary);
    --cb-btn-border: transparent;
}

/* ─────────────────────────────────────────────────────────────────────
 * Inherit modes — opt the wizard out of its own colour or typography
 * tokens so the host theme bleeds through. Layout + spacing + radius
 * always come from the base tokens so the wizard doesn't break
 * structurally regardless of which (or both) inherit toggles are on.
 *
 * v2.18.0 — split into two independent attributes (was single
 * [data-cb-inherit="true"] block). The legacy attribute is kept as
 * a one-release alias that maps to "inherit both" so any external
 * CSS that depended on it doesn't break.
 * ───────────────────────────────────────────────────────────────────── */

/* Inherit fonts: typography only — colour palette stays branded. */
[data-cb-inherit-fonts="true"] {
    --cb-font-family:  inherit;
    --cb-display-font: inherit;
}

/* Inherit colours: bg/text/muted dissolve into the host theme. The
 * --cb-primary stays currentColor so links / CTAs still show contrast
 * even when the operator hasn't set a wizard_color_primary. Operator
 * colour overrides via build_wizard_css are NOT emitted in this mode
 * (build_wizard_css gates on wizard_inherit_theme_colors), so this
 * block is the source of truth for the inherited surfaces. */
[data-cb-inherit-colors="true"] {
    --cb-background:   transparent;
    --cb-card:         transparent;
    --cb-surface:      transparent;
    --cb-text:         inherit;
    --cb-muted:        inherit;
    --cb-primary:      currentColor;
    --cb-primary-rgb:  0, 0, 0;
    --cb-primary-dark: currentColor;
    --cb-primary-light:currentColor;
}

/* Legacy single-toggle alias — pre-v2.18.0 installs that wrote
 * data-cb-inherit="true" directly continue to inherit both. */
[data-cb-inherit="true"] {
    --cb-background:   transparent;
    --cb-card:         transparent;
    --cb-surface:      transparent;
    --cb-text:         inherit;
    --cb-muted:        inherit;
    --cb-primary:      currentColor;
    --cb-primary-rgb:  0, 0, 0;
    --cb-primary-dark: currentColor;
    --cb-primary-light:currentColor;
    --cb-display-font: inherit;
    --cb-font-family:  inherit;
}

/* ─────────────────────────────────────────────────────────────────────
 * G1 (v2.4.0) — Wizard chrome aliases.
 *
 * The Phase 7 handoff (Claude Design Batch G1) ships components that
 * reference a slightly different set of token names than the Phase T
 * `--bu-*` system that already lives above. Rather than rewrite every
 * `var(--bu-*)` reference inside the handoff CSS (and risk drifting from
 * Claude Design's source-of-truth files in `cruise-booking/docs/phase-7/g1-handoff/`),
 * we publish a thin alias bridge here. Five aliases + three net-new vars.
 *
 * If/when a future batch renames the existing `--bu-*` tokens to match
 * the handoff convention everywhere, this block can disappear.
 * ───────────────────────────────────────────────────────────────────── */
:root {
    /* Aliases — handoff name → existing canonical name */
    --bu-ink:          var(--bu-ink-1);          /* primary text colour */
    --bu-fs-base:      var(--bu-fs-md);          /* body font size */
    --bu-radius:       var(--bu-radius-md);      /* default corner radius */
    --bu-font-display: var(--bu-display);        /* display / heading font */
    --bu-font-body:    var(--bu-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
    --bu-font-mono:    var(--bu-mono);

    /* Net-new — values lifted from the G1 handoff tokens.css */
    --bu-step:         8px;                       /* spacing unit (multiplied in calc()) */
    --bu-pad-card:     calc(28px * var(--bu-density, 1));
    --bu-shadow-3:     0 24px 60px -20px rgba(22, 36, 58, .25);
}

/* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */
/*
 * Public embed shortcodes — catalog grid (v2.66.0, Phase A).
 *
 * LAYOUT / GRID / CARD / BADGE ONLY. Every colour, radius, font, and spacing
 * value flows from the shared `--cb-*` token system (tokens.css, scoped to
 * `.cb-booking-widget`). There are NO hardcoded hex colours here on purpose:
 *   - the operator's wizard palette (build_wizard_css overrides) applies,
 *   - host-theme inheritance ([data-cb-inherit-*]) dissolves colour/fonts
 *     into the surrounding page,
 *   - operator Custom CSS (scoped to .cb-booking-widget) layers on top.
 * Spacing reads the `--cb-density` multiplier so the embed honours the
 * operator's compact/cozy/comfortable choice exactly like the wizard does.
 *
 * The root carries both `.cb-booking-widget` (token host) and `.cb-embed`
 * (these layout rules). `.cb-embed` keeps the wizard's own block rules from
 * leaking onto the catalog — booking.css is not loaded on marketing pages.
 */

.cb-embed {
	--cb-embed-gap: calc(1.25rem * var(--cb-density, 1));
	--cb-embed-pad: calc(1.1rem * var(--cb-density, 1));
	max-width: 100%;
	margin: 0 auto;
	font-family: var(--cb-font-family, inherit);
	color: var(--cb-text, inherit);
	box-sizing: border-box;
}

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

/* ── Status / empty states ──────────────────────────────────────────────── */

.cb-embed-status {
	padding: var(--cb-embed-pad);
	border-radius: var(--cb-card-radius, 12px);
	background: var(--cb-surface-2, transparent);
	color: var(--cb-muted, inherit);
	font-size: 0.95rem;
}

.cb-embed-status--error {
	border: 1px solid var(--cb-border, currentColor);
	color: var(--cb-text, inherit);
}

.cb-embed-empty {
	text-align: center;
}

/* ── Grid ──────────────────────────────────────────────────────────────────
 * Default: responsive auto-fit so the grid reflows to the container width.
 * When the shortcode sets `columns` (1..4), useEmbedTheme writes
 * `--cb-embed-cols` on the root and the fixed template below takes over.
 * ────────────────────────────────────────────────────────────────────────── */

.cb-embed-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--cb-embed-gap);
}

.cb-embed[style*="--cb-embed-cols"] .cb-embed-grid {
	grid-template-columns: repeat(var(--cb-embed-cols), minmax(0, 1fr));
}

/* Collapse fixed columns to a single column on narrow viewports so a
 * `columns="4"` grid stays readable on phones. */
@media (max-width: 640px) {
	.cb-embed[style*="--cb-embed-cols"] .cb-embed-grid {
		grid-template-columns: 1fr;
	}
}

/* ── layout="list" (Phase D) ─────────────────────────────────────────────────
 * One card per row: the media floats left, body + footer stack to its right.
 * Implemented as a 2-col grid ON EACH CARD so the three flat card siblings
 * (media / body / footer) reposition with NO JSX change — media spans both
 * rows. The media column is `auto`, so a card with no image (or show="...")
 * collapses it to zero width instead of leaving a blank gutter.
 * ────────────────────────────────────────────────────────────────────────── */
.cb-embed-grid--list {
	grid-template-columns: 1fr;
}

/* When `columns` is also set, list still wins (single column of rows) — this
 * selector matches the cols rule's specificity and is defined later. */
.cb-embed[style*="--cb-embed-cols"] .cb-embed-grid--list {
	grid-template-columns: 1fr;
}

.cb-embed-grid--list .cb-embed-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"media body"
		"media footer";
	align-items: stretch;
}

.cb-embed-grid--list .cb-embed-card__media {
	grid-area: media;
	/* The `auto` first track sizes to this fixed width when a media element is
	 * present (the inner img fills it edge-to-edge) and collapses to 0 when it
	 * is absent. Do NOT add a percentage max-width here: inside an `auto` track
	 * it does not shrink the track, only the image, leaving a blank gutter. */
	width: 14rem;
	height: 100%;
	aspect-ratio: auto; /* fill the row height, not the 16/10 grid ratio */
}

.cb-embed-grid--list .cb-embed-card__body {
	grid-area: body;
}

.cb-embed-grid--list .cb-embed-card__footer {
	grid-area: footer;
}

/* Stack media back on top on narrow viewports so list rows stay readable. */
@media (max-width: 560px) {
	.cb-embed-grid--list .cb-embed-card {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"body"
			"footer";
	}
	.cb-embed-grid--list .cb-embed-card__media {
		width: auto;
		max-width: none;
		aspect-ratio: 16 / 10;
	}
}

/* ── layout="carousel" (Phase D) ─────────────────────────────────────────────
 * A single horizontal strip that scrolls with snap points — feature a row of
 * products without consuming vertical space. display:flex overrides the grid
 * (so any `columns` template is inert); each card has a fixed width and snaps
 * to the start. Works with touch / trackpad / scrollbar on every device.
 * ────────────────────────────────────────────────────────────────────────── */
.cb-embed-grid--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
}

.cb-embed-grid--carousel .cb-embed-card {
	flex: 0 0 auto;
	width: min(20rem, 80%);
	scroll-snap-align: start;
}

/* ── Card ──────────────────────────────────────────────────────────────────
 * A vertical card: media → body (title + desc + badges) → footer (price + CTA).
 * The footer is pushed to the bottom so cards in a row line up their CTAs even
 * when descriptions differ in length.
 * ────────────────────────────────────────────────────────────────────────── */

.cb-embed-card {
	display: flex;
	flex-direction: column;
	background: var(--cb-card, transparent);
	border: 1px solid var(--cb-border, currentColor);
	border-radius: var(--cb-card-radius, 16px);
	overflow: hidden;
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.cb-embed-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(var(--cb-primary-rgb, 0, 0, 0), 0.12);
	border-color: var(--cb-primary, currentColor);
}

.cb-embed-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cb-surface-2, transparent);
}

.cb-embed-card__img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.cb-embed-card__body {
	display: flex;
	flex-direction: column;
	gap: calc(0.5rem * var(--cb-density, 1));
	padding: var(--cb-embed-pad);
	flex: 1 1 auto;
}

.cb-embed-card__title {
	margin: 0;
	font-family: var(--cb-display-font, inherit);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cb-text, inherit);
}

.cb-embed-card__desc {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--cb-muted, inherit);
	/* Clamp the short description to a few lines so cards stay uniform; the
	 * full copy lives on the product page (Phase B). */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Tame block elements inside the rich-text short description so source
 * whitespace between tags doesn't blow the card height out. */
.cb-embed-card__desc > :first-child { margin-top: 0; }
.cb-embed-card__desc > :last-child  { margin-bottom: 0; }
.cb-embed-card__desc p,
.cb-embed-card__desc ul,
.cb-embed-card__desc ol { margin: 0.25rem 0; }

.cb-embed-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.cb-embed-badge {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	background: var(--cb-accent-soft, var(--cb-surface-2, transparent));
	color: var(--cb-accent, var(--cb-text, inherit));
}

.cb-embed-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(0.6rem * var(--cb-density, 1));
	padding: var(--cb-embed-pad);
	padding-top: 0;
	margin-top: auto;
}

/* ── Price badge ───────────────────────────────────────────────────────── */

.cb-embed-price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	white-space: nowrap;
	color: var(--cb-text, inherit);
}

.cb-embed-price__from {
	font-size: 0.8rem;
	color: var(--cb-muted, inherit);
}

.cb-embed-price__amount {
	font-size: 1.2rem;
	font-weight: 700;
}

.cb-embed-price--on-request {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--cb-muted, inherit);
}

/* ── CTA ───────────────────────────────────────────────────────────────────
 * Reads the wizard button tokens (--cb-btn-bg / --cb-btn-fg / --cb-btn-border)
 * so filled / outline / soft button styles + radius track the operator's
 * choice exactly like the wizard's primary buttons.
 * ────────────────────────────────────────────────────────────────────────── */

.cb-embed-card__cta {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border-radius: var(--cb-btn-radius, 10px);
	background: var(--cb-btn-bg, var(--cb-primary, currentColor));
	color: var(--cb-btn-fg, var(--cb-on-brand, currentColor));
	border: 1px solid var(--cb-btn-border, transparent);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.12s ease, transform 0.08s ease;
}

.cb-embed-card__cta:hover {
	filter: brightness(1.05);
	color: var(--cb-btn-fg, var(--cb-on-brand, currentColor));
}

.cb-embed-card__cta:active {
	transform: translateY(1px);
}

/* Host-theme colour inheritance (the default inherit="both") bleeds
 * --cb-primary → currentColor, so the filled button above collapses to
 * `background: currentColor` while its text is --cb-on-brand (#fff) — i.e. the
 * fill equals the text colour → an invisible white-on-white (or dark-on-dark)
 * button. A filled button can never escape this (its bg derives from a
 * currentColor value), so under inheritance render the CTA OUTLINED in the
 * host's OWN text colour — guaranteed to contrast with the host background on
 * any theme. inherit="none" (operator-branded) keeps the filled style above.
 *
 * The product page's Book CTA (.cb-embed-product__cta) is the SAME filled
 * button and would collapse the SAME way, so it shares this outlined override
 * (listed alongside the card CTA) — verified to survive the build below. */
[data-cb-inherit-colors="true"] .cb-embed-card__cta,
[data-cb-inherit-colors="true"] .cb-embed-product__cta {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

[data-cb-inherit-colors="true"] .cb-embed-card__cta:hover,
[data-cb-inherit-colors="true"] .cb-embed-product__cta:not(.cb-embed-product__cta--disabled):hover {
	color: inherit;
	background: rgba(127, 127, 127, 0.12);
	filter: none;
}

/* ── Product page ───────────────────────────────────────────────────────────
 * [cb_cruise_product]: gallery + body (facts + booking column). Two-column on
 * wide viewports (gallery left, facts/booking right), single-column on phones.
 * Colours/radii/fonts all flow from the same --cb-* tokens as the catalog.
 * ────────────────────────────────────────────────────────────────────────── */

/* Buy-box layout: image + facts flow in the main column while the booking
 * block (calendar + price + CTA) becomes a compact, sticky right rail. The
 * `__body` wrapper is dissolved with `display: contents` so FactsList
 * (.cb-embed-facts) and the booking rail (.cb-embed-product__booking) become
 * direct grid items of the product grid — no JSX change needed. The rail is
 * width-capped so it hugs the calendar instead of stretching the booking card
 * to the full column width (which splayed the calendar's month-nav and left a
 * large empty void beside the short image column). */
.cb-embed-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(20rem, 22rem);
	grid-template-areas:
		"media   booking"
		"facts   booking";
	gap: calc(1.5rem * var(--cb-density, 1));
	align-items: start;
}

@media (max-width: 860px) {
	.cb-embed-product {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"facts"
			"booking";
	}
}

.cb-embed-product__media {
	grid-area: media;
	min-width: 0;
}

/* Dissolve the body wrapper so its children join the product grid directly. */
.cb-embed-product__body {
	display: contents;
}

.cb-embed-facts {
	grid-area: facts;
	min-width: 0;
}

/* ── Gallery ───────────────────────────────────────────────────────────── */

.cb-embed-gallery__hero {
	margin: 0;
	border-radius: var(--cb-card-radius, 16px);
	overflow: hidden;
	background: var(--cb-surface-2, transparent);
	aspect-ratio: 16 / 10;
}

.cb-embed-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.cb-embed-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.cb-embed-gallery__thumb {
	width: 4rem;
	height: 3rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--cb-card-radius, 8px);
	overflow: hidden;
	background: var(--cb-surface-2, transparent);
	cursor: pointer;
}

.cb-embed-gallery__thumb--active {
	border-color: var(--cb-primary, currentColor);
}

.cb-embed-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* ── Facts ─────────────────────────────────────────────────────────────── */

.cb-embed-facts__title {
	margin: 0 0 0.35rem;
	font-family: var(--cb-display-font, inherit);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cb-text, inherit);
}

.cb-embed-facts__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.5rem;
}

.cb-embed-facts__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 0.75rem;
}

.cb-embed-facts__row {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.cb-embed-facts__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cb-muted, inherit);
}

.cb-embed-facts__value {
	margin: 0;
	font-size: 0.98rem;
	color: var(--cb-text, inherit);
}

.cb-embed-facts__desc {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--cb-text, inherit);
}

.cb-embed-facts__desc > :first-child { margin-top: 0; }
.cb-embed-facts__desc > :last-child  { margin-bottom: 0; }

/* ── Booking column (calendar + price + CTA) ───────────────────────────── */

.cb-embed-product__booking {
	grid-area: booking;
	position: sticky;
	top: 1rem;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: calc(0.8rem * var(--cb-density, 1));
	padding: var(--cb-embed-pad);
	border: 1px solid var(--cb-border, currentColor);
	border-radius: var(--cb-card-radius, 16px);
	background: var(--cb-card, transparent);
}

/* Single-column: drop the sticky rail and cap the card so the calendar keeps a
 * sensible size instead of stretching edge-to-edge on a phone/tablet. */
@media (max-width: 860px) {
	.cb-embed-product__booking {
		position: static;
		max-width: 24rem;
	}
}

/* The inline calendar fills the booking rail (override the picker's 18rem cap)
 * so days distribute evenly across the rail width via the inline grid rules in
 * DatePicker.css. */
.cb-embed-calendar .cb-datepicker {
	width: 100%;
	max-width: none;
}

/* The bookable-day modifier the calendar feeds via modifiersClassNames.
 * react-day-picker v9 lands this class on the .rdp-day cell — give the
 * available days a subtle brand accent so they stand out from the disabled
 * (greyed) days. Tokens only; collapses gracefully under host inheritance. */
.cb-day--bookable:not([disabled]) .rdp-day_button {
	font-weight: 700;
	color: var(--cb-primary, inherit);
}

.cb-embed-pricepanel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.cb-embed-pricepanel__pax {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.cb-embed-pricepanel__pax-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cb-muted, inherit);
}

.cb-embed-pricepanel__pax-input {
	width: 5rem;
	padding: 0.4rem 0.6rem;
	font-size: 1rem;
	color: var(--cb-text, inherit);
	background: var(--cb-surface, transparent);
	border: 1px solid var(--cb-border, currentColor);
	border-radius: var(--cb-input-radius, 8px);
}

.cb-embed-pricepanel__price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	white-space: nowrap;
	color: var(--cb-text, inherit);
}

.cb-embed-pricepanel__total-label {
	font-size: 0.8rem;
	color: var(--cb-muted, inherit);
}

.cb-embed-pricepanel__loading {
	font-size: 0.9rem;
	color: var(--cb-muted, inherit);
}

/* ── Rental price panel (skipper toggle) ─────────────────────────────────────
 * [cb_rental_product] has no pax input — instead an optional skipper toggle
 * (shown only when the offering exposes a skipper surcharge). Reuses the same
 * pricepanel container; the toggle sits on the left, the total on the right,
 * matching the cruise pax-input layout. Tokens only (no hardcoded colours) so
 * host-theme inheritance + operator palette apply identically.
 * ────────────────────────────────────────────────────────────────────────── */

.cb-embed-pricepanel__skipper {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	font-size: 0.92rem;
	color: var(--cb-text, inherit);
}

.cb-embed-pricepanel__skipper-input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--cb-primary, currentColor);
	cursor: pointer;
}

.cb-embed-pricepanel__skipper-input:disabled {
	cursor: default;
}

/* ── Book CTA ──────────────────────────────────────────────────────────────
 * Same filled-button token contract as the catalog card CTA (so it inherits
 * the outlined-under-inherit override above). Full-width on the product page.
 * ────────────────────────────────────────────────────────────────────────── */

.cb-embed-product__cta {
	display: block;
	width: 100%;
	padding: 0.7rem 1.1rem;
	text-align: center;
	border-radius: var(--cb-btn-radius, 10px);
	background: var(--cb-btn-bg, var(--cb-primary, currentColor));
	color: var(--cb-btn-fg, var(--cb-on-brand, currentColor));
	border: 1px solid var(--cb-btn-border, transparent);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.12s ease, transform 0.08s ease;
}

.cb-embed-product__cta:not(.cb-embed-product__cta--disabled):hover {
	filter: brightness(1.05);
	color: var(--cb-btn-fg, var(--cb-on-brand, currentColor));
}

.cb-embed-product__cta:not(.cb-embed-product__cta--disabled):active {
	transform: translateY(1px);
}

.cb-embed-product__cta--disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}