/* ===========================================================================
   SHAWOOD Request a Tour — CRO design system for embedded HubSpot forms.
   1:1 port of the approved demo stylesheet, scoped for use inside arbitrary
   WordPress themes:

   - Every selector is prefixed with `.shawood-rat.shawood-rat` (the class is
     doubled to add specificity), so the rules outrank typical theme selectors
     like `.site-content form input[type="text"]` without resorting to
     blanket !important.
   - The demo was built on the Meyer reset; the scoped reset below reproduces
     the assumptions the design relies on (no UA/theme margins on form bits,
     no list bullets on HubSpot's .inputs-list/.hs-error-msgs ULs).
   - Declarations that already needed !important in the demo (to beat styles
     HubSpot injects AFTER ours) keep it here, plus a few contested,
     appearance-critical input/button declarations that themes most commonly
     set with high-specificity rules of their own.
   =========================================================================== */

.shawood-rat {
	/* Secondary brand accent (#404040) — field INTERACTION affordances: the input
	   focus ring, floating-label-on-focus, and checkbox/radio. Muted on purpose so
	   focus doesn't shout. Distinct from the red error state. */
	--form-accent: #404040;
	/* Primary brand accent (the CTA olive) — committed CHOICES: the submit button
	   and the date/time picker's selected chips. */
	--picker-accent: #80903e;
}

/* --------------------------------------------------------------------------
   Scoped reset + base typography (stands in for the demo's page-level reset).
   -------------------------------------------------------------------------- */
.shawood-rat.shawood-rat,
.shawood-rat.shawood-rat * {
	box-sizing: border-box;
}
.shawood-rat.shawood-rat {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	/* Beat centered theme columns (community Get in Touch). Intro heading
	   stays centered via .shawood-rat-intro below. */
	text-align: left;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	font-size: 1rem;
	line-height: 1.4;
	color: #1a1a1a;
}
.shawood-rat.shawood-rat form,
.shawood-rat.shawood-rat fieldset,
.shawood-rat.shawood-rat legend,
.shawood-rat.shawood-rat ul,
.shawood-rat.shawood-rat ol,
.shawood-rat.shawood-rat li,
.shawood-rat.shawood-rat label,
.shawood-rat.shawood-rat p,
.shawood-rat.shawood-rat h1,
.shawood-rat.shawood-rat h2,
.shawood-rat.shawood-rat h3 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
.shawood-rat.shawood-rat ul,
.shawood-rat.shawood-rat ol {
	list-style: none !important;   /* HubSpot renders options/errors as ULs — never bulleted */
}
.shawood-rat.shawood-rat label {
	display: inline;               /* themes often set label { display:block; margin-bottom } */
	font-weight: 400;
}

/* The form card — Ship Gray, matching the community Get in Touch section. */
.shawood-rat.shawood-rat .shawood-rat-card {
	background: #424143;
	padding: 2rem 2rem 1rem;   /* tighter bottom: snugs the reCAPTCHA disclaimer to the card edge */
}

/* Optional intro above the form (heading="" shortcode attribute). */
.shawood-rat.shawood-rat .shawood-rat-intro {
	text-align: center;
	margin-bottom: 2rem;
}
.shawood-rat.shawood-rat .shawood-rat-intro-title {
	font-family: ui-serif, Georgia, "Times New Roman", serif;
	font-size: clamp(2.25rem, 6vw, 3.25rem);
	font-weight: 400;
	line-height: 1.1;
	color: #FFFFFF;            /* designed to sit on a dark page bg, above the dark card */
	margin-bottom: 0.75rem;
}

/* Admin-only misconfiguration notice. */
.shawood-rat-config-error {
	color: #cb2238;
}

/* ==========================================================================
   HubSpot form — CRO design system
   Targets HubSpot's own raw-HTML classes (.hs-*). No markup changes.
   ========================================================================== */

/* Even rhythm via a single flex `gap` (1rem) between EVERY block — no per-element
   margins to maintain. Each field takes a full row by default (flex-basis 100%);
   the first/last name pair is opted into sharing one row below. As a wrap layout,
   row-gap keeps the vertical rhythm identical to a single-column stack, and
   column-gap (the same 1rem) spaces the name pair. */
