/**
 * Announcement popup.
 * Ported from the original functions.php snippet; colours now come from the
 * CSS custom properties printed inline by AB_Ann_Popup::assets().
 */

:root {
	--ab-accent: #E8631A;
	--ab-accent-rgb: 232, 99, 26;
	--ab-popup-bg: #141414;
	--ab-popup-z: 999999;
}

/* ------------------------------------------------------------------------
   Defensive reset.

   Themes in this genre decorate generic elements with pseudo-element content
   (the "//" separators visible on asicbooster.com), and they reset margins and
   text transforms on headings and paragraphs. Both leak into the dialog. Kill
   every pseudo-element inside it, then re-enable the two the dialog actually
   uses at higher specificity so they survive.

   The :where() wrapper keeps the reset at zero specificity, so every real rule
   further down this file still wins without needing !important.
   ------------------------------------------------------------------------ */

#ab-ann-overlay,
#ab-ann-overlay *,
.ab-ann-inline,
.ab-ann-inline * {
	box-sizing: border-box;
}

/* The containers themselves need killing too - the overlay is a flex parent, so
   a theme's div::before/::after become flex items either side of the panel. */
#ab-ann-overlay::before,
#ab-ann-overlay::after,
#ab-ann-overlay *::before,
#ab-ann-overlay *::after,
.ab-ann-inline::before,
.ab-ann-inline::after,
.ab-ann-inline *::before,
.ab-ann-inline *::after {
	content: none !important;
	display: none !important;
}

#ab-ann-overlay .ab-ann-badge::before,
#ab-ann-overlay .ab-ann-card::before,
.ab-ann-inline .ab-ann-card::before {
	content: '' !important;
	display: block !important;
}

/* Text-level reset, held at exactly (0,1,1) specificity: high enough to beat a
   theme's `h2, h3, p { ... }` and `.entry-content p { ... }` rules, low enough
   that every component rule further down this file still wins on source order.
   Only bare text elements are listed - resetting div/span here would strip the
   badge and tag styling, which are set with single-class selectors. */
.ab-ann-root h2, .ab-ann-inline h2,
.ab-ann-root h3, .ab-ann-inline h3,
.ab-ann-root p,  .ab-ann-inline p,
.ab-ann-root ul, .ab-ann-inline ul,
.ab-ann-root ol, .ab-ann-inline ol,
.ab-ann-root li, .ab-ann-inline li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	text-indent: 0;
	list-style: none;
}

#ab-ann-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .90);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	z-index: var(--ab-popup-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	animation: abAnnFadeIn .4s ease forwards;
}

#ab-ann-overlay.ab-ann-hidden { display: none; }

@keyframes abAnnFadeIn { from { opacity: 0; } to { opacity: 1; } }

