/*
 * RezFlow — booking search form + results grid.
 * Hand-written, self-contained (no CDN). Scoped under .rezflow-search /
 * .rezflow-results so it never leaks into the client's theme.
 *
 * Colors below are CSS custom properties with hardcoded fallbacks. Admin ->
 * Appearance -> Colours overrides them per-client via an inline <style>
 * block (RezFlow_Frontend::colours_css(), registered after this stylesheet
 * so it wins the cascade) — anything left blank in the admin just falls
 * through to the fallback here, never a hardcoded value in PHP.
 */

/* ------------------------------------------------------------------
 * Theme-independent reset, 2026-09-26 (fixed same day, v0.3.63)
 *
 * Abhishek: "we need this indipendent of any theme client can have
 * any theme we might not know then we cant go on fixing it for each
 * theme that is no sense and not possible." The Blocksy
 * `label { margin: 0 0 0.5em; }` bug that broke the search bar's
 * centering (see HANDOFF.md) was never really a Blocksy bug -- it's
 * one instance of a whole CLASS of bug: any theme that sets
 * margin/padding/border on a plain HTML tag globally (label, input,
 * button, p, headings, lists, fieldset) can silently shift RezFlow's
 * own layout, and every theme does this differently. Patching
 * Blocksy specifically would only have been right until the next
 * client picks a different theme.
 *
 * v0.3.62 shipped this as a plain class+tag selector (e.g.
 * `.rezflow-search label`), reasoning that its 0-1-1 specificity
 * would beat a theme's plain-tag rule (0-0-1) while RezFlow's own
 * component classes (0-1-0) would still win via "equal-or-higher
 * specificity, later in the file." That reasoning had a hole: 0-1-1
 * is HIGHER than 0-1-0, not equal -- so this reset was silently
 * beating RezFlow's OWN single-class component rules too, on every
 * plain <label>/<button> in these containers. Confirmed live: the
 * three search-bar cards that are <label> elements lost their
 * 1px border entirely (`.rezflow-results__searchcard`'s border:
 * 1px solid, computed as border:0), the Update <button> lost its
 * horizontal padding (`.rezflow-results__searchbar-submit`'s
 * padding: 0 20px, computed as padding:0, i.e. the "squashed
 * button"), and every vehicle-category checkbox row lost its
 * vertical padding (`.rezflow-results__chip`'s padding: 5px 0,
 * computed as padding:0, read as "filter count misaligned"). Three
 * different-looking symptoms, one cause.
 *
 * Fix: wrap just the tag list in :where(), which matches the same
 * elements but contributes ZERO specificity of its own. That drops
 * this reset back down to exactly the container class's specificity
 * (0-1-0) -- still beats a theme's bare-tag rule (0-0-1) regardless
 * of which theme is active, but now only TIES with RezFlow's own
 * component classes instead of beating them, so those normal ties
 * are decided by source order like any other CSS -- and RezFlow's
 * own rules are later in this file, so they win as originally
 * intended.
 *
 * Deliberately narrow: only margin/padding/border/font-family, only
 * on this specific tag list, never color/background/list-style/
 * text-align. Those are more likely to matter for content a future
 * feature might render inside these containers (e.g. admin-authored
 * rich text), so they're left alone rather than reset blind.
 * ------------------------------------------------------------------ */
.rezflow-search :where(label, input, select, textarea, button, p, h1, h2, h3, h4, h5, h6, ul, ol, li, fieldset, legend),
.rezflow-results :where(label, input, select, textarea, button, p, h1, h2, h3, h4, h5, h6, ul, ol, li, fieldset, legend),
.rezflow-reservation :where(label, input, select, textarea, button, p, h1, h2, h3, h4, h5, h6, ul, ol, li, fieldset, legend) {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
}