.shawood-rat.shawood-rat .hs-form {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
}

/* One field per row by default. min-width:0 lets every item shrink to its flex-basis
   rather than its content's intrinsic width — a row flex item won't otherwise go below
   min-content, so the date scroller / time grid would push the picker past the card
   edge (and the name inputs past 50%). */
.shawood-rat.shawood-rat .hs-form > * {
	flex: 0 1 100%;
	min-width: 0;
}

/* First + Last name share one row — 50% each, minus half the 1rem column gap. */
.shawood-rat.shawood-rat .hs-form > .hs-firstname,
.shawood-rat.shawood-rat .hs-form > .hs-lastname {
	flex: 1 1 calc(50% - 0.5rem);
}

/* Narrow screens: stack the name pair back to full width so the labels never clip. */
@media (max-width: 30rem) {
	.shawood-rat.shawood-rat .hs-form > .hs-firstname,
	.shawood-rat.shawood-rat .hs-form > .hs-lastname {
		flex-basis: 100%;
	}
	/* Phone: the intro heading and the consent line read a touch oversized on a
	   narrow screen — ease them down a notch so the form leads with the fields,
	   not the chrome. */
	.shawood-rat.shawood-rat .shawood-rat-intro-title {
		font-size: 1.875rem;
	}
	.shawood-rat.shawood-rat .hs-form-booleancheckbox-display {
		font-size: 0.875rem;
	}
}

/* CRO: keep the primary CTA above the reCAPTCHA badge / legal noise. Both are
   flex items of .hs-form (DOM order: reCAPTCHA then submit); flip them with
   `order`, pinned to the end with the button first. Pinning BOTH (not just one)
   keeps them past the empty trailing elements HubSpot appends. The submit-time
   rollup error sits between them at order 2 (see .hs_error_rollup). */
.shawood-rat.shawood-rat .hs-submit {
	order: 1;
}
.shawood-rat.shawood-rat .hs-recaptcha {
	order: 3;
	display: flex;            /* center the disclaimer text below */
	justify-content: center;
	/* No extra margin: the disclaimer's space above is just the form's 1rem flex
	   gap, matching the card's 1rem bottom padding below it. */
}

/* reCAPTCHA: hide the badge and show Google's required disclaimer instead —
   allowed by Google's branding rules as long as the disclaimer is shown. The
   reCAPTCHA token is a separate hidden field, so hiding the visible badge with
   display:none doesn't affect submission. */
.shawood-rat.shawood-rat .hs-recaptcha > * {
	display: none;
}
.grecaptcha-badge {
	visibility: hidden;      /* also covers the floating badge, if Google uses one */
}
.shawood-rat.shawood-rat .hs-recaptcha::after {
	content: "This form is protected by reCAPTCHA.";
	color: #cccccc;
	font-size: 0.8125rem;
	-webkit-user-select: none;
	user-select: none;
}

/* A permanently floated/notched label (selects, and checkbox/radio group boxes)
   sits in the gap above its field, making that gap read tighter than the gap
   between resting text fields. Nudge these fields down by the label's intrusion
   (~half its height) so the visual rhythm stays even. Not text fields: their
   labels float transiently, so margin there would jump on focus/fill. */
.shawood-rat.shawood-rat .hs-form-field:has(> .input > select.hs-input),
.shawood-rat.shawood-rat .hs-fieldtype-checkbox,
.shawood-rat.shawood-rat .hs-fieldtype-radio {
	margin-top: 0.4rem;
}

/* Labels are UI chrome, not content — don't let them be text-selected (you can
   otherwise highlight a checkbox/consent label by mis-clicking). */
.shawood-rat.shawood-rat .hs-form label {
	-webkit-user-select: none;
	user-select: none;
}

/* Fields + submit span the container, capped at 700px.
   box-sizing: border-box makes width:100% include border+padding, so inputs and
   selects (different native borders) resolve to identical widths.
   Checkboxes/radios excluded so they keep their natural box. */
.shawood-rat.shawood-rat .hs-input:not([type="checkbox"]):not([type="radio"]),
.shawood-rat.shawood-rat .hs-button {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 700px;
}

