/* ==========================================================================
   "Request a Quote" — two-step popup form
   ==========================================================================
   Only what differs from the live-review form. Every field primitive
   (.quote-form__input, .quote-form__label, .quote-step__title, the consent
   checkbox, the card shell) is shared with it and defined in
   assets/css/quote-step.css, which this file NEVER edits.

   Hard rule: any selector that mentions a shared .quote-* class is scoped to
   .popup--rq, so nothing here can reach the live-review popup. Selectors made
   only of new .rq-* classes need no prefix — those classes exist nowhere else.
   ========================================================================== */

/* ==========================================================================
   Panels
   ========================================================================== */

/* Load-bearing: the inactive panel is hidden with the native [hidden] attribute
   so the FLS validator skips its [required] fields (offsetParent === null).
   Any display rule on .rq-panel would silently override the UA's [hidden]. */
.rq-panel[hidden] {
	display: none !important;
}

/* ==========================================================================
   Card
   ========================================================================== */

/* The design's background is a gradient plus a blurred decorative circle, not a
   bitmap — so unlike the live-review card this one needs no image at all, and no
   lazy-loading trick to keep it off every page view. */
/* Transparent shell: the card carries the background. Scoped so the live-review
   popup's .quote-step keeps its own fill. */
.popup--rq .quote-step {
	background: transparent;
}

.popup--rq .quote-step__card {
	background-color: #eef6ff;
	background-image:
		radial-gradient(circle 354px at calc(50% + 4.5px) -75px, rgba(238, 246, 255, 0.8) 0%, rgba(238, 246, 255, 0) 72%),
		linear-gradient(90deg, rgba(74, 141, 255, 0.03) 0%, rgba(74, 141, 255, 0.03) 100%),
		linear-gradient(0deg, rgba(238, 246, 255, 0.5) 8.23%, rgba(180, 208, 255, 0.5) 98.29%);
}

.popup--rq .quote-step__hero {
	padding-bottom: 0;
}

/* The accent word is a bare <span> — a BEM class on span is not allowed here, so
   the shared .quote-step__title-accent rule cannot be reused. Scoped to this
   popup, it cannot reach the live-review title. */
.popup--rq .quote-step__title h2 span {
	color: #28b3a3;
}

/* ==========================================================================
   Header — step progress
   ========================================================================== */

.popup--rq .quote-step-header {
	position: relative;
}

/* The header already draws a 1px white rule as its bottom border; this sits on
   top of it and grows with the step. */
.rq-progress__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 50%;
	height: 1px;
	background: #4a8dff;
	transition: width 0.25s ease;
}

.rq-progress__bar.--rq-full {
	width: 100%;
}

.rq-progress {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 16px;
	line-height: 140%;
	letter-spacing: -0.02em;
	color: rgba(21, 59, 114, 0.3);
}

/* aria-current is the semantics and the styling hook at once — no state class. */
.rq-progress [aria-current="step"] {
	font-weight: 600;
	color: #153b72;
}

/* Re-declared rather than reusing .quote-step-header__contact-label, which the
   live-review form puts on a <span> — a BEM class on span/p is not allowed here. */
.popup--rq .quote-step-header__contact span {
	margin-right: 6px;
	font-weight: 600;
	font-size: 20px;
	line-height: 140%;
	letter-spacing: -0.02em;
	color: #153b72;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.popup--rq .rq-grid {
	/* Column gap is the design's 20px; the row gap is smaller because each row
	   already carries the label's 10px margin below it. */
	gap: 16px 20px;
	margin-bottom: 30px;
}

/* ==========================================================================
   Radio tiles — Gender, Nicotine Use
   ========================================================================== */

.rq-choice {
	min-width: 0; /* fieldset defaults to min-content, which breaks grid columns */
	margin: 0;
	padding: 0;
	border: 0;
}

.rq-choice legend {
	padding: 0;
}

