/* Fleet Quote Form — front-end */

.fqf {
	--fqf-dark: #0f2038;
	--fqf-gold: #c9a227;
	--fqf-accent: #2563eb;
	--fqf-accent-hover: #1d4ed8;
	--fqf-link: #2563eb;
	--fqf-link-hover: #1e40af;
	--fqf-dark-btn: #111827;
	--fqf-dark-btn-hover: #000000;
	--fqf-ink: #0b1220;
	--fqf-muted: #6b7280;
	--fqf-line: #e5e7eb;
	--fqf-bg: #ffffff;
	--fqf-soft: #f8fafc;
	--fqf-radius: 12px;
	--fqf-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	max-width: 980px;
	margin: 0 auto;
	background: var(--fqf-bg);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(15, 32, 56, 0.12);
	overflow: hidden;
	color: var(--fqf-ink);
	font-family: var(--fqf-font);
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
}

/* Force Poppins on every node inside the widget — themes style headings,
   buttons and inputs with selectors that would otherwise out-specify us. */
.fqf,
.fqf *,
.fqf *::before,
.fqf *::after {
	font-family: var(--fqf-font) !important;
}

.fqf *,
.fqf *::before,
.fqf *::after {
	box-sizing: inherit;
}

.fqf-hidden {
	display: none !important;
}

/* Neutralise theme button styling (backgrounds, pills, shadows, uppercase). */
.fqf button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
	color: inherit;
}

.fqf svg {
	vertical-align: middle;
	max-width: 100%;
}

.fqf .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fqf-hp {
	position: absolute !important;
	left: -9999px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Stepper header ---------- */

.fqf__header {
	position: relative;
	background: var(--fqf-dark);
	/* Tint layer, so the header reads as a surface whatever brand colour is set. */
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.16));
	padding: 20px 20px 18px;
}

.fqf__progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.14);
}

.fqf__progress-fill {
	display: block;
	width: 33.333%;
	height: 100%;
	background: var(--fqf-gold);
	transition: width 0.35s ease;
}

.fqf .fqf__count {
	margin: 0 0 12px;
	text-align: center;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.fqf .fqf-steps {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 560px;
}

.fqf-step {
	position: relative;
	flex: 1 1 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
}

.fqf-step + .fqf-step::before {
	content: "";
	position: absolute;
	top: 16px;
	right: 50%;
	left: -50%;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.18);
	transition: background 0.3s ease;
}

.fqf-step.is-done + .fqf-step::before,
.fqf-step.is-active::before {
	background: var(--fqf-gold);
}

.fqf-step__circle {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.fqf-step.is-active .fqf-step__circle {
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
}

.fqf .fqf-step__check {
	display: none;
	width: 16px;
	height: 16px;
}

.fqf-step.is-active .fqf-step__circle,
.fqf-step.is-done .fqf-step__circle {
	background: var(--fqf-gold);
	border-color: var(--fqf-gold);
	color: var(--fqf-dark);
}

.fqf .fqf-step.is-done .fqf-step__num {
	display: none;
}

.fqf .fqf-step.is-done .fqf-step__check {
	display: block;
}

.fqf-step__label {
	display: block;
	margin-top: 9px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fqf-step.is-active .fqf-step__label {
	color: var(--fqf-gold);
}

.fqf-step.is-done .fqf-step__label {
	color: #ffffff;
}

/* ---------- Panels ---------- */

.fqf__body {
	margin: 0;
}

.fqf-panel {
	display: none;
	padding: 30px 30px 28px;
}

.fqf-panel.is-active {
	display: block;
}

.fqf-panel:focus {
	outline: none;
}

.fqf-panel__intro {
	margin-bottom: 20px;
}

.fqf-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
}

.fqf .fqf-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--fqf-ink);
	line-height: 1.3;
}

.fqf .fqf-title--inline {
	margin: 0;
}

.fqf .fqf-lede {
	margin: 5px 0 0;
	font-size: 13px;
	color: var(--fqf-muted);
}

