/* CSS custom properties - giá trị mặc định ở đây, có thể bị ghi đè bởi
 * inline <style> do class-core.php::build_style_variables_css() chèn (đọc
 * từ Settings > Styling & Customization). Fallback trong var(--x, fallback)
 * đảm bảo banner hiển thị đúng ngay cả khi admin chưa từng lưu style nào.
 *
 * QUAN TRỌNG - !important dùng CÓ CHỦ ĐÍCH trên các thuộc tính color/
 * background trong toàn bộ file này (không phải quên/ẩu). Banner này được
 * cài vào HÀNG NGÀN theme WordPress khác nhau mà ta không kiểm soát được -
 * không thể đoán trước specificity hay thứ tự load CSS của bất kỳ theme
 * nào. Đã gặp bug thật 2 lần liên tiếp: (1) dựa vào kế thừa color bị theme
 * "cướp" vì bất kỳ rule khớp trực tiếp nào cũng thắng inherited value bất
 * kể specificity, và (2) sau khi sửa thành set tường minh (không important)
 * vẫn bị theme ghi đè nếu theme có rule specificity bằng/cao hơn load SAU
 * banner.css (thứ tự load phụ thuộc theme, không đoán trước được). Dùng
 * !important trên đúng các thuộc tính thị giác cốt lõi (color, background,
 * border-color) là cách duy nhất đảm bảo banner hiển thị đúng màu admin đã
 * cấu hình, bất kể theme nào. Đây cũng là pattern chuẩn mà các cookie-
 * consent plugin lớn (Cookiebot, OneTrust, Termly...) đều dùng, không phải
 * cách làm tuỳ tiện.
 */
.usps-banner {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	z-index: 999999 !important;
	background: var( --usps-banner-bg, #1a1a1a ) !important;
	color: var( --usps-banner-text-color, #fff ) !important;
	font-family: var( --usps-font-family, inherit ) !important;
	padding: 16px 24px !important;
	margin: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	box-shadow: 0 -2px 10px rgba( 0, 0, 0, 0.2 ) !important;
	box-sizing: border-box !important;
}

.usps-banner__text {
	margin: 0 !important;
	max-width: 640px !important;
	flex: 1 1 320px !important;
	/* Set TƯỜNG MINH + !important - xem giải thích ở đầu file. Không dựa
	 * vào kế thừa từ .usps-banner cha vì rule "p { color: ... }" của theme
	 * (gần như mọi theme đều có) sẽ luôn thắng giá trị kế thừa; và bản thân
	 * rule tường minh không !important cũng có thể thua nếu theme có
	 * specificity bằng/cao hơn load sau banner.css.
	 */
	color: var( --usps-banner-text-color, #fff ) !important;
	font-family: inherit !important;
}

.usps-banner__actions {
	display: flex !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

/*
 * QUAN TRỌNG - "Symmetry of choice" (Colorado 4 CCR 904-3-7.10, và cùng
 * nguyên tắc ở CPRA/CTDPA dark pattern rules): nút Accept và Reject BẮT
 * BUỘC phải có cùng kích thước, cùng màu sắc/độ nổi bật, cùng vị trí ưu
 * tiên thị giác. Quy định Colorado nêu ĐÍCH DANH ví dụ vi phạm: "Presenting
 * an 'I do not accept' button in a greyed-out color while the 'I accept'
 * button is presented in a bright or obvious color would not be considered
 * equal or symmetrical."
 *
 * Vì vậy CHỈ CÓ 1 class .usps-btn dùng chung cho CẢ 2 nút (không còn
 * --primary/--secondary khác màu như bản cũ) - đảm bảo đối xứng THEO CẤU
 * TRÚC, không thể bị phá vỡ dù admin tự đổi màu ở Settings > Styling & 
 * Customization (mọi màu admin chọn áp dụng ĐỒNG THỜI cho cả 2 nút).
 */
.usps-btn {
	border: 2px solid var( --usps-accent-color, #fff ) !important;
	border-radius: 4px !important;
	padding: 8px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	background: var( --usps-accent-color, #fff ) !important;
	color: var( --usps-banner-bg, #1a1a1a ) !important;
	line-height: normal !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.usps-btn:hover,
.usps-btn:focus {
	/* Nhiều theme có rule :hover đổi màu button toàn site (vd
	 * "button:hover { background: ... }") - khoá luôn cả trạng thái hover
	 * về đúng 2 màu cấu hình, tránh 1 nút đổi màu khi hover còn nút kia thì
	 * không (phá vỡ symmetry of choice ở đúng khoảnh khắc user tương tác).
	 */
	background: var( --usps-accent-color, #fff ) !important;
	color: var( --usps-banner-bg, #1a1a1a ) !important;
	border-color: var( --usps-accent-color, #fff ) !important;
}

.usps-footer-links {
	position: fixed !important;
	left: 16px !important;
	bottom: 16px !important;
	z-index: 999998 !important;
	font-size: 12px !important;
	font-family: var( --usps-font-family, inherit ) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.usps-footer-links a {
	color: var( --usps-footer-link-color, inherit ) !important;
	text-decoration: underline !important;
	margin-right: 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: inherit !important;
	background: none !important;
	border: none !important;
}

/*
 * Icon opt-out CCPA (tuỳ chọn, chỉ hiện khi rule của bang đó có
 * footer_links[].icon_url - xem banner-renderer.js). Kích thước theo đúng
 * yêu cầu quy định: "approximately the same size as any other icons used
 * by the business" (CCPA Regs § 7013/999.306(f)) - 16px là kích thước icon
 * phổ biến trong UI web, admin có thể cần điều chỉnh nếu theme dùng icon
 * cỡ khác.
 */
.usps-footer-links img.usps-optout-icon {
	width: 16px !important;
	height: 16px !important;
	vertical-align: middle !important;
	max-width: none !important;
}

.usps-footer-links a.usps-branding-badge {
	font-size: 11px !important;
	opacity: 0.75 !important;
	text-decoration: none !important;
	border-bottom: 1px dotted currentColor !important;
}

/*
 * Xác nhận trực quan "Opt-Out Preference Signal Honored" - BẮT BUỘC theo
 * CCPA Regs 11 CCR § 7025(c)(6) (hiệu lực 01/01/2026), KHÔNG phải link nên
 * không dùng <a>/underline - chỉ là status text, màu xanh lá để phân biệt
 * rõ với các link footer bên cạnh (không bị hiểu nhầm là 1 nút bấm).
 */
.usps-footer-links .usps-gpc-confirmation {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	margin-right: 12px !important;
	color: #2e7d46 !important;
	font-weight: 600 !important;
}

.usps-footer-links .usps-gpc-confirmation__check {
	display: inline-block !important;
}

.usps-dsr-form p {
	margin: 0 0 12px;
}

.usps-dsr-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.usps-dsr-form input,
.usps-dsr-form select {
	width: 100%;
	max-width: 360px;
	padding: 8px;
	box-sizing: border-box;
}