/*
 * CSM Immobilier: estimation page. Loaded on that page only, after main.css.
 *
 * 1. Page layout     3. Choices and number fields
 * 2. Form and steps  4. Request sent
 */

/* 1. Page layout
   -------------------------------------------------------------------------- */

/* A yellow band for the title; the form is a card that overlaps its lower edge. */

.csm-estimation {
	--csm-estimation-overlap: clamp(40px, 6vw, 72px);
}

.csm-estimation__band {
	padding: clamp(32px, 5vw, 64px) var(--csm-gutter) calc(var(--csm-estimation-overlap) + clamp(24px, 3vw, 40px));
	background: var(--csm-yellow);
}

.csm-estimation__head,
.csm-estimation__body {
	max-width: 760px;
	margin-inline: auto;
}

.csm-estimation__title {
	margin: 0 0 12px;
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.02;
}

.csm-estimation__lead {
	max-width: 620px;
	margin: 0;
	font-size: clamp(17px, 1.4vw, 19px);
	text-wrap: pretty;
}

.csm-estimation__lead > :last-child {
	margin-bottom: 0;
}

.csm-estimation__body {
	box-sizing: content-box;
	margin-top: calc(-1 * var(--csm-estimation-overlap));
	padding: 0 var(--csm-gutter) clamp(56px, 7vw, 112px);
}

/* 2. Form and steps
   -------------------------------------------------------------------------- */

.csm-wizard {
	gap: 24px;
	padding: clamp(20px, 4vw, 40px);
	border-radius: var(--csm-radius-card);
	background: var(--csm-white);
	box-shadow: 0 12px 32px rgba(26, 26, 24, 0.14);
	scroll-margin-top: 16px;
}

