/**
 * 5ster Express Quote Calculator: front end.
 *
 * Everything is scoped under .fsq. Customise it with the custom properties on .fsq (the Elementor widget's style
 * controls set these too): --fsq-accent, --fsq-accent-contrast, --fsq-accent-text, --fsq-bg, --fsq-text,
 * --fsq-muted, --fsq-border, --fsq-radius, --fsq-error, --fsq-success, --fsq-whatsapp, --fsq-whatsapp-text.
 * The shortcode sets --fsq-accent-contrast and --fsq-accent-text automatically when a light accent is chosen.
 *
 * Form controls and buttons are styled through `.fsq:not(#fsq-shield)`. No element has that id, so the selector
 * always matches, but it carries id-level specificity: theme and Elementor Kit styles for inputs and buttons
 * (up to `.elementor-kit-N input:focus:not([type="button"]):not([type="submit"])`) cannot restyle them.
 * Change their look with the custom properties above rather than with selectors.
 */

/* --------------------------------------------------------------------------------------------------------------
 * Tokens and root
 * ----------------------------------------------------------------------------------------------------------- */

.fsq {
	--fsq-accent: #3141ec;
	--fsq-accent-contrast: #fff;
	--fsq-bg: #fff;
	--fsq-text: #111827;
	--fsq-muted: #6b7280;
	--fsq-border: #e5e7eb;
	--fsq-radius: 12px;
	--fsq-error: #b91c1c;
	--fsq-success: #047857;
	/* SPEC-NOTE: SPEC §10 asks for #25D366 with white text, which is only about 2:1 contrast (below WCAG AA).
	   Kept as specified; set --fsq-whatsapp to #128c7e (or --fsq-whatsapp-text to #111827) for an AA-compliant button. */
	--fsq-whatsapp: #25d366;
	--fsq-whatsapp-hover: #1ebe5b;
	--fsq-whatsapp-text: #fff;

	/* Derived tokens. Fallbacks first; browsers with color-mix() derive them from the accent below. */
	--fsq-text-soft: #374151;
	--fsq-input-border: #8c94a3;
	--fsq-surface: #f8fafc;
	--fsq-accent-soft: rgba(49, 65, 236, 0.08);
	--fsq-accent-ring: rgba(49, 65, 236, 0.4);
	--fsq-accent-hover: var(--fsq-accent);
	--fsq-accent-text: var(--fsq-accent); /* Accent for text, icons and focus outlines on light backgrounds. */
	--fsq-error-soft: #fef2f2;
	--fsq-error-border: #fecaca;
	--fsq-error-ring: rgba(185, 28, 28, 0.25);
	--fsq-success-soft: #ecfdf5;
	--fsq-warn-soft: #fffbeb;
	--fsq-warn-border: #fcd34d;
	--fsq-warn-text: #92400e;
	--fsq-radius-sm: calc(var(--fsq-radius) * 0.75);
	--fsq-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -12px rgba(17, 24, 39, 0.2);
	--fsq-scroll-offset: 96px;

	display: block;
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 0 auto 24px;
	padding: 0;
	color: var(--fsq-text);
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.fsq {
		--fsq-accent-soft: color-mix(in srgb, var(--fsq-accent) 8%, transparent);
		--fsq-accent-ring: color-mix(in srgb, var(--fsq-accent) 40%, transparent);
		--fsq-accent-hover: color-mix(in srgb, var(--fsq-accent) 85%, #000);
		--fsq-error-ring: color-mix(in srgb, var(--fsq-error) 25%, transparent);
	}
}

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

/* Themes often set display on elements; [hidden] must always win. */
.fsq [hidden] {
	display: none !important;
}

.fsq .fsq__sr,
.fsq .fsq__hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* Programmatically focused headings: no ring for mouse users, a clear one for keyboard users. */
.fsq [tabindex="-1"]:focus {
	outline: none;
}

.fsq [tabindex="-1"]:focus-visible {
	outline: 3px solid var(--fsq-accent-ring);
	outline-offset: 4px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------------------------------------------
 * Card and header
 * ----------------------------------------------------------------------------------------------------------- */

.fsq .fsq__card {
	position: relative;
	margin: 0;
	padding: 24px 16px;
	overflow: hidden;
	border: 1px solid var(--fsq-border);
	border-radius: var(--fsq-radius);
	background: var(--fsq-bg);
	box-shadow: var(--fsq-shadow);
	color: var(--fsq-text);
}

.fsq .fsq__card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background: var(--fsq-accent);
}

.fsq .fsq__header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 24px;
	padding: 0;
}

