/* ==========================================================================
   Blood Bank > Bottom Navigation Manager — independent styling layer.
   ==========================================================================
   Loaded AFTER assets/css/app.css (see functions.php enqueue order), and
   every rule here is scoped behind an `html.bbb-bnm-*` flag class that
   assets/js/bottom-nav-manager.js only adds when the admin has actually
   set that field in Blood Bank > Bottom Navigation Manager. Nothing in
   this file fires by default, so the existing Bottom Navigation's look
   (`.bbb-bottom-nav`, `.bbb-bottom-nav-item`, `.bbb-bn-pill`, `.bbb-bn-icon`,
   `.bbb-bn-label`, `.bbb-more-sheet`) is completely unaffected until this
   new screen is used.

   This file never selects `.app-header`, `.app-sidebar`, `.db-*`, `.bg-*`,
   or any other module's elements — only the existing Bottom Navigation
   bar and its "More" sheet, both already defined in assets/css/app.css.
   No selector, class name, or rule in assets/css/app.css is edited,
   removed, or overridden outside of these opt-in flag classes.
   ========================================================================== */

/* ---------------- General visibility ---------------- */

html.bbb-bnm-hidden .bbb-bottom-nav,
html.bbb-bnm-hidden .bbb-more-sheet {
	display: none !important;
}

html.bbb-bnm-not-fixed .bbb-bottom-nav {
	position: absolute;
}

html.bbb-bnm-show-desktop .bbb-bottom-nav {
	display: flex;
}
html.bbb-bnm-show-desktop .app-main {
	padding-bottom: calc(24px + var(--bbb-bnm-height, 68px) + env(safe-area-inset-bottom));
}

html.bbb-bnm-hide-tablet .bbb-bottom-nav {
	display: none;
}

html.bbb-bnm-hide-mobile .bbb-bottom-nav {
	display: none;
}

/* ---------------- Appearance ---------------- */

html.bbb-bnm-height-custom .bbb-bottom-nav {
	height: var( --bbb-bnm-height );
}

html.bbb-bnm-bg-custom .bbb-bottom-nav {
	background: var( --bbb-bnm-bg );
}

html.bbb-bnm-radius-custom .bbb-bottom-nav {
	border-radius: var( --bbb-bnm-radius ) var( --bbb-bnm-radius ) 0 0;
}

html.bbb-bnm-shadow-custom .bbb-bottom-nav {
	box-shadow: var( --bbb-bnm-shadow );
}

html.bbb-bnm-blur-custom .bbb-bottom-nav {
	backdrop-filter: var( --bbb-bnm-blur, none );
	-webkit-backdrop-filter: var( --bbb-bnm-blur, none );
}

html.bbb-bnm-no-top-border .bbb-bottom-nav {
	border-top: none;
}

html.bbb-bnm-no-safe-area .bbb-bottom-nav {
	padding-bottom: 8px;
}

/* ---------------- Menu item icon / label overrides ---------------- */

html.bbb-bnm-icon-size-custom .bbb-bottom-nav-item .bbb-bn-icon {
	font-size: var( --bbb-bnm-icon-size );
}

html.bbb-bnm-font-size-custom .bbb-bottom-nav-item .bbb-bn-label {
	font-size: var( --bbb-bnm-font-size );
}

html.bbb-bnm-font-weight-custom .bbb-bottom-nav-item .bbb-bn-label {
	font-weight: var( --bbb-bnm-font-weight );
}

html.bbb-bnm-icon-pos-left .bbb-bn-pill {
	flex-direction: row;
	gap: 6px;
}

html.bbb-bnm-label-pos-right .bbb-bn-pill {
	flex-direction: row;
	gap: 6px;
}

html.bbb-bnm-label-hidden .bbb-bottom-nav-item .bbb-bn-label {
	display: none;
}

/* ---------------- Active pill overrides ---------------- */

html.bbb-bnm-active-bg-custom .bbb-bottom-nav-item.active .bbb-bn-pill {
	background: var( --bbb-bnm-active-bg );
}