.rq-choice__list {
	display: flex;
	gap: 10px;
	padding: 10px;
	border-radius: 15px;
	background: #ffffff;
}

/* Visually hidden, still focusable and still announced. appearance:none keeps
   browsers from painting the native control outside the 1px box. */
.rq-radio {
	appearance: none;
	-webkit-appearance: none;
	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;
}

/* Selection is pure CSS: the <label> directly follows its input. Deliberately NOT
   named "__label" — index.css:115 gives every [class*=__label] a ::before bullet,
   which would sit inside the tile next to the text. */
.rq-choice__tile {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 10px;
	border-radius: 12px;
	background: #e0efff;
	color: #122a42;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.02em;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.rq-radio:checked + .rq-choice__tile {
	background: #28b3a3;
	color: #ffffff;
}

.rq-radio:focus-visible + .rq-choice__tile {
	outline: 2px solid #4a8dff;
	outline-offset: 2px;
}

/* The global [data-fls-form-error] is absolutely positioned (index.css), so the
   group needs its own anchor and an offset clear of the tiles. */
.rq-choice [data-fls-form-error] {
	position: absolute;
	bottom: -1rem;
	pointer-events: none;
}

/* ==========================================================================
   Actions
   ========================================================================== */

.rq-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 28px;
}

.rq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 60px;
	/* 6 + 48 (chip) + 6 = the design's 60px, so the base carries no border —
	   only the secondary does, with its padding reduced to match. */
	padding: 6px 6px 6px 12px;
	border: 0;
	border-radius: 18px;
	font-family: inherit;
	font-weight: 500;
	font-size: 21px;
	letter-spacing: -0.02em;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* The arrow chip is a pseudo-element, so the button carries no extra markup. */
.rq-btn--primary::after {
	content: "";
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #ffffff url("../img/icons/arrow-right.svg") center / 24px 24px no-repeat;
}

.rq-btn--primary {
	background: #153b72;
	color: #ffffff;
}

/* The design gives the single Continue button a fixed width; its label alone
   would render it a third narrower. */
.rq-actions--single .rq-btn--primary {
	min-width: 251px;
}

/* Not the `disabled` attribute: the button stays focusable, and a click can say
   which field is still missing. The submit itself is blocked in
   assets/js/request-quote.js. */
.rq-btn[aria-disabled="true"] {
	background: rgba(21, 59, 114, 0.5);
}

.rq-btn--secondary {
	padding: 5px 23px;
	background: #ffffff;
	border: 1px solid #153b72;
	color: #153b72;
}

@media (any-hover: hover) {
	.rq-btn--primary:not([aria-disabled="true"]):hover {
		background: #122a42;
	}

	.rq-btn--secondary:hover {
		background: #eef6ff;
	}
}

/* ==========================================================================
   Request failure notice
   ========================================================================== */

/* The FLS bundle has no .catch() on its fetch, so a lost request would otherwise
   leave the visitor staring at a form that looks stuck. Filled by
   assets/js/request-quote.js. */
.rq-alert {
	margin-bottom: 20px;
	padding: 14px 18px;
	border: 1px solid rgba(235, 79, 79, 0.4);
	border-radius: 12px;
	background: #fff5f5;
	color: #eb4f4f;
	font-weight: 500;
	font-size: 15px;
	line-height: 140%;
	text-align: center;
}

.rq-alert[hidden] {
	display: none;
}

/* While the request is in flight. The bundle owns this class, and adds it
   within milliseconds of the click — so this is the visitor's only sign, until
   the server answers, that anything happened. The submit button therefore stays
   fully opaque and shows a spinner in place of the arrow (with the label swapped
   to "Sending…" by request-quote.js); dimming it, as before, read as "disabled".
   Only the Back button dims. */
.rq-form.--sending .rq-btn {
	pointer-events: none;
}

.rq-form.--sending .rq-btn--secondary {
	opacity: 0.6;
}

.rq-form.--sending .rq-btn--primary {
	cursor: progress;
}