/* Section captions break step 1 into three scannable groups. */
.fqf .fqf-subhead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #94a3b8;
}

.fqf .fqf-subhead::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--fqf-line);
}

.fqf .fqf-lede--tight {
	margin-top: 3px;
	font-size: 12px;
}

.fqf-contact .fqf-lede {
	margin: 5px 0 20px;
	font-size: 12.5px;
}

.fqf .fqf-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--fqf-line);
	background: #ffffff;
	color: var(--fqf-ink);
	cursor: pointer;
	padding: 0;
	flex: none;
}

.fqf .fqf-back svg {
	width: 18px;
	height: 18px;
}

.fqf .fqf-back:hover,
.fqf .fqf-back:focus-visible {
	border-color: var(--fqf-link);
	color: var(--fqf-link);
	background: #ffffff;
	outline: none;
}

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

.fqf-grid {
	display: grid;
	gap: 14px;
}

.fqf-grid--2 {
	grid-template-columns: 1fr 1fr;
}

/* ---------- Fields ---------- */

.fqf-field {
	margin-bottom: 16px;
}

.fqf-field--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.fqf .fqf-label {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fqf-link);
	letter-spacing: 0.01em;
}

.fqf .fqf-input,
.fqf .fqf-textarea,
.fqf .fqf-select select {
	width: 100%;
	padding: 11px 13px;
	font-size: 14px;
	font-family: inherit;
	color: var(--fqf-ink);
	background: #ffffff;
	border: 1px solid var(--fqf-line);
	border-radius: 9px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.fqf .fqf-input::placeholder,
.fqf .fqf-textarea::placeholder {
	color: #9ca3af;
}

.fqf .fqf-input:focus,
.fqf .fqf-textarea:focus,
.fqf .fqf-select select:focus {
	border-color: var(--fqf-link);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Unselected placeholder option reads as placeholder text. */
.fqf .fqf-select select:invalid,
.fqf .fqf-select select option[value=""] {
	color: #9ca3af;
}

.fqf .fqf-select select option {
	color: var(--fqf-ink);
}

.fqf .fqf-input.has-error,
.fqf .fqf-textarea.has-error,
.fqf .fqf-select select.has-error,
.fqf-select.has-error select {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Live "number matches the selected country's format" state. The tick is
   drawn in the background so the state does not rest on colour alone. */
.fqf .fqf-input.is-valid {
	border-color: #16a34a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	padding-right: 36px;
}

.fqf .fqf-input.is-valid:focus {
	border-color: #16a34a;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

.fqf-textarea {
	resize: vertical;
	min-height: 72px;
}

.fqf-select {
	position: relative;
}

.fqf-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 8px;
	height: 8px;
	border-right: 1.6px solid #6b7280;
	border-bottom: 1.6px solid #6b7280;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.fqf .fqf-select select {
	padding-right: 34px;
	cursor: pointer;
}

.fqf-field-error {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #dc2626;
}

/* ---------- Route block (step 1) ---------- */

.fqf-route {
	border: 1px solid var(--fqf-line);
	border-radius: var(--fqf-radius);
	background: #ffffff;
	padding: 6px 16px;
	margin-bottom: 16px;
}

/* Two rows: caption on top, pin sitting on the same line as the address it
   marks. A grid keeps that alignment exact whatever the font metrics are. */
.fqf-route__field,
.fqf-route .fqf-stop {
	position: relative;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 12px;
	padding: 12px 0;
}

.fqf-route__field > .fqf-label,
.fqf-route .fqf-stop > .fqf-label {
	grid-column: 2;
	grid-row: 1;
}

.fqf-route__field > .fqf-input,
.fqf-route .fqf-stop > .fqf-input {
	grid-column: 2;
	grid-row: 2;
}

.fqf-route__field > .fqf-pin,
.fqf-route .fqf-stop > .fqf-pin {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
}

.fqf-route__field > .fqf-field-error,
.fqf-route .fqf-stop > .fqf-field-error {
	grid-column: 2;
	grid-row: 3;
}

.fqf-route .fqf-stop > .fqf-stop__remove {
	grid-column: 3;
	grid-row: 1 / span 2;
}

/* Rows are separated by dashes; the last row butts against the solid tools
   rule, so only the rows above it carry a divider. */
.fqf-route__field--start,
.fqf-route .fqf-stop {
	border-bottom: 1px dashed var(--fqf-line);
}

.fqf-route .fqf-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.fqf-route .fqf-label {
	margin-bottom: 0;
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #9ca3af;
}

.fqf-route .fqf-input {
	padding: 2px 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 14.5px;
	font-weight: 500;
	box-shadow: none;
}

.fqf-route .fqf-input:focus {
	border: 0;
	box-shadow: none;
}

/* The whole row highlights on focus, since the input has no border. */
.fqf-route__field:focus-within .fqf-label,
.fqf-route .fqf-stop:focus-within .fqf-label {
	color: var(--fqf-link);
}

.fqf-route__field:focus-within::after,
.fqf-route .fqf-stop:focus-within::after {
	content: "";
	position: absolute;
	inset: 4px -8px;
	border-radius: 8px;
	background: rgba(37, 99, 235, 0.05);
	pointer-events: none;
}

.fqf-route .fqf-input.has-error {
	box-shadow: none;
	border: 0;
}

.fqf-route .fqf-input.has-error::placeholder {
	color: #f87171;
}

.fqf-route__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 10px 0 9px;
	border-top: 1px solid var(--fqf-line);
}

/* ---------- Checkbox row ---------- */

.fqf .fqf-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 4px 0 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fqf-ink);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

/* The native box is kept focusable but visually replaced. */
.fqf .fqf-check input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.fqf .fqf-check__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #ffffff;
	color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fqf .fqf-check__box svg {
	width: 12px;
	height: 12px;
	display: block;
}

.fqf .fqf-check input[type="checkbox"]:checked + .fqf-check__box {
	background: var(--fqf-accent);
	border-color: var(--fqf-accent);
	color: #ffffff;
}

.fqf .fqf-check:hover .fqf-check__box,
.fqf .fqf-check input[type="checkbox"]:focus-visible + .fqf-check__box {
	border-color: var(--fqf-accent);
}

/* ---------- Return leg (step 1) ---------- */

.fqf-return {
	border: 1px solid var(--fqf-line);
	border-radius: var(--fqf-radius);
	background: var(--fqf-soft);
	padding: 16px 18px 6px;
	margin-bottom: 18px;
}

.fqf-return__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.fqf-return__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--fqf-ink);
}

