/**
 * Remlinger Fall Harvest Tour Requests — Field Note (variant 1a).
 *
 * Everything is namespaced .rft- and every custom property is scoped to
 * .rft-root so the Global Shell's own tokens cannot leak in or out.
 */

/* -------------------------------------------------------------------------
 * Fonts — latin subsets, self-hosted, namespaced so they cannot collide
 * with the shell's Montserrat.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: "RF Tour Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/rf-tour-serif-400.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "RF Tour Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/rf-tour-barlow-400.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "RF Tour Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/rf-tour-barlow-500.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "RF Tour Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/rf-tour-barlow-600.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "RF Tour Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/rf-tour-barlow-700.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

.rft-root {
	--rft-cream: #f8f2e5;
	--rft-panel: #fdf9f0;
	--rft-field: #fffdf7;
	--rft-ink: #1a1511;
	--rft-ink-soft: #2a231b;
	--rft-body: #4a4034;
	--rft-muted: #776954;
	--rft-muted-2: #7e7059;
	--rft-label: #796d56;
	--rft-place: #7f7058;
	--rft-cider: #b9531b;
	--rft-cider-hover: #a34918;
	--rft-cider-text: #ab511c;
	--rft-gold: #f0a94a;
	--rft-line: #eae0cc;
	--rft-line-2: #e0d3b9;
	--rft-amber: #fbebd3;
	--rft-amber-line: #ebd3ac;
	--rft-blocked-bg: #e7ddc9;
	--rft-blocked-fg: #6c604d;
	--rft-onink: #f8f2e5;
	--rft-onink-soft: #b9a88c;

	--rft-sans: "RF Tour Sans", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--rft-serif: "RF Tour Serif", "DM Serif Display", Georgia, "Times New Roman", serif;

	--rft-pad: clamp(20px, 5vw, 38px);
	--rft-radius: 20px;
	--rft-shadow: 0 34px 80px rgba(26, 21, 17, 0.3);
}

/* -------------------------------------------------------------------------
 * Overlay and shell
 * ---------------------------------------------------------------------- */

.rft-root {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0px, 3vw, 32px);
	font-family: var(--rft-sans);
	font-size: 16px;
	line-height: 1.45;
	color: var(--rft-ink);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.rft-root[hidden] {
	display: none !important;
}

.rft-root *,
.rft-root *::before,
.rft-root *::after {
	box-sizing: border-box;
}

.rft-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 14, 9, 0.62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: rft-fade 0.24s ease both;
}

.rft-shell {
	position: relative;
	width: 100%;
	max-width: 1080px;
	max-height: 100vh;
	max-height: 100dvh;
	display: flex;
	outline: none;
}

.rft-modal {
	position: relative;
	width: 100%;
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: var(--rft-cream);
	border-radius: var(--rft-radius);
	box-shadow: var(--rft-shadow);
	scrollbar-gutter: stable;
}

/* The container is the shell, not the scroller, so .rft-modal itself can
   respond to it — an element can never match its own container query. */
@supports (container-type: inline-size) {
	.rft-shell {
		container-type: inline-size;
		container-name: rftmodal;
	}
}

/* Phone: a full-height sheet, not a floating card. */
@media (max-width: 719px) {
	.rft-root {
		padding: 0;
		align-items: stretch;
	}

	.rft-shell {
		max-width: none;
	}

	.rft-modal {
		border-radius: 0;
		max-height: none;
		height: 100vh;
		height: 100dvh;
		padding-bottom: env(safe-area-inset-bottom);
	}
}

/* -------------------------------------------------------------------------
 * Shared pieces
 * ---------------------------------------------------------------------- */

.rft-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rft-root :focus-visible {
	outline: 3px solid var(--rft-cider);
	outline-offset: 2px;
	border-radius: 6px;
}

.rft-hero :focus-visible,
.rft-card--ink :focus-visible,
.rft-total :focus-visible,
.rft-lockstrip :focus-visible {
	outline-color: var(--rft-gold);
}

.rft-screen[hidden] {
	display: none !important;
}

.rft-screen {
	animation: rft-rise 0.4s ease both;
}

.rft-eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rft-muted);
	margin: 0;
}

.rft-eyebrow--cider {
	color: var(--rft-cider-text);
}

.rft-eyebrow--onink {
	color: var(--rft-onink-soft);
}

.rft-label {
	margin-bottom: 10px;
}

