/* SRN Announcements — Frontend Popup */

:root {
	--noticewave-overlay-bg   : rgba(10, 10, 20, 0.22);
	--noticewave-card-radius  : 10px;
	--noticewave-card-width   : 420px;
	--noticewave-card-shadow  : 0 8px 32px rgba(0,0,0,.18), 0 32px 80px rgba(0,0,0,.22);
	--noticewave-title-color  : #0f172a;
	--noticewave-body-color   : #64748b;
	--noticewave-cta-bg       : #0f172a;
	--noticewave-cta-hover    : #1e293b;
	--noticewave-cta-color    : #ffffff;
	--noticewave-event        : #3b82f6;
	--noticewave-admission    : #10b981;
	--noticewave-alert        : #ef4444;
	--noticewave-general      : #8b5cf6;
}

/* ─── Overlay ───────────────────────────────────────────────────── */
.noticewave-overlay {
	align-items    : center;
	background     : var(--noticewave-overlay-bg);
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
	bottom         : 0;
	display        : flex;
	justify-content: center;
	left           : 0;
	opacity        : 0;
	padding        : 20px;
	position       : fixed;
	right          : 0;
	top            : 0;
	transition     : opacity 0.30s ease;
	z-index        : 999999;
}
.noticewave-overlay.noticewave-visible { opacity: 1; }

/* ─── Card ──────────────────────────────────────────────────────── */
.noticewave-card {
	background    : #ffffff;
	border-radius : var(--noticewave-card-radius);
	box-shadow    : var(--noticewave-card-shadow);
	display       : flex;
	flex-direction: column;
	max-height    : 92vh;
	max-width     : var(--noticewave-card-width);
	overflow      : hidden;
	position      : relative;
	transform     : translateY(28px) scale(0.97);
	transition    : transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
	width         : 100%;
}
.noticewave-overlay.noticewave-visible .noticewave-card {
	transform: translateY(0) scale(1);
}

/* ─── Close button ──────────────────────────────────────────────── */
.noticewave-close {
	align-items    : center;
	background     : rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border         : none;
	border-radius  : 50%;
	box-shadow     : 0 2px 8px rgba(0,0,0,.16);
	color          : #475569;
	cursor         : pointer;
	display        : flex;
	height         : 36px;
	justify-content: center;
	padding        : 0;
	position       : absolute;
	right          : 14px;
	top            : 14px;
	transition     : background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
	width          : 36px;
	z-index        : 10;
}
.noticewave-close:hover {
	background : #ffffff;
	box-shadow : 0 4px 16px rgba(0,0,0,.20);
	color      : #0f172a;
	transform  : scale(1.10);
}
/* Remove browser focus ring — popup is keyboard accessible via Escape */
.noticewave-close:focus-visible { outline: none; }
.noticewave-close svg { height: 15px; pointer-events: none; width: 15px; }

/* ─── Media (banner wrapper) ────────────────────────────────────── */
.noticewave-media {
	flex-shrink: 0;
	overflow   : hidden;
	position   : relative;
	width      : 100%;
}

.noticewave-banner {
	display   : block;
	height    : auto;
	object-fit: cover;
	object-position: center top;
	width     : 100%;
}

/* No overlay gradient — badges are not rendered on the frontend */

/* Badge inside media sits at bottom-left */
.noticewave-media .noticewave-badge {
	bottom  : 16px;
	left    : 20px;
	position: absolute;
	z-index : 1;
}

/* ─── Badge ─────────────────────────────────────────────────────── */
.noticewave-badge {
	background    : #64748b;
	border-radius : 6px;
	color         : #ffffff;
	display       : inline-flex;
	align-items   : center;
	font-size     : 11px;
	font-weight   : 700;
	gap           : 5px;
	letter-spacing: 0.08em;
	padding       : 5px 11px;
	text-transform: uppercase;
}

.noticewave-badge-event     { background: var(--noticewave-event); }
.noticewave-badge-admission { background: var(--noticewave-admission); }
.noticewave-badge-alert     { background: var(--noticewave-alert); }
.noticewave-badge-general   { background: var(--noticewave-general); }

/* ─── Body ──────────────────────────────────────────────────────── */
.noticewave-body {
	display       : flex;
	flex-direction: column;
	overflow-y    : auto;
	padding       : 28px 30px 30px;
}

/* Badge inside body (no banner case) — sits above title with spacing */
.noticewave-body > .noticewave-badge {
	align-self   : flex-start;
	margin-bottom: 14px;
}

/* ─── Title ─────────────────────────────────────────────────────── */
.noticewave-title {
	color      : var(--noticewave-title-color);
	font-size  : 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin     : 0 0 10px;
}

/* Leave space for close button when there's no banner */
.noticewave-card:not(:has(.noticewave-media)) .noticewave-title {
	padding-right: 44px;
}

/* ─── Divider ───────────────────────────────────────────────────── */
.noticewave-divider {
	background: #f1f5f9;
	border    : none;
	height    : 1px;
	margin    : 0 0 16px;
}

/* ─── Content ───────────────────────────────────────────────────── */
.noticewave-content {
	color      : var(--noticewave-body-color);
	font-size  : 14px;
	line-height: 1.72;
}
.noticewave-content p       { margin: 0 0 10px; }
.noticewave-content p:last-child { margin-bottom: 0; }
.noticewave-content a       { color: #3b82f6; text-decoration: underline; }
.noticewave-content strong  { color: #1e293b; }

/* ─── CTA button ────────────────────────────────────────────────── */
.noticewave-cta-wrap {
	margin-top: 22px;
}

.noticewave-cta {
	align-items    : center;
	background     : var(--noticewave-cta-bg);
	border-radius  : 10px;
	color          : var(--noticewave-cta-color) !important;
	display        : flex;
	font-size      : 14px;
	font-weight    : 600;
	gap            : 8px;
	justify-content: center;
	padding        : 13px 24px;
	text-decoration: none !important;
	transition     : background 0.15s, transform 0.15s, box-shadow 0.15s;
	width          : 100%;
}
.noticewave-cta:hover {
	background: var(--noticewave-cta-hover);
	box-shadow: 0 4px 20px rgba(15,23,42,.22);
	transform : translateY(-1px);
}
.noticewave-cta:focus-visible {
	outline       : 2px solid #3b82f6;
	outline-offset: 2px;
}

/* WhatsApp variant */
.noticewave-cta--whatsapp {
	background: #25d366;
}
.noticewave-cta--whatsapp:hover {
	background: #1ebe5d;
	box-shadow: 0 4px 20px rgba(37,211,102,.30);
}
.noticewave-cta svg { flex-shrink: 0; height: 16px; width: 16px; }

/* ─── No-banner close button offset ────────────────────────────── */
/* When no media wrapper, body needs top-right room for the close btn */
.noticewave-body--no-banner {
	padding-top: 24px;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.noticewave-overlay { padding: 16px; }

	.noticewave-card { max-height: 88vh; }

	.noticewave-media  { width: 100%; }
	.noticewave-banner { width: 100%; height: auto; }

	.noticewave-body { padding: 22px 22px 28px; }

	.noticewave-title { font-size: 18px; }
}