/* WP Agent Flatsome Kit — Mã giảm giá, Flash sale, Popup. Màu theo theme Flatsome (--fs-color-primary / --fs-color-alert);
   đổi riêng: đặt --wpa-kit-accent / --wpa-kit-sale trên lớp cha (ô Class của element). Độ ưu tiên thấp (1 lớp) để CSS
   child theme đè được. */

.wpa-coupons,
.wpa-flash-sale,
.wpa-popup {
	--wpa-kit-accent: var(--fs-color-primary, #446084);
	--wpa-kit-sale: var(--fs-color-alert, #b20000);
}

.wpa-kit-notice {
	padding: 10px 14px;
	border: 1px dashed #c3c4c7;
	font-size: 0.875rem;
	color: #50575e;
}

/* ── Mã giảm giá ─────────────────────────────────────────────────────────────────────── */

.wpa-coupon {
	display: flex;
	align-items: stretch;
	gap: 12px;
	height: 100%;
	padding: 14px 14px 14px 18px;
	border: 1px dashed var(--wpa-kit-accent);
	border-left: 6px solid var(--wpa-kit-accent);
	border-radius: 8px;
	background: #fff;
}

.wpa-coupon__body {
	flex: 1 1 auto;
	min-width: 0;
}

.wpa-coupon p {
	margin: 0 0 4px;
}

.wpa-coupon__title {
	font-weight: 700;
	color: var(--wpa-kit-accent);
}

.wpa-coupon__condition {
	font-size: 0.875em;
}

.wpa-coupon__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 0.8125em;
	opacity: 0.85;
}

.wpa-coupon__code {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wpa-coupon__actions {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 6px;
}

.wpa-coupon__actions .button {
	margin: 0;
	white-space: nowrap;
}

.wpa-coupon.is-expired {
	opacity: 0.45;
}

.wpa-coupon__expired {
	font-size: 0.8125em;
	font-style: italic;
}

.wpa-coupon__dialog,
.wpa-popup {
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	border: 0;
}

/* No padding on the dialog itself: a click on it is a click on the backdrop (close); the body holds the padding */
.wpa-coupon__dialog {
	width: 420px;
	padding: 0;
	border-radius: 8px;
}

.wpa-coupon__dialog-body {
	padding: 20px;
}

.wpa-coupon__dialog::backdrop,
.wpa-popup::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.wpa-coupon__dialog-title {
	margin: 0 0 10px;
	font-weight: 700;
}

.wpa-coupon__terms {
	margin: 0 0 14px 1.2em;
}

.wpa-coupon__terms li {
	margin: 0 0 4px;
}

.wpa-toast {
	position: fixed;
	z-index: 100000;
	left: 50%;
	bottom: 24px;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 6px;
	background: rgba(17, 17, 17, 0.9);
	color: #fff;
	font-size: 0.9375rem;
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
}

.wpa-toast.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
}

/* UX Builder canvas (custom-plugin-and-ux-builder-rules.md, "Canvas"): each wpa_coupon mounts into the row's <content>
   inside a wrapper of the builder, so Flatsome's .large-columns-N > .col widths do not reach the cards; lay the row out
   as a grid there, <content> flattened, each wrapper a cell. The front is untouched. */
.ux-builder-iframe .wpa-coupons > .row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-builder-iframe .wpa-coupons > .row.large-columns-1 {
	grid-template-columns: minmax(0, 1fr);
}

.ux-builder-iframe .wpa-coupons > .row.large-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ux-builder-iframe .wpa-coupons > .row.large-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ux-builder-iframe .wpa-coupons > .row.large-columns-5,
.ux-builder-iframe .wpa-coupons > .row.large-columns-6,
.ux-builder-iframe .wpa-coupons > .row.large-columns-7,
.ux-builder-iframe .wpa-coupons > .row.large-columns-8 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ux-builder-iframe .wpa-coupons > .row > content {
	display: contents;
}

.ux-builder-iframe .wpa-coupons .wpa-coupons__col {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
}

@media (max-width: 549px) {
	.wpa-coupon {
		flex-direction: column;
	}

	.wpa-coupon__actions {
		flex-direction: row;
	}
}

/* ── Flash sale ──────────────────────────────────────────────────────────────────────── */

.wpa-flash-sale__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 12px;
}

.wpa-flash-sale__title {
	margin: 0;
	color: var(--wpa-kit-sale);
	text-transform: uppercase;
}

