/**
 * Quote Contact Section ("Liên hệ báo giá", trang chủ). Toàn bộ giá trị --quote-* là
 * CSS custom property do tmnhanphat_render_quote_css_vars() sinh ra, gắn bằng
 * wp_add_inline_style() trong inc/enqueue.php (PROJECT_RULES.md mục 22) — file này
 * KHÔNG hardcode giá trị người dùng đổi được trong Customizer.
 *
 * Layout 50/50 Desktop (grid 1fr 1fr), Tablet/Mobile xếp dọc. Heading bên phải tái
 * sử dụng .review-home__heading (gạch đôi đỏ/xanh) — chỉ override màu span + căn lề.
 */

.quote-home {
	position: relative;
	margin-block: var(--quote-margin, 0);
	padding-block: 70px;
	background-color: var(--quote-bg, #ffffff);
	background-image: var(--quote-bg-image, none);
	background-size: cover;
	background-position: center;
}

.quote-home__container {
	max-width: var(--quote-container-width, var(--container-max-width));
}

/* 50/50 cân bằng tuyệt đối (1fr 1fr — không 6-4/7-5). */
.quote-home__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--quote-gap, 92px);
	align-items: center;
}

/* ==================== LEFT: FORM CARD ==================== */
/* Figma: r=31, GRADIENT xanh đậm dọc + shadow 0/20/44 #0F315E 16%, padding 48/64/34. */
.quote-form--card {
	border-radius: var(--quote-card-radius, 10px);
	background-color: var(--quote-card-bg, #07306F);
	background-image: linear-gradient(180deg, #062B69 0%, #07306F 42%, #0A4D96 100%);
	box-shadow: 0 20px 44px rgb(15 49 94 / 0.16);
	padding: calc(48 * var(--fig1px)) calc(64 * var(--fig1px)) calc(34 * var(--fig1px));
}

.quote-form__header {
	display: flex;
	align-items: center;
	gap: 22px;
	/* Figma: icon → title 22px. */
	margin-bottom: 20px;
}

/* Figma: icon tròn 80×80 trắng, viền 2px #E4EAF2, shadow 0/6/18. */
.quote-form__header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(80 * var(--fig1px));
	height: calc(80 * var(--fig1px));
	border-radius: 50%;
	background-color: rgb(255 255 255 / 0.97);
	border: 2px solid #E4EAF2;
	box-shadow: 0 6px 18px rgb(1 24 69 / 0.18);
	color: #046AB5;
}

.quote-form__title {
	position: relative;
	margin: 0;
	padding-bottom: 15px;
	/* Figma: title → underline 15px. */
	color: var(--quote-header-color, #ffffff);
	/* Figma: 37/700 — fluid theo container. */
	font-size: clamp(20px, calc(37 * var(--fig1px)), var(--quote-header-size, 37px));
	font-weight: 700;
	line-height: 1.17;
	/* Figma: lh 117%. */
}

/* Underline đỏ ngắn — Figma: 86×4 (gom token đỏ #E31F2B). */
.quote-form__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 86px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--quote-underline, #E31F2B);
}

.quote-form__fields {
	display: flex;
	flex-direction: column;
	gap: var(--quote-input-gap, 14px);
}

/* ==================== FIELD ==================== */
.quote-field {
	position: relative;
}

.quote-field__icon {
	position: absolute;
	left: 22px;
	/* Figma: icon cách mép trái field 22px. */
	top: calc(var(--quote-input-height, 67px) / 2);
	transform: translateY(-50%);
	display: inline-flex;
	color: #647085;
	/* Figma: nét icon #647085. */
	pointer-events: none;
}

/* Textarea: icon neo phía trên thay vì giữa. */
.quote-field__icon--top {
	top: 20px;
	transform: none;
}

.quote-field__input {
	width: 100%;
	height: var(--quote-input-height, 67px);
	/* Figma: text bắt đầu sau icon 27 + gap 18 = 67 từ mép trái. */
	padding: 0 22px 0 67px;
	border: 1px solid var(--quote-border, #D0D8E3);
	border-radius: var(--quote-input-radius, 10px);
	background-color: rgb(255 255 255 / 0.98);
	color: #1a1a1a;
	font-size: var(--quote-input-size, 17px);
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quote-field__input::placeholder {
	color: var(--quote-placeholder, #667180);
}

/* ==================== FLOATING LABEL (Taste review mục 4, owner duyệt) ==================== */
/* Bỏ placeholder-làm-label (Taste hard rule 4.6): <label> thật đứng ĐÚNG vị trí + màu
   của placeholder cũ nên form TRỐNG nhìn y hệt design; khi focus/có nội dung label thu
   nhỏ nổi lên mép trên field — người dùng rà lại form luôn biết ô nào là gì. Input giữ
   placeholder=" " (1 khoảng trắng) CHỈ để selector :placeholder-shown hoạt động. */
.quote-field__label {
	position: absolute;
	left: 67px;
	/* Thẳng hàng điểm bắt đầu text của input (icon 22 + 27 + gap 18). */
	top: calc(var(--quote-input-height, 67px) / 2);
	transform: translateY(-50%);
	color: var(--quote-placeholder, #667180);
	font-size: var(--quote-input-size, 17px);
	line-height: 1.2;
	pointer-events: none;
	transition: top 0.18s ease, transform 0.18s ease, font-size 0.18s ease, color 0.18s ease;
}

/* Trạng thái NỔI: focus hoặc đã có nội dung (select xử lý riêng bên dưới vì không có
   placeholder → :not(:placeholder-shown) luôn đúng với select, phải loại trừ). */
.quote-field__input:not(.quote-field__select):focus~.quote-field__label,
.quote-field__input:not(.quote-field__select):not(:placeholder-shown)~.quote-field__label {
	top: 7px;
	transform: none;
	font-size: 11px;
}

.quote-field__input:focus~.quote-field__label {
	color: var(--quote-focus, #046AB5);
}

/* Giá trị dồn xuống nhẹ nhường chỗ label nổi — chỉ khi label đang nổi, form trống
   không đổi 1px nào so với design. */
.quote-field__input:not(.quote-field__select):not(.quote-field__textarea):focus,
.quote-field__input:not(.quote-field__select):not(.quote-field__textarea):not(:placeholder-shown) {
	padding-top: 16px;
}

/* Textarea: label neo theo padding-top 20px của khung (icon cũng neo trên). */
.quote-field__label--textarea {
	top: 20px;
	transform: none;
}

.quote-field__textarea:focus,
.quote-field__textarea:not(:placeholder-shown) {
	padding-top: 28px;
}

/* Select: option đầu ("Chọn loại dịch vụ") đóng vai placeholder hiển thị nên label ẨN
   khi chưa chọn; focus hoặc đã chọn giá trị thật → label nổi lên mép trên. :has() —
   trình duyệt cũ không hỗ trợ chỉ mất hiệu ứng nổi (quay về hành vi cũ), không mất gì. */
.quote-field__label--select {
	opacity: 0;
}

.quote-field__select:focus~.quote-field__label--select,
.quote-field__select:has(option:checked:not([value=""]))~.quote-field__label--select {
	top: 7px;
	transform: none;
	font-size: 11px;
	opacity: 1;
}

.quote-field__select:has(option:checked:not([value=""])) {
	padding-top: 16px;
}

.quote-field__textarea {
	height: auto;
	min-height: calc(106 * var(--fig1px));
	/* Figma: khung textarea 142 tổng. */
	padding-top: 20px;
	resize: vertical;
	line-height: 1.6;
}

.quote-field__select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	/* Mũi tên select tự vẽ (SVG data-uri) — không phụ thuộc icon ngoài. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA3AF' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 36px;
}

/* Focus: viền + quầng màu Primary. */
.quote-field__input:focus {
	outline: none;
	border-color: var(--quote-focus, #046AB5);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--quote-focus, #046AB5) 18%, transparent);
}

/* Trạng thái lỗi (JS gắn .has-error lên .quote-field). */
.quote-field.has-error .quote-field__input {
	border-color: #E31F2B;
}

.quote-field__error {
	display: none;
	margin-top: 5px;
	color: #FCA5A5;
	font-size: 12px;
	line-height: 1.4;
}

.quote-field.has-error .quote-field__error {
	display: block;
}

/* ==================== SUBMIT ==================== */
/* Figma: nút 632×71 r11 — GRADIENT đỏ + VIỀN VÀNG 2px #F4B844 + shadow 0/8/17.
   #F4B844 là NGOẠI LỆ có ghi chú của token gold (#B8955A — xem news defaults):
   viền phát sáng trên nền navy cần độ chói cao hơn gold trầm — vai trò khác, giữ riêng.
   chữ 21/700 trắng, icon → chữ 16px. */
.quote-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	height: var(--quote-btn-height, 71px);
	margin-top: 15px;
	/* = Input Gap Figma. */
	border: 2px solid #F4B844;
	border-radius: var(--quote-btn-radius, 10px);
	background-color: var(--quote-btn-bg, #D11821);
	background-image: linear-gradient(180deg, #A5161D 0%, #D11821 48%, #F01822 100%);
	box-shadow: 0 8px 17px rgb(124 7 18 / 0.24);
	color: var(--quote-btn-text, #ffffff);
	font-size: clamp(16px, calc(21 * var(--fig1px)), 21px);
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.15s ease;
}

.quote-form__submit:hover,
.quote-form__submit:focus-visible {
	/* Nền là gradient (background-image) nên hover dùng filter thay vì đổi bg-color. */
	filter: brightness(1.1);
}

.quote-form__submit:active {
	transform: translateY(1px);
}

.quote-form__submit-icon {
	display: inline-flex;
}

/* ==================== VERIFY ==================== */
.quote-form__verify {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 20px 0 0;
	/* Figma: nút → dòng bảo mật 20px. */
	color: var(--quote-verify-color, #ffffff);
	font-size: var(--quote-verify-size, 15px);
}

.quote-form__verify-icon {
	display: inline-flex;
	color: #2ECC71;
}

.quote-form__verify-icon svg {
	width: 16px;
	height: 16px;
}

.quote-form__notice {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
}

.quote-form__notice.is-success {
	background-color: rgb(46 204 113 / 0.15);
	color: #A7F3D0;
}

/* ==================== RIGHT: COMPANY INFO ==================== */
.quote-info {
	max-width: var(--quote-right-max-width, 460px);
	margin-inline: var(--quote-right-margin-x, 0);
	text-align: var(--quote-right-align, left);
}

.quote-info__logo {
	margin-bottom: 24px;
	/* Figma: logo → heading 24px. */
}

.quote-info__logo-img {
	width: var(--quote-logo-width, 137px);
	height: auto;
}

/* Heading reuse .review-home__heading — override màu span + typography theo Figma:
   70/700 lh 105% ls -2.2px (-0.031em), fluid theo container. */
.quote-info__heading {
	margin: 0 0 20px;
	/* Chuẩn hoá: heading → nội dung 20px (trước 23px tới vạch đã bỏ). */
	/* Chuẩn hoá heading system: size 85·fig, weight 900, lh 1.21, ls -0.02em (= products). */
	font-size: clamp(30px, calc(85 * var(--fig1px)), 85px);
	font-weight: 900;
	line-height: 1.21;
	letter-spacing: -0.02em;
}

/* Cặp vạch ĐÃ BỎ — heading dùng TYPOGRAPHY làm điểm nhấn (chuẩn hoá Design System). */

.quote-info__heading-blue {
	color: var(--quote-heading-blue, #046AB5);
}

.quote-info__heading-red {
	color: var(--quote-heading-red, #E31F2B);
}

.quote-info__description {
	margin: 0 0 35px;
	/* Figma: desc → danh sách liên hệ 35px. */
	color: var(--quote-desc-color, #1D2430);
	font-size: var(--quote-desc-size, 17px);
	line-height: 1.75;
	/* Figma: lh 175%. */
}

.quote-info__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.quote-info__item {
	display: flex;
	align-items: center;
	gap: 28px;
	/* Figma: icon → chữ 28px. */
	padding: var(--quote-contact-gap, 17px) 0;
	border-bottom: 1px solid var(--quote-divider, #CFD6DF);
	text-align: left;
}

.quote-info__item:first-child {
	padding-top: 0;
}

.quote-info__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* Figma: icon tròn 69×69 trắng, viền 2px #DDE5EF, shadow 0/6/18, nét icon #0955AA. */
.quote-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 calc(69 * var(--fig1px));
	width: calc(69 * var(--fig1px));
	height: calc(69 * var(--fig1px));
	border-radius: 50%;
	background-color: var(--quote-icon-bg, #ffffff);
	border: 2px solid #DDE5EF;
	color: var(--quote-icon-color, #046AB5);
	box-shadow: 0 6px 18px rgb(1 24 69 / 0.18);
}

.quote-info__content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.quote-info__label {
	color: #046AB5;
	/* Đồng bộ màu xanh thương hiệu. */
	font-size: var(--quote-label-size, 19px);
	font-weight: 700;
}

.quote-info__value {
	color: var(--quote-value-color, #1C2430);
	font-size: var(--quote-value-size, 17px);
	line-height: 1.56;
	/* Figma: lh ~27px. */
	word-break: break-word;
}

a.quote-info__value {
	color: #1C2430;
	/* Figma: value #1C2430. */
	transition: color 0.2s ease;
}

a.quote-info__value:hover,
a.quote-info__value:focus-visible {
	color: var(--quote-heading-blue, #046AB5);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {

	/* Tablet: xếp dọc — Form trên, Company Info dưới. */
	.quote-home__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		align-items: stretch;
	}

	.quote-info {
		max-width: 100%;
		margin-inline: 0;
	}
}

@media (max-width: 599px) {
	.quote-home__grid {
		gap: 32px;
	}

	.quote-form--card {
		padding: 24px;
	}

	.quote-info__icon {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
	}
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {

	.quote-field__input,
	.quote-form__submit,
	a.quote-info__value {
		transition: none;
	}
}