/* Submit button — the primary CTA. The brand action color (olive #80903e) belongs
   HERE (a CTA should be the loudest element), unlike the muted focus accent.
   Generous padding, white semibold text, rounded to match the fields, darken on
   hover/active, soft focus ring. (Contested-by-theme declarations carry
   !important: themes love styling input[type="submit"].) */
.shawood-rat.shawood-rat .hs-button {
	padding: 1.15rem 1.5rem !important;
	border: none !important;
	border-radius: 8px !important;
	background: var(--picker-accent) !important;   /* primary brand olive — shared with the picker's selected chips */
	color: #ffffff !important;
	font-family: inherit !important;
	font-size: 1.0625rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.shawood-rat.shawood-rat .hs-button:hover {
	background: #738238 !important;   /* ~10% darker */
}
.shawood-rat.shawood-rat .hs-button:active {
	background: #667332 !important;   /* ~20% darker */
}
.shawood-rat.shawood-rat .hs-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(128, 144, 62, 0.4);
}
.shawood-rat.shawood-rat .hs-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Required-field asterisk. */
.shawood-rat.shawood-rat .hs-form-required {
	color: #cb2238;
}


/* --------------------------------------------------------------------------
   Floating labels (Material / Google pattern)
   The label sits inside the field like a placeholder, then floats up to the
   top border on focus or when the field holds a value.

   - HubSpot renders the <label> BEFORE the input, so :has() drives the label
     from the input's state.
   - "Has value" detection uses :placeholder-shown, which needs a non-empty
     placeholder — set placeholder=" " on every input/textarea in the embed's
     onFormReady (see form.js).
   - Applies to text-like inputs, selects, textareas. Checkboxes/radios are
     skipped (their input isn't a direct child of .input).
   -------------------------------------------------------------------------- */

/* Field box — give controls room for the label to float into. (Contested-by-theme
   declarations carry !important.) */
