/**
 * Case-review form styling for birthcertificatenamechange.com.
 *
 * Scoped entirely to #form-slot and #home-form-slot so it cannot affect anything else.
 * Every value is taken from the design export and expressed through the same
 * Elementor global variables the rest of the site already uses.
 *
 * This is the one hand-written stylesheet in the build. It exists because the
 * form is rendered by Fluent Forms, whose markup Elementor cannot style.
 */

/* ---------------------------------------------------------------- the card */
:is(#form-slot,#home-form-slot) {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	padding: clamp(20px, 3vw, 32px);
	overflow: hidden;
}

:is(#form-slot,#home-form-slot) .fluentform {
	margin: 0;
}

/* ------------------------------------------------------------- form layout */
/* Fluent Forms wraps every field in a fieldset, so that is the grid container */
:is(#form-slot,#home-form-slot) .frm-fluent-form > fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5) var(--space-4);
	align-items: start;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* full width by default; the paired fields opt back into one column */
:is(#form-slot,#home-form-slot) .ff-el-group {
	grid-column: 1 / -1;
	margin: 0;
}

:is(#form-slot,#home-form-slot) .ff-el-group:has([name="full_name"]),
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="mobile_number"]),
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="email"]),
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="state_of_registration"]),
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="certificate_is_for"]),
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="preferred_contact"]) {
	grid-column: span 1;
}

/* the honeypot group is hidden inline by Fluent Forms; keep it out of the grid */
:is(#form-slot,#home-form-slot) .ff-hpsf-container {
	grid-column: 1 / -1;
}

/* ----------------------------------------------------------------- labels */
:is(#form-slot,#home-form-slot) .ff-el-input--label {
	margin: 0 0 var(--space-2);
	padding: 0;
}

:is(#form-slot,#home-form-slot) .ff-el-input--label label {
	margin: 0;
	padding: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-body);
	line-height: 1.4;
}

:is(#form-slot,#home-form-slot) .ff-el-is-required.asterisk-right label:after {
	color: var(--color-strike);
	margin-inline-start: 2px;
}

/* ------------------------------------------------- text inputs and select */
:is(#form-slot,#home-form-slot) .ff-el-form-control,
:is(#form-slot,#home-form-slot) input.ff-el-form-control,
:is(#form-slot,#home-form-slot) select.ff-el-form-control,
:is(#form-slot,#home-form-slot) textarea.ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-field);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-navy);
	box-shadow: none;
	transition: border-color .15s ease;
}

:is(#form-slot,#home-form-slot) .ff-el-form-control::placeholder {
	color: var(--color-faint);
}

:is(#form-slot,#home-form-slot) .ff-el-form-control:focus {
	border-color: var(--color-blue-mid);
	outline: none;
	box-shadow: none;
}

:is(#form-slot,#home-form-slot) textarea.ff-el-form-control {
	min-height: 110px;
	line-height: 1.6;
	resize: vertical;
}

/* native select chevron, matching the design's icon */
:is(#form-slot,#home-form-slot) select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: calc(var(--space-4) + 24px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A98AB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	cursor: pointer;
}

/* --------------------------------------------------- choices as pills etc */
:is(#form-slot,#home-form-slot) .ff-el-form-check {
	margin: 0;
	padding: 0;
}

:is(#form-slot,#home-form-slot) .ff-el-form-check-label {
	display: block;
	margin: 0;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-muted);
	border: 1px solid var(--color-border);
	background: var(--color-white);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

/* the native control is replaced by the styled label */
:is(#form-slot,#home-form-slot) .ff-el-form-check-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

:is(#form-slot,#home-form-slot) .ff-el-form-check-label:hover {
	border-color: var(--color-blue-pale);
}

:is(#form-slot,#home-form-slot) .ff-el-form-check-label:has(input:checked) {
	border-color: var(--color-blue-mid);
	background: var(--color-tint-blue);
	color: var(--color-blue);
}

:is(#form-slot,#home-form-slot) .ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--color-blue-mid);
	outline-offset: 2px;
}

/* "What needs to be changed?" - wrapping pills */
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="what_needs_changing"]) .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

:is(#form-slot,#home-form-slot) .ff-el-group:has([name="what_needs_changing"]) .ff-el-form-check-label {
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
}

/* "Certificate is for" / "Preferred contact" - equal-width segments */
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="certificate_is_for"]) .ff-el-input--content,
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="preferred_contact"]) .ff-el-input--content {
	display: flex;
	gap: var(--space-2);
}

