/* 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;
}

/* ── 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) .rdp-root,
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-root * {
	box-sizing: border-box;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .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) .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) .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) .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) .rdp-nav {
	display: contents;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_previous,
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .rdp-button_previous { order: -1; }
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_next     { order: 1;  }

:is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_previous:hover:not([disabled]),
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .rdp-button_previous[disabled],
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-button_next[disabled] {
	opacity: 0.3;
	cursor: default;
}

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

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

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

:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .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) .rdp-day_button:hover:not([disabled]) {
	border-color: var( --cb-text, #222222 );
	background: transparent;
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .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) .rdp-day.rdp-selected .rdp-day_button,
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day.rdp-range_start .rdp-day_button,
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .rdp-day.rdp-selected .rdp-day_button:hover,
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-day.rdp-range_start .rdp-day_button:hover,
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .rdp-disabled .rdp-day_button,
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .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) .rdp-disabled .rdp-day_button:hover,
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .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) .rdp-range_middle {
	background: var( --cb-surface-2, #f0f0f0 );
}

:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .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) .rdp-range_start {
	background: linear-gradient( to right, transparent 50%, var( --cb-surface-2, #f0f0f0 ) 50% );
}
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .rdp-range_start.rdp-range_end {
	background: transparent;
}

[dir="rtl"] :is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .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) .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) .rdp-months {
		flex-direction: column;
		gap: 1.5rem;
	}

	:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .rdp-day_button {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 0.85rem;
	}

	:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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.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) .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) .rdp-dropdowns {
	display: flex;
	gap: 0.5rem;
	flex: 1;
	justify-content: center;
}
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .rdp-dropdown_root {
	position: relative;
}
:is(.cb-datepicker__popover, .cb-datepicker__sheet) .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) .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):has(.rdp-dropdowns) .rdp-disabled:not(.rdp-outside) .rdp-day_button {
	background-image: none;
	color: var( --cb-muted, #9ba3b3 );
	opacity: 0.55;
}

/* Copyright (c) 2026 ADS Solutions. See LICENSE.txt for dual-license terms. */
/*
 * Availability search shortcode.
 *
 * Standalone scoping — every selector starts with .cb-avail-search so it
 * can't leak into the host theme. Inherits the wizard's brand tokens
 * (--cb-primary, --cb-primary-dark) when the booking-wizard styles are
 * loaded on the same page; otherwise falls back to the previous defaults.
 * This lets a customer's visual journey from search → wizard feel
 * continuous without operators needing to set up theme variables.
 */

.cb-avail-search {
	/* Brand tokens — defer to the wizard's --cb-primary if present, else the previous defaults. */
	--cba-primary:      var(--cb-primary, #0ea5e9);
	--cba-primary-dark: var(--cb-primary-dark, #0284c7);
	--cba-primary-fg:   #ffffff;
	--cba-text:         #1f2937;
	--cba-muted:        #6b7280;
	--cba-border:       #e5e7eb;
	--cba-bg:           #ffffff;
	--cba-bg-soft:      #f9fafb;
	--cba-radius:       0.5rem;
	--cba-radius-lg:    0.75rem;
	--cba-shadow:       0 1px 3px rgba(0,0,0,0.06);
	--cba-shadow-hover: 0 6px 18px rgba(0,0,0,0.10);
	font-family: inherit;
	color: var(--cba-text);
}

/* Dark theme override — set via data-cb-theme="dark" or auto-detect via
 * prefers-color-scheme. */
.cb-avail-search.cb-theme-dark,
.cb-avail-search.cb-theme-auto[data-prefers-dark="true"] {
	--cba-text:       #f3f4f6;
	--cba-muted:      #9ca3af;
	--cba-border:     #374151;
	--cba-bg:         #1f2937;
	--cba-bg-soft:    #111827;
}

/* Filter form ------------------------------------------------------------- */

.cb-avail-search__form {
	background: var(--cba-bg-soft);
	border: 1px solid var(--cba-border);
	border-radius: var(--cba-radius);
	padding: 1rem;
	margin-bottom: 1rem;
}

.cb-avail-search__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	align-items: end;
}

.cb-avail-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cb-avail-search__field label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cba-muted);
}

.cb-avail-search__field input,
.cb-avail-search__field select {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--cba-border);
	border-radius: var(--cba-radius);
	font-size: 0.95rem;
	background: var(--cba-bg);
	color: var(--cba-text);
}

.cb-avail-search__field--submit button {
	background: linear-gradient(135deg, var(--cba-primary), var(--cba-primary-dark));
	color: var(--cba-primary-fg);
	border: none;
	padding: 0.6rem 1.4rem;
	border-radius: var(--cba-radius);
	font-weight: 600;
	cursor: pointer;
	font-size: 0.95rem;
	transition: filter 0.12s ease, transform 0.08s ease;
	box-shadow: var(--cba-shadow);
}

