/* sections/../inc/quote-form-view.php */
.qf-card {
	box-sizing: border-box; display: flex; flex-direction: column;
	border-radius: var(--radius-lg); background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-lg);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.5;
	scroll-margin-top: var(--space-5);
}
.qf-card *, .qf-card *::before, .qf-card *::after { box-sizing: border-box; }
.qf-icon { flex: none; width: 1.25em; height: 1.25em; }
.qf-head {
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--c-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--c-bg-alt);
}
.qf-head-icon {
	display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
	border-radius: var(--radius-sm); background: var(--c-primary-soft); color: var(--c-primary);
}
.qf-card .qf-title { margin: 0; color: var(--c-heading); font: 700 var(--fs-lg)/1.3 var(--f-heading); }
.qf-sub { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); }
.qf-form { margin: 0; padding: var(--space-5); }
/*
	When the card is stretched to the height of the column beside it (service pages, contact),
	the step shown fills the extra height: its fields spread out and the button reaches the
	bottom, instead of leaving an empty band above the reassurance line (client's request, 2026-10-08).
*/
.qf-form { display: flex; flex: 1; flex-direction: column; }
.qf-step:not([hidden]) { display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
/* Cloudflare Turnstile widget (flexible width, 65px high), above the send button. */
.qf-card .qf-turnstile { min-height: 65px; }
.qf-card .cf-turnstile { max-width: 100%; overflow: hidden; border-radius: var(--radius-sm); }
.qf-card .qf-input::placeholder { color: var(--c-text-muted); opacity: 0.75; }
.qf-form:not(.qf-js) .qf-js-only, .qf-form.qf-done .qf-step, .qf-form.qf-done .qf-progress { display: none; }
.qf-progress-top { display: flex; justify-content: space-between; color: var(--c-text-muted); font-size: var(--fs-xs); }
.qf-bar { height: 0.375rem; margin: var(--space-2) 0 var(--space-5); overflow: hidden; border-radius: var(--radius-pill); background: var(--c-border); }
.qf-bar-fill { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--c-primary); transition: width 0.3s; }
.qf-card .qf-group { min-width: 0; margin: 0 0 var(--space-4); padding: 0; border: 0; }
.qf-card .qf-label {
	display: block; margin: 0 0 var(--space-2); padding: 0;
	color: var(--c-heading); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
}
.qf-hint { color: var(--c-text-muted); font-weight: 400; }