:is(#form-slot,#home-form-slot) .ff-el-group:has([name="certificate_is_for"]) .ff-el-form-check,
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="preferred_contact"]) .ff-el-form-check {
	flex: 1 1 auto;
	min-width: 0;
}

:is(#form-slot,#home-form-slot) .ff-el-group:has([name="certificate_is_for"]) .ff-el-form-check-label,
:is(#form-slot,#home-form-slot) .ff-el-group:has([name="preferred_contact"]) .ff-el-form-check-label {
	padding: var(--space-3);
	border-radius: var(--radius-md);
	text-align: center;
}

/* ---------------------------------------------------------- submit button */
:is(#form-slot,#home-form-slot) .ff_submit_btn_wrapper {
	grid-column: 1 / -1;
	margin: 0;
	text-align: start;
}

:is(#form-slot,#home-form-slot) .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-4) var(--space-6);
	border: none;
	border-radius: var(--radius-md);
	background: var(--color-green);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: 600;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s ease;
}

:is(#form-slot,#home-form-slot) .ff-btn-submit:hover,
:is(#form-slot,#home-form-slot) .ff-btn-submit:focus {
	background: var(--color-green-dark);
	color: var(--color-white);
}

:is(#form-slot,#home-form-slot) .ff-btn-submit:after {
	content: "";
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* ------------------------------------------------- validation and success */
:is(#form-slot,#home-form-slot) .ff-el-is-error .ff-el-form-control {
	border-color: var(--color-strike);
}

:is(#form-slot,#home-form-slot) .error.text-danger,
:is(#form-slot,#home-form-slot) .ff-el-is-error .error {
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-strike);
}

:is(#form-slot,#home-form-slot) .ff-message-success {
	grid-column: 1 / -1;
	padding: var(--space-5);
	border: 1px solid var(--color-border-green);
	border-radius: var(--radius-lg);
	background: var(--color-tint-green-soft);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-body);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 767px) {
	:is(#form-slot,#home-form-slot) .frm-fluent-form > fieldset {
		grid-template-columns: 1fr;
	}

	:is(#form-slot,#home-form-slot) .ff-el-group:has([name="full_name"]),
	:is(#form-slot,#home-form-slot) .ff-el-group:has([name="mobile_number"]),
	:is(#form-slot,#home-form-slot) .ff-el-group:has([name="email"]),
	:is(#form-slot,#home-form-slot) .ff-el-group:has([name="state_of_registration"]),
	:is(#form-slot,#home-form-slot) .ff-el-group:has([name="certificate_is_for"]),
	:is(#form-slot,#home-form-slot) .ff-el-group:has([name="preferred_contact"]) {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   Home hero lead card - "Get Your Document List"

   Deliberately inverted: the hero section sits on --color-surface, which is
   almost white, so a white card disappeared into it. A navy card with the
   green action strip gives the form the contrast it needs to be seen first.
   Scoped to #hero-card / #hero-form-mount.
   ========================================================================= */

#hero-card {
	background: var(--color-navy);
	border-radius: var(--radius-xl);
	box-shadow: 0 28px 70px rgba(10, 35, 64, 0.28);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
	width: auto;
	min-width: auto;
}

/* ------------------------------------------------------------ header bar */
#hero-card .hero-card-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--color-green);
	width: auto;
	min-width: auto;
}

#hero-card .hero-card-eyebrow {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--color-white);
}

#hero-card .hero-card-promise {
	font-size: var(--text-xs);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

/* ----------------------------------------------------------------- body */
#hero-card .hero-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: clamp(20px, 3vw, 32px);
	width: auto;
	min-width: auto;
}

#hero-card .hero-card-title {
	margin: 0;
	font-size: var(--text-h3);
	line-height: 1.15;
	letter-spacing: -0.8px;
	font-weight: 700;
	color: var(--color-white);
}

#hero-card .hero-card-blurb {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-on-navy-muted);
}

#hero-card .hero-card-note {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-on-navy-muted);
}

#hero-card .hero-card-note:before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B8C9DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V8a4 4 0 0 1 8 0v2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* --------------------------------------------------------- form layout */
#hero-form-mount {
	padding: 0;
	width: auto;
	min-width: auto;
}

#hero-form-mount .fluentform {
	margin: 0;
}

