/* aa-comparison-results — Compare-the-Market style results module. */

/* ---- State machine: only one of form / loading / results is visible ---- */
.aa-cr__form,
.aa-cr__loading,
.aa-cr__results {
	display: none;
}

.aa-cr.is-state-form .aa-cr__form {
	display: block;
}

.aa-cr.is-state-loading .aa-cr__loading {
	display: flex;
}

.aa-cr.is-state-results .aa-cr__results {
	display: block;
}

.aa-cr__placeholder {
	padding: 1em;
	border: 1px dashed #c7ccd1;
	border-radius: 8px;
	color: #6b7280;
	text-align: center;
}

/* ---- Loading state ---- */
.aa-cr__loading {
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 48px 16px;
	text-align: center;
	background: #ffffff;
	border-radius: 12px;
}

.aa-cr__spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid rgba(7, 13, 61, 0.15);
	border-top-color: #2ea3f2;
	border-radius: 50%;
	animation: aa-cr-spin 0.8s linear infinite;
	flex: 0 0 auto;
}

.aa-cr__loading-text {
	font-size: 1.05rem;
	font-weight: 600;
	color: #070d3d;
}

@keyframes aa-cr-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aa-cr__spinner {
		animation-duration: 2s;
	}
}

/* ---- Results state ---- */
.aa-cr__results-heading {
	margin: 0 0 24px;
	color: #ffffff;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
}

.aa-cr__table {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-bottom: 48px;
}

/* ---- Result row ---- */
.aa-cr__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(150px, 1fr) 3fr;
	align-items: stretch;
	gap: 28px;
	padding: 26px 30px;
	background: #fff;
	border: 1px solid #2ea3f2;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(7, 13, 61, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.aa-cr__row:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(7, 13, 61, 0.12);
}

.aa-cr__row.is-highlight {
	border-color: #2ea3f2;
	box-shadow: 0 0 0 2px rgba(46, 163, 242, 0.25);
}

/* Top result: the first row shown gets a thicker green border to mark it as
   the best match. Scoped to the first child of the table so it targets exactly
   one row (not the highlight toggle), and its specificity (0,3,0) beats the
   .is-highlight rule so it wins even when the top row is also highlighted. */
.aa-cr__table > .aa-cr__row:first-child {
	border: 6px solid #50cf8c;
	box-shadow: 0 0 0 2px rgba(80, 207, 140, 0.25);
}

.aa-cr__badge {
	position: absolute;
	top: -11px;
	left: 24px;
	padding: 3px 12px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #50cf8c;
	border-radius: 999px;
}

/* The top row's 6px border pushes the badge's positioning origin (the padding
   box) further in than on the 1px rows, shifting it right and down. Pull the
   badge back on both axes so it sits where it did before the thick border. */
.aa-cr__table > .aa-cr__row:first-child .aa-cr__badge {
	top: -18px;
	left: 19px;
}

.aa-cr__cell {
	min-width: 0;
}

.aa-cr__cell--brand {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: start;
}

.aa-cr__logo {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.aa-cr__name {
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.25;
	color: #111827;
}

/* Content spans the right side; footer (price + CTA) sits at the bottom */
.aa-cr__cell--content {
	display: flex;
	flex-direction: column;
}

.aa-cr__features {
	margin: 0;
	padding: 0;
	font-size: 0.98rem;
	color: #374151;
	line-height: 1.55;
}

.aa-cr__features p {
	margin: 0 0 6px;
}

.aa-cr__features p:last-child {
	margin-bottom: 0;
}

.aa-cr__price {
	display: flex;
	align-items: baseline;
	gap: 3px;
	font-size: 1.6rem;
	font-weight: 800;
	color: #111827;
}

.aa-cr__price-suffix {
	font-size: 0.85rem;
	font-weight: 600;
	color: #6b7280;
}

.aa-cr__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 16px;
}

/* Price (if used) sits far left, CTA stays bottom-right */
.aa-cr__footer .aa-cr__price {
	margin-right: auto;
}