.cb-avail-search__field--submit button:hover:not(:disabled) {
	filter: brightness(1.05);
}

.cb-avail-search__field--submit button:active:not(:disabled) {
	transform: translateY(1px);
}

.cb-avail-search__field--submit button:disabled {
	opacity: 0.65;
	cursor: wait;
}

/* Wizard's DatePicker inputs (.rdp-button) sit inside the field; tighten
 * spacing so they don't overflow the form row. */
.cb-avail-search__datepicker {
	width: 100%;
}

/* Status messages --------------------------------------------------------- */

.cb-avail-search__status,
.cb-avail-search__error,
.cb-avail-search__empty,
.cb-avail-search__count {
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
	border-radius: var(--cba-radius);
}

.cb-avail-search__status {
	background: var(--cba-bg-soft);
	color: var(--cba-muted);
}

.cb-avail-search__error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.cb-avail-search__empty {
	background: var(--cba-bg-soft);
	color: var(--cba-text);
}

.cb-avail-search__empty p {
	margin: 0.5rem 0 0 0;
	color: var(--cba-muted);
	font-size: 0.9rem;
}

.cb-avail-search__count {
	color: var(--cba-muted);
	font-size: 0.875rem;
	padding: 0.5rem 0;
	background: transparent;
}

/* Results grid ------------------------------------------------------------ */

.cb-avail-search__results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.cb-avail-search__card {
	background: var(--cba-bg);
	border: 1px solid var(--cba-border);
	border-radius: var(--cba-radius-lg);
	padding: 1.1rem 1.1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-shadow: var(--cba-shadow);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.cb-avail-search__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--cba-shadow-hover);
	border-color: var(--cba-primary);
}

.cb-avail-search__card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.85rem;
	color: var(--cba-muted);
}

.cb-avail-search__card-date {
	font-weight: 600;
	color: var(--cba-text);
}

.cb-avail-search__card-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cba-text);
}

.cb-avail-search__card-meta {
	display: flex;
	gap: 1rem;
	font-size: 0.85rem;
	color: var(--cba-muted);
	flex-wrap: wrap;
}

.cb-avail-search__card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--cba-border);
	/* v2.39.0 — Allow the price + actions row to wrap to two lines on narrow
	 * result columns (rental cards with €2700.00 + "Details" + "Book now" can't
	 * fit a 280px column). Children below still keep `white-space: nowrap` so
	 * text inside each element never breaks mid-word. */
	flex-wrap: wrap;
}

.cb-avail-search__card-price {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--cba-text);
	white-space: nowrap;
}

.cb-avail-search__card-cta {
	background: linear-gradient(135deg, var(--cba-primary), var(--cba-primary-dark));
	color: var(--cba-primary-fg);
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: var(--cba-radius);
	font-weight: 600;
	font-size: 0.9rem;
	transition: filter 0.12s ease, transform 0.08s ease;
	/* v2.39.0 — Never break "Book now →" across two lines. */
	white-space: nowrap;
}

.cb-avail-search__card-cta:hover {
	filter: brightness(1.05);
	color: var(--cba-primary-fg);
}

.cb-avail-search__card-cta:active {
	transform: translateY(1px);
}

/* v2.35.0 — Details button + actions wrapper.
 * The card footer now holds two buttons (Details + Book now) so we wrap
 * them in a flex container; the price stays on the left.
 */
.cb-avail-search__card-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.cb-avail-search__card-details {
	background: transparent;
	color: var(--cba-primary);
	border: 1px solid var(--cba-primary);
	padding: 0.45rem 0.85rem;
	border-radius: var(--cba-radius);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
	/* v2.39.0 — Keep "Details" on a single line. */
	white-space: nowrap;
}

.cb-avail-search__card-details:hover {
	background: var(--cba-primary);
	color: var(--cba-primary-fg);
}

.cb-avail-search__card-details:active {
	transform: translateY(1px);
}

/* v2.35.0 — Modal styles (backdrop + dialog).
 * Fixed overlay that covers the page; high z-index so it sits above WP
 * theme widgets / admin bar. Backdrop click closes; inner click-stop
 * keeps the dialog open. Scrollable body so long descriptions don't
 * push the dialog off-screen on short viewports.
 */
.cb-avail-search__modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 999998;
	animation: cb-avail-search__fade-in 0.14s ease;
}

@keyframes cb-avail-search__fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cb-avail-search__modal {
	background: var(--cba-bg);
	color: var(--cba-text);
	border-radius: var(--cba-radius-lg);
	max-width: 560px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	box-shadow: 0 16px 40px rgba(0,0,0,0.25);
	position: relative;
	padding: 1.5rem 1.5rem 1.25rem;
}

.cb-avail-search__modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.85rem;
	background: transparent;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--cba-muted);
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: var(--cba-radius);
}

.cb-avail-search__modal-close:hover {
	background: var(--cba-bg-soft);
	color: var(--cba-text);
}

