/* Block Form RFQ (Figma 404:87). Nền vải + phủ đỏ nằm ở .block-rfq__panel (form Contact: panel là khung bo góc). */

.block-rfq__panel {
	position: relative;
	padding-block: clamp(56px, 3.5vw, 67px);
	overflow: hidden;
	background: linear-gradient(90deg, var(--color-primary-darker), var(--color-primary));
	isolation: isolate;
}

.block-rfq__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
}

.block-rfq__bg {
	object-fit: cover;
}

/* Phủ đỏ 90% lên ảnh nền vải như Figma. */
.block-rfq__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(184, 58, 75, 0.9), rgba(229, 62, 81, 0.9));
}

.block-rfq__inner {
	display: grid;
	gap: clamp(32px, 4vw, 80px);
	max-width: 1490px;
}

@media (min-width: 1024px) {
	.block-rfq__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 586px);
		align-items: center;
	}
}

.block-rfq__intro {
	display: grid;
	gap: clamp(16px, 2vw, 38px);
	color: var(--color-text);
}

.block-rfq__title {
	max-width: 10ch;
	font-size: clamp(32px, 3.33vw, 64px);
	font-weight: 900;
	line-height: 1.22;
	text-transform: uppercase;
}

.block-rfq__text {
	max-width: 739px;
	font-size: clamp(18px, 1.67vw, 32px);
	line-height: 1.25;
}

/* Form ----------------------------------------------------------------- */

.rfq-form {
	display: grid;
	gap: 16px;
}

.rfq-form__hp {
	position: absolute;
	left: -9999px;
}

.rfq-form__field {
	position: relative;
	display: block;
}

.rfq-form__control {
	width: 100%;
	min-height: clamp(56px, 4.53vw, 87px);
	padding: 0 clamp(20px, 2.08vw, 40px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	caret-color: #fff;
	font-family: var(--font-display);
	font-size: max(16px, 1.25vw); /* ≥ 16px: iOS không tự phóng to trang khi chạm vào ô */
	transition: border-color 0.2s, background-color 0.2s;
}

.rfq-form__control::placeholder {
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	opacity: 1;
}

.rfq-form__control:focus {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.28);
	outline: none;
}

/* Ô đã sửa mà sai (bỏ trống, email sai): viền vàng. :user-invalid chỉ bật sau khi người dùng nhập/bấm gửi. */
.rfq-form__control:user-invalid,
.rfq-form__field--textarea:has(.rfq-form__control:user-invalid) {
	border-color: #ffd36b;
}

/* Trình duyệt tự điền (autofill) đổi nền ô sang trắng/xanh và chữ đen: giữ nền trong suốt, chữ trắng. */
.rfq-form__control:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 100px rgba(255, 255, 255, 0.2) inset;
	transition: background-color 9999s;
}

.rfq-form__field--select .rfq-form__control {
	padding-right: 64px;
	font-family: var(--font-body);
	appearance: none;
	cursor: pointer;
}

/* Chưa chọn (đang hiện dòng gợi ý): cùng kiểu với placeholder của các ô khác. */
.rfq-form__field--select .rfq-form__control:invalid:not(:user-invalid) {
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
}

.rfq-form__field--select option {
	color: var(--color-text);
	text-transform: none;
}

.rfq-form__chevron {
	position: absolute;
	top: 50%;
	right: clamp(20px, 1.67vw, 32px);
	width: 28px;
	height: 28px;
	color: #fff;
	transform: translateY(-50%);
	pointer-events: none;
}

.rfq-form__field--textarea {
	padding: clamp(16px, 1.25vw, 24px) clamp(20px, 2.08vw, 40px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.2);
}

.rfq-form__field--textarea:focus-within {
	border-color: #fff;
}

.rfq-form__label {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(15px, 1.25vw, 24px);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.rfq-form__field--textarea .rfq-form__control {
	/* Padding nhỏ cắt mất nét đầu dòng ("e.g." hiện thành "ə.g.", "p" thành "ρ"): padding 6px, margin âm cùng cỡ
	   để chữ vẫn thẳng hàng với nhãn phía trên. */
	width: calc(100% + 12px);
	min-height: 120px;
	margin: 4px -6px 0;
	padding: 0 6px;
	border: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	font-family: var(--font-body);
	font-size: 16px;
	resize: vertical;
}

.rfq-form__field--textarea .rfq-form__control::placeholder {
	text-transform: none;
}

.rfq-form__submit {
	width: 100%;
}

.rfq-form__status {
	padding: 14px 20px;
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--color-text);
	font-weight: 600;
}

.rfq-form__status--error {
	color: var(--color-primary-dark);
}