.shawood-rat.shawood-rat .hs-input:not([type="checkbox"]):not([type="radio"]) {
	padding: 0.95rem 0.75rem !important;
	border: 1px solid #cccccc !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	color: #1a1a1a !important;
	background: #ffffff !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Light hover — darken the hairline, same as the picker chips. Placed before the
   focus rule so the focus accent wins on a hovered+focused field; the later error
   rule keeps a red border on a hovered invalid field. */
.shawood-rat.shawood-rat .hs-input:not([type="checkbox"]):not([type="radio"]):hover {
	border-color: #b0b0b0 !important;
}
.shawood-rat.shawood-rat .hs-input:not([type="checkbox"]):not([type="radio"]):focus {
	outline: none !important;
	border-color: var(--form-accent) !important;
	box-shadow: 0 0 0 1px var(--form-accent) !important;   /* visible, accessible focus ring */
}

/* Native <select> draws its arrow ignoring padding-right, so the arrow's inset
   from the right edge won't match the text inset on the left. Hide it and draw
   our own chevron at the same 0.75rem inset; pad the right so the value clears
   it. (select can't be a checkbox/radio — the :not()s only raise specificity to
   beat the base padding above.) */
.shawood-rat.shawood-rat select.hs-input:not([type="checkbox"]):not([type="radio"]) {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23444444' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	padding-right: 2.25rem !important;
}

/* Anchor the label to the field. */
.shawood-rat.shawood-rat .hs-form-field:has(> .input > input.hs-input, > .input > select.hs-input, > .input > textarea.hs-input, > .input > * > input.hs-input) {
	position: relative;
}

/* Resting — label aligned to the input's vertical center (placeholder look).
   Fixed offset, NOT top:50% — when a required field is blurred empty HubSpot
   inserts a .hs-error-msgs <ul>, growing .hs-form-field; a percentage would
   then drag the label off the input's center. 1.6rem = the input text center
   (1px border + 0.95rem padding-top + half of the 1.2rem line). */
.shawood-rat.shawood-rat .hs-form-field:has(> .input > input.hs-input, > .input > select.hs-input, > .input > textarea.hs-input, > .input > * > input.hs-input) > label {
	position: absolute;
	top: 1.6rem;
	left: 0.5rem;
	transform: translateY(-50%);
	transform-origin: left center;
	margin: 0;
	padding: 0 0.25rem;
	background: #ffffff;              /* chip: notches the border when floated */
	color: #767676;
	/* Resting label reads as the placeholder — keep it a touch under the 1rem
	   input text. The float rule's scale is set to restore the established
	   0.8rem floated size from this smaller base, so the label size is unchanged. */
	font-size: 0.9rem;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;            /* clicks pass through to the input */
	z-index: 1;
	transition: top 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

/* Textarea — rest the label near the top, not the vertical middle. */
.shawood-rat.shawood-rat .hs-form-field:has(> .input > textarea.hs-input) > label {
	top: 0.95rem;
	transform: none;
}

/* Floated — focused, holds a value, or a <select> (always has a value).
   The date field (.hs-fieldtype-date) nests its input one level deeper, inside
   a .hs-dateinput wrapper, alongside a type="hidden" twin. Match it with a
   universal child (> .input > * > input.hs-input) rather than the wrapper class:
   :has() takes the specificity of its MOST specific argument, so naming the
   wrapper class would inflate these rules — and, critically, the matching
   RESTING rule above — past each other and stop normal fields from floating.
   `*` keeps every path's specificity identical. Scope to the visible input with
   :not([type="hidden"]) so the hidden twin can't drive the label. */
.shawood-rat.shawood-rat .hs-form-field:has(> .input > .hs-input:focus) > label,
.shawood-rat.shawood-rat .hs-form-field:has(> .input > .hs-input:not(:placeholder-shown)) > label,
.shawood-rat.shawood-rat .hs-form-field:has(> .input > * > input.hs-input:not([type="hidden"]):focus) > label,
.shawood-rat.shawood-rat .hs-form-field:has(> .input > * > input.hs-input:not([type="hidden"]):not(:placeholder-shown)) > label {
	top: 0;
	transform: translateY(-50%) scale(0.889);   /* 0.9rem × 0.889 ≈ 0.8rem — floated size unchanged from the prior 1rem × 0.8 */
	color: #444444;
}

/* Focused gets the focus accent. */
.shawood-rat.shawood-rat .hs-form-field:has(> .input > .hs-input:focus) > label,
.shawood-rat.shawood-rat .hs-form-field:has(> .input > * > input.hs-input:not([type="hidden"]):focus) > label {
	color: var(--form-accent);
}

/* Desktop — the 0.9rem resting placeholder reads small on a wide viewport next
   to the 1rem input text. Bring it up to the input's own size; tablets/phones
   keep the smaller base. Re-base the float scale (0.8 × 1rem = 0.8rem) so the
   floated label is unchanged from every other breakpoint. */
@media (min-width: 64rem) {
	.shawood-rat.shawood-rat .hs-form-field:has(> .input > input.hs-input, > .input > select.hs-input, > .input > textarea.hs-input, > .input > * > input.hs-input) > label {
		font-size: 1rem;
	}
	.shawood-rat.shawood-rat .hs-form-field:has(> .input > .hs-input:focus) > label,
	.shawood-rat.shawood-rat .hs-form-field:has(> .input > .hs-input:not(:placeholder-shown)) > label,
	.shawood-rat.shawood-rat .hs-form-field:has(> .input > * > input.hs-input:not([type="hidden"]):focus) > label,
	.shawood-rat.shawood-rat .hs-form-field:has(> .input > * > input.hs-input:not([type="hidden"]):not(:placeholder-shown)) > label {
		transform: translateY(-50%) scale(0.8);   /* 1rem × 0.8 = 0.8rem — floated size unchanged */
	}
}


/* --------------------------------------------------------------------------
   Error states
   HubSpot adds .invalid/.error to the control and inserts a .hs-error-msgs
   <ul> on validation failure, removing BOTH once the value is valid — so
   binding to those classes makes the styling revert on its own. This block
   sits after the floating-label rules so its equal-specificity label rule
   wins the cascade by source order.
   -------------------------------------------------------------------------- */

/* Message — spaced below the field, brand red, sized down to stay subordinate. */
.shawood-rat.shawood-rat .hs-error-msgs {
	margin-top: 0.5rem;
}
.shawood-rat.shawood-rat .hs-error-msg {
	/* !important beats HubSpot's residual error red (~#f2545b), which has higher
	   specificity and is injected after our stylesheet. */
	color: #cb2238 !important;
	font-size: 0.85rem;
	line-height: 1.4;
}

/* Errored control — red border (inputs/selects). */
.shawood-rat.shawood-rat .hs-input:not([type="checkbox"]):not([type="radio"]):is(.invalid, .error) {
	border-color: #cb2238 !important;
}

/* Checkboxes/radios have no field border — flag an error with a red outline ring
   (native checkboxes ignore `border`). Key off the error message too, since
   HubSpot may not add .invalid/.error to a checkbox (e.g. the legal-consent box);
   the .hs-error-msgs <ul> always appears, so :has() catches it. Scope the :has()
   paths to single boolean/consent boxes so a multi-select group error doesn't
   ring every option. The consent box is optional in HubSpot (never gets
   .invalid/.error nor an error <ul>), but the form treats it as required — so JS
   (onFormReady) drives a .tp-consent-invalid flag on its field when a visitor
   submits with it unchecked; ring it the same way. */
.shawood-rat.shawood-rat .hs-input:is([type="checkbox"], [type="radio"]):is(.invalid, .error),
.shawood-rat.shawood-rat .hs-fieldtype-booleancheckbox:has(.hs-error-msgs) .hs-input[type="checkbox"],
.shawood-rat.shawood-rat .legal-consent-container:has(.hs-error-msgs) .hs-input[type="checkbox"],
.shawood-rat.shawood-rat .tp-consent-invalid .hs-input[type="checkbox"] {
	outline: 2px solid #cb2238;
	outline-offset: 1px;
}

/* Errored field's floating label turns red (text inputs + selects). */
.shawood-rat.shawood-rat .hs-form-field:has(> .input > .hs-input:is(.invalid, .error)) > label {
	color: #cb2238;
}

/* Submit-time rollup error ("Please complete all required fields.") — its own
   flex block, shown only on a failed submit. It's a generic "some required field
   is missing" message, not tied to any one field, so it sits BELOW the submit
   button (via flex order: submit 1 → rollup 2 → reCAPTCHA disclaimer 3) where the
   visitor's eye lands after clicking. HubSpot puts its text in a
   .hs-main-font-element label (NOT .hs-error-msg), so the brand-red rule above
   misses it and it renders black — recolor it here to match the field errors.
   Centered to line up under the full-width button and the disclaimer below it. */
.shawood-rat.shawood-rat .hs_error_rollup {
	order: 2;
	text-align: center;
}
.shawood-rat.shawood-rat .hs_error_rollup .hs-error-msgs {
	margin-top: 0;            /* the form's 1rem flex gap already spaces it below the button */
}
.shawood-rat.shawood-rat .hs_error_rollup .hs-main-font-element {
	color: #cb2238;
	font-size: 0.85rem;
	line-height: 1.4;
}


/* --------------------------------------------------------------------------
   Checkbox / radio groups & single (consent) checkboxes
   Multi-option groups (.hs-fieldtype-checkbox / -radio) and the consent
   checkbox (.hs-fieldtype-booleancheckbox) nest their inputs inside list
   labels, so the floating-label rules skip them.
   -------------------------------------------------------------------------- */

/* Conditional (dependent) fields render inside .hs-dependent-field. A
   first-level wrapper is a direct flex child of .hs-form, so it already gets the
   form's gap; but its own children (nested dependents / fields) don't. Make each
   wrapper a flex column with the same gap so the rhythm propagates to every
   nesting level. Do NOT add margin-top — it would double the gap on wrappers
   that already receive the form's gap. */
.shawood-rat.shawood-rat .hs-dependent-field {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* The group field anchors its notched label. */
.shawood-rat.shawood-rat .hs-fieldtype-checkbox,
.shawood-rat.shawood-rat .hs-fieldtype-radio {
	position: relative;
}

/* Group question is notched into the box's top border — the same treatment as
   the floated input/select labels (small, gray, white chip on the border), so
   it reads as a peer of the other field labels. */
.shawood-rat.shawood-rat .hs-fieldtype-checkbox > label,
.shawood-rat.shawood-rat .hs-fieldtype-radio > label {
	position: absolute;
	top: 0;
	left: 0.5rem;
	transform: translateY(-50%) scale(0.8);
	transform-origin: left center;
	margin: 0;
	padding: 0 0.25rem;
	background: #ffffff;
	color: #444444;
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
	z-index: 1;
}

/* Multi-option groups get a bordered box (the field-box treatment) so the set
   has a clear start and end. The error <ul> shares .inputs-list, so exclude it.
   The single consent checkbox stays borderless. */
.shawood-rat.shawood-rat .hs-fieldtype-checkbox .inputs-list:not(.hs-error-msgs),
.shawood-rat.shawood-rat .hs-fieldtype-radio .inputs-list:not(.hs-error-msgs) {
	border: 1px solid #cccccc;
	border-radius: 8px;
	padding: 0.875rem 1rem;
}

/* Even vertical spacing between options (all checkbox/radio types). */
.shawood-rat.shawood-rat .hs-fieldtype-checkbox .inputs-list:not(.hs-error-msgs),
.shawood-rat.shawood-rat .hs-fieldtype-radio .inputs-list:not(.hs-error-msgs),
.shawood-rat.shawood-rat .hs-fieldtype-booleancheckbox .inputs-list:not(.hs-error-msgs) {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

/* Each option — control + label aligned with a gap. flex-start keeps the
   control on the first line when a long label wraps. */
.shawood-rat.shawood-rat .hs-form-checkbox-display,
.shawood-rat.shawood-rat .hs-form-radio-display,
.shawood-rat.shawood-rat .hs-form-booleancheckbox-display {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.4;
	color: #1a1a1a;
	cursor: pointer;
}
/* Consent sits on the dark card (checkbox/radio groups stay in a white box). */
.shawood-rat.shawood-rat .hs-form-booleancheckbox-display,
.shawood-rat.shawood-rat .legal-consent-container {
	color: #ffffff;
}

/* HubSpot indents the consent/boolean label text with
   `.legal-consent-container .hs-form-booleancheckbox-display>span { margin-left: 20px }`,
   which css:"" doesn't strip, and the embed injects it AFTER our stylesheet.
   !important is the reliable override. Result: the flex gap is the only spacing. */
.shawood-rat.shawood-rat .hs-form-booleancheckbox-display > span,
.shawood-rat.shawood-rat .hs-form-checkbox-display > span,
.shawood-rat.shawood-rat .hs-form-radio-display > span {
	margin: 0 !important;
}

/* The control — branded checked state, fixed size, never squashed by wrapping.
   Targeted globally by input type (not by field type) so the consent checkbox —
   whose wrapper is a legal-consent container, not .hs-fieldtype-booleancheckbox —
   gets the same treatment. Reset the default margin; it inflates the gap to the
   label. The 0.15rem top keeps the box aligned with the first text line. */
.shawood-rat.shawood-rat .hs-input[type="checkbox"],
.shawood-rat.shawood-rat .hs-input[type="radio"] {
	width: 1.05rem !important;
	height: 1.05rem !important;
	margin: 0.15rem 0 0 0 !important;
	flex-shrink: 0;
	accent-color: var(--form-accent);
	cursor: pointer;
}


/* ==========================================================================
   Custom tour scheduler (form.js)
   A "How can we help?" toggle gating an on-brand date/time picker that replaces
   HubSpot's hidden preferred date/time fields. Built from the SAME tokens as
   the form above — 8px radius, #ccc hairline, and the chip language of the
   date/time selectors — so it reads as one system. The CTA olive marks the
   committed selection (mode + date + time); the SOLID-green Submit stays the
   only filled element, so it remains the loudest call to action.
   ========================================================================== */
.shawood-rat.shawood-rat .tour-scheduler {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	/* Section breaks: the form's flex gap is 1rem between every block; margins ADD
	   to it (flex margins don't collapse). Every section break is the SAME 1.75rem
	   (gap + 0.75rem of margin): Phone → scheduler via this top margin, scheduler →
	   consent via the consent's top margin (so no bottom margin here), and
	   consent → submit via the consent's bottom margin. */
	margin: 0.75rem 0 0;
}

/* The date/time picker — the inner block the toggle reveals. */
.shawood-rat.shawood-rat .tour-picker {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
/* Collapsed in "Talk to sales" mode — also pulled from the a11y tree + tab order.
   ([hidden]'s UA `display:none` ties .tour-picker's `display:flex` on specificity
   and would lose by source order, so re-assert it here.) */
.shawood-rat.shawood-rat .tour-picker[hidden] {
	display: none;
}
/* Gentle reveal when "Request a tour" expands the picker (motion-safe only). */
@media (prefers-reduced-motion: no-preference) {
	.shawood-rat.shawood-rat .tour-picker:not([hidden]) {
		animation: shawood-rat-tp-reveal 0.2s ease both;
	}
}
@keyframes shawood-rat-tp-reveal {
	from { opacity: 0; transform: translateY(-0.25rem); }
	to   { opacity: 1; transform: none; }
}

/* Give the lone consent checkbox real breathing room so it reads as its own line —
   its 0.75rem margins complete the uniform 1.75rem section breaks to the scheduler
   above and the submit button below (see .tour-scheduler). */
.shawood-rat.shawood-rat .hs-fieldtype-booleancheckbox {
	margin: 0.75rem 0;
}
.shawood-rat.shawood-rat .tp-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
/* Echoes the heading/consent copy: small, white on the dark card. */
.shawood-rat.shawood-rat .tp-label {
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 500;
}

/* Required-field error under a picker (date/time), shown on a tour submit with
   that field unpicked. Matches the HubSpot field error (.hs-error-msg) in red and
   size; the section's flex gap spaces it below the chips. Hidden until armed. */
.shawood-rat.shawood-rat .tp-error {
	display: none;
	color: #cb2238;
	font-size: 0.85rem;
	line-height: 1.4;
}
.shawood-rat.shawood-rat .tp-error.is-shown {
	display: block;
}

/* "How can we help?" — a two-up segmented toggle in the SAME chip language as the
   date/time selectors (shared box/hover/selected/focus rules below). Two equal
   halves; the chosen mode takes the olive outline-with-tint, the other stays the
   muted resting state. Slightly larger padding + medium weight than a value chip,
   since it's the form's primary branching choice. */
.shawood-rat.shawood-rat .tp-modes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
}
.shawood-rat.shawood-rat .tp-mode {
	padding: 0.85rem 1rem;
	text-align: center;
	font-size: 1rem;
	font-weight: 500;
	color: #767676;   /* matches the resting input labels: unselected = muted gray */
}

/* Date: a horizontal, scroll-snapping strip — right for an open-ended range. */
.shawood-rat.shawood-rat .tp-dates {
	display: flex;
	gap: 0.625rem;
	overflow-x: auto;
	/* Horizontal scrolling ONLY. overflow-x:auto would otherwise compute overflow-y
	   to auto, letting the strip swallow vertical scroll once you're panning it.
	   Pin it hidden; touch-action/overscroll keep touch gestures and
	   scroll-chaining horizontal. */
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	touch-action: pan-x;
	scroll-behavior: smooth;
	/* Mandatory snap so a chip always rests flush at the left edge — never a
	   half-cut chip at rest. The half-visible next chip on the right is the
	   "there's more" affordance. */
	scroll-snap-type: x mandatory;
	/* No visible scrollbar: it reads as clutter on desktop and was clipping the
	   chips. Scroll via swipe / trackpad / shift-wheel / arrow keys. Selection &
	   focus rings are drawn INSET (below) so the scroller's clip never cuts them,
	   which also lets the first chip sit flush at x=0 — aligned with the time grid
	   and the label. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.shawood-rat.shawood-rat .tp-dates::-webkit-scrollbar { display: none; }

/* Right-edge fade only — the peeking next chip dissolves into the card instead of
   a hard slice. form.js adds .tp-fade-right whenever there's more content to the
   right, and removes it at the end. The left edge stays crisp: mandatory snap
   rests the leftmost chip flush, so there's nothing to fade there — and fading it
   would dissolve a solid-green selected chip into the card. */
.shawood-rat.shawood-rat .tp-dates.tp-fade-right {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent 100%);
}

.shawood-rat.shawood-rat .tp-date {
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-width: 6.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.75rem 1rem;
}
.shawood-rat.shawood-rat .tp-date-dow {
	font-weight: 600;
	font-size: 0.95rem;
	color: #767676;   /* matches the resting input labels: unselected = muted gray */
}
.shawood-rat.shawood-rat .tp-date-day {
	font-size: 0.85rem;
	color: #767676;
}

/* Time: a finite, known set — a wrap grid shows every slot at once (no hunting
   in a scroller). auto-fill keeps the columns responsive on narrow viewports. */
.shawood-rat.shawood-rat .tp-times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: 0.625rem;
}
.shawood-rat.shawood-rat .tp-time {
	padding: 0.7rem 0.5rem;
	text-align: center;
	font-size: 0.95rem;
	color: #767676;   /* matches the resting input labels: unselected = muted gray */
}

/* Shared chip box — same field-box treatment (white, hairline, 8px). Buttons are
   heavily themed elements, so the box-defining declarations carry !important. */
.shawood-rat.shawood-rat .tp-date,
.shawood-rat.shawood-rat .tp-time,
.shawood-rat.shawood-rat .tp-mode {
	border: 1px solid #cccccc !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.shawood-rat.shawood-rat .tp-date:hover,
.shawood-rat.shawood-rat .tp-time:hover,
.shawood-rat.shawood-rat .tp-mode:hover {
	border-color: #b0b0b0 !important;
}

/* Selected — a clean light-green fill (#e9efdb) inside a 2px green edge (border +
   inset ring), with deep-green text (#5e6a2c, ~5.9:1 on white — AA). Reads clearly
   "chosen" yet stays an outline-with-tint, so the SOLID-green Submit remains the
   only filled green element (kept the CTA as the loudest thing). No outer shadow,
   so the date scroller's clip can't cut it. */
.shawood-rat.shawood-rat .tp-date.is-selected,
.shawood-rat.shawood-rat .tp-time.is-selected,
.shawood-rat.shawood-rat .tp-mode.is-selected {
	border-color: var(--picker-accent) !important;
	box-shadow: inset 0 0 0 1px var(--picker-accent);   /* 2px effective green edge */
	background: #e9efdb !important;
	color: #5e6a2c !important;
}
.shawood-rat.shawood-rat .tp-date.is-selected .tp-date-dow,
.shawood-rat.shawood-rat .tp-date.is-selected .tp-date-day {
	color: #5e6a2c;
}
.shawood-rat.shawood-rat .tp-date.is-selected:hover,
.shawood-rat.shawood-rat .tp-time.is-selected:hover,
.shawood-rat.shawood-rat .tp-mode.is-selected:hover {
	background: #e1e8cd !important;                 /* deepen the fill slightly on hover */
}

/* Keyboard focus — a 2px inset green ring (clip-safe inside the scroller); works
   on both the white unselected chips and the light-green selected ones. */
.shawood-rat.shawood-rat .tp-date:focus-visible,
.shawood-rat.shawood-rat .tp-time:focus-visible,
.shawood-rat.shawood-rat .tp-mode:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--picker-accent);
}

/* Mobile: tighten the scheduler chips (toggle / date / time). On a phone the
   desktop padding + type sizes make these read oversized against the slim
   inputs — trim padding, drop the type a notch, and shrink the date min-width /
   time column floor so more chips fit per row. Selection/focus rings are inset,
   so the smaller boxes keep their full treatment. */
@media (max-width: 30rem) {
	.shawood-rat.shawood-rat .tp-mode {
		padding: 0.65rem 0.75rem;
		font-size: 0.9rem;
	}
	.shawood-rat.shawood-rat .tp-date {
		min-width: 5rem;
		padding: 0.55rem 0.75rem;
	}
	.shawood-rat.shawood-rat .tp-date-dow { font-size: 0.875rem; }
	.shawood-rat.shawood-rat .tp-date-day { font-size: 0.8rem; }
	.shawood-rat.shawood-rat .tp-times {
		grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	}
	.shawood-rat.shawood-rat .tp-time {
		padding: 0.5rem 0.4rem;
		font-size: 0.875rem;
	}
}