.fsq .fsq__badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-accent-soft);
	color: var(--fsq-accent-text);
}

.fsq .fsq__icon {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.fsq .fsq__heading {
	min-width: 0;
}

/* Font family is left to the theme so the title matches the site's headings. */
.fsq .fsq__title {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--fsq-text);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: none;
}

.fsq .fsq__intro {
	margin: 6px 0 0;
	padding: 0;
	color: var(--fsq-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------------------------------------------
 * Calculator form layout
 * ----------------------------------------------------------------------------------------------------------- */

.fsq .fsq__calc,
.fsq .fsq__request {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.fsq .fsq__group {
	min-width: 0;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	background: none;
}

.fsq .fsq__legend {
	display: block;
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	color: var(--fsq-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.fsq .fsq__step {
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 8px 0 0;
	border-radius: 50%;
	background: var(--fsq-accent);
	color: var(--fsq-accent-contrast);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0;
	text-align: center;
	vertical-align: top;
}

/* One column on small screens, two side by side once each column can be at least 250px wide (about 640px). */
.fsq .fsq__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
}

.fsq .fsq__row--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

/* Length, width and height always share one row. */
.fsq .fsq__row--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.fsq .fsq__row--weight {
	margin-top: 16px;
}

.fsq .fsq__row-errors .fsq__error {
	margin-top: 8px;
}

.fsq .fsq__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.fsq .fsq__label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--fsq-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.fsq .fsq__optional {
	color: var(--fsq-muted);
	font-weight: 400;
}

.fsq .fsq__field-hint {
	margin: -2px 0 8px;
	padding: 0;
	color: var(--fsq-muted);
	font-size: 14px;
	line-height: 1.45;
}

.fsq .fsq__hint {
	display: flex;
	align-items: center;
	align-self: stretch;
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed var(--fsq-border);
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-surface);
	color: var(--fsq-text-soft);
	font-size: 14px;
	line-height: 1.5;
}

.fsq .fsq__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	color: var(--fsq-error);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.fsq .fsq__error::before {
	content: "!";
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--fsq-error);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* --------------------------------------------------------------------------------------------------------------
 * Form controls (shielded from theme styles, see the note at the top)
 * ----------------------------------------------------------------------------------------------------------- */

.fsq:not(#fsq-shield) .fsq__control {
	display: block;
	float: none;
	width: 100%;
	max-width: none;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--fsq-input-border);
	border-radius: var(--fsq-radius-sm);
	outline: 2px solid transparent;
	outline-offset: 0;
	background: var(--fsq-bg);
	background-image: none;
	box-shadow: none;
	color: var(--fsq-text);
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming into the field. */
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-indent: 0;
	text-transform: none;
	text-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fsq:not(#fsq-shield) .fsq__control::placeholder {
	color: var(--fsq-muted);
	opacity: 1;
}

.fsq:not(#fsq-shield) .fsq__control:hover {
	border-color: var(--fsq-text-soft);
}

.fsq:not(#fsq-shield) .fsq__control:focus {
	border-color: var(--fsq-accent-text);
	outline: 2px solid transparent;
	background: var(--fsq-bg);
	box-shadow: 0 0 0 3px var(--fsq-accent-ring);
	color: var(--fsq-text);
}

.fsq:not(#fsq-shield) .fsq__control[aria-invalid="true"] {
	border-color: var(--fsq-error);
	box-shadow: 0 0 0 1px var(--fsq-error);
}

.fsq:not(#fsq-shield) .fsq__control[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px var(--fsq-error-ring);
}

.fsq:not(#fsq-shield) .fsq__control--unit {
	padding-right: 36px;
	padding-left: 12px;
}

.fsq:not(#fsq-shield) .fsq__textarea {
	min-height: 96px;
	resize: vertical;
}

.fsq:not(#fsq-shield) .fsq__select {
	padding-right: 42px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.fsq:not(#fsq-shield) .fsq__select::-ms-expand {
	display: none;
}

.fsq:not(#fsq-shield) .fsq__select.fsq__control--empty {
	color: var(--fsq-muted);
}

.fsq:not(#fsq-shield) .fsq__select option {
	color: var(--fsq-text);
}

.fsq .fsq__select-wrap,
.fsq .fsq__input-wrap {
	position: relative;
	margin: 0;
	padding: 0;
}

.fsq .fsq__select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 17px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--fsq-text-soft);
	border-bottom: 2px solid var(--fsq-text-soft);
	transform: rotate(45deg);
	pointer-events: none;
}

.fsq .fsq__unit {
	position: absolute;
	top: 50%;
	right: 12px;
	color: var(--fsq-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------------------------------------------
 * Buttons (shielded from theme styles)
 * ----------------------------------------------------------------------------------------------------------- */

.fsq:not(#fsq-shield) .fsq__btn {
	display: inline-flex;
	float: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--fsq-radius-sm);
	outline: 2px solid transparent;
	outline-offset: 2px;
	background: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--fsq-text);
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.fsq:not(#fsq-shield) .fsq__btn:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.fsq:not(#fsq-shield) .fsq__btn:focus-visible {
	outline: 3px solid var(--fsq-accent-text);
	outline-offset: 2px;
}

.fsq:not(#fsq-shield) .fsq__btn:active:not([disabled]) {
	transform: translateY(1px);
}

.fsq:not(#fsq-shield) .fsq__btn[disabled] {
	cursor: progress;
	opacity: 0.75;
}

.fsq:not(#fsq-shield) .fsq__btn .fsq__icon {
	width: 20px;
	height: 20px;
}

.fsq:not(#fsq-shield) .fsq__btn--primary,
.fsq:not(#fsq-shield) .fsq__btn--primary:focus {
	border-color: var(--fsq-accent);
	background: var(--fsq-accent);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08), 0 6px 16px -8px var(--fsq-accent-ring);
	color: var(--fsq-accent-contrast);
}

.fsq:not(#fsq-shield) .fsq__btn--primary:hover {
	border-color: var(--fsq-accent-hover);
	background: var(--fsq-accent-hover);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08), 0 8px 20px -8px var(--fsq-accent-ring);
	color: var(--fsq-accent-contrast);
}

.fsq:not(#fsq-shield) .fsq__btn--secondary,
.fsq:not(#fsq-shield) .fsq__btn--secondary:focus {
	border-color: var(--fsq-accent-text);
	background: var(--fsq-bg);
	color: var(--fsq-accent-text);
}

.fsq:not(#fsq-shield) .fsq__btn--secondary:hover {
	border-color: var(--fsq-accent-text);
	background: var(--fsq-accent-soft);
	color: var(--fsq-accent-text);
}

.fsq:not(#fsq-shield) .fsq__btn--whatsapp,
.fsq:not(#fsq-shield) .fsq__btn--whatsapp:focus,
.fsq:not(#fsq-shield) .fsq__btn--whatsapp:visited {
	border-color: var(--fsq-whatsapp);
	background: var(--fsq-whatsapp);
	color: var(--fsq-whatsapp-text);
}

.fsq:not(#fsq-shield) .fsq__btn--whatsapp:hover {
	border-color: var(--fsq-whatsapp-hover);
	background: var(--fsq-whatsapp-hover);
	color: var(--fsq-whatsapp-text);
}

.fsq:not(#fsq-shield) .fsq__btn--block {
	display: flex;
	width: 100%;
	min-height: 52px;
	font-size: 17px;
}

.fsq:not(#fsq-shield) .fsq__btn--small {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 15px;
}

.fsq .fsq__spinner {
	display: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: fsq-spin 0.75s linear infinite;
}

.fsq .fsq__btn.is-busy .fsq__spinner {
	display: inline-block;
}

.fsq .fsq__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
}

.fsq .fsq__actions .fsq__btn {
	flex: 1 1 200px;
}

.fsq .fsq__actions--center {
	justify-content: center;
}

/* --------------------------------------------------------------------------------------------------------------
 * Alerts
 * ----------------------------------------------------------------------------------------------------------- */

.fsq .fsq__alert {
	display: block;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--fsq-error-border);
	border-left: 4px solid var(--fsq-error);
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-error-soft);
	color: var(--fsq-error);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
}

.fsq .fsq__alert .fsq__alert-text {
	margin: 0;
	padding: 0;
	color: inherit;
}

.fsq:not(#fsq-shield) .fsq__alert .fsq__btn {
	margin-top: 10px;
}

/* --------------------------------------------------------------------------------------------------------------
 * Result
 * ----------------------------------------------------------------------------------------------------------- */

.fsq .fsq__output {
	margin: 0;
	padding: 0;
}

.fsq .fsq__result {
	margin: 24px 0 0;
	padding: 20px 16px;
	border: 1px solid var(--fsq-border);
	border-radius: var(--fsq-radius);
	background: var(--fsq-surface);
	scroll-margin-top: var(--fsq-scroll-offset);
}

.fsq .fsq__result-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 16px;
}

.fsq .fsq__result-title,
.fsq .fsq__section-title,
.fsq .fsq__success-title {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--fsq-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	text-transform: none;
	scroll-margin-top: var(--fsq-scroll-offset);
}

.fsq .fsq__route {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--fsq-border);
	border-radius: 999px;
	background: var(--fsq-bg);
	color: var(--fsq-text-soft);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.fsq .fsq__stale {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--fsq-warn-border);
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-warn-soft);
}

