/* ==========================================================================
   quote-calculator.css — front-end calculator (rendered via shortcode)

   The calculator sets its own font-size baseline below. This is deliberate:
   block themes (twentytwentyfive etc.) wrap content in fluid font sizes
   (clamp(1rem…1.125rem)) that would otherwise leak into any element without
   an explicit px value and make option text render larger than inputs.
   Every text element is sized from this baseline — do not rely on inherited
   theme sizes anywhere inside .qb-fe.
   ========================================================================== */

.qb-fe {
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 13.5px;   /* baseline for every control + label inside */
	font-weight: 400;
	line-height: 1.5;
	color: #0F172A;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 14px;
	padding: 24px;
	max-width: 760px;
	margin: 0 auto;
	box-sizing: border-box;
}
.qb-fe__loading { color: #64748B; }
.qb-fe__title  { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.qb-fe__sub    { color: #64748B; margin: 0 0 16px; }
.qb-fe__field  { margin-bottom: 14px; }
/* Only the field's TOP-LEVEL label (the field title) gets block styling.
   Option-row labels (.qb-fe__opt) and image-tile labels (.qb-fe__imgopt)
   must use their own flex / grid layouts and stay inline-friendly.
   !important on size/weight: block themes set fluid font sizes (16–18px) on
   ancestors and label{font-weight} resets; without it the field title drifts
   from the 13.5px controls below it. */
.qb-fe__field > label {
	display: block;
	font-weight: 600 !important;
	margin-bottom: 4px;
	font-size: 13.5px !important;
	line-height: 1.4;
	color: #0F172A;
}
.qb-fe__field input[type="text"],
.qb-fe__field input[type="email"],
.qb-fe__field input[type="number"],
.qb-fe__field input[type="tel"],
.qb-fe__field input[type="date"],
.qb-fe__field select {
	width: 100%;
	height: 38px;
	line-height: 1;
	box-sizing: border-box;
	font-family: inherit;
	padding: 0 10px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	background: #fff;
	color: #0F172A;
}
.qb-fe__field textarea {
	width: 100%;
	min-height: 38px;
	box-sizing: border-box;
	font-family: inherit;
	padding: 8px 10px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	background: #fff;
	color: #0F172A;
	resize: vertical;
}
.qb-fe__total {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	background: #0F172A;
	border: 1px solid #0F172A;
	border-radius: 12px;
	padding: 14px 16px;
	margin: 14px 0 8px;
}
.qb-fe__total span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #94A3B8;
	align-self: center;
}
.qb-fe__total strong {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.qb-fe__submit {
	background: var(--qb-primary, #2052CC); color: #fff; border: none; padding: 12px 18px; border-radius: 10px; cursor: pointer; font-weight: 500;
	font-family: inherit; font-size: 13.5px !important;
}
.qb-fe__back, .qb-fe__next {
	font-family: inherit; font-size: 13.5px !important;
}
.qb-fe__success { background: #DCFCE7; padding: 24px; border-radius: 10px; color: #16A34A; text-align: center; }
.qb-fe-error { color: #DC2626; padding: 16px; border: 1px solid #FEE2E2; border-radius: 10px; background: #FEF2F2; }

/* Inline validation banner shown above the nav when a step has empty
   required fields. */
.qb-fe__error-banner {
	background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
	padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 500;
}

/* Highlight invalid required fields and their inputs/options. */
.qb-fe__field--error > label { color: #B91C1C; }
.qb-fe__field--error input[type="text"],
.qb-fe__field--error input[type="email"],
.qb-fe__field--error input[type="number"],
.qb-fe__field--error input[type="tel"],
.qb-fe__field--error input[type="date"],
.qb-fe__field--error textarea,
.qb-fe__field--error select {
	border-color: #DC2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.qb-fe__field--error .qb-fe__opt,
.qb-fe__field--error .qb-fe__imgopt,
.qb-fe__field--error .qb-fe__file { border-color: #DC2626; }

/* Multi-step / progress / nav (rendered by calculator-renderer.js) */
.qb-fe__wrap { display: flex; flex-direction: column; gap: 16px; }
.qb-fe__progress { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.qb-fe__progress-bar {
	height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}
.qb-fe__progress-bar > span { display: block; height: 100%; background: var(--qb-primary, #2052CC); transition: width .25s ease; }
.qb-fe__progress small { color: #64748B; font-size: 12px; }
.qb-fe__nav { display: flex; justify-content: space-between; gap: 8px; }
.qb-fe__back, .qb-fe__next, .qb-fe__submit { padding: 10px 14px; border-radius: 10px; font-weight: 500; cursor: pointer; }
.qb-fe__back { background: #fff; color: #0F172A; border: 1px solid #E5E7EB; }
.qb-fe__next { background: var(--qb-primary, #2052CC); color: #fff; border: none; }

/* Help text under field labels */
.qb-fe__help, .qb-fe__hint { display: block; color: #64748B; font-size: 12px; margin-top: 4px; }
.qb-fe__req { color: #DC2626; margin-left: 4px; }

/* Radio / checkbox / multi options */
.qb-fe__opts { display: flex; flex-direction: column; gap: 6px; }
.qb-fe__opt {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 12px; border: 1px solid #E5E7EB; border-radius: 8px;
	font-size: 13.5px !important; font-weight: 400 !important;
	line-height: 1.5; font-family: inherit;
	margin-bottom: 0 !important; cursor: pointer;
	box-sizing: border-box; color: #0F172A;
}
.qb-fe__opt:has(input:checked) { border-color: var(--qb-primary, #2052CC); background: #F0F5FF; }
.qb-fe__opt input { width: auto !important; }
.qb-fe__opt-label {
	flex: 1;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.5;
}
.qb-fe__opt-price { color: #16A34A; font-weight: 600; font-size: 12.5px !important; }

/* Image-option grid */
.qb-fe__imggrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
}
.qb-fe__imgopt {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 10px; border: 1px solid #E5E7EB; border-radius: 8px; cursor: pointer;
	background: #fff; font-weight: 400 !important; margin-bottom: 0 !important;
	position: relative;
}
.qb-fe__imgopt:has(input:checked) {
	border-color: var(--qb-primary, #2052CC); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qb-primary, #2052CC) 15%, transparent);
}
.qb-fe__imgopt input {
	position: absolute; top: 8px; right: 8px;
	width: auto !important;
}
.qb-fe__imgopt img,
.qb-fe__imgopt-placeholder {
	width: 100%; height: 96px; border-radius: 8px;
	object-fit: cover; background: #F1F5F9;
	display: flex; align-items: center; justify-content: center;
	color: #94A3B8;
}
.qb-fe__imgopt-label { font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.4; text-align: center; }
.qb-fe__imgopt-price { color: #16A34A; font-weight: 600; font-size: 12.5px !important; font-style: normal; }

/* File upload */
.qb-fe__file {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 10px 6px 6px;
	border: 1px solid #E5E7EB; border-radius: 8px; cursor: pointer;
	font-weight: 400 !important; font-size: 13.5px !important; line-height: 1.5;
	margin-bottom: 0 !important; color: #0F172A;
}
.qb-fe__file input[type="file"] { display: none; }
.qb-fe__file-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px; border-radius: 8px;
	background: #EEF4FF; color: var(--qb-primary, #2052CC); font-weight: 600; font-size: 13.5px;
	flex: 0 0 auto;
}
.qb-fe__file-name { color: #64748B; font-size: 13.5px !important; }

/* Contact group (name + email side-by-side) */
.qb-fe__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qb-fe__contact input {
	width: 100%; min-width: 0; box-sizing: border-box;
	height: 38px;
	font-size: 13.5px !important;
}

/* Lead form */
.qb-fe__lead { display: flex; flex-direction: column; gap: 12px; }
.qb-fe__lead-title { margin: 0 0 4px; font-size: 14px !important; font-weight: 600 !important; }

/* Breakdown line items */
.qb-fe__breakdown {
	margin: 8px 0 0; padding: 0; list-style: none;
	display: flex; flex-direction: column; gap: 10px;
}
.qb-fe__breakdown > li { padding: 0; border: 0; display: block; }
.qb-fe__brk-line {
	display: flex; justify-content: space-between;
	padding: 6px 0;
	font-size: 13px;
}
.qb-fe__brk-line strong { font-weight: 600; color: #0F172A; }
.qb-fe__brk-group {
	padding: 0;
}
.qb-fe__brk-group + .qb-fe__brk-group {
	border-top: 1px dashed #E5E7EB;
	padding-top: 10px;
}
.qb-fe__brk-group-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #64748B;
	margin-bottom: 6px;
}
.qb-fe__brk-group-items {
	margin: 0; padding: 0; list-style: none;
	display: flex; flex-direction: column;
}
.qb-fe__brk-group-items li {
	display: flex; justify-content: space-between;
	padding: 5px 0; border-bottom: 1px dashed #E5E7EB;
	font-size: 13px;
}
.qb-fe__brk-group-items li:last-child { border-bottom: 0; }
.qb-fe__brk-group-items strong { font-weight: 600; color: #0F172A; }

@media (max-width: 600px) {
	.qb-fe__contact { grid-template-columns: 1fr; }
}

/* Dragable Bar (range slider) */
.qb-fe__range {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.qb-fe__range-val {
	font-size: 14px;
	font-weight: 700;
	color: var(--qb-primary, #2052CC);
	text-align: center;
}
.qb-fe__range input[type="range"] {
	width: 100%;
	accent-color: var(--qb-primary, #2052CC);
}
.qb-fe__range-lbls {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #94a3b8;
}

/* Result block (display-only total placeholder) */
.qb-fe__resultblock {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #E5E7EB;
	border-top: 2px solid var(--qb-primary, #2052CC);
	border-radius: 8px;
	background: #F8FAFC;
}
.qb-fe__resultblock-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748B; }
.qb-fe__resultblock-value { font-size: 20px; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; }

/* Toggle (iOS switch) */
.qb-fe__toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}
.qb-fe__toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}
.qb-fe__toggle-switch {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px;
	flex-shrink: 0;
}
.qb-fe__toggle-slider {
	display: block;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #CBD5E1;
	border-radius: 999px;
	transition: background .25s ease;
	cursor: pointer;
}
.qb-fe__toggle-slider::after {
	content: '';
	position: absolute;
	left: 3px; top: 3px;
	width: 22px; height: 22px;
	background: #fff;
	border-radius: 50%;
	transition: transform .25s ease;
	box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
.qb-fe__toggle input:checked + .qb-fe__toggle-switch .qb-fe__toggle-slider {
	background: var(--qb-primary, #2052CC);
}
.qb-fe__toggle input:checked + .qb-fe__toggle-switch .qb-fe__toggle-slider::after {
	transform: translateX(24px);
}
/* Honeypot: off-screen rather than display:none, since some bots skip
   hidden inputs. Real visitors never see or tab into it. */
.qb-fe__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}