.fqf-return__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 3px solid var(--fqf-gold);
	background: #ffffff;
}

.fqf-return .fqf-route {
	background: #ffffff;
	margin-bottom: 12px;
}

/* ---------- Link buttons / stops ---------- */

.fqf .fqf-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--fqf-link);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.fqf .fqf-link-btn--sm {
	font-size: 12px;
}

.fqf .fqf-link-btn--danger {
	color: #dc2626;
	font-size: 12px;
}

.fqf .fqf-link-btn--danger:hover,
.fqf .fqf-link-btn--danger:focus-visible {
	color: #b91c1c;
}

.fqf .fqf-link-btn:hover,
.fqf .fqf-link-btn:focus-visible {
	color: var(--fqf-link-hover);
	text-decoration: underline;
	background: none;
}

.fqf-plus {
	font-size: 15px;
	line-height: 1;
}

/* Standalone toggle (special request) sits between blocks. */
.fqf-panel > .fqf-link-btn {
	margin: 4px 0 18px;
}

.fqf .fqf-stop__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	align-self: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--fqf-line);
	border-radius: 50%;
	background: #ffffff;
	color: var(--fqf-muted);
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.fqf .fqf-stop__remove svg {
	width: 14px;
	height: 14px;
	display: block;
}

.fqf .fqf-stop__remove:hover,
.fqf .fqf-stop__remove:focus-visible {
	color: #dc2626;
	border-color: #fca5a5;
	background: #ffffff;
	outline: none;
}

/* ---------- Counters (step 1) ---------- */