.rft-req {
	color: var(--rft-cider-text);
	font-weight: 700;
}

.rft-pill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--rft-cider);
	color: #fff6e7;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.rft-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 56px;
	padding: 16px 26px;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.rft-btn--primary {
	background: var(--rft-cider);
	color: #fff7e9;
	box-shadow: 0 10px 24px rgba(169, 72, 19, 0.32);
}

.rft-btn--primary:hover {
	background: var(--rft-cider-hover);
	color: #fff7e9;
	transform: translateY(-1px);
}

.rft-btn--primary:active {
	transform: translateY(1px);
}

.rft-btn--ghost {
	background: transparent;
	color: var(--rft-ink);
	border: 1px solid var(--rft-ink);
	min-height: 52px;
}

.rft-btn--ghost:hover {
	background: var(--rft-ink);
	color: var(--rft-cream);
}

.rft-btn--wide {
	flex: 1 1 220px;
}

/* -------------------------------------------------------------------------
 * Screen 1 — hero
 * ---------------------------------------------------------------------- */

.rft-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(230px, 34vw, 330px);
	background: #241c15;
	overflow: hidden;
}

.rft-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 34%;
	display: block;
}

/* Two scrims, not one. The first shapes the photo; the second sits only under
   the text block. Measured against rendered pixels — the pale concrete behind
   the scarecrows put the kicker at 1.56:1 with a single gradient. */
.rft-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 14, 9, 0.5) 0%, rgba(20, 14, 9, 0.12) 34%, rgba(20, 14, 9, 0.8) 100%);
}

.rft-hero__body {
	position: relative;
	width: 100%;
	padding: var(--rft-pad);
	background: linear-gradient(180deg, rgba(20, 14, 9, 0.3) 0%, rgba(20, 14, 9, 0.45) 60%, rgba(20, 14, 9, 0.55) 100%);
}

.rft-hero__kickers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 14px;
}

.rft-hero__place {
	color: #f0e6d4;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.rft-hero__title {
	margin: 0;
	font-family: var(--rft-serif);
	font-weight: 400;
	font-size: clamp(34px, 7vw, 62px);
	line-height: 0.98;
	letter-spacing: -0.01em;
	color: #fdf8ed;
	text-wrap: balance;
}

.rft-hero__lead {
	margin: 14px 0 0;
	max-width: 44ch;
	color: #f1e7d5;
	font-size: clamp(15px, 1.8vw, 18px);
	line-height: 1.5;
	text-wrap: pretty;
}

.rft-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid rgba(248, 242, 229, 0.45);
	background: rgba(20, 14, 9, 0.6);
	color: #f8f2e5;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	z-index: 2;
}

.rft-close:hover {
	background: rgba(20, 14, 9, 0.85);
}

/* Lock strip */

.rft-lockstrip {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 16px var(--rft-pad);
	background: var(--rft-ink);
	color: #f3e8d3;
}

.rft-lockstrip p {
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
}

.rft-lockstrip strong {
	color: var(--rft-gold);
}

.rft-lockstrip__icon {
	font-size: 16px;
	line-height: 1.4;
}

/* Info body */

.rft-info {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 44px);
	padding: var(--rft-pad);
}

.rft-info__main {
	flex: 1 1 360px;
	min-width: 0;
}

.rft-info__side {
	flex: 1 1 280px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rft-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: #e2d6be;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: clamp(22px, 3vw, 30px);
}

.rft-stat {
	flex: 1 1 130px;
	background: var(--rft-panel);
	padding: 16px 18px;
}

.rft-stat__value {
	font-family: var(--rft-serif);
	font-size: 22px;
	margin-top: 6px;
	line-height: 1.1;
}

.rft-stat__unit {
	font-size: 14px;
	font-family: var(--rft-sans);
	color: #6e6250;
}

.rft-stat__note {
	font-size: 13px;
	color: #6e6250;
	margin-top: 3px;
}

.rft-h2 {
	margin: 0 0 10px;
	font-family: var(--rft-serif);
	font-weight: 400;
	font-size: clamp(24px, 3.4vw, 32px);
	line-height: 1.1;
}

.rft-body {
	margin: 0 0 16px;
	color: var(--rft-body);
	font-size: clamp(15px, 1.7vw, 16.5px);
	line-height: 1.6;
	max-width: 60ch;
	text-wrap: pretty;
}