.fsq .fsq__stale-text {
	flex: 1 1 220px;
	margin: 0;
	padding: 0;
	color: var(--fsq-warn-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

.fsq .fsq__stale .fsq__btn {
	flex: 0 0 auto;
}

.fsq .fsq__result-body {
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.fsq .fsq__result.is-stale .fsq__result-body {
	opacity: 0.4;
	filter: grayscale(0.7);
}

.fsq .fsq__notice {
	display: block;
	margin: 0 0 16px;
	padding: 14px 16px;
	border-left: 4px solid var(--fsq-accent);
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-bg);
	color: var(--fsq-text);
	font-size: 15px;
	line-height: 1.5;
}

.fsq .fsq__prices {
	margin: 0 0 16px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--fsq-border);
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-bg);
}

.fsq .fsq__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid var(--fsq-border);
}

.fsq .fsq__prices dt {
	margin: 0;
	padding: 0;
	color: var(--fsq-text-soft);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.fsq .fsq__prices dd {
	margin: 0 0 0 auto;
	padding: 0;
	color: var(--fsq-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.fsq .fsq__price-row--total {
	align-items: center;
	padding: 16px;
	border-bottom: 0;
	background: var(--fsq-accent);
}

.fsq .fsq__price-row--total dt {
	color: var(--fsq-accent-contrast);
	font-size: 16px;
	font-weight: 700;
}

.fsq .fsq__price-row--total dd {
	color: var(--fsq-accent-contrast);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.fsq .fsq__weights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
}

.fsq .fsq__weight {
	min-width: 0;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--fsq-border);
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-bg);
}

.fsq .fsq__weight dt {
	margin: 0;
	padding: 0;
	color: var(--fsq-text-soft);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.fsq .fsq__weight dd {
	margin: 2px 0 0;
	padding: 0;
	color: var(--fsq-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

.fsq .fsq__weight.is-basis {
	border-color: var(--fsq-accent-text);
	border-style: dashed;
}

.fsq .fsq__weight--charged,
.fsq .fsq__weight--charged.is-basis {
	border-color: var(--fsq-accent-text);
	border-style: solid;
	background: var(--fsq-accent-soft);
}

.fsq .fsq__weight--charged dt,
.fsq .fsq__weight--charged dd {
	color: var(--fsq-accent-text);
}

.fsq .fsq__facts {
	display: grid;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.fsq .fsq__facts li {
	position: relative;
	margin: 0;
	padding: 0 0 0 24px;
	color: var(--fsq-text-soft);
	font-size: 15px;
	line-height: 1.5;
	list-style: none;
}

.fsq .fsq__facts li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 6px;
	height: 11px;
	border: solid var(--fsq-accent-text);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.fsq .fsq__disclaimer {
	margin: 0;
	padding: 0;
	color: var(--fsq-muted);
	font-size: 13px;
	line-height: 1.5;
	white-space: pre-line;
}

/* --------------------------------------------------------------------------------------------------------------
 * Quote request form
 * ----------------------------------------------------------------------------------------------------------- */

.fsq .fsq__request {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--fsq-border);
	scroll-margin-top: var(--fsq-scroll-offset);
}

.fsq .fsq__section-intro {
	margin: 6px 0 18px;
	padding: 0;
	color: var(--fsq-muted);
	font-size: 15px;
	line-height: 1.5;
}

.fsq .fsq__request .fsq__row,
.fsq .fsq__request > .fsq__field {
	margin: 0 0 16px;
}

.fsq:not(#fsq-shield) .fsq__request > .fsq__btn {
	margin-top: 8px;
}

.fsq .fsq__fineprint {
	margin: 10px 0 0;
	padding: 0;
	color: var(--fsq-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

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

.fsq .fsq__success {
	padding: 8px 0 4px;
	text-align: center;
	scroll-margin-top: var(--fsq-scroll-offset);
}

.fsq .fsq__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: var(--fsq-success-soft);
	color: var(--fsq-success);
}

.fsq .fsq__success-icon .fsq__icon {
	width: 32px;
	height: 32px;
}

.fsq .fsq__success .fsq__success-title {
	margin: 0 0 16px;
	font-size: 22px;
}

.fsq .fsq__quote-number {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 16px;
	padding: 12px 24px;
	border: 1px dashed var(--fsq-accent);
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-accent-soft);
}

.fsq .fsq__quote-number-label {
	display: block;
	color: var(--fsq-text-soft);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.fsq .fsq__quote-number-value {
	display: block;
	color: var(--fsq-accent-text);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
	-webkit-user-select: all;
	user-select: all;
}

.fsq .fsq__success-message {
	max-width: 46ch;
	margin: 0 auto;
	padding: 0;
	color: var(--fsq-text-soft);
	font-size: 16px;
	line-height: 1.55;
	white-space: pre-line;
}

/* --------------------------------------------------------------------------------------------------------------
 * "Coming soon" box (no active areas yet)
 * ----------------------------------------------------------------------------------------------------------- */

.fsq .fsq__card--empty {
	padding: 32px 20px;
	text-align: center;
}

.fsq .fsq__card--empty .fsq__badge {
	margin: 0 0 12px;
}

.fsq .fsq__card--empty .fsq__title {
	margin: 0 0 8px;
}

.fsq .fsq__empty-text {
	margin: 0 0 4px;
	padding: 0;
	color: var(--fsq-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.fsq .fsq__empty-sub {
	margin: 0;
	padding: 0;
	color: var(--fsq-muted);
	font-size: 15px;
	line-height: 1.5;
}

.fsq .fsq__admin-hint {
	margin: 20px 0 0;
	padding: 12px 14px;
	border: 1px dashed var(--fsq-warn-border);
	border-radius: var(--fsq-radius-sm);
	background: var(--fsq-warn-soft);
	color: var(--fsq-warn-text);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.fsq .fsq__admin-hint a,
.fsq .fsq__admin-hint a:hover {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------------------------------------------
 * Motion
 * ----------------------------------------------------------------------------------------------------------- */

.fsq .is-entering {
	animation: fsq-enter 0.28s ease-out both;
}

@keyframes fsq-enter {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

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

/* --------------------------------------------------------------------------------------------------------------
 * Very small and larger screens
 * ----------------------------------------------------------------------------------------------------------- */

/* Below 360px the three weight tiles become rows so labels and values never overflow. */
@media (max-width: 359px) {
	.fsq .fsq__weights {
		grid-template-columns: minmax(0, 1fr);
	}

	.fsq .fsq__weight {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.fsq .fsq__weight dd {
		margin: 0;
		text-align: right;
	}
}

@media (min-width: 480px) {
	.fsq .fsq__card {
		padding: 28px 24px;
	}

	.fsq .fsq__row--3 {
		gap: 16px;
	}

	.fsq .fsq__result {
		padding: 24px;
	}

	.fsq .fsq__weights {
		gap: 10px;
	}
}

@media (min-width: 640px) {
	.fsq .fsq__card {
		padding: 32px;
	}

	.fsq .fsq__title {
		font-size: 26px;
	}

	.fsq .fsq__price-row--total dd {
		font-size: 34px;
	}

	.fsq .fsq__weight dt {
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------------------------------------------
 * Accessibility and print
 * ----------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fsq *,
	.fsq *::before,
	.fsq *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.fsq .fsq__card::before {
		background: CanvasText;
	}

	.fsq .fsq__price-row--total,
	.fsq .fsq__step,
	.fsq .fsq__badge {
		border: 1px solid CanvasText;
	}

	.fsq:not(#fsq-shield) .fsq__control:focus,
	.fsq:not(#fsq-shield) .fsq__btn:focus-visible {
		outline: 2px solid Highlight;
	}
}

@media print {
	.fsq .fsq__card {
		border-color: #999;
		box-shadow: none;
	}

	.fsq .fsq__calc .fsq__btn,
	.fsq .fsq__stale,
	.fsq .fsq__actions,
	.fsq .fsq__request {
		display: none !important;
	}
}