.csm-wizard__top {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.csm-wizard__count {
	margin: 0;
	color: var(--csm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.csm-wizard__progress {
	display: block;
	width: 100%;
	height: 6px;
	overflow: hidden;
	border: 0;
	border-radius: 3px;
	background: var(--csm-sand);
	appearance: none;
}

.csm-wizard__progress::-webkit-progress-bar {
	background: var(--csm-sand);
}

.csm-wizard__progress::-webkit-progress-value {
	border-radius: 3px;
	background: var(--csm-ink);
}

.csm-wizard__progress::-moz-progress-bar {
	border-radius: 3px;
	background: var(--csm-ink);
}

.csm-wizard__step {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Without JavaScript every step shows, one under the other. The rule is drawn by the
 * legend: a border on the fieldset itself would run behind it.
 */
.csm-wizard:not(.is-wizard) .csm-wizard__step + .csm-wizard__step > .csm-wizard__legend {
	padding-top: 24px;
	border-top: 1px solid var(--csm-line);
}

.csm-wizard__legend {
	width: 100%;
	margin: 0;
	padding: 0 0 20px;
	font-size: clamp(24px, 2.8vw, 32px);
	font-weight: 800;
	font-stretch: 85%;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.csm-wizard__legend:focus {
	outline: 0;
}

.csm-wizard__hint {
	margin: -12px 0 0;
	color: var(--csm-muted);
	font-size: 15px;
}

.csm-wizard__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 16px;
}

.csm-wizard__grid--narrow {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

/* All its fields are hidden for the selected property type: no empty gap left behind. */
.csm-wizard__grid:not(:has(> :not([hidden]))) {
	display: none;
}

/* 16px keeps iOS from zooming in when a field takes the focus. */
.csm-wizard .csm-form__field input,
.csm-wizard .csm-form__field textarea {
	background: var(--csm-white);
	font-size: 16px;
}

.csm-wizard .csm-form__field--short {
	max-width: 220px;
}

.csm-form__group {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.csm-form__group > legend {
	padding: 0 0 6px;
	color: var(--csm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.csm-wizard .csm-form__consent {
	font-size: 14px;
}

.csm-wizard .csm-form__consent input {
	width: 20px;
	height: 20px;
	margin: 0;
}

.csm-wizard__nav {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 8px;
}

.csm-wizard__nav .csm-btn {
	min-height: 52px;
	font-size: 16px;
}

.csm-wizard__nav .csm-btn--primary {
	min-width: min(100%, 220px);
	margin-left: auto;
}

.csm-wizard__nav .csm-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 767px) {
	.csm-wizard__nav .csm-btn--primary {
		flex: 1;
		min-width: 0;
	}
}

/* 3. Choices and number fields
   -------------------------------------------------------------------------- */

/* A radio button or checkbox drawn as a box to tap: the control itself is only hidden visually. */

.csm-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.csm-choice {
	position: relative;
	display: flex;
}

.csm-choice input {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
}

.csm-choice__box {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--csm-field);
	border-radius: var(--csm-radius);
	background: var(--csm-white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.csm-choice__box:hover {
	border-color: var(--csm-ink);
}

.csm-choice input:checked + .csm-choice__box {
	border-color: var(--csm-ink);
	background: var(--csm-select);
	box-shadow: inset 0 0 0 1px var(--csm-ink);
}

.csm-choice input:focus-visible + .csm-choice__box {
	outline: 2px solid var(--csm-ink);
	outline-offset: 2px;
}

.csm-choices--letters .csm-choice__box {
	min-width: 44px;
	padding-inline: 12px;
}

.csm-choices--tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 12px;
}

.csm-choices--tiles .csm-choice__box {
	flex-direction: column;
	gap: 10px;
	min-height: 116px;
	padding: 16px 10px;
	border-radius: var(--csm-radius-card);
}

.csm-choice__icon {
	flex: none;
}

.csm-stepper {
	display: flex;
	gap: 6px;
}

.csm-stepper input {
	min-width: 0;
	text-align: center;
	appearance: textfield;
}

.csm-stepper input::-webkit-inner-spin-button,
.csm-stepper input::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

.csm-stepper__btn {
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--csm-field);
	border-radius: var(--csm-radius);
	background: var(--csm-white);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.csm-stepper__btn:hover {
	border-color: var(--csm-ink);
}

/* The buttons need the script; the native arrows of the field do the job without it. */
html:not(.csm-js) .csm-stepper__btn {
	display: none;
}

html:not(.csm-js) .csm-stepper input {
	text-align: left;
	appearance: auto;
}

html:not(.csm-js) .csm-stepper input::-webkit-inner-spin-button,
html:not(.csm-js) .csm-stepper input::-webkit-outer-spin-button {
	appearance: auto;
}

/* 4. Request sent
   -------------------------------------------------------------------------- */

.csm-wizard--sent {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	padding-block: clamp(32px, 6vw, 64px);
	text-align: center;
}

.csm-wizard--sent .csm-wizard__legend {
	padding: 0;
}

.csm-wizard__check {
	color: var(--csm-ink);
}

.csm-wizard__check path {
	stroke: var(--csm-yellow);
}

.csm-wizard__sent-text {
	max-width: 440px;
	margin: 0;
	font-size: 18px;
	text-wrap: balance;
}

.csm-wizard__sent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 12px 0 0;
}

@media (prefers-reduced-motion: no-preference) {
	.csm-choice__box,
	.csm-stepper__btn {
		transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	}

	.csm-wizard__progress::-webkit-progress-value {
		transition: width 0.3s ease;
	}

	.csm-wizard.is-wizard .csm-wizard__step:not([hidden]) {
		animation: csm-wizard-step 0.25s ease both;
	}

	.csm-wizard__check {
		animation: csm-wizard-check 0.4s ease both;
	}
}

@keyframes csm-wizard-step {
	from {
		transform: translateY(8px);
		opacity: 0;
	}
}

@keyframes csm-wizard-check {
	from {
		transform: scale(0.6);
		opacity: 0;
	}
}