/*
 * Giao diện overlay — cố tình dùng ĐÚNG biến màu/font của theme
 * "Ở Nhà Cùng Trọng" (--wp--preset--color--*, --wp--preset--font-family--*)
 * kèm giá trị dự phòng (fallback) ngay sau dấu phẩy, để nếu sau này đổi
 * theme khác (không có các biến này) overlay vẫn hiển thị ổn, không vỡ
 * giao diện — không phụ thuộc cứng vào theme đang cài.
 */
/* Lỗi tự phát hiện lúc kiểm thử: các rule bên dưới đặt `display: flex`/
   `display: block` trực tiếp trên .tdf-form/.tdf-reveal-image — cùng độ
   đặc trưng CSS (1 lớp) với `[hidden] { display: none }` mặc định của
   trình duyệt, và vì stylesheet này tải SAU stylesheet mặc định nên nó
   thắng, khiến gán `element.hidden = true` bằng JS KHÔNG thật sự ẩn được
   phần tử (input/nút trả lời vẫn hiện đè lên khối "đã trả lời đúng").
   Ép `!important` cho đúng 1 rule gốc này để `hidden` luôn thắng, bất kể
   phần tử đó có rule display nào khác trong file. */
.tdf-overlay [hidden] {
	display: none !important;
}

.tdf-overlay {
	/* Lặp lại position/inset/z-index đã in sẵn ở CSS tối thiểu inline
	   (class-frontend.php) — phòng trường hợp 1 plugin tối ưu tốc độ nào
	   đó trên site tự ý gỡ/dời thẻ <style> inline (1 số plugin "gộp CSS"
	   làm vậy), overlay vẫn phủ kín đúng vị trí nhờ file này. */
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(28, 38, 32, 0.92);
	font-family: var(--wp--preset--font-family--be-vietnam-pro, -apple-system, sans-serif);
	animation: tdf-fade-in 0.25s ease-out;
}

@keyframes tdf-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.tdf-card {
	width: 100%;
	max-width: 26rem;
	background: var(--wp--preset--color--paper, #f2f4ee);
	color: var(--wp--preset--color--ink, #1c2620);
	border-radius: 14px;
	padding: 2rem 1.75rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	text-align: center;
}

.tdf-type {
	/* "Loại thẻ" là chữ tiếng Việt tự do Trọng gõ (VD: "Từ tiếng Anh", "Ký
	   tự Hán") — không phải nhãn/số liệu phi tiếng Việt, nên KHÔNG dùng IBM
	   Plex Mono ở đây (font này không đỡ tốt dấu tiếng Việt, dấu bị chồng
	   lên chữ ở cỡ nhỏ). Đổi sang Be Vietnam Pro — font sans dựng riêng cho
	   tiếng Việt, cùng bộ với phần thân chữ còn lại của overlay. */
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--be-vietnam-pro, sans-serif);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint, #657369);
}

.tdf-prompt {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--literata, serif);
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1.3;
	word-break: break-word;
}

.tdf-form {
	display: flex;
	gap: 0.5rem;
}

.tdf-input {
	flex: 1;
	min-width: 0;
	font-size: 1.05rem;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--wp--preset--color--line-strong, #82926c);
	border-radius: 8px;
	background: var(--wp--preset--color--raised, #fff);
	color: inherit;
}

.tdf-input:focus {
	outline: 2px solid var(--wp--preset--color--moss, #3f6b52);
	outline-offset: 1px;
}

.tdf-submit {
	flex: none;
	background: var(--wp--preset--color--moss, #3f6b52);
	color: var(--wp--preset--color--paper, #f2f4ee);
	border: none;
	border-radius: 8px;
	padding: 0.7rem 1.25rem;
	font-weight: 600;
	cursor: pointer;
}

.tdf-submit:hover {
	background: var(--wp--preset--color--moss-deep, #2c4d3a);
}

.tdf-feedback {
	/* Không còn phân biệt đúng/sai (v1.2.0) → 1 màu trung tính duy nhất,
	   không dùng màu "thành công" (moss) hay "cảnh báo" (clay) nữa vì
	   dòng này giờ chỉ đơn thuần hiện đáp án, không phán xét gì cả. */
	min-height: 1.4em;
	margin: 0.9rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1c2620);
}

.tdf-reveal {
	margin-top: 1rem;
}

.tdf-reveal-image {
	display: block;
	max-width: 100%;
	max-height: 260px;
	width: auto;
	margin: 0.5rem auto 0.75rem;
	border-radius: 10px;
	object-fit: cover;
}

.tdf-reveal-note {
	margin: 0 0 1.1rem;
	font-style: italic;
	color: var(--wp--preset--color--ink-soft, #4b5a51);
	font-size: 0.95rem;
}

.tdf-continue {
	background: var(--wp--preset--color--gold, #926733);
	color: var(--wp--preset--color--paper, #f2f4ee);
	border: none;
	border-radius: 8px;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
}

.tdf-continue:hover {
	opacity: 0.9;
}

@media (max-width: 480px) {
	.tdf-card {
		padding: 1.5rem 1.25rem;
	}

	.tdf-prompt {
		font-size: 1.4rem;
	}

	.tdf-form {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdf-overlay {
		animation: none;
	}
}