/**
 * KBC Deals Visibility Engine — Frontend CSS
 *
 * Strategy: all known deal cards are pre-hidden on load via [class*="kbc-deal--"].
 * JavaScript then adds .kbc-deal--active to the correct ones, revealing them.
 * This prevents any flash of all deals showing before JS runs.
 *
 * Elementor sections get their deal class in: Advanced → CSS Classes
 * E.g. "kbc-deal--bogo" — no dot, just the class name.
 *
 * @package KBC_Deals_Visibility
 */

/* ── Pre-hide all deal sections before JS runs ─────────────────────────────── */

[class*="kbc-deal--"] {
	display: none;
}

/* ── Active state: JS removes .kbc-deal--hidden and adds .kbc-deal--active ─── */

.kbc-deal--active {
	display: block; /* Restore Elementor's default section display */
	animation: kbc-deal-fadein 0.35s ease-in-out;
}

/* ── Hidden state (explicit, added by JS) ────────────────────────────────── */

.kbc-deal--hidden {
	display: none !important;
}

/* ── Fade-in animation for revealed deal cards ───────────────────────────── */

@keyframes kbc-deal-fadein {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* ── "Not available today" badge ─────────────────────────────────────────── */
/*
   Optional: If you want deals to remain visible but greyed-out instead of
   hidden, swap display:none above for the .kbc-deal--dimmed approach below.
   Uncomment and add class="kbc-deal--dimmed" to the Elementor section.
*/

/*
.kbc-deal--dimmed {
	position: relative;
	opacity: 0.45;
	pointer-events: none;
	filter: grayscale(60%);
}

.kbc-deal--dimmed::after {
	content: "Not available today";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-12deg);
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.4em 1em;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
}
*/

/* ── Preview mode visual indicator ──────────────────────────────────────── */

body.admin-bar .kbc-preview-badge {
	display: flex;
}

.kbc-preview-badge {
	display: none; /* Shown only when preview mode JS adds it */
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 99999;
	background: #c0392b;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.35em 0.75em;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	pointer-events: none;
}

/* ── Accessibility ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.kbc-deal--active {
		animation: none;
	}
}