.rft-pumpkin {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
	background: var(--rft-amber);
	border: 1px solid var(--rft-amber-line);
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
}

.rft-pumpkin__copy {
	flex: 1 1 220px;
	min-width: 0;
}

.rft-pumpkin__copy p {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: #3e3428;
}

.rft-pumpkin-photo {
	flex: 0 1 150px;
	min-width: 120px;
	height: 104px;
	/* The source may be any shape — the site's mobile hero crop is portrait —
	   so the slot fixes the aspect and the photo is cropped to fill it. */
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 12px;
}

/* Once the card wraps, a lonely 150px thumbnail on its own row reads like a
   mistake. Stack it as a full-width band instead. */
@media (max-width: 560px) {
	.rft-pumpkin {
		flex-direction: column;
	}

	/* flex-basis is the height once the axis flips — 220px there leaves a gap
	   under the copy. Let both children size to their content instead. */
	.rft-pumpkin__copy {
		flex: none;
	}

	.rft-pumpkin-photo {
		flex: none;
		width: 100%;
		height: 128px;
	}
}

.rft-fineprint {
	margin: 0;
	color: #6f624f;
	font-size: 13.5px;
	line-height: 1.5;
	max-width: 62ch;
}

.rft-card {
	border-radius: 18px;
	padding: clamp(18px, 2.6vw, 24px);
}

.rft-card--ink {
	background: var(--rft-ink);
	color: var(--rft-onink);
}

.rft-card__lead {
	margin: 10px 0 0;
	font-family: var(--rft-serif);
	font-size: clamp(19px, 2.4vw, 24px);
	line-height: 1.25;
	color: #fdf8ed;
}

.rft-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.rft-tags li {
	padding: 6px 11px;
	border: 1px solid rgba(248, 242, 229, 0.34);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #e9dcc3;
}

.rft-card--quote {
	border: 1px dashed var(--rft-line-2);
	background: var(--rft-panel);
}

.rft-card--quote p {
	margin: 0;
	font-family: var(--rft-serif);
	font-style: italic;
	font-size: clamp(17px, 2.2vw, 21px);
	line-height: 1.35;
	color: #3e3428;
}

/* Sticky footers */

/* The bar itself is opaque — a gradient that only reaches full cream a quarter
   of the way down lets whatever is scrolling underneath show through the text.
   The fade lives in ::before, above the bar, where nothing sits on top of it. */
.rft-footbar,
.rft-submitbar {
	position: sticky;
	bottom: 0;
	z-index: 4;
	background: var(--rft-cream);
	border-top: 1px solid var(--rft-line);
	padding: 14px var(--rft-pad) max(18px, env(safe-area-inset-bottom));
}

.rft-footbar::before,
.rft-submitbar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 26px;
	background: linear-gradient(180deg, rgba(248, 242, 229, 0), var(--rft-cream));
	pointer-events: none;
}

.rft-footbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.rft-footbar__note {
	flex: 1 1 150px;
	min-width: 0;
}

.rft-footbar__sub {
	font-size: 14px;
	color: var(--rft-body);
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
 * Screen 2 — the request
 * ---------------------------------------------------------------------- */

.rft-formhead {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: clamp(16px, 2.6vw, 22px) var(--rft-pad);
	background: var(--rft-cream);
	border-bottom: 1px solid var(--rft-line);
}

/* The dialog's ✕ lives in the hero, which only screen one shows. The form head
   is sticky, so a close control placed at its end stays reachable however far
   down the form the visitor has scrolled. Same 44px target as the back arrow. */
.rft-formhead__close {
	margin-left: auto;
	font-size: 21px;
}

.rft-back {
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid var(--rft-line-2);
	background: var(--rft-panel);
	color: var(--rft-body);
	font-size: 17px;
	cursor: pointer;
}

.rft-back:hover {
	background: #f1e7d3;
}

.rft-formhead__text {
	min-width: 0;
}

.rft-formhead__title {
	font-family: var(--rft-serif);
	font-size: clamp(19px, 2.8vw, 26px);
	line-height: 1.15;
	margin-top: 2px;
}

.rft-form__cols {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(22px, 3.4vw, 40px);
	padding: var(--rft-pad);
}

/* Keep scroll-into-view (focus, autofill, validation jumps) clear of the
   sticky step header. */
.rft-screen--form .rft-label,
.rft-screen--form .rft-cal,
.rft-screen--form .rft-chips,
.rft-screen--form .rft-count,
.rft-screen--form .rft-field {
	scroll-margin-top: 96px;
	scroll-margin-bottom: 96px;
}

/* Stacked by default. The two-column split only switches on once the modal is
   wide enough for a calendar whose day buttons still clear 44px — at 768 and
   852 a side-by-side split squeezed them to 42-43px. */
.rft-col {
	flex: 1 1 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

@media (min-width: 940px) {
	.rft-col {
		flex: 1 1 0;
	}
}

.rft-col + .rft-col {
	gap: 22px;
}

.rft-col:first-child .rft-cal + .rft-label {
	margin-top: 22px;
}

/* Calendar */

.rft-cal {
	background: var(--rft-panel);
	border: 1px solid var(--rft-line);
	border-radius: 18px;
	padding: clamp(14px, 2vw, 20px);
}

.rft-cal__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.rft-cal__month {
	font-family: var(--rft-serif);
	font-size: 20px;
}

.rft-cal__only {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rft-cider-text);
}

.rft-cal__dow,
.rft-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.rft-cal__dow {
	margin-bottom: 4px;
}

.rft-cal__dow div {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--rft-muted-2);
}