.fqf-counters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 22px;
}

.fqf-counter-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--fqf-line);
	border-radius: 10px;
	background: var(--fqf-soft);
}

.fqf-counter-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: #374151;
	min-width: 0;
}

.fqf-counter-label svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: #94a3b8;
}

.fqf-counter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.fqf .fqf-counter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--fqf-line);
	border-radius: 50%;
	background: #ffffff;
	color: #4b5563;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.fqf .fqf-counter__btn:hover,
.fqf .fqf-counter__btn:focus-visible {
	background: #ffffff;
	border-color: var(--fqf-link);
	color: var(--fqf-link);
	outline: none;
}

.fqf .fqf-counter__btn[disabled] {
	opacity: 0.4;
	cursor: default;
	border-color: var(--fqf-line);
	color: #9ca3af;
	background: #ffffff;
}

.fqf .fqf-counter__input {
	width: 38px;
	height: 30px;
	padding: 0;
	text-align: center;
	border: 0;
	border-radius: 0;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	color: var(--fqf-ink);
	background: none;
	box-shadow: none;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
}

.fqf .fqf-counter__input:focus {
	outline: none;
	box-shadow: none;
}

.fqf-counter__input::-webkit-outer-spin-button,
.fqf-counter__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- Buttons ---------- */

.fqf .fqf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 22px;
	border: 0;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.fqf .fqf-btn:active {
	transform: translateY(1px);
}

.fqf .fqf-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.fqf .fqf-btn__arrow {
	width: 16px;
	height: 16px;
}

.fqf .fqf-btn--primary {
	background: var(--fqf-accent);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}

.fqf .fqf-btn--primary:hover,
.fqf .fqf-btn--primary:focus-visible {
	background: var(--fqf-accent-hover);
	color: #ffffff;
}

.fqf .fqf-btn--dark {
	background: var(--fqf-dark-btn);
	color: #ffffff;
	padding: 8px 20px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 7px;
}

.fqf .fqf-btn--dark:hover,
.fqf .fqf-btn--dark:focus-visible {
	background: var(--fqf-dark-btn-hover);
	color: #ffffff;
}

.fqf .fqf-btn--block {
	width: 100%;
	padding: 13px 20px;
}

.fqf-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--fqf-line);
}

.fqf-footer__msg {
	min-width: 0;
}

.fqf-powered {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #9ca3af;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fqf-powered__logo {
	max-height: 16px;
	width: auto;
}

/* ---------- Vehicles (step 2) ---------- */

.fqf-panel[data-panel="2"] {
	padding-left: 0;
	padding-right: 0;
}

.fqf-panel[data-panel="2"] .fqf-panel__head {
	padding: 0 28px 16px;
	border-bottom: 1px solid var(--fqf-line);
}

.fqf-vehicles {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fqf-vehicle {
	position: relative;
	display: grid;
	grid-template-columns: 130px 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 16px 28px;
	border-bottom: 1px solid var(--fqf-line);
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.fqf-vehicle:hover {
	background: var(--fqf-soft);
}

.fqf-vehicle:focus-visible {
	outline: none;
	background: var(--fqf-soft);
	box-shadow: inset 3px 0 0 var(--fqf-link);
}

.fqf-vehicle.is-selected {
	background: rgba(37, 99, 235, 0.05);
	box-shadow: inset 3px 0 0 var(--fqf-accent);
}

.fqf-vehicle__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	border-radius: 9px;
	background: var(--fqf-soft);
	overflow: hidden;
}

.fqf-vehicle__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fqf-vehicle__placeholder svg {
	width: 40px;
	height: 40px;
	color: #cbd5e1;
}

.fqf-vehicle__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #1e3a8a;
}

.fqf-vehicle__model {
	color: var(--fqf-link);
	font-weight: 500;
}

.fqf-vehicle__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 5px;
	font-size: 12px;
	color: var(--fqf-muted);
}

.fqf-vehicle__class {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #64748b;
	background: var(--fqf-soft);
	border: 1px solid var(--fqf-line);
	border-radius: 999px;
	padding: 2px 8px;
}

