/*
 * Contact form card (spec §4.19 "Form card") [M computed] [M js:1802190c]. White, radius 16, border gray-100, shadow-lg,
 * p 32 (40 from 1024). H2 24/32 bold mb 8; description 16/24 gray-500 mb 32. Form space-y 24; rows 1 → 2 columns at 768,
 * gap 24. Label 14/20 medium gray-700 mb 8. Fields px 16 py 12, radius 12, border gray-200, 16/24 (input 50, select 46,
 * textarea rows 5 = 146); focus border orange + 2px ring orange/0.5.
 * [D: anchor = the input (50 high) → the select drops its native look (Safari drew it shorter, with another border and
 * font; Sahand, 2026-09-29) and takes the input's box exactly: select 50, the site's chevron-down 20 at the inline end.]
 */
.contact-form {
	scroll-margin-top: calc(var(--header-h) + 1rem);
	padding: calc(var(--spacing) * 8);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-2xl);
	background-color: var(--color-white);
	box-shadow: var(--shadow-lg);
}
@media (min-width: 64rem) { .contact-form { padding: calc(var(--spacing) * 10); } }
.contact-form__title { margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-2xl); line-height: var(--text-2xl-lh); font-weight: var(--font-weight-bold); color: var(--color-brand-dark); }
.contact-form__description { margin-bottom: calc(var(--spacing) * 8); color: var(--color-gray-500); }

.contact-form__hidden { position: relative; height: 0; overflow: hidden; margin-bottom: calc(var(--spacing) * -6); }
.contact-form__form { display: flex; flex-direction: column; gap: calc(var(--spacing) * 6); }
.contact-form__row { display: grid; gap: calc(var(--spacing) * 6); }
@media (min-width: 48rem) { .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-form__label { display: block; margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--text-sm-lh); font-weight: var(--font-weight-medium); color: var(--color-gray-700); }
.contact-form__input {
	display: block;
	width: 100%;
	padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	background-color: var(--color-white);
	font-size: var(--text-base);
	line-height: var(--text-base-lh);
	transition: color var(--duration-button) var(--ease-default), background-color var(--duration-button) var(--ease-default), border-color var(--duration-button) var(--ease-default);
}
/* A refused submit scrolls the first invalid field (label + field + message, contact-form.js) to the top: clear of the fixed
   header, with air. [D: header height + 20 px air = 1.25rem] */
.contact-form__field { scroll-margin-top: calc(var(--header-h) + var(--spacing) * 5); }

/* The select: the input's box, no native look. Room at the inline end for the chevron; logical properties keep it RTL-safe. */
.contact-form__select-wrap { position: relative; }
.contact-form__select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: calc(var(--spacing) * 11);
	color: inherit;
	cursor: pointer;
}
.contact-form__select-icon {
	position: absolute;
	inset-inline-end: calc(var(--spacing) * 4);
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-gray-500);
	pointer-events: none; /* clicks reach the select underneath */
}
.contact-form__textarea { resize: none; }
.contact-form__input:focus,
.contact-form__input:focus-visible {
	border-color: var(--color-brand-orange);
	box-shadow: 0 0 0 2px var(--color-orange-50a);
	outline: none;
}
/* Error state (live code: border red-500 + 14/20 message). Message text in red-700 so it reaches 4.5:1 on white. */
.contact-form__input[aria-invalid="true"] { border-color: var(--color-red-500); }
.contact-form__error { margin-top: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-red-700); }

/* Privacy note (plan fix 9: replaces the terms checkbox): the checkbox label's 14/20 gray-600, link orange + hover underline */
.contact-form__privacy { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-gray-600); }
.contact-form__privacy a { color: var(--color-brand-orange); }
.contact-form__privacy a:hover { text-decoration: underline; }

/* Submit: primary lg, w-full, auto from 768 (live `w-full md:w-auto`) */
.contact-form__submit { width: 100%; }
@media (min-width: 48rem) { .contact-form__submit { width: auto; align-self: flex-start; } }

/*
 * Result boxes (plan fix 9) [D: anchor = the live notice box: p 16, radius 16, 1px border, 14/20 gray-700, gap 12, icon 20
 * mt 2, mb 24; the yellow/0.1 fill + yellow/0.3 border becomes green (success) or the red palette (error)].
 */
.contact-alert {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--spacing) * 3);
	margin-bottom: calc(var(--spacing) * 6);
	padding: calc(var(--spacing) * 4);
	border: 1px solid;
	border-radius: var(--radius-2xl);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	color: var(--color-gray-700);
	scroll-margin-top: calc(var(--header-h) + 1rem);
}
.contact-alert:focus { outline: none; }
.contact-alert:focus-visible { outline: 2px solid var(--color-brand-orange); outline-offset: 2px; }
.contact-alert__icon { flex-shrink: 0; margin-top: calc(var(--spacing) * 0.5); }
.contact-alert__title { font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); }
.contact-alert__text { margin-top: calc(var(--spacing) * 1); }
.contact-alert__text a { text-decoration: underline; text-underline-offset: 2px; }
.contact-alert--success { background-color: var(--color-green-05a); border-color: var(--color-green-20a); }
.contact-alert--success .contact-alert__icon { color: var(--color-bar-green); }
.contact-alert--error { background-color: var(--color-red-50); border-color: var(--color-red-200); }
.contact-alert--error .contact-alert__icon { color: var(--color-red-500); }