/* Form "Register for a visit" (Figma "Detail page → Dugarco creative" → Frame 2147231139: 1920 × 901;
   chữ ở trái cách mép 200, form rộng 700 cách mép phải 200, các ô cách 32, nút Submit 300 × 72 ở giữa) */

.block-rfq--visit .block-rfq__panel {
	padding-block: clamp(56px, 5.08vw, 97px);
}

.block-rfq--visit .block-rfq__inner {
	max-width: 1520px;
}

@media (min-width: 1024px) {
	.block-rfq--visit .block-rfq__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
	}
}

.block-rfq--visit .block-rfq__intro {
	gap: clamp(16px, 2.08vw, 40px);
}

.block-rfq--visit .block-rfq__title {
	max-width: none;
	line-height: 1;
}

.block-rfq--visit .block-rfq__text {
	font-weight: 500;
	text-transform: uppercase;
}

.block-rfq--visit .rfq-form {
	gap: clamp(16px, 1.67vw, 32px);
}

.block-rfq--visit .rfq-form__control {
	min-height: clamp(56px, 3.85vw, 74px);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
}

.block-rfq--visit .rfq-form__submit {
	justify-self: center;
	width: min(100%, 300px);
	min-height: clamp(56px, 3.75vw, 72px);
}

/* Form dự án trang Contact (Figma "Detail page → Contact" → Frame 2147231139: khung 1808 × 1050 bo 40, top 1013;
   ảnh trái ~780 × 707 bo 16, form 700, các ô cao 86 bo 16 cách 16, ô mô tả cao 189, nút Submit 300 × 72 ở giữa) */

.block-rfq--contact {
	position: relative;
	z-index: 1; /* nằm trên dải ruy băng trang trí của hero */
	padding-inline: var(--gutter);
}

.block-rfq--contact .block-rfq__panel {
	border-radius: clamp(24px, 2.08vw, 40px);
	padding-block: clamp(32px, 8.85vw, 170px);
}

.block-rfq--contact .block-rfq__inner {
	width: 100%;
	max-width: none;
	padding-inline: clamp(16px, 2.6vw, 50px) clamp(16px, 2.6vw, 50px);
}

@media (min-width: 1024px) {
	.block-rfq--contact .block-rfq__inner {
		grid-template-columns: minmax(0, 780fr) minmax(0, 700fr);
		gap: clamp(32px, 6.35vw, 122px);
		align-items: stretch;
		padding-left: 8.85%; /* 160 / 1808 */
	}
}

.block-rfq__photo {
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 780 / 707;
}

.block-rfq__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Desktop: ảnh cao bằng form. Ảnh nằm tuyệt đối trong khung để kích thước gốc của ảnh không kéo cao hàng lưới
   (lỗi cũ: form bị giãn theo ảnh – các ô cách nhau rất xa, nút Submit cao bất thường, mũi tên ô select lệch xuống đáy). */
@media (min-width: 1024px) {
	.block-rfq__photo {
		position: relative;
		aspect-ratio: auto;
	}

	.block-rfq__photo picture,
	.block-rfq__photo img {
		position: absolute;
		inset: 0;
	}
}

.block-rfq--contact .rfq-form {
	gap: 16px;
	align-content: center;
}

.block-rfq--contact .rfq-form__control {
	min-height: clamp(56px, 4.48vw, 86px);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: max(16px, 1.25vw);
}

/* Chữ gợi ý dài ("Phone number (with country code)") nhỏ lại cho vừa ô trên điện thoại; chữ nhập vẫn 16px. */
.block-rfq--contact .rfq-form__control::placeholder {
	font-size: clamp(13px, 1.25vw, 24px);
}

.block-rfq--contact .rfq-form__field--textarea {
	border-radius: var(--radius-md);
}

.block-rfq--contact .rfq-form__label {
	font-family: var(--font-body);
}

.block-rfq--contact .rfq-form__field--textarea .rfq-form__control {
	height: clamp(80px, 5.57vw, 107px); /* ô mô tả cao 189 như Figma (rows="4" mặc định cao hơn) */
	min-height: 0;
	font-size: max(16px, 1.25vw);
}

.block-rfq--contact .rfq-form__field--textarea .rfq-form__control::placeholder {
	font-size: clamp(15px, 1.25vw, 24px);
}

.block-rfq--contact .rfq-form__field--select .rfq-form__control {
	text-transform: uppercase;
}

/* Nút Submit rộng bằng các ô nhập phía trên (feedback vòng 4; Figma để 300 ở giữa). */
.block-rfq--contact .rfq-form__submit {
	justify-self: stretch;
	width: 100%;
	min-height: clamp(56px, 3.75vw, 72px);
	margin-top: 4px;
}