/* Animated SVG (SMIL) rather than a CSS keyframe on the chip: the chip is a
   rounded square, and rotating it would turn the whole square, not the arc. */
.rq-form.--sending .rq-btn--primary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23cce5ff' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' stroke='%234a8dff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}

/* SMIL ignores prefers-reduced-motion, so serve the same arc without the animation. */
@media (prefers-reduced-motion: reduce) {
	.rq-form.--sending .rq-btn--primary::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23cce5ff' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' stroke='%234a8dff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	}
}

/* ==========================================================================
   Footer bar — "Speak to an Agent"
   ========================================================================== */

.rq-footerbar {
	display: flex;
	align-items: center;
	justify-content: center;
	/* min-height, not height: the line wraps on narrow screens. */
	min-height: 95px;
	padding: 20px;
	background: #d8e7ff;
}

.rq-footerbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: -0.02em;
	color: #153b72;
	text-align: center;
}

.rq-footerbar__phone {
	color: #28b3a3;
	text-decoration: none;
}

@media (any-hover: hover) {
	.rq-footerbar__phone:hover {
		text-decoration: underline;
	}
}

/* ==========================================================================
   Thank-you popup — text only, no video
   ==========================================================================
   Follows the Figma frame "Frame 2147237258" (file BYMDbpo3Igk3kykTz5a3D7,
   node 541:3991). The card, heading, button and phone strip are the form's own
   components; only the label, subtitle and "what happens next" block are new.
   Vertical rhythm is set with margins, not the frame's absolute coordinates. */

/* 925px of content + the card's 10px border on each side. */
.popup--rq-thanks [data-fls-popup-body] {
	max-width: 945px;
}

/* --- Hand-off from the form to this popup -------------------------------------
   The base popup animation (index.css) scales the body 0 -> 1 on open and 1 -> 0
   on close. On submit that made the form shrink to nothing while this popup grew
   out of nothing — a visible gap, and a jump to what looks like a different
   popup. Here the change is a dissolve in place: no scaling, only opacity. */
.popup--rq-thanks [data-fls-popup-body] {
	opacity: 0;
	transform: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.popup--rq-thanks[data-fls-popup-active] [data-fls-popup-body] {
	opacity: 1;
	transition: opacity 0.35s ease, visibility 0s;
}

/* The form popup, while it hands over (class set by request-quote.js on a
   successful send). It stays full size and fully opaque under the incoming
   popup for a moment, then fades out — the overlap is the dissolve, and the
   form's edges, which stick out past the smaller thank-you card, fade rather
   than pop. Only applies during the hand-off: closing the form with X keeps
   the normal animation. */
.popup--rq.--rq-handoff:not([data-fls-popup-active]) [data-fls-popup-body] {
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.2s ease 0.15s, visibility 0s linear 0.35s;
}

@media (prefers-reduced-motion: reduce) {
	.popup--rq-thanks [data-fls-popup-body],
	.popup--rq-thanks[data-fls-popup-active] [data-fls-popup-body],
	.popup--rq.--rq-handoff:not([data-fls-popup-active]) [data-fls-popup-body] {
		transition-duration: 0s;
		transition-delay: 0s;
	}
}

.popup--rq-thanks .quote-step__card {
	display: flex;
	flex-direction: column;
	/* The frame's gradient is 50% transparent and sits on white, so the base is
	   white here; the form's #eef6ff base would tint the whole card ~7 units
	   too dark (measured against the Figma render). */
	background-color: #ffffff;
	/* "Ellipse 4" from the frame: r=354 circle centred 126px above the top edge,
	   Gaussian blur 50. The 0.6 alpha is tuned against the Figma render (within
	   2 units at every sampled point), not the frame's 0.8 layer opacity, because
	   a CSS gradient edge is not a real blur. The form card's version of it is
	   centred higher and fainter, which left this card's top-centre ~8 units too
	   dark. The two gradient layers below it are the same as the form's. */
	background-image:
		radial-gradient(circle 405px at calc(50% + 4.5px) -126px, rgba(243, 248, 254, 0.6) 0%, rgba(243, 248, 254, 0.6) 74%, rgba(243, 248, 254, 0) 100%),
		linear-gradient(90deg, rgba(74, 141, 255, 0.03) 0%, rgba(74, 141, 255, 0.03) 100%),
		linear-gradient(0deg, rgba(238, 246, 255, 0.5) 8.23%, rgba(180, 208, 255, 0.5) 98.29%);
}

/* .popup--rq .quote-step__body pads the form's panels at >=620px; the doubled
   class keeps this popup's own spacing regardless of stylesheet order. */
.popup--rq.popup--rq-thanks .quote-step__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px 30px;
	text-align: center;
}

