/*
 * Thẻ "Đăng ký tư vấn" — RETI
 *
 * Đây là LỚP PHỦ lên `.nd-form` của nd-base, không phải bộ style thay thế. Mọi
 * quy tắc đều bọc trong `.reti-consult-form` nên biểu mẫu liên hệ mặc định của
 * theme không bị đụng tới.
 *
 * Màu lấy từ biến của theme chứ không gõ mã màu: khách đổi màu thương hiệu
 * trong Global Styles là thẻ đổi theo. Giá trị sau dấu phẩy chỉ là lưới an toàn.
 *
 * VỀ ĐỘ TƯƠNG PHẢN
 *
 * Chữ trắng trên cam #ef532d đạt 3,53:1 — đủ cho chữ LỚN (AA cần 3:1) nhưng
 * KHÔNG đủ cho chữ thường (cần 4,5:1). Nên trên nền cam chỉ có đúng một dòng
 * chữ: tiêu đề, cỡ lớn và đậm. Mọi chữ nhỏ — báo lỗi từng ô, thông báo kết quả
 * — đều được đặt trên nền riêng đủ tương phản chứ không thả thẳng lên cam.
 * Muốn cả nền cam cũng đạt 4,5:1 thì đổi `--reti-form-bg` sang #d23606.
 */

/*
 * Chọn bằng HAI lớp chứ không một.
 *
 * `.nd-form` của nd-base đặt `max-inline-size: 34rem`, và một selector một lớp
 * thì hoà specificity với nó — thắng thua tuỳ thứ tự nạp file, tức là tuỳ may.
 * `.reti-consult-form.nd-form` là hai lớp có thật trên chính thẻ <form> đó, đủ
 * thắng chắc chắn mà không phải dùng !important — thứ sẽ khoá luôn cả khả năng
 * chỉnh bề rộng sau này.
 */