.fqf-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.fqf-meta-item svg {
	width: 14px;
	height: 14px;
	color: #94a3b8;
}

.fqf-vehicle__desc {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: var(--fqf-muted);
}

.fqf-vehicle__note {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: #b45309;
}

.fqf-vehicle__action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.fqf-vehicle__tick {
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--fqf-accent);
	color: #ffffff;
}

.fqf-vehicle__tick svg {
	width: 15px;
	height: 15px;
}

.fqf-vehicle.is-selected .fqf-vehicle__tick {
	display: inline-flex;
}

.fqf-empty {
	padding: 30px 28px;
	color: var(--fqf-muted);
	text-align: center;
}

/* ---------- Final quote (step 3) ---------- */

.fqf-quote {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 30px;
	align-items: start;
}

.fqf-quote__right {
	border-left: 1px solid var(--fqf-line);
	padding-left: 30px;
}

.fqf-card {
	border: 1px solid var(--fqf-line);
	border-radius: var(--fqf-radius);
	padding: 14px 16px;
	margin-bottom: 12px;
	background: #ffffff;
}

.fqf-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.fqf-card__label {
	margin: 0 0 2px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9ca3af;
	display: block;
}

.fqf-card__value {
	margin: 0;
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--fqf-ink);
}

.fqf .fqf-card__title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--fqf-ink);
}

.fqf-card--notes .fqf-card__title {
	display: block;
	margin-bottom: 8px;
}

.fqf-summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
}

.fqf-route-view {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--fqf-line);
}

.fqf-route__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 5px 0;
}

.fqf-pin svg {
	width: 18px;
	height: 18px;
}

.fqf-pin--start {
	color: #4338ca;
}

.fqf-pin--stop {
	color: #64748b;
}

.fqf-pin--end {
	color: #dc2626;
}

.fqf-route__addr {
	display: block;
	font-size: 14px;
	color: #334155;
	word-break: break-word;
}

.fqf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.fqf-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--fqf-soft);
	border: 1px solid var(--fqf-line);
	font-size: 11px;
	color: #475569;
}

.fqf-vehicle-summary {
	display: grid;
	grid-template-columns: 78px 1fr;
	align-items: center;
	gap: 14px;
}

.fqf-vehicle-summary__media {
	height: 52px;
	border-radius: 8px;
	background: #111827;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fqf-vehicle-summary__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fqf-vehicle-summary__name {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 600;
}

.fqf-vehicle-summary__meta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	color: var(--fqf-muted);
}

.fqf-vehicle-summary__class {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 9px;
	color: #9ca3af;
}

.fqf-features {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 7px;
}

.fqf-feature {
	font-size: 11px;
	color: #475569;
	background: var(--fqf-soft);
	border: 1px solid var(--fqf-line);
	border-radius: 6px;
	padding: 2px 8px;
}

/* ---------- Phone (intl-tel-input v29) ----------
   The library ships its own stylesheet; we only re-skin it to the widget
   tokens. Two things make this fiddly:

   1. The country selector is a bare <button> and the dropdown is a plain
      <ul>, both of which themes restyle aggressively — hence the forced
      layout properties below.
   2. Hello Elementor styles `input[type=search]` at the same specificity as
      the library's own `.iti__search-input`, and loads afterwards, so it
      wins the tie and wipes the padding that reserves room for the search
      icon. Every property it touches is therefore restated here.

   The dropdown is styled through .fqf-iti (set via containerClass in JS)
   rather than .fqf-phone: in fullscreen-popup mode the library reparents it
   to <body>, where descendant selectors on .fqf would no longer match. */

.fqf-phone,
.fqf-iti {
	/* Library-level tokens — cheaper and safer than fighting its rules. */
	--iti-border-color: var(--fqf-line);
	--iti-hover-color: var(--fqf-soft);
	--iti-icon-color: var(--fqf-muted);
	--iti-country-selector-bg: #ffffff;
	--iti-arrow-padding: 6px;
	--iti-spacer-horizontal: 10px;
}