html.bbb-bnm-active-text-custom .bbb-bottom-nav-item.active .bbb-bn-label {
	color: var( --bbb-bnm-active-text );
}

html.bbb-bnm-active-icon-custom .bbb-bottom-nav-item.active .bbb-bn-icon {
	color: var( --bbb-bnm-active-icon );
}

html.bbb-bnm-active-radius-custom .bbb-bottom-nav-item.active .bbb-bn-pill {
	border-radius: var( --bbb-bnm-active-radius );
}

html.bbb-bnm-active-size-custom .bbb-bottom-nav-item.active .bbb-bn-pill {
	width: var( --bbb-bnm-active-width );
	height: var( --bbb-bnm-active-height );
}

html.bbb-bnm-active-shadow-custom .bbb-bottom-nav-item.active .bbb-bn-pill {
	box-shadow: var( --bbb-bnm-active-shadow );
}

/* Active-state animations — each opt-in, only one active at a time via JS. */
html.bbb-bnm-anim-fade .bbb-bottom-nav-item.active .bbb-bn-pill {
	animation: bbbBnmFade var( --bbb-bnm-transition, 300ms ) ease;
}
@keyframes bbbBnmFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

html.bbb-bnm-anim-slide .bbb-bottom-nav-item.active .bbb-bn-pill {
	animation: bbbBnmSlide var( --bbb-bnm-transition, 300ms ) ease;
}
@keyframes bbbBnmSlide {
	from { transform: translateY(6px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

html.bbb-bnm-anim-scale .bbb-bottom-nav-item.active .bbb-bn-pill {
	animation: bbbBnmScale var( --bbb-bnm-transition, 300ms ) ease;
}
@keyframes bbbBnmScale {
	from { transform: scale(.85); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* ---------------- Z-index / transition ---------------- */

html.bbb-bnm-zindex-custom .bbb-bottom-nav {
	z-index: var( --bbb-bnm-zindex );
}

html.bbb-bnm-transition-custom .bbb-bottom-nav-item .bbb-bn-pill {
	transition-duration: var( --bbb-bnm-transition );
}

/* ---------------- Quote Banner ---------------- */

.bbb-bnm-quote-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var( --bbb-bnm-quote-bottom-offset, 68px );
	height: var( --bbb-bnm-quote-height, 36px );
	background: var( --bbb-bnm-quote-bg, #A31621 );
	color: var( --bbb-bnm-quote-color, #ffffff );
	font-size: var( --bbb-bnm-quote-font-size, 12px );
	display: flex;
	align-items: center;
	overflow: hidden;
	z-index: 99997;
	transition: transform 250ms ease, opacity 250ms ease;
}

.bbb-bnm-quote-banner.bbb-bnm-quote-scrolled-hidden {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}

.bbb-bnm-quote-banner .bbb-bnm-quote-track {
	display: inline-flex;
	white-space: nowrap;
	will-change: transform;
	animation: bbbBnmMarquee var( --bbb-bnm-quote-speed, 20s ) linear infinite;
	padding-left: 100%;
}

.bbb-bnm-quote-banner .bbb-bnm-quote-track span {
	padding-right: 60px;
}

@keyframes bbbBnmMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

@media (min-width: 900px) {
	.bbb-bnm-quote-banner {
		display: none;
	}
}

/* Reserve extra space so page content never sits under the quote banner
   when it's shown (mobile only; matches app.css's own reserved-space
   pattern for .bbb-bottom-nav directly above this rule set). */
@media (max-width: 899px) {
	html.bbb-bnm-quote-enabled .app-main {
		padding-bottom: calc(24px + 68px + var( --bbb-bnm-quote-height, 36px ) + env(safe-area-inset-bottom));
	}
}


/* Optional Dashboard-only visibility: controlled by Bottom Navigation Manager. */
html.bbb-bnm-non-dashboard-hidden .bbb-bottom-nav,
html.bbb-bnm-non-dashboard-hidden .bbb-more-sheet {
	display: none !important;
}