/* ---------- "Devis" multi-step forms (Contact Form 7 + cf7-multi-step) ---------- */

.wpcf7-form.cf7mls {
	max-width: 700px;
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--gainsboro);
	padding: 2rem;
	box-sizing: border-box;
}

.wpcf7-form.cf7mls * {
	box-sizing: border-box;
}

/* Progress bar (built by devis-multistep.js — this plugin's free tier has none) */

.cf7mls-progress {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--gainsboro);
}

.cf7mls-progress__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
}

.cf7mls-progress__step {
	font-size: var(--wp--preset--font-size--text-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--black);
}

.cf7mls-progress__title {
	font-size: var(--wp--preset--font-size--text-s);
	color: var(--wp--preset--color--near-black);
}

.cf7mls-progress__bar {
	height: 4px;
	background: var(--wp--preset--color--gainsboro);
	border-radius: 2px;
	overflow: hidden;
}

.cf7mls-progress__fill {
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--red);
	transition: width 0.25s ease;
}

/* Fields */

.wpcf7-form.cf7mls .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 0.75rem;
}

/* CF7 inserts a literal <br> between fields on top of our own spacing. */
.wpcf7-form.cf7mls br {
	display: none;
}

.wpcf7-form.cf7mls input[type="text"],
.wpcf7-form.cf7mls input[type="tel"],
.wpcf7-form.cf7mls input[type="email"],
.wpcf7-form.cf7mls select,
.wpcf7-form.cf7mls textarea,
.wpcf7-form.cf7mls input[type="file"] {
	width: 100%;
	border: 1px solid var(--wp--preset--color--gainsboro);
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--text-m);
	color: var(--wp--preset--color--near-black);
	background: var(--wp--preset--color--white);
	border-radius: 0;
}

.wpcf7-form.cf7mls input[type="checkbox"],
.wpcf7-form.cf7mls input[type="radio"] {
	accent-color: var(--wp--preset--color--red);
}

.wpcf7-form.cf7mls input:focus,
.wpcf7-form.cf7mls select:focus,
.wpcf7-form.cf7mls textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--red);
}

.wpcf7-form.cf7mls textarea {
	min-height: 8rem;
	resize: vertical;
}

.cf7mls-field-label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--near-black);
}

/* Custom file field (the native "Choose file" button/text follows the
   visitor's browser language, not the page — replaced with our own). */

.wpcf7-form.cf7mls input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.cf7mls-file-trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid var(--wp--preset--color--gainsboro);
	padding: 0.5rem;
}

.cf7mls-file-trigger__button {
	border: 1px solid var(--wp--preset--color--gainsboro);
	background: var(--wp--preset--color--whitesmoke);
	padding: 0.5rem 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--text-s);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	white-space: nowrap;
}

.cf7mls-file-trigger__name {
	font-size: var(--wp--preset--font-size--text-s);
	color: var(--wp--preset--color--near-black);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Plain checkboxes (site address / consent) */

.wpcf7-form.cf7mls .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--text-s);
	color: var(--wp--preset--color--near-black);
	cursor: pointer;
}

/* Card-style choice fields: "Vous êtes" and "Type de travaux" */

[data-name="type-demande"] .wpcf7-form-control,
[data-name="type-travaux"] .wpcf7-form-control {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

[data-name="type-demande"] .wpcf7-list-item,
[data-name="type-travaux"] .wpcf7-list-item {
	display: block;
}

[data-name="type-demande"] .wpcf7-list-item label,
[data-name="type-travaux"] .wpcf7-list-item label {
	display: block !important;
	position: relative;
	border: 1px solid var(--wp--preset--color--gainsboro);
	padding: 1rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--text-s);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--black);
	cursor: pointer;
}

[data-name="type-demande"] .wpcf7-list-item input,
[data-name="type-travaux"] .wpcf7-list-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

[data-name="type-demande"] .wpcf7-list-item:has(input:checked) label,
[data-name="type-travaux"] .wpcf7-list-item:has(input:checked) label {
	border-color: var(--wp--preset--color--red);
	background: color-mix(in srgb, var(--wp--preset--color--red) 8%, white);
}

/* Shared by the "type-demande" cards and any other field with a small
   helper line underneath (e.g. the chantier-identique checkbox). */
.cf7mls-card-description {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--near-black);
}

@media (max-width: 480px) {
	[data-name="type-demande"] .wpcf7-form-control,
	[data-name="type-travaux"] .wpcf7-form-control {
		grid-template-columns: 1fr;
	}
}

/* Conditional site-address fields (toggled by devis-multistep.js) */

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

/* Navigation buttons */

.wpcf7-form.cf7mls .cf7mls-btns {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--gainsboro);
}

.wpcf7-form.cf7mls .cf7mls_back,
.wpcf7-form.cf7mls .cf7mls_next,
.wpcf7-form.cf7mls input[type="submit"] {
	border: none;
	padding: 0.75rem 1.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--text-s);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	white-space: nowrap;
}

.wpcf7-form.cf7mls .cf7mls_back {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--near-black);
	border: 1px solid var(--wp--preset--color--gainsboro);
}

.wpcf7-form.cf7mls .cf7mls_next,
.wpcf7-form.cf7mls input[type="submit"] {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
}

.wpcf7-form.cf7mls input[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wpcf7-form.cf7mls .cf7mls_next img {
	display: none;
}

/* Recap table (built by devis-multistep.js) */

.cf7mls-recap {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

.cf7mls-recap th,
.cf7mls-recap td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--gainsboro);
	font-size: var(--wp--preset--font-size--text-s);
}

.cf7mls-recap th {
	width: 40%;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--near-black);
}