/* Buttons */
.qf-card .qf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	width: 100%; min-height: 3rem; padding: var(--space-3) var(--space-5);
	border: 1px solid transparent; border-radius: var(--radius-sm);
	background: var(--c-accent); color: var(--c-on-accent);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--c-accent) 36%, transparent);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-align: center; text-decoration: none;
	cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
}
.qf-card .qf-btn:hover, .qf-card .qf-btn:focus { background: var(--c-accent-hover); color: var(--c-on-accent); }
.qf-btn .qf-icon { transition: transform 0.2s; }
.qf-btn:hover .qf-icon { transform: translateX(4px); }
.qf-card .qf-btn--ghost { width: auto; border-color: var(--c-border); background: var(--c-surface); box-shadow: none; color: var(--c-text); }
.qf-card .qf-btn--ghost:hover, .qf-card .qf-btn--ghost:focus { border-color: var(--c-primary); background: var(--c-bg-alt); color: var(--c-text); }
.qf-btn--ghost:hover .qf-icon { transform: translateX(-4px); }
.qf-card .qf-btn[disabled] { opacity: 0.6; cursor: progress; }
.qf-card .qf-btn:focus-visible, .qf-card .qf-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Choice chips (urgency) */
.qf-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.qf-card .qf-chip, .qf-card .qf-opt { position: relative; display: block; margin: 0; }
.qf-check { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qf-chip-box {
	display: flex; align-items: center; justify-content: center;
	min-height: 2.75rem; padding: var(--space-2);
	border: 1px solid var(--c-border); border-radius: var(--radius-sm);
	font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; text-align: center;
	cursor: pointer; transition: border-color 0.2s, background-color 0.2s;
}
.qf-chip:hover .qf-chip-box { border-color: var(--c-primary); }
.qf-check:checked + .qf-chip-box {
	border-color: var(--c-primary); background: var(--c-primary-soft);
	color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary);
}
.qf-check:focus-visible + .qf-chip-box { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Pest dropdown (multi-select) */
.qf-select { position: relative; }
.qf-card .qf-select-btn {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
	width: 100%; min-height: 3rem; padding: var(--space-2) var(--space-3);
	border: 1px solid var(--c-border); border-radius: var(--radius-sm);
	background: var(--c-surface); color: var(--c-text-muted);
	font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s;
}
.qf-card .qf-select-btn:hover, .qf-card .qf-select-btn:focus, .qf-card .qf-select-btn[aria-expanded="true"] {
	border-color: var(--c-primary); background: var(--c-surface); color: var(--c-text-muted);
}
.qf-card .qf-select-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--c-primary) 25%, transparent); }
.qf-card .qf-select-btn[aria-invalid="true"] { border-color: var(--c-danger); }
.qf-select-btn .qf-icon { transition: transform 0.2s; }
.qf-select-btn[aria-expanded="true"] .qf-icon { transform: rotate(180deg); }
.qf-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.has-value .qf-select-value { color: var(--c-text); font-weight: 600; }
.qf-select-panel {
	display: grid; gap: var(--space-1); padding: var(--space-2);
	border: 1px solid var(--c-border); border-radius: var(--radius-sm);
	background: var(--c-surface); color: var(--c-text);
}
.qf-select-panel[hidden] { display: none; }
.qf-js .qf-select-panel {
	position: absolute; z-index: 5; top: calc(100% + var(--space-1)); right: 0; left: 0;
	max-height: 17rem; overflow-y: auto; box-shadow: var(--shadow-md);
}
.qf-opt-box {
	display: flex; align-items: center; gap: var(--space-2);
	min-height: 2.75rem; padding: var(--space-1) var(--space-2); border-radius: calc(var(--radius-sm) - 2px);
	font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
	cursor: pointer; transition: background-color 0.2s;
}
.qf-opt-icon {
	flex: none; width: 2rem; height: 2rem; padding: 0.25rem;
	border-radius: calc(var(--radius-sm) - 2px); background: var(--c-primary-soft); color: var(--c-primary);
}
.qf-opt-check {
	display: grid; place-items: center; flex: none; width: 1.125rem; height: 1.125rem; margin-left: auto;
	border: 1px solid var(--c-border); border-radius: 4px; color: transparent;
}
.qf-opt-check .qf-icon { width: 0.75rem; height: 0.75rem; stroke-width: 3.5; }
.qf-opt:hover .qf-opt-box { background: var(--c-bg-alt); }
.qf-check:checked + .qf-opt-box { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; }
.qf-check:checked + .qf-opt-box .qf-opt-icon { background: var(--c-surface); }
.qf-check:checked + .qf-opt-box .qf-opt-check { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
.qf-check:focus-visible + .qf-opt-box { outline: 2px solid var(--c-primary); outline-offset: -2px; }

/* Fields, messages, footer */
.qf-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--space-3); }
.qf-card .qf-input {
	display: block; width: 100%; min-height: 3rem; padding: var(--space-2) var(--space-3);
	border: 1px solid var(--c-border); border-radius: var(--radius-sm);
	background: var(--c-surface); color: var(--c-text); font: inherit;
	transition: border-color 0.2s;
}
.qf-card .qf-input:focus {
	border-color: var(--c-primary);
	outline: 2px solid color-mix(in srgb, var(--c-primary) 25%, transparent);
}
.qf-card .qf-input[aria-invalid="true"] { border-color: var(--c-danger); }
.qf-error { margin: var(--space-1) 0 0; color: var(--c-danger); font-size: var(--fs-xs); }
.qf-error:empty, .qf-status:empty { display: none; }
/*
	Step 2 buttons. Phone: one under the other, each as wide as the card (the main one on top),
	so the long label never pushes out of the card. From 480px: side by side, "Retour" on the left.
*/
.qf-actions { display: flex; flex-direction: column-reverse; gap: var(--space-3); }
.qf-card .qf-actions .qf-btn { width: 100%; min-width: 0; }
@media (min-width: 480px) {
	.qf-actions { flex-direction: row; }
	.qf-card .qf-actions .qf-btn { flex: 1; }
	.qf-card .qf-actions .qf-btn--ghost { flex: none; width: auto; }
}
.qf-status {
	margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600;
}
.qf-status--ok { background: color-mix(in srgb, var(--c-success) 12%, transparent); color: var(--c-success); }
.qf-status--err { background: var(--c-accent-soft); color: var(--c-danger); }
.qf-note { margin: var(--space-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-xs); text-align: center; }
.qf-card .qf-link { color: var(--c-primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.qf-card .qf-link:hover { text-decoration: underline; }
.qf-hp { position: absolute; left: -9999px; }
.qf-trust {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4);
	margin: auto 0 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--c-border);
	list-style: none; color: var(--c-text-muted); font-size: var(--fs-xs);
}
.qf-trust-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.qf-trust .qf-icon { color: var(--c-success); }