.rq-thanks__eyebrow {
	margin-bottom: 27px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #4a8dff;
}

/* The shared .quote-step__title already matches the frame: 50px / 600 /
   line-height 100% / -0.04em, with the accent span coloured teal above. */
.popup--rq-thanks .quote-step__hero {
	width: 100%;
}

/* The shared 30px title margin is tuned for the form; the frame sits the
   subtitle 18px under the heading. */
.popup--rq-thanks .quote-step__title {
	margin-bottom: 18px;
}

.rq-thanks__text {
	max-width: 528px;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.05em;
	color: #122a42;
}

.rq-thanks__text a {
	color: #4a8dff;
	text-decoration: underline;
}

.rq-thanks__next {
	max-width: 528px;
	margin-top: 21px;
}

.rq-thanks__next-title {
	margin-bottom: 9px;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	color: #153b72;
	opacity: 0.5;
}

.rq-thanks__next-text {
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #122a42;
	opacity: 0.8;
}

/* The button is an <a> here (it goes to the home page), so it needs the
   link resets a <button> gets for free. Width is the frame's 233px. */
.rq-thanks__btn {
	min-width: 233px;
	margin-top: 28px;
	color: #ffffff;
	text-decoration: none;
}

/* 97px and a 60% tint, per the frame (step 2 of the form uses 95px / solid). */
.popup--rq-thanks .rq-footerbar {
	min-height: 97px;
	background: rgba(216, 231, 255, 0.6);
}

.popup--rq-thanks .rq-footerbar__inner {
	line-height: 1.4;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 620px) {
	/* The frame is 635px tall; on a phone the content sets the height instead. */
	.popup--rq-thanks .quote-step__card {
		min-height: 635px;
	}

	.popup--rq.popup--rq-thanks .quote-step__body {
		padding: 90px 50px 58px;
	}

	.popup--rq .quote-step__body {
		/* 35 rather than the shared 40: with 40 every row below the header sat a
		   constant 5px lower than the design. */
		padding: 35px 50px 50px;
	}

	.popup--rq .quote-step-header__inner {
		padding: 30px;
	}
}

/* The live-review form drops the header phone below 620px and repeats it under
   the benefits strip. This form has no benefits strip, so it keeps the phone in
   the header and lets the row wrap instead. */
@media (max-width: 619px) {
	.popup--rq .quote-step-header__contact {
		display: block;
		min-width: 0;
		width: 100%;
		text-align: center;
	}

	.rq-progress {
		justify-content: center;
	}

	.rq-btn,
	.rq-actions {
		width: 100%;
	}

	.rq-btn {
		justify-content: center;
	}

	.rq-btn--primary {
		justify-content: space-between;
	}

	.rq-footerbar__inner {
		font-size: 20px;
	}

	.rq-thanks__text {
		font-size: 20px;
	}

	.rq-thanks__btn {
		min-width: 0;
	}
}

@media (max-width: 479px) {
	.rq-choice__tile {
		min-height: 64px;
		font-size: 18px;
	}

	.rq-btn {
		font-size: 18px;
	}
}