.reti-consult-form.nd-form {
	--reti-form-bg: var( --wp--preset--color--brand, #ef532d);
	--reti-form-on-bg: var( --wp--preset--color--fg-on-brand, #ffffff);
	--reti-form-field-fg: var( --wp--preset--color--fg, #3f4140);
	--reti-form-submit-bg: var( --wp--preset--color--brand-warm, #f8bf4b);
	--reti-form-radius-field: var( --wp--custom--radius--pill, 62.4375rem);

	/*
	 * THẺ TỰ GIÃN ĐẦY VÙNG CHỨA — bề rộng do vùng chứa quyết định, không phải CSS này.
	 *
	 * `max-inline-size: none` là bắt buộc chứ không phải bỏ trống cho gọn: không
	 * ghi gì thì `.nd-form` của theme áp 34rem và thẻ vẫn hẹp, dù ở đây đã không
	 * còn dòng giới hạn nào. Phải nói thẳng "không giới hạn" mới gỡ được.
	 *
	 * Không còn `margin-inline: auto`: căn giữa là việc của vùng chứa. Muốn thẻ
	 * hẹp như bản thiết kế thì đặt nó vào một cột hẹp trong trình soạn thảo —
	 * biên tập viên kéo được, còn con số chốt trong file CSS thì không.
	 */
	max-inline-size: none;
	margin-block-start: 0;

	gap: var( --wp--preset--spacing--sm, 1rem);
	box-sizing: border-box;
	padding: var( --wp--preset--spacing--lg, 2rem) var( --wp--preset--spacing--md, 1.5rem);
	border-radius: var( --wp--custom--radius--xl, 1.25rem);
	background: var( --reti-form-bg);
}

.reti-consult-form .reti-consult-form__title {
	margin: 0 0 var( --wp--preset--spacing--2-xs, 0.5rem);
	color: var( --reti-form-on-bg);
	font-size: var( --wp--preset--font-size--h3, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

/*
 * Nhãn ẩn khỏi mắt nhưng KHÔNG ẩn khỏi trình đọc màn hình. `display: none` là
 * ẩn khỏi cả hai — lúc đó ô nhập không còn tên gọi nào ngoài chữ mờ, mà chữ mờ
 * thì biến mất ngay khi người dùng gõ ký tự đầu tiên.
 */
.reti-consult-form .nd-form__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset( 50%);
	border: 0;
}

/*
 * `box-sizing: border-box` KHÔNG thừa. Bộ reset của theme không chạm tới thẻ
 * <input>, nên mặc định của trình duyệt là `content-box`: bề rộng 100% được
 * tính TRƯỚC rồi mới cộng thêm 2,5rem padding hai bên, và ô nhập thò hẳn ra
 * ngoài mép thẻ cam. Ô <select> và <textarea> thì không lộ vì chúng ngắn hơn.
 */
.reti-consult-form .nd-form__input {
	box-sizing: border-box;
	inline-size: 100%;
	padding: 0.875rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var( --reti-form-radius-field);
	background-color: #ffffff;
	color: var( --reti-form-field-fg);
}

/* Viền hover màu cam của theme trùng luôn với nền — bỏ, giữ nguyên ô trắng. */
.reti-consult-form .nd-form__input:hover {
	border-color: transparent;
}

.reti-consult-form textarea.nd-form__input {
	border-radius: var( --wp--custom--radius--xl, 1.25rem);
	min-block-size: 6rem;
	resize: vertical;
}

/*
 * Mũi tên của ô chọn vẽ bằng SVG nội tuyến. Mũi tên mặc định của hệ điều hành
 * nằm sát mép phải và không bo theo viên thuốc, nhìn như bị dán đè lên.
 */
.reti-consult-form .nd-form__input--select {
	appearance: none;
	padding-inline-end: 2.75rem;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235f6362' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 1.15rem center;
	background-size: 1.1rem;
}

/*
 * Khi chưa chọn gì, ô chọn phải trông như chữ mờ của bốn ô kia. `:invalid` bắt
 * đúng trạng thái đó vì lựa chọn giữ chỗ có value rỗng trên một ô required —
 * không cần JavaScript, và tự hết mờ ngay khi người dùng chọn thật.
 */
.reti-consult-form .nd-form__input--select:invalid {
	color: var( --wp--preset--color--fg-muted, #5f6362);
}

.reti-consult-form .nd-form__input--select option {
	color: var( --reti-form-field-fg);
}

/*
 * Vòng lấy nét màu TRẮNG, không phải token `--focus` của nd-base. Token đó
 * chính là màu cam thương hiệu, mà nền ở đây cũng cam — vòng nét sẽ vô hình và
 * người dùng bàn phím mất dấu hoàn toàn.
 */
.reti-consult-form .nd-form__input:focus-visible,
.reti-consult-form .reti-consult-form__submit:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.reti-consult-form .nd-form__field--submit {
	margin-block-start: var( --wp--preset--spacing--2-xs, 0.5rem);
}

.reti-consult-form .reti-consult-form__submit {
	inline-size: 100%;
	padding: 0.9375rem 1.5rem;
	border: 0;
	border-radius: var( --reti-form-radius-field);
	background: var( --reti-form-submit-bg);
	color: var( --reti-form-field-fg);
	font-family: inherit;
	font-size: var( --wp--preset--font-size--body, 1rem);
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.reti-consult-form .reti-consult-form__submit:hover {
	filter: brightness( 0.94);
}

.reti-consult-form .reti-consult-form__submit[disabled] {
	cursor: not-allowed;
	opacity: 0.65;
}

/*
 * Báo lỗi từng ô — do forms.js chèn vào, theme không style. Chữ trắng trên nền
 * tối mờ chứ không phải chữ đỏ: token `--danger` #c8140b trên nền cam #ef532d
 * chỉ đạt 1,7:1, đúng thứ chữ mà người cần nó nhất lại không đọc được.
 */
.reti-consult-form .nd-form__error {
	display: block;
	margin-block-start: 0.375rem;
	padding: 0.25rem 0.875rem;
	border-radius: var( --wp--custom--radius--sm, 0.25rem);
	background: rgb( 0 0 0 / 0.32);
	color: #ffffff;
	font-size: var( --wp--preset--font-size--caption, 0.8125rem);
	line-height: 1.4;
}

.reti-consult-form .nd-form__input[aria-invalid="true"] {
	border-color: rgb( 0 0 0 / 0.4);
}

/* Thông báo kết quả: thẻ trắng, chữ tối — đọc được ở cả hai trạng thái. */
.reti-consult-form .nd-form__message {
	margin: 0;
	padding: 0.75rem 1rem;
	border-inline-start: 4px solid var( --wp--custom--color--danger, #c8140b);
	border-radius: var( --wp--custom--radius--md, 0.5rem);
	background: #ffffff;
	color: var( --reti-form-field-fg);
	font-size: var( --wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
}

.reti-consult-form .nd-form__message--ok {
	border-inline-start-color: var( --wp--custom--color--success, #138145);
}

.reti-consult-form .nd-form__captcha {
	margin: 0;
}