#hero-form-mount .frm-fluent-form > fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5) var(--space-3);
	align-items: start;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	counter-reset: bcnc-step;
}

#hero-form-mount .ff-el-group,
#hero-form-mount .ff-el-section-break {
	grid-column: 1 / -1;
	margin: 0;
}

#hero-form-mount .ff-el-group:has([name="full_name"]),
#hero-form-mount .ff-el-group:has([name="mobile_number"]) {
	grid-column: span 1;
}

/* the name and mobile inputs sit under one shared step heading */
#hero-form-mount .ff-el-group:has([name="full_name"]) .ff-el-input--label,
#hero-form-mount .ff-el-group:has([name="mobile_number"]) .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------- numbered step labels */
#hero-form-mount .ff-el-group > .ff-el-input--label label,
#hero-form-mount .ff-el-section-title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-3);
	padding: 0;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-white);
	line-height: 1.3;
}

#hero-form-mount .ff-el-group > .ff-el-input--label label:before,
#hero-form-mount .ff-el-section-title:before {
	counter-increment: bcnc-step;
	content: counter(bcnc-step);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-pill);
	background: var(--color-navy-soft);
	color: var(--color-white);
	font-size: var(--text-2xs);
	font-weight: 700;
}

/* the mockup carries no required markers on the step headings */
#hero-form-mount .ff-el-is-required.asterisk-right label:after {
	content: none;
}

#hero-form-mount .ff-el-section-break hr,
#hero-form-mount .ff-section_break_desk {
	display: none;
}

#hero-form-mount .ff-el-section-break {
	margin-bottom: calc(-1 * var(--space-3));
}

/* ------------------------------------------------------ choices as pills */
#hero-form-mount .ff-el-group:has([name="what_needs_changing"]) .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

#hero-form-mount .ff-el-form-check {
	margin: 0;
	padding: 0;
}

#hero-form-mount .ff-el-form-check-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

#hero-form-mount .ff-el-form-check-label {
	display: block;
	margin: 0;
	padding: var(--space-3) var(--space-5);
	cursor: pointer;
	border: 1px solid var(--color-navy-line);
	border-radius: var(--radius-pill);
	background: transparent;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-on-navy);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

#hero-form-mount .ff-el-form-check-label:hover {
	border-color: var(--color-blue-pale);
	color: var(--color-white);
}

#hero-form-mount .ff-el-form-check-label:has(input:checked) {
	border-color: var(--color-white);
	background: var(--color-white);
	color: var(--color-navy);
}

#hero-form-mount .ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--color-blue-pale);
	outline-offset: 2px;
}

/* -------------------------------------------------- inputs and dropdown */
#hero-form-mount .ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-4) var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--color-white);
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-navy);
	box-shadow: none;
	transition: box-shadow .15s ease;
}

#hero-form-mount .ff-el-form-control::placeholder {
	color: var(--color-faint);
	font-weight: 400;
}

#hero-form-mount .ff-el-form-control:focus {
	outline: none;
	border-color: var(--color-blue-pale);
	box-shadow: 0 0 0 3px rgba(127, 178, 232, 0.45);
}

