/**
 * Formidable Bookings — the Booking field (front end + builder preview mock).
 *
 * THE RULE (1.53.0): this field takes its colours, radius and type from the
 * form's own Formidable style, and hard-codes nothing that a style can express.
 *
 * Core writes every style setting onto the form wrapper as a CSS custom
 * property, named from its settings key with underscores swapped for dashes
 * (FrmStylesHelper::output_vars) — so `--bg-color`, `--text-color`,
 * `--border-color`, `--border-radius`, `--submit-bg-color` and friends are
 * already in scope by inheritance wherever this field renders.
 *
 * Everything below therefore reads through ONE token layer declared on the
 * field root: token -> core style variable -> literal fallback. Two reasons:
 *
 *  1. Core only emits a variable when its value DIFFERS from the style default
 *     (FrmStylesHelper::should_add_css_var), so a bare var() with no fallback
 *     silently resolves to nothing on a stock style. Every token carries one.
 *  2. It is the single seam the Bookings section of the styler overrides
 *     (see FrmBookStyleController) — that section sets these tokens and
 *     nothing else, so it can never fight the rules below.
 *
 * No @media (prefers-color-scheme) here on purpose: this field lives inside
 * somebody else's form on somebody else's page. Inheriting their style is
 * always more correct than guessing at a dark mode they may not have.
 */