.wpa-flash-sale__timer {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpa-flash-sale__clock {
	padding: 2px 8px;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wpa-flash-sale__clock:empty {
	display: none;
}

.wpa-flash-sale__tabs {
	display: flex;
	overflow-x: auto;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--wpa-kit-sale);
	scrollbar-width: thin;
}

.wpa-flash-sale__tab {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	align-items: center;
	min-width: 120px;
	min-height: 0;
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: 0;
	background: #f4f4f4;
	color: inherit;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.wpa-flash-sale__tab-label {
	font-weight: 700;
}

.wpa-flash-sale__tab-status {
	font-size: 0.8125em;
}

.wpa-flash-sale__tab.is-active {
	background: var(--wpa-kit-sale);
	color: #fff;
}

.wpa-flash-sale__tab.is-ended:not(.is-active) {
	opacity: 0.6;
}

.wpa-flash-sale__panel[hidden] {
	display: none;
}

.wpa-flash-sold {
	position: relative;
	overflow: hidden;
	margin-top: 6px;
	border-radius: 999px;
	background: #fde2e2;
	text-align: center;
}

/* "Đã bán n" hai lớp: chữ đậm trên nền hồng (đọc được khi thanh thấp) + bản sao trong thanh (chữ đen/trắng theo màu thanh), cắt theo --wpa-sold */
.wpa-flash-sold__bar,
.wpa-flash-sold__text {
	display: block;
	padding: 1px 8px;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
}

.wpa-flash-sold__bar {
	position: absolute;
	inset: 0;
	background: var(--wpa-kit-sale);
	color: #fff;
	text-shadow: 0 0 2px #000, 0 0 4px #000;
	clip-path: inset(0 calc(100% - var(--wpa-sold, 0%)) 0 0);
	-webkit-user-select: none;
	user-select: none;
}

/* Chữ trong thanh: PHP chọn đen/trắng theo Màu cảnh báo của Flatsome (độ sáng WCAG, ≥ 4.5:1). Không có lớp is-ink-* (màu
   không đọc được) → chữ trắng viền tối ở trên. Đặt --wpa-kit-sale riêng thì đặt cả màu chữ của .wpa-flash-sold__bar. */
.wpa-flash-sold__bar.is-ink-light {
	color: #fff;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.wpa-flash-sold__bar.is-ink-dark {
	color: #000;
	text-shadow: 0 0 2px #fff; /* màu thanh bị đổi tối bằng CSS vẫn không thành chữ đen trên nền tối */
}

.wpa-flash-sold__text {
	color: #8f1d1d;
}

.wpa-flash-sale.is-builder .wpa-flash-sale__slot-preview {
	margin-bottom: 16px;
	padding-top: 8px;
	border-top: 1px dashed #c3c4c7;
}

.wpa-flash-sale.is-builder .wpa-flash-sale__tab {
	display: inline-flex;
}

/* ── Popup ───────────────────────────────────────────────────────────────────────────── */

.wpa-popup {
	padding: 0;
	overflow: visible;
	background: transparent;
	color: inherit;
}

.wpa-popup__box {
	position: relative;
	box-sizing: border-box;
	width: var(--wpa-popup-width, 480px);
	max-width: 100%;
	padding: var(--wpa-popup-padding, 20px);
	border-radius: 8px;
	background: #fff;
}

.wpa-popup:not(.is-builder) .wpa-popup__box {
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}

.wpa-popup__close {
	position: absolute;
	z-index: 2;
	top: 4px;
	right: 4px;
	width: 36px;
	min-height: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	font-size: 24px;
	line-height: 36px;
	cursor: pointer;
}

.wpa-popup__content > :last-child {
	margin-bottom: 0;
}

.wpa-popup__hide-today {
	display: flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 12px 0 0;
	font-size: 0.875rem;
	font-weight: 400;
	cursor: pointer;
}

.wpa-popup__hide-today input {
	margin: 0;
}

html.wpa-popup-open {
	overflow: hidden;
}

/* Khung UX Builder: hộp in tại chỗ để sửa element con */
.wpa-popup.is-builder {
	padding: 12px;
	border: 1px dashed #c3c4c7;
	background: rgba(0, 0, 0, 0.04);
}

.wpa-popup__builder-info {
	margin: 0 0 8px;
	font-size: 0.8125rem;
	color: #50575e;
}

.wpa-popup.is-builder .wpa-popup__box {
	margin: 0 auto;
}