.cb-avail-search__modal-header {
	margin-bottom: 1rem;
}

.cb-avail-search__modal-eyebrow {
	font-size: 0.8rem;
	color: var(--cba-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.3rem;
}

.cb-avail-search__modal-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--cba-text);
}

.cb-avail-search__modal-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.cb-avail-search__modal-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.6rem;
	padding: 0.75rem;
	background: var(--cba-bg-soft);
	border-radius: var(--cba-radius);
	border: 1px solid var(--cba-border);
}

.cb-avail-search__modal-fact {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.cb-avail-search__modal-fact-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cba-muted);
	font-weight: 600;
}

.cb-avail-search__modal-fact-value {
	font-size: 0.95rem;
	color: var(--cba-text);
}

.cb-avail-search__modal-description {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--cba-text);
	white-space: pre-line;
}
/* v2.43.6 fix — block elements override pre-line so source whitespace
   between tags doesn't pad list items / paragraphs. */
.cb-avail-search__modal-description ul,
.cb-avail-search__modal-description ol,
.cb-avail-search__modal-description li,
.cb-avail-search__modal-description p,
.cb-avail-search__modal-description h1,
.cb-avail-search__modal-description h2,
.cb-avail-search__modal-description h3,
.cb-avail-search__modal-description h4,
.cb-avail-search__modal-description h5,
.cb-avail-search__modal-description h6,
.cb-avail-search__modal-description blockquote {
	white-space: normal;
}
.cb-avail-search__modal-description li > p {
	margin: 0;
}

/* v2.43.6 — rich-text descriptions in the search-result detail modal.
   Compact spacing tuned for mobile, matches .cb-detail-desc. */
.cb-avail-search__modal-description h1,
.cb-avail-search__modal-description h2 {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0.4rem 0 0.05rem;
}
.cb-avail-search__modal-description h3 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0.3rem 0 0.05rem;
}
.cb-avail-search__modal-description h4 {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0.25rem 0 0.05rem;
}
.cb-avail-search__modal-description p {
	margin: 0.15rem 0;
}
.cb-avail-search__modal-description ul,
.cb-avail-search__modal-description ol {
	margin: 0.15rem 0;
	padding-left: 1.5rem;
}
.cb-avail-search__modal-description li {
	margin: 0;
}
.cb-avail-search__modal-description strong,
.cb-avail-search__modal-description b {
	font-weight: 600;
}
.cb-avail-search__modal-description em,
.cb-avail-search__modal-description i {
	font-style: italic;
}
.cb-avail-search__modal-description blockquote {
	margin: 0.4rem 0;
	padding-left: 0.75rem;
	border-left: 3px solid var(--cba-border, #cbd5e1);
	color: var(--cba-muted);
}
.cb-avail-search__modal-description a {
	color: var(--cba-accent);
	text-decoration: underline;
}
.cb-avail-search__modal-description hr {
	margin: 1rem 0;
	border: none;
	border-top: 1px solid var(--cba-border, #e2e8f0);
}

/* v2.43.6 — whole-card clickable info area on the search result card. */
.cb-avail-search__card-clickable {
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 120ms ease;
}
.cb-avail-search__card-clickable:hover {
	background: var(--cba-card-hover, rgba(15, 23, 42, 0.025));
}
.cb-avail-search__card-clickable:focus-visible {
	outline: 2px solid var(--cba-accent, #0369a1);
	outline-offset: 2px;
}

.cb-avail-search__modal-description--empty {
	color: var(--cba-muted);
	font-style: italic;
}

.cb-avail-search__modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--cba-border);
}

.cb-avail-search__modal-secondary {
	background: var(--cba-bg);
	color: var(--cba-text);
	border: 1px solid var(--cba-border);
	padding: 0.5rem 1rem;
	border-radius: var(--cba-radius);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
}

.cb-avail-search__modal-secondary:hover {
	background: var(--cba-bg-soft);
}

.cb-avail-search__modal-fact-note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.75rem;
	color: var(--cba-muted);
	font-weight: 500;
}

/* v2.36.0 (Phase 3) — Rental card variant.
 * Rental cards reuse the cruise-card shell; the variant modifier adds a
 * subtle left-border accent + tinted header so customers can scan-sort
 * cruises vs. rentals at a glance without us inventing a separate card
 * shape. The RENTAL tag pill in the header doubles as a visual anchor.
 */
.cb-avail-search__card--rental {
	border-left: 4px solid var(--cba-primary);
}

.cb-avail-search__card-tag {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	background: var(--cba-primary);
	color: var(--cba-primary-fg);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	border-radius: 999px;
	text-transform: uppercase;
}

.cb-avail-search__card-price-note {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.75rem;
	color: var(--cba-muted);
	font-weight: 500;
	/* v2.39.0 — "€450.00 / day" must stay on one line. */
	white-space: nowrap;
}