.frmbook-booking-field {
	/* Surfaces and ink, inherited from the form's fields. */
	--frmbook-surface: var( --bg-color, #fff );
	--frmbook-ink: var( --text-color, #2c3338 );
	--frmbook-line: var( --border-color, #dcdfe4 );
	--frmbook-radius: var( --border-radius, 6px );

	/* The accent is the form's own primary action — its submit button — so a
	   chosen day reads as "this is the thing you just did" in the site's hue. */
	--frmbook-accent: var( --submit-bg-color, #4199fd );
	--frmbook-accent-ink: var( --submit-text-color, #fff );

	/* Derived, and overridable wholesale by the styler section. `color-mix` is
	   progressively enhanced: browsers without it keep the flat fallback, which
	   is why each is declared as its own token rather than inlined. */
	--frmbook-muted: color-mix( in srgb, var( --frmbook-ink ) 55%, transparent );
	--frmbook-hover: color-mix( in srgb, var( --frmbook-accent ) 12%, transparent );
	--frmbook-ring: color-mix( in srgb, var( --frmbook-accent ) 35%, transparent );

	--frmbook-gap: 10px;

	display: flex;
	flex-direction: column;
	gap: var( --frmbook-gap );
}

/* A hidden part keeps its inputs (and their values) in the form — it is a
   layout hide only, never disabled. */
.frmbook-part-hidden {
	display: none;
}

/* The part titles carry core's own `frm_primary_label`, so their font, size and
   weight come from the form's Formidable style — NOT from here. 1.50.x set them
   itself and they matched no other label on the page (1.51.0, reported).
   Blank labels are not rendered at all, so nothing here can leave a gap. */
.frmbook-part > .frm_primary_label {
	display: block;
}

/* The picker's own "Until" caption. Not a field title — it stays styled here. */
.frmbook-picker-end-label {
	color: var( --frmbook-muted );
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 4px;
}

.frmbook-field-select {
	max-width: 100%;
}

/* --- Picker card ------------------------------------------------------ */

/*
 * Type is INHERITED unless the styler says otherwise: --frmbook-font-size and
 * --frmbook-font-weight are only ever set by the Booking Calendar section, and
 * their fallback is `inherit`, so by default the calendar reads in whatever the
 * form's own style already established.
 */
.frmbook-picker {
	background: var( --frmbook-surface );
	border: 1px solid var( --frmbook-line );
	border-radius: var( --frmbook-radius );
	color: var( --frmbook-ink );
	font-size: var( --frmbook-font-size, inherit );
	max-width: 420px;
	padding: 14px;
}

.frmbook-picker-status {
	color: var( --frmbook-muted );
	margin: 6px 0;
}

/* --- Month bar -------------------------------------------------------- */

.frmbook-picker-monthbar {
	align-items: center;
	display: flex;
	gap: 6px;
	justify-content: space-between;
	margin-bottom: 10px;
}

.frmbook-picker-monthbar strong {
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-align: center;
}

/*
 * Ghost buttons: at rest the month arrows are just glyphs, so the eye goes to
 * the grid. They gain a surface only on hover/focus, where they are being used.
 */
.frmbook-picker-nav {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-size: 1.2em;
	height: 30px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 0.15s ease;
	width: 30px;
}

.frmbook-picker-nav:hover:not( :disabled ),
.frmbook-picker-nav:focus-visible {
	background: var( --frmbook-hover );
}

/*
 * The month arrows meet the same 44px touch bar the day buttons set for
 * themselves (design QA, 2026-08-20): at 390px the days resize to exactly
 * 44x44 while these stayed 30x30 -- the field's most-tapped control missing
 * its own standard. Padding carries the difference; the icon stays its size.
 * Coarse-pointer rather than a width query, because a small window on a
 * mouse machine does not need fat targets.
 */
@media ( pointer: coarse ) {
	.frmbook-picker-nav {
		min-width: 44px;
		min-height: 44px;
	}
}

.frmbook-picker-nav:disabled {
	cursor: default;
	opacity: 0.35;
}

/* --- Day grid --------------------------------------------------------- */

.frmbook-picker-grid {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat( 7, 1fr );
}

/*
 * Weekday initials (1.53.0). A month grid with no column headings makes the
 * reader count columns to find a Saturday. Muted and small: they are a key to
 * the grid, not part of it.
 */
.frmbook-picker-weekday {
	color: var( --frmbook-muted );
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding-bottom: 6px;
	text-align: center;
	text-transform: uppercase;
}

/*
 * Borderless day cells. Thirty-odd bordered boxes read as a spreadsheet; the
 * grid's structure comes from alignment and whitespace instead, leaving colour
 * free to mean something (available / chosen / waitlist).
 */
/*
 * min-height, not just aspect-ratio: the cells are grid tracks, so their size
 * follows the container's width, and a narrow form (a sidebar, a phone in
 * portrait) shrinks them below a usable tap target. 44px is the figure the
 * booking-calendar guidance settles on, and it is a FLOOR — a roomy form still
 * gets square cells from the aspect-ratio above it.
 */
.frmbook-picker-day {
	align-items: center;
	aspect-ratio: 1 / 1;
	min-height: 44px;
	min-width: 44px;
	background: none;
	border: 1px solid transparent;
	border-radius: var( --frmbook-radius );
	color: inherit;
	cursor: pointer;
	display: flex;
	font-variant-numeric: tabular-nums;
	font-weight: var( --frmbook-font-weight, inherit );
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
	width: 100%;
}

.frmbook-picker-day:hover:not( :disabled ):not( .is-selected ) {
	background: var( --frmbook-hover );
}

/*
 * An unavailable day is FILLED, and keeps its normal text colour (1.57.0).
 * Grey text alone was too easy to miss — a customer scanning for a free date
 * has to compare shades of the same number to find one. A block of colour
 * reads at a glance, and leaving the number at full contrast keeps the date
 * itself legible instead of trading readability for the signal.
 *
 * Not crossed out, though: strike-through reads as an error the customer
 * caused, when it only means "nothing free here".
 *
 * This is the one colour with a DEFAULT rather than an inherited value — no
 * form style setting means "a date you cannot book" — and it is used flat,
 * with no opacity on top, so the colour somebody picks is the colour they get.
 */
.frmbook-picker-day:disabled {
	background: var( --frmbook-unavailable-bg, #eaecf0 );
	cursor: default;
}

/* Full-but-waitlistable days stay selectable, and say so with a ring rather
   than a fill, which is reserved for the day actually chosen. */
.frmbook-picker-day-full:not( :disabled ) {
	border-color: var( --frmbook-ring );
	border-style: dashed;
}

/*
 * The chosen day follows the styler's weight when one is set, and is 600 when
 * it is not. A fixed 600 here would render the selection LIGHTER than its
 * neighbours on a form whose calendar weight is bolder than that.
 */
.frmbook-picker-day.is-selected {
	background: var( --frmbook-accent );
	border-color: var( --frmbook-accent );
	color: var( --frmbook-accent-ink );
	font-weight: var( --frmbook-font-weight, 600 );
}

/*
 * Day-mode range (1.62.0). The two ends carry the accent like any chosen day;
 * the nights between get a tinted band so the STAY reads as one object rather
 * than as a row of separately-selected dates.
 *
 * colour-mix with transparent rather than a second custom property: the band
 * must follow whatever accent the styler sets, and a hard-coded tint would
 * clash on every form that changed it.
 */
.frmbook-picker-day.is-range-start,
.frmbook-picker-day.is-range-end {
	background: var( --frmbook-accent );
	border-color: var( --frmbook-accent );
	color: var( --frmbook-accent-ink );
	font-weight: var( --frmbook-font-weight, 600 );
}

.frmbook-picker-day.is-in-range {
	background: color-mix( in srgb, var( --frmbook-accent ) 18%, transparent );
	border-color: transparent;
}

/*
 * A date an existing stay departs on: bookable as a departure, never as an
 * arrival. The diagonal says "half of this day is spoken for" without needing a
 * legend, which is the convention every hotel picker uses.
 */
.frmbook-picker-day-checkout:not( :disabled ) {
	background: linear-gradient(
		135deg,
		transparent 0 46%,
		var( --frmbook-ring ) 46% 54%,
		transparent 54% 100%
	);
}

.frmbook-picker-nights {
	color: var( --frmbook-muted );
	font-size: 0.85em;
	margin: 4px 0 0;
	min-height: 1.2em; /* Reserved so the grid does not jump as the count appears. */
}

.frmbook-picker-hint {
	color: var( --frmbook-muted );
	font-size: 0.85em;
	margin: 10px 0 4px;
}

/* --- Slots ------------------------------------------------------------ */

/*
 * A GRID, not wrapped flex: times are uniform in length, so equal columns line
 * them up into something scannable instead of a ragged run of pills.
 */
.frmbook-slots {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat( auto-fill, minmax( 88px, 1fr ) );
	margin-top: 12px;
}

.frmbook-slot {
	background: var( --frmbook-surface );
	border: 1px solid var( --frmbook-line );
	border-radius: var( --frmbook-radius );
	color: inherit;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	font-weight: var( --frmbook-font-weight, inherit );
	padding: 8px 6px;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.frmbook-slot:hover:not( .is-selected ) {
	background: var( --frmbook-hover );
	border-color: var( --frmbook-accent );
}

.frmbook-slot.is-selected {
	background: var( --frmbook-accent );
	border-color: var( --frmbook-accent );
	color: var( --frmbook-accent-ink );
	font-weight: var( --frmbook-font-weight, 600 );
}

/* A full slot on a waitlist form: selectable, but visibly not a normal slot. */
.frmbook-slot-waitlist {
	border-style: dashed;
	color: var( --frmbook-muted );
	font-size: 0.9em;
}

/* One focus treatment for every control in the field, in the form's own hue. */
.frmbook-picker-day:focus-visible,
.frmbook-slot:focus-visible,
.frmbook-picker-nav:focus-visible,
.frmbook-picker-endday:focus-visible {
	outline: 2px solid var( --frmbook-accent );
	outline-offset: 2px;
}

.frmbook-picker-end {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.frmbook-picker-endday {
	background: none;
	border: none;
	color: var( --frmbook-accent );
	cursor: pointer;
	font-size: 0.85em;
	padding: 0;
	text-decoration: underline;
}

/* Motion is decoration here; anyone who has asked for less gets none. */
@media ( prefers-reduced-motion: reduce ) {
	.frmbook-picker-day,
	.frmbook-picker-nav,
	.frmbook-slot {
		transition: none;
	}
}

/*
 * Announced, never shown (1.52.0). `clip` rather than display:none or
 * visibility:hidden — both of those remove the node from the accessibility
 * tree, and a live region that is not in the tree announces nothing, which
 * would silently cost non-sighted users their only confirmation of the choice.
 */
.frmbook-sr-only {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* --- Builder preview mock -------------------------------------------- */

.frmbook-picker-mock-grid {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat( 7, 1fr );
}

.frmbook-picker-mock-day {
	background: var( --frmbook-hover, rgba( 0, 0, 0, 0.07 ) );
	border-radius: 4px;
	height: 18px;
}

/* The time-zone disclosure (QA F-1): quiet, tertiary, at the picker's foot. */
.frmbook-picker-tznote {
	color: var( --frmbook-muted );
	font-size: 0.85em;
	margin: 8px 0 0;
}