.fqf-phone {
	display: block;
}

.fqf-phone .iti {
	display: block;
	width: 100%;
}

.fqf .fqf-phone .iti .fqf-input,
.fqf .fqf-phone .iti__tel-input {
	width: 100%;
	padding-left: 106px;
}

.fqf-phone .iti__country-container {
	padding: 1px;
}

/* One flex row: flag + caret + dial code. */
.fqf .fqf-phone button.iti__selected-country {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	height: 100%;
	padding: 0 10px 0 0;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--fqf-line);
	border-radius: 8px 0 0 8px;
	color: var(--fqf-ink);
	white-space: nowrap;
	cursor: pointer;
}

.fqf .fqf-phone .iti__selected-country-primary {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	height: 100%;
	padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
	background: transparent !important;
	border-radius: 8px 0 0 8px;
}

/* Carry the validity state across the divider so the control reads as one
   field. Degrades to the neutral divider where :has() is unsupported. */
.fqf-phone .iti:has(.fqf-input.is-valid) .iti__selected-country {
	border-right-color: #16a34a;
}

.fqf-phone .iti:has(.fqf-input.has-error) .iti__selected-country {
	border-right-color: #dc2626;
}

/* Hover the whole control, not just the flag half. */
.fqf .fqf-phone .iti__selected-country:hover,
.fqf .fqf-phone .iti__selected-country:focus-visible {
	background: var(--fqf-soft);
	outline: none;
}

.fqf .fqf-phone .iti__selected-country:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.fqf .fqf-phone .iti__selected-dial-code {
	margin-left: 2px;
	color: var(--fqf-ink);
	font-size: 13px;
	font-weight: 600;
}

/* ---- Dropdown ---- */

/* Width is set inline by the library (matchDropdownWidth), so it lines up
   with the field on its own — only the skin is ours.

   Height is a different story: the library also pins an inline pixel height,
   measured from a hidden clone it appends to <body> as
   `<div class="iti iti--inline-country-selector">`. That clone carries
   neither .fqf nor .fqf-iti, so it is measured with the library's own
   metrics and comes out shorter than the real dropdown — clipping the last
   row and the end of the scroll track. Author !important beats the inline
   style, so the box goes back to sizing from its content. */
.fqf-iti .iti__country-selector {
	height: auto !important;
	margin-top: 6px;
	background: #ffffff;
	border: 1px solid var(--fqf-line) !important;
	border-radius: 10px;
	box-shadow: 0 14px 32px rgba(15, 32, 56, 0.16) !important;
	overflow: hidden;
	color: var(--fqf-ink);
	font-family: var(--fqf-font);
	text-align: left;
}

.fqf-iti .iti__search-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--fqf-line);
}

/* The left padding is the library's own formula: it clears the search icon.
   Restated (not inherited) because the theme overrides shorthand padding. */
.fqf-iti input.fqf-iti__search,
.fqf-iti input.iti__search-input {
	width: 100%;
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size, 17px) + var(--iti-spacer-horizontal));
	padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size, 15px) + var(--iti-spacer-horizontal));
	background: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	font-size: 13px;
	line-height: 1.4;
	color: var(--fqf-ink);
	transition: none;
}