/*
	Dark variants: white text, fields kept solid white.
	- qf-card--glass: see-through navy with a blurred backdrop, for photo backgrounds;
	- qf-card--glass + qf-card--navy: on a light background, the flat reference navy
	  (computes to #061e48): no gradient, no sheen, sky-blue hairlines.
*/
.qf-card--glass {
	--qf-line: color-mix(in srgb, var(--c-on-dark) 26%, transparent);
	--qf-soft: color-mix(in srgb, var(--c-on-dark) 88%, transparent);
	border: 1px solid var(--qf-line);
	--qf-navy: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark)); /* the reference navy, computes to #061e48 */
	background-color: color-mix(in srgb, var(--qf-navy) 90%, transparent);
	background-image: linear-gradient(135deg, color-mix(in srgb, var(--c-on-dark) 16%, transparent), color-mix(in srgb, var(--c-on-dark) 3%, transparent));
	box-shadow: var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, var(--c-on-dark) 22%, transparent);
	color: var(--c-on-dark);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.qf-card--glass:not(.qf-card--navy) {
		background-color: color-mix(in srgb, var(--qf-navy) 30%, transparent); /* lower = more see-through */
		-webkit-backdrop-filter: blur(22px) saturate(150%);
		backdrop-filter: blur(22px) saturate(150%);
	}
}
.qf-card--glass .qf-head { border-color: var(--qf-line); background: color-mix(in srgb, var(--c-on-dark) 8%, transparent); }
/* See-through card over a bright photo: a soft navy shadow keeps the white texts readable. */
.qf-card--glass:not(.qf-card--navy) :is(.qf-title, .qf-sub, .qf-label, .qf-progress-top, .qf-hint, .qf-note, .qf-trust, .qf-chip-box) {
	text-shadow: 0 1px 8px color-mix(in srgb, var(--qf-navy) 70%, transparent);
}
.qf-card--navy {
	--qf-line: color-mix(in srgb, var(--c-primary-light) 32%, transparent);
	background-color: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark)); background-image: none;
	box-shadow: var(--shadow-lg);
}
.qf-card--navy .qf-head { background: none; }
.qf-card--glass .qf-head-icon { background: color-mix(in srgb, var(--c-on-dark) 16%, transparent); color: var(--c-on-dark); }
.qf-card--glass .qf-trust { border-color: var(--qf-line); }
.qf-card--glass .qf-title, .qf-card--glass .qf-label, .qf-card--glass .qf-link { color: var(--c-on-dark); }
.qf-card--glass .qf-sub, .qf-card--glass .qf-progress-top, .qf-card--glass .qf-hint,
.qf-card--glass .qf-note, .qf-card--glass .qf-trust { color: var(--qf-soft); }
.qf-card--glass .qf-trust .qf-icon { color: var(--c-primary-light); }
.qf-card--glass .qf-bar { background: color-mix(in srgb, var(--c-on-dark) 22%, transparent); }
.qf-card--glass .qf-bar-fill { background: var(--c-on-dark); }
.qf-card--glass .qf-chip-box {
	border-color: color-mix(in srgb, var(--c-on-dark) 55%, transparent);
	background: color-mix(in srgb, var(--c-on-dark) 14%, transparent); color: var(--c-on-dark);
}
.qf-card--glass .qf-chip:hover .qf-chip-box { border-color: var(--c-on-dark); }
.qf-card--glass .qf-check:checked + .qf-chip-box {
	border-color: var(--c-surface); background: var(--c-surface); color: var(--c-primary); box-shadow: none;
}
.qf-card--glass .qf-check:focus-visible + .qf-chip-box, .qf-card--glass .qf-btn:focus-visible,
.qf-card--glass .qf-link:focus-visible, .qf-card--glass .qf-input:focus,
.qf-card--glass .qf-select-btn:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 2px; }
.qf-card--glass .qf-error { color: color-mix(in srgb, var(--c-accent) 40%, var(--c-on-dark)); }
.qf-card--glass .qf-status--ok, .qf-card--glass .qf-status--err { background: var(--c-surface); }
.qf-card--glass .qf-btn--ghost { border-color: var(--qf-line); background: transparent; color: var(--c-on-dark); }
.qf-card--glass .qf-btn--ghost:hover, .qf-card--glass .qf-btn--ghost:focus {
	border-color: var(--c-on-dark); background: color-mix(in srgb, var(--c-on-dark) 12%, transparent); color: var(--c-on-dark);
}

@media (min-width: 480px) {
	.qf-select-panel { grid-template-columns: 1fr 1fr; }
	.qf-js .qf-select-panel { max-height: 23rem; }
}
@media (prefers-reduced-motion: reduce) {
	.qf-card * { transition: none !important; }
}