#hero-form-mount input.ff-el-form-control {
	font-size: var(--text-base);
	font-weight: 400;
}

#hero-form-mount select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: calc(var(--space-5) + 24px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A2340' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-5) center;
	cursor: pointer;
}

/* --------------------------------------------------------- submit button */
#hero-form-mount .ff_submit_btn_wrapper {
	grid-column: 1 / -1;
	margin: 0;
}

#hero-form-mount .ff-btn-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	margin: 0;
	padding: var(--space-5);
	border: none;
	border-radius: var(--radius-md);
	background: var(--color-green);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

#hero-form-mount .ff-btn-submit:hover,
#hero-form-mount .ff-btn-submit:focus {
	background: var(--color-green-dark);
	color: var(--color-white);
}

#hero-form-mount .ff-btn-submit:after {
	content: "";
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* ------------------------------------------------- validation and success */
#hero-form-mount .ff-el-is-error .ff-el-form-control {
	border-color: var(--color-strike);
	box-shadow: 0 0 0 3px rgba(180, 66, 60, 0.35);
}

/* no palette token reads as an error colour on navy, so this one is literal */
#hero-form-mount .error.text-danger,
#hero-form-mount .ff-el-is-error .error {
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	font-weight: 600;
	color: #FFB4AE;
}

#hero-form-mount .ff-message-success {
	grid-column: 1 / -1;
	padding: var(--space-5);
	border: 1px solid var(--color-border-green);
	border-radius: var(--radius-lg);
	background: var(--color-tint-green-soft);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-body);
}

@media (max-width: 767px) {
	#hero-form-mount .frm-fluent-form > fieldset {
		grid-template-columns: 1fr;
	}

	#hero-form-mount .ff-el-group:has([name="full_name"]),
	#hero-form-mount .ff-el-group:has([name="mobile_number"]) {
		grid-column: 1 / -1;
	}
}


/* -------------------------------------------------------------------------
   Contact form - final row
   The mockup pairs the privacy note with a right-aligned button, and carries
   no required markers on the labels. These rules come after the block above
   deliberately, so they override the full-width defaults set there.
   ------------------------------------------------------------------------- */

:is(#form-slot,#home-form-slot) .ff-el-group:has(.bcnc-form-note) {
	grid-column: span 1;
	align-self: center;
}

:is(#form-slot,#home-form-slot) .ff_submit_btn_wrapper {
	grid-column: span 1;
	align-self: center;
	text-align: end;
}

:is(#form-slot,#home-form-slot) .bcnc-form-note {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--color-faint);
}