.aa-cr__button {
	display: inline-block;
	padding: 11px 24px;
	font-weight: 700;
	color: #fff;
	background: #070d3d;
	border-radius: 5px;
	text-decoration: none;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.aa-cr__button:hover {
	background: #2ea3f2;
	color: #fff;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.aa-cr__row {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.aa-cr__cell--brand {
		align-items: center;
		text-align: center;
	}

	.aa-cr__footer {
		flex-wrap: wrap;
		justify-content: center;
	}

	.aa-cr__footer .aa-cr__price {
		margin-right: 0;
	}

	.aa-cr__button {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ===================================================================== */
/* Embedded Fluent Forms styling.                                        */
/* Scoped to .aa-cr so it only affects the form inside this module,      */
/* which lets the Fluent Forms "Custom CSS" box be left empty.           */
/* The form sits on the page's dark background.                          */
/* ===================================================================== */

/* Brand font */
.aa-cr .fluentform,
.aa-cr .fluentform .ff-el-form-control,
.aa-cr .fluentform .ff-btn {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* White panel + 15px breathing room around the form (module itself is transparent) */
.aa-cr__form {
	padding: 15px;
	background: #ffffff;
	border-radius: 12px;
}

/* Field question labels: centered, brand navy, larger */
.aa-cr .fluentform .ff-el-group .ff-el-input--label,
.aa-cr .fluentform .ff-el-group .ff-el-input--label label,
.aa-cr .fluentform .ff-el-input--label,
.aa-cr .fluentform .ff-el-input--label label,
.aa-cr .fluentform .ff-el-section-title {
	color: #070d3d !important;
	text-align: center !important;
	font-size: 1.4rem !important;
	font-weight: 600;
	display: block;
	width: 100%;
}

/* Option labels sitting beside a checkbox/radio input stay left-aligned and dark */
.aa-cr .fluentform .ff-el-form-check-label,
.aa-cr .fluentform .ff-el-form-check-label span {
	color: #070d3d !important;
	text-align: left;
	font-size: 1.05rem !important;
	font-weight: 400;
}

/* Image-choice options: centered, with more space above and between them */
.aa-cr .fluentform .ff_el_checkable_photo_holders {
	text-align: center !important;
	margin-top: 24px;
}

.aa-cr .fluentform .ff_el_checkable_photo_holders .ff-el-form-check.ff-el-image-holder {
	display: inline-block;
	vertical-align: top;
	float: none !important;
	margin: 10px 32px 24px !important;
	text-align: center;
}

/* Hide the text label under each image (selection still works via the image) */
.aa-cr .fluentform .ff_el_checkable_photo_holders .ff-el-form-check-label {
	display: none !important;
}

/* No selected/active highlight on the image options */
.aa-cr .fluentform .ff_el_checkable_photo_holders .ff-el-image-holder.ff_item_selected,
.aa-cr .fluentform .ff_el_checkable_photo_holders .ff_item_selected .ff-el-image-input-src,
.aa-cr .fluentform .ff_el_checkable_photo_holders .ff-el-image-input-src {
	box-shadow: none !important;
	border: none !important;
	outline: none !important;
	background-color: transparent !important;
}

/* Help / progress text readable on white */
.aa-cr .fluentform .ff-el-section-break-desc,
.aa-cr .fluentform .ff-el-help-message,
.aa-cr .fluentform .ff-step-titles li,
.aa-cr .fluentform .ff-el-progress-status,
.aa-cr .fluentform .ff-el-progress-title {
	color: #5a6473 !important;
}

/* Required asterisk */
.aa-cr .fluentform .ff-el-is-required.asterisk-right label:after,
.aa-cr .fluentform .ff-el-is-required.asterisk-left label:before {
	color: #2ea3f2 !important;
}

/* Section divider line */
.aa-cr .fluentform .ff-el-section-break hr {
	border-color: rgba(7, 13, 61, 0.12);
}

/* Inputs: light border, navy text on white */
.aa-cr .fluentform .ff-el-form-control {
	background: #ffffff;
	color: #070d3d;
	border: 1px solid #c7ccd1;
	border-radius: 5px;
}

/* Space between the label and the input, and below it (text/select/email/textarea) */
.aa-cr .fluentform .ff-el-input--content .ff-el-form-control {
	margin-top: 16px;
	margin-bottom: 8px;
}

.aa-cr .fluentform .ff-el-form-control:focus {
	border-color: #2ea3f2;
	box-shadow: 0 0 0 2px rgba(46, 163, 242, 0.25);
}

.aa-cr .fluentform .ff-el-form-control::placeholder {
	color: #6c757d;
}

/* Buttons (5px radius, bold) */
.aa-cr .fluentform .ff-btn {
	border-radius: 5px !important;
	font-weight: bold !important;
	padding: 0.85rem 1.8rem !important;
	transition: all ease-in-out 0.2s !important;
	box-shadow: none !important;
}

/* Primary actions (Next / Submit) — brand blue */
.aa-cr .fluentform .ff-btn-next,
.aa-cr .fluentform .ff-btn-submit {
	background: #2ea3f2 !important;
	border: 2px solid #2ea3f2 !important;
	color: #ffffff !important;
}

.aa-cr .fluentform .ff-btn-next:hover,
.aa-cr .fluentform .ff-btn-submit:hover {
	background: #1e93e2 !important;
	border-color: #1e93e2 !important;
	color: #ffffff !important;
}

/* "Previous" — navy outline (visible on white) */
.aa-cr .fluentform .ff-btn-prev {
	background: transparent !important;
	border: 2px solid #070d3d !important;
	color: #070d3d !important;
}

.aa-cr .fluentform .ff-btn-prev:hover {
	background: #070d3d !important;
	border-color: #070d3d !important;
	color: #ffffff !important;
}

/* Progress bar — green fill on a light track, fully rounded (per screenshot) */
.aa-cr .fluentform .ff-el-progress {
	background-color: #e8ebee !important;
	border-radius: 999px !important;
	overflow: hidden;
}

.aa-cr .fluentform .ff-el-progress-bar {
	background-color: #5cb85c !important;
	border-radius: 999px !important;
}

/* Hide the "Step 1 of 6" progress status text */
.aa-cr .fluentform .ff-el-progress-status {
	display: none !important;
}

/* No extra gap under the step body */
.aa-cr .fluentform .ff-step-body {
	margin-bottom: 0 !important;
}