/**
 * SFG Life "Start Your Journey" (RAQ) form.
 * Design tokens mirror the Web Design Library RAQ form frames.
 */

.sfg-raq {
	--sfg-raq-darkest-blue: #00185e;
	--sfg-raq-royal-blue: #1004dd;
	--sfg-raq-red: #ff5851;
	--sfg-raq-body: #222;
	--sfg-raq-gray-50: #f8f8f8;
	--sfg-raq-gray-700: #707070;
	--sfg-raq-gray-900: #2f2f2f;
	--sfg-raq-placeholder: #8d8d8d;
	--sfg-raq-radius: 4px;

	font-family: "Montserrat", sans-serif;
	color: var(--sfg-raq-body);
	text-align: left;
}

.sfg-raq *,
.sfg-raq *::before,
.sfg-raq *::after {
	box-sizing: border-box;
}

.sfg-raq__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Typography ------------------------------------------------------------- */

/* Type is handled by the theme's body-35/bold and body-17/light utility
 * classes in style.css; only color and spacing are set here. */
.sfg-raq__heading {
	margin: 0;
	color: var(--sfg-raq-darkest-blue);
}

.sfg-raq__intro {
	margin: 21px 0 0;
	color: var(--sfg-raq-body);
}

.sfg-raq__intro--narrow {
	max-width: 387px;
	margin-inline: auto;
}

.sfg-raq__asterisk {
	color: var(--sfg-raq-red);
}

.sfg-raq__required-note {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0 0 8px;
	color: var(--sfg-raq-gray-900);
	font-size: 14px;
	line-height: 1.5;
}

/* Layout ----------------------------------------------------------------- */

/* The modal's own bottom padding is clipped at the end of the scroll, so the
 * panel content carries it instead. That keeps the gap under the Send button
 * intact once inline errors grow the form past the scroll height. */
.sfg-raq__form {
	margin-top: 20px;
	padding-bottom: 60px;
}

.sfg-raq__fields {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.sfg-raq__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Radio questions sit closer together than the text inputs. */
.sfg-raq__group--radio + .sfg-raq__group--radio {
	margin-top: -5px;
}

/* Text inputs and select ------------------------------------------------- */

.sfg-raq__input {
	display: block;
	width: 100%;
	height: 40px;
	padding: 0 16px;
	background-color: var(--sfg-raq-gray-50);
	border: 1px solid var(--sfg-raq-gray-700);
	border-radius: var(--sfg-raq-radius);
	color: var(--sfg-raq-gray-900);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.15s ease;
}

.sfg-raq__input::placeholder {
	color: var(--sfg-raq-placeholder);
	opacity: 1;
}

.sfg-raq__input:focus {
	border-color: var(--sfg-raq-royal-blue);
	outline: none;
}

.sfg-raq__select {
	appearance: none;
	padding-right: 46px;
	background-image: url("./chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 8px;
	cursor: pointer;
}

/* The empty placeholder option keeps a required select invalid until chosen. */
.sfg-raq__select:required:invalid {
	color: var(--sfg-raq-placeholder);
}

.sfg-raq__select option {
	color: var(--sfg-raq-gray-900);
}

/* Radios ----------------------------------------------------------------- */

.sfg-raq__question {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	color: var(--sfg-raq-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.125px;
}

.sfg-raq__options {
	display: flex;
	align-items: center;
	gap: 40px;
}

.sfg-raq__option {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.5;
}

.sfg-raq__radio {
	appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	background-color: transparent;
	border: 1.5px solid var(--sfg-raq-gray-700);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sfg-raq__radio:checked {
	background-color: var(--sfg-raq-royal-blue);
	border-color: var(--sfg-raq-royal-blue);
	box-shadow: inset 0 0 0 2.5px #fff;
}

.sfg-raq__radio:focus-visible {
	outline: 2px solid var(--sfg-raq-royal-blue);
	outline-offset: 2px;
}

/* Error state ------------------------------------------------------------ */

.sfg-raq__error {
	margin: 4px 0 0;
	color: var(--sfg-raq-red);
	font-size: 14px;
	line-height: 1.5;
}

.sfg-raq__group.is-invalid .sfg-raq__input {
	border-color: var(--sfg-raq-red);
	color: var(--sfg-raq-red);
}

.sfg-raq__group.is-invalid .sfg-raq__input::placeholder {
	color: var(--sfg-raq-red);
}

.sfg-raq__group.is-invalid .sfg-raq__select {
	color: var(--sfg-raq-red);
}

/* Radio question and option text keep their normal color; only the radio
 * controls and the "Required" message signal the error. */
.sfg-raq__group.is-invalid .sfg-raq__radio {
	border-color: var(--sfg-raq-red);
}

.sfg-raq__form-error {
	margin: 20px 0 0;
	color: var(--sfg-raq-red);
	font-size: 14px;
	line-height: 1.5;
}

/* Submit ----------------------------------------------------------------- */

.sfg-raq__submit {
	display: block;
	width: 100%;
	margin-top: 25px;
	padding: 10px 20px;
	background-color: var(--sfg-raq-royal-blue);
	border: 1px solid var(--sfg-raq-royal-blue);
	border-radius: 0;
	color: #fff;
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.18px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sfg-raq__submit:hover:not([disabled]),
.sfg-raq__submit:focus-visible:not([disabled]) {
	background-color: #fff;
	color: var(--sfg-raq-royal-blue);
}

.sfg-raq__submit[disabled] {
	opacity: 0.65;
	cursor: default;
}

.sfg-raq__turnstile {
	display: block;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.sfg-raq__turnstile:not(:empty) {
	padding: 25px 0;
}

/* The Send button already has 25px of top margin for the empty-widget case.
 * Drop it once the challenge is on screen so the widget's own padding is even. */
.sfg-raq__form:has(.sfg-raq__turnstile:not(:empty)) .sfg-raq__submit {
	margin-top: 0;
}

/* Success state ---------------------------------------------------------- */

.sfg-raq__panel--success {
	padding-bottom: 60px;
	text-align: center;
}

.sfg-raq__success-icon {
	display: block;
	width: 63px;
	height: 63px;
	margin: 0 auto 21px;
}

/* Elementor popup 771 chrome --------------------------------------------
 * Panel padding lives in the popup's own Elementor settings (60px desktop,
 * 30px mobile) so there is no specificity conflict with Elementor's CSS.
 * Only the close button needs nudging to the Figma position. */

body #elementor-popup-modal-771 .dialog-close-button {
	inset-inline-end: 10px;
	top: 10px;
}

/* Keep the panel clear of the viewport edges. Elementor already sets
 * overflow-y: auto on .dialog-message, so capping its height here is what
 * makes a tall (or error-expanded) form scrollable inside the modal. */
body #elementor-popup-modal-771 .dialog-widget-content,
body #elementor-popup-modal-771 .dialog-message {
	max-height: 90vh;
}

body #elementor-popup-modal-771 .dialog-message {
	padding-bottom: 0;
}

/* Clip the scrolling content to the panel's rounded corners. */
body #elementor-popup-modal-771 .dialog-widget-content {
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	/* Figma insets the mobile panel 34px from each edge; Elementor's default
	 * 640px width would otherwise clamp to a full-bleed 100vw. The inner
	 * message carries its own explicit width, so it needs constraining too. */
	body #elementor-popup-modal-771 .dialog-widget-content {
		width: calc(100vw - 68px);
		max-width: calc(100vw - 68px);
	}

	body #elementor-popup-modal-771 .dialog-message {
		width: 100%;
		max-width: 100%;
	}

	.sfg-raq__options {
		gap: 32px;
	}
}