:is(#form-slot,#home-form-slot) .bcnc-form-note:before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238A98AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V8a4 4 0 0 1 8 0v2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* the mockup shows no asterisks on the labels */
:is(#form-slot,#home-form-slot) .ff-el-is-required.asterisk-right label:after {
	content: none;
}

@media (max-width: 767px) {
	:is(#form-slot,#home-form-slot) .ff-el-group:has(.bcnc-form-note),
	:is(#form-slot,#home-form-slot) .ff_submit_btn_wrapper {
		grid-column: 1 / -1;
		text-align: start;
	}

	:is(#form-slot,#home-form-slot) .ff-btn-submit {
		width: 100%;
		justify-content: center;
	}
}


/* -------------------------------------------------------------------------
   Home contact card - padding
   The contact page card carries its padding on the slot; this one's slot comes
   from the design with padding:0, so the mount supplies it instead.
   ------------------------------------------------------------------------- */

#home-form-mount {
	padding: clamp(20px, 3vw, 32px);
	width: auto;
	min-width: auto;
}


/* -------------------------------------------------------------------------
   Searchable state dropdown
   The state fields set Fluent Forms' `enable_select_2`, which hands the
   <select> to Choices.js and replaces it with Choices' own markup. The
   original select rules above no longer paint anything, so these rules dress
   the generated markup as the design's field - once for the white cards and
   once for the navy hero card.
   ------------------------------------------------------------------------- */

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices {
	width: 100%;
	margin: 0;
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices:focus {
	outline: none;
}

/* Choices draws its own caret; the design uses the chevron below */
:is(#form-slot,#home-form-slot,#hero-form-mount) .choices[data-type*="select-one"]:after {
	content: none;
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__inner {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
	background-repeat: no-repeat;
	font-family: var(--font-sans);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--single {
	display: block;
	width: 100%;
	padding: 0;
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--single .choices__item {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------ the open dropdown panel */
:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown {
	z-index: 30;
	margin-top: var(--space-2);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: 0 24px 60px rgba(10, 35, 64, 0.14);
	overflow: hidden;
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown.is-flipped {
	margin-top: 0;
	margin-bottom: var(--space-2);
}

/* the type-to-filter box Choices inserts at the top of the panel */
:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__input--cloned {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border: none;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background: var(--color-field);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-navy);
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__input--cloned:focus {
	outline: none;
	background: var(--color-white);
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__input--cloned::placeholder {
	color: var(--color-faint);
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__list {
	max-height: 260px;
	padding: var(--space-1) 0;
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__item {
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-navy);
}

/* Choices appends a "Press to select" hint on the highlighted row */
:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__item--selectable:after {
	content: none;
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: var(--color-tint-blue);
	color: var(--color-blue-mid);
	font-weight: 600;
}

:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__item--disabled,
:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .has-no-results {
	color: var(--color-faint);
	cursor: default;
}

/* ------------------------------------------------------ white card skin */
:is(#form-slot,#home-form-slot) .choices__inner {
	padding: var(--space-4);
	padding-inline-end: calc(var(--space-4) + 24px);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background-color: var(--color-field);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A98AB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-position: right var(--space-4) center;
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-navy);
}

:is(#form-slot,#home-form-slot) .choices.is-focused .choices__inner,
:is(#form-slot,#home-form-slot) .choices.is-open .choices__inner {
	border-color: var(--color-blue-mid);
}

:is(#form-slot,#home-form-slot) .choices__placeholder {
	color: var(--color-faint);
	opacity: 1;
}

/* ------------------------------------------------------- hero card skin */
#hero-form-mount .choices__inner {
	padding: var(--space-4) var(--space-5);
	padding-inline-end: calc(var(--space-5) + 24px);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A2340' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-position: right var(--space-5) center;
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-navy);
}

#hero-form-mount .choices.is-focused .choices__inner,
#hero-form-mount .choices.is-open .choices__inner {
	border-color: var(--color-blue-pale);
	box-shadow: 0 0 0 3px rgba(127, 178, 232, 0.45);
}

#hero-form-mount .choices__placeholder {
	color: var(--color-faint);
	font-weight: 400;
	opacity: 1;
}

/* The placeholder is repeated as the first row of the open list, where it just
   offers to un-choose the state. Keep it as the resting label, drop the row. */
:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__list--dropdown .choices__placeholder {
	display: none;
}

/* The hero card clips its children so the green header follows the card's
   rounded top. That box also amputates the open dropdown, so the header takes
   its own radius and the card drops the clip only while a dropdown is open. */
#hero-card > .e-con:first-child {
	border-radius: inherit;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

#hero-card:has(.choices.is-open) {
	overflow: visible;
}

/* Fluent Forms initialises Choices with removeItemButton:true, which lands a
   faint 20px clear button on top of the chevron. The state is required and can
   be changed by picking another, so the clear control only mis-fires here. */
:is(#form-slot,#home-form-slot,#hero-form-mount) .choices[data-type*="select-one"] .choices__button {
	display: none;
}

/* Fluent Forms gives its inputs an explicit height of 40px. The Choices box is
   built from padding alone, so it stood 20px taller than the fields beside it.
   Match the height and let the flex centring place the label. */
:is(#form-slot,#home-form-slot,#hero-form-mount) .choices__inner {
	height: 40px;
	padding-block: 0;
}