/**
 * Blood Bank > Welcome Banner — front-end styling.
 * Every rule below is prefixed `.bbb-welcome-banner`/`.bbb-wb-` so it
 * cannot override or redesign anything else in the app (Dashboard,
 * Toasts, Branding Banner, Bottom Nav, etc.). Colors/radius/shadow are
 * driven entirely by CSS custom properties written server-side in
 * Welcome_Banner::inline_css() (see functions.php) from the
 * Blood Bank > Welcome Banner Admin screen — nothing here is
 * hard-coded per-installation branding.
 */

.bbb-welcome-banner {
	position: relative;
	top: auto;
	left: auto;
	z-index: 10;
	width: 100%;
	max-width: none;
	transform: none;
	opacity: 0;
	pointer-events: none;
	margin: 0 0 14px;
	transition: opacity .32s ease, transform .32s ease;
}
.bbb-welcome-banner.bbb-wb-visible {
	opacity: 1;
	pointer-events: auto;
}

.bbb-welcome-banner.bbb-wb-hiding {
	opacity: 0;
	transform: translateY(-10px);
}

.bbb-welcome-banner-inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--bbb-wb-bg, var(--card-bg));
	border: 1px solid var(--bbb-wb-border, #ffd66b);
	border-radius: var(--bbb-wb-radius, 18px);
	box-shadow: var(--bbb-wb-shadow, 0 18px 45px -14px rgba(20,20,20,.28));
	padding: 16px 40px 16px 16px;
}

.bbb-welcome-banner-icon {
	flex: 0 0 auto;
	font-size: 26px;
	line-height: 1;
}

.bbb-welcome-banner-copy {
	min-width: 0;
	flex: 1 1 auto;
}

.bbb-welcome-banner-title {
	margin: 0 0 2px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--bbb-wb-title, var(--text-primary));
	line-height: 1.35;
}

.bbb-welcome-banner-subtitle {
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bbb-wb-subtitle, var(--accent));
	line-height: 1.4;
}

.bbb-welcome-banner-desc {
	margin: 0;
	font-size: 12.5px;
	color: var(--bbb-wb-desc, var(--text-muted));
	line-height: 1.45;
}

.bbb-welcome-banner-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--bbb-wb-desc, var(--text-muted));
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	border-radius: 999px;
}

.bbb-welcome-banner-close:hover {
	background: var(--border);
}

/* Welcome Banner content alignment. The outer card stays centered and
   keeps its existing dimensions; Center aligns the complete message block
   to the same visual center as the Services section. */
.bbb-welcome-banner.bbb-wb-align-left .bbb-welcome-banner-copy {
	text-align: left;
}

.bbb-welcome-banner.bbb-wb-align-center .bbb-welcome-banner-inner {
	align-items: center;
}

.bbb-welcome-banner.bbb-wb-align-center .bbb-welcome-banner-icon {
	margin: 0 auto;
}

.bbb-welcome-banner.bbb-wb-align-center .bbb-welcome-banner-copy {
	text-align: center;
}

.bbb-welcome-banner.bbb-wb-align-right .bbb-welcome-banner-inner {
	align-items: flex-end;
}

.bbb-welcome-banner.bbb-wb-align-right .bbb-welcome-banner-copy {
	text-align: right;
}

/* -------------------------------------------------------------- */
/* Entrance animations — the exit ("hiding") transition above is   */
/* intentionally the same simple fade/lift regardless of which     */
/* entrance style was chosen, so it always feels smooth on the way */
/* out no matter which Admin setting is active.                    */
/* -------------------------------------------------------------- */

.bbb-welcome-banner.bbb-wb-anim-fade {
	transform: none;
}

.bbb-welcome-banner.bbb-wb-anim-slide_down:not(.bbb-wb-visible):not(.bbb-wb-hiding) {
	transform: translateY(-24px);
}
.bbb-welcome-banner.bbb-wb-anim-slide_down.bbb-wb-visible {
	transform: none;
}

.bbb-welcome-banner.bbb-wb-anim-scale:not(.bbb-wb-visible):not(.bbb-wb-hiding) {
	transform: scale(.85);
}
.bbb-welcome-banner.bbb-wb-anim-scale.bbb-wb-visible {
	transform: none;
}

/* Preview panel (wp-admin > Welcome Banner) reuses this exact same
   markup/CSS, but rendered inline instead of fixed to the viewport. */
.bbb-wb-preview-banner.bbb-welcome-banner {
	position: static;
	width: 100%;
	max-width: none;
	transform: none !important;
	opacity: 1;
	pointer-events: auto;
	margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.bbb-welcome-banner {
		transition: opacity .15s linear;
	}
	.bbb-welcome-banner.bbb-wb-anim-slide_down,
	.bbb-welcome-banner.bbb-wb-anim-scale {
		transform: none !important;
	}
}

/* Dashboard placement: the login Welcome Banner lives directly beneath
   the Services heading and just above the first service-card row. It
   visually floats over the upper edge of that row, like the reference. */
.db-shortcuts > .bbb-welcome-banner {
	position: relative;
	z-index: 20;
	width: calc(100% - 12px);
	max-width: none;
	margin: 0 6px -34px;
}

.db-shortcuts > .bbb-welcome-banner + .services-grid {
	position: relative;
	z-index: 1;
}

.db-shortcuts > .bbb-welcome-banner .bbb-welcome-banner-inner {
	padding-top: 12px;
	padding-bottom: 12px;
}

@media (max-width: 640px) {
	.db-shortcuts > .bbb-welcome-banner {
		width: calc(100% - 8px);
		margin-left: 4px;
		margin-right: 4px;
		margin-bottom: -28px;
	}

	.db-shortcuts > .bbb-welcome-banner .bbb-welcome-banner-title {
		font-size: 14.5px;
	}

	.db-shortcuts > .bbb-welcome-banner .bbb-welcome-banner-subtitle,
	.db-shortcuts > .bbb-welcome-banner .bbb-welcome-banner-desc {
		font-size: 12.5px;
	}
}