/* UniForm v2 — token-driven.
   Mọi màu/hình dạng đọc từ biến --uniform-*; giá trị mặc định khớp baseline 1.5.2.
   Production: token theo form được UNIFORM_Presets::inline_css() xuất vào
   <style> scope #uniform-{id} (không còn màu cứng — form hoà vào mọi theme).
   Class uniform--theme-dark chỉ dùng bởi preview Builder trong admin;
   production dark mode đi qua @media trong inline CSS.
   Flourish preset (uppercase luxury/brutalist...) vẫn là class vì là cấu trúc,
   không phải token. */
.uniform {
	--uniform-accent:#1f5eff;
	--uniform-accent-text:#fff;
	--uniform-text:#1f2328;
	--uniform-muted:#5c636a;
	--uniform-border:#d5d7db;
	--uniform-field-bg:#fff;
	--uniform-bg:transparent;
	--uniform-radius:8px;
	--uniform-gap:16px;
	--uniform-font:inherit;
	--uniform-font-size:inherit;
	--uniform-border-width:1px;
	--uniform-shadow:none;
	--uniform-shadow-btn:none;
	--uniform-danger:#dc2626;
	--uniform-req:#c62828;
	--uniform-ok-bg:#e8f7ee;
	--uniform-ok-border:#b7e4c7;
	--uniform-ok-text:#0b5e2b;
	--uniform-err-bg:#fdecec;
	--uniform-err-border:#f5c2c2;
	--uniform-err-text:#8a1c1c;

	color: var(--uniform-text);
	font-family: var(--uniform-font);
	font-size: var(--uniform-font-size);
	background: var(--uniform-bg);
	border-radius: min(var(--uniform-radius), 24px);
}

/* Dark mode chung — preview Builder dùng class này;
   các biến accent/accent_text phải được preset.dark nối đè để nút không
   "biến mất" trên nền tối (accent tối → accent sáng). */
.uniform--theme-dark {
	--uniform-text:#e5e7eb;
	--uniform-muted:#9ca3af;
	--uniform-border:#374151;
	--uniform-field-bg:#111827;
	--uniform-danger:#f87171;
	--uniform-req:#f87171;
	--uniform-ok-bg:#0f2a1e;
	--uniform-ok-border:#1d5137;
	--uniform-ok-text:#86efac;
	--uniform-err-bg:#2a1212;
	--uniform-err-border:#7f1d1d;
	--uniform-err-text:#fca5a5;
}

/* Card container — bật khi form có nền riêng (bg ≠ trong suốt). */
.uniform--card {
	padding: 26px 26px 22px;
	border: var(--uniform-border-width) solid var(--uniform-border);
}

/* Dark surface — «Chế độ màu: Luôn tối» → form tự thành thẻ tối độc lập.
   Không phụ thuộc wrapper của theme: hoạt động trên mọi site (kể cả light-only).
   Preset có dark bg riêng (vd luxury #171209) sẽ ghi đè fallback qua token. */
.uniform--surface {
	padding: 24px;
	background: var(--uniform-bg, #0B1220);
	border: var(--uniform-border-width,1px) solid var(--uniform-border);
	border-radius: min(var(--uniform-radius), 24px);
}

/* Flourish theo preset — chi tiết "cảm xúc" không token hoá được. */
.uniform--preset-luxury .uniform__label { text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; }
.uniform--preset-luxury .uniform__submit { text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; }
.uniform--preset-luxury .uniform__help { letter-spacing: .02em; }
.uniform--preset-brutalist .uniform__label { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.uniform--preset-playful .uniform__submit { font-weight: 700; }
.uniform--preset-corporate .uniform__label { font-size: .85rem; }

/* ---------------------------------------------------------------- Layout. */
.uniform__form {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--uniform-gap);
	margin: 0;
}

.uniform__field {
	grid-column: span 6;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uniform__field--full { grid-column: span 6; }
.uniform__field--half { grid-column: span 3; }
.uniform__field--third { grid-column: span 2; }

.uniform__label {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.uniform__req { color: var(--uniform-req); }

/* ---------------------------------------------------------------- Input. */
.uniform__input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	background: var(--uniform-field-bg);
	border: var(--uniform-border-width) solid var(--uniform-border);
	border-radius: var(--uniform-radius);
	box-shadow: var(--uniform-shadow);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.uniform__input:focus {
	outline: none;
	border-color: var(--uniform-accent);
	/* Focus ring pha từ accent — tự theo màu người dùng chọn, không còn rgba cứng. */
	box-shadow: var(--uniform-shadow), 0 0 0 3px color-mix(in srgb, var(--uniform-accent) 18%, transparent);
}

.uniform__input:user-invalid,
.uniform__input:not(select):not(textarea):invalid:not(:placeholder-shown) {
	border-color: var(--uniform-danger);
}
/* select/textarea không dùng :invalid pristine (luôn match) — chỉ đỏ sau khi
   người dùng tương tác qua :user-invalid; trình duyệt cũ không có :user-invalid
   thì mất trạng thái đỏ (chấp nhận, tránh đỏ oan). */
.uniform__input:user-invalid { border-color: var(--uniform-danger); }

/* Textarea không bao giờ pill — cap radius để không thành viên con nhộng. */
textarea.uniform__input {
	resize: vertical;
	min-height: 96px;
	border-radius: min(var(--uniform-radius), 16px);
}

select.uniform__input { cursor: pointer; }

.uniform__help {
	margin: 0;
	font-size: 0.8rem;
	color: var(--uniform-muted);
}

.uniform__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.uniform__choice,
.uniform__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.9rem;
	line-height: 1.45;
	cursor: pointer;
}

.uniform__choice input,
.uniform__consent input {
	margin-top: 3px;
	accent-color: var(--uniform-accent);
}

/* ---------------------------------------------------------------- Button. */
.uniform__actions {
	grid-column: span 6;
	margin-top: 4px;
}

.uniform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	font: inherit;
	font-weight: 600;
	color: var(--uniform-accent-text);
	background: var(--uniform-accent);
	border: var(--uniform-border-width) solid var(--uniform-accent);
	border-radius: var(--uniform-radius);
	box-shadow: var(--uniform-shadow-btn);
	cursor: pointer;
	transition: filter 0.15s, transform 0.05s, background 0.15s, color 0.15s;
}

.uniform__submit:hover { filter: brightness(1.08); }
.uniform__submit:active { transform: translateY(1px); }
.uniform__submit:focus-visible {
	outline: 2px solid var(--uniform-accent);
	outline-offset: 2px;
}

.uniform--btn-full .uniform__submit { width: 100%; }

.uniform--btn-outline .uniform__submit {
	background: transparent;
	color: var(--uniform-accent);
}
.uniform--btn-outline .uniform__submit:hover {
	background: color-mix(in srgb, var(--uniform-accent) 10%, transparent);
	filter: none;
}

.uniform--btn-ghost .uniform__submit {
	background: transparent;
	color: var(--uniform-accent);
	border-color: transparent;
	box-shadow: none;
}
.uniform--btn-ghost .uniform__submit:hover {
	background: color-mix(in srgb, var(--uniform-accent) 10%, transparent);
	filter: none;
}

/* ---------------------------------------------------------------- Notice. */
.uniform__notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: min(var(--uniform-radius), 10px);
	font-size: 0.92rem;
	line-height: 1.5;
	border: 1px solid transparent;
}

.uniform__notice--ok {
	color: var(--uniform-ok-text);
	background: var(--uniform-ok-bg);
	border-color: var(--uniform-ok-border);
}

.uniform__notice--err {
	color: var(--uniform-err-text);
	background: var(--uniform-err-bg);
	border-color: var(--uniform-err-border);
}

/* Honeypot: ẩn hẳn. */
.uniform__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 640px) {
	.uniform__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uniform__field,
	.uniform__field--full { grid-column: span 2; }
	.uniform__field--half,
	.uniform__field--third { grid-column: span 2; }
	.uniform__actions { grid-column: span 2; }
	.uniform__submit { width: 100%; }
}

/* Trạng thái AJAX */
.uniform__live {
	margin: 0 0 14px;
	padding: 11px 14px;
	border-radius: min(var(--uniform-radius), 10px);
	font-size: 0.88rem;
	line-height: 1.5;
	border: 1px solid transparent;
}
.uniform__live--ok {
	color: var(--uniform-ok-text);
	background: var(--uniform-ok-bg);
	border-color: var(--uniform-ok-border);
}
.uniform__live--err {
	color: var(--uniform-err-text);
	background: var(--uniform-err-bg);
	border-color: var(--uniform-err-border);
}
.uniform__input--invalid {
	border-color: var(--uniform-danger) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--uniform-danger) 12%, transparent) !important;
}
.uniform__submit[disabled] { opacity: 0.7; cursor: progress; }
.uniform__form[hidden], .uniform [hidden] { display: none !important; }

/* Turnstile: Cloudflare chèn khối rỗng ~73px khi chưa cần thử thách — chỉ hiện
   vùng widget khi thật sự có iframe (dấu hiệu thử thách tương tác). */
.uniform__turnstile { margin: 0; }
.uniform__turnstile:not(:has(iframe)) { display: none; }
.uniform__turnstile:has(iframe) { margin: 4px 0 14px; }