#ab-ann-popup {
	background: var(--ab-popup-bg);
	border: 1px solid rgba(var(--ab-accent-rgb), .28);
	border-radius: 4px;
	max-width: 720px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	position: relative;
	box-shadow:
		0 0 0 1px rgba(var(--ab-accent-rgb), .08),
		0 0 60px rgba(var(--ab-accent-rgb), .20),
		0 0 120px rgba(var(--ab-accent-rgb), .08);
	animation: abAnnSlideUp .5s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes abAnnSlideUp {
	from { transform: translateY(28px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

#ab-ann-popup::-webkit-scrollbar { width: 4px; }
#ab-ann-popup::-webkit-scrollbar-track { background: #1c1c1c; }
#ab-ann-popup::-webkit-scrollbar-thumb { background: #b04a10; border-radius: 2px; }

/* Header */
.ab-ann-head {
	background: linear-gradient(135deg, #1a0d05 0%, #0e0e0e 100%);
	border-bottom: 1px solid rgba(var(--ab-accent-rgb), .22);
	padding: 24px 32px 20px;
	position: sticky;
	top: 0;
	z-index: 5;
}

.ab-ann-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(var(--ab-accent-rgb), .12);
	border: 1px solid var(--ab-accent);
	border-radius: 2px;
	padding: 4px 12px;
	font-size: 9px;
	letter-spacing: 3px;
	color: var(--ab-accent);
	text-transform: uppercase;
	margin-bottom: 12px;
}

.ab-ann-badge::before {
	content: '';
	width: 7px;
	height: 7px;
	background: var(--ab-accent);
	border-radius: 50%;
	animation: abAnnBlink 1.2s infinite;
}

@keyframes abAnnBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

.ab-ann-head h2 {
	font-size: clamp(14px, 2.8vw, 20px) !important;
	font-weight: 900 !important;
	color: #fff !important;
	line-height: 1.35 !important;
	letter-spacing: .5px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.ab-ann-head p {
	font-size: 13px;
	color: #7a7068;
	margin-top: 6px;
	letter-spacing: .4px;
}

#ab-ann-close {
	position: absolute;
	top: 18px;
	right: 22px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .10);
	color: #7a7068;
	width: 34px;
	height: 34px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	transition: border-color .2s, color .2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

#ab-ann-close:hover { border-color: var(--ab-accent); color: var(--ab-accent); }
#ab-ann-close:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 2px; }

/* Body */
.ab-ann-body { padding: 26px 32px; }

/* Notice cards */
.ab-ann-card {
	border-radius: 3px;
	padding: 20px 22px;
	margin-bottom: 18px;
	position: relative;
	overflow: hidden;
}

.ab-ann-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
}

.ab-ann-card--or {
	background: rgba(var(--ab-accent-rgb), .07);
	border: 1px solid rgba(var(--ab-accent-rgb), .28);
}
.ab-ann-card--or::before { background: var(--ab-accent); }

.ab-ann-card--rd {
	background: rgba(232, 64, 64, .07);
	border: 1px solid rgba(232, 64, 64, .28);
}
.ab-ann-card--rd::before { background: #e84040; }

.ab-ann-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.ab-ann-card__date {
	font-size: 10px;
	padding: 3px 10px;
	border-radius: 2px;
	letter-spacing: 1px;
}
.ab-ann-card--or .ab-ann-card__date { color: var(--ab-accent); background: rgba(var(--ab-accent-rgb), .13); }
.ab-ann-card--rd .ab-ann-card__date { color: #e84040; background: rgba(232, 64, 64, .13); }

.ab-ann-card__tag {
	font-size: 9px;
	color: #6a6060;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, .07);
	padding: 3px 8px;
	border-radius: 2px;
}

.ab-ann-card h3 {
	font-size: clamp(11px, 2vw, 14px) !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	border: none !important;
	letter-spacing: .3px !important;
	line-height: 1.4 !important;
}

.ab-ann-card p {
	font-size: 13.5px;
	color: #c0b8ae;
	line-height: 1.8;
	font-weight: 300;
	margin: 0;
}

.ab-ann-card p strong { color: #e8e0d5; font-weight: 600; }

.ab-ann-card__status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 11px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .05);
}

.ab-ann-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	animation: abAnnBlink 1.6s infinite;
}

/* Footer */
.ab-ann-foot {
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding: 14px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	background: rgba(0, 0, 0, .28);
}

.ab-ann-foot__note { font-size: 11px; color: #524c46; }

#ab-ann-ack {
	background: var(--ab-accent);
	color: #fff;
	border: none;
	padding: 10px 26px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
	transition: background .2s, box-shadow .2s, transform .15s;
}

#ab-ann-ack:hover {
	filter: brightness(1.15);
	box-shadow: 0 0 22px rgba(var(--ab-accent-rgb), .40);
	transform: translateY(-1px);
}
#ab-ann-ack:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Shortcode / inline use */
.ab-ann-inline { background: var(--ab-popup-bg); padding: 4px 0; }

@media (max-width: 520px) {
	.ab-ann-head { padding: 18px 18px 14px; }
	.ab-ann-body { padding: 18px 16px; }
	.ab-ann-foot { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	#ab-ann-overlay,
	#ab-ann-popup,
	.ab-ann-badge::before,
	.ab-ann-dot { animation: none; }
}