.rft-cal__dow div.is-tour {
	color: var(--rft-cider-text);
}

.rft-cal__cell {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}

.rft-day {
	width: 100%;
	height: 100%;
	min-height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--rft-line-2);
	border-radius: 11px;
	background: var(--rft-field);
	color: var(--rft-ink-soft);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.rft-day:hover {
	background: var(--rft-amber);
	border-color: var(--rft-cider);
}

.rft-day[aria-pressed="true"] {
	border-color: transparent;
	background: var(--rft-cider);
	color: #fff7e9;
	font-weight: 700;
	box-shadow: 0 6px 14px rgba(169, 72, 19, 0.35);
}

.rft-day--off {
	border: none;
	background: none;
	color: var(--rft-muted-2);
	font-weight: 400;
	font-size: 14px;
	cursor: default;
	box-shadow: none;
}

/* Second-choice chips */

.rft-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rft-chip {
	min-height: 44px;
	padding: 11px 18px;
	border: 1px solid var(--rft-line-2);
	border-radius: 999px;
	background: var(--rft-panel);
	color: var(--rft-body);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.rft-chip:hover {
	background: #f1e7d3;
}

.rft-chip[aria-pressed="true"] {
	background: var(--rft-ink);
	border-color: var(--rft-ink);
	color: var(--rft-cream);
}

.rft-chip[hidden] {
	display: none !important;
}

.rft-hint {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6f624f;
}

/* Counts */

.rft-counts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rft-count {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--rft-panel);
	border: 1px solid var(--rft-line);
	border-radius: 14px;
	padding: 12px 14px;
}

.rft-count__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.rft-count__label {
	font-size: 15.5px;
	font-weight: 600;
}

.rft-count__sub {
	font-size: 13px;
	color: #6f624f;
}