/* The clear button is a bare <button>; themes paint it like a CTA. */
.fqf-iti button.iti__search-clear {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 6px;
	box-shadow: none !important;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fqf-iti button.iti__search-clear:hover,
.fqf-iti button.iti__search-clear:focus-visible {
	background: var(--fqf-soft) !important;
	outline: none;
}

.fqf-iti .iti__search-clear-svg {
	display: block;
	width: 13px;
	height: 13px;
}

/* The X is a mask cut out of this circle — recolour the circle only, never
   the path, or the cut-out is lost. */
.fqf-iti .iti__search-clear-bg {
	fill: #94a3b8;
}

.fqf-iti button.iti__search-clear:hover .iti__search-clear-bg {
	fill: var(--fqf-ink);
}

/* Themes give <ul> a list marker and an indent; both would push the flag
   column out of the dropdown. */
.fqf-iti ul.iti__country-list {
	max-height: 232px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
	overflow-y: auto;

	/* Styling the scrollbar opts out of the OS overlay scrollbar, which
	   fades out mid-scroll and leaves no scroll affordance. */
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

/* Mobile fullscreen popup: the list is the flex child that should absorb the
   modal height, so the fixed cap has to go. */
.fqf-iti.iti--fullscreen-popup ul.iti__country-list {
	max-height: 100%;
	flex: 1 1 auto;
}

.fqf-iti ul.iti__country-list::-webkit-scrollbar {
	width: 10px;
}

.fqf-iti ul.iti__country-list::-webkit-scrollbar-track {
	background: transparent;
}

.fqf-iti ul.iti__country-list::-webkit-scrollbar-thumb {
	background-color: #cbd5e1;
	border: 3px solid #ffffff;
	border-radius: 999px;
}

.fqf-iti ul.iti__country-list::-webkit-scrollbar-thumb:hover {
	background-color: #94a3b8;
}

.fqf-iti .iti__country {
	margin: 0;
	padding: 8px var(--iti-spacer-horizontal);
	font-size: 13px;
	line-height: 1.4;
	color: var(--fqf-ink);
	list-style: none;
}

.fqf-iti .iti__country::marker,
.fqf-iti .iti__country::before {
	content: none;
}

.fqf-iti .iti__country.iti__highlight {
	background: var(--fqf-soft);
}

.fqf-iti .iti__country-name {
	color: var(--fqf-ink);
}

.fqf-iti .iti__dial-code {
	color: var(--fqf-muted);
}

.fqf-iti .iti__no-results {
	padding: 22px 10px;
	font-size: 13px;
	color: var(--fqf-muted);
}

.fqf-consent {
	margin: 14px 0 0;
	font-size: 10px;
	line-height: 1.6;
	color: #cbb26b;
}

.fqf-error {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: #dc2626;
}

.fqf-error:not(:empty) {
	margin: 8px 0 4px;
}

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

.fqf-success {
	text-align: center;
	padding: 52px 28px 58px;
}

.fqf-success__icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(22, 163, 74, 0.1);
	color: #16a34a;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fqf-success__icon svg {
	width: 30px;
	height: 30px;
}

.fqf-success__text {
	margin: 8px 0 0;
	color: var(--fqf-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
	.fqf-quote {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.fqf-quote__right {
		border-left: 0;
		border-top: 1px solid var(--fqf-line);
		padding-left: 0;
		padding-top: 20px;
	}
}

@media (max-width: 640px) {
	.fqf {
		border-radius: 12px;
	}

	.fqf-panel {
		padding: 20px 16px;
	}

	.fqf__header {
		padding: 16px 12px 14px;
	}

	.fqf-step__label {
		font-size: 9px;
		letter-spacing: 0.04em;
	}

	.fqf-grid--2,
	.fqf-field--split,
	.fqf-summary-grid {
		grid-template-columns: 1fr;
	}

	.fqf-counters {
		gap: 8px;
	}

	.fqf-counter-tile {
		grid-column: 1 / -1;
	}

	.fqf-route {
		padding: 2px 12px;
	}

	.fqf-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.fqf-footer .fqf-btn {
		width: 100%;
		order: -1;
	}

	.fqf-powered {
		justify-content: center;
	}

	.fqf-vehicle {
		grid-template-columns: 92px 1fr;
		gap: 12px;
		padding: 14px 16px;
	}

	.fqf-vehicle__media {
		height: 62px;
	}

	.fqf-vehicle__action {
		grid-column: 1 / -1;
		justify-content: space-between;
	}

	.fqf-vehicle__action .fqf-btn {
		flex: 1;
	}

	.fqf-panel[data-panel="2"] .fqf-panel__head {
		padding: 0 16px 14px;
	}

	.fqf-vehicle-summary {
		grid-template-columns: 62px 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fqf *,
	.fqf *::before,
	.fqf *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}