/*
 * Banner global flotant, dreapta-jos.
 * Markup: template-parts/global-banner.php
 *
 * z-index 9000: peste tot ce are tema (maxim 999), dar sub widget-ul de chat
 * Zendesk si sub dialogul de consimtamant Cookiebot - un anunt nu trebuie sa
 * acopere cererea de consimtamant.
 *
 * bottom: 104px ridica bannerul peste bula de chat Zendesk (~64px + marginea ei).
 */

.np-global-banner {
	position: fixed;
	right: 24px;
	bottom: 104px;
	z-index: 9000;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
	width: 360px;
	max-width: calc(100vw - 48px);
	padding: 18px 44px 18px 18px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(56, 49, 166, .18);
	font-family: inherit;
	/* Fara fill-mode: bannerul e vizibil implicit si animatia doar il aduce lin.
	   Cu 'both' ar ramane la starea 'from' (opacity 0) oriunde animatiile nu
	   avanseaza - taburi in fundal, randare throttled - adica invizibil. */
	animation: np-global-banner-in .3s ease;
}

/* Starea de inchidere. display:none, ca sa iasa complet din flux si din tab order. */
.np-global-banner.is-dismissed {
	display: none;
}

/* Animam DOAR transform, nu opacity. Un banner care nu se vede nu-si face treaba,
   iar in orice context unde timpul animatiei nu avanseaza (tab in fundal, randare
   throttled) o animatie pe opacity l-ar lasa complet invizibil. Asa, in cel mai
   rau caz sta cu 8px mai jos. */
@keyframes np-global-banner-in {
	from { transform: translateY(8px); }
	to   { transform: translateY(0); }
}

.np-global-banner__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #eaf4fe;
	color: #24abf6;
}

.np-global-banner__body {
	flex: 1 1 auto;
	min-width: 0;
}

.np-global-banner__title {
	margin: 0 0 6px;
	color: #3831a6;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
}

.np-global-banner__text {
	color: #6b6981;
	font-size: 14px;
	line-height: 1.45;
}

.np-global-banner__text p {
	margin: 0;
}

.np-global-banner__link {
	display: inline-block;
	margin-top: 10px;
	color: #3831a6;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}

.np-global-banner__link:hover,
.np-global-banner__link:focus {
	color: #4030a6;
	text-decoration: underline;
}

.np-global-banner__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6b6981;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.np-global-banner__close:hover,
.np-global-banner__close:focus {
	color: #3831a6;
	background: #f2f1fa;
}

/* Mobil: cardul se lateste pe toata latimea, dar ramane peste bula de chat. */
@media (max-width: 600px) {
	.np-global-banner {
		right: 12px;
		left: 12px;
		bottom: 92px;
		width: auto;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-global-banner {
		animation: none;
	}
}