.rft-count__ctrl {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.rft-step {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid var(--rft-line-2);
	background: var(--rft-field);
	color: var(--rft-body);
	font-family: inherit;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.rft-step:hover:not(:disabled) {
	background: #f1e7d3;
}

.rft-step:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.rft-count__value {
	min-width: 34px;
	text-align: center;
	font-family: var(--rft-serif);
	font-size: 22px;
}

.rft-total {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	background: var(--rft-ink);
	color: var(--rft-onink);
	border-radius: 14px;
	padding: 14px 16px;
}

.rft-total__left {
	min-width: 0;
}

.rft-total__break {
	font-size: 13px;
	color: #d9c9ac;
	margin-top: 3px;
}

.rft-total__amount {
	font-family: var(--rft-serif);
	font-size: clamp(26px, 3.6vw, 34px);
	color: var(--rft-gold);
	line-height: 1;
}

/* Fields */

.rft-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rft-fields__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rft-field {
	display: block;
	background: var(--rft-field);
	border: 1px solid var(--rft-line-2);
	border-radius: 14px;
	padding: 8px 14px;
}

.rft-field--half {
	flex: 1 1 150px;
	min-width: 0;
}

.rft-field__label {
	display: block;
	cursor: pointer;
}

.rft-field__name {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rft-label);
}

.rft-field__opt {
	text-transform: none;
	letter-spacing: 0;
	color: var(--rft-place);
	font-weight: 500;
}

.rft-field__control {
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	/* 16px minimum keeps iOS Safari from zooming on focus. */
	font-size: 16.5px;
	color: var(--rft-ink);
	/* The control is the tap target, not the box around it, so it carries the
	   44px itself rather than borrowing height from the label wrapper. */
	min-height: 44px;
	padding: 4px 0 2px;
	line-height: 1.45;
}

textarea.rft-field__control {
	resize: vertical;
	min-height: 66px;
}

.rft-root ::placeholder {
	color: var(--rft-place);
	opacity: 1;
}

/* Ring the whole field, not just the control — an outline on a 44px input
   inside a padded box cuts straight through the label above it. */
.rft-field:has(.rft-field__control:focus-visible) {
	outline: 3px solid var(--rft-cider);
	outline-offset: 2px;
}

@supports selector(:has(*)) {
	.rft-field__control:focus-visible {
		outline: none;
	}
}

.rft-field.is-invalid {
	border-color: #a3301b;
	background: #fff6f2;
}

.rft-field__err {
	margin: 4px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #96291a;
}

.rft-field__err[hidden] {
	display: none !important;
}

/* Honeypot — off screen, never display:none, so bots still fill it. */

.rft-hp {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submit */

.rft-submitbar {
	display: block;
}

.rft-btn--submit {
	width: 100%;
	min-height: 58px;
}

.rft-btn--submit.is-blocked {
	background: var(--rft-blocked-bg);
	color: var(--rft-blocked-fg);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: none;
	cursor: not-allowed;
}

.rft-btn--submit.is-blocked:hover {
	background: var(--rft-blocked-bg);
	color: var(--rft-blocked-fg);
	transform: none;
}

.rft-btn--submit.is-sending {
	cursor: progress;
	opacity: 0.85;
}

.rft-error {
	margin: 0 0 10px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #fdece7;
	border: 1px solid #f0c3b6;
	color: #8c2617;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.rft-error[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Screen 3 — done
 * ---------------------------------------------------------------------- */

.rft-done {
	padding: clamp(26px, 5vw, 46px) var(--rft-pad) max(22px, env(safe-area-inset-bottom));
}

.rft-done__badge {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--rft-cider);
	color: #fff7e9;
	display: grid;
	place-items: center;
	font-size: 28px;
	margin-bottom: 20px;
}

.rft-done__title {
	margin: 0;
	font-family: var(--rft-serif);
	font-weight: 400;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.rft-done__lead {
	margin: 12px 0 24px;
	max-width: 52ch;
	color: var(--rft-body);
	font-size: clamp(15px, 1.8vw, 17px);
	line-height: 1.55;
	text-wrap: pretty;
}

.rft-receipt {
	background: var(--rft-panel);
	border: 1px solid var(--rft-line);
	border-radius: 18px;
	overflow: hidden;
	max-width: 560px;
}

.rft-receipt__head {
	padding: 12px 18px;
	background: var(--rft-ink);
	color: var(--rft-onink);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.rft-receipt__body {
	margin: 0;
	padding: 6px 18px 14px;
}

.rft-receipt__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid #efe6d3;
}

.rft-receipt__row:last-child {
	border-bottom: none;
}

.rft-receipt__row dt {
	color: #6f624f;
	font-size: 14px;
}

.rft-receipt__row dd {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	max-width: 62%;
	overflow-wrap: anywhere;
}

.rft-receipt__row--total {
	align-items: baseline;
	padding: 14px 0 4px;
	border-top: 2px solid var(--rft-ink);
	border-bottom: none;
	margin-top: 6px;
}

.rft-receipt__row--total dt {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rft-muted);
}

.rft-receipt__row--total dd {
	font-family: var(--rft-serif);
	font-weight: 400;
	font-size: 28px;
	color: var(--rft-cider-text);
}

.rft-done__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.rft-done__actions .rft-btn {
	flex: 1 1 200px;
	min-height: 52px;
	font-size: 15.5px;
}

/* -------------------------------------------------------------------------
 * Trigger button, for [rf_tour_button]
 * ---------------------------------------------------------------------- */

.rft-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 16px 28px;
	border: none;
	border-radius: 999px;
	background: #b9531b;
	color: #fff7e9;
	font-family: "RF Tour Sans", "Barlow", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(169, 72, 19, 0.32);
	transition: background 0.18s ease, transform 0.18s ease;
}

.rft-trigger:hover {
	background: #a34918;
	color: #fff7e9;
	transform: translateY(-1px);
}

.rft-trigger--ghost {
	background: transparent;
	color: #1a1511;
	border: 1px solid #1a1511;
	box-shadow: none;
}

.rft-trigger--ghost:hover {
	background: #1a1511;
	color: #f8f2e5;
}

/* Body lock while the modal is open. */

html.rft-locked,
body.rft-locked {
	overflow: hidden !important;
	touch-action: none;
}

/* -------------------------------------------------------------------------
 * Container queries — used where available, vw clamps above are the fallback.
 * ---------------------------------------------------------------------- */

@container rftmodal (min-width: 0px) {
	.rft-modal {
		--rft-pad: clamp(20px, 3.4cqw, 38px);
	}

	.rft-modal .rft-hero {
		min-height: clamp(230px, 30cqw, 330px);
	}

	.rft-modal .rft-hero__title {
		font-size: clamp(34px, 6.2cqw, 62px);
	}

	.rft-modal .rft-hero__lead {
		font-size: clamp(15px, 1.6cqw, 18px);
	}

	.rft-modal .rft-h2 {
		font-size: clamp(24px, 3cqw, 32px);
	}

	.rft-modal .rft-body {
		font-size: clamp(15px, 1.5cqw, 16.5px);
	}

	.rft-modal .rft-card__lead {
		font-size: clamp(19px, 2.2cqw, 24px);
	}

	.rft-modal .rft-card--quote p {
		font-size: clamp(17px, 2cqw, 21px);
	}

	.rft-modal .rft-formhead__title {
		font-size: clamp(19px, 2.4cqw, 26px);
	}

	.rft-modal .rft-total__amount {
		font-size: clamp(26px, 3.2cqw, 34px);
	}

	.rft-modal .rft-done__title {
		font-size: clamp(30px, 4.6cqw, 46px);
	}

	.rft-modal .rft-done__lead {
		font-size: clamp(15px, 1.6cqw, 17px);
	}
}

/* -------------------------------------------------------------------------
 * Phones — trim the chrome so seven calendar cells still clear 44px.
 * Declared after the container block so it wins on equal specificity.
 * ---------------------------------------------------------------------- */

@media (max-width: 430px) {
	.rft-modal {
		--rft-pad: 16px;
	}

	.rft-cal {
		padding: 10px;
	}

	.rft-cal__dow,
	.rft-cal__grid {
		gap: 2px;
	}

	.rft-cal__cell {
		min-height: 44px;
	}

	.rft-day {
		min-height: 44px;
	}
}

@media (max-width: 380px) {
	.rft-modal {
		--rft-pad: 12px;
	}

	.rft-cal {
		padding: 8px;
	}
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

@keyframes rft-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rft-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rft-root *,
	.rft-root *::before,
	.rft-root *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.rft-btn:hover,
	.rft-trigger:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Windows high contrast
 * ---------------------------------------------------------------------- */

@media (forced-colors: active) {
	.rft-day[aria-pressed="true"],
	.rft-chip[aria-pressed="true"] {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}

	.rft-btn--submit.is-blocked {
		border: 1px solid GrayText;
		color: GrayText;
	}
}

/* ---------------------------------------------------------------------------
   Floating overlays that swallow the modal's clicks

   HighTrek injects #hightrekposFloatingButtonWrapper: a transparent, full-width
   `position: fixed` bar pinned to the foot of the viewport at z-index
   1535423548 — above everything, this modal's 100000 included. The Send button
   lives in a sticky footer at the bottom of the dialog, which is exactly where
   that bar sits, so on desktop only its top few pixels answered a click.

   Remlinger Global Shell clamps the same wrapper to 92x44 at 940px and below,
   which is why phones were never affected.

   Neutralise the container, re-arm its own controls: Contact and Cart keep
   working and it stops eating everything beneath it. Unscoped on purpose — this
   stylesheet only loads where the modal loads.
   ------------------------------------------------------------------------- */
#hightrekposFloatingButtonWrapper { pointer-events: none !important; }
#hightrekposFloatingButtonWrapper > *,
#hightrekposInquiryButton,
#hightrekposCartButton,
.rf-ht-mobile-control { pointer-events: auto !important; }