.rezflow-search {
	box-sizing: border-box;
	max-width: 960px;
	margin: 0 auto;
	padding: 28px 32px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(15, 17, 21, 0.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

.rezflow-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 18px;
}

.rezflow-search__row:last-child {
	margin-bottom: 0;
}

.rezflow-search__row--submit {
	/* justify-content added 2026-09-28: this row held the discount-code
	   field plus the button, and the field's flex-grow kept the button
	   pinned to the right edge. Now the button is the row's only child,
	   so with the default flex-start it would sit at the LEFT edge
	   instead -- justify-content:flex-end keeps it where it visually was. */
	align-items: flex-end;
	justify-content: flex-end;
}

.rezflow-field {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rezflow-field--time {
	flex: 1 1 120px;
	max-width: 140px;
}

.rezflow-field label {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rezflow-field__optional {
	text-transform: none;
	font-weight: 400;
	letter-spacing: normal;
	color: #9ca3af;
}

.rezflow-field select,
.rezflow-field input[type="date"],
.rezflow-field input[type="time"],
.rezflow-field input[type="text"] {
	height: 46px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 0 14px;
	font-size: 15px;
	color: #111827;
	background: #f9fafb;
	width: 100%;
	font-family: inherit;
}

.rezflow-field select:focus,
.rezflow-field input:focus {
	outline: none;
	border-color: #DC2626;
	background: #ffffff;
}

.rezflow-search__submit {
	height: 46px;
	padding: 0 32px;
	background: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-text, #ffffff);
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	flex: 0 0 auto;
}

.rezflow-search__submit:hover {
	background: var(--rezflow-button-hover-bg, #c1633f);
	color: var(--rezflow-button-hover-text, #ffffff);
}

.rezflow-search--error,
.rezflow-results--error {
	text-align: center;
	color: #6b7280;
	font-size: 15px;
	padding: 40px 20px;
}

@media (max-width: 640px) {
	.rezflow-search {
		padding: 20px;
		border-radius: 12px;
	}
	.rezflow-field--time {
		max-width: none;
	}
	.rezflow-search__row--submit {
		flex-direction: column;
		align-items: stretch;
	}
	.rezflow-search__submit {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 *  Results — [rezflow_results]
 *  Layout: editable pill search bar, left filter rail, big rate cards.
 *  White + accent-color palette (--rezflow-button-bg drives the accent
 *  throughout, same custom property the search form uses, so Admin ->
 *  Appearance -> Colours controls both screens together).
 * ------------------------------------------------------------------ */

.rezflow-results {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1c1c1a;
}

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

.rezflow-results--error {
	text-align: center;
	color: #6b7280;
	font-size: 15px;
	padding: 40px 20px;
}

/* --- boxed-card search bar (v0.3.53/54: separate bordered cards per field
   instead of one pill with internal dividers -- dividers inside a single
   flex row kept fighting flex-grow's claim on free space (see the
   v0.3.51/52 history above); independent cards sidestep that entirely.
   v0.3.54: added the outer frame the whole row sits inside (that's what
   "outer border missing" meant -- the individual cards had borders but
   the assembly as a whole didn't read as one cohesive control), a fixed
   height on every card + the button so a native <select>'s own default
   sizing can't make one card taller than its neighbours, and per-field
   flex-basis so the two short time cards stop claiming the same share of
   the row as the much wider Dates card. Abhishek, 2026-09-23. */

.rezflow-results__searchbar {
	display: flex;
	/* v0.3.61: was "stretch". Root cause of "outer/inner border not
	   centered" + "dates text not in the right place" (Abhishek,
	   2026-09-26), confirmed live: the theme (Blocksy) sets a global
	   `label { margin: 0 0 0.5em; }` that our cards never reset. Three of
	   the four search-bar fields ARE <label> elements (Pick-up location,
	   Pick-up time, Drop-off time) and silently inherited that 7.5px
	   bottom margin; the Dates field is a plain <div> and never had it,
	   which is exactly why Dates rendered differently from the other
	   three. With the stray margin removed below AND align-items switched
	   to center, all four fields + the Update button measured pixel-
	   identical (9px above, 9px below, live-verified) instead of 9px/16.5px. */
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 1px solid #ece9e1;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(28, 28, 26, 0.05);
	padding: 8px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.rezflow-results__searchcard {
	flex: 1 1 0;
	min-width: 130px;
	/* Reset the theme's global `label { margin: 0 0 0.5em; }` -- see the
	   note on .rezflow-results__searchbar above. This card is a <label>
	   for 3 of 4 fields and a <div> for the 4th; both need a clean 0. */
	margin: 0;
	/* Fixed height + clip, matching the Update button's own height below.
	   Without this, the four cards' natural content height still drifts
	   apart -- a native <select> (Pick-up location) and native
	   <input type="date">/<input type="time"> each carry their own
	   browser-default vertical sizing that our border/padding/background
	   resets don't fully strip, so "no icons, so it'll size itself
	   consistently now" (v0.3.55/56's assumption) wasn't actually true.
	   A hard height removes the guesswork. Abhishek, 2026-09-26.

	   v0.3.60: bumped 50px -> 58px. Live-measured in Chrome: native
	   <input type="date"> has a hard ~40px minimum height that NO CSS can
	   override (confirmed with an inline style.height set directly on the
	   live DOM -- still measured 40px). 50px left only ~4px of breathing
	   room around the 40px control + the 13px label + gap, which clipped
	   the date text. 58px gives a safe margin; 54px still clipped. */
	height: 58px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 1px solid #ece9e1;
	border-radius: 10px;
	padding: 0 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Location needs the most room (place names run long), Dates needs room
   for two date inputs side by side, and the two time cards only ever
   show a short "10:00 AM" -- equal flex-basis on all four (the v0.3.53
   default) let the time cards eat space the Dates card badly needed,
   clipping its inputs behind their own native calendar icons. */
.rezflow-results__searchcard--location {
	flex: 1.3 1 150px;
}

.rezflow-results__searchcard--dates {
	flex: 1.6 1 210px;
}

.rezflow-results__searchcard--time {
	flex: 0.7 1 120px;
}

.rezflow-results__searchcard:hover,
.rezflow-results__searchcard:focus-within {
	border-color: #c9c4b3;
	background: #faf9f6;
}

.rezflow-results__searchcard-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}

.rezflow-results__searchcard-label {
	font-size: 11px;
	line-height: 1.2;
	color: #8a8574;
}

.rezflow-results__searchcard-body select,
.rezflow-results__searchcard-static,
.rezflow-results__searchcard-body input {
	border: none;
	background: transparent;
	font-size: 13px;
	line-height: 1.3;
	/* This is the actual root cause of every "text cutting off" / "cards
	   don't match" report on this search bar (v0.3.54 through v0.3.57):
	   a native <select> and <input type="date">/<input type="time">
	   each carry a browser-enforced ~40px default control height that
	   completely IGNORES line-height/padding overrides -- only an
	   explicit `height` on the control itself overrides it (verified
	   live in Chrome devtools before writing this, 2026-09-26). Every
	   earlier attempt (fixed card height, overflow:hidden, svg
	   display:block) was patching the card around a control that was
	   still secretly 40px tall inside it. */
	height: 17px;
	font-weight: 600;
	color: #1c1c1a;
	padding: 0;
	font-family: inherit;
	display: block;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rezflow-results__searchcard-body select:focus,
.rezflow-results__searchcard-body input:focus {
	outline: none;
}

/* Abhishek, 2026-09-26: "on chrome and safari the dates block are coming
   out different." input[type=date]'s internal layout (the date text vs.
   the calendar icon) has different default padding/spacing between
   Chrome and Safari -- both WebKit-family but they diverged on this. The
   rules below zero that padding out and hide Safari's extra clear ("x")
   button so the two engines start from the same baseline instead of each
   bringing their own spacing.
   input[type=time]'s 12h/24h + AM/PM display used to have this same
   problem (OS-locale-driven, no CSS/JS override) -- fixed in v0.3.64 by
   giving the time fields the same mirror trick as the dates below, so the
   visible text is ours, formatted in JS, not the native control's. */
.rezflow-results__searchcard-body input[type="date"]::-webkit-datetime-edit,
.rezflow-results__searchcard-body input[type="time"]::-webkit-datetime-edit {
	padding: 0;
}
.rezflow-results__searchcard-body input[type="date"]::-webkit-clear-button,
.rezflow-results__searchcard-body input[type="time"]::-webkit-clear-button {
	display: none;
}
.rezflow-results__searchcard-body input[type="date"]::-webkit-calendar-picker-indicator,
.rezflow-results__searchcard-body input[type="time"]::-webkit-calendar-picker-indicator {
	padding: 0;
	margin: 0;
}
/* v0.3.63 tried to remove the clock icon with display:none on this
   pseudo-element -- turned out to break the whole native time control's
   value rendering in at least one WebKit browser ("time selector is
   missing"). v0.3.64 fixes this properly: the native time input is now
   fully invisible behind its own mirror span (same technique as the date
   fields below), so the icon disappears along with the rest of the
   native control's visible chrome -- nothing left to selectively hide. */

.rezflow-results__searchcard-daterange {
	display: flex;
	align-items: center;
	gap: 4px;
}

.rezflow-results__date-wrap {
	/* v0.3.63 used flex:1 1 96px (grow:1) so this box always claimed a
	   share of the daterange row's leftover space -- fine when the
	   visible content was a native <input> with its own border/background
	   filling that space, but with the mirror span (transparent, text
	   only) the leftover space just became a big blank gap between the
	   date text and the separator/next date. flex-grow:0 keeps the box
	   sized to its actual text; min-width:90px is still the floor so a
	   full "28/09/2026" never clips on narrow screens. */
	position: relative;
	flex: 0 1 auto;
	min-width: 90px;
	height: 17px;
}

/* 2026-09-26, Abhishek picked the "mirror trick" over a full custom
   calendar: Chrome enforces a hard ~40px minimum height on
   <input type="date"> that no CSS height override can shrink (measured
   directly with getComputedStyle -- see the v0.3.60 note on
   .rezflow-results__searchcard-body above; still 40px with height set
   inline on the live DOM). That's a real platform floor, not a
   specificity bug like the [hidden] one this same session, so there's no
   CSS-only fix -- shrinking this box always clips the date text.
   Fix: keep the real native <input type="date"> in the DOM (native
   mobile date pickers, keyboard entry, screen readers all still work
   against it) but make it fully invisible and non-hit-testable, and let
   rezflow-frontend.js keep a plain-text span in sync with its value at
   the correct 17px row height instead -- same height as the other three
   search-bar fields. pointer-events:none is what actually matters here:
   without it, the input's own ~40px hit-test box (which CSS can't shrink
   either) would silently swallow clicks meant for the Pick-up/Drop-off
   time row directly below it. The mirror span is what the visitor
   actually sees and clicks; its click handler opens the native picker on
   the hidden input programmatically. */
.rezflow-results__date-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.rezflow-results__date-mirror {
	display: block;
	height: 17px;
	line-height: 1.3;
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1a;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* v0.3.64: same mirror trick as the date fields above, now for the
   Pick-up/Drop-off time fields. This fixes three things in one move:
   (1) "time selector is missing" -- the v0.3.63 display:none on the
   picker icon apparently breaks the native control's own value rendering
   in at least one WebKit browser; the real input is now fully invisible
   (opacity:0) so there's no native chrome left to break.
   (2) the icon is gone, as originally asked, with no icon-specific CSS
   needed -- it disappears along with the rest of the native control.
   (3) the 12h/24h + AM/PM format is now set by our own JS (see
   initTimeMirrors in rezflow-frontend.js) instead of the OS locale, so it
   reads the same in Chrome, Safari and Firefox. */
.rezflow-results__time-wrap {
	position: relative;
	display: block;
	height: 17px;
}

.rezflow-results__time-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.rezflow-results__time-mirror {
	display: block;
	height: 17px;
	line-height: 1.3;
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1a;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rezflow-results__searchcard-sep {
	flex-shrink: 0;
	color: #a39c86;
}

.rezflow-results__searchbar-submit {
	flex: 0 0 auto;
	height: 58px; /* v0.3.60: match .rezflow-results__searchcard's 58px */
	box-sizing: border-box;
	padding: 0 20px;
	background: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-text, #ffffff);
	border: none;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	font-family: inherit;
}

.rezflow-results__searchbar-submit:hover {
	background: var(--rezflow-button-hover-bg, #c1633f);
	color: var(--rezflow-button-hover-text, #ffffff);
}

/* --- body: filter rail + list --- */

.rezflow-results__body {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.rezflow-results__filters {
	width: 280px;
	flex-shrink: 0;
	border: 1px solid #ece9e1;
	border-radius: 20px;
	padding: 0 22px;
}

.rezflow-results__filter-block {
	padding: 14px 0;
	border-bottom: 1px solid #ece9e1;
}

.rezflow-results__filter-block--last {
	border-bottom: none;
}

.rezflow-results__filter-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #8a8574;
	margin-bottom: 6px;
}

.rezflow-results__price-track {
	position: relative;
	height: 4px;
	border-radius: 4px;
	background: #ece9e1;
	/* Extra side margin so the 20px thumbs have room to sit fully inside
	   the filter box instead of crowding its edges (2026-09-22: Abhishek
	   flagged the thumbs as "abruptly placed" right up against the ends). */
	margin: 26px 10px 20px;
}

.rezflow-results__price-track-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--rezflow-button-bg, #DC2626);
	border-radius: 4px;
	pointer-events: none;
}

/* Two overlapping range inputs sharing one visual track -- the standard
   dual-handle slider pattern. Each thumb is the only interactive part;
   the native track/fill is made invisible so our own track-fill div shows
   through instead. */
.rezflow-results__range {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	transform: translateY(-50%);
}

.rezflow-results__range::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	background: transparent;
	height: 4px;
}

.rezflow-results__range::-moz-range-track {
	background: transparent;
	height: 4px;
	border: none;
}

.rezflow-results__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 20px;
	height: 20px;
	margin-top: -8px; /* (4px track - 20px thumb) / 2 -- WebKit doesn't auto-center this like Firefox does */
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid var(--rezflow-button-bg, #DC2626);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
	transition: transform .1s ease;
}

.rezflow-results__range::-moz-range-thumb {
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid var(--rezflow-button-bg, #DC2626);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
	transition: transform .1s ease;
}

.rezflow-results__range:hover::-webkit-slider-thumb,
.rezflow-results__range:active::-webkit-slider-thumb {
	transform: scale(1.1);
}

.rezflow-results__range:hover::-moz-range-thumb,
.rezflow-results__range:active::-moz-range-thumb {
	transform: scale(1.1);
}

.rezflow-results__range::-moz-range-progress {
	background: transparent;
}

.rezflow-results__price-inputs {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rezflow-results__price-box {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid #d8d4c8;
	border-radius: 10px;
	padding: 8px 10px;
	font-size: 13px;
	color: #8a8574;
}

.rezflow-results__price-box input {
	width: 100%;
	border: none;
	outline: none;
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1a;
	font-family: inherit;
	background: transparent;
}

.rezflow-results__price-to {
	font-size: 12px;
	color: #8a8574;
	flex-shrink: 0;
}

.rezflow-results__chip {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	font-size: 13px;
	color: #3d3a30;
	cursor: pointer;
}

.rezflow-results__chip input {
	width: 16px;
	height: 16px;
	accent-color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-results__chip-count {
	margin-left: auto;
	color: #8a8574;
	font-weight: 600;
}

.rezflow-results__clear {
	width: 100%;
	height: 40px;
	background: #ffffff;
	border: 1px solid #e7e4dc;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	color: #5b5748;
	cursor: pointer;
	font-family: inherit;
}

.rezflow-results__main {
	flex-grow: 1;
	min-width: 0;
}

.rezflow-results__toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.rezflow-results__count {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #1c1c1a;
	font-weight: 600;
}

.rezflow-results__count-divider {
	width: 1px;
	height: 14px;
	background: #d8d4c8;
}

.rezflow-results__count-note {
	font-size: 13px;
	font-weight: 400;
	color: #8a8574;
}

.rezflow-results__sort {
	position: relative;
}

.rezflow-results__sort-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border: 1.5px solid var(--rezflow-button-bg, #DC2626);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rezflow-button-bg, #DC2626);
	background: #ffffff;
	font-family: inherit;
	cursor: pointer;
}

.rezflow-results__sort-btn:hover {
	background: color-mix(in srgb, var(--rezflow-button-bg, #DC2626) 6%, #ffffff);
}

.rezflow-results__sort-btn strong {
	color: #1c1c1a;
	font-weight: 700;
}

.rezflow-results__sort-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	min-width: 200px;
	background: #ffffff;
	border: 1px solid #ece9e1;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(28,28,26,.12);
	padding: 6px;
	list-style: none;
	margin: 0;
}

.rezflow-results__sort-menu li {
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #3d3a30;
	border-radius: 8px;
	cursor: pointer;
}

.rezflow-results__sort-menu li:hover {
	background: #f6f4ee;
}

.rezflow-results__sort-menu li[aria-selected="true"] {
	color: var(--rezflow-button-bg, #DC2626);
	background: color-mix(in srgb, var(--rezflow-button-bg, #DC2626) 8%, #ffffff);
}

.rezflow-results__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rezflow-results__empty {
	text-align: center;
	color: #8a8574;
	font-size: 14px;
	padding: 40px 20px;
}

/* --- big rate card --- */

.rezflow-card {
	display: flex;
	align-items: stretch;
	gap: 20px;
	background: #ffffff;
	border: 1px solid #ece9e1;
	border-radius: 20px;
	padding: 18px;
}
/* 2026-09-26, Abhishek: "the actual cards do not hide or show" -- the
   filter sidebar (price/daily sliders, category/passengers/luggage boxes)
   was correctly deciding which cards to hide (the "X cars available" count
   was always right) but JS setting a card's `hidden` property does nothing
   visually once a plain class rule sets `display` on that same element --
   the browser's built-in `[hidden] { display: none }` rule loses to it,
   regardless of which looks "more specific". This is the exact same bug
   already hit and documented in the reservation wizard (see HANDOFF.md).
   Fix: an explicit `[hidden]` override that actually wins. */
.rezflow-card[hidden] {
	display: none;
}

.rezflow-card--best-value {
	border-color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-card__image {
	width: 180px;
	height: 101px; /* fixed 16:9 at 180px wide -- matches the recommended upload ratio (see admin help text) */
	/* Don't stretch to the row's full height (.rezflow-card has
	   align-items:stretch) -- a tall stretched box around a 16:9 photo is
	   why object-fit:contain shrank the car into a sea of empty space and
	   read as "too small". A fixed-ratio box lets cover fill it edge to
	   edge with no crop, as long as the upload matches 16:9. Abhishek,
	   2026-09-23. */
	align-self: center;
	flex-shrink: 0;
	border-radius: 14px;
	background: var(--rezflow-tone-color, #f5f4f0);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.rezflow-card--best-value .rezflow-card__image {
	background: color-mix(in srgb, var(--rezflow-button-bg, #DC2626) 12%, #ffffff);
}

.rezflow-card__image img {
	width: 100%;
	height: 100%;
	/* Safe to crop-to-fill again now the box is a fixed 16:9 -- an image
	   uploaded at the recommended ratio needs no cropping at all.
	   Abhishek, 2026-09-23. */
	object-fit: cover;
}

.rezflow-card__placeholder {
	color: #a39c86;
}

.rezflow-card--best-value .rezflow-card__placeholder {
	color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--rezflow-button-bg, #DC2626);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 100px;
}

.rezflow-card__body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.rezflow-card__heading {
	display: flex;
	flex-direction: column;
}

.rezflow-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.15;
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
	color: #1c1c1a;
}

.rezflow-card__subtitle {
	/* v0.3.45's -3px actually overlapped the title's line-box by 3px
	   (measured live, 2026-09-23) -- looked squished rather than tight.
	   A small positive gap instead of a negative one reads as intentional
	   spacing, not a rendering glitch. */
	margin: 1px 0 0;
	line-height: 1.2;
	font-size: 12px;
	color: #8a8574;
}

.rezflow-card__specs {
	display: flex;
	gap: 16px;
	font-size: 12px;
	color: #5b5748;
	margin-top: 2px;
	flex-wrap: wrap;
}

/* Admin-entered class description (Vehicles -> Class Images) -- clamped to
   three lines so a long blurb can never blow the card up. */
.rezflow-card__desc {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #5b5748;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rezflow-card__spec {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rezflow-card__spec svg,
.rezflow-card__features svg {
	flex-shrink: 0;
	color: #8a8574;
}

/* Reset the list styling explicitly -- themes routinely add bullets/margins to bare ul/li. */
.rezflow-card__features {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.3;
	color: #5b5748;
}

.rezflow-card__features li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rezflow-card__note {
	margin: 6px 0 0;
	font-size: 12px;
	color: #b32d2e;
}

.rezflow-card__price-col {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 6px;
}

/* Extras -> Badges: an admin-assigned callout (discount, "Popular", etc.),
   independent of the "Best value" badge on the image -- this one sits in
   the price column, right above the numbers. */
.rezflow-card__price-badge {
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 100px;
	margin-bottom: 4px;
}

.rezflow-card__price {
	text-align: right;
}

/* Base daily rate (RateAmount), shown right above the bolder estimated
   price when they differ -- see class-rezflow-results.php render_card().
   No "total"/"incl. taxes" wording here on purpose (2026-09-22, Abhishek):
   extras and final taxes aren't locked in until checkout, so this number
   is an estimate, not a total, and shouldn't claim to be one. */
.rezflow-card__price-daily {
	display: block;
	font-size: 12px;
	color: #8a8574;
	margin-bottom: 1px;
}

.rezflow-card__price-amount {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--rezflow-price-color, #1c1c1a);
}

.rezflow-card--best-value .rezflow-card__price-amount {
	color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-card__price-days {
	display: block;
	font-size: 11px;
	color: #8a8574;
	margin-top: 1px;
}

.rezflow-card__select {
	display: block;
	text-align: center;
	height: 44px;
	line-height: 44px;
	padding: 0 28px;
	border-radius: 100px;
	background: #ffffff;
	color: #1c1c1a;
	border: 1.5px solid #d8d4c8;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.rezflow-card--best-value .rezflow-card__select {
	background: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-text, #ffffff);
	border-color: transparent;
}

.rezflow-card__select:hover {
	border-color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-card--best-value .rezflow-card__select:hover {
	background: var(--rezflow-button-hover-bg, #c1633f);
	color: var(--rezflow-button-hover-text, #ffffff);
}

@media (max-width: 900px) {
	.rezflow-results__body {
		flex-direction: column;
	}
	.rezflow-results__filters {
		width: 100%;
	}
	.rezflow-results__searchbar {
		flex-direction: column;
		align-items: stretch;
	}
	.rezflow-results__searchcard--dates .rezflow-results__searchcard-daterange {
		flex-wrap: wrap;
	}
	.rezflow-results__searchbar-submit {
		padding: 12px 20px;
		justify-content: center;
	}
	.rezflow-card {
		flex-direction: column;
	}
	.rezflow-card__image {
		width: 100%;
		height: 140px;
	}
	.rezflow-card__price-col {
		align-items: stretch;
	}
	.rezflow-card__price {
		text-align: left;
	}
	.rezflow-card__select {
		width: 100%;
	}
}

/* ==========================================================================
 * Reservation page -- [rezflow_reservation]
 * Two-column checkout layout: grouped detail cards on the left, a sticky
 * vehicle + price summary on the right (Abhishek asked to match Hopper's
 * checkout page, 2026-09-22).
 * ======================================================================= */

/* Same container width and font stack as the results page, so the two
   pages line up edge to edge as the renter moves from one to the other. */
.rezflow-reservation {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1c1c1a;
}

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

.rezflow-reservation--empty {
	max-width: 560px;
	margin: 40px auto;
	padding: 24px;
	text-align: center;
	background: var(--rezflow-tone-color, #f5f4f0);
	border-radius: 10px;
}

.rezflow-reservation--empty a {
	color: var(--rezflow-button-bg, #DC2626);
	font-weight: 600;
}

.rezflow-reservation__heading {
	margin: 0 0 18px;
	font-size: 26px;
	font-weight: 700;
}

.rezflow-reservation__layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 28px;
	align-items: start;
}

.rezflow-reservation__left,
.rezflow-reservation__right {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.rezflow-reservation__right {
	position: sticky;
	top: 20px;
}

/* Each step is its own flex column so the cards inside it keep the same
   24px rhythm as the gap between steps and between the two columns. */
.rezflow-reservation__step {
	display: flex;
	flex-direction: column;
	gap: 24px;
	opacity: 1;
	transition: opacity 500ms ease; /* keep in sync with STEP_FADE_MS in class-rezflow-reservation.php */
}

/* CRITICAL: the class rule above sets display:flex unconditionally, which
   (author stylesheet) overrides the browser's own [hidden] -> display:none
   default (user-agent stylesheet) -- without this, every step rendered at
   once, stacked on top of each other, instead of one at a time (this is
   what was actually behind Abhishek's "buttons sticking to the block
   below" + misaligned columns report, 2026-09-22 -- all 3 steps were
   visible simultaneously, not a spacing bug). */
.rezflow-reservation__step[hidden] {
	display: none;
}

/* Step transition (2026-09-23, Abhishek: "the new block just jumps in,
   can we fade in and out"). showStep() in the JS adds this class to fade
   a step to opacity:0, waits for the transition to actually finish, THEN
   sets [hidden] on it and fades the next step in the same way -- see the
   JS for why it can't just toggle opacity alongside [hidden]: setting
   [hidden] applies display:none on the SAME frame, which cancels any
   transition instantly (you can't animate a property on an element that
   has simultaneously stopped rendering). */
.rezflow-reservation__step.is-fading {
	opacity: 0;
}

/* -- Step progress indicator (above the two-column layout, so its height
   doesn't throw off left/right column alignment -- see DECISIONS.md) --- */

.rezflow-reservation__progress {
	display: flex;
	align-items: center;
	margin: 0 0 28px;
}

.rezflow-reservation__progress-step {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.rezflow-reservation__progress-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid #d8d6cc;
	font-size: 13px;
	font-weight: 700;
	color: #b6b3a6;
	background: #ffffff;
	flex-shrink: 0;
}

.rezflow-reservation__progress-text {
	font-size: 13px;
	font-weight: 600;
	color: #b6b3a6;
	white-space: nowrap;
}

.rezflow-reservation__progress-line {
	flex: 1;
	height: 1.5px;
	background: #e5e3db;
	margin: 0 12px;
}

.rezflow-reservation__progress-step.is-active .rezflow-reservation__progress-circle {
	border-color: var(--rezflow-button-bg, #DC2626);
	background: var(--rezflow-button-bg, #DC2626);
	color: #ffffff;
}

.rezflow-reservation__progress-step.is-active .rezflow-reservation__progress-text {
	color: #1c1c1a;
}

.rezflow-reservation__progress-step.is-done .rezflow-reservation__progress-circle {
	border-color: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-bg, #DC2626);
	background: #ffffff;
}

.rezflow-reservation__progress-step.is-done .rezflow-reservation__progress-text {
	color: #4a4942;
}

/* Phone: keep the stage names (as on desktop) -- label under each circle. */
@media (max-width: 700px) {
	.rezflow-reservation__progress {
		align-items: flex-start;
		margin-bottom: 20px;
	}
	.rezflow-reservation__progress-step {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		flex: 0 0 76px;
		text-align: center;
	}
	.rezflow-reservation__progress-text {
		white-space: normal;
		font-size: 12px;
		line-height: 1.25;
	}
	.rezflow-reservation__progress-line {
		margin: 14px 4px 0;
	}
}

/* Shared card shell used by every section on both columns. */
.rezflow-reservation__card {
	background: #ffffff;
	border: 1px solid #e5e3db;
	border-radius: 12px;
	padding: 24px;
}

.rezflow-reservation__card h3 {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
}

.rezflow-reservation__card h4 {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
}

.rezflow-reservation__card > .description:first-of-type {
	margin-top: -8px;
}

.rezflow-reservation__divider {
	margin: 20px 0;
	border: none;
	border-top: 1px solid #f0efe9;
}

/* -- Vehicle summary card (right column) -------------------------------- */

.rezflow-reservation__vehicle-card {
	padding: 18px;
}

.rezflow-reservation__vehicle-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.rezflow-reservation__image {
	width: 120px;
	height: 78px;
	object-fit: contain;
	flex-shrink: 0;
}

/* 2026-09-28: this text block used to be a bare <div>, a plain block box,
   so the title's margin-bottom and the subtitle's margin-top COLLAPSED
   into each other instead of adding up -- and neither had an explicit
   line-height, so it inherited whatever ambient line-height applies here
   (nowhere near the tight 1.15/1.2 the results-page card uses), which is
   what actually made "Kia Forte or Similar" read as sitting too low
   (Abhishek: "the kia forte and similar text is quite low it should match
   the search result"). Fixed the same way .rezflow-card__heading already
   does it below: flex-direction:column stops the margin collapse, and
   every line gets its own explicit line-height so nothing here depends on
   an ambient value again. */
.rezflow-reservation__vehicle-text {
	display: flex;
	flex-direction: column;
}

/* 2026-09-28, round 2: the fix above never actually reached the page.
   .rezflow-reservation__card h3 (a generic heading rule for every OTHER
   h3 in every other card -- "Price breakdown", "Your deal", etc., a few
   rules up in this same file) has HIGHER specificity (class+element,
   0-1-1) than a bare .rezflow-reservation__title (class only, 0-1-0) --
   and this title's own wrapper carries BOTH .rezflow-reservation__card
   AND .rezflow-reservation__vehicle-card, so that generic rule's
   `margin: 0 0 14px; font-size: 15px;` was silently winning over this
   block's `margin: 0; font-size: 18px;` regardless of which one comes
   later in the file. Confirmed live: computed margin-bottom was 14px and
   font-size 15px, not the 0/18px written below -- Abhishek testing this
   for real (not this session re-simulating the old bug) is exactly what
   caught it. Fix: scope both rules to .rezflow-reservation__vehicle-card
   specifically (0-2-0), which unambiguously outranks the generic rule
   instead of relying on source order to break the tie. */
.rezflow-reservation__vehicle-card .rezflow-reservation__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.15;
	font-weight: 700;
	color: #1c1c1a;
}

.rezflow-reservation__vehicle-card .rezflow-reservation__subtitle {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.2;
	color: #6b6a63;
}

.rezflow-reservation__vehicle-card .rezflow-reservation__subtitle--range {
	margin: 6px 0 0;
	line-height: 1.2;
	font-weight: 600;
	color: #4a4942;
}

.rezflow-reservation__trip {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #f0efe9;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rezflow-reservation__trip-row {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	line-height: 1.5;
}

.rezflow-reservation__trip-label {
	font-weight: 700;
	color: #1c1c1a;
}

.rezflow-reservation__trip-value {
	color: #4a4942;
}

.rezflow-reservation__trip-location {
	color: #8a8574;
}

.rezflow-reservation__specs {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #f0efe9;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.rezflow-reservation__spec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #4a4942;
}

.rezflow-reservation__spec svg {
	flex-shrink: 0;
	color: #8a8574;
}

/* -- Price breakdown card (right column) --------------------------------- */

.rezflow-reservation__breakdown {
	padding: 24px;
}

/* Markup switched from a <table> to stacked rows/groups (v0.3.37/38, to
   match Abhishek's reference layout: Base rate / divider / collapsible
   Taxes & fees / divider / bold Total / small note -- layout only, all
   figures are still exactly what TSD's REQBIL response returned). Each
   row is a flex space-between line; a group gets its own bottom divider
   only when `--divider` is added in the PHP, kept as a modifier rather
   than baked into the base class in case a future group shouldn't have
   one. */
.rezflow-reservation__breakdown-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 14px;
}

.rezflow-reservation__breakdown-row > span:last-child {
	text-align: right;
	white-space: nowrap;
}

.rezflow-reservation__breakdown-group {
	padding: 6px 0;
}

.rezflow-reservation__breakdown-group--divider {
	border-bottom: 1px solid #e5e3db;
}

/* "Taxes & fees" toggle -- a plain button styled to look like a row label,
   so the disclosure affordance (chevron) sits inline with the amount. */
.rezflow-reservation__breakdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 14px;
	color: inherit;
	cursor: pointer;
}

.rezflow-reservation__breakdown-chevron {
	flex-shrink: 0;
	color: #8a8574;
	transition: transform 200ms ease;
}

.rezflow-reservation__breakdown-toggle[aria-expanded="true"] .rezflow-reservation__breakdown-chevron {
	transform: rotate(180deg);
}

.rezflow-reservation__breakdown-detail {
	padding-left: 4px;
}

.rezflow-reservation__breakdown-detail[hidden] {
	display: none;
}

/* Surcharge / individual tax lines inside the expanded detail -- smaller
   and muted so they read as a breakdown of the Taxes & fees row above,
   not as peers of Base rate / Total. */
.rezflow-reservation__breakdown-row--sub {
	padding: 4px 0;
	font-size: 13px;
	color: #6b6a61;
}

/* Discount row in the Base-rate group, v0.3.68 -- see render_breakdown()'s
   comment for why this exists: TSD's RateCharge doesn't itself reflect a
   discount, so without this row "Base rate" + "Taxes & fees" visibly didn't
   sum to "Total" once a discount was applied. Green like the discount
   feedback's own success state, so a renter reads it as money coming off,
   not as an extra charge. */
.rezflow-reservation__breakdown-row--discount {
	color: #1a7f37;
}

.rezflow-reservation__breakdown-total {
	margin-top: 4px;
	padding-top: 10px;
	font-weight: 700;
	font-size: 17px;
	color: #1c1c1a;
}

.rezflow-reservation__breakdown .description {
	margin: 10px 0 0;
	font-size: 12px;
	color: #8a8574;
}

/* Discount code, 2026-09-28: moved here from the search form per Abhishek
   ("remove the discount block from the search and add it to final check
   out page ... just above the total section") -- so it sits inside the
   breakdown card's own group/divider rhythm rather than looking like a
   generic search-form field. */
.rezflow-reservation__discount {
	padding: 4px 0;
}

.rezflow-reservation__discount-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #4a4942;
}

.rezflow-reservation__discount-row {
	display: flex;
	gap: 8px;
}

.rezflow-reservation__discount-row input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 9px 12px;
	font-size: 14px;
	border: 1.5px solid #d8d6cc;
	border-radius: 6px;
	background: #ffffff;
}

.rezflow-reservation__discount-row input:focus {
	outline: none;
	border-color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-reservation__discount-apply {
	flex-shrink: 0;
	padding: 0 16px;
	border: 1.5px solid #d8d6cc;
	border-radius: 6px;
	background: #ffffff;
	font-size: 14px;
	font-weight: 600;
	color: #1c1c1a;
	cursor: pointer;
}

.rezflow-reservation__discount-apply:hover {
	border-color: #b8b5a8;
}

.rezflow-reservation__discount-apply:disabled {
	opacity: 0.6;
	cursor: default;
}

.rezflow-reservation__discount-feedback {
	margin: 6px 0 0;
	font-size: 12px;
	min-height: 14px;
}

.rezflow-reservation__discount-feedback[data-state="error"] {
	color: #b3261e;
}

.rezflow-reservation__discount-feedback[data-state="success"] {
	color: #1a7f37;
}

/* -- Form (left column) --------------------------------------------------- */

.rezflow-reservation__field {
	margin-bottom: 14px;
}

.rezflow-reservation__field:last-child {
	margin-bottom: 0;
}

.rezflow-reservation__field label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #4a4942;
}

.rezflow-reservation__field input,
.rezflow-reservation__field select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 14px;
	border: 1.5px solid #d8d6cc;
	border-radius: 6px;
	background: #ffffff;
}

.rezflow-reservation__field input:focus,
.rezflow-reservation__field select:focus {
	outline: none;
	border-color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-reservation__field-row {
	display: flex;
	gap: 14px;
	margin-bottom: 14px;
}

.rezflow-reservation__field-row .rezflow-reservation__field {
	flex: 1;
	margin-bottom: 0;
}

.rezflow-reservation__field-row--3 .rezflow-reservation__field {
	flex: 1;
}

.description {
	font-size: 12px;
	color: #8a8574;
	margin: 0 0 14px;
}

/* -- Collapsible details (Rental location / Important information) ------- */

.rezflow-reservation__details {
	border-top: 1px solid #f0efe9;
	padding: 12px 0;
	font-size: 13px;
	color: #4a4942;
}

.rezflow-reservation__details:first-of-type {
	border-top: none;
	padding-top: 0;
}

.rezflow-reservation__details summary {
	cursor: pointer;
	font-weight: 600;
	color: #1c1c1a;
	list-style: none;
}

.rezflow-reservation__details summary::-webkit-details-marker {
	display: none;
}

.rezflow-reservation__details summary::after {
	content: '\2304';
	float: right;
	color: #8a8574;
}

.rezflow-reservation__details[open] summary::after {
	content: '\2303';
}

.rezflow-reservation__details p {
	margin: 10px 0 0;
	line-height: 1.5;
}

/* -- Terms + submit -------------------------------------------------------- */

.rezflow-reservation__terms {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #f0efe9;
}

.rezflow-reservation__terms label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	font-weight: 400;
	color: #4a4942;
}

.rezflow-reservation__terms input[type="checkbox"] {
	width: auto;
	margin-top: 2px;
	accent-color: var(--rezflow-button-bg, #DC2626);
}

/* -- "Your Deal" step (1 of 3), added v0.3.40 ----------------------------- */

.rezflow-reservation__deal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}

.rezflow-reservation__deal-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: #1c1c1a;
}

.rezflow-reservation__deal-item svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.rezflow-reservation__checklist-tabs {
	display: flex;
	gap: 4px;
	border: 1px solid #e5e3db;
	border-radius: 8px;
	padding: 4px;
	margin-bottom: 16px;
}

.rezflow-reservation__checklist-tab {
	flex: 1;
	padding: 8px 10px;
	border: none;
	border-radius: 6px;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #4a4942;
	cursor: pointer;
	text-align: center;
}

.rezflow-reservation__checklist-tab.is-active {
	background: #ffffff;
	color: var(--rezflow-button-bg, #DC2626);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.rezflow-reservation__checklist-panel p {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: #4a4942;
}

.rezflow-reservation__checklist-panel p:last-child {
	margin-bottom: 0;
}

.rezflow-reservation__checklist-list {
	margin: 0;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.8;
	color: #4a4942;
}

/* -- Prepayment toggle (Step 3), added v0.3.40 ---------------------------- */

.rezflow-reservation__cc-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin: 10px 0 16px;
	background: #f7f6f2;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #1c1c1a;
	cursor: pointer;
}

.rezflow-reservation__cc-toggle input[type="checkbox"] {
	width: auto;
	accent-color: var(--rezflow-button-bg, #DC2626);
}

[data-rezflow-btn-line2] {
	display: block;
	font-size: 11px;
	font-weight: 400;
	opacity: 0.85;
}

/* [hidden] alone loses to the block rule above (equal specificity, this
   stylesheet loads after the UA sheet) -- that's why toggling the credit-
   card checkbox never visibly changed the submit button, 2026-09-23. */
[data-rezflow-btn-line2][hidden] {
	display: none;
}

/* -- Extras step (2 of 3) -------------------------------------------------
   A plain 2-col grid puts every card in a fixed row, so a short card (e.g.
   a single-checkbox Prepaid Fuel) sits next to a tall one (the LDW tier
   choice) and the whole row stretches to match the tall one -- leaving a
   big dead gap under the short card (Abhishek, 2026-09-23). CSS multi-
   column layout fixes this without any JS: the browser balances total
   height across the 2 columns, so a short card is naturally followed by
   the NEXT card stacking right underneath it in the same column, instead
   of being stranded in its own oversized row. */

.rezflow-reservation__extras-grid {
	column-count: 2;
	column-gap: 24px;
}

.rezflow-reservation__extra {
	display: flex;
	flex-direction: column;
	break-inside: avoid; /* never split one card's content across columns */
	margin-bottom: 24px; /* vertical rhythm within a column -- column-gap only spaces columns horizontally */
}

.rezflow-reservation__extra h3 {
	margin-bottom: 4px;
}

.rezflow-reservation__extra .description {
	margin-bottom: 0;
}

.rezflow-reservation__extra-notes {
	margin: 8px 0 0;
	font-size: 12px;
	color: #8a8574;
}

.rezflow-reservation__stepper {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-top: 16px;
	padding: 6px;
	border: 1.5px solid #d8d6cc;
	border-radius: 8px;
	width: fit-content;
}

.rezflow-reservation__stepper-btn {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: var(--rezflow-button-bg, #DC2626);
	background: #ffffff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.rezflow-reservation__stepper-btn:hover {
	background: var(--rezflow-tone-color, #f5f4f0);
}

.rezflow-reservation__stepper-value {
	min-width: 1.2em;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
}

/* Tier radio groups (e.g. LDW-1/2/3 damage-waiver levels) -- a
   mutually-exclusive choice card, styled like a set of selectable rows
   rather than the plain stepper cards. */
.rezflow-reservation__tier-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.rezflow-reservation__tier-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1.5px solid #d8d6cc;
	border-radius: 8px;
	cursor: pointer;
}

.rezflow-reservation__tier-option:has(input:checked) {
	border-color: var(--rezflow-button-bg, #DC2626);
	background: var(--rezflow-tone-color, #f5f4f0);
}

.rezflow-reservation__tier-option input[type="radio"] {
	width: auto;
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-reservation__tier-option span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	color: #1c1c1a;
}

.rezflow-reservation__tier-option em {
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	color: #4a4942;
}

/* One-time extras (e.g. Out of Province, Prepaid Fuel) -- a checkbox
   toggle instead of the 0-9 stepper, since a renter never wants "3 of" a
   flat one-time charge (Abhishek: "remove selection block from the out
   of province block", 2026-09-22). */
.rezflow-reservation__extra-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: #1c1c1a;
	cursor: pointer;
}

.rezflow-reservation__extra-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-reservation__step-actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.rezflow-reservation__submit {
	display: block;
	flex: 1;
	padding: 14px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	background: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-text, #ffffff);
}

.rezflow-reservation__submit:hover {
	background: var(--rezflow-button-hover-bg, #c1633f);
	color: var(--rezflow-button-hover-text, #ffffff);
}

.rezflow-reservation__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.rezflow-reservation__back {
	flex: 0 0 auto;
	padding: 14px 20px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: #4a4942;
	background: #ffffff;
	border: 1.5px solid #d8d6cc;
	border-radius: 8px;
	cursor: pointer;
}

.rezflow-reservation__back:hover {
	border-color: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-bg, #DC2626);
}

[data-rezflow-reservation-result] .notice {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
}

[data-rezflow-reservation-result] .notice-error {
	background: #fdecea;
	color: #a02622;
}

.rezflow-reservation__confirmation {
	padding: 28px;
	text-align: center;
	background: var(--rezflow-tone-color, #f5f4f0);
	border-radius: 10px;
}

.rezflow-reservation__confirmation h2 {
	margin: 0 0 10px;
	font-size: 22px;
	color: var(--rezflow-button-bg, #DC2626);
}

@media (max-width: 900px) {
	.rezflow-reservation__layout {
		grid-template-columns: 1fr;
	}
	.rezflow-reservation__right {
		position: static;
		order: -1;
	}
}

@media (max-width: 640px) {
	.rezflow-reservation__vehicle-head {
		flex-direction: column;
	}
	.rezflow-reservation__image {
		width: 100%;
		height: 130px;
	}
	.rezflow-reservation__field-row {
		flex-direction: column;
		gap: 0;
	}
	.rezflow-reservation__field-row .rezflow-reservation__field {
		margin-bottom: 14px;
	}
	.rezflow-reservation__field-row .rezflow-reservation__field:last-child {
		margin-bottom: 0;
	}
	.rezflow-reservation__extras-grid {
		column-count: 1;
	}
}

/* ------------------------------------------------------------------ *
 *  Date / time picker (v0.5.0) -- see initPickers() in rezflow-frontend.js
 *  The overlay is appended to <body> (outside .rezflow-search), so it
 *  carries its own reset under #rezflow-pk-overlay: `all: unset` on the
 *  buttons beats theme/Elementor button styles, and the id selector keeps
 *  specificity above theme rules. Accent = the same --rezflow-button-*
 *  variables the rest of the plugin uses.
 * ------------------------------------------------------------------ */

/* Search form: native inputs hidden once JS has replaced them with buttons. */
.rezflow-pk-on input[type="date"],
.rezflow-pk-on input[type="time"] {
	display: none;
}
.rezflow-pk-hide {
	display: none;
}
.rezflow-field--dates {
	flex: 2 1 260px;
}
.rezflow-pk-trigger {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
	color: #111827;
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}
.rezflow-pk-trigger:hover {
	background: #ffffff;
	border-color: #c9c4b3;
}
.rezflow-pk-trigger:focus-visible,
.rezflow-pk-card:focus-visible {
	outline: 3px solid var(--rezflow-button-bg, #DC2626);
	outline-offset: 2px;
}
.rezflow-pk-notice {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fff4e0;
	color: #6b4200;
	font-size: 14px;
	line-height: 1.4;
}
.rezflow-pk-notice[hidden] {
	display: none;
}
.rezflow-pk-card {
	cursor: pointer;
}

/* Overlay + sheet */
html.rezflow-pk-lock {
	overflow: hidden;
}
#rezflow-pk-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1c1c1a;
	line-height: 1.4;
}
#rezflow-pk-overlay[hidden] {
	display: none;
}
#rezflow-pk-overlay *,
#rezflow-pk-overlay *::before,
#rezflow-pk-overlay *::after {
	box-sizing: border-box;
}
#rezflow-pk-overlay .rezflow-pk-sheet {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 480px;
	height: 92vh;
	height: min(92dvh, 760px);
	max-height: 760px;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: #ffffff;
	border-radius: 20px 20px 0 0;
	animation: rezflow-pk-up 0.2s ease-out;
}
@keyframes rezflow-pk-up {
	from { transform: translateY(24px); opacity: 0.6; }
	to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	#rezflow-pk-overlay .rezflow-pk-sheet { animation: none; }
}
@media (min-width: 600px) {
	#rezflow-pk-overlay { align-items: center; }
	#rezflow-pk-overlay .rezflow-pk-sheet { border-radius: 20px; height: min(86vh, 720px); }
}
#rezflow-pk-overlay .rezflow-pk-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 8px 8px 4px 20px;
}
#rezflow-pk-overlay .rezflow-pk-title {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 800;
	color: #1c1c1a;
	text-transform: none;
	letter-spacing: 0;
}
#rezflow-pk-overlay .rezflow-pk-title:focus {
	outline: none;
}
#rezflow-pk-overlay .rezflow-pk-sub {
	margin: 0;
	padding: 0 20px 8px;
	font-size: 14px;
	color: #5c5a54;
}
#rezflow-pk-overlay .rezflow-pk-sub[hidden],
#rezflow-pk-overlay .rezflow-pk-foot[hidden] {
	display: none;
}
#rezflow-pk-overlay .rezflow-pk-body {
	position: relative;
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 16px 12px;
}
#rezflow-pk-overlay .rezflow-pk-foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 20px 16px;
	border-top: 1px solid #ece9e1;
}
#rezflow-pk-overlay .rezflow-pk-sum {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 15px;
	color: #1c1c1a;
}
#rezflow-pk-overlay button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}
#rezflow-pk-overlay button:focus-visible {
	outline: 3px solid var(--rezflow-button-bg, #DC2626);
	outline-offset: 2px;
}
#rezflow-pk-overlay .rezflow-pk-x {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	border-radius: 10px;
	color: #1c1c1a;
}
#rezflow-pk-overlay .rezflow-pk-ok {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	border-radius: 14px;
	background: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-text, #ffffff);
	font-size: 17px;
	font-weight: 700;
}
#rezflow-pk-overlay .rezflow-pk-ok:hover {
	background: var(--rezflow-button-hover-bg, #c1633f);
	color: var(--rezflow-button-hover-text, #ffffff);
}
#rezflow-pk-overlay .rezflow-pk-ok[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Calendar */
#rezflow-pk-overlay .rezflow-pk-wk {
	position: sticky;
	top: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	padding: 4px 0 8px;
	background: #ffffff;
	font-size: 13px;
	font-weight: 600;
	color: #5c5a54;
	text-align: center;
}
#rezflow-pk-overlay .rezflow-pk-mon {
	margin: 18px 0 8px;
	text-align: center;
	font-size: 17px;
	font-weight: 800;
}
#rezflow-pk-overlay .rezflow-pk-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}
#rezflow-pk-overlay .rezflow-pk-blank {
	height: 46px;
}
#rezflow-pk-overlay .rezflow-pk-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	border-radius: 10px;
	background: #f2f0ea;
	color: #1c1c1a;
	font-size: 15px;
}
#rezflow-pk-overlay .rezflow-pk-day.is-today::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 2px;
	background: currentColor;
}
#rezflow-pk-overlay .rezflow-pk-day.is-in {
	background: color-mix(in srgb, var(--rezflow-button-bg, #DC2626) 16%, #ffffff);
	color: #1c1c1a;
	border-radius: 0;
}
#rezflow-pk-overlay .rezflow-pk-day.is-start,
#rezflow-pk-overlay .rezflow-pk-day.is-end {
	background: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-text, #ffffff);
	font-weight: 700;
}
#rezflow-pk-overlay .rezflow-pk-day.is-start.has-end { border-radius: 10px 0 0 10px; }
#rezflow-pk-overlay .rezflow-pk-day.is-end { border-radius: 0 10px 10px 0; }
#rezflow-pk-overlay .rezflow-pk-day.is-start.is-end { border-radius: 10px; }
#rezflow-pk-overlay .rezflow-pk-day[disabled] {
	background: transparent;
	color: #8f8c83;
	text-decoration: line-through;
	cursor: not-allowed;
}
#rezflow-pk-overlay .rezflow-pk-legend {
	margin: 12px 0 0;
	padding: 0;
	text-align: center;
	font-size: 13px;
	color: #5c5a54;
}

/* Time list */
#rezflow-pk-overlay .rezflow-pk-slots {
	display: flex;
	flex-direction: column;
}
#rezflow-pk-overlay .rezflow-pk-slot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 0 12px;
	border-bottom: 1px solid #ece9e1;
	font-size: 17px;
	color: #1c1c1a;
}
#rezflow-pk-overlay .rezflow-pk-slot[aria-checked="true"] {
	font-weight: 800;
	color: var(--rezflow-button-bg, #DC2626);
}
#rezflow-pk-overlay .rezflow-pk-empty {
	padding: 28px 12px;
	text-align: center;
	color: #5c5a54;
}

/* ------------------------------------------------------------------ *
 *  Results page, phone layout (v0.6.0) -- see initMobileResults().
 *  Everything below applies at <= 700px only, and the JS-dependent parts
 *  are scoped to .rezflow-js so the page degrades to the normal stacked
 *  layout when JS is off. Desktop is untouched.
 * ------------------------------------------------------------------ */
.rezflow-results__summary,
.rezflow-results__mbar,
.rezflow-results__sheet-head,
.rezflow-results__sheet-foot,
.rezflow-results__scrim,
.rezflow-results__sortsheet {
	display: none;
}

@media (max-width: 700px) {
	/* Compact search summary */
	.rezflow-results.rezflow-js .rezflow-results__summary {
		display: flex;
		flex-direction: column;
		gap: 2px;
		width: 100%;
		margin: 0 0 12px;
		padding: 10px 16px;
		border: 1px solid #c9c6bd;
		border-radius: 12px;
		background: #ffffff;
		color: #1c1c1a;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.rezflow-results__summary-loc {
		font-size: 16px;
		font-weight: 600;
	}
	.rezflow-results__summary-when {
		font-size: 14px;
		color: #5c5a54;
	}
	.rezflow-results.rezflow-js .rezflow-results__searchbar {
		display: none;
	}
	.rezflow-results.rezflow-js .rezflow-results__searchbar.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		margin-bottom: 16px;
	}
	/* Column layout: cards must size to their own content, not to the
	   desktop flex-basis (that made each one 130-210px tall). */
	.rezflow-results.rezflow-js .rezflow-results__searchbar.is-open .rezflow-results__searchcard {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	.rezflow-results.rezflow-js .rezflow-results__searchbar.is-open .rezflow-results__searchbar-submit {
		flex: 0 0 auto;
		width: 100%;
		height: 52px;
		box-sizing: border-box;
	}

	/* Count line, then Filter | Sort buttons */
	.rezflow-results.rezflow-js .rezflow-results__sort {
		display: none;
	}
	.rezflow-results__count {
		flex-wrap: wrap;
		gap: 2px 10px;
	}
	.rezflow-results.rezflow-js .rezflow-results__mbar {
		display: flex;
		gap: 12px;
		margin: 0 0 16px;
	}
	.rezflow-results__mbtn {
		flex: 1 1 0;
		height: 48px;
		border: 1.5px solid var(--rezflow-button-bg, #DC2626);
		border-radius: 12px;
		background: #ffffff;
		color: var(--rezflow-button-bg, #DC2626);
		font: inherit;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
	}

	/* Filter rail -> bottom sheet */
	.rezflow-results.rezflow-js .rezflow-results__filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		width: 100%;
		max-height: 88vh;
		max-height: 88dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 20px;
		border: 0;
		border-radius: 20px 20px 0 0;
		background: #ffffff;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform 0.22s ease, visibility 0s linear 0.22s;
	}
	.rezflow-results.rezflow-js .rezflow-results__filters.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.22s ease;
	}
	.rezflow-results.rezflow-js .rezflow-results__filters .rezflow-results__sheet-head,
	.rezflow-results__sortsheet .rezflow-results__sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 2;
		min-height: 56px;
		margin: 0 -20px;
		padding: 8px 8px 4px 20px;
		background: #ffffff;
		font-size: 18px;
		font-weight: 800;
		color: #1c1c1a;
	}
	.rezflow-results__sheet-x {
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		color: #1c1c1a;
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
	}
	.rezflow-results.rezflow-js .rezflow-results__filters .rezflow-results__sheet-foot {
		display: block;
		position: sticky;
		bottom: 0;
		margin: 0 -20px;
		padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
		background: #ffffff;
		border-top: 1px solid #ece9e1;
	}
	.rezflow-results__sheet-apply {
		display: block;
		width: 100%;
		height: 56px;
		border: 0;
		border-radius: 14px;
		background: var(--rezflow-button-bg, #DC2626);
		color: var(--rezflow-button-text, #ffffff);
		font: inherit;
		font-size: 17px;
		font-weight: 700;
		cursor: pointer;
	}
	.rezflow-results__scrim {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99998;
		background: rgba(0, 0, 0, 0.5);
	}
	.rezflow-results__scrim:not([hidden]) {
		display: block;
	}

	/* Sort sheet */
	.rezflow-results__sortsheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
		border-radius: 20px 20px 0 0;
		background: #ffffff;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	}
	.rezflow-results__sortsheet:not([hidden]) {
		display: block;
	}
	.rezflow-results__sortrow {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		min-height: 52px;
		padding: 0;
		border: 0;
		background: none;
		color: #1c1c1a;
		font: inherit;
		font-size: 17px;
		text-align: left;
		cursor: pointer;
	}
	.rezflow-results__radio {
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
		box-sizing: border-box;
		border: 2px solid #9b9890;
		border-radius: 50%;
	}
	.rezflow-results__sortrow.is-on .rezflow-results__radio {
		border: 6px solid var(--rezflow-button-bg, #DC2626);
	}

	/* Vehicle cards: text left, photo right, price + button underneath */
	.rezflow-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 120px;
		grid-template-areas: "body image" "body badge" "price price" "select select";
		grid-template-rows: auto 1fr auto auto;
		gap: 10px 14px;
		padding: 14px;
		border-radius: 16px;
	}
	.rezflow-card__image {
		grid-area: image;
		width: 120px;
		height: 68px;
		align-self: start;
	}
	.rezflow-card__body {
		grid-area: body;
		justify-content: flex-start;
	}
	.rezflow-card__features {
		display: none;
	}
	.rezflow-card__body {
		gap: 6px;
	}
	.rezflow-card__desc,
	.rezflow-card__specs,
	.rezflow-card__note {
		margin: 0;
	}
	.rezflow-card__specs {
		gap: 2px 14px;
	}
	.rezflow-card__price-daily,
	.rezflow-card__price-days {
		margin: 0;
	}
	/* Description: two lines, "Read more" expands (button added by JS). */
	.rezflow-card__desc {
		-webkit-line-clamp: 2;
	}
	.rezflow-card__desc.is-open {
		display: block;
		-webkit-line-clamp: unset;
		overflow: visible;
	}
	.rezflow-card__more {
		all: unset;
		display: inline-block;
		margin-top: 2px;
		font-size: 13px;
		font-weight: 600;
		color: var(--rezflow-button-bg, #DC2626);
		cursor: pointer;
	}
	/* price column dissolves so the badge can sit under the photo */
	.rezflow-card__price-col {
		display: contents;
	}
	.rezflow-card__price-badge {
		grid-area: badge;
		justify-self: end;
		align-self: start;
		margin: 0;
	}
	.rezflow-card__price {
		grid-area: price;
		text-align: right;
	}
	.rezflow-card__select {
		grid-area: select;
		width: 100%;
		height: 48px;
		line-height: 48px;
		border-radius: 12px;
		background: var(--rezflow-button-bg, #DC2626);
		color: var(--rezflow-button-text, #ffffff);
		border-color: transparent;
	}
}

/* ------------------------------------------------------------------ *
 *  Reservation page, phone layout (v0.7.0) -- see initMobileReservation().
 *  <= 700px only; JS parts scoped to .rezflow-res-js.
 * ------------------------------------------------------------------ */
.rezflow-reservation__trip-toggle,
.rezflow-reservation__bar-total {
	display: none;
}

@media (max-width: 700px) {
	.rezflow-reservation__heading {
		font-size: 22px;
		margin-bottom: 14px;
	}
	/* summary first, then the form, then the price breakdown */
	/* One flat column so the order can be: vehicle summary, the step's
	   cards, price breakdown, then the action bar. The left column, the
	   form and the visible step dissolve (display:contents); hidden steps
	   keep their [hidden] state. */
	.rezflow-reservation__layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.rezflow-reservation__right,
	.rezflow-reservation__left,
	.rezflow-reservation__left form,
	.rezflow-reservation__step:not([hidden]) {
		display: contents;
	}
	.rezflow-reservation__vehicle-card {
		order: -1;
	}
	.rezflow-reservation__breakdown {
		order: 1;
	}
	.rezflow-reservation__step-actions {
		order: 3;
	}
	.rezflow-reservation [data-rezflow-reservation-result] {
		order: 2;
	}
	.rezflow-reservation__card {
		padding: 16px;
		border-radius: 14px;
	}

	/* compact vehicle summary */
	.rezflow-reservation .rezflow-reservation__vehicle-head {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
	.rezflow-reservation .rezflow-reservation__image {
		width: 96px;
		height: 60px;
	}
	.rezflow-reservation.rezflow-res-js .rezflow-reservation__vehicle-card:not(.is-open) .rezflow-reservation__trip,
	.rezflow-reservation.rezflow-res-js .rezflow-reservation__vehicle-card:not(.is-open) .rezflow-reservation__specs {
		display: none;
	}
	.rezflow-reservation.rezflow-res-js .rezflow-reservation__trip-toggle {
		all: unset;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid #f0efe9;
		font-size: 14px;
		font-weight: 600;
		color: var(--rezflow-button-bg, #DC2626);
		cursor: pointer;
	}
	.rezflow-reservation__trip-toggle svg {
		transition: transform 0.15s ease;
	}
	.rezflow-reservation__vehicle-card.is-open .rezflow-reservation__trip-toggle svg {
		transform: rotate(180deg);
	}

	/* sticky action bar */
	.rezflow-reservation.rezflow-res-js .rezflow-reservation__step-actions {
		position: sticky;
		bottom: 0;
		z-index: 50;
		flex-wrap: wrap;
		margin: 0;
		padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
		background: #ffffff;
		border: 1px solid #e5e3db;
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
	}
	.rezflow-reservation.rezflow-res-js .rezflow-reservation__bar-total {
		display: flex;
		flex: 1 0 100%;
		align-items: baseline;
		justify-content: space-between;
		font-size: 13px;
		color: #5b5748;
	}
	.rezflow-reservation.rezflow-res-js .rezflow-reservation__bar-total[hidden] {
		display: none;
	}
	.rezflow-reservation__bar-total strong {
		font-size: 18px;
		color: #1c1c1a;
	}
	.rezflow-reservation .rezflow-reservation__submit,
	.rezflow-reservation .rezflow-reservation__back {
		min-height: 52px;
		border-radius: 12px;
	}
}

/* ------------------------------------------------------------------ *
 *  Confirmation screen (v0.8.0). Shown in place of the form after
 *  ADDREZ succeeds; .is-confirmed (set by the submit handler) hides the
 *  stepper and the summary/price column, which the confirmation repeats.
 * ------------------------------------------------------------------ */
.rezflow-reservation.is-confirmed .rezflow-reservation__heading,
.rezflow-reservation.is-confirmed .rezflow-reservation__progress,
.rezflow-reservation.is-confirmed .rezflow-reservation__right {
	display: none;
}

.rezflow-reservation.is-confirmed .rezflow-reservation__layout {
	grid-template-columns: minmax(0, 1fr);
}

.rezflow-reservation__confirmation {
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.rezflow-reservation__confirmation-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #16a34a;
	color: #ffffff;
}

.rezflow-reservation__confirmation h2 {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	color: #1c1c1a;
}

.rezflow-reservation__confirmation-num {
	width: 100%;
	box-sizing: border-box;
	padding: 16px;
	border: 1.5px dashed #c9c6bd;
	border-radius: 14px;
	background: #faf9f6;
}

.rezflow-reservation__confirmation-num span {
	display: block;
	font-size: 13px;
	color: #5b5748;
}

.rezflow-reservation__confirmation-num strong {
	display: block;
	margin-top: 4px;
	font-size: 30px;
	letter-spacing: 0.04em;
	color: #1c1c1a;
	word-break: break-all;
}

.rezflow-reservation__confirmation-note {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #5b5748;
}

.rezflow-reservation__confirmation-card {
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.rezflow-reservation__confirmation-card h3 span {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: #8a8574;
}

.rezflow-reservation__trip--plain {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ------------------------------------------------------------------ *
 *  Cancellation page, [rezflow_cancel] (v0.9.0). Mobile-first; inputs are
 *  16px so iOS Safari doesn't zoom on focus.
 * ------------------------------------------------------------------ */
.rezflow-cancel {
	max-width: 520px;
	margin: 0 auto;
	box-sizing: border-box;
	color: #1c1c1a;
}

.rezflow-cancel__panel {
	background: #ffffff;
	border: 1px solid #e5e3db;
	border-radius: 16px;
	padding: 24px;
}

.rezflow-cancel__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: #1c1c1a;
}

.rezflow-cancel__lead {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.5;
	color: #5b5748;
}

.rezflow-cancel__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rezflow-cancel__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.rezflow-cancel__field input {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	padding: 0 14px;
	border: 1.5px solid #d8d6cc;
	border-radius: 12px;
	background: #ffffff;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	color: #1c1c1a;
}

.rezflow-cancel__field input:focus {
	outline: none;
	border-color: var(--rezflow-button-bg, #DC2626);
}

.rezflow-cancel__btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	background: var(--rezflow-button-bg, #DC2626);
	color: var(--rezflow-button-text, #ffffff);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 52px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.rezflow-cancel__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.rezflow-cancel__btn--ghost {
	background: #ffffff;
	color: #1c1c1a;
	border-color: #d8d6cc;
}

.rezflow-cancel__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rezflow-cancel__error {
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fdecec;
	color: #8a1f1f;
	font-size: 14px;
	line-height: 1.45;
}

.rezflow-cancel__error[hidden] {
	display: none;
}

.rezflow-cancel__foot {
	margin: 16px 0 0;
	font-size: 13px;
	color: #8a8574;
	text-align: center;
}

.rezflow-cancel__card {
	margin: 0 0 16px;
	padding: 4px 16px;
	border: 1px solid #ece9e1;
	border-radius: 12px;
	background: #faf9f6;
}

.rezflow-cancel__row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid #ece9e1;
	font-size: 14px;
}

.rezflow-cancel__row:last-child {
	border-bottom: 0;
}

.rezflow-cancel__row span {
	color: #8a8574;
	font-size: 12px;
}

.rezflow-cancel__policy {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #5b5748;
}

.rezflow-cancel__warn {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: #8a1f1f;
}

.rezflow-cancel__btn--danger {
	background: #b32d2e;
	color: #ffffff;
}

.rezflow-cancel__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}

.rezflow-cancel__done .rezflow-cancel__card {
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.rezflow-cancel__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: #16a34a;
	color: #ffffff;
}

@media (max-width: 700px) {
	.rezflow-cancel__panel {
		padding: 18px;
		border-radius: 14px;
	}
}

/* v0.10.2: booking-request lead line on the confirmation screen */
.rezflow-reservation__confirmation-lead {
	margin: 0 auto 16px;
	max-width: 460px;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
	color: #1c1c1a;
}

/* v0.12.0: branch name as a Google Maps link */
.rezflow-maplink {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(138, 133, 116, 0.5);
	text-underline-offset: 3px;
}
.rezflow-maplink:hover,
.rezflow-maplink:focus {
	color: #1c1c1a;
	text-decoration-color: currentColor;
}
.rezflow-maplink__icon {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 5px;
	vertical-align: -1px;
	background: currentColor;
	opacity: 0.7;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* v0.13.0: pick-up point choice */
.rezflow-reservation__pickup-points .rezflow-reservation__tier-options {
	margin-top: 8px;
}

/* v0.13.1: pick-up and return points side by side in one card */
.rezflow-reservation__point-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 12px;
}
.rezflow-reservation__point-col h3 {
	margin: 0 0 8px;
	font-size: 15px;
}
@media (min-width: 640px) {
	.rezflow-reservation__point-cols--2 {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}

/* v0.16.4: stand-in when a class has no usable photo (reservation summary) */
.rezflow-reservation__image--ph { color: #a39c86; padding: 8px; box-sizing: border-box; background: #f3f1ea; border-radius: 6px; }

/* v0.16.11: block themes (e.g. Twenty Twenty-Five) squeeze page content into a
   ~650px column, which crushed the results and reservation layouts. On wide
   screens let these two pages break out of that column, centred, up to 1280px. */
@media (min-width: 900px) {
	.rezflow-results,
	.rezflow-reservation {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: min(1280px, calc(100vw - 64px));
		max-width: none;
		margin: 0;
	}
}