/* HN Lead Forms
 * - Phần chung: áp dụng cho mọi form (kể cả form giữ CSS cũ của theme).
 * - .hnlf-modern: giao diện dựng sẵn, đổi màu qua shortcode accent="#hex" title_color="#hex".
 */

/* ---------- Chung ---------- */
.hnlf-form { position: relative; }
.hnlf-form ul { list-style: none; margin: 0; padding: 0; }
.hnlf-form li { margin-left: 0; }
.hnlf-form .hnlf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Ô reCAPTCHA + trạng thái đang tải */
.hnlf-form .hnlf-captcha { position: relative; min-height: 78px; }
.hnlf-form .hnlf-captcha-slot { position: relative; z-index: 1; }
.hnlf-form .hnlf-captcha-wait.is-idle { color: #8a94a6; font-size: 12.5px; }
.hnlf-form .hnlf-captcha-wait { position: absolute; inset: 0 auto auto 0; z-index: 0; display: flex; align-items: center; gap: 10px; width: 302px; max-width: 100%; height: 76px; padding: 0 14px; box-sizing: border-box; font-size: 13px; color: #5b6576; background: #f9f9f9; border: 1px solid #d3d3d3; border-radius: 3px; }

/* Spinner dùng chung */
.hnlf-spin { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hnlf-spin .7s linear infinite; vertical-align: -3px; }
@keyframes hnlf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hnlf-spin { animation-duration: 1.6s; } }

/* Nút gửi khi đang gửi */
.hnlf-form .hnlf-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hnlf-form .hnlf-submit[disabled] { cursor: wait; opacity: .85; }
.hnlf-form.is-loading input,
.hnlf-form.is-loading textarea { opacity: .6; pointer-events: none; }

/* Thông báo */
.hnlf-form .hnlf-status { display: flex; align-items: flex-start; gap: 8px; margin: .7em 0 0; padding: .6em .85em; border-radius: 6px; font-size: .92rem; line-height: 1.45; list-style: none; text-align: left; }
.hnlf-form .hnlf-status[hidden] { display: none; }
.hnlf-form .hnlf-status.is-info { background: #eef6ff; color: #1d4f91; border: 1px solid #c7defa; }
.hnlf-form .hnlf-status.is-success { background: #e7f6ec; color: #1e7e34; border: 1px solid #b7e1c3; }
.hnlf-form .hnlf-status.is-error { background: #fdecea; color: #b32d2e; border: 1px solid #f5c2c0; }
.hnlf-form .hnlf-note { margin: 12px 0 0; font-size: 14px; text-align: center; color: #5b6576; }
.hnlf-form .hnlf-note a { font-weight: 700; white-space: nowrap; }

/* Popup Flatsome chứa form modern: để thẻ form tự làm "card" */
.lightbox-content:has(.hnlf-modern) { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
@media (max-width: 480px) {
	.lightbox-content:has(.hnlf-modern) { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 0 auto !important; }
}

/* ---------- Giao diện modern ---------- */
.hnlf-modern {
	--hnlf-accent: #fc4366;
	--hnlf-title: #1f2a3c;
	--hnlf-card: #fff;
	--hnlf-text: #1f2a3c;
	--hnlf-muted: #5b6576;
	--hnlf-border: #d6dbe4;
	--hnlf-field: #f7f9fc;
	width: 100%; max-width: none; margin: 0; padding: 0;
}
.hnlf-modern.hnlf-inline { max-width: 560px; margin: 0 auto; }
.hnlf-modern .hnlf-form { margin: 0; padding: 28px 28px 24px; color: var(--hnlf-text); text-align: left; background: var(--hnlf-card); border-radius: 14px; box-shadow: 0 18px 40px rgba(16, 24, 40, .14); }
.hnlf-modern .hnlf-title { margin: 0 0 6px; padding: 0; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: 0; text-transform: none; text-align: center; color: var(--hnlf-title); }
.hnlf-modern .hnlf-subtitle { margin: 0 0 20px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--hnlf-muted); }
.hnlf-modern .hnlf-form li { margin: 0 0 14px; padding: 0; list-style: none; }
.hnlf-modern .hnlf-form li.hnlf-status { margin: 0 0 4px; }
.hnlf-modern .hnlf-form label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--hnlf-text); }
.hnlf-modern .hnlf-form label span { font: inherit; color: inherit; text-transform: none; line-height: inherit; }
.hnlf-modern .hnlf-form .required-star { margin-left: 2px; color: #e5484d; }
.hnlf-modern .hnlf-form input:not([type=checkbox]):not([type=radio]),
.hnlf-modern .hnlf-form textarea {
	display: block; width: 100%; height: 46px; margin: 0; padding: 10px 14px; box-sizing: border-box;
	font-size: 16px; line-height: 1.4; color: var(--hnlf-text);
	background: var(--hnlf-field); border: 1px solid var(--hnlf-border); border-radius: 8px; box-shadow: none;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.hnlf-modern .hnlf-form textarea { height: 96px; min-height: 96px; resize: vertical; }
.hnlf-modern .hnlf-form input:focus,
.hnlf-modern .hnlf-form textarea:focus { outline: 0; background: #fff; border-color: var(--hnlf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hnlf-accent) 18%, transparent); }
.hnlf-modern .hnlf-form input:user-invalid,
.hnlf-modern .hnlf-form textarea:user-invalid { border-color: #e5484d; }
.hnlf-modern .hnlf-form .hnlf-submit {
	width: 100%; height: 50px; margin: 2px 0 0; padding: 0 16px;
	font-size: 16px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #fff;
	background: var(--hnlf-accent); border: 0; border-radius: 8px; cursor: pointer;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--hnlf-accent) 30%, transparent);
	transition: filter .15s, transform .15s;
}
.hnlf-modern .hnlf-form .hnlf-submit:hover:not([disabled]) { filter: brightness(.93); transform: translateY(-1px); }
.hnlf-modern .hnlf-form .hnlf-note a { color: var(--hnlf-accent); }
@media (max-width: 420px) {
	.hnlf-modern .hnlf-form { padding: 22px 18px 20px; }
	.hnlf-modern .hnlf-title { font-size: 20px; }
	.hnlf-modern .hnlf-captcha { transform: scale(.92); transform-origin: 0 0; }
}