/* ==========================================================================
   Banshkhali Blood Bank — Design Tokens & Core Styles
   "Donor Card" visual identity — a premium, fintech-grade system built
   around the idea of a blood-donor ID: dark garnet gradients, glass
   surfaces, squircle icon chips, tabular mono numerals for data, and a
   single signature motif (the hero as a membership card) carried
   consistently through every screen. Every selector below matches the
   markup already rendered by app.js / views/*.js exactly — this is a
   skin change only; no structural markup, routes, or logic are touched.
   ========================================================================== */

:root {
	/* ---- Palette — 6 named hex values ---- */
	--bbb-midnight:     #15111D;   /* card/hero base — near-black plum */
	--bbb-midnight-2:   #2B1830;   /* card/hero gradient partner */
	--bbb-garnet:       #D1264E;   /* primary brand red — refined claret, not fire-engine */
	--bbb-garnet-deep:  #7A1030;   /* pressed / gradient end */
	--bbb-garnet-bright:#FF5C7A;   /* glow / highlight accent, used sparingly */
	--bbb-blush:        #FBE9EE;   /* soft tint for chips + selected states */
	--bbb-porcelain:    #F7F4F0;   /* app canvas — warm off-white, not sterile white */
	--bbb-cloud:        #EFE8E2;   /* secondary surface / track color */
	--bbb-ink:          #191320;   /* primary text — warm near-black */
	--bbb-gold:         #C29A55;   /* premium accent — badges, chip glyph, dividers */
	--bbb-whatsapp:     #25D366;   /* official WhatsApp brand green — Donor Card WhatsApp button only */
	--bbb-whatsapp-deep:#128C7E;   /* WhatsApp brand teal-green — pressed state */

	/* Legacy token names kept as aliases so nothing elsewhere can break */
	--bbb-ink-navy:    var(--bbb-midnight);
	--bbb-deep-teal:   var(--bbb-midnight-2);
	--bbb-blood-red:   var(--bbb-garnet);
	--bbb-blood-red-d: var(--bbb-garnet-deep);
	--bbb-soft-pink:   var(--bbb-blush);
	--bbb-soft-pink-d: #F3D3DC;
	--bbb-sand:        var(--bbb-cloud);
	--bbb-warm-white:  #FFFFFF;
	--bbb-muted-gold:  var(--bbb-gold);
	--bbb-ink-60:      rgba(25, 19, 32, 0.58);
	--bbb-ink-15:      rgba(25, 19, 32, 0.09);

	/* ---- Light theme surface mapping ---- */
	--bg:             var(--bbb-porcelain);
	--surface:        var(--bbb-cloud);
	--surface-raised: #FFFFFF;
	--text:           var(--bbb-ink);
	--text-muted:     rgba(25, 19, 32, 0.52);
	--border:         rgba(25, 19, 32, 0.08);
	--accent:         var(--bbb-garnet);
	--accent-strong:  var(--bbb-garnet-deep);
	--accent-soft:    var(--bbb-blush);

	/* ---- Type scale ----
	   Display + body both ride on Manrope (already enqueued) at
	   different weights, so no additional font requests are introduced;
	   Hind Siliguri stays for Bengali copy, JetBrains Mono is promoted
	   to a first-class "data" face — blood groups, stat values, IDs and
	   timestamps read like ledger entries, the fintech signature. */
	--font-bn: 'Hind Siliguri', system-ui, sans-serif;
	--font-en: 'Manrope', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* ---- Card system — squircle radii, layered ambient shadows ---- */
	--radius-sm: 14px;
	--radius-md: 22px;
	--radius-lg: 30px;
	--shadow-card: 0 1px 2px rgba(25, 19, 32, .04), 0 18px 34px -22px rgba(25, 19, 32, .22);
	--shadow-card-hover: 0 2px 4px rgba(25, 19, 32, .05), 0 22px 40px -18px rgba(25, 19, 32, .26);
	--shadow-float: 0 16px 32px -10px rgba(209, 38, 78, .45), 0 4px 12px -4px rgba(209, 38, 78, .22);
	--shadow-card-dk: 0 1px 2px rgba(0,0,0,.3), 0 20px 40px -20px rgba(0,0,0,.55);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--ease-smooth: cubic-bezier(.4, 0, .2, 1);

	/* Dashboard Manager > Appearance — set at runtime by app.js
	   (applyAppearance()) from Blood Bank > Dashboard Manager settings.
	   These defaults exactly reproduce this look when nothing has been
	   configured yet. */
	--bbb-card-radius: var(--radius-md);
	--bbb-spacing-scale: 1;
	--bbb-card-shadow: var(--shadow-card);
	--bbb-page-bg: var(--bg);

	/* ---- Global Theme System — semantic surface/UI tokens ----
	   Added as a future-proof extension of the surface mapping above.
	   Every token here is DEFINED IN TERMS OF the existing --bg /
	   --surface / --surface-raised / --text / --border tokens, so
	   Light Mode is byte-for-byte unchanged. New components should be
	   built with these tokens instead of hard-coded colors — see the
	   "Theming Rule" note in the Dark Mode block below. */

	/* Surface hierarchy: page -> section -> card -> nested card. */
	--surface-1:        var(--bg);            /* page / section background */
	--surface-2:        var(--surface);       /* card background */
	--surface-3:        var(--surface-raised);/* nested / inner card background */
	--surface-elevated: var(--surface-raised);/* modals, sheets, popovers */

	/* Aliases matching common naming, so any new component/admin
	   screen can use either vocabulary without a second token system. */
	--app-bg:        var(--bg);
	--page-bg:       var(--bg);
	--card-bg:       var(--surface-2);
	--card-inner-bg: var(--surface-3);
	--header-bg:     var(--surface-raised);
	--nav-bg:        var(--surface-raised);
	--input-bg:      var(--surface-raised);
	--modal-bg:      var(--surface-elevated);
	--text-primary:  var(--text);
	--divider-color: var(--border);
	--border-color:  var(--border);
	--shadow-color:  rgba(25, 19, 32, .18);

	/* Dark-safe overlay for admin-configurable background IMAGES
	   (Background Manager, header/hero background images, etc.).
	   Light Mode adds no tint; Dark Mode (below) adds a readability
	   scrim WITHOUT touching the image itself. */
	--background-overlay: transparent;
}

[data-theme="dark"] {
	--bg:             var(--bbb-midnight);
	--surface:        #201A29;
	--surface-raised: #26202F;
	--text:           #F4EFEA;
	--text-muted:     rgba(244, 239, 234, 0.58);
	--border:         rgba(255, 255, 255, 0.08);
	--accent-soft:    rgba(209, 38, 78, 0.2);
	--shadow-card:    var(--shadow-card-dk);

	/* ---- Global Theme System — Dark Mode surface hierarchy ----
	   Three distinguishable elevations (page < card < nested-card),
	   plus one more "elevated" step for anything that floats above
	   the page (modals/sheets/popovers), so a card containing another
	   card is never two identical black rectangles. */
	--surface-1:        var(--bbb-midnight);  /* page */
	--surface-2:        #201A29;              /* card (== --surface) */
	--surface-3:        #2B2436;              /* nested/inner card — one step lighter than --surface-2 */
	--surface-elevated: #322A3F;              /* modal/sheet — one step lighter still */

	--app-bg:        var(--surface-1);
	--page-bg:       var(--surface-1);
	--card-bg:       var(--surface-2);
	--card-inner-bg: var(--surface-3);
	--header-bg:     var(--surface-2);
	--nav-bg:        var(--surface-2);
	--input-bg:      var(--surface-3);
	--modal-bg:      var(--surface-elevated);
	--text-primary:  var(--text);
	--divider-color: var(--border);
	--border-color:  var(--border);
	--shadow-color:  rgba(0, 0, 0, .45);

	--background-overlay: rgba(11, 8, 16, .38);
}

/* ---- THEMING RULE FOR ALL FUTURE COMPONENTS ----
   Never hard-code a theme-dependent surface/text color in a new
   card/section/widget. Use the semantic tokens above, e.g.:
     .my-new-card       { background: var(--card-bg); color: var(--text-primary); }
     .my-new-card-inner { background: var(--card-inner-bg); }
   This guarantees the component is Dark-Mode-ready with zero extra
   CSS. Brand/status/gradient colors (blood red, blood-group colors,
   success/warning/danger, the Hero/Emergency card gradients) are
   intentionally NOT theme tokens — they stay constant across both
   themes; only the surfaces AROUND them should shift. */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bbb-page-bg, var(--bg));
	color: var(--text);
	font-family: var(--font-en);
	-webkit-font-smoothing: antialiased;
	transition: background-color .25s ease, color .25s ease;
}

/* Dashboard Manager > Appearance: "Animations" off disables the FAB
   pulse, hero entrance, and card ripple transitions site-wide. */
html.bbb-no-anim .fab-emergency,
html.bbb-no-anim .db-hero-anim-fade,
html.bbb-no-anim .db-hero-anim-slide {
	animation: none !important;
}

body[lang="bn"], .bn-text {
	font-family: var(--font-bn);
}

h1, h2, h3, .app-brand {
	font-family: var(--font-en);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}

.stat-number {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Premium, consistent touch feedback + smooth motion defaults. */
.card, .btn, .icon-btn, .service-card, .db-quicklink-card {
	transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease-smooth), background-color .2s var(--ease-smooth), border-color .2s var(--ease-smooth);
}
.btn:active, .icon-btn:active {
	transform: scale(.96);
}

/* Smooth page transition — a gentle fade + rise applied to the view
   container every time the router mounts a new screen. */
@keyframes bbbViewEnter {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.bbb-view-enter {
	animation: bbbViewEnter .34s var(--ease-smooth) both;
}
html.bbb-no-anim .bbb-view-enter {
	animation: none !important;
}

/* ---------------------------------------------------------------------- */
/* App shell */
/* ---------------------------------------------------------------------- */

.app-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* The Header is deliberately independent of the page Background Manager
   and of the --bg/--border/--text tokens above. Blood Bank > Dashboard
   Manager > Header (Light Mode Header / Dark Mode Header) controls every
   value below via CSS custom properties set at runtime by
   applyHeaderAppearance() in assets/js/app.js — see that function for how
   Background Color / Gradient / Image, Opacity, Blur, Text Color, Icon
   Color, Border Color, and Shadow are computed per theme. The fallback
   value in each var() reproduces this theme's original look exactly, so
   nothing changes visually until an admin edits Header settings. */
.app-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--bbb-header-bg, color-mix(in srgb, var(--bg) 72%, transparent));
	backdrop-filter: var(--bbb-header-blur, blur(22px) saturate(180%));
	-webkit-backdrop-filter: var(--bbb-header-blur, blur(22px) saturate(180%));
	border-bottom: 1px solid var(--bbb-header-border, var(--border));
	box-shadow: var(--bbb-header-shadow, 0 1px 0 var(--border), 0 12px 28px -24px rgba(25, 19, 32, 0.3));
	color: var(--bbb-header-text, var(--text));
}

/* Theme Toggle + Notification Button icon color — scoped to the header
   only, so the identical .icon-btn used elsewhere (e.g. the "More" sheet
   close button) is completely unaffected. */
.app-header .icon-btn {
	color: var(--bbb-header-icon, var(--text));
}

.app-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 17.5px;
}

.app-brand .drop {
	width: 20px;
	height: 20px;
	color: #fff;
}

/* The brand mark sits inside a small gradient "coin" — the same garnet
   gradient used on the hero card and primary buttons, so the emblem
   reads as the one consistent mark of the identity everywhere it appears. */
.app-brand > .drop,
.app-brand > svg.drop {
	background: linear-gradient(145deg, var(--bbb-garnet-bright), var(--accent-strong));
	border-radius: 11px;
	padding: 7px;
	width: 34px;
	height: 34px;
	box-shadow: 0 6px 14px -6px rgba(209, 38, 78, .55);
}

.app-logo {
	width: 34px;
	height: 34px;
	border-radius: 11px;
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 6px 14px -6px rgba(25, 19, 32, .35);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.icon-btn {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: var(--surface-raised);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	position: relative;
	box-shadow: var(--shadow-card);
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: .02em;
}
.icon-btn:hover {
	background: var(--surface);
	border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

/* ---------------------------------------------------------------
   Announcement bell — notification badge + ring animation.
   Mobile-first: sized in px so it never scales with a parent font
   change, clamped so long text ("9+") never overflows the circle,
   and re-centered with translate() so it can't drift off the bell
   corner at any viewport width.
------------------------------------------------------------------ */
.bbb-bell-btn {
	overflow: visible;
}

.bbb-bell-icon {
	transform-origin: 50% 4px; /* pivot near the top of the bell, like a real clapper swing */
}

.icon-btn .bbb-notif-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #FF3B30;
	color: #fff;
	border: 1.5px solid var(--bg);
	box-shadow: 0 2px 6px rgba(255, 59, 48, .45), 0 0 0 1px rgba(0, 0, 0, .04);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	white-space: nowrap;
}

@media (min-width: 600px) {
	.icon-btn .bbb-notif-badge {
		min-width: 20px;
		height: 20px;
		font-size: 11px;
		top: -5px;
		right: -5px;
	}
}

.icon-btn .bbb-notif-badge.hidden {
	display: none;
}

/* Badge pop-in — plays once per new-arrival, never loops. */
@keyframes bbb-badge-pop {
	0%   { transform: scale( 0 ); }
	55%  { transform: scale( 1.25 ); }
	75%  { transform: scale( .92 ); }
	100% { transform: scale( 1 ); }
}
.bbb-notif-badge.bbb-badge-pop {
	animation: bbb-badge-pop .5s cubic-bezier( .34, 1.56, .64, 1 );
}

/* Bell ring — a quick back-and-forth swing, plays once per new
   arrival then stops (no infinite loop per requirements). */
@keyframes bbb-bell-ring {
	0%, 100% { transform: rotate( 0deg ); }
	15%  { transform: rotate( 14deg ); }
	30%  { transform: rotate( -12deg ); }
	45%  { transform: rotate( 9deg ); }
	60%  { transform: rotate( -6deg ); }
	75%  { transform: rotate( 3deg ); }
	90%  { transform: rotate( -1deg ); }
}
.bbb-bell-btn.bbb-bell-ring .bbb-bell-icon {
	animation: bbb-bell-ring .65s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.bbb-notif-badge.bbb-badge-pop,
	.bbb-bell-btn.bbb-bell-ring .bbb-bell-icon {
		animation: none;
	}
}

.app-body {
	flex: 1;
	display: flex;
}

/* Desktop left sidebar */
.app-sidebar {
	width: 248px;
	flex-shrink: 0;
	padding: 22px 14px;
	border-right: 1px solid var(--border);
	display: none;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-weight: 600;
	font-size: 14.5px;
	margin-bottom: 4px;
}

.nav-item.active {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
	color: #fff;
	box-shadow: 0 10px 20px -12px rgba(209, 38, 78, .55);
}

.app-main {
	flex: 1;
	/* Normal spacing only. Clearance for the floating FAB lives on
	   .bbb-branding-banner below (see "Global Branding Banner"), since
	   the banner — not raw page content — is the flow element that
	   actually sits just above that fixed element. */
	padding: 20px 16px 24px;
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
}

@media (min-width: 900px) {
	.app-sidebar { display: block; }
	.app-main { padding-bottom: 40px; margin: 0; max-width: none; }
}

/* ---------------------------------------------------------------------- */
/* Services Grid — squircle icon-chip quick menu                          */
/* ---------------------------------------------------------------------- */

.services-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 3px;
	row-gap: 20px;
	margin-bottom: 24px;
}

/* Nagad-style launcher item — the clickable item itself is transparent;
   only the icon box below reads as a surface. Icon sits above the
   label, both centered, no tall card background/border/shadow. */
.service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	aspect-ratio: auto;
	height: auto;
	min-height: 0;
	width: 100%;
	padding: 1px;
	background: transparent;
	border: none;
	border-radius: 18px;
	box-shadow: none;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	will-change: transform;
	transition: transform .15s var(--ease-spring);
	position: relative;
	overflow: visible;
}

.service-card:active {
	transform: scale(.93);
}

/* "Active" (current route, e.g. reused .service-card markup elsewhere
   in the app) reads on the icon box itself now, since the item has no
   surface of its own to tint. */
.service-card.active .service-icon-frame {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 3px var(--accent-soft), 0 14px 28px -16px rgba(209, 38, 78, .35);
}

@media (hover: hover) {
	.service-card:hover .service-icon-frame {
		transform: translateY(-3px);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 16px rgba(255, 77, 109, .40), 0 18px 34px rgba(193, 18, 63, .35), 0 34px 55px rgba(193, 18, 63, .22);
	}
}

/* Squircle icon chip — every icon box in the app (services, quick
   links, stats, content cards) shares this same rounded-square
   treatment. Sized to the large "app-launcher" icon range (Nagad-style
   service grid reference), responsive via clamp() so it scales cleanly
   from 320px phones up to tablets without a wall of breakpoints, with
   a soft top-light glass highlight so every icon — emoji, uploaded
   image, Font Awesome, or built-in SVG — reads with the same finish. */
.service-icon-frame {
	width: clamp(70px, 19.5vw, 136px);
	height: clamp(70px, 19.5vw, 136px);
	aspect-ratio: 1 / 1;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	background: transparent;
	border: 2px solid #e86b83;
	box-shadow: 0 8px 22px rgba(225, 61, 91, .16), inset 0 1px 0 rgba(255,255,255,.9);
	overflow: hidden;
	position: relative;
	z-index: 3;
	transition: transform 350ms var(--ease-smooth), box-shadow 350ms var(--ease-smooth);
}

.service-icon {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	border-radius: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(30px, 8vw, 54px);
	line-height: 1;
	flex-shrink: 0;
	color: #d71935;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.service-icon svg { width: 48%; height: 48%; }
.service-icon i { font-size: clamp(27px, calc(10.75vw - 5.375px), 29px); line-height: 1; }
.service-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
	border: 0;
	outline: 0;
	box-shadow: none;
	display: block;
}
.service-icon::before { display: none !important; }

.service-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.25;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	position: relative;
	z-index: 3;
}

@media (max-width: 360px) {
	.service-card { gap: 7px; }
	.service-icon-frame { width: 72px; height: 72px; border-radius: 18px; }
	.service-label { font-size: 12px; font-weight: 700; }
}

@media (min-width: 900px) {
	.services-grid { grid-template-columns: repeat(4, minmax(0, 160px)); column-gap: 16px; row-gap: 24px; }
	.service-icon-frame { width: 136px; height: 136px; border-radius: 24px; }
	.service-icon svg { width: 62%; height: 62%; }
	.service-label { font-size: 15px; font-weight: 700; }
	.dcp-actions .btn { font-size: 13px; padding: 11px 10px; }
}

/* ---------------------------------------------------------------------- */
/* Global Branding Banner (Blood Bank > Branding Banner)                   */
/* ---------------------------------------------------------------------- */
/* The one reusable, sitewide banner rendered by the persistent app shell  */
/* (assets/js/app.js -> shellHtml()) directly above the bottom nav on      */
/* every logged-in screen. Colors/typography/spacing below come from      */
/* CSS custom properties printed server-side by                           */
/* BrandingBanner::inline_css() (see functions.php); the values here are   */
/* fallbacks only, matching the reference design out of the box.          */

.bbb-branding-banner {
	position: relative;
	z-index: 5;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--bbb-banner-height, auto);
	margin: var(--bbb-banner-margin, 14px 14px 0);
	/* The floating emergency FAB is deliberately allowed to overlap the
	   banner slightly — that's how a floating action button is meant to
	   behave, the same way it already overlapped ordinary page content
	   before this banner existed; the banner is not interactive, so
	   nothing is ever hidden "under" it in a way that matters. */
	margin-bottom: calc(14px + env(safe-area-inset-bottom));
	padding: var(--bbb-banner-padding, 20px 22px);
	border-radius: var(--bbb-banner-radius, 24px);
	background: var(--bbb-banner-bg, linear-gradient(135deg, #3a0c14 0%, #8a1626 120%));
	box-shadow: var(--bbb-banner-shadow, 0 18px 40px -18px rgba(120, 10, 26, .55));
	opacity: var(--bbb-banner-opacity, 1);
	color: var(--bbb-banner-text, #fff);
	font-family: var(--bbb-banner-font-family, inherit);
	font-size: var(--bbb-banner-font-size, 16px);
	font-weight: var(--bbb-banner-font-weight, 700);
}

@media (min-width: 900px) {
	.bbb-branding-banner { margin-bottom: 22px; }
}

/* Background Image (optional) — sits under the gradient/solid color as a
   soft, low-opacity texture; never replaces it outright, so a missing
   image never breaks the banner's legibility. */
.bbb-branding-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--bbb-banner-bg-image, none);
	background-size: cover;
	background-position: center;
	opacity: .28;
	pointer-events: none;
}

/* ECG heartbeat line — a lightweight, repeating SVG pattern spanning the
   banner's full width. Toggled entirely off (no element, no cost) unless
   the admin enables "ECG Heartbeat Line". */
.bbb-branding-banner.bbb-banner-ecg::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 34px;
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
	opacity: .22;
	background-repeat: repeat-x;
	background-size: 220px 34px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='34' viewBox='0 0 220 34'%3E%3Cpath d='M0 17 H60 L72 4 L84 30 L96 10 L104 17 H220' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bbb-banner-icon {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bbb-banner-icon-left {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .08);
	color: #fff;
}
.bbb-banner-icon-left svg { width: 20px; height: 20px; }

.bbb-banner-icon-right {
	width: 52px;
	height: 52px;
}
.bbb-banner-icon-right svg,
.bbb-banner-icon-right .bbb-banner-icon-img {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}
.bbb-banner-icon-img { object-fit: contain; }

.bbb-banner-copy {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	text-align: center;
}

.bbb-banner-title {
	margin: 0 0 2px;
	font-size: .8em;
	font-weight: 600;
	opacity: .85;
}

.bbb-banner-slogan {
	margin: 0;
	line-height: 1.45;
}

.bbb-banner-text { color: var(--bbb-banner-text, #fff); }
.bbb-banner-highlight { color: var(--bbb-banner-highlight, #ffd66b); font-weight: 800; }

/* Visibility (Blood Bank > Branding Banner > Visibility) */
@media (min-width: 900px) {
	.bbb-branding-banner.bbb-banner-hide-desktop { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
	.bbb-branding-banner.bbb-banner-hide-tablet { display: none; }
}
@media (max-width: 599px) {
	.bbb-branding-banner.bbb-banner-hide-mobile { display: none; }
}

/* Animation (Blood Bank > Branding Banner > Animation) */
.bbb-banner-anim-fade { animation: bbbBannerFade .5s ease both; }
.bbb-banner-anim-pulse { animation: bbbBannerPulse 3.2s ease-in-out infinite; }
.bbb-banner-anim-heartbeat { animation: bbbBannerHeartbeat 2.4s ease-in-out infinite; }

@keyframes bbbBannerFade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: var(--bbb-banner-opacity, 1); transform: translateY(0); }
}
@keyframes bbbBannerPulse {
	0%, 100% { box-shadow: var(--bbb-banner-shadow, 0 18px 40px -18px rgba(120, 10, 26, .55)); }
	50%      { box-shadow: 0 20px 46px -14px rgba(120, 10, 26, .75); }
}
@keyframes bbbBannerHeartbeat {
	0%, 100% { transform: scale(1); }
	10%      { transform: scale(1.015); }
	20%      { transform: scale(1); }
}

@media (max-width: 400px) {
	.bbb-branding-banner { font-size: calc(var(--bbb-banner-font-size, 16px) - 1px); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.bbb-banner-anim-fade,
	.bbb-banner-anim-pulse,
	.bbb-banner-anim-heartbeat { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Premium Slim Quote Banner override                                     */
/* ---------------------------------------------------------------------- */
/* Only the Quote Banner's look/position is touched here — the header,    */
/* cards, dashboard and every other component above are untouched. This   */
/* turns the banner into a fixed, ultra-thin (34px) strip pinned directly */
/* above the bottom nav on every page, on every screen size, so it never  */
/* drifts on scroll and never overlaps or hides beneath the nav.          */
/*                                                                        */
/* #bbb-branding-banner (the element's id) has higher specificity than    */
/* the .bbb-branding-banner class rules above, and every property here    */
/* carries !important, so this slim style always wins even when Blood     */
/* Bank > Branding Banner has admin-configured colors/spacing/fonts.      */
#bbb-branding-banner {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: calc(68px + env(safe-area-inset-bottom)) !important;
	width: 100% !important;
	height: 34px !important;
	min-height: 34px !important;
	max-height: 34px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border-radius: 0 !important;
	background: #5b0d17 !important;
	background-image: none !important;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, .12) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	z-index: 99998 !important; /* one below the bottom nav's 99999, so the nav always wins if they ever touch */
	/* Bottom-of-page show/hide (assets/js/app.js toggles the
	   .bbb-banner-scroll-visible class only when the user has scrolled
	   all the way to the bottom of the page). Hidden by default on load
	   and everywhere on the page (top/middle) — translateY(100%) tucks
	   it directly behind the bottom nav (lower z-index + nav's opaque
	   background fully occludes it there) and opacity: 0 fades it out,
	   so the nav itself never has to move for the banner to appear or
	   disappear and no layout shift/white gap is ever introduced. */
	transform: translateY(100%) !important;
	opacity: 0 !important;
	transition: transform .3s ease, opacity .3s ease !important;
	will-change: transform, opacity;
}

#bbb-branding-banner.bbb-banner-scroll-visible {
	transform: translateY(0) !important;
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	#bbb-branding-banner { transition: none !important; }
}

/* Side icons + optional title line are dropped for the slim single-line
   bar; the copy becomes the entire strip. */
#bbb-branding-banner .bbb-banner-icon-left,
#bbb-branding-banner .bbb-banner-icon-right,
#bbb-branding-banner .bbb-banner-title {
	display: none !important;
}

/* Background-image texture + ECG heartbeat pattern hidden so the strip
   stays a flat, solid dark blood-red as specified. */
#bbb-branding-banner::before,
#bbb-branding-banner::after {
	content: none !important;
	display: none !important;
}

#bbb-branding-banner .bbb-banner-copy {
	flex: none !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
	text-align: center !important;
}

#bbb-branding-banner .bbb-banner-slogan {
	margin: 0 !important;
	line-height: 34px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
}

/* Decorative blood-drop prefix requested for the slim copy. */
#bbb-branding-banner .bbb-banner-slogan::before {
	content: "🩸 ";
}

#bbb-branding-banner .bbb-banner-text,
#bbb-branding-banner .bbb-banner-highlight {
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* Desktop (>=900px): the mobile bottom nav is hidden there (see
   .bbb-bottom-nav rule), so the slim banner pins to the very bottom of
   the viewport instead of floating 68px above a nav that doesn't exist. */
@media (min-width: 900px) {
	#bbb-branding-banner { bottom: 0 !important; }
}

/* Reserve room so page content never sits underneath the fixed slim
   banner — stacked on top of the bottom-nav clearance already reserved
   on .app-main above. */
@media (max-width: 899px) {
	.app-main { padding-bottom: calc(24px + 68px + 34px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
	.app-main { padding-bottom: calc(40px + 34px); }
}

/* More Menu sits above the mobile bottom navigation and slim banner. */
.bbb-more-sheet {
	bottom: calc(68px + 34px + env(safe-area-inset-bottom) + 8px) !important;
}



/* ====================================================================== */
/* More Menu — native Android-style bottom sheet + compact service tiles */
.bbb-more-sheet {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(68px + 34px + env(safe-area-inset-bottom) + 8px);
	width: auto;
	max-width: 620px;
	max-height: min(58vh, 540px);
	margin: 0 auto;
	padding: 9px 11px 13px;
	box-sizing: border-box;
	background: rgba(255,255,255,.985);
	border: 1px solid rgba(226,215,212,.92);
	isolation: isolate;
	border-radius: 28px 28px 24px 24px;
	box-shadow: 0 18px 48px rgba(37,20,22,.18), 0 4px 18px rgba(163,22,33,.08);
	overflow: hidden auto;
	-webkit-overflow-scrolling: touch;
	transform: translateY(calc(100% + 30px));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .28s cubic-bezier(.22,.8,.25,1), opacity .22s ease, visibility .22s ease;
	z-index: 100001;
}

/* Backdrop is a separate visual layer; it never tints the white sheet. */
.bbb-more-sheet::before {
	content: "";
	position: fixed;
	left: -100vw;
	right: -100vw;
	top: -100vh;
	bottom: -100vh;
	background: rgba(27,17,20,.16);
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
	pointer-events: none;
	z-index: -1;
}

.bbb-more-sheet.open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.bbb-more-sheet-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 3px 7px;
}

.bbb-more-sheet-handle {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 42px;
	height: 4px;
	border-radius: 99px;
	background: #d7cfcd;
	transform: translateX(-50%);
}

.bbb-more-sheet-title-wrap { flex: 1; min-width: 0; padding-top: 7px; }
.bbb-more-sheet-title {
	font-size: 21px;
	font-weight: 900;
	line-height: 1.15;
	color: #241614;
}
.bbb-more-sheet-subtitle {
	margin-top: 3px;
	font-size: 11.5px;
	font-weight: 600;
	color: #8b7772;
	line-height: 1.35;
}

.bbb-more-sheet-close {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #fff7f5;
	color: #a31621;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	box-shadow: inset 0 0 0 1px #f0d8d2;
	cursor: pointer;
}

.bbb-more-sheet-divider {
	height: 1px;
	margin: 1px 2px 10px;
	background: #eee2df;
}

.bbb-more-sheet-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 7px 6px;
	padding: 0 1px 2px;
}

.bbb-more-sheet-item {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 82px;
	padding: 7px 3px 6px;
	border-radius: 16px;
	text-decoration: none !important;
	color: #241614 !important;
	background: #fff;
	border: 1px solid #eee4e1;
	box-shadow: 0 3px 10px rgba(43,28,30,.045);
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
	-webkit-tap-highlight-color: transparent;
}
.bbb-more-sheet-item:active {
	transform: scale(.965);
	background: #fff8f6;
	box-shadow: 0 2px 6px rgba(43,28,30,.06);
}

.bbb-more-sheet-icon-wrap {
	width: 43px;
	height: 43px;
	border-radius: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg,#fff9f7,#f9efed);
	border: 1px solid #f0dcd7;
	box-shadow: 0 2px 7px rgba(163,22,33,.055);
	color: #a31621;
	font-size: 19px;
	flex: 0 0 43px;
	overflow: hidden;
}
.bbb-more-sheet-icon-wrap img,
.bbb-more-sheet-icon-wrap .bbb-bn-icon-img {
	width: 29px;
	height: 29px;
	object-fit: contain;
}
.bbb-more-sheet-icon-wrap i { font-size: 19px; line-height: 1; }
.bbb-more-sheet-icon-wrap .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 20px;
	font-family: dashicons;
}
.bbb-more-icon-gold { color: #c48a18 !important; }
.bbb-more-icon-green { color: #2f7b5b !important; }
.bbb-more-icon-blue { color: #3b6ea8 !important; }
.bbb-more-icon-neutral { color: #a31621 !important; }

.bbb-more-native-symbol {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	font-size:21px;
	line-height:1;
	font-family:"Noto Color Emoji","Segoe UI Emoji",sans-serif;
}
.bbb-more-icon-gold .bbb-more-native-symbol, .bbb-more-native-symbol.bbb-more-icon-gold { color:#c48a18; }
.bbb-more-icon-green .bbb-more-native-symbol, .bbb-more-native-symbol.bbb-more-icon-green { color:#2f7b5b; }
.bbb-more-icon-blue .bbb-more-native-symbol, .bbb-more-native-symbol.bbb-more-icon-blue { color:#3b6ea8; }
.bbb-more-icon-neutral .bbb-more-native-symbol, .bbb-more-native-symbol.bbb-more-icon-neutral { color:#a31621; }
.bbb-more-sheet-label {
	width: 100%;
	min-height: 26px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-align: center;
	font-family: 'Noto Sans Bengali','Hind Siliguri',sans-serif;
	font-size: 10.8px;
	font-weight: 800;
	line-height: 1.28;
	color: #2b201e;
}
.bbb-more-sheet-empty {
	grid-column: 1/-1;
	padding: 28px 10px;
	text-align: center;
	font-size: 14px;
	color: #8b7772;
}

@media (max-width: 420px) {
	.bbb-more-sheet {
		left: 9px;
		right: 9px;
		bottom: calc(68px + 34px + env(safe-area-inset-bottom) + 6px);
		padding: 8px 9px 11px;
		border-radius: 25px 25px 22px 22px;
		max-height: 60vh;
	}
	.bbb-more-sheet-grid { gap: 6px 5px; }
	.bbb-more-sheet-item { min-height: 78px; padding: 6px 2px 5px; border-radius: 14px; }
	.bbb-more-sheet-icon-wrap { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
	.bbb-more-sheet-icon-wrap img,
	.bbb-more-sheet-icon-wrap .bbb-bn-icon-img { width: 27px; height: 27px; }
	.bbb-more-sheet-label { font-size: 10.3px; min-height: 25px; }
	.bbb-more-sheet-title { font-size: 20px; }
	.bbb-more-sheet-subtitle { font-size: 11px; }
}

@media (min-width: 900px) {
	.bbb-more-sheet { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Cards, buttons, forms                                                   */
/* ---------------------------------------------------------------------- */

.card {
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: var(--bbb-card-radius, var(--radius-md));
	box-shadow: var(--bbb-card-shadow, var(--shadow-card));
	padding: calc(20px * var(--bbb-spacing-scale, 1));
	margin-bottom: calc(16px * var(--bbb-spacing-scale, 1));
}

.card:last-child {
	margin-bottom: 0;
}

/* Buttons — pill-shaped, gradient-filled primaries; the fintech "CTA"
   silhouette used everywhere an action is confirmed. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 22px;
	border-radius: 999px;
	border: none;
	font-weight: 700;
	font-size: 15px;
	width: 100%;
	letter-spacing: -.005em;
}

.btn-primary {
	background: linear-gradient(135deg, var(--bbb-garnet-bright) 0%, var(--accent) 48%, var(--accent-strong) 100%);
	color: #fff;
	box-shadow: var(--shadow-float);
}
.btn-primary:active { transform: scale(.97); box-shadow: 0 8px 18px -10px rgba(209, 38, 78, .45); }

.btn-ghost {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
}
.btn-ghost:active { transform: scale(.97); }

.field {
	margin-bottom: 14px;
}

.field label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.field input, .field select, .field textarea {
	width: 100%;
	padding: 13px 15px;
	border-radius: 16px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-size: 15px;
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--surface-raised);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.error-text {
	color: var(--accent);
	font-size: 12.5px;
	margin-top: 4px;
}

/* ---------------------------------------------------------------------- */
/* Signature motif: life-ring arc — used around verified avatars,
   the emergency action, and the auth hero. Sparingly, on purpose. */
/* ---------------------------------------------------------------------- */

.life-ring {
	position: relative;
	display: inline-flex;
}
.life-ring::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 3px dashed var(--bbb-gold);
	opacity: 0;
	transition: opacity .2s ease;
}
.life-ring.verified::before { opacity: 1; }

.donor-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--surface);
	border: 1px solid var(--border);
}

/* ---------------------------------------------------------------------- */
/* Donor / request cards */
/* ---------------------------------------------------------------------- */

.donor-card {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.blood-chip {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: linear-gradient(145deg, var(--bbb-garnet-bright), var(--accent-strong));
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	font-family: var(--font-mono);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.donor-meta { flex: 1; min-width: 0; }
.donor-name { font-weight: 700; font-size: 15px; }
.donor-sub { font-size: 12.5px; color: var(--text-muted); }

.availability-pill {
	font-size: 11px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 999px;
}
.availability-pill.online { background: rgba(31, 158, 85, 0.15); color: #1a7f37; }
.availability-pill.offline { background: var(--surface); color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* Premium donor search result card (Donor Search page only) */
/* ---------------------------------------------------------------------- */

.donor-card-premium {
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid var(--border);
	border-radius: 24px;
	box-shadow: var(--shadow-card);
	padding: 18px 18px 16px;
	margin-bottom: 16px;
	transition: transform .16s var(--ease-spring), box-shadow .16s ease, border-color .16s ease;
}

.donor-card-premium:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-hover);
	border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.donor-card-premium:active { transform: translateY(-1px) scale(.995); }

.dcp-fav {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--surface-raised);
	color: var(--bbb-gold);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
	transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.dcp-fav:active { transform: scale(.88); }
.dcp-fav[data-state="on"] { color: #fff; background: var(--bbb-gold); border-color: var(--bbb-gold); }
.dcp-fav-pulse { animation: dcp-fav-pop .32s var(--ease-spring); }

@keyframes dcp-fav-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28); }
	100% { transform: scale(1); }
}

/* Ripple — soft tap feedback from the exact touch point, clipped to the
   card's / button's own rounded corners via overflow:hidden above. */
.dcp-ripple {
	position: absolute;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	margin-top: -6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 22%, transparent);
	pointer-events: none;
	animation: dcp-ripple-out .5s ease-out;
}

@keyframes dcp-ripple-out {
	from { transform: scale(0);  opacity: .55; }
	to   { transform: scale(22); opacity: 0; }
}

.dcp-top {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-right: 34px;
}

.dcp-avatar {
	width: 68px;
	height: 68px;
	border-radius: 20px;
	object-fit: cover;
	background: var(--surface);
	border: 2px solid var(--surface-raised);
	display: block;
}

.dcp-online-dot {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #24a15b;
	border: 2.5px solid var(--surface-raised);
}

.dcp-heading { flex: 1; min-width: 0; padding-top: 2px; }

.dcp-name {
	font-weight: 800;
	font-size: 17px;
	color: var(--text);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dcp-location {
	font-size: 12.5px;
	color: var(--text-muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dcp-badges {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 9px;
	flex-wrap: wrap;
}

.dcp-blood-chip {
	width: auto;
	height: auto;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-family: var(--font-mono);
	letter-spacing: .02em;
}

/* ---------------------------------------------------------------------- */
/* "Last Blood Donation" — premium timeline panel (redesign target only;
   rest of the Donor Card is untouched). Soft rounded box, stacked rows:
   label -> date -> relative time -> status badge. */
/* ---------------------------------------------------------------------- */

.dcp-last-donation {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: var(--surface);
	border-radius: 18px;
	padding: 14px 16px 15px;
	margin-top: 14px;
}

.dcp-ld-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.dcp-ld-date {
	font-family: var(--font-mono);
	font-size: 16px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: .01em;
}

.dcp-ld-date.dcp-ld-muted {
	font-family: var(--font-en);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-muted);
}

.dcp-ld-date.dcp-ld-error {
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 700;
	color: #b3401f;
}

.dcp-ld-relative {
	font-size: 12px;
	color: var(--text-muted);
}

.dcp-ld-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin-top: 5px;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
}
.dcp-ld-badge.eligible { background: rgba(31, 158, 85, 0.15); color: #1a7f37; }
.dcp-ld-badge.waiting  { background: rgba(237, 137, 54, 0.16); color: #c05f11; }

.dcp-ld-badge-lines {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.dcp-ld-badge-lines span:first-child { font-size: 11px; font-weight: 600; opacity: .85; }
.dcp-ld-badge-lines span:last-child  { font-size: 13px; font-weight: 800; }

.dcp-contact {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dcp-contact-line {
	font-size: 13px;
	color: var(--text);
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.dcp-contact-line span { color: var(--text-muted); }

.dcp-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.dcp-actions .btn {
	position: relative;
	overflow: hidden;
	width: auto;
	flex: 1;
	padding: 12px 14px;
	font-size: 14px;
	border-radius: 999px;
	text-decoration: none;
}

/* Official WhatsApp green, outline style — Donor Card WhatsApp action only. */
.btn-whatsapp {
	background: color-mix(in srgb, var(--bbb-whatsapp) 8%, var(--surface-raised));
	border: 1.5px solid var(--bbb-whatsapp);
	color: var(--bbb-whatsapp-deep);
}
.btn-whatsapp:active { transform: scale(.97); background: color-mix(in srgb, var(--bbb-whatsapp) 16%, var(--surface-raised)); }

.dcp-btn-call[disabled],
.dcp-btn-msg[disabled] {
	opacity: .5;
	pointer-events: none;
	box-shadow: none;
}

@media (max-width: 360px) {
	.donor-card-premium { padding: 15px 14px 14px; }
	.dcp-avatar { width: 58px; height: 58px; }
	.dcp-name { font-size: 15.5px; }
	.dcp-actions .btn { font-size: 13px; padding: 11px 10px; }
}

/* Floating emergency button — centered on mobile; on desktop it settles
   bottom-right. Rendered only when Dashboard Manager > Floating Action
   Button is enabled — see fabHtml() in app.js. */
.fab-emergency {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	right: auto;
	z-index: 55;
	width: 64px;
	height: 64px;
	border-radius: 22px;
	background: linear-gradient(135deg, var(--bbb-garnet-bright) 0%, var(--accent) 55%, var(--accent-strong) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-float);
	border: none;
	transition: transform .2s var(--ease-spring), box-shadow .2s ease;
}
.fab-emergency svg { width: 26px; height: 26px; }
.fab-emergency:hover {
	transform: translateX(-50%) translateY(-2px);
	animation-play-state: paused;
	box-shadow: 0 20px 38px -10px rgba(209, 38, 78, .55), 0 6px 14px -2px rgba(209, 38, 78, .3);
}
.fab-emergency:active {
	transform: translateX(-50%) scale(.92);
	box-shadow: 0 8px 18px -6px rgba(209, 38, 78, .4);
}
@media (min-width: 900px) {
	.fab-emergency { left: auto; right: 32px; bottom: 32px; transform: none; }
	.fab-emergency:hover { transform: translateY(-2px); }
	.fab-emergency:active { transform: scale(.92); }
	.fab-emergency.fab-pos-left { left: 32px; right: auto; }
}

/* Dashboard Manager > Floating Action Button: optional pulse animation
   (on by default) and left-position variant. */
@keyframes bbb-fab-pulse {
	0%, 100% { box-shadow: var(--shadow-float), 0 0 0 0 rgba(209, 38, 78, .35); }
	50% { box-shadow: var(--shadow-float), 0 0 0 12px rgba(209, 38, 78, 0); }
}
.fab-emergency:not(.fab-no-anim) {
	animation: bbb-fab-pulse 2.6s ease-in-out infinite;
}
.fab-emergency.fab-no-anim {
	animation: none;
}

/* Skeleton loading */
.skeleton {
	background: linear-gradient(90deg, var(--surface) 25%, var(--border) 37%, var(--surface) 63%);
	background-size: 400% 100%;
	animation: skeleton-loading 1.4s ease infinite;
	border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.hidden { display: none !important; }

.toast-stack {
	position: fixed;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(360px, 92vw);
}
.toast {
	padding: 13px 17px;
	border-radius: var(--radius-sm);
	background: var(--surface-raised);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	font-size: 14px;
	font-weight: 600;
}
.toast.error { border-color: var(--accent); color: var(--accent-strong); }
.toast.success { border-color: #1f9e55; color: #1a7f37; }

/* ---------------------------------------------------------------------- */
/* Auth pages — premium Login / Register / Forgot-Password onboarding.
   Reworked as a dark, membership-card-style welcome screen instead of a
   pale cream background, so the very first screen sets the new identity. */
/* ---------------------------------------------------------------------- */

.auth-page {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	padding: 48px 20px calc(40px + env(safe-area-inset-bottom));
	/* No hardcoded background here on purpose: this root wrapper must stay
	   transparent so the Background Manager's own background (applied to
	   document.body by assets/js/background-runtime.js) is what's visible.
	   A background declared here would sit on top of body and hide every
	   Login/Register/Forgot-Password/OTP Custom Background silently — see
	   includes/frontend/BACKGROUND-INTEGRATION.md "What NOT to do". */
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Subtle low-opacity dot-matrix decorations, purely visual, non-interactive */
.auth-drop {
	position: absolute;
	font-size: 64px;
	opacity: .08;
	pointer-events: none;
	user-select: none;
	filter: grayscale(1) brightness(3);
	z-index: 0;
}
.auth-drop-1 { top: 6%;  left: -4%; font-size: 90px; transform: rotate(-12deg); }
.auth-drop-2 { top: 18%; right: -6%; font-size: 110px; transform: rotate(10deg); }
.auth-drop-3 { bottom: 14%; left: -6%; font-size: 100px; transform: rotate(8deg); }
.auth-drop-4 { bottom: 2%;  right: -4%; font-size: 70px; transform: rotate(-8deg); }

.auth-hero {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 420px;
	width: 100%;
	margin-bottom: 28px;
}

.auth-logo {
	width: 84px;
	height: 84px;
	border-radius: 24px;
	object-fit: cover;
	box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .5);
	margin-bottom: 16px;
}

.auth-logo-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 24px;
	background: linear-gradient(145deg, var(--bbb-garnet-bright), var(--accent-strong));
	box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255,255,255,.2);
	margin-bottom: 16px;
	color: #fff;
}

.auth-app-name {
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 14px;
	letter-spacing: -0.01em;
}

.auth-slogan {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.auth-slogan::before,
.auth-slogan::after {
	content: "";
	flex: 1 1 28px;
	max-width: 48px;
	height: 2px;
	border-radius: 2px;
	background: var(--bbb-gold);
	opacity: .7;
}

.auth-slogan-text {
	font-size: 18px;
	font-weight: 700;
	color: rgba(255, 255, 255, .88);
	line-height: 1.5;
}

.auth-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	background: var(--bbb-auth-card-bg, rgba(255, 255, 255, .96));
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45);
	padding: 32px 26px;
}

.auth-welcome-text {
	font-size: 13px;
	font-weight: 600;
	color: rgba(25, 19, 32, .55);
	text-align: center;
	margin-bottom: 4px;
}

.auth-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--bbb-ink);
	margin-bottom: 4px;
	text-align: center;
}

.auth-subtitle {
	font-size: 14px;
	color: rgba(25, 19, 32, .55);
	text-align: center;
	margin-bottom: 24px;
}

.auth-error-summary {
	background: rgba(209, 38, 78, .08);
	border: 1.5px solid var(--accent);
	color: var(--accent-strong, var(--accent));
	border-radius: 16px;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 13.5px;
	line-height: 1.5;
}

.auth-error-summary ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

.auth-field {
	position: relative;
	margin-bottom: 14px;
}

.auth-field.has-error .auth-input,
.auth-field-plain.has-error .auth-select,
.auth-field-plain.has-error .auth-date {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(209, 38, 78, .1);
}

.auth-field-error-msg {
	color: var(--accent-strong, var(--accent));
	font-size: 12.5px;
	margin-top: 6px;
	padding-left: 4px;
}

.auth-field-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 17px;
	line-height: 1;
	pointer-events: none;
}

.auth-input {
	width: 100%;
	padding: 15px 16px 15px 46px;
	border-radius: 18px;
	border: 1.5px solid var(--bbb-auth-input-border, rgba(25, 19, 32, .1));
	background: var(--bbb-auth-input-bg, #F7F4F0);
	color: var(--bbb-ink);
	font-size: 15px;
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.auth-input:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--input-bg);
	box-shadow: 0 0 0 4px rgba(209, 38, 78, .1);
}

.auth-field-password .auth-input {
	padding-right: 46px;
}

.auth-toggle-password {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	font-size: 16px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-toggle-password:active { background: rgba(25, 19, 32, .06); }

.auth-options-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 4px 0 22px;
	flex-wrap: wrap;
}

.auth-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bbb-ink);
}

.auth-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
}

.auth-link {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--accent-strong);
}

.btn-auth-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px 20px;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 800;
	color: var(--bbb-auth-btn-text, #fff);
	background: var(--bbb-auth-btn-bg, linear-gradient(135deg, var(--bbb-garnet-bright) 0%, var(--accent) 48%, var(--accent-strong) 100%));
	box-shadow: 0 18px 34px -12px rgba(209, 38, 78, .55);
	transition: transform .15s var(--ease-spring), box-shadow .15s ease, opacity .15s ease;
}
.btn-auth-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 40px -12px rgba(209, 38, 78, .6); }
.btn-auth-primary:active { transform: scale(.98); }
.btn-auth-primary:disabled { opacity: .7; }

.btn-auth-outline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px 20px;
	margin-top: 14px;
	border-radius: 999px;
	border: 2px solid var(--accent);
	color: var(--accent-strong);
	font-size: 15px;
	font-weight: 800;
	background: transparent;
	transition: transform .15s ease, background-color .15s ease;
}
.btn-auth-outline:hover { background: rgba(209, 38, 78, .06); }
.btn-auth-outline:active { transform: scale(.98); }

.auth-footer {
	position: relative;
	z-index: 1;
	text-align: center;
	margin-top: 28px;
}

.auth-version {
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 8px;
}

.auth-heart {
	font-size: 20px;
	opacity: .8;
}

.auth-debug-code {
	text-align: center;
	font-size: 12.5px;
	color: var(--text-muted);
	margin-bottom: 14px;
}

.auth-field-plain {
	margin-bottom: 14px;
}

.auth-select,
.auth-date {
	width: 100%;
	padding: 15px 16px;
	border-radius: 18px;
	border: 1.5px solid rgba(25, 19, 32, .1);
	background: #F7F4F0;
	color: var(--bbb-ink);
	font-size: 15px;
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-select:focus,
.auth-date:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(209, 38, 78, .1);
}

.auth-field-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: rgba(25, 19, 32, .5);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.auth-field-hint {
	font-size: 12px;
	color: var(--text-muted);
	margin: 6px 0 0;
	line-height: 1.4;
}

.auth-card-wide {
	max-width: 480px;
}

@media (min-width: 640px) {
	.auth-card { padding: 40px 36px; }
	.auth-app-name { font-size: 27px; }
	.auth-slogan-text { font-size: 21px; }
}

/* ==========================================================================
   Developer credit card — login/register/forgot-password footer.
   ========================================================================== */
.dev-divider {
	width: 100%;
	max-width: 280px;
	height: 1px;
	margin: 22px auto 20px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 20%, rgba(255,255,255,.18) 80%, transparent);
}

.dev-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .4);
	padding: 22px 20px 20px;
	text-align: center;
}

.dev-card-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--accent-strong);
	margin-bottom: 14px;
}

.dev-heart {
	font-size: 13px;
	line-height: 1;
}

.dev-avatar {
	display: block;
	width: 80px;
	height: 80px;
	margin: 0 auto 12px;
	border-radius: 24px;
	object-fit: cover;
	border: 2.5px solid var(--bbb-garnet);
	box-shadow: 0 10px 24px -8px rgba(209, 38, 78, .45), 0 2px 8px rgba(25, 19, 32, .12);
}

.dev-name {
	font-size: 16px;
	font-weight: 800;
	color: var(--bbb-ink);
	margin-bottom: 2px;
}

.dev-role {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(25, 19, 32, .5);
	margin-bottom: 16px;
}

.dev-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.dev-social-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	transition: transform .15s var(--ease-spring), box-shadow .15s ease, opacity .15s ease;
}
.dev-social-link:hover { transform: translateY(-1px); }
.dev-social-link:active { transform: scale(.97); }

.dev-social-fb {
	background: linear-gradient(135deg, #1877F2 0%, #0F5FCF 100%);
	box-shadow: 0 10px 20px -8px rgba(24, 119, 242, .5);
}

.dev-social-wa {
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
	box-shadow: 0 10px 20px -8px rgba(37, 211, 102, .5);
}

@media (min-width: 640px) {
	.dev-card { max-width: 320px; padding: 26px 24px 22px; }
	.dev-avatar { width: 92px; height: 92px; }
}

/* ==========================================================================
   Android app-matching Login screen (Phase — Website Login Page clone).
   Scoped entirely to "and-*" classes rendered only by androidLoginMarkup()
   in assets/js/views/auth.js, and only inside the /login view's first
   step. Register, Forgot Password, and the 2FA/OTP step keep using the
   original .auth-*/.dev-* styles above completely untouched.
   ========================================================================== */

.and-login-page {
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFDFD 55%, var(--bbb-blush) 100%);
}

.and-hero {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 420px;
	width: 100%;
	margin-bottom: 26px;
}

.and-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 26px;
	background: #FFFFFF;
	box-shadow: 0 16px 32px -10px rgba(209, 38, 78, .28), 0 2px 10px rgba(25, 19, 32, .08);
	margin-bottom: 18px;
}

.and-logo-img {
	width: 62px;
	height: 62px;
	object-fit: contain;
}

.and-logo-fallback {
	color: var(--bbb-garnet);
}

.and-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--bbb-garnet);
	margin-bottom: 10px;
	letter-spacing: -0.01em;
}

.and-subtitle {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-muted);
	line-height: 1.6;
}

.and-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	background: var(--bbb-auth-card-bg, var(--card-bg));
	border: 1px solid rgba(209, 38, 78, .08);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 54px -22px rgba(25, 19, 32, .18);
	padding: 28px 24px;
}

.and-field {
	position: relative;
	margin-bottom: 16px;
}

.and-field-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bbb-garnet);
	display: flex;
	pointer-events: none;
}

.and-input {
	width: 100%;
	padding: 15px 16px 15px 46px;
	border-radius: 16px;
	border: 1.5px solid var(--bbb-auth-input-border, rgba(25, 19, 32, .08));
	background: var(--bbb-auth-input-bg, var(--bbb-porcelain));
	color: var(--bbb-ink);
	font-size: 15px;
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.and-input:focus {
	outline: none;
	border-color: var(--bbb-garnet);
	background: var(--input-bg);
	box-shadow: 0 0 0 4px rgba(209, 38, 78, .1);
}

.and-field-password .and-input { padding-right: 46px; }

.and-toggle-password {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	color: rgba(25, 19, 32, .45);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.and-toggle-password:active { background: rgba(25, 19, 32, .06); }

.and-options-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 2px 0 22px;
	flex-wrap: wrap;
}

.and-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bbb-ink);
}

.and-checkbox {
	width: 19px;
	height: 19px;
	accent-color: var(--bbb-garnet);
	border-radius: 4px;
}

.and-forgot-link {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bbb-garnet);
}

.and-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 20px;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	background: var(--bbb-garnet);
	box-shadow: 0 16px 32px -12px rgba(209, 38, 78, .55);
	transition: transform .15s var(--ease-spring), box-shadow .15s ease, opacity .15s ease;
}
.and-login-btn:hover { transform: translateY(-1px); }
.and-login-btn:active { transform: scale(.98); }
.and-login-btn:disabled { opacity: .7; }

.and-signup-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.and-signup-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
}

.and-signup-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--bbb-blush);
	color: var(--bbb-garnet);
	font-size: 13.5px;
	font-weight: 800;
	white-space: nowrap;
	transition: transform .15s ease, background-color .15s ease;
}
.and-signup-btn:hover { background: var(--bbb-soft-pink-d); }
.and-signup-btn:active { transform: scale(.97); }

.and-footer {
	position: relative;
	z-index: 1;
	text-align: center;
	margin-top: 30px;
	width: 100%;
	max-width: 420px;
}

.and-version {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 16px;
}

.and-dev-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: var(--card-inner-bg);
	border-radius: var(--radius-md);
	box-shadow: 0 14px 32px -18px rgba(25, 19, 32, .22);
	padding: 14px 16px;
	text-align: left;
}

.and-dev-avatar {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
	border: 2.5px solid var(--bbb-garnet);
}

.and-dev-info { flex: 1 1 auto; min-width: 0; }

.and-dev-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--bbb-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.and-dev-role {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-muted);
}

.and-dev-social {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.and-dev-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
	transition: transform .15s ease, opacity .15s ease;
}
.and-dev-social-link:hover { transform: translateY(-1px); }
.and-dev-social-link:active { transform: scale(.95); }

.and-dev-fb { background: #1877F2; }
.and-dev-wa { background: #25D366; }

@media (min-width: 640px) {
	.and-card { padding: 36px 34px; }
	.and-title { font-size: 30px; }
	.and-logo { width: 108px; height: 108px; }
	.and-logo-img { width: 70px; height: 70px; }
}

@media (min-width: 900px) {
	.and-login-page {
		padding-top: 64px;
	}
	.and-hero { max-width: 460px; }
	.and-card { max-width: 460px; }
	.and-footer { max-width: 460px; }
}

/* ==========================================================================
   Android app-matching Register screen (Phase — Website Registration
   Page clone). Scoped to "and-reg-*" classes rendered only by
   androidRegisterMarkup() in assets/js/views/auth.js, and only inside the
   /register view — plus the shared "and-*" primitives (and-hero, and-logo,
   and-title, and-subtitle, and-card, and-field, and-input, and-field-icon,
   and-field-password, and-toggle-password, and-checkbox-label, and-checkbox,
   and-login-btn, and-footer, and-version, and-dev-*) already defined above
   for the Login screen, so both pages share one consistent design system.
   Login, Forgot Password, and the 2FA/OTP step keep using their existing
   styles completely untouched.
   ========================================================================== */

.and-reg-hero { margin-bottom: 22px; }

.and-reg-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	width: 100%;
}
.and-reg-divider span {
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--bbb-gold) 15%, var(--bbb-gold) 85%, transparent);
}

.and-reg-title {
	font-size: 19px;
	font-weight: 800;
	color: var(--bbb-ink);
	text-align: center;
	margin: 0 0 18px;
}

.and-reg-select-field { margin-bottom: 16px; }

.and-reg-select-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--bbb-ink);
	margin-bottom: 8px;
}

.and-select-wrap { position: relative; }

.and-select,
.and-date-select {
	width: 100%;
	padding: 15px 44px 15px 16px;
	border-radius: 16px;
	border: 1.5px solid var(--bbb-auth-input-border, rgba(25, 19, 32, .08));
	background: var(--bbb-auth-input-bg, var(--bbb-porcelain));
	color: var(--bbb-ink);
	font-size: 15px;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.and-select:focus,
.and-date-select:focus {
	outline: none;
	border-color: var(--bbb-garnet);
	background: var(--input-bg);
	box-shadow: 0 0 0 4px rgba(209, 38, 78, .1);
}

.and-select-chevron {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
	display: flex;
}

.and-select-hint {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	line-height: 1.5;
	margin: 6px 0 0;
}

/* Last Donation Date — real <input type="date">, just restyled to look
   like the other select-style boxes with a "—" placeholder overlay and
   the shared chevron instead of the browser's own calendar glyph. The
   invisible, full-size ::-webkit-calendar-picker-indicator keeps the
   whole box clickable to open the native date picker. */
.and-date-wrap { position: relative; }
.and-date-select { color: transparent; cursor: pointer; }
.and-date-wrap.has-value .and-date-select { color: var(--bbb-ink); }
.and-date-placeholder {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 15px;
	pointer-events: none;
}
.and-date-wrap.has-value .and-date-placeholder { display: none; }
.and-date-select::-webkit-calendar-picker-indicator {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

.and-field.has-error .and-input,
.and-reg-select-field.has-error .and-select,
.and-reg-select-field.has-error .and-date-select {
	border-color: var(--bbb-garnet);
	box-shadow: 0 0 0 4px rgba(209, 38, 78, .1);
}

.and-reg-checkbox-row { margin: 2px 0 20px; }

.and-reg-btn { border-radius: 16px; margin-top: 4px; }

.and-reg-login-box {
	display: block;
	text-align: center;
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1.5px solid rgba(25, 19, 32, .08);
	background: var(--bbb-porcelain);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	transition: background-color .15s ease;
}
.and-reg-login-box:hover { background: var(--bbb-blush); }
.and-reg-login-box-link { color: var(--bbb-garnet); font-weight: 800; }

/* ==========================================================================
   Android app-matching Forgot Password screen (Phase — Website Forgot
   Password Page clone). Scoped to "and-fp-*" classes rendered only by
   androidForgotPasswordMarkup() in assets/js/views/auth.js, plus the
   shared "and-*" primitives already used by Login/Register (and-hero,
   and-logo, and-title, and-subtitle, and-card, and-field, and-input,
   and-login-btn, and-footer, and-version) so all three pages stay on
   one consistent design system. Purely additive/visual — see the JS
   comments above androidForgotPasswordMarkup() for why the underlying
   #f1/#f2/#f3 forms, field names, and REST calls are untouched.
   ========================================================================== */

.and-fp-page { position: relative; }

.and-fp-back-btn {
	align-self: flex-start;
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	margin-bottom: 22px;
	border: none;
	border-radius: 50%;
	background: var(--bbb-blush);
	color: var(--bbb-garnet);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease, background-color .15s ease;
}
.and-fp-back-btn:hover { background: var(--bbb-soft-pink-d); }
.and-fp-back-btn:active { transform: scale(.93); }

.and-fp-hero { margin-bottom: 22px; }

.and-fp-card { text-align: center; }
.and-fp-card form { text-align: left; }

.and-fp-hint {
	text-align: left;
	margin: -6px 0 22px;
}

.and-fp-login-link {
	display: block;
	margin-top: 28px;
	font-size: 15px;
	font-weight: 800;
	color: var(--bbb-garnet);
}
.and-fp-login-link:hover { text-decoration: underline; }

/* ==========================================================================
   Premium Dashboard Redesign — scoped to .db-* classes rendered only by
   assets/js/views/dashboard.js. Signature element: the hero renders as a
   dark garnet "donor membership card" — a diagonal sheen, a small gold
   chip glyph, and a dot-perforation texture reused from the original
   floating-drop markup — carried through in miniature by the mono-set
   stat values and blood-group badges everywhere else on the page.
   ========================================================================== */

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

@keyframes dbFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-10px) rotate(6deg); }
}

@keyframes dbPulseGlow {
	0%, 100% { box-shadow: var(--shadow-float), 0 0 0 0 rgba(209, 38, 78, .35); }
	50%      { box-shadow: var(--shadow-float), 0 0 0 10px rgba(209, 38, 78, 0); }
}

/* Page canvas — warm porcelain with soft garnet + gold glows behind all
   dashboard content, bleeding edge-to-edge inside .app-main. */
.db-page {
	position: relative;
	margin: -20px -16px 0;
	/* Bottom padding intentionally does NOT add its own baseline gap or
	   env(safe-area-inset-bottom) here — .app-main already reserves the
	   full clearance (base gap + Bottom Nav height + safe-area-inset-
	   bottom) directly below this element (see .app-main's mobile
	   padding-bottom rule further down in this file). Adding either one
	   again here only stacked a second, redundant blank gap between the
	   last dashboard section and the already-reserved nav clearance —
	   it never affected any card, icon, color, or spacing above it, so
	   removing it is purely removing invisible dead space. */
	padding: 18px 16px 0;
	/* No hardcoded background here on purpose — same reasoning as
	   .auth-page above. This wrapper bleeds edge-to-edge over the whole
	   viewport, so any background declared on it would completely hide
	   the Home Dashboard's Background Manager Custom Background (or
	   Global) applied to document.body. The decorative glows below
	   (::before/::after, .db-bg-decor) stay — they're low-opacity accents
	   layered on TOP via z-index, not a base fill, so they still work
	   correctly over whatever background the admin has configured.
	   [data-theme="dark"] .db-page's own background rule below is
	   removed for the same reason. */
	overflow: hidden;
}
/* [data-theme="dark"] .db-page background override intentionally removed
   — .db-page no longer sets its own background in either scheme (see
   comment on .db-page above), so there is nothing to override here. */
@media (min-width: 900px) {
	.db-page { margin: 0; border-radius: var(--radius-lg); padding: 24px; }
}

.db-page > * { position: relative; z-index: 1; }

.db-page::before,
.db-page::after {
	content: "";
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 40% 60% 55% 45%;
	background: radial-gradient(circle at 30% 30%, rgba(209, 38, 78, .09), transparent 70%);
	transform: rotate(20deg);
	pointer-events: none;
	z-index: 0;
}
.db-page::before { top: -40px; right: -30px; }
.db-page::after  { bottom: 10%; left: -60px; width: 180px; height: 180px; opacity: .7; }

/* Extra floating decoration layer (dot-matrix + soft glow blobs) sitting
   behind every dashboard section. */
.db-page > .db-bg-decor {
	position: absolute !important;
	inset: 0;
	z-index: 0 !important;
	overflow: hidden;
	pointer-events: none;
}
.db-bg-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	opacity: .5;
}
.db-bg-glow-a { width: 220px; height: 220px; top: -60px; left: 55%; background: radial-gradient(circle, rgba(209, 38, 78, .18), transparent 70%); }
.db-bg-glow-b { width: 260px; height: 260px; bottom: 6%; right: -80px; background: radial-gradient(circle, rgba(194, 154, 85, .18), transparent 70%); }

.db-bg-drop {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(209, 38, 78, .3);
	animation: dbFloat 7s ease-in-out infinite;
}
.db-bg-drop-1 { top: 22%; left: 8%;  width: 5px; height: 5px; animation-delay: .3s; opacity: .55; }
.db-bg-drop-2 { top: 46%; right: 10%; width: 7px; height: 7px; animation-delay: 1.4s; opacity: .4; }
.db-bg-drop-3 { top: 68%; left: 18%; width: 4px;  height: 4px;  animation-delay: 2.4s; opacity: .5; }
.db-bg-drop-4 { top: 85%; right: 22%; width: 6px; height: 6px; animation-delay: 3.1s; opacity: .35; }

[data-theme="dark"] .db-bg-glow { opacity: .35; }

/* ---------------------------------------------------------------------- */
/* Hero banner — the signature "donor membership card": a dark garnet    */
/* gradient panel with a diagonal glass sheen, a small gold chip glyph,  */
/* and a dot-perforation strip (the existing .db-drop markup, restyled   */
/* from "floating blood drops" into a card-texture detail). Inline       */
/* styles from Dashboard Manager (background/text color/radius) still   */
/* apply on the element itself and are respected — this layer sits on    */
/* top via pseudo-elements, so admin customization keeps working exactly */
/* as before while the card still reads as premium regardless of the     */
/* colors chosen.                                                        */
/* ---------------------------------------------------------------------- */
.db-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 30px 26px;
	margin-bottom: 20px;
	border-radius: 28px;
	background: linear-gradient(135deg, var(--bbb-midnight) 0%, var(--accent-strong) 60%, var(--bbb-midnight-2) 100%);
	box-shadow: 0 24px 48px -22px rgba(209, 38, 78, .45), 0 6px 18px -8px rgba(21, 17, 29, .35);
	animation: dbFadeUp .45s ease both;
}
[data-theme="dark"] .db-hero {
	background: linear-gradient(135deg, var(--bbb-midnight) 0%, var(--accent-strong) 60%, #1c0e18 100%);
}

/* Diagonal glass sheen — independent of whatever `background` an inline
   style has applied to .db-hero itself. */
.db-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .08) 100%);
	pointer-events: none;
	z-index: 0;
}

/* Small embossed "chip" glyph, top-right — the one card-object detail
   that makes the hero read as a membership card rather than a banner. */
.db-hero::after {
	content: "";
	position: absolute;
	top: 22px;
	right: 24px;
	width: 34px;
	height: 25px;
	border-radius: 6px;
	background: linear-gradient(155deg, #E8CD93, var(--bbb-gold) 55%, #97742F);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 3px 8px rgba(0, 0, 0, .3);
	z-index: 1;
	opacity: .92;
}

/* Existing "drops" markup, restyled as a small dot-perforation strip —
   a card-texture detail rather than literal blood drops. */
.db-hero-drops { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.db-drop {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
}
.db-drop-a { top: 16%; left: 8%; }
.db-drop-b { top: 16%; left: 14%; opacity: .7; }
.db-drop-c { top: 16%; left: 20%; opacity: .45; }

.db-hero-text { position: relative; z-index: 1; flex: 1; min-width: 0; }

.db-hero-greeting {
	margin: 0 0 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .64);
}

.db-hero-name {
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: #fff;
	line-height: 1.18;
}

.db-hero-sub {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .74);
	max-width: 30ch;
	line-height: 1.55;
	letter-spacing: -0.005em;
}

.db-hero-art {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 118px;
	animation: dbHeroFloat 4.5s ease-in-out infinite;
	opacity: .96;
}
.db-hero-art::before {
	content: "";
	position: absolute;
	inset: -30%;
	background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
	z-index: -1;
}
.db-hero-svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }

@keyframes dbHeroFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
html.bbb-no-anim .db-hero-art { animation: none; }

/* ---------------------------------------------------------------------- */
/* Hero Banner — "Full Banner Image" Display Mode. Reuses .db-hero for    */
/* its box (border-radius, shadow, overflow clipping, margin, responsive  */
/* sizing) but strips the padding, gradient/solid background, and every   */
/* decorative layer (glass sheen, chip glyph, dot-perforation strip) so   */
/* only the uploaded Banner Image shows, completely filling the card.     */
/* ---------------------------------------------------------------------- */
.db-hero.db-hero-full-image {
	display: block;
	padding: 0;
	background: none;
	height: 200px;
}
.db-hero.db-hero-full-image::before,
.db-hero.db-hero-full-image::after {
	content: none;
}
.db-hero-full-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 380px) {
	/* Keep Full Banner Image slides the same mobile height as the
	 * Premium/standard Hero slide (200px). The old 160px rule made
	 * image banners visibly shorter on small-phone CSS viewports. */
	.db-hero.db-hero-full-image { height: 200px; }
}
@media (min-width: 900px) {
	.db-hero.db-hero-full-image { height: 280px; }
}

@media (max-width: 380px) {
	.db-hero { padding: 20px 18px; }
	.db-hero-name { font-size: 21px; }
	.db-hero-sub { font-size: 12.5px; max-width: 22ch; }
	.db-hero-art { width: 82px; }
}
@media (min-width: 900px) {
	.db-hero { padding: 32px 36px; }
	.db-hero-art { width: 160px; }
	.db-hero-name { font-size: 29px; }
}

/* ---------------------------------------------------------------------- */
/* Hero Banner Auto Slider — wraps the exact same .db-hero card above so  */
/* every existing Hero Banner setting (background, text color, overlay,  */
/* border radius, button, right image, animation...) keeps rendering      */
/* pixel-identically. The slider uses layered slides + opacity crossfade  */
/* so changing banners never exposes a blank frame/white flash.           */
/* ---------------------------------------------------------------------- */
.db-hero-slider {
	position: relative;
	margin-bottom: 20px;
	touch-action: pan-y;
}
.db-hero-slider .db-hero-slides {
	position: relative;
	display: grid;
}
.db-hero-slider .db-hero-slide {
	grid-area: 1 / 1;
	display: flex !important;
	margin-bottom: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 0;
	transition: opacity .45s var(--ease-smooth), visibility 0s linear .45s;
	animation: none !important;
}
.db-hero-slider .db-hero-slide.is-active {
	display: flex !important;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
	transition: opacity .45s var(--ease-smooth), visibility 0s linear 0s;
}
.db-hero-slider .db-hero-slide.is-active.db-hero-full-image {
	display: block !important;
}

.db-hero-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 10, 14, .32);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: background-color .18s var(--ease-smooth), transform .18s var(--ease-spring);
}
.db-hero-nav:hover { background: rgba(15, 10, 14, .5); }
.db-hero-nav:active { transform: translateY(-50%) scale(.9); }
.db-hero-prev { left: 10px; }
.db-hero-next { right: 10px; }
.db-hero-nav svg { width: 15px; height: 15px; }

.db-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}
.db-hero-dot {
	pointer-events: auto;
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	transition: background-color .18s var(--ease-smooth), transform .18s var(--ease-spring), width .18s var(--ease-smooth);
}
.db-hero-dot.is-active {
	width: 16px;
	border-radius: 3px;
	background: #fff;
}

@media (max-width: 380px) {
	.db-hero-nav { width: 26px; height: 26px; }
	.db-hero-nav svg { width: 12px; height: 12px; }
}

/* Shortcuts wrapper — staggers the fade-in and adds a touch of glass to
   each card without altering its structure or click targets. */
.db-shortcuts { animation: dbFadeUp .45s ease .05s both; }
.db-section-head {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--text);
}
/* .db-shortcuts .service-card intentionally has no override here —
   it's a transparent icon+label launcher item now (see the shared
   .service-card / .service-icon / .service-label rules above), so
   there is no surface left to frost or lift on hover. */

/* ---------------------------------------------------------------------- */
/* Quick Links (দ্রুত সেবা) — visually identical component contract to    */
/* .service-card / .service-icon / .service-label (same sizing/grid),    */
/* restyled with the same squircle + glass treatment as the rest of the  */
/* page. The ripple effect on top is unchanged.                          */
/* ---------------------------------------------------------------------- */
.db-quicklinks { margin-bottom: 18px; animation: dbFadeUp .45s ease .08s both; }

.db-quicklinks-head { margin-bottom: 10px; }
.db-quicklinks-head h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--text);
}

.db-quicklinks-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.db-quicklink-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	aspect-ratio: 1 / 1;
	height: auto;
	min-height: 112px;
	width: 100%;
	padding: 14px 10px;
	background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--border);
	border-radius: 26px;
	box-shadow: var(--shadow-card);
	text-align: center;
	cursor: pointer;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
	will-change: transform;
	transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-smooth), border-color .2s var(--ease-smooth), background-color .2s var(--ease-smooth);
}
.db-quicklink-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-hover);
}
.db-quicklink-card:active {
	transform: scale(.93);
	box-shadow: 0 4px 10px -6px rgba(25, 19, 32, .3);
}

.db-quicklink-icon {
	width: 62px;
	height: 62px;
	border-radius: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	flex-shrink: 0;
	background: var(--dbql-accent, var(--accent));
	color: #fff;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 18px -10px rgba(25, 19, 32, .4);
}
.db-quicklink-icon i { font-size: 28px; line-height: 1; }
.db-quicklink-icon svg { width: 30px; height: 30px; }

.db-quicklink-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
	box-sizing: border-box;
}

.db-quicklink-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.db-quicklink-ripple-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}
.db-quicklink-ripple {
	position: absolute;
	border-radius: 50%;
	background: color-mix(in srgb, var(--dbql-accent, var(--accent)) 30%, transparent);
	transform: scale(0);
	opacity: .55;
	animation: dbQuicklinkRipple .55s ease-out forwards;
}
@keyframes dbQuicklinkRipple {
	to { transform: scale(2.2); opacity: 0; }
}

@media (max-width: 360px) {
	.db-quicklink-card { gap: 7px; padding: 10px 6px; border-radius: 22px; }
	.db-quicklink-icon { width: 50px; height: 50px; border-radius: 17px; font-size: 24px; }
	.db-quicklink-icon i { font-size: 22px; }
	.db-quicklink-icon svg { width: 24px; height: 24px; }
	.db-quicklink-title { font-size: 11px; }
}

@media (min-width: 900px) {
	.db-quicklinks-grid { grid-template-columns: repeat(4, minmax(0, 160px)); gap: 16px; }
	.db-quicklink-card { min-height: 152px; border-radius: 28px; }
	.db-quicklink-icon { width: 68px; height: 68px; font-size: 34px; border-radius: 23px; }
	.db-quicklink-icon i { font-size: 32px; }
	.db-quicklink-icon svg { width: 33px; height: 33px; }
	.db-quicklink-title { font-size: 13.5px; }
}

/* ---------------------------------------------------------------------- */
/* Content Cards (তথ্য ও সেবা)                                            */
/* ---------------------------------------------------------------------- */
.db-contentcards { margin-bottom: 18px; animation: dbFadeUp .45s ease .1s both; }

.db-contentcards-head { margin-bottom: 10px; }
.db-contentcards-head h2 {
	margin: 0;
	font-size: 15.5px;
	font-weight: 800;
	color: var(--text);
}

.db-contentcards-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.db-cc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: var(--text);
	-webkit-tap-highlight-color: transparent;
	transition: transform .16s var(--ease-spring), box-shadow .16s ease;
}
.db-cc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.db-cc-card:active { transform: scale(.97); }

.db-cc-cover {
	width: 100%;
	height: 96px;
	background-size: cover;
	background-position: center;
	background-color: var(--surface);
	flex-shrink: 0;
}
.db-cc-cover-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dbcc-accent, var(--accent));
	color: #fff;
	font-size: 32px;
}
.db-cc-icon-img { width: 44px; height: 44px; object-fit: contain; }

.db-cc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.db-cc-title { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.db-cc-desc {
	font-size: 11.5px;
	color: var(--text-muted);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 900px) {
	.db-contentcards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.db-cc-cover { height: 130px; }
	.db-cc-title { font-size: 15px; }
	.db-cc-desc { font-size: 12.5px; }
}

/* ---------------------------------------------------------------------- */
/* Content Card article page — /content/{slug} */
/* ---------------------------------------------------------------------- */
.cc-page { margin: 0; animation: dbFadeUp .35s ease both; }

.cc-hero {
	position: relative;
	height: 240px;
	background-size: cover;
	background-position: center;
	background-color: var(--surface);
	display: flex;
	align-items: flex-end;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	overflow: hidden;
}
.cc-hero-plain { background: linear-gradient(135deg, var(--cc-accent, var(--accent)) 0%, var(--bbb-midnight) 130%); height: 160px; }

.cc-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%);
}

.cc-hero-text { position: relative; padding: 18px 20px; z-index: 1; }
.cc-hero-text h1 {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0,0,0,.35);
	line-height: 1.3;
}
.cc-hero-plain .cc-hero-text h1 { color: #fff; }

.cc-back-btn {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 13px;
	background: rgba(21, 17, 29, .5);
	backdrop-filter: blur(8px);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.cc-body { padding: 20px 4px 40px; max-width: 720px; margin: 0 auto; }

.cc-lead { font-size: 15px; color: var(--text-muted); line-height: 1.55; margin: 4px 0 18px; }

.cc-gallery {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 20px;
	-webkit-overflow-scrolling: touch;
}
.cc-gallery-item {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 16px;
	overflow: hidden;
	border: none;
	padding: 0;
	cursor: pointer;
	background: var(--surface);
}
.cc-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,.9);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.cc-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

.cc-richtext {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text);
	margin-bottom: 22px;
}
.cc-richtext p { margin: 0 0 14px; }
.cc-richtext h1, .cc-richtext h2, .cc-richtext h3 { color: var(--text); line-height: 1.35; margin: 22px 0 10px; }
.cc-richtext ul, .cc-richtext ol { padding-left: 22px; margin: 0 0 14px; }
.cc-richtext li { margin-bottom: 6px; }
.cc-richtext img { max-width: 100%; border-radius: 14px; margin: 10px 0; }
.cc-richtext blockquote {
	margin: 0 0 14px;
	padding: 10px 16px;
	border-left: 3px solid var(--cc-accent, var(--accent));
	background: var(--surface);
	border-radius: 0 12px 12px 0;
	color: var(--text-muted);
}
.cc-richtext a { color: var(--cc-accent, var(--accent)); }

.cc-video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 20px;
	background: #000;
}
.cc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cc-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.cc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}
.cc-btn-primary { background: var(--cc-accent, var(--accent)); color: #fff; box-shadow: var(--shadow-float); }
.cc-btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); margin-bottom: 12px; }
.cc-btn-icon svg { flex-shrink: 0; }

.cc-map {
	margin-bottom: 20px;
}
.cc-map iframe {
	width: 100%;
	height: 220px;
	border: 0;
	border-radius: 18px;
	margin-bottom: 10px;
}

.cc-facebook {
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	border-radius: 18px;
}
.cc-facebook iframe { max-width: 100%; }

/* ==========================================================================
   Dark Mode compatibility layer — legacy/admin-authored Content Page
   rich text.
   ==========================================================================
   Blood Bank > Content Pages' "Content" field is free-form HTML stored in
   the database (see inc/class-content-cards.php) and rendered verbatim
   inside .cc-richtext by assets/js/views/content.js (renderCard()). Some
   of that stored HTML — written before Dark Mode existed — carries its
   own hardcoded light-surface inline styling (e.g. style="background:#fff"
   wrapper boxes), which .cc-richtext's own CSS never controls.

   .cc-richtext's own text already resolves via `color: var(--text)`
   (theme-aware, correctly light in Dark Mode) — so a hardcoded white/near
   -white inline background left as-is produces exactly the reported bug:
   light text painted on a light background inside an otherwise-dark page
   (Blood Collection Center, Banshkhali Police Station, Fire Service &
   Civil Defence, Banshkhali Upazila Parishad, and any other Content Page
   whose stored HTML uses the same pattern).

   Per-page-database edits are explicitly out of scope (no destructive
   rewrite of saved content), so this is a frontend-only compatibility
   layer: it matches the common hardcoded-white authoring patterns via
   attribute selectors and reassigns them to the existing semantic Dark
   surface tokens, the same ones already used for cards elsewhere in the
   app. Brand/accent colors set by the author (red headings, colored
   borders, buttons, etc.) are untouched — only backgrounds that are
   specifically white/near-white are remapped, and only in Dark Mode;
   Light Mode is completely unaffected by every rule in this block. */
[data-theme="dark"] .cc-richtext [style*="background:#fff" i],
[data-theme="dark"] .cc-richtext [style*="background: #fff" i],
[data-theme="dark"] .cc-richtext [style*="background-color:#fff" i],
[data-theme="dark"] .cc-richtext [style*="background-color: #fff" i],
[data-theme="dark"] .cc-richtext [style*="background:#ffffff" i],
[data-theme="dark"] .cc-richtext [style*="background: #ffffff" i],
[data-theme="dark"] .cc-richtext [style*="background-color:#ffffff" i],
[data-theme="dark"] .cc-richtext [style*="background-color: #ffffff" i],
[data-theme="dark"] .cc-richtext [style*="background:white" i],
[data-theme="dark"] .cc-richtext [style*="background: white" i],
[data-theme="dark"] .cc-richtext [style*="background-color:white" i],
[data-theme="dark"] .cc-richtext [style*="background-color: white" i],
[data-theme="dark"] .cc-richtext [style*="background:rgb(255,255,255" i],
[data-theme="dark"] .cc-richtext [style*="background: rgb(255,255,255" i],
[data-theme="dark"] .cc-richtext [style*="background-color:rgb(255,255,255" i],
[data-theme="dark"] .cc-richtext [style*="background-color: rgb(255,255,255" i] {
	background-color: var(--card-inner-bg) !important;
	background-image: none !important;
}

/* Legacy WordPress block-editor output ("Group" block etc.) that marks a
   white background via class rather than inline style. Same reasoning
   and same Dark-only scope as above. */
[data-theme="dark"] .cc-richtext .has-white-background-color,
[data-theme="dark"] .cc-richtext .has-background.has-white-background-color {
	background-color: var(--card-inner-bg) !important;
}

/* ---------------------------------------------------------------------- */
/* Premium Doctor Cards — additive skin for the Doctors List Content Page */
/* only. Scoped entirely under .cc-doctors-grid / .doctor-card so it can  */
/* never affect any other Content Page's .cc-richtext output. Rendered   */
/* by assets/js/views/content.js (renderDoctorsSection/renderDoctorCard) */
/* from the SAME card.content the editor already writes — no new editor  */
/* fields, no inline styles, no per-card CSS required. Every element      */
/* below only appears when the editor actually filled that line in, so   */
/* older, simpler doctor entries still render a clean, complete card.     */
/* ---------------------------------------------------------------------- */
.doctor-directory { margin-bottom: 4px; }

/* ---- Search + filter + sort toolbar ---- */
.doctor-toolbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
}
.doctor-search {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-card);
	transition: box-shadow .2s var(--ease-smooth), border-color .2s var(--ease-smooth);
}
.doctor-search:focus-within { border-color: var(--cc-accent, var(--accent)); box-shadow: var(--shadow-card-hover); }
.doctor-search-icon { flex: 0 0 auto; display: flex; padding: 0 6px 0 14px; color: var(--text-muted); }
.doctor-search-icon svg { width: 17px; height: 17px; }
.doctor-search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	padding: 13px 14px 13px 4px;
	outline: none;
}
.doctor-search input::placeholder { color: var(--text-muted); }

.doctor-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.doctor-select {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	min-width: 0;
}
.doctor-select-icon { flex: 0 0 auto; display: flex; padding-left: 12px; color: var(--text-muted); }
.doctor-select-icon svg { width: 15px; height: 15px; }
.doctor-select select {
	flex: 1;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	padding: 11px 30px 11px 14px;
	outline: none;
	cursor: pointer;
}
.doctor-select-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.doctor-select-chevron svg { width: 14px; height: 14px; }
.doctor-select-sort select { padding-left: 6px; }

.doctor-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-muted);
	background: var(--surface);
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
	font-size: 13.5px;
}

@media (min-width: 640px) {
	.doctor-filter-row { grid-template-columns: 1fr 1fr auto; }
	.doctor-select-sort { min-width: 190px; }
}
@media (min-width: 900px) {
	.doctor-toolbar { flex-direction: row; align-items: center; }
	.doctor-search { flex: 1 1 auto; }
	.doctor-filter-row { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.doctor-search, .doctor-select { transition: none !important; }
}

.cc-doctors-grid {
	display: grid;
	grid-template-columns: 1fr;
	/* 34px clears the floating call button's downward overflow (22px)
	   plus breathing room, so it never overlaps the next card. */
	gap: 34px;
	margin-bottom: 20px;
}

/* Brief placeholder shown only for the instant before the first chunk of
   Doctor Cards streams in (see mountDoctorGrid() in content.js) — avoids
   a jarring blank gap / layout jump on large (100+) doctor lists. */
.cc-doctors-grid-loading:empty {
	min-height: 120px;
}

.doctor-card {
	position: relative;
	overflow: visible;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 22px;
	box-shadow: var(--shadow-card);
	padding: 20px 18px 22px;
	transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-smooth);
	will-change: transform;
}
.doctor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* ---- Header: gradient wash + glass, photo, badges, chips ---- */
.doctor-card-header {
	position: relative;
	margin: -20px -18px 0;
	padding: 18px 18px 16px;
	border-radius: 22px 22px 16px 16px;
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--cc-accent, var(--accent)) 14%, transparent) 0%, transparent 60%),
		linear-gradient(135deg, var(--bbb-midnight) 0%, var(--bbb-midnight-2) 100%);
	background-color: var(--bbb-midnight);
}
.doctor-fav-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;
	background: rgba(255,255,255,.10);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform .25s var(--ease-spring), background-color .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.doctor-fav-btn svg { opacity: .85; transition: opacity .2s ease; }
.doctor-fav-btn:active { transform: scale(.88); }
.doctor-fav-btn.is-active { color: var(--bbb-garnet-bright); background: rgba(255,255,255,.16); }
.doctor-fav-btn.is-active svg { opacity: 1; animation: doctorFavPop .38s var(--ease-spring); }
@keyframes doctorFavPop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.doctor-photo-row { display: flex; align-items: flex-start; gap: 14px; padding-right: 36px; }

.doctor-photo-badge-wrap { position: relative; flex: 0 0 auto; }
.doctor-photo-wrap {
	position: relative;
	display: flex;
	width: 68px;
	height: 68px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow-float);
	border: 2.5px solid rgba(255,255,255,.9);
}
.doctor-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity .35s var(--ease-smooth);
}
.doctor-photo-wrap.is-loaded .doctor-photo { opacity: 1; }
.doctor-photo-skeleton {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255,255,255,.06) 30%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.06) 70%);
	background-size: 200% 100%;
	animation: doctorShimmer 1.4s ease-in-out infinite;
}
.doctor-photo-wrap.is-loaded .doctor-photo-skeleton { display: none; }
@keyframes doctorShimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.doctor-photo-wrap.doctor-avatar {
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--cc-accent, var(--accent)) 0%, var(--bbb-garnet-deep) 130%);
	color: #fff;
	font-family: var(--font-en);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: .3px;
}

.doctor-verified-badge {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #2f8fff;
	color: #fff;
	border: 2.5px solid var(--bbb-midnight);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.doctor-status-dot {
	position: absolute;
	left: -3px;
	top: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2.5px solid var(--bbb-midnight);
}
.doctor-status-online { background: #2ecc71; box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); animation: doctorStatusPulse 2s ease-out infinite; }
.doctor-status-offline { background: #9099a6; }
@keyframes doctorStatusPulse {
	0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.doctor-head-text { min-width: 0; padding-top: 1px; }
.doctor-name { margin: 0; font-size: 17px; font-weight: 800; color: #fff; line-height: 1.28; }
.doctor-tagline {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--bbb-garnet-bright);
	text-transform: uppercase;
	letter-spacing: .3px;
}
.doctor-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.doctor-chip {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.16);
	padding: 3px 9px;
	border-radius: 999px;
	letter-spacing: .2px;
}
.doctor-degree { margin: 6px 0 0; font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.45; }

.doctor-exp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	color: var(--bbb-ink);
	background: linear-gradient(135deg, #F3DFAF 0%, var(--bbb-gold) 100%);
	box-shadow: 0 4px 10px -4px rgba(194, 154, 85, .55);
}

.doctor-divider { height: 1px; background: var(--border); margin: 16px 0 14px; }

/* ---- Info grid ---- */
.doctor-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 16px;
}
.doctor-info-box {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 11px;
	border-radius: var(--radius-sm);
	background: var(--surface);
	transition: background-color .2s var(--ease-smooth);
}
.doctor-info-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
}
.doctor-info-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.doctor-info-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.doctor-info-value {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text);
	word-break: break-word;
	/* Chamber/Phone/WhatsApp can now hold several newline-joined lines
	   (see MULTILINE_DOCTOR_FIELDS in assets/js/views/content.js) —
	   render each on its own line instead of collapsing them. */
	white-space: pre-line;
}

/* Visiting Time — one block per hospital (🏥 <name> + its own schedule
   lines), instead of one flat value, so every hospital under "Time:" is
   readable and none of them are ever lost. See renderVisitingTimeBox()
   and buildVisitingGroups() in assets/js/views/content.js. */
.doctor-visiting-groups { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; width: 100%; }
.doctor-visiting-group + .doctor-visiting-group {
	padding-top: 10px;
	border-top: 1px dashed var(--border);
}
.doctor-visiting-hospital {
	font-size: 13px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 2px;
}
.doctor-visiting-schedule {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	white-space: pre-line;
	word-break: break-word;
}
.doctor-info-box-visiting { align-items: flex-start; }

/* ---- Bottom action grid ---- */
.doctor-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 6px;
}
.doctor-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 13px 10px;
	border-radius: 16px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	transform: translateZ(0);
	transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease-smooth), filter .2s ease;
}
.doctor-btn:active { transform: scale(.96); }
.doctor-btn svg { flex-shrink: 0; width: 16px; height: 16px; }
.doctor-btn-whatsapp { background: #25D366; color: #fff; box-shadow: 0 8px 18px -8px rgba(37, 211, 102, .55); }
.doctor-btn-map { background: #2f8fff; color: #fff; box-shadow: 0 8px 18px -8px rgba(47, 143, 255, .5); }
.doctor-btn-copy { background: #f5871f; color: #fff; box-shadow: 0 8px 18px -8px rgba(245, 135, 31, .5); }
.doctor-btn-appointment { background: #8b5cf6; color: #fff; box-shadow: 0 8px 18px -8px rgba(139, 92, 246, .5); }

/* Shared GPU-accelerated ripple: a radial-gradient circle scaled up from
   the tap point, purely via transform + opacity so it never triggers
   layout/paint thrash. */
.doctor-btn::after,
.doctor-fab-call::after {
	content: "";
	position: absolute;
	left: var(--ripple-x, 50%);
	top: var(--ripple-y, 50%);
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}
.doctor-btn.is-rippling::after,
.doctor-fab-call.is-rippling::after {
	animation: doctorRipple .55s var(--ease-smooth);
}
@keyframes doctorRipple {
	0%   { transform: scale(0);  opacity: 1; }
	100% { transform: scale(9);  opacity: 0; }
}

/* ---- Floating emergency call FAB, overlapping the card's bottom edge ---- */
.doctor-fab-call {
	position: absolute;
	right: 18px;
	bottom: -22px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bbb-garnet-bright) 0%, var(--bbb-garnet) 55%, var(--bbb-garnet-deep) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-float);
	z-index: 2;
	transition: transform .2s var(--ease-spring);
	animation: doctorFabPulse 2.4s ease-in-out infinite;
}
.doctor-fab-call svg { width: 24px; height: 24px; }
.doctor-fab-call:active { transform: scale(.92); }
@keyframes doctorFabPulse {
	0%, 100% { box-shadow: var(--shadow-float), 0 0 0 0 rgba(209, 38, 78, .35); }
	50%      { box-shadow: var(--shadow-float), 0 0 0 10px rgba(209, 38, 78, 0); }
}

/* Reduced-motion + the site-wide "Animations off" toggle both disable
   every purely decorative motion introduced above. Ripple keeps working
   as a simple color flash isn't added here — removing the animation
   class entirely is enough since opacity starts at 0. */
html.bbb-no-anim .doctor-fab-call,
html.bbb-no-anim .doctor-status-online,
html.bbb-no-anim .doctor-photo-skeleton,
html.bbb-no-anim .doctor-fav-btn.is-active svg {
	animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.doctor-fab-call, .doctor-status-online, .doctor-photo-skeleton, .doctor-card, .doctor-btn, .doctor-fav-btn svg {
		animation: none !important;
		transition: none !important;
	}
}

@media (min-width: 640px) {
	.cc-doctors-grid { grid-template-columns: repeat(2, 1fr); }
	.doctor-actions { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
	.cc-hero { height: 320px; border-radius: var(--radius-lg); }
	.cc-hero-text h1 { font-size: 28px; }
	.cc-body { padding-top: 24px; }
	.cc-body:has(.cc-doctors-grid) { max-width: 980px; }
}

/* ---------------------------------------------------------------------- */
/* Statistics row — glass tiles with mono tabular numerals, the ledger-   */
/* like "data" register that recurs through blood-group badges and IDs.  */
/* ---------------------------------------------------------------------- */
.db-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 18px;
	animation: dbFadeUp .45s ease .1s both;
}

.db-stat-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 15px 13px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	transition: transform .16s var(--ease-spring), box-shadow .16s ease;
}
.db-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

.db-stat-icon {
	width: 34px;
	height: 34px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.db-stat-icon svg { width: 18px; height: 18px; }

.db-stat-value {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 19px;
	font-weight: 800;
	color: var(--text);
	line-height: 1.1;
}

.db-stat-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	line-height: 1.3;
}

.db-tone-red    .db-stat-icon { background: rgba(209, 38, 78, .14); color: var(--accent-strong); }
.db-tone-rose   .db-stat-icon { background: rgba(255, 92, 122, .16); color: #d13d63; }
.db-tone-green  .db-stat-icon { background: rgba(31, 158, 85, .16);  color: #1a7f37; }
.db-tone-gray   .db-stat-icon { background: rgba(107, 114, 128, .15); color: #6b7280; }
.db-tone-blue   .db-stat-icon { background: rgba(37, 99, 235, .14);  color: #2563eb; }
.db-tone-amber  .db-stat-icon { background: rgba(194, 154, 85, .22); color: #8a6011; }
.db-tone-purple .db-stat-icon { background: rgba(139, 92, 246, .16); color: #7c3aed; }

.db-tone-custom .db-stat-icon {
	background: color-mix(in srgb, var(--db-stat-custom, currentColor) 16%, transparent);
	color: var(--db-stat-custom, inherit);
}

/* Dashboard Manager > Hero Banner: optional entrance animation + custom
   CTA button + custom right-side image. */
@keyframes bbb-hero-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bbb-hero-slide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.db-hero-anim-fade { animation: bbb-hero-fade .5s ease both; }
.db-hero-anim-slide { animation: bbb-hero-slide .5s ease both; }
.db-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 6px 8px 6px 20px;
	border-radius: 999px;
	background: #fff;
	color: var(--accent-strong);
	font-size: 13.5px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .35);
	transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease-smooth);
}
.db-hero-cta::after {
	content: "";
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--bbb-garnet-bright), var(--accent-strong));
	background-size: 15px 15px, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}
.db-hero-cta:hover { box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .4); }
.db-hero-cta:active { transform: scale(.96); }
.db-hero-custom-art { max-width: 100%; max-height: 150px; object-fit: contain; }

/* Dashboard Manager > Notifications: optional theme-only announcement
   banner shown above the dashboard sections. */
.db-announcement {
	display: block;
	background: linear-gradient(135deg, var(--bbb-garnet-bright), var(--accent, #D1264E));
	color: #fff;
	border-radius: 16px;
	padding: 13px 17px;
	margin-bottom: 16px;
	font-size: 13.5px;
	text-decoration: none;
	box-shadow: 0 12px 26px -16px rgba(209, 38, 78, .5);
}
.db-announcement strong { display: block; margin-bottom: 2px; }


@media (max-width: 360px) {
	.db-stat-value { font-size: 16.5px; }
	.db-stat-label { font-size: 10px; }
}
@media (min-width: 900px) {
	.db-stats { grid-template-columns: repeat(4, minmax(0, 220px)); }
}

/* ---------------------------------------------------------------------- */
/* Recent requests — clean glass rows, mono blood-group badges           */
/* ---------------------------------------------------------------------- */
.db-recent {
	border-radius: var(--radius-lg);
	animation: dbFadeUp .45s ease .15s both;
}

.db-recent-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.db-recent-head h2 { font-size: 15.5px; }

.db-see-all {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--accent);
}

.db-recent-list { display: flex; flex-direction: column; gap: 10px; }

.db-request-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.db-request-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
	border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.db-request-card:active { transform: scale(.98); }

.db-request-hospital svg { flex-shrink: 0; vertical-align: -1px; margin-right: 1px; color: var(--text-muted); }

.db-request-badge {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 12px;
	font-family: var(--font-mono);
}
.db-request-badge.db-tone-red    { background: #FBE3E9; color: var(--accent-strong); }
.db-request-badge.db-tone-blue   { background: #DBEAFE; color: #2563eb; }
.db-request-badge.db-tone-green  { background: #DCFCE7; color: #1a7f37; }
.db-request-badge.db-tone-purple { background: #EDE9FE; color: #7c3aed; }

.db-request-info { flex: 1; min-width: 0; }
.db-request-name { font-weight: 700; font-size: 14px; color: var(--text); }
.db-request-hospital {
	font-size: 12.5px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.db-request-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	font-size: 11px;
	color: var(--text-muted);
}

.db-urgency-pill {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(209, 38, 78, .14);
	color: var(--accent-strong);
}

.db-request-arrow {
	flex-shrink: 0;
	display: flex;
	color: var(--text-muted);
}

@media (min-width: 900px) {
	.db-recent-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ---------------------------------------------------------------------- */
/* Calendar Summary Card — replaces the Statistics Cards + Recent Blood  */
/* Requests sections. Premium rounded glass surface in the same Donor    */
/* Card visual language (garnet gradients, glass blur, squircle radii)   */
/* as everything else on this dashboard. See calendarSummaryCard() in    */
/* assets/js/views/dashboard.js and assets/js/calendar-utils.js.         */
/* ---------------------------------------------------------------------- */
.db-cal-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 168px;
	width: 100%;
	border-radius: 18px;
	padding: 8px 12px 6px;
	margin-bottom: 12px;
	background:
		radial-gradient(circle at 88% -6%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .06) 30%, transparent 55%),
		linear-gradient(150deg, #5B214A 0%, #8B1E5A 52%, #D72660 100%);
	box-shadow: 0 24px 50px rgba(183, 32, 88, .30), 0 4px 14px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .10);
	animation: dbFadeUp .45s ease .1s both;
}

/* Soft ambient mesh glow — several low-opacity radial blobs layered
   behind the content so the surface reads as a lit, premium glass
   panel (matches the reference "mesh gradient" backdrop) rather than
   a flat two-stop gradient. Purely decorative / non-interactive. */
.db-cal-mesh {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .16) 0%, transparent 40%),
		radial-gradient(circle at 85% 60%, rgba(255, 138, 178, .22) 0%, transparent 45%),
		radial-gradient(circle at 30% 90%, rgba(120, 20, 70, .35) 0%, transparent 55%);
}

.db-cal-card::before,
.db-cal-card::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.db-cal-card::before {
	width: 240px;
	height: 240px;
	left: -70px;
	bottom: -90px;
	background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, transparent 70%);
}
.db-cal-card::after {
	width: 170px;
	height: 170px;
	left: 38%;
	top: 30%;
	background: radial-gradient(circle, rgba(255, 255, 255, .08) 0%, transparent 72%);
}

.db-cal-glow {
	position: absolute;
	top: -60px;
	right: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .10) 45%, transparent 72%);
	filter: blur(3px);
	pointer-events: none;
	z-index: 0;
}

/* Very soft blood-drop watermark, bottom-right of the card — purely
   decorative brand mark, sits behind all text (z-index 0) at low
   opacity so it never competes with the actual data. */
.db-cal-watermark {
	position: absolute;
	right: -10px;
	bottom: -12px;
	width: 90px;
	height: 90px;
	color: rgba(255, 255, 255, .07);
	pointer-events: none;
	z-index: 0;
	transform: rotate(-6deg);
}

.db-cal-row-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	position: relative;
	z-index: 1;
}
.db-cal-date-block {
	min-width: 0;
	display: flex;
	/* Was `align-items: baseline`. That forces the browser to align this
	   row's items by computed font-metric baseline — fine for same-size
	   text, but this row mixes a 26–29px digit (.db-cal-day) with an
	   11px line (.db-cal-year) that starts with the Bengali digit "১".
	   With such a large size ratio, Chromium/WebView's baseline-metric
	   calculation for that glyph's ascent can be miscalculated, painting
	   part of "১" outside its line box, where it gets cut off by this
	   card's `overflow: hidden`. `flex-end` bottom-aligns the items by
	   their box edges instead of font-metric baseline — no glyph-metric
	   computation involved, so the clipping can't occur — while landing
	   visually within ~2px of the original baseline position (verified),
	   so the row keeps its original look. */
	align-items: flex-end;
	gap: 2px 4px;
	flex-wrap: wrap;
}
.db-cal-icon-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	align-self: center;
	margin-right: 1px;
}
.db-cal-icon-badge svg { width: 11px; height: 11px; }
.db-cal-day {
	font-size: 26px; /* mobile base — was 23px, +~13% per 10–15% size-bump spec */
	font-weight: 800;
	font-family: 'Hind Siliguri', var(--font-bn, sans-serif);
	font-variant-numeric: normal;
	font-feature-settings: normal;
	color: #fff;
	line-height: 1;
	letter-spacing: -.5px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .2);
}
.db-cal-month {
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, .96);
	line-height: 1;
	letter-spacing: -.2px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.db-cal-year {
	/* DIAGNOSTIC TEST: font-size, font-weight, line-height and
	   letter-spacing forced to match .db-cal-line-bn exactly, to test
	   whether the clipping is caused by this element's smaller
	   typography. Revert after the test. */
	font-size: 11px;
	font-weight: 700;
	font-family: 'Hind Siliguri', var(--font-bn, sans-serif);
	font-variant-numeric: normal;
	font-feature-settings: normal;
	color: rgba(255, 255, 255, .8);
	letter-spacing: .1px;
	line-height: 1.3;
}

.db-cal-btn-top {
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 45%;
	padding: 4px 7px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .34);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	color: #fff;
	font-size: 7px;
	font-weight: 700;
	line-height: 1.1;
	gap: 2px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -6px 12px -8px rgba(0, 0, 0, .12);
	transition: transform .16s var(--ease-spring), background .16s var(--ease-smooth), box-shadow .16s var(--ease-smooth), border-color .16s var(--ease-smooth);
}
.db-cal-btn-top svg:first-child { color: rgba(255, 255, 255, .85); }
.db-cal-btn-top span { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-cal-btn-top svg { flex-shrink: 0; width: 7px; height: 7px; vertical-align: -1px; }
.db-cal-btn-top:hover {
	background: rgba(255, 255, 255, .26);
	border-color: rgba(255, 255, 255, .52);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .34);
}
.db-cal-btn-top:active { transform: scale(.97); }

.db-cal-info-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 2px;
	position: relative;
	z-index: 1;
}

.db-cal-line {
	display: flex;
	align-items: center;
	gap: 6px;
}
.db-cal-line-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .18);
	border: 1px solid rgba(255, 255, 255, .10);
	color: rgba(255, 255, 255, .85);
}
.db-cal-line-icon svg { width: 9px; height: 9px; }
.db-cal-line-icon.db-cal-icon-star { background: rgba(215, 38, 96, .55); color: #ffd9e4; }
.db-cal-line.has-event .db-cal-line-icon.db-cal-icon-star { color: #ffd479; }
.db-cal-line-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0px;
}
.db-cal-line-bn {
	font-size: 11px;
	font-weight: 700;
	font-family: 'Hind Siliguri', var(--font-bn, sans-serif);
	font-variant-numeric: normal;
	font-feature-settings: normal;
	color: rgba(255, 255, 255, .96);
	letter-spacing: .1px;
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
}
.db-cal-line-en {
	font-size: 7px;
	font-weight: 500;
	color: rgba(255, 255, 255, .58);
	letter-spacing: .1px;
	line-height: 1.05;
}
.db-cal-line.db-cal-event.has-event .db-cal-line-bn { color: #ffe8c2; }

.db-cal-sun-row {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin-top: 2px;
	padding-top: 3px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	position: relative;
	z-index: 1;
}
.db-cal-sun-item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.db-cal-sun-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .16);
	color: #ffd479;
}
.db-cal-sun-icon svg { width: 9px; height: 9px; }
.db-cal-sun-text {
	display: flex;
	flex-direction: column;
	gap: 0px;
	min-width: 0;
}
.db-cal-sun-label {
	font-size: 6.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .7);
	line-height: 1.1;
}
.db-cal-sun-value {
	font-size: 9px;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
	line-height: 1.1;
}
.db-cal-sun-sep {
	display: none;
}

@media (min-width: 400px) {
	.db-cal-day { font-size: 29px; } /* was 26px, +~11.5% per 10–15% size-bump spec */
}
@media (min-width: 400px) and (max-width: 899px) {
	.db-cal-month { font-size: 14px; }
	.db-cal-year { font-size: 11px; line-height: 1.3; } /* DIAGNOSTIC: matched to .db-cal-line-bn */
}
@media (min-width: 900px) {
	.db-cal-month { font-size: 17px; }
	.db-cal-year { font-size: 8.5px; line-height: 1.05; } /* DIAGNOSTIC: matched to .db-cal-line-bn's 900px+ override */
	.db-cal-day { font-size: 23px; }
}
@media (min-width: 900px) {
	.db-cal-card { max-width: 640px; aspect-ratio: 450 / 197; }
	/* Desktop typography for the calendar card is intentionally frozen at
	   its original size — the size bump above is mobile-only. */
	.db-cal-line-bn { font-size: 8.5px; line-height: 1.05; }
}

/* ---------------------------------------------------------------------- */
/* Floating add / emergency button on the dashboard route — bigger,      */
/* glowing, gentle pulse; position/click handler untouched (visual only) */
/* ---------------------------------------------------------------------- */
.fab-emergency {
	width: 66px;
	height: 66px;
	animation: dbPulseGlow 2.6s ease-in-out infinite;
}
.fab-emergency:hover { animation-play-state: paused; }

/* ---------------------------------------------------------------------- */
/* (Removed) Dashboard-only bottom slogan card + its route-specific       */
/* override that hid the sitewide footer on the dashboard route.          */
/* Superseded by the single, sitewide Branding Banner — see               */
/* "Global Branding Banner" below — which now renders identically on      */
/* every logged-in route, dashboard included.                             */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Mobile Bottom Navigation — premium banking-app style (UCB-inspired).   */
/* Mobile-only (<900px); the existing desktop <aside class="app-sidebar"> */
/* already takes over at >=900px and is completely untouched by this.    */
/* Nothing above this block was modified to add this feature.            */
/* ---------------------------------------------------------------------- */

.bbb-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 68px;
	padding: 8px 12px;
	padding-bottom: calc(8px + env(safe-area-inset-bottom));
	box-sizing: border-box;
	background: var(--nav-bg);
	border-radius: 24px 24px 0 0;
	border-top: 1px solid rgba(0, 0, 0, .05);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 99999;
}

.bbb-bottom-nav-item {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
}

.bbb-bn-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	max-width: 100%;
	padding: 4px 10px;
	border-radius: 18px;
	box-sizing: border-box;
	transition: width 300ms ease, height 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.bbb-bottom-nav-item .bbb-bn-icon {
	font-size: 18px;
	color: #888888;
	transition: color 300ms ease;
	line-height: 1;
}

.bbb-bottom-nav-item .bbb-bn-label {
	font-size: 10.5px;
	font-weight: 600;
	color: #777777;
	transition: color 300ms ease;
	line-height: 1;
	white-space: nowrap;
}

.bbb-bottom-nav-item.active .bbb-bn-pill {
	width: 96px;
	height: 46px;
	padding: 0;
	background: linear-gradient(135deg, #A31621, #D9222D);
	box-shadow: 0 6px 16px rgba(163, 22, 33, .30);
}

.bbb-bottom-nav-item.active .bbb-bn-icon,
.bbb-bottom-nav-item.active .bbb-bn-label {
	color: #ffffff;
}

/* Tap ripple */
.bbb-bottom-nav-item .bbb-bn-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(163, 22, 33, .18);
	transform: scale(0);
	animation: bbbNavRipple 550ms ease-out;
	pointer-events: none;
}
.bbb-bottom-nav-item.active .bbb-bn-ripple {
	background: rgba(255, 255, 255, .35);
}
@keyframes bbbNavRipple {
	to { transform: scale(2.6); opacity: 0; }
}

@media (hover: hover) {
	.bbb-bottom-nav-item:not(.active):hover .bbb-bn-icon,
	.bbb-bottom-nav-item:not(.active):hover .bbb-bn-label {
		color: var(--accent, #A31621);
	}
}

.bbb-developer-page {
	width: 100%;
	padding: 4px 0 76px;
}

.bbb-developer-card-native {
	position: relative;
	overflow: hidden;
	width: min(100%, 560px);
	max-width: 560px;
	margin: 0 auto;
	padding: 24px 22px 20px;
	border-radius: 25px;
	background:
		radial-gradient(circle at 15% 18%, rgba(255,255,255,.10) 0 2px, transparent 3px),
		linear-gradient(145deg, #8f0715 0%, #b70f25 48%, #d01e3d 100%);
	background-size: 42px 42px, auto;
	box-shadow: 0 18px 42px rgba(122, 15, 25, .22);
	color: #fff;
	text-align: center;
	border: 1px solid rgba(255,255,255,.20);
	box-sizing: border-box;
}

.bbb-developer-card-glow {
	position: absolute;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	top: -105px;
	right: -70px;
	background: rgba(255,255,255,.08);
	filter: blur(2px);
	pointer-events: none;
}

.bbb-developer-featured {
	position: absolute;
	top: 15px;
	right: -38px;
	padding: 6px 45px;
	transform: rotate(35deg);
	background: #e6b84e;
	color: #281d0b;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .08em;
	box-shadow: 0 5px 14px rgba(0,0,0,.15);
}

.bbb-developer-photo-wrap {
	position: relative;
	width: 104px;
	height: 104px;
	margin: 3px auto 12px;
}

.bbb-developer-photo {
	display: block;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid rgba(255,255,255,.95);
	box-shadow: 0 8px 22px rgba(0,0,0,.25);
	background: #fff;
}

.bbb-developer-online {
	position: absolute;
	right: 0;
	bottom: 3px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #21d37b;
	border: 3px solid #8f0715;
	box-shadow: 0 0 0 2px rgba(255,255,255,.32);
}

.bbb-developer-name {
	position: relative;
	margin: 0;
	font-size: clamp(23px, 5.4vw, 30px);
	font-weight: 900;
	line-height: 1.2;
	color: #fff;
}

.bbb-developer-type {
	display: block;
	margin: 5px 0 7px;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.2;
	color: #ffd35a;
	letter-spacing: .01em;
}

.bbb-developer-role {
	display: inline-block;
	margin: 0 auto 11px;
	padding: 7px 14px;
	border-radius: 999px;
	background: linear-gradient(90deg, #e92861, #d7194a);
	border: 1px solid rgba(255,255,255,.16);
	font-size: 13.5px;
	font-weight: 800;
	color: #fff;
}

.bbb-developer-location {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255,255,255,.94);
}

.bbb-developer-bio {
	margin: 10px 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255,255,255,.90);
}

.bbb-developer-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.bbb-developer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 8px 10px;
	border-radius: 13px;
	text-decoration: none !important;
	font-size: 13.5px;
	font-weight: 900;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 6px 14px rgba(0,0,0,.11);
	transition: transform .15s ease, filter .15s ease;
}

.bbb-developer-btn:active {
	transform: scale(.97);
}

.bbb-developer-call,
.bbb-developer-wa {
	background: linear-gradient(135deg, #20c96b, #10a85c);
}

.bbb-developer-fb {
	grid-column: 1 / -1;
	background: #1877f2;
}

@media (max-width: 520px) {
	.bbb-developer-page {
		padding: 2px 0 72px;
	}
	.bbb-developer-card-native {
		width: calc(100% - 20px);
		max-width: 520px;
		border-radius: 23px;
		padding: 21px 14px 17px;
	}
	.bbb-developer-photo-wrap,
	.bbb-developer-photo {
		width: 92px;
		height: 92px;
	}
	.bbb-developer-photo-wrap {
		margin-bottom: 10px;
	}
	.bbb-developer-online {
		width: 19px;
		height: 19px;
		bottom: 2px;
		border-width: 3px;
	}
	.bbb-developer-name {
		font-size: 24px;
	}
	.bbb-developer-type {
		font-size: 14px;
		margin: 4px 0 6px;
	}
	.bbb-developer-role {
		font-size: 12.5px;
		padding: 6px 12px;
		margin-bottom: 9px;
	}
	.bbb-developer-location {
		font-size: 12.5px;
	}
	.bbb-developer-bio {
		font-size: 12px;
		margin: 8px 0 13px;
	}
	.bbb-developer-actions {
		gap: 7px;
	}
	.bbb-developer-btn {
		font-size: 12.5px;
		min-height: 43px;
		padding: 7px 6px;
	}
}

@media (max-width: 390px) {
	.bbb-developer-card-native {
		width: calc(100% - 16px);
		padding-left: 11px;
		padding-right: 11px;
	}
	.bbb-developer-name {
		font-size: 22px;
	}
	.bbb-developer-type {
		font-size: 13px;
	}
	.bbb-developer-role {
		font-size: 11.5px;
	}
	.bbb-developer-location {
		font-size: 11.5px;
	}
	.bbb-developer-btn {
		font-size: 11.5px;
	}
}

@media (min-width: 900px) {
	.bbb-bottom-nav, .bbb-more-sheet { display: none; }
}

/* Reserve space so page content never sits under the fixed nav (mobile only). */
@media (max-width: 899px) {
	.app-main { padding-bottom: calc(24px + 68px + env(safe-area-inset-bottom)); }
}

/* ================================================================
   Bottom Navigation — Facebook-style scroll auto-hide.
   Purely additive: does not change any color, icon, dimension, or
   existing declaration on `.bbb-bottom-nav` above — only adds a
   transform/transition so the already-fixed bar can be visually slid
   off-screen and back by assets/js/bottom-nav-scroll.js toggling one
   class. `.app-main`'s padding-bottom above is untouched, so
   hiding/showing the bar never resizes or shifts page content (the
   bar stays position:fixed and is only translated). This block never
   reads from or writes to any CSS var/class owned by
   inc/class-bottom-nav-manager.php / assets/css/bottom-nav-manager.css. */
.bbb-bottom-nav {
	transform: translateY(0);
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.bbb-bottom-nav.is-scroll-hidden {
	/* 100% of the bar's own (fixed) height, plus its safe-area inset
	   again for extra headroom, so nothing — including the bottom
	   box-shadow — remains visible below the viewport edge. */
	transform: translateY(calc(100% + env(safe-area-inset-bottom)));
}

@media (prefers-reduced-motion: reduce) {
	.bbb-bottom-nav {
		transition: none;
	}
}

/* ================================================================
   App viewport scrollbar — hide the browser/WebView scroll indicator
   while preserving normal vertical touch scrolling. The SPA scrolls
   the document/window (see bottom-nav-scroll.js), so target the root
   scrolling element rather than an inner dashboard container.
   ================================================================ */
html,
body {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
	background: transparent !important;
}


/* Android-style search shared by regular service/content pages. Doctors keep their own toolbar. */
.service-search-wrap { margin: 0 0 18px; }
.service-search { min-height: 54px; border-radius: 18px; }
.service-search .doctor-search-icon { padding-left: 16px; }
.service-search .doctor-search-icon svg { width: 20px; height: 20px; }
.service-search input { font-size: 15px; padding-top: 16px; padding-bottom: 16px; }
.service-search-empty { margin: 12px 4px 0; text-align: center; color: var(--text-muted); font-size: 13px; }
.cc-richtext > [hidden], .bbb-people-grid > [hidden], .cc-gallery-item[hidden], .cc-lead[hidden] { display: none !important; }

/* ======================================================================
   Donor Search avatar — matches the Profile page's premium photo style:
   circular white/surface ring + subtle blood-red halo. Search/filter,
   donor data and card behaviour are intentionally unchanged.
   ====================================================================== */
.donor-card-premium .dcp-top > .life-ring {
	flex: 0 0 78px;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	padding: 4px;
	background: var(--surface-raised);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
		0 7px 20px color-mix(in srgb, var(--accent) 18%, transparent),
		0 0 22px color-mix(in srgb, var(--accent) 11%, transparent);
}
.donor-card-premium .dcp-top > .life-ring::before {
	display: none;
}
.donor-card-premium .dcp-avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 0;
	object-fit: cover;
	background: var(--surface);
}
.donor-card-premium .dcp-online-dot {
	right: 1px;
	bottom: 4px;
	width: 15px;
	height: 15px;
	border: 3px solid var(--surface-raised);
	box-shadow: 0 2px 6px color-mix(in srgb, #000 18%, transparent);
}

/* Blood Collection Center — dedicated Android-app style directory */
.bcc-directory{margin:-2px -2px 10px}.bcc-hero{position:relative;overflow:hidden;min-height:190px;padding:24px;border-radius:22px;color:#fff;background:radial-gradient(circle at 88% 30%,rgba(255,255,255,.12),transparent 25%),linear-gradient(135deg,#ad0028,#e0163e 58%,#a50027);box-shadow:0 10px 28px rgba(170,0,36,.16)}.bcc-hero-copy{display:flex;gap:16px;align-items:flex-start;max-width:72%;position:relative;z-index:2}.bcc-logo{width:66px;height:66px;flex:0 0 66px;border-radius:17px;background:#fff;display:grid;place-items:center;font-size:33px;box-shadow:0 7px 18px rgba(0,0,0,.13)}.bcc-hero h1{margin:0 0 8px;color:#fff;font-size:25px;line-height:1.28}.bcc-hero p{margin:0;color:#fff;font-size:14px;line-height:1.55}.bcc-building{position:absolute;right:18px;bottom:22px;text-align:center}.bcc-building b{display:block;border:2px solid #fff;border-radius:5px;padding:3px 6px;font-size:9px}.bcc-building span{display:block;font-size:48px}.bcc-tools{display:flex;gap:10px;margin:20px 0 10px}.bcc-search{height:58px;flex:1;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface-raised);border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow-card)}.bcc-search span{font-size:25px;color:var(--text-muted)}.bcc-search input{width:100%;border:0!important;outline:0!important;background:transparent!important;color:var(--text)!important;box-shadow:none!important;padding:0!important;font-family:inherit;font-size:15px}.bcc-filter{width:58px;border:0;border-radius:17px;background:#fff0f3;color:#ae0029;font-size:22px}.bcc-count{margin:8px 2px 17px;font-size:14px;font-weight:700}.bcc-list{display:flex;flex-direction:column;gap:13px}.bcc-card{display:grid;grid-template-columns:68px 1fr;gap:14px;padding:16px;background:var(--surface-raised);border:1px solid var(--border);border-radius:19px;box-shadow:var(--shadow-card)}.bcc-icon{width:64px;height:64px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#e91c45,#aa0028);font-size:31px;box-shadow:0 8px 17px rgba(190,0,45,.18)}.bcc-info h3{margin:0 0 6px;font-size:17px;line-height:1.35;color:var(--text)}.bcc-info p{margin:0 0 7px;color:var(--text-muted);font-size:13px;line-height:1.45}.bcc-phone{display:inline-block;margin-bottom:11px;color:#b30a2c!important;text-decoration:none!important;font-size:13px;font-weight:700}.bcc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bcc-actions a{min-height:39px;display:flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none!important;font-size:13px;font-weight:700}.bcc-call{background:linear-gradient(135deg,#e51a43,#b0002b);color:#fff!important}.bcc-map{border:1.5px solid #d91b40;color:#a90028!important;background:var(--surface-raised)}.bcc-help{margin-top:18px;padding:15px;border-radius:17px;background:#fff0f3;display:flex;align-items:center;gap:11px}.bcc-help>span{font-size:25px}.bcc-help div{flex:1}.bcc-help b,.bcc-help small{display:block}.bcc-help small{color:#777}.bcc-help a{padding:9px 11px;border-radius:9px;background:#b6002c;color:#fff!important;text-decoration:none!important;font-weight:700;font-size:12px}@media(max-width:520px){.bcc-hero{min-height:174px;padding:20px 17px}.bcc-hero-copy{max-width:76%;gap:12px}.bcc-logo{width:54px;height:54px;flex-basis:54px;font-size:27px}.bcc-hero h1{font-size:20px}.bcc-hero p{font-size:12px}.bcc-building span{font-size:40px}.bcc-card{grid-template-columns:58px 1fr;padding:14px;gap:11px}.bcc-icon{width:55px;height:55px;font-size:27px}.bcc-actions{grid-column:1/-1}.bcc-help{flex-wrap:wrap}}

/* ------------------------------------------------------------------ */
/* Premium About Page — same Android app card language as Blood       */
/* Collection Center (.bcc-*): identical radii (22px hero / 19px      */
/* card), spacing (13px card gap), and shadow tokens. Scoped entirely */
/* under .abt-* so no other Content Page is ever affected.            */
/* ------------------------------------------------------------------ */
.abt-page{margin:-2px -2px 10px}
.abt-hero{position:relative;overflow:hidden;min-height:150px;padding:22px;border-radius:22px;color:#fff;display:flex;gap:16px;align-items:center;background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.14),transparent 30%),linear-gradient(135deg,#ad0028,#e0163e 58%,#a50027);box-shadow:0 10px 28px rgba(170,0,36,.16)}
.abt-hero-icon{width:60px;height:60px;flex:0 0 60px;border-radius:17px;background:#fff;display:grid;place-items:center;font-size:29px;box-shadow:0 7px 18px rgba(0,0,0,.13);overflow:hidden}
.abt-hero-icon img{width:100%;height:100%;object-fit:cover}
.abt-hero-copy{min-width:0}
.abt-hero h1{margin:0 0 6px;color:#fff;font-size:21px;line-height:1.3}
.abt-hero p{margin:0;color:rgba(255,255,255,.92);font-size:13.5px;line-height:1.5}
.abt-cover{padding:0!important;overflow:hidden;margin-top:13px}
.abt-cover img{display:block;width:100%;height:auto}
.abt-body{display:flex;flex-direction:column;gap:13px;margin-top:13px}
.abt-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:19px;padding:18px;box-shadow:var(--shadow-card)}
.abt-card-lead{padding-top:16px}
.abt-card-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.abt-card-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--accent-soft)}
.abt-card-head h2{margin:0;font-size:16px;line-height:1.35;color:var(--text)}
.abt-card .cc-richtext{margin:0}
.abt-card .cc-richtext p:last-child,.abt-card .cc-richtext ul:last-child,.abt-card .cc-richtext ol:last-child{margin-bottom:0}
.abt-card .cc-gallery,.abt-card .cc-video,.abt-card .cc-map,.abt-card .cc-facebook{margin:0}
.abt-cta{position:relative;overflow:hidden;border-radius:22px;padding:22px;color:#fff;background:radial-gradient(circle at 90% -10%,rgba(255,255,255,.22),transparent 40%),linear-gradient(135deg,#ff2f5d,#e11d2e 55%,#a50027);box-shadow:0 14px 30px rgba(190,0,45,.28)}
.abt-cta-inner{position:relative;z-index:1}
.abt-cta h2{margin:0 0 6px;color:#fff;font-size:18px}
.abt-cta p{margin:0 0 16px;color:rgba(255,255,255,.92);font-size:13px;line-height:1.5}
.abt-cta-actions{display:flex;flex-direction:column;gap:10px}
.abt-cta-actions a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:14px;text-decoration:none!important;font-weight:700;font-size:14px}
.abt-cta-btn-solid{background:#fff;color:#a50027!important}
.abt-cta-btn-outline{background:rgba(255,255,255,.14);color:#fff!important;border:1.5px solid rgba(255,255,255,.5)}
@media(max-width:520px){.abt-hero{padding:18px;min-height:132px}.abt-hero-icon{width:50px;height:50px;flex-basis:50px;font-size:24px}.abt-hero h1{font-size:18.5px}.abt-hero p{font-size:12.5px}.abt-card{padding:15px}.abt-cta{padding:18px}}

/* Hospital & Medical — dedicated Android-app style directory (page-scoped) */
.bhm-directory{margin:-2px -2px 10px}.bhm-hero{position:relative;overflow:hidden;min-height:190px;padding:24px;border-radius:22px;color:#fff;background:radial-gradient(circle at 88% 30%,rgba(255,255,255,.12),transparent 25%),linear-gradient(135deg,#ad0028,#e0163e 58%,#a50027);box-shadow:0 10px 28px rgba(170,0,36,.16)}.bhm-hero-copy{display:flex;gap:16px;align-items:flex-start;max-width:76%;position:relative;z-index:2}.bhm-logo{width:66px;height:66px;flex:0 0 66px;border-radius:17px;background:#fff;color:#c80032;display:grid;place-items:center;font-size:31px;box-shadow:0 7px 18px rgba(0,0,0,.13)}.bhm-hero h1{margin:0 0 8px;color:#fff;font-size:25px;line-height:1.28}.bhm-hero p{margin:0;color:#fff;font-size:14px;line-height:1.55}.bhm-building{position:absolute;right:18px;bottom:22px;text-align:center;color:#fff}.bhm-building b{display:block;border:2px solid #fff;border-radius:5px;padding:3px 6px;font-size:9px}.bhm-building i{display:block;font-size:45px;margin-top:7px}.bhm-tools{display:flex;gap:10px;margin:20px 0 10px}.bhm-search{height:58px;flex:1;display:flex;align-items:center;gap:11px;padding:0 16px;background:var(--surface-raised);border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow-card)}.bhm-search i{font-size:19px;color:var(--text-muted)}.bhm-search input{width:100%;border:0!important;outline:0!important;background:transparent!important;color:var(--text)!important;box-shadow:none!important;padding:0!important;font-family:inherit;font-size:15px}.bhm-filter{width:58px;border:0;border-radius:17px;background:#fff0f3;color:#ae0029;font-size:18px}.bhm-count{margin:8px 2px 17px;font-size:14px;font-weight:700}.bhm-count i{color:#c80032;margin-right:4px}.bhm-list{display:flex;flex-direction:column;gap:13px}.bhm-card{display:grid;grid-template-columns:68px 1fr;gap:14px;padding:16px;background:var(--surface-raised);border:1px solid var(--border);border-radius:19px;box-shadow:var(--shadow-card)}.bhm-icon{width:64px;height:64px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#e91c45,#aa0028);color:#fff;font-size:29px;box-shadow:0 8px 17px rgba(190,0,45,.18)}.bhm-info h3{margin:0 0 6px;font-size:17px;line-height:1.35;color:var(--text)}.bhm-info p{margin:0 0 7px;color:var(--text-muted);font-size:13px;line-height:1.45}.bhm-info p i{color:#c80032;margin-right:3px}.bhm-phone{display:inline-flex;align-items:center;gap:5px;margin-bottom:11px;color:#b30a2c!important;text-decoration:none!important;font-size:13px;font-weight:700}.bhm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bhm-actions a{min-height:39px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;text-decoration:none!important;font-size:13px;font-weight:700}.bhm-call{background:linear-gradient(135deg,#e51a43,#b0002b);color:#fff!important}.bhm-map{border:1.5px solid #d91b40;color:#a90028!important;background:var(--surface-raised)}.bhm-help{margin-top:18px;padding:15px;border-radius:17px;background:#fff0f3;display:flex;align-items:center;gap:11px}.bhm-help>span{font-size:23px;color:#b6002c}.bhm-help div{flex:1}.bhm-help b,.bhm-help small{display:block}.bhm-help small{color:#777}.bhm-help a{padding:9px 11px;border-radius:9px;background:#b6002c;color:#fff!important;text-decoration:none!important;font-weight:700;font-size:12px}@media(max-width:520px){.bhm-hero{min-height:174px;padding:20px 17px}.bhm-hero-copy{max-width:78%;gap:12px}.bhm-logo{width:54px;height:54px;flex-basis:54px;font-size:25px}.bhm-hero h1{font-size:20px}.bhm-hero p{font-size:12px}.bhm-building i{font-size:38px}.bhm-card{grid-template-columns:58px 1fr;padding:14px;gap:11px}.bhm-icon{width:55px;height:55px;font-size:25px}.bhm-actions{grid-column:1/-1}.bhm-help{flex-wrap:wrap}}

/* Online Blood Groups — dedicated Android-app style directory */
.bog-directory{margin:-2px -2px 10px}.bog-hero{position:relative;overflow:hidden;min-height:190px;padding:24px;border-radius:22px;color:#fff;background:radial-gradient(circle at 88% 30%,rgba(255,255,255,.12),transparent 25%),linear-gradient(135deg,#ad0028,#e0163e 58%,#a50027);box-shadow:0 10px 28px rgba(170,0,36,.16)}.bog-hero-copy{display:flex;gap:16px;align-items:flex-start;max-width:82%;position:relative;z-index:2}.bog-logo{width:66px;height:66px;flex:0 0 66px;border-radius:17px;background:#fff;color:#c80032;display:grid;place-items:center;font-size:29px;box-shadow:0 7px 18px rgba(0,0,0,.13)}.bog-hero h1{margin:0 0 8px;color:#fff;font-size:25px;line-height:1.28}.bog-hero p{margin:0;color:#fff;font-size:14px;line-height:1.55}.bog-hero-copy span{display:inline-block;margin-top:10px;border:2px solid rgba(255,255,255,.9);border-radius:6px;padding:3px 7px;font-size:9px;font-weight:800}.bog-mark{position:absolute;right:20px;bottom:22px;font-size:42px;color:rgba(255,255,255,.95)}.bog-tools{display:flex;gap:10px;margin:20px 0 10px}.bog-search{height:58px;flex:1;display:flex;align-items:center;gap:11px;padding:0 16px;background:var(--surface-raised);border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow-card)}.bog-search i{font-size:19px;color:var(--text-muted)}.bog-search input{width:100%;border:0!important;outline:0!important;background:transparent!important;color:var(--text)!important;box-shadow:none!important;padding:0!important;font-family:inherit;font-size:15px}.bog-filter{width:58px;border:0;border-radius:17px;background:#fff0f3;color:#ae0029;font-size:18px}.bog-count{margin:8px 2px 17px;font-size:14px;font-weight:700}.bog-count i{color:#c80032;margin-right:4px}.bog-list{display:flex;flex-direction:column;gap:13px}.bog-card{display:grid;grid-template-columns:68px 1fr;gap:14px;padding:16px;background:var(--surface-raised);border:1px solid var(--border);border-radius:19px;box-shadow:var(--shadow-card)}.bog-icon{width:64px;height:64px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#e91c45,#aa0028);color:#fff;font-size:27px;box-shadow:0 8px 17px rgba(190,0,45,.18)}.bog-info h3{margin:0 0 7px;font-size:17px;line-height:1.35;color:var(--text)}.bog-info p{margin:0 0 11px;color:var(--text-muted);font-size:13px;line-height:1.55}.bog-join{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:10px;background:linear-gradient(135deg,#e51a43,#b0002b);color:#fff!important;text-decoration:none!important;font-size:13px;font-weight:700}.bog-help{margin-top:18px;padding:15px;border-radius:17px;background:#fff0f3;display:flex;align-items:center;gap:11px}.bog-help>i{font-size:23px;color:#b6002c}.bog-help div{flex:1}.bog-help b,.bog-help small{display:block}.bog-help small{color:#777}@media(max-width:520px){.bog-hero{min-height:174px;padding:20px 17px}.bog-hero-copy{max-width:84%;gap:12px}.bog-logo{width:54px;height:54px;flex-basis:54px;font-size:24px}.bog-hero h1{font-size:20px}.bog-hero p{font-size:12px}.bog-mark{font-size:34px}.bog-card{grid-template-columns:58px 1fr;padding:14px;gap:11px}.bog-icon{width:55px;height:55px;font-size:23px}.bog-join{width:100%}}

/* Banshkhali Police Station — Android app-style content page */
.bps-directory{padding:8px 0 28px;color:var(--text)}
.bps-hero{position:relative;overflow:hidden;min-height:205px;padding:24px 22px;border-radius:24px;background:linear-gradient(135deg,#a90024 0%,#e31740 58%,#a90024 100%);color:#fff;box-shadow:0 10px 28px rgba(170,0,36,.16);margin-bottom:20px}
.bps-hero-copy{display:flex;gap:18px;align-items:flex-start;position:relative;z-index:2}.bps-logo{width:76px;height:76px;flex:0 0 76px;border-radius:20px;background:#fff;color:#c70d36;display:grid;place-items:center;font-size:36px}.bps-hero h1{margin:3px 0 7px;color:#fff;font-size:28px;line-height:1.25}.bps-hero p{margin:0;color:rgba(255,255,255,.92);font-size:15px;line-height:1.55}.bps-hero span{display:inline-block;margin-top:14px;padding:6px 11px;border:2px solid rgba(255,255,255,.85);border-radius:8px;font-size:11px;font-weight:800}.bps-mark{position:absolute;right:25px;bottom:22px;font-size:48px;color:#fff;opacity:.95}
.bps-emergency,.bps-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 7px 22px rgba(57,20,27,.055);margin-bottom:15px}.bps-emergency{display:flex;align-items:center;gap:12px;padding:14px}.bps-emergency-icon{width:50px;height:50px;border-radius:15px;background:#fff0f3;color:#c70d36;display:grid;place-items:center;font-size:22px}.bps-emergency>div:nth-child(2){flex:1}.bps-emergency small,.bps-officer small,.bps-open small,.bps-mini small{display:block;color:var(--muted);font-size:12px}.bps-emergency b{display:block;margin-top:2px}.bps-emergency>a{background:linear-gradient(135deg,#e51a43,#b0002b);color:#fff;text-decoration:none;padding:10px 15px;border-radius:11px;font-weight:800}
.bps-card{padding:17px}.bps-card>h2{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:19px;color:var(--text)}.bps-card>h2 i{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#e91c45,#aa0028);color:#fff;display:grid;place-items:center;font-size:16px}.bps-row{padding:8px 0 13px;border-bottom:1px solid var(--border)}.bps-row span{display:block;color:var(--muted);font-size:12px}.bps-row b{font-size:15px}.bps-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:12px}.bps-mini>div{padding:10px;border-radius:12px;background:rgba(215,25,63,.055)}.bps-mini b{display:block;font-size:13px;margin-top:2px}
.bps-officer{display:grid;grid-template-columns:66px 1fr;gap:14px;align-items:center}.bps-avatar{width:66px;height:66px;border-radius:18px;background:linear-gradient(145deg,#e91c45,#aa0028);color:#fff;display:grid;place-items:center;font-size:30px}.bps-officer h2{margin:2px 0 4px;font-size:20px}.bps-officer a{color:#b30a2c;text-decoration:none;font-weight:800}.bps-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.bps-actions a{min-height:45px;display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid #d7193f;border-radius:12px;color:#aa0028;text-decoration:none;font-weight:800;font-size:13px}.bps-actions .primary{background:linear-gradient(135deg,#e51a43,#b0002b);color:#fff;border:0}.bps-actions .mail{grid-column:1/-1;background:#fff4f6;overflow-wrap:anywhere}
.bps-open{display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;background:rgba(30,160,80,.07)}.bps-open>i{color:#20a35a;font-size:22px}.bps-open b{display:block;margin-top:2px}.bps-numbers{display:grid;grid-template-columns:1fr 1fr;gap:9px}.bps-numbers a{padding:13px 10px;border-radius:14px;background:rgba(215,25,63,.055);border:1px solid rgba(215,25,63,.1);text-align:center;text-decoration:none}.bps-numbers small{display:block;color:var(--muted)}.bps-numbers b{display:block;color:#b0002b;font-size:21px;margin-top:3px}.bps-services{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bps-services>div{min-height:55px;display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:rgba(215,25,63,.045);border:1px solid rgba(215,25,63,.09);font-size:13px;font-weight:650}.bps-services i{width:27px;height:27px;flex:0 0 27px;border-radius:8px;background:#ffe5ea;color:#b0002b;display:grid;place-items:center;font-size:11px}.bps-footer{display:flex;align-items:center;justify-content:center;gap:11px;text-align:left;padding:18px;border-radius:18px;background:linear-gradient(135deg,#fff0f3,#fff8f8);color:#a90024}.bps-footer>i{font-size:28px}.bps-footer b,.bps-footer small{display:block}.bps-footer small{color:#756d70;margin-top:2px}
[data-theme="dark"] .bps-footer{background:var(--surface)}
@media(max-width:520px){.bps-directory{padding:4px 12px 26px}.bps-hero{min-height:190px;padding:21px 18px}.bps-logo{width:62px;height:62px;flex-basis:62px;border-radius:17px;font-size:29px}.bps-hero h1{font-size:24px}.bps-hero p{font-size:13px}.bps-mark{font-size:39px}.bps-card{padding:15px;border-radius:18px}.bps-mini{grid-template-columns:1fr 1fr}.bps-mini>div:last-child{grid-column:1/-1}}

/* Banshkhali Upazila Parishad — Android app-style content page */
.bup-directory{padding:4px 0 28px;color:var(--text)}.bup-hero{position:relative;overflow:hidden;min-height:205px;padding:24px 22px;border-radius:24px;background:radial-gradient(circle at 88% 25%,rgba(255,255,255,.13),transparent 24%),linear-gradient(135deg,#a90024,#e31740 58%,#a90024);color:#fff;box-shadow:0 10px 28px rgba(170,0,36,.16);margin-bottom:18px}.bup-hero-copy{display:flex;gap:17px;align-items:flex-start;max-width:82%;position:relative;z-index:2}.bup-logo{width:72px;height:72px;flex:0 0 72px;border-radius:19px;background:#fff;color:#c70d36;display:grid;place-items:center;font-size:32px}.bup-hero h1{margin:3px 0 7px;color:#fff;font-size:27px;line-height:1.25}.bup-hero p{margin:0;color:rgba(255,255,255,.94);font-size:14px;line-height:1.55}.bup-hero span{display:inline-block;margin-top:13px;padding:5px 9px;border:2px solid rgba(255,255,255,.88);border-radius:7px;font-size:10px;font-weight:800}.bup-mark{position:absolute;right:24px;bottom:21px;font-size:45px;color:#fff;opacity:.94}.bup-card{padding:17px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 7px 22px rgba(57,20,27,.055);margin-bottom:15px}.bup-card>h2{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:19px}.bup-card>h2>i{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#e91c45,#aa0028);color:#fff;display:grid;place-items:center;font-size:16px}.bup-desc{margin:0;color:var(--muted);font-size:14px;line-height:1.75}.bup-info{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.bup-info>div{padding:11px;border-radius:13px;background:rgba(215,25,63,.05);border:1px solid rgba(215,25,63,.09)}.bup-info small,.bup-contact small{display:block;color:var(--muted);font-size:11px}.bup-info b{display:block;margin-top:2px;font-size:14px}.bup-coastal{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 11px;border-radius:10px;background:#fff0f3;color:#ae0029;font-size:13px;font-weight:700}.bup-card>h3{font-size:15px;margin:17px 0 10px}.bup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bup-stats>div{text-align:center;padding:13px 5px;border-radius:14px;background:linear-gradient(145deg,#fff3f5,#fff);border:1px solid #f5dce2}.bup-stats b{display:block;color:#b0002b;font-size:21px}.bup-stats small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.bup-unions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.bup-unions span{display:flex;align-items:center;gap:6px;padding:9px;border-radius:10px;background:rgba(215,25,63,.045);font-size:12px;font-weight:650}.bup-unions i{color:#c70d36}.bup-services{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bup-services>div{min-height:58px;display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:rgba(215,25,63,.045);border:1px solid rgba(215,25,63,.09);font-size:12px;font-weight:650}.bup-services i{width:29px;height:29px;flex:0 0 29px;border-radius:8px;background:#ffe5ea;color:#b0002b;display:grid;place-items:center}.bup-contact{display:flex;flex-direction:column;gap:9px}.bup-contact>div{display:flex;gap:10px;align-items:flex-start;padding:11px;border-radius:12px;background:rgba(215,25,63,.045)}.bup-contact>div>i{width:31px;height:31px;flex:0 0 31px;border-radius:9px;background:#ffe5ea;color:#b0002b;display:grid;place-items:center}.bup-contact b{display:block;font-size:13px;line-height:1.5}.bup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.bup-actions a{min-height:45px;display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid #d7193f;border-radius:12px;color:#aa0028!important;text-decoration:none!important;font-weight:800;font-size:13px}.bup-actions .primary{background:linear-gradient(135deg,#e51a43,#b0002b);color:#fff!important;border:0}.bup-notice{display:flex;align-items:flex-start;gap:11px;padding:15px;border-radius:17px;background:linear-gradient(135deg,#fff0f3,#fff8f8);color:#a90024}.bup-notice>i{font-size:23px;margin-top:2px}.bup-notice b,.bup-notice small{display:block}.bup-notice small{color:#756d70;line-height:1.5;margin-top:3px}[data-theme="dark"] .bup-notice{background:var(--surface)}@media(max-width:520px){.bup-directory{padding:4px 12px 26px}.bup-hero{min-height:190px;padding:21px 18px}.bup-logo{width:62px;height:62px;flex-basis:62px;border-radius:17px;font-size:27px}.bup-hero h1{font-size:23px}.bup-hero p{font-size:12px}.bup-mark{font-size:37px}.bup-card{padding:15px;border-radius:18px}}

/* Fire Service + Jaldi Municipality dedicated Android content pages */
.bbb-fire-emergency{display:flex;align-items:center;gap:11px;padding:14px 15px;margin:0 0 15px;border-radius:17px;background:linear-gradient(135deg,#fff1f3,#fff);border:1px solid #f3d7dd;box-shadow:0 6px 18px rgba(57,20,27,.05)}
.bbb-fire-emergency>i{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;background:#ffe1e7;color:#b0002b;font-size:19px}.bbb-fire-emergency div{min-width:0;flex:1}.bbb-fire-emergency small,.bbb-fire-emergency b{display:block}.bbb-fire-emergency small{color:var(--muted);font-size:11px}.bbb-fire-emergency b{font-size:15px;margin-top:2px}.bbb-fire-emergency a{padding:10px 12px;border-radius:11px;background:linear-gradient(135deg,#e51a43,#b0002b);color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:800;white-space:nowrap}
[data-theme="dark"] .bbb-fire-emergency{background:var(--surface);border-color:var(--border)}
@media(max-width:520px){.bbb-fire-page,.bbb-municipality-page{padding:4px 12px 26px}}

/* Donor Search v1.19.0 — smart mobile layout */
#bbb-view:has(#donor-results) > h1{font-size:24px!important;margin:4px 0 16px!important}
#bbb-view:has(#donor-results) > .card{border-radius:22px;padding:16px;box-shadow:0 8px 24px rgba(40,20,20,.06)}
#bbb-view:has(#donor-results) > .card .field{margin-bottom:12px}
#bbb-view:has(#donor-results) > .card select{min-height:50px;border-radius:16px;background:var(--surface);font-weight:700}
.dlf-location-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dlf-available{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;margin:2px 0 12px}.dlf-available input{width:19px;height:19px;accent-color:var(--accent)}
#f-search{border-radius:999px;min-height:48px;font-weight:800;box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 24%,transparent)}
.dlf-summary{display:flex;align-items:center;gap:11px;background:linear-gradient(100deg,#fff1f3,#fff8f5);border:1px solid #f9e1e5;border-radius:18px;padding:13px 14px;margin:2px 0 14px}.dlf-summary-drop{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ffe1e7;color:#d7193f;font-size:24px}.dlf-summary div{display:flex;flex-direction:column;min-width:0}.dlf-summary strong{font-size:14px}.dlf-summary small{font-size:11.5px;color:var(--text-muted);margin-top:2px}.dlf-summary-available{margin-left:auto;font-size:11.5px;font-weight:800;color:#21884a;white-space:nowrap}
.donor-card-premium{border-radius:22px;padding:16px;margin-bottom:14px;background:var(--surface-raised);box-shadow:0 8px 24px rgba(55,25,25,.07);border-color:color-mix(in srgb,var(--border) 75%,transparent)}
.dcp-top{gap:12px}.dcp-avatar{width:72px;height:72px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #f7dce2}.dcp-name{font-size:17px}.dcp-location{margin-top:4px}.dcp-badges{margin-top:7px}.dcp-blood-chip{background:linear-gradient(135deg,#ef334f,#a80f35)!important;color:#fff!important;border:0!important;min-width:54px;text-align:center}.availability-pill.online{background:#e8f7ec;color:#27894b}.dcp-fav{width:38px;height:38px;background:#fff7e8;border:0;font-size:20px}
.dcp-last-donation{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:3px;background:#f4ece7;border-radius:16px;padding:12px 14px;margin-top:13px}.dcp-ld-label,.dcp-ld-date,.dcp-ld-relative{grid-column:1}.dcp-ld-badge{grid-column:2;grid-row:1/4;align-self:center;margin:0;background:transparent!important;padding:5px;color:#21884a!important}.dcp-ld-date{font-size:15px}.dcp-contact{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;border-top:1px solid var(--border);padding-top:10px;margin-top:10px}.dcp-contact-line{font-size:12px;min-width:0}.dcp-contact-line span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dcp-actions{margin-top:12px}.dcp-actions .btn{min-height:44px;font-weight:800}.btn-whatsapp{background:#fff;border-color:#28b765;color:#23934f}.dcp-btn-call{background:linear-gradient(100deg,#ff344d,#b40039)!important;border:0!important;box-shadow:0 8px 18px rgba(196,0,48,.18)}
@media(max-width:480px){.dlf-summary{flex-wrap:wrap}.dlf-summary-available{width:100%;margin-left:53px}.dcp-last-donation{grid-template-columns:1.15fr .85fr}.dcp-contact{grid-template-columns:1fr 1fr}}
@media(max-width:360px){.dlf-location-grid{grid-template-columns:1fr}.dcp-last-donation{grid-template-columns:1fr}.dcp-ld-badge{grid-column:1;grid-row:auto}.dcp-contact{grid-template-columns:1fr}}

/* Donor Search v1.19.1 — compact reference-style filter card */
#bbb-view:has(#donor-results) > h1{display:none!important}
.dlf-filter-card{padding:14px 16px 15px!important}
.dlf-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.dlf-filter-title{display:flex;align-items:center;gap:10px;font-size:19px;color:var(--text)}
.dlf-search-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff0f3;color:#d7193f;font-size:24px;font-weight:900;line-height:1}
.dlf-reset{border:0;background:transparent;color:var(--text-muted);font-family:inherit;font-size:12px;padding:7px 2px;cursor:pointer}
.dlf-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;align-items:end}
.dlf-filter-grid>.field,.dlf-location-grid .field{margin:0!important;min-width:0}
.dlf-location-grid{display:contents}
.dlf-filter-grid .field label{font-size:11.5px;margin:0 0 6px;color:var(--text-muted);font-weight:700}
#bbb-view:has(#donor-results) .dlf-filter-grid select{width:100%;min-height:45px!important;height:45px;border-radius:14px!important;padding:0 30px 0 12px!important;font-size:13px;font-weight:700;background:var(--surface-raised)}
.dlf-available{grid-column:1/3;margin:3px 0 0!important;min-height:45px;font-size:12.5px!important;align-self:center}
#f-search{grid-column:3;min-height:45px!important;height:45px;margin:3px 0 0!important;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px}
#f-search span{font-size:20px;line-height:1}
.dlf-summary{border-radius:15px!important;padding:10px 12px!important;margin:0 0 12px!important;gap:9px!important}
.dlf-summary-drop{width:34px!important;height:34px!important;font-size:19px!important}
.dlf-summary strong{font-size:13px!important}.dlf-summary small,.dlf-summary-available{font-size:10.5px!important}
@media(max-width:480px){
  .dlf-filter-card{padding:13px 14px 14px!important;border-radius:20px!important}
  .dlf-filter-title{font-size:18px}.dlf-search-icon{width:32px;height:32px;font-size:22px}
  .dlf-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 8px}
  #bbb-view:has(#donor-results) .dlf-filter-grid select{min-height:43px!important;height:43px;font-size:12px;padding-left:9px!important;padding-right:22px!important}
  .dlf-filter-grid .field label{font-size:10.5px}
  .dlf-available{grid-column:1/3;min-height:43px;font-size:11.5px!important;gap:6px!important;white-space:nowrap}
  .dlf-available input{width:17px;height:17px}
  #f-search{grid-column:3;min-height:43px!important;height:43px!important;font-size:13px;padding:0 8px}
  .dlf-summary{flex-wrap:nowrap!important}.dlf-summary-available{width:auto!important;margin-left:auto!important;white-space:nowrap}
}
@media(max-width:350px){.dlf-filter-grid{gap:8px 6px}.dlf-filter-title{font-size:17px}.dlf-reset{font-size:11px}.dlf-available{font-size:10.5px!important}#f-search{font-size:12px}}

/* v1.19.3 — donor summary readability */
.dlf-summary strong{font-size:17px!important;line-height:1.35!important;font-weight:800!important}
.dlf-summary small{font-size:10.5px!important;line-height:1.45!important;font-weight:700!important;margin-top:3px!important}
.dlf-summary-available{font-size:14px!important;line-height:1.45!important;font-weight:800!important}
@media(max-width:480px){.dlf-summary strong{font-size:17px!important}.dlf-summary small{font-size:10.5px!important}.dlf-summary-available{font-size:14px!important}}

/* v1.19.5 — restore donor summary title to compact original size */
.dlf-summary strong{font-size:13px!important;line-height:1.35!important;font-weight:800!important;white-space:nowrap!important}
@media(max-width:480px){.dlf-summary strong{font-size:13px!important;white-space:nowrap!important}}

/* v1.19.6 — donor card: make the relative last-donation line easier to read on every donor card. */
.dcp-last-donation .dcp-ld-relative {
	font-size: 14px;
	line-height: 1.45;
}


/* ====================================================================== */
/* BBB v1.20.1 — Reference-matched Dashboard Services                     */
/* Red around the square, soft white centre; coloured service artwork.    */
/* Names intentionally remain below/outside the icon square.              */
/* ====================================================================== */
.db-shortcuts .service-icon {
    background:
        radial-gradient(circle at 50% 48%, #ffffff 0%, #ffffff 48%, rgba(255,255,255,.96) 58%, rgba(255,240,242,.94) 70%, rgba(225,18,47,.38) 88%, rgba(207,10,36,.72) 100%) !important;
    border: 1px solid rgba(224, 28, 55, .52);
    border-radius: 18px;
    color: inherit;
    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, .95),
        inset 0 0 15px rgba(218, 18, 45, .12),
        0 7px 18px rgba(194, 16, 48, .16);
    overflow: hidden;
}
.db-shortcuts .service-icon::before {
    inset: -4px;
    background: radial-gradient(circle, rgba(218, 18, 45, .24) 0%, rgba(218, 18, 45, 0) 72%);
}
.db-shortcuts .service-icon > .db-service-color-art,
.db-shortcuts .service-icon > .db-premium-color-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.db-shortcuts .service-icon .db-service-color-art svg { width: 54%; height: 54%; fill: currentColor; }
.db-shortcuts .service-icon .db-service-color-art i { font-size: 34px; color: currentColor; }
.db-shortcuts .service-icon > svg { color: #d90f2e; fill: currentColor; }
.db-shortcuts .service-icon img { padding: 7px; box-sizing: border-box; object-fit: contain; }
.db-shortcuts .service-label {
    margin-top: 1px;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.22;
    color: var(--text);
}
@media (max-width: 360px) {
    .db-shortcuts .service-label { font-size: 11.5px; }
}

/* v1.20.2 — pictorial service illustrations matching the approved reference. */
.db-shortcuts .service-icon > .db-service-illustration{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}.db-shortcuts .service-icon .db-illustration{width:78%;height:78%;display:block;overflow:visible}.db-shortcuts .service-icon .db-service-illustration svg{width:78%;height:78%;fill:none}


/* =========================================================
   ABOUT PAGE — NATIVE ANDROID CARD REDESIGN
   Page-scoped: does not affect other content renderers.
   ========================================================= */
.abt-page{
  margin:0;
  padding:8px 0 28px;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
}
.abt-page .abt-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0;
}
.abt-page .abt-card{
  margin:0;
  padding:17px;
  border-radius:19px;
  background:var(--surface-raised);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
.abt-intro-card{
  padding:18px!important;
}
.abt-intro-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
}
.abt-intro-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff0f3;
  color:#c80032;
  font-size:25px;
  overflow:hidden;
}
.abt-intro-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.abt-intro-head h1{
  margin:0!important;
  color:#b00020!important;
  font-size:22px!important;
  line-height:1.3!important;
  font-weight:800!important;
}
.abt-intro-subtitle{
  margin:0 0 12px;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.5;
}
.abt-page .cc-richtext{
  margin:0!important;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif!important;
  font-size:15px!important;
  line-height:1.7!important;
  color:var(--text)!important;
}
.abt-page .cc-richtext h1,
.abt-page .cc-richtext h2,
.abt-page .cc-richtext h3{
  font-family:inherit!important;
  font-size:20px!important;
  line-height:1.4!important;
  font-weight:800!important;
  color:var(--text)!important;
  margin:0 0 10px!important;
}
.abt-page .cc-richtext p{
  font-family:inherit!important;
  font-size:15px!important;
  line-height:1.75!important;
  color:var(--text-muted)!important;
  margin:0 0 12px!important;
}
.abt-page .cc-richtext p:last-child{
  margin-bottom:0!important;
}
.abt-page .cc-richtext ul,
.abt-page .cc-richtext ol{
  margin:0!important;
  padding-left:21px!important;
  font-size:15px!important;
  line-height:1.85!important;
  color:var(--text)!important;
}
.abt-page .cc-richtext li{
  margin:0 0 5px!important;
}
.abt-page .cc-richtext strong{
  color:#b00020;
  font-weight:800;
}
.abt-page .cc-richtext hr{
  margin:15px 0!important;
  border:0!important;
  border-top:1px solid var(--border)!important;
}
.abt-page .abt-card:nth-child(2){
  border-left:4px solid #d5002f;
  background:#fff7f8;
}
.abt-page .abt-card:nth-child(3){
  border-left:4px solid #ff9800;
  background:#fffaf2;
}
.abt-page .abt-card:nth-child(4){
  border-left:4px solid #28a745;
  background:#f4fff6;
}
.abt-card-head{
  margin:0 0 11px!important;
}
.abt-card-icon{
  width:38px!important;
  height:38px!important;
  flex-basis:38px!important;
  border-radius:12px!important;
}
.abt-card-head h2{
  margin:0!important;
  font-size:18px!important;
  line-height:1.35!important;
  font-weight:800!important;
}
.abt-cta{
  margin-top:16px;
  border-radius:20px!important;
  padding:22px 18px!important;
  text-align:center;
}
.abt-cta h2{
  font-size:21px!important;
  line-height:1.45!important;
}
.abt-cta p{
  font-size:15px!important;
  line-height:1.7!important;
}
.abt-cta-actions a{
  min-height:44px!important;
  border-radius:12px!important;
  font-size:14px!important;
}
@media(max-width:520px){
  .abt-page{padding:5px 0 24px;}
  .abt-page .abt-card{padding:15px!important;border-radius:18px;}
  .abt-intro-head h1{font-size:21px!important;}
  .abt-intro-icon{width:43px;height:43px;flex-basis:43px;font-size:23px;}
  .abt-page .cc-richtext,
  .abt-page .cc-richtext p,
  .abt-page .cc-richtext ul,
  .abt-page .cc-richtext ol{
    font-size:14.5px!important;
    line-height:1.75!important;
  }
  .abt-page .cc-richtext h1,
  .abt-page .cc-richtext h2,
  .abt-page .cc-richtext h3{
    font-size:19px!important;
  }
  .abt-cta{padding:20px 16px!important;}
}



/* ==========================================================================
   Native Developer Card — More > ডেভেলপার
   This is a dedicated SPA card, not Content Card rich-text.
   ========================================================================== */
.bbb-developer-page {
	width: 100%;
	padding: 4px 0 76px;
}

.bbb-developer-card-native {
	position: relative;
	overflow: hidden;
	width: min(100%, 560px);
	max-width: 560px;
	margin: 0 auto;
	padding: 24px 22px 20px;
	border-radius: 25px;
	background:
		radial-gradient(circle at 15% 18%, rgba(255,255,255,.10) 0 2px, transparent 3px),
		linear-gradient(145deg, #8f0715 0%, #b70f25 48%, #d01e3d 100%);
	background-size: 42px 42px, auto;
	box-shadow: 0 18px 42px rgba(122, 15, 25, .22);
	color: #fff;
	text-align: center;
	border: 1px solid rgba(255,255,255,.20);
	box-sizing: border-box;
}

.bbb-developer-card-glow {
	position: absolute;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	top: -105px;
	right: -70px;
	background: rgba(255,255,255,.08);
	filter: blur(2px);
	pointer-events: none;
}

.bbb-developer-featured {
	position: absolute;
	top: 15px;
	right: -38px;
	padding: 6px 45px;
	transform: rotate(35deg);
	background: #e6b84e;
	color: #281d0b;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .08em;
	box-shadow: 0 5px 14px rgba(0,0,0,.15);
}

.bbb-developer-photo-wrap {
	position: relative;
	width: 104px;
	height: 104px;
	margin: 3px auto 12px;
}

.bbb-developer-photo {
	display: block;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid rgba(255,255,255,.95);
	box-shadow: 0 8px 22px rgba(0,0,0,.25);
	background: #fff;
}

.bbb-developer-online {
	position: absolute;
	right: 0;
	bottom: 3px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #21d37b;
	border: 3px solid #8f0715;
	box-shadow: 0 0 0 2px rgba(255,255,255,.32);
}

.bbb-developer-name {
	position: relative;
	margin: 0;
	font-size: clamp(23px, 5.4vw, 30px);
	font-weight: 900;
	line-height: 1.2;
	color: #fff;
}

.bbb-developer-type {
	display: block;
	margin: 5px 0 7px;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.2;
	color: #ffd35a;
	letter-spacing: .01em;
}

.bbb-developer-role {
	display: inline-block;
	margin: 0 auto 11px;
	padding: 7px 14px;
	border-radius: 999px;
	background: linear-gradient(90deg, #e92861, #d7194a);
	border: 1px solid rgba(255,255,255,.16);
	font-size: 13.5px;
	font-weight: 800;
	color: #fff;
}

.bbb-developer-location {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255,255,255,.94);
}

.bbb-developer-bio {
	margin: 10px 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255,255,255,.90);
}

.bbb-developer-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.bbb-developer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 8px 10px;
	border-radius: 13px;
	text-decoration: none !important;
	font-size: 13.5px;
	font-weight: 900;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 6px 14px rgba(0,0,0,.11);
	transition: transform .15s ease, filter .15s ease;
}

.bbb-developer-btn:active {
	transform: scale(.97);
}

.bbb-developer-call,
.bbb-developer-wa {
	background: linear-gradient(135deg, #20c96b, #10a85c);
}

.bbb-developer-fb {
	grid-column: 1 / -1;
	background: #1877f2;
}

@media (max-width: 520px) {
	.bbb-developer-page {
		padding: 2px 0 72px;
	}
	.bbb-developer-card-native {
		width: calc(100% - 20px);
		max-width: 520px;
		border-radius: 23px;
		padding: 21px 14px 17px;
	}
	.bbb-developer-photo-wrap,
	.bbb-developer-photo {
		width: 92px;
		height: 92px;
	}
	.bbb-developer-photo-wrap {
		margin-bottom: 10px;
	}
	.bbb-developer-online {
		width: 19px;
		height: 19px;
		bottom: 2px;
		border-width: 3px;
	}
	.bbb-developer-name {
		font-size: 24px;
	}
	.bbb-developer-type {
		font-size: 14px;
		margin: 4px 0 6px;
	}
	.bbb-developer-role {
		font-size: 12.5px;
		padding: 6px 12px;
		margin-bottom: 9px;
	}
	.bbb-developer-location {
		font-size: 12.5px;
	}
	.bbb-developer-bio {
		font-size: 12px;
		margin: 8px 0 13px;
	}
	.bbb-developer-actions {
		gap: 7px;
	}
	.bbb-developer-btn {
		font-size: 12.5px;
		min-height: 43px;
		padding: 7px 6px;
	}
}

@media (max-width: 390px) {
	.bbb-developer-card-native {
		width: calc(100% - 16px);
		padding-left: 11px;
		padding-right: 11px;
	}
	.bbb-developer-name {
		font-size: 22px;
	}
	.bbb-developer-type {
		font-size: 13px;
	}
	.bbb-developer-role {
		font-size: 11.5px;
	}
	.bbb-developer-location {
		font-size: 11.5px;
	}
	.bbb-developer-btn {
		font-size: 11.5px;
	}
}


/* ==========================================================================
 * BBB Android-style Service Directory cards
 * Emergency / Ambulance + Journalists
 * These classes are intentionally global because Content Cards store the
 * service HTML while the theme owns the presentation.
 * ========================================================================== */
.bbb-emergency-wrap,
.bbb-journalists-wrap{
  max-width:900px;
  margin:0 auto;
  padding:10px 0 24px;
  font-family:"Noto Sans Bengali","Hind Siliguri",sans-serif;
  color:#24302f;
}
.bbb-emergency-header,
.bbb-journalists-header{
  text-align:center;
  margin:0 0 20px;
  padding:20px 12px 8px;
}
.bbb-emergency-header .icon{
  font-size:38px;
  line-height:1;
  margin-bottom:6px;
}
.bbb-emergency-header h2,
.bbb-journalists-header h2{
  margin:0;
  font-size:28px;
  font-weight:800;
  color:#087f72;
}
.bbb-emergency-header p,
.bbb-journalists-header p{
  margin:7px 0 0;
  font-size:14px;
  color:#64807b;
}
.bbb-emergency-card,
.bbb-journalist-card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  box-sizing:border-box;
  margin:0 0 14px;
  padding:14px 15px;
  background:#fff;
  border:1px solid #e5e8e8;
  border-radius:18px;
  box-shadow:0 5px 18px rgba(0,0,0,.08);
}
.bbb-emergency-icon,
.bbb-journalist-icon{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff7fb;
  font-size:25px;
}
.bbb-emergency-info,
.bbb-journalist-info{
  min-width:0;
  flex:1;
}
.bbb-emergency-name,
.bbb-journalist-name{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.45;
  font-weight:800;
  color:#24292b;
}
.bbb-emergency-location,
.bbb-journalist-meta{
  margin:0 0 6px;
  font-size:13px;
  line-height:1.55;
  color:#555;
}
.bbb-emergency-phone,
.bbb-journalist-phone{
  margin:0;
  font-size:16px;
  line-height:1.4;
  color:#087f72;
  font-weight:600;
  letter-spacing:.2px;
}
.bbb-emergency-call,
.bbb-journalist-call{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none!important;
  background:#faf6ff;
  color:#087f72!important;
  font-size:27px;
  font-weight:700;
}
.bbb-emergency-call:hover,
.bbb-journalist-call:hover{
  background:#087f72;
  color:#fff!important;
  transform:translateY(-1px);
}
@media(max-width:600px){
  .bbb-emergency-wrap,
  .bbb-journalists-wrap{padding:7px 0 18px;}
  .bbb-emergency-header,
  .bbb-journalists-header{padding:12px 8px 5px;margin-bottom:14px;}
  .bbb-emergency-header h2,
  .bbb-journalists-header h2{font-size:25px;}
  .bbb-emergency-header p,
  .bbb-journalists-header p{font-size:13px;}
  .bbb-emergency-card,
  .bbb-journalist-card{gap:10px;padding:12px;border-radius:16px;margin-bottom:12px;}
  .bbb-emergency-icon,
  .bbb-journalist-icon{width:44px;height:44px;min-width:44px;font-size:22px;border-radius:13px;}
  .bbb-emergency-name,
  .bbb-journalist-name{font-size:16px;line-height:1.4;}
  .bbb-emergency-location,
  .bbb-journalist-meta{font-size:12px;}
  .bbb-emergency-phone,
  .bbb-journalist-phone{font-size:14px;}
  .bbb-emergency-call,
  .bbb-journalist-call{width:48px;height:48px;min-width:48px;border-radius:13px;font-size:23px;}
}
/* Hide the CSS accidentally pasted into the Content Card editor. The
   content renderer removes it in JS; this rule is only a last-resort guard
   for legacy cards where the CSS text has already been wrapped in a span. */
.bbb-legacy-style-text{display:none!important;}


/* ==========================================================================
 * BBB Native Android-style directories — final polish
 * Ambulance + Journalists only. No dependency on WordPress/editor CSS.
 * ========================================================================== */
.bbb-emergency-wrap,
.bbb-journalists-wrap{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:8px 0 24px;
}
.bbb-emergency-header,
.bbb-journalists-header{
  position:relative;
  overflow:hidden;
  margin:0 0 18px;
  padding:20px 16px 18px;
  border-radius:22px;
  background:linear-gradient(145deg,#8f0f1b 0%,#b9152b 55%,#d1264e 100%);
  box-shadow:0 10px 28px rgba(126,15,25,.18);
  color:#fff;
}
.bbb-emergency-header:after,
.bbb-journalists-header:after{
  content:"";
  position:absolute;
  width:120px;height:120px;
  right:-42px;top:-55px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.bbb-emergency-header .icon,
.bbb-journalists-header .icon{
  position:relative;
  z-index:1;
  width:50px;height:50px;
  margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.16);
  font-size:28px;
}
.bbb-emergency-header h2,
.bbb-journalists-header h2{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:27px;
  margin:0;
  font-weight:800;
}
.bbb-emergency-header p,
.bbb-journalists-header p{
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.86);
  margin:6px 0 0;
  font-size:13px;
}
.bbb-service-directory-list{
  display:grid;
  gap:12px;
}
.bbb-emergency-card,
.bbb-journalist-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0;
  padding:14px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid rgba(36,22,20,.07);
  border-radius:20px;
  box-shadow:0 5px 18px rgba(36,22,20,.08);
  transition:transform .18s ease,box-shadow .18s ease;
}
.bbb-emergency-card:active,
.bbb-journalist-card:active{
  transform:scale(.992);
}
.bbb-emergency-icon,
.bbb-journalist-icon{
  flex:0 0 50px;
  width:50px;height:50px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:#fff5f6;
  font-size:25px;
}
.bbb-emergency-info,
.bbb-journalist-info{min-width:0;flex:1;}
.bbb-emergency-name,
.bbb-journalist-name{
  margin:0 0 5px;
  color:#241614;
  font-size:17px;
  line-height:1.4;
  font-weight:800;
}
.bbb-emergency-location,
.bbb-journalist-meta{
  margin:0 0 5px;
  color:#655854;
  font-size:12.5px;
  line-height:1.55;
}
.bbb-emergency-phone,
.bbb-journalist-phone{
  margin:0;
  color:#087f72;
  font-size:15px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:.2px;
}
.bbb-emergency-call,
.bbb-journalist-call{
  flex:0 0 50px;
  width:50px;height:50px;
  border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:#f8f2ff;
  color:#087f72!important;
  text-decoration:none!important;
  font-size:23px;
  box-shadow:inset 0 0 0 1px rgba(8,127,114,.04);
}
.bbb-emergency-call:hover,
.bbb-journalist-call:hover{
  background:#087f72;
  color:#fff!important;
}
.bbb-service-empty{
  padding:28px 18px;
  border-radius:20px;
  background:#fff;
  text-align:center;
  box-shadow:0 5px 18px rgba(36,22,20,.07);
}
.bbb-service-empty span{display:block;font-size:32px;margin-bottom:8px}
.bbb-service-empty strong{display:block;font-size:16px}
.bbb-service-empty small{display:block;margin-top:5px;opacity:.65}
@media(max-width:600px){
  .bbb-emergency-wrap,.bbb-journalists-wrap{padding:5px 0 18px}
  .bbb-emergency-header,.bbb-journalists-header{
    margin-bottom:14px;
    padding:17px 14px 15px;
    border-radius:20px;
  }
  .bbb-emergency-header h2,.bbb-journalists-header h2{font-size:24px}
  .bbb-emergency-card,.bbb-journalist-card{padding:12px;border-radius:17px}
  .bbb-emergency-icon,.bbb-journalist-icon{
    flex-basis:44px;width:44px;height:44px;border-radius:13px;font-size:22px
  }
  .bbb-emergency-name,.bbb-journalist-name{font-size:15.5px}
  .bbb-emergency-location,.bbb-journalist-meta{font-size:12px}
  .bbb-emergency-phone,.bbb-journalist-phone{font-size:14px}
  .bbb-emergency-call,.bbb-journalist-call{
    flex-basis:46px;width:46px;height:46px;border-radius:13px;font-size:21px
  }
}


/* ---------------------------------------------------------------------- */
/* Services Grid — 12 visible + compact Bkash-inspired expanding sheet */
/* ---------------------------------------------------------------------- */

.db-services-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 4px auto 12px;
	padding: 6px 15px;
	min-height: 34px;
	border: 1px solid rgba(181, 27, 66, .13);
	border-radius: 13px;
	background: rgba(255, 255, 255, .96);
	color: #b51b42;
	box-shadow: 0 3px 12px rgba(194, 16, 48, .08);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.db-services-toggle:hover {
	box-shadow: 0 5px 14px rgba(194, 16, 48, .12);
	transform: translateY(-1px);
}

.db-services-toggle:active { transform: scale(.97); }

.db-services-toggle span {
	font-size: 16px;
	line-height: 1;
}

/* The extra services are a true overlay sheet. They must NOT participate
   in normal document flow, otherwise opening the sheet pushes the Emergency
   Request section downward. The sheet drops over the content below it, like
   a compact banking-app service drawer. It is deliberately fully opaque so
   the request card underneath never bleeds through the sheet. */
.db-shortcuts {
	position: relative;
	z-index: 20;
	overflow: visible;
	isolation: isolate;
}

.db-services-extra-panel {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-14px) scale(.985);
	transform-origin: top center;
	pointer-events: none;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1px solid rgba(181, 27, 66, .10);
	border-radius: 24px;
	box-shadow: 0 16px 34px rgba(48, 21, 27, .16), inset 0 1px 0 rgba(255,255,255,.98);
	transition: max-height .36s ease, opacity .22s ease, transform .32s ease, padding .32s ease;
	padding: 0 8px;
	z-index: 999;
	/* Keep the drawer visually above the following dashboard sections. */
	isolation: isolate;
}

.db-services-extra-panel.is-open {
	max-height: min(56vh, 430px);
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	padding: 10px 8px 8px;
}

.db-services-extra-grid {
	margin-bottom: 0;
	padding: 0;
}

@media (max-width: 600px) {
	.db-services-toggle {
		margin-top: 2px;
		margin-bottom: 8px;
		padding: 5px 13px;
		min-height: 32px;
		font-size: 13px;
		border-radius: 12px;
	}

	.db-services-toggle span { font-size: 15px; }

	.db-services-extra-panel {
		top: calc(100% + 1px);
		border-radius: 20px;
		padding-left: 6px;
		padding-right: 6px;
	}

	.db-services-extra-panel.is-open {
		max-height: min(52vh, 390px);
		padding: 8px 6px 7px;
	}
}


/* v1.20.4 — compact service drawer final correction
 * The drawer is intentionally an opaque overlay. Opening it must never
 * reflow or visually contaminate the Emergency Request card underneath. */
.db-services-extra-panel {
	background: #fff !important;
	background-color: #fff !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-sizing: border-box !important;
}
.db-services-extra-panel.is-open {
	opacity: 1 !important;
}


/* v1.20.5 — Service expansion follows the same 4-column grid.
 * First 12 cards -> extra cards -> More/Less button -> next dashboard section.
 * No overlay/drawer and no separate white panel.
 */
.db-shortcuts {
	position: relative;
	z-index: 1;
	overflow: visible;
	isolation: auto;
}

.db-services-extra-panel {
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	width: auto !important;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: 0fr;
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0;
	transform: none !important;
	pointer-events: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: grid-template-rows .30s ease, opacity .18s ease;
}

.db-services-extra-panel > .services-grid {
	min-height: 0;
	overflow: hidden;
	width: 100%;
	margin-bottom: 0;
}

.db-services-extra-panel.is-open {
	grid-template-rows: 1fr;
	max-height: none !important;
	overflow: visible !important;
	opacity: 1;
	pointer-events: auto;
	padding: 0 !important;
	margin: 0 !important;
}

.db-services-toggle {
	position: relative;
	z-index: 2;
	margin: 4px auto 18px;
}

@media (max-width: 600px) {
	.db-services-toggle {
		margin: 2px auto 18px;
	}
}


/* ====================================================================== */
/* BBB v1.21.0 — Donor Search reference card                             */
/* Visual direction: approved cream/orange reference image.              */
/* Data, API behaviour, buttons and donor eligibility logic are untouched.*/
/* ====================================================================== */
.donor-card-premium{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:#fffaf5 !important;
    border:1.5px solid #f2b36e !important;
    border-radius:24px !important;
    box-shadow:0 12px 30px rgba(166,82,18,.10) !important;
    padding:18px 18px 16px !important;
}
.donor-card-premium::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:240px;
    height:150px;
    left:-62px;
    top:-54px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(255,170,104,.62),rgba(255,214,170,.08));
    transform:rotate(-16deg);
}
.donor-card-premium::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:230px;
    height:150px;
    right:-70px;
    bottom:-66px;
    border-radius:50%;
    background:linear-gradient(145deg,rgba(255,173,94,.05),rgba(255,151,53,.60));
    transform:rotate(-17deg);
    box-shadow:0 -25px 0 -17px rgba(255,193,126,.35);
}
.donor-card-premium .dcp-top{
    position:relative;
    align-items:center;
    gap:14px;
    padding-right:44px;
    z-index:1;
}
.donor-card-premium .dcp-top > .life-ring{
    flex:0 0 84px;
    width:84px;
    height:84px;
    padding:4px;
    border-radius:50%;
    background:#fff;
    border:2px solid #f3a45a;
    box-shadow:0 0 0 4px rgba(255,255,255,.9),0 7px 20px rgba(218,113,35,.15);
}
.donor-card-premium .dcp-avatar{
    width:72px;
    height:72px;
    border-radius:50%;
    border:0;
    object-fit:cover;
    background:#fff;
}
.donor-card-premium .dcp-online-dot{
    right:0;
    bottom:3px;
    width:17px;
    height:17px;
    border:3px solid #fff;
    background:#27b957;
}
.donor-card-premium .dcp-name{
    font-size:20px;
    line-height:1.2;
    color:#171717;
    font-weight:850;
}
.donor-card-premium .dcp-location{
    margin-top:5px;
    font-size:13px;
    color:#666;
}
.donor-card-premium .dcp-badges{
    margin-top:9px;
    gap:8px;
}
.donor-card-premium .dcp-blood-chip{
    min-width:60px;
    padding:7px 16px;
    border-radius:999px;
    background:linear-gradient(135deg,#ed263d,#d20d2d) !important;
    color:#fff !important;
    font-size:16px;
    font-weight:900;
}
.donor-card-premium .availability-pill{
    padding:7px 15px;
    border-radius:999px;
    background:#ffe6d4 !important;
    color:#5e3a2a !important;
    font-size:13px;
    font-weight:800;
}
.donor-card-premium .dcp-fav{
    top:16px;
    right:16px;
    width:42px;
    height:42px;
    background:#d89b25 !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 6px 14px rgba(171,111,17,.16);
    font-size:23px;
}
.donor-card-premium .dcp-last-donation{
    position:relative;
    z-index:1;
    margin-top:18px;
    background:#fff4e9 !important;
    border:1px solid #f2c18e;
    border-radius:18px;
    padding:14px 15px !important;
    color:#242424;
}
.donor-card-premium .dcp-ld-label{
    color:#555;
    font-size:12px;
    font-weight:800;
}
.donor-card-premium .dcp-ld-date{
    color:#171717;
    font-size:18px;
    font-weight:900;
}
.donor-card-premium .dcp-ld-relative{
    color:#777;
    font-size:13px;
}
.donor-card-premium .dcp-ld-badge.eligible{
    color:#21864c !important;
    background:transparent !important;
    font-size:13px;
    font-weight:800;
}
.donor-card-premium .dcp-ld-badge.waiting{
    color:#247b46 !important;
    background:transparent !important;
}
.donor-card-premium .dcp-contact{
    position:relative;
    z-index:1;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(70,45,30,.12);
}
.donor-card-premium .dcp-contact-line{
    color:#292929;
    font-size:13px;
}
.donor-card-premium .dcp-contact-line span{
    color:#666;
}
.donor-card-premium .dcp-actions{
    position:relative;
    z-index:1;
    margin-top:14px;
    gap:10px;
}
.donor-card-premium .dcp-actions .btn{
    min-height:46px;
    border-radius:999px;
    font-size:14px;
    font-weight:900;
}
.donor-card-premium .btn-whatsapp{
    background:#fff !important;
    color:#197847 !important;
    border:1.7px solid #1b7b4b !important;
}
.donor-card-premium .dcp-btn-call{
    background:linear-gradient(100deg,#f12a3f,#d20b31) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 8px 18px rgba(210,11,49,.16);
}
@media(max-width:480px){
    .donor-card-premium{padding:16px 15px 15px !important;border-radius:22px !important}
    .donor-card-premium .dcp-top > .life-ring{flex-basis:78px;width:78px;height:78px}
    .donor-card-premium .dcp-avatar{width:68px;height:68px}
    .donor-card-premium .dcp-name{font-size:18px}
    .donor-card-premium .dcp-location{font-size:12px}
    .donor-card-premium .dcp-blood-chip{font-size:14px;min-width:56px;padding:6px 13px}
    .donor-card-premium .availability-pill{font-size:11.5px;padding:6px 12px}
    .donor-card-premium .dcp-fav{width:40px;height:40px;top:14px;right:14px}
}

/* Donor Search — compact reference-card sizing v1.21.1 */

/* Donor Search — compact reference-card sizing v1.21.1 */
.donor-card-premium{
	border-radius:20px;
	padding:13px 14px 12px;
	margin-bottom:12px;
}
.donor-card-premium .dcp-top{
	gap:10px;
	padding-right:32px;
}
.donor-card-premium .dcp-top > .life-ring{
	flex-basis:64px;
	width:64px;
	height:64px;
	padding:3px;
}
.donor-card-premium .dcp-avatar{
	width:58px;
	height:58px;
}
.donor-card-premium .dcp-online-dot{
	width:13px;
	height:13px;
	border-width:2.5px;
	right:1px;
	bottom:3px;
}
.donor-card-premium .dcp-name{
	font-size:16px;
	line-height:1.2;
}
.donor-card-premium .dcp-location{
	font-size:12px;
	margin-top:2px;
}
.donor-card-premium .dcp-badges{
	margin-top:5px;
	gap:6px;
}
.donor-card-premium .dcp-blood-chip{
	min-width:50px;
	height:34px;
}
.donor-card-premium .dcp-fav{
	top:11px;
	right:11px;
	width:34px;
	height:34px;
	font-size:18px;
}
.donor-card-premium .dcp-last-donation{
	column-gap:10px;
	row-gap:2px;
	border-radius:14px;
	padding:9px 11px;
	margin-top:10px;
}
.donor-card-premium .dcp-ld-label{
	font-size:12px;
}
.donor-card-premium .dcp-ld-date{
	font-size:14px;
	line-height:1.2;
}
.donor-card-premium .dcp-ld-relative{
	font-size:11.5px;
	line-height:1.25;
}
.donor-card-premium .dcp-ld-badge{
	font-size:11.5px;
	padding:3px;
}
.donor-card-premium .dcp-contact{
	gap:6px 10px;
	padding-top:8px;
	margin-top:8px;
}
.donor-card-premium .dcp-contact-line{
	font-size:11.5px;
}
.donor-card-premium .dcp-actions{
	margin-top:9px;
	gap:8px;
}
.donor-card-premium .dcp-actions .btn{
	min-height:40px;
	font-size:12px;
}
@media(max-width:480px){
	.donor-card-premium .dcp-last-donation{
		grid-template-columns:1.1fr .9fr;
	}
	.donor-card-premium .dcp-contact{
		grid-template-columns:1fr 1fr;
	}
}

/* Donor Search: keep donation status text readable on one line. */
.dcp-ld-relative {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.dcp-ld-badge.eligible {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.dcp-ld-badge.eligible span {
    white-space: nowrap;
}

@media (max-width: 360px) {
    .dcp-ld-relative {
        font-size: 14px;
    }

    .dcp-ld-badge.eligible {
        font-size: 14px;
    }
}


/* BBB v1.21.5 — Donor Card green premium background + stronger section/card shadows.
   Only the Donor Search card surfaces are adjusted; layout/content unchanged. */
.donor-card-premium {
    background:
        radial-gradient(circle at 88% 18%, rgba(166, 205, 143, .18) 0, rgba(166, 205, 143, 0) 34%),
        linear-gradient(135deg, #fbfff6 0%, #f4faee 52%, #fffdf8 100%) !important;
    border-color: #c8ddb8 !important;
    box-shadow:
        0 18px 40px rgba(55, 105, 46, .18),
        0 6px 14px rgba(55, 105, 46, .11),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.donor-card-premium .dcp-last-donation {
    background:
        linear-gradient(135deg, #f8fcf3 0%, #eef7e8 100%) !important;
    border: 1px solid rgba(126, 165, 105, .34);
    box-shadow:
        0 10px 24px rgba(55, 105, 46, .16),
        0 3px 8px rgba(55, 105, 46, .09),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.donor-card-premium .dcp-last-donation > * {
    position: relative;
    z-index: 1;
}

.donor-card-premium .dcp-last-donation > div {
    border-radius: 14px;
}

@media (max-width: 480px) {
    .donor-card-premium {
        box-shadow:
            0 14px 32px rgba(55, 105, 46, .16),
            0 5px 12px rgba(55, 105, 46, .10),
            inset 0 1px 0 rgba(255,255,255,.96) !important;
    }

    .donor-card-premium .dcp-last-donation {
        box-shadow:
            0 8px 20px rgba(55, 105, 46, .14),
            0 2px 7px rgba(55, 105, 46, .08),
            inset 0 1px 0 rgba(255,255,255,.96);
    }
}

/* Donor Search v1.21.5 — Last Donation three-box reference layout.
   Keeps the existing card compact while separating date, elapsed time,
   and next-donation/status into individual elevated boxes. */
.donor-card-premium .dcp-last-donation{
    display:block;
    background:rgba(247,252,241,.92) !important;
    border:1px solid rgba(111,151,74,.24) !important;
    border-radius:18px !important;
    padding:12px !important;
    margin-top:10px !important;
    box-shadow:0 7px 18px rgba(76,105,54,.10), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.donor-card-premium .dcp-ld-label{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 2px 9px;
    color:#4d4d4d;
    font-size:13px;
    font-weight:900;
}
.donor-card-premium .dcp-ld-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    width:100%;
}
.donor-card-premium .dcp-ld-item{
    min-width:0;
    min-height:74px;
    padding:9px 8px 10px;
    border-radius:14px;
    border:1px solid rgba(86,110,78,.18);
    background:rgba(255,255,255,.78);
    box-shadow:0 5px 12px rgba(62,84,53,.10), inset 0 1px 0 rgba(255,255,255,.9);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    overflow:hidden;
}
.donor-card-premium .dcp-ld-item:nth-child(1){
    background:linear-gradient(145deg,#f1f9e9,#fbfdf8);
    border-color:rgba(75,137,72,.18);
}
.donor-card-premium .dcp-ld-item:nth-child(2){
    background:linear-gradient(145deg,#f1f7ff,#fbfdff);
    border-color:rgba(77,128,181,.17);
}
.donor-card-premium .dcp-ld-item:nth-child(3){
    background:linear-gradient(145deg,#fff9e7,#fffdf6);
    border-color:rgba(213,162,43,.20);
}
.donor-card-premium .dcp-ld-item-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    flex:0 0 28px;
    margin-bottom:1px;
    border-radius:9px;
    background:rgba(255,255,255,.72);
    font-size:16px;
    box-shadow:0 3px 8px rgba(0,0,0,.06);
}
.donor-card-premium .dcp-ld-item-label{
    color:#666;
    font-size:10.5px;
    font-weight:700;
    line-height:1.25;
    white-space:normal;
}
.donor-card-premium .dcp-ld-item strong{
    display:block;
    min-width:0;
    color:#171717;
    font-size:13.5px;
    font-weight:900;
    line-height:1.25;
    overflow-wrap:anywhere;
}
.donor-card-premium .dcp-ld-item .dcp-ld-date{
    margin:0;
    font-size:14px;
    line-height:1.25;
}
.donor-card-premium .dcp-ld-item .dcp-ld-relative{
    margin:0;
    color:#555;
    font-size:13px;
    font-weight:800;
    line-height:1.3;
}
.donor-card-premium .dcp-ld-item-eligible strong{
    color:#21864c;
}
.donor-card-premium .dcp-ld-item-waiting strong{
    color:#247b46;
}
.donor-card-premium .dcp-ld-item-status .dcp-ld-item-icon{
    background:#fff3cf;
}
.donor-card-premium .dcp-ld-item-eligible .dcp-ld-item-icon{
    background:#e4f5e8;
}
.donor-card-premium .dcp-ld-grid-empty{
    grid-template-columns:1fr;
}
.donor-card-premium .dcp-ld-item-wide{
    min-height:66px;
}
.donor-card-premium .dcp-ld-item-status .dcp-ld-badge{
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
    background:transparent !important;
    color:#247b46 !important;
    font-size:12px;
}
@media(max-width:480px){
    .donor-card-premium .dcp-last-donation{
        padding:10px !important;
        border-radius:16px !important;
    }
    .donor-card-premium .dcp-ld-grid{gap:7px}
    .donor-card-premium .dcp-ld-item{
        min-height:70px;
        padding:8px 7px 9px;
        border-radius:13px;
    }
    .donor-card-premium .dcp-ld-item-icon{
        width:26px;
        height:26px;
        flex-basis:26px;
        font-size:15px;
        border-radius:8px;
    }
    .donor-card-premium .dcp-ld-item-label{font-size:9.5px}
    .donor-card-premium .dcp-ld-item strong{font-size:12px}
    .donor-card-premium .dcp-ld-item .dcp-ld-date{font-size:12.5px}
    .donor-card-premium .dcp-ld-item .dcp-ld-relative{font-size:11.5px}
}
@media(max-width:340px){
    .donor-card-premium .dcp-ld-grid{gap:5px}
    .donor-card-premium .dcp-ld-item{padding:7px 5px}
    .donor-card-premium .dcp-ld-item-label{font-size:9px}
    .donor-card-premium .dcp-ld-item strong{font-size:11px}
}

/* Donor Search v1.21.5 — three-box text alignment refinement.
   Keep the label above each value; date and elapsed-time values stay on one
   clear line on mobile, while the status message may wrap if necessary. */
.donor-card-premium .dcp-ld-item .dcp-ld-date,
.donor-card-premium .dcp-ld-item .dcp-ld-relative{
    white-space:nowrap;
    overflow:visible;
    overflow-wrap:normal;
    word-break:keep-all;
    letter-spacing:-.25px;
}
.donor-card-premium .dcp-ld-item .dcp-ld-date{
    font-size:13px;
}
.donor-card-premium .dcp-ld-item .dcp-ld-relative{
    font-size:12.5px;
}
.donor-card-premium .dcp-ld-item-eligible strong,
.donor-card-premium .dcp-ld-item-waiting strong{
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
}
@media(max-width:480px){
    .donor-card-premium .dcp-ld-item .dcp-ld-date{
        /* Keep the full Bengali date inside its own box on narrow screens. */
        font-size:9.6px;
        letter-spacing:-.55px;
        white-space:nowrap;
        display:block;
        width:100%;
        max-width:100%;
        overflow:visible;
        line-height:1.35;
        transform:none;
    }
    .donor-card-premium .dcp-ld-item .dcp-ld-relative{
        font-size:10.2px;
        letter-spacing:-.3px;
        white-space:nowrap;
        display:block;
        width:100%;
        max-width:100%;
        overflow:visible;
        line-height:1.35;
    }
}
@media(max-width:340px){
    .donor-card-premium .dcp-ld-item .dcp-ld-date{
        font-size:9px;
        letter-spacing:-.65px;
    }
    .donor-card-premium .dcp-ld-item .dcp-ld-relative{
        font-size:9.8px;
        letter-spacing:-.35px;
    }
}


/* BBB Donor Search — Style 09 (deep burgundy + animated blood drops).
   The previous hex/mesh background is intentionally removed.
   Visual-only theme override; donor data, layout and interactions remain unchanged. */
.donor-card-premium{
    position:relative !important;
    overflow:hidden !important;
    background:
        radial-gradient(circle at 18% 16%, rgba(255,88,132,.10), transparent 30%),
        radial-gradient(circle at 86% 78%, rgba(157,31,80,.22), transparent 42%),
        linear-gradient(135deg,#3d0b20 0%,#57112d 52%,#420b25 100%) !important;
    border:1px solid rgba(221,132,162,.48) !important;
    box-shadow:
        0 18px 38px rgba(55,7,28,.34),
        0 6px 16px rgba(41,4,20,.25),
        inset 0 1px 0 rgba(255,255,255,.13) !important;
}
/* Dark burgundy decorative glow, matching Style 09's soft geometry. */
.donor-card-premium::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    width:250px !important;
    height:170px !important;
    left:-70px !important;
    top:-70px !important;
    border-radius:50% !important;
    background:radial-gradient(circle,rgba(191,55,102,.28),rgba(191,55,102,0) 68%) !important;
    transform:none !important;
    pointer-events:none !important;
}
.donor-card-premium::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    width:330px !important;
    height:260px !important;
    right:-130px !important;
    bottom:-120px !important;
    border-radius:50% !important;
    background:radial-gradient(circle,rgba(154,34,80,.34),rgba(154,34,80,0) 70%) !important;
    transform:none !important;
    box-shadow:none !important;
    pointer-events:none !important;
}

/* Keep the donor information above the decorative pattern. */
.donor-card-premium .dcp-top,
.donor-card-premium .dcp-last-donation,
.donor-card-premium .dcp-contact,
.donor-card-premium .dcp-actions,
.donor-card-premium .dcp-fav{
    position:relative;
    z-index:2;
}

.donor-card-premium .dcp-name{
    color:#fff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.donor-card-premium .dcp-location{
    color:rgba(255,255,255,.78) !important;
}
.donor-card-premium .dcp-blood-chip{
    background:linear-gradient(135deg,#f12643 0%,#c90b31 100%) !important;
    color:#fff !important;
    box-shadow:0 5px 12px rgba(0,0,0,.18);
}
.donor-card-premium .availability-pill{
    background:#f6e3d5 !important;
    color:#4b2c2b !important;
}
.donor-card-premium .dcp-fav{
    background:#d89b25 !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 7px 16px rgba(0,0,0,.22);
}

/* Pale donation section, as in Style 09 reference. */
.donor-card-premium .dcp-last-donation{
    background:linear-gradient(135deg,#fffaf7 0%,#f8f1ef 100%) !important;
    border:1px solid rgba(245,213,207,.78) !important;
    border-radius:18px !important;
    box-shadow:
        0 8px 18px rgba(19,2,12,.20),
        inset 0 1px 0 rgba(255,255,255,.98) !important;
    color:#292027 !important;
}
.donor-card-premium .dcp-ld-label{
    color:#4a3c43 !important;
    font-weight:800 !important;
}
.donor-card-premium .dcp-ld-item{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(192,154,162,.32) !important;
    box-shadow:
        0 5px 12px rgba(57,15,30,.10),
        inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.donor-card-premium .dcp-ld-item:nth-child(1){
    background:linear-gradient(145deg,#fff8f8,#fffdfd) !important;
    border-color:rgba(213,113,129,.28) !important;
}
.donor-card-premium .dcp-ld-item:nth-child(2){
    background:linear-gradient(145deg,#fbf9ff,#fffdfd) !important;
    border-color:rgba(126,110,148,.22) !important;
}
.donor-card-premium .dcp-ld-item:nth-child(3){
    background:linear-gradient(145deg,#fff9ee,#fffdf7) !important;
    border-color:rgba(218,171,74,.28) !important;
}
.donor-card-premium .dcp-ld-item-label{
    color:#62565d !important;
}
.donor-card-premium .dcp-ld-date{
    color:#211a1e !important;
}
.donor-card-premium .dcp-ld-relative{
    color:#61565b !important;
}
.donor-card-premium .dcp-ld-item-eligible strong{
    color:#168046 !important;
}
.donor-card-premium .dcp-ld-item-waiting strong{
    color:#b66b17 !important;
}
.donor-card-premium .dcp-ld-item-icon{
    position:relative;
    z-index:1;
}

/* Contact strip stays dark, with high-contrast text. */
.donor-card-premium .dcp-contact{
    border-top:1px solid rgba(255,255,255,.16) !important;
}
.donor-card-premium .dcp-contact-line{
    color:#fff !important;
}
.donor-card-premium .dcp-contact-line span{
    color:rgba(255,255,255,.78) !important;
}
.donor-card-premium .btn-whatsapp{
    background:#fff !important;
    color:#187647 !important;
    border-color:#4fb083 !important;
    box-shadow:0 7px 16px rgba(0,0,0,.16);
}
.donor-card-premium .dcp-btn-call{
    background:linear-gradient(100deg,#f12643 0%,#d00a32 100%) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}

/* Compact date fit retained from the previous approved version. */
.donor-card-premium .dcp-ld-item .dcp-ld-date{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    overflow-wrap:normal;
    word-break:keep-all;
    font-size:9.4px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    letter-spacing:-.45px !important;
    padding-right:0 !important;
}
.donor-card-premium .dcp-ld-item .dcp-ld-relative{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    font-size:10.4px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    letter-spacing:-.35px !important;
}
.donor-card-premium .dcp-ld-item-eligible strong,
.donor-card-premium .dcp-ld-item-waiting strong{
    font-size:11.2px !important;
    font-weight:700 !important;
    line-height:1.22 !important;
    letter-spacing:-.15px !important;
}
.donor-card-premium .dcp-ld-item-eligible .dcp-ld-item-label,
.donor-card-premium .dcp-ld-item-waiting .dcp-ld-item-label{
    font-size:9.5px !important;
    font-weight:600 !important;
}
@media (max-width:380px){
    .donor-card-premium .dcp-ld-grid{gap:5px}
    .donor-card-premium .dcp-ld-item{padding:8px 6px 9px}
    .donor-card-premium .dcp-ld-item .dcp-ld-date{font-size:8.9px !important;letter-spacing:-.5px !important}
    .donor-card-premium .dcp-ld-item .dcp-ld-relative{font-size:9.8px !important}
    .donor-card-premium .dcp-ld-item-eligible strong,
    .donor-card-premium .dcp-ld-item-waiting strong{font-size:10.6px !important}
}



/* -------------------------------------------------------------------------
 * BBB Donor Card — animated blood-drop ambience
 * Replaces the old hex/mesh pattern. CSS-only; no image assets.
 * ------------------------------------------------------------------------- */
.donor-card-premium .dcp-blood-drops{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
    border-radius:inherit;
}

.donor-card-premium .dcp-blood-drop{
    position:absolute;
    top:-72px;
    left:var(--drop-left,50%);
    width:var(--drop-size,14px);
    height:var(--drop-height,22px);
    border-radius:58% 58% 62% 62% / 44% 44% 72% 72%;
    background:
        radial-gradient(circle at 35% 24%, rgba(255,210,224,.72) 0 7%, transparent 18%),
        linear-gradient(165deg, rgba(255,82,122,.92), rgba(161,9,55,.92) 68%, rgba(111,4,37,.88));
    box-shadow:
        0 0 10px rgba(255,48,95,.24),
        0 5px 12px rgba(33,0,13,.22);
    opacity:0;
    transform:translate3d(0,0,0) scale(.72);
    clip-path:polygon(50% 0%, 86% 48%, 88% 68%, 75% 88%, 50% 100%, 25% 88%, 12% 68%, 14% 48%);
    animation:dcp-blood-drop-fall var(--drop-duration,8s) linear var(--drop-delay,0s) infinite;
}

.donor-card-premium .dcp-blood-drop:nth-child(1){ --drop-left:8%;  --drop-size:11px; --drop-height:18px; --drop-duration:8.8s; --drop-delay:-1.5s; }
.donor-card-premium .dcp-blood-drop:nth-child(2){ --drop-left:23%; --drop-size:17px; --drop-height:27px; --drop-duration:10.5s; --drop-delay:-5.8s; }
.donor-card-premium .dcp-blood-drop:nth-child(3){ --drop-left:41%; --drop-size:10px; --drop-height:17px; --drop-duration:7.6s; --drop-delay:-3.2s; }
.donor-card-premium .dcp-blood-drop:nth-child(4){ --drop-left:57%; --drop-size:15px; --drop-height:24px; --drop-duration:9.6s; --drop-delay:-7.1s; }
.donor-card-premium .dcp-blood-drop:nth-child(5){ --drop-left:72%; --drop-size:12px; --drop-height:20px; --drop-duration:8.1s; --drop-delay:-4.4s; }
.donor-card-premium .dcp-blood-drop:nth-child(6){ --drop-left:88%; --drop-size:18px; --drop-height:29px; --drop-duration:11.2s; --drop-delay:-8.4s; }

@keyframes dcp-blood-drop-fall{
    0%{
        opacity:0;
        transform:translate3d(0,-10px,0) scale(.62);
    }
    10%{
        opacity:.78;
        transform:translate3d(4px,20px,0) scale(.86);
    }
    52%{
        opacity:.48;
        transform:translate3d(-6px,250px,0) scale(.98);
    }
    78%{
        opacity:.16;
        transform:translate3d(5px,390px,0) scale(1.04);
    }
    100%{
        opacity:0;
        transform:translate3d(-3px,520px,0) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce){
    .donor-card-premium .dcp-blood-drop{
        animation:none !important;
        opacity:0 !important;
    }
}

/* -------------------------------------------------------------------------
 * BBB Donor Card — Style 09 premium card motion
 * Animation-only enhancement. No markup, data, layout or interaction changes.
 * ------------------------------------------------------------------------- */
.donor-card-premium{
    animation: bbb-style09-card-breathe 6s ease-in-out infinite;
    animation-name: bbb-style09-card-breathe;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* The two decorative glows now travel slowly across the card instead of
   staying fixed in one corner. */
.donor-card-premium::before{
    animation: bbb-style09-glow-drift 11s ease-in-out infinite alternate;
}
.donor-card-premium::after{
    animation: bbb-style09-glow-drift-reverse 13s ease-in-out infinite alternate;
}

@keyframes bbb-style09-card-breathe {
    0%, 100% {
        box-shadow:
            0 18px 38px rgba(55,7,28,.34),
            0 6px 16px rgba(41,4,20,.25),
            inset 0 1px 0 rgba(255,255,255,.13);
    }
    50% {
        box-shadow:
            0 22px 44px rgba(55,7,28,.42),
            0 9px 22px rgba(41,4,20,.32),
            inset 0 1px 0 rgba(255,255,255,.17);
    }
}

/* Slow movement of the Style 09 hexagonal background layers. */


@keyframes bbb-style09-glow-drift {
    0%   { transform:translate3d(-18px,-10px,0) scale(.92); opacity:.62; }
    50%  { transform:translate3d(115px,45px,0) scale(1.06); opacity:.82; }
    100% { transform:translate3d(225px,95px,0) scale(.98); opacity:.66; }
}
@keyframes bbb-style09-glow-drift-reverse {
    0%   { transform:translate3d(18px,12px,0) scale(.94); opacity:.52; }
    50%  { transform:translate3d(-90px,-55px,0) scale(1.08); opacity:.74; }
    100% { transform:translate3d(-185px,-105px,0) scale(.98); opacity:.56; }
}

/* Gold favorite star: gentle breathing + occasional shine. */
.donor-card-premium .dcp-fav{
    animation: bbb-style09-star-pulse 4.8s ease-in-out infinite;
    overflow:hidden;
    isolation:isolate;
}

.donor-card-premium .dcp-fav::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:linear-gradient(
        120deg,
        transparent 25%,
        rgba(255,255,255,.38) 45%,
        transparent 65%
    );
    transform:translateX(-130%) scaleX(.72);
    animation: bbb-style09-star-shine 5.5s ease-in-out infinite;
    pointer-events:none;
}

@keyframes bbb-style09-star-pulse {
    0%, 72%, 100% {
        box-shadow:0 7px 16px rgba(0,0,0,.22);
    }
    78% {
        box-shadow:0 8px 20px rgba(255,205,72,.34), 0 7px 16px rgba(0,0,0,.22);
    }
    84% {
        box-shadow:0 7px 16px rgba(0,0,0,.22);
    }
}

@keyframes bbb-style09-star-shine {
    0%, 58% { transform:translateX(-130%); opacity:0; }
    65% { opacity:1; }
    76%, 100% { transform:translateX(130%); opacity:0; }
}

/* Availability badge: very subtle live-status pulse. */
.donor-card-premium .availability-pill.online{
    animation: bbb-style09-available-pulse 3.8s ease-in-out infinite;
}

@keyframes bbb-style09-available-pulse {
    0%, 100% {
        box-shadow:0 0 0 0 rgba(31,158,85,0);
    }
    50% {
        box-shadow:0 0 0 5px rgba(31,158,85,.08);
    }
}

/* Respect Android/browser accessibility preference. */
@media (prefers-reduced-motion: reduce){
    .donor-card-premium,
    .donor-card-premium .dcp-fav,
    .donor-card-premium .availability-pill.online,
    .donor-card-premium::before,
    .donor-card-premium::after,
    .donor-card-premium .dcp-fav::after{
        animation:none !important;
        will-change:auto !important;
    }
}


/* BBB — browser zoom remains available.
 * The native Android WebView controls its own zoom behavior, so the web
 * theme must not globally disable pinch/double-tap zoom for normal browsers.
 */



/* ---------------------------------------------------------------------- */
/* Full Banner Image — optional bottom CTA                                */
/* Uses the per-banner Admin fields: Full Image Banner Button Text/URL.   */
/* The image remains unchanged; the CTA is a lightweight overlay.         */
/* ---------------------------------------------------------------------- */
.db-hero.db-hero-full-image {
	position: relative;
	overflow: hidden;
}
.db-hero-full-cta {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 3;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 18px;
	border: 1px solid rgba(255,255,255,.72);
	border-radius: 999px;
	background: rgba(178, 0, 24, .92);
	color: #fff !important;
	text-decoration: none !important;
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 8px 22px rgba(96, 0, 15, .25);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.db-hero-full-cta:hover {
	background: rgba(145, 0, 20, .96);
	transform: translateX(-50%) translateY(-1px);
	box-shadow: 0 10px 26px rgba(96, 0, 15, .30);
}
.db-hero-full-cta:active {
	transform: translateX(-50%) scale(.97);
}
.db-hero-full-cta svg {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
}
@media (max-width: 380px) {
	.db-hero-full-cta {
		bottom: 10px;
		min-height: 34px;
		padding: 7px 14px;
		font-size: 12.5px;
	}
}
\n\n/* -------------------------------------------------------------------------\n * BBB v1.21.45 — Donor Search Android/WebView performance guard\n *\n * The public donor-search API already returns the complete card data. The\n * previous front-end implementation also performed per-donor REST lookups\n * and painted six animated drops + two moving glows on every card. With a\n * few dozen donors that becomes hundreds of animated layers and produces\n * visible scroll hitching in Android WebView. Keep the approved card design,\n * but make the mobile list cheap to paint and scroll.\n * ------------------------------------------------------------------------- */\n@media (max-width: 768px) {\n    .donor-card-premium {\n        content-visibility: auto;\n        contain-intrinsic-size: 0 470px;\n        animation: none !important;\n    }\n\n    .donor-card-premium::before,\n    .donor-card-premium::after {\n        animation: none !important;\n    }\n\n    .donor-card-premium .dcp-blood-drops,\n    .donor-card-premium .dcp-blood-drop {\n        display: none !important;\n        animation: none !important;\n    }\n}\n

/* ==========================================================================
 * BBB Blood Awareness — native Android-style Content Card renderer
 * v1.21.57
 * This stylesheet lives in the app bundle so Content Cards do not need to
 * carry <style> tags inside WordPress content.
 * ========================================================================== */
.bbb-awareness-richtext{
  margin:0!important;
  padding:0!important;
  font-size:inherit!important;
  line-height:normal!important;
}
.bbb-awareness-richtext .bbb-awareness{
  width:100%;
  box-sizing:border-box;
  padding:16px;
  background:#fff7f5;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
  color:#241614;
}
.bbb-awareness-richtext .bbb-awareness-intro{
  background:linear-gradient(135deg,#fff,#fff8f6);
  border:1px solid #f0d9d5;
  border-radius:24px;
  padding:22px 18px;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(163,22,33,.08);
  text-align:center;
}
.bbb-awareness-richtext .bbb-awareness-intro-icon{
  width:58px;height:58px;margin:0 auto 10px;border-radius:18px;
  background:#fde8eb;display:flex;align-items:center;justify-content:center;font-size:30px;
}
.bbb-awareness-richtext .bbb-awareness-intro h2{
  margin:0 0 8px!important;color:#a31621!important;font-size:27px!important;font-weight:800!important;line-height:1.25!important;
}
.bbb-awareness-richtext .bbb-awareness-intro p{
  margin:8px auto 0!important;max-width:520px;color:#756663!important;font-size:15px!important;line-height:1.6!important;
}
.bbb-awareness-richtext .bbb-awareness-list{display:flex;flex-direction:column;gap:12px}
.bbb-awareness-richtext .bbb-awareness-card{
  width:100%;border:1px solid #edd8d4;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 5px 18px rgba(50,20,20,.06);box-sizing:border-box;
}
.bbb-awareness-richtext .bbb-awareness-card-head{
  min-height:76px;padding:12px 14px;display:flex;align-items:center;gap:13px;box-sizing:border-box;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.bbb-awareness-richtext .bbb-awareness-icon{
  width:48px;height:48px;flex:0 0 48px;border-radius:16px;background:#fde9ec;
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.bbb-awareness-richtext .bbb-awareness-title{flex:1;min-width:0}
.bbb-awareness-richtext .bbb-awareness-title strong{
  display:block;color:#241614!important;font-size:18px!important;font-weight:800!important;line-height:1.3!important;
}
.bbb-awareness-richtext .bbb-awareness-title span{
  display:block;margin-top:2px;color:#8a7b77!important;font-size:13px!important;line-height:1.4!important;
}
.bbb-awareness-richtext .bbb-awareness-arrow{
  width:34px;height:34px;border-radius:50%;background:#fff1f3;color:#a31621;display:flex;
  align-items:center;justify-content:center;font-size:24px;flex:0 0 34px;transition:transform .25s ease,background .25s ease;
}
.bbb-awareness-richtext .bbb-awareness-card.open .bbb-awareness-arrow{transform:rotate(90deg);background:#a31621;color:#fff}
.bbb-awareness-richtext .bbb-awareness-detail{
  display:none;padding:0 18px 18px 75px;border-top:1px solid #f2e4e1;
}
.bbb-awareness-richtext .bbb-awareness-card.open .bbb-awareness-detail{display:block;animation:bbbAwarenessFade .25s ease}
.bbb-awareness-richtext .bbb-awareness-detail p{
  margin:14px 0 0!important;color:#625552!important;font-size:15px!important;line-height:1.75!important;
}
.bbb-awareness-richtext .bbb-awareness-detail ul{margin:12px 0 0!important;padding-left:20px!important;color:#625552!important}
.bbb-awareness-richtext .bbb-awareness-detail li{margin:7px 0!important;font-size:14px!important;line-height:1.6!important}
.bbb-awareness-richtext .bbb-awareness-detail strong{color:#a31621!important}
.bbb-awareness-richtext .bbb-awareness-note{
  margin-top:16px;padding:18px;border-radius:20px;background:linear-gradient(135deg,#a31621,#7a0f19);
  color:#fff;text-align:center;box-shadow:0 8px 22px rgba(163,22,33,.18);
}
.bbb-awareness-richtext .bbb-awareness-note strong{display:block;color:#fff!important;font-size:19px!important;line-height:1.4!important}
.bbb-awareness-richtext .bbb-awareness-note span{display:block;margin-top:5px;color:#fff!important;font-size:13px!important;opacity:.9}
@keyframes bbbAwarenessFade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){
  .bbb-awareness-richtext .bbb-awareness{padding:12px}
  .bbb-awareness-richtext .bbb-awareness-intro{padding:18px 14px;border-radius:21px}
  .bbb-awareness-richtext .bbb-awareness-intro h2{font-size:25px!important}
  .bbb-awareness-richtext .bbb-awareness-card-head{min-height:72px;padding:11px 12px}
  .bbb-awareness-richtext .bbb-awareness-icon{width:44px;height:44px;flex-basis:44px;border-radius:14px;font-size:22px}
  .bbb-awareness-richtext .bbb-awareness-title strong{font-size:17px!important}
  .bbb-awareness-richtext .bbb-awareness-detail{padding:0 15px 16px 68px}
  .bbb-awareness-richtext .bbb-awareness-detail p{font-size:14px!important}
}

/* ==========================================================================
 * BBB Universal Content UI — reusable Android-style Content Card components
 * v1.21.58
 *
 * Any Content Card can use these classes. No <style> or <script> is required
 * inside the WordPress content. Behaviour is bound by content.js.
 * ========================================================================== */
.bbb-ui-page{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  background:#fff7f5;
  color:#241614;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
}
.bbb-ui-hero{
  position:relative;
  margin:0 0 14px;
  padding:20px 18px;
  border:1px solid #f0d9d5;
  border-radius:22px;
  background:linear-gradient(135deg,#fff,#fff8f6);
  box-shadow:0 7px 22px rgba(163,22,33,.08);
  text-align:center;
}
.bbb-ui-hero-icon{
  width:54px;height:54px;margin:0 auto 9px;border-radius:17px;
  display:flex;align-items:center;justify-content:center;
  background:#fde8eb;font-size:28px;
}
.bbb-ui-hero h1,.bbb-ui-hero h2{
  margin:0!important;color:#a31621!important;font-size:26px!important;
  font-weight:800!important;line-height:1.25!important;
}
.bbb-ui-hero p{
  margin:7px auto 0!important;max-width:620px;color:#756663!important;
  font-size:14px!important;line-height:1.6!important;
}
.bbb-ui-section-title{
  display:flex;align-items:center;gap:9px;margin:16px 2px 10px;
  color:#241614;font-size:20px;font-weight:800;line-height:1.3;
}
.bbb-ui-section-title::before{
  content:"";width:5px;height:24px;border-radius:5px;background:#a31621;flex:0 0 5px;
}
.bbb-ui-list{display:flex;flex-direction:column;gap:11px}
.bbb-ui-card,.bbb-ui-accordion{
  width:100%;box-sizing:border-box;overflow:hidden;
  border:1px solid #edd8d4;border-radius:19px;background:#fff;
  box-shadow:0 5px 17px rgba(50,20,20,.055);
}
.bbb-ui-card-body{padding:16px}
.bbb-ui-card h3,.bbb-ui-card h4{margin:0 0 6px!important;color:#241614!important;font-size:18px!important;font-weight:800!important;line-height:1.35!important}
.bbb-ui-card p,.bbb-ui-card li{color:#625552!important;font-size:14px!important;line-height:1.7!important}
.bbb-ui-card p{margin:7px 0!important}
.bbb-ui-card ul,.bbb-ui-card ol{margin:9px 0!important;padding-left:21px!important}
.bbb-ui-icon{
  width:46px;height:46px;flex:0 0 46px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;background:#fde9ec;font-size:22px;
}
.bbb-ui-row{display:flex;align-items:center;gap:12px;padding:12px 13px;box-sizing:border-box}
.bbb-ui-row-main{flex:1;min-width:0}
.bbb-ui-row-title{display:block;color:#241614!important;font-size:17px!important;font-weight:800!important;line-height:1.35!important}
.bbb-ui-row-subtitle{display:block;margin-top:2px;color:#8a7b77!important;font-size:13px!important;line-height:1.4!important}
.bbb-ui-arrow{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff1f3;color:#a31621;font-size:23px;line-height:1;
}
.bbb-ui-accordion-head{
  width:100%;min-height:70px;padding:11px 13px;box-sizing:border-box;
  display:flex;align-items:center;gap:12px;border:0;background:transparent;
  color:inherit;text-align:left;font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.bbb-ui-accordion-body{
  display:none;padding:0 16px 17px 70px;border-top:1px solid #f2e4e1;
}
.bbb-ui-accordion.open .bbb-ui-accordion-body{display:block;animation:bbbUiOpen .22s ease}
.bbb-ui-accordion.open .bbb-ui-arrow{transform:rotate(90deg);background:#a31621;color:#fff}
.bbb-ui-accordion-body p{margin:13px 0 0!important;color:#625552!important;font-size:14px!important;line-height:1.75!important}
.bbb-ui-accordion-body ul,.bbb-ui-accordion-body ol{margin:11px 0 0!important;padding-left:20px!important;color:#625552!important}
.bbb-ui-accordion-body li{margin:6px 0!important;font-size:14px!important;line-height:1.6!important}
.bbb-ui-accordion-body strong{color:#a31621!important}
.bbb-ui-note{
  margin-top:13px;padding:16px;border-radius:18px;
  background:linear-gradient(135deg,#a31621,#7a0f19);color:#fff;text-align:center;
  box-shadow:0 7px 20px rgba(163,22,33,.16);
}
.bbb-ui-note strong{display:block;color:#fff!important;font-size:17px!important;line-height:1.45!important}
.bbb-ui-note span{display:block;margin-top:4px;color:#fff!important;font-size:12.5px!important;opacity:.9}
.bbb-ui-button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;padding:9px 17px;border-radius:999px;
  background:#a31621;color:#fff!important;text-decoration:none!important;
  font-size:14px;font-weight:800;box-shadow:0 7px 16px rgba(163,22,33,.16);
}
.bbb-ui-divider{height:1px;margin:14px 0;background:#f0e1de}
@keyframes bbbUiOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){
  .bbb-ui-page{padding:10px}
  .bbb-ui-hero{padding:18px 14px;border-radius:20px}
  .bbb-ui-hero h1,.bbb-ui-hero h2{font-size:24px!important}
  .bbb-ui-accordion-head{min-height:68px;padding:10px 11px}
  .bbb-ui-icon{width:44px;height:44px;flex-basis:44px;border-radius:14px;font-size:21px}
  .bbb-ui-row{padding:11px}
  .bbb-ui-row-title{font-size:16px!important}
  .bbb-ui-accordion-body{padding:0 14px 15px 66px}
}


/* BBB v1.21.60 — Premium animated primary service artwork.
 * These are inline SVG illustrations (not bitmap images), so every part can
 * move inside Android WebView. Labels remain below the icon cards.
 */
.db-shortcuts .db-service-animated-art {
    width: 92%;
    height: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 6px 9px rgba(193,18,63,.14));
}
.db-shortcuts .db-service-animated-art svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}
.db-shortcuts .db-service-animated-art .bbb-donor-person,
.db-shortcuts .db-service-animated-art .bbb-donor-phone,
.db-shortcuts .db-service-animated-art .bbb-donor-lens,
.db-shortcuts .db-service-animated-art .bbb-emergency-drop,
.db-shortcuts .db-service-animated-art .bbb-emergency-siren,
.db-shortcuts .db-service-animated-art .bbb-emergency-alert {
    transform-box: fill-box;
    transform-origin: center;
}
.db-shortcuts .db-service-animated-donor .bbb-donor-route {
    animation: bbbDonorRoute 2.8s linear infinite;
}
.db-shortcuts .db-service-animated-donor .bbb-donor-pins circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: bbbDonorPin 1.4s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-donor .bbb-donor-phone {
    animation: bbbDonorPhone 3.6s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-donor .bbb-donor-lens {
    animation: bbbDonorLens 2.5s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-donor .bbb-donor-person {
    animation: bbbDonorPerson 3.8s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-donor .bbb-donor-sparkles {
    animation: bbbSparkle 1.9s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-emergency .bbb-emergency-drop {
    animation: bbbEmergencyDrop 1.35s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-emergency .bbb-emergency-rays {
    transform-box: fill-box;
    transform-origin: center;
    animation: bbbEmergencyRays 1.45s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-emergency .bbb-emergency-siren {
    animation: bbbEmergencySiren .85s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-emergency .bbb-emergency-heartbeat {
    animation: bbbEmergencyHeartbeat 1.25s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-emergency .bbb-emergency-hands {
    animation: bbbEmergencyHands 2.3s ease-in-out infinite;
}
.db-shortcuts .db-service-animated-emergency .bbb-emergency-alert {
    animation: bbbEmergencyAlert 2s ease-in-out infinite;
}
@keyframes bbbDonorRoute { 0% { stroke-dashoffset:0; opacity:.35 } 50% { stroke-dashoffset:-18; opacity:1 } 100% { stroke-dashoffset:-36; opacity:.35 } }
@keyframes bbbDonorPin { 0%,100% { transform:scale(.92); opacity:.72 } 50% { transform:scale(1.18); opacity:1 } }
@keyframes bbbDonorPhone { 0%,100% { transform:translateY(1px) rotate(-1deg) } 50% { transform:translateY(-3px) rotate(1deg) } }
@keyframes bbbDonorLens { 0%,100% { transform:translate(0,0) rotate(-5deg) } 50% { transform:translate(4px,-4px) rotate(6deg) } }
@keyframes bbbDonorPerson { 0%,100% { transform:translateY(1px) } 50% { transform:translateY(-2px) } }
@keyframes bbbSparkle { 0%,100% { opacity:.35; transform:scale(.9) } 50% { opacity:1; transform:scale(1.1) } }
@keyframes bbbEmergencyDrop { 0%,100% { transform:translateY(2px) scale(1) } 50% { transform:translateY(-4px) scale(1.06) } }
@keyframes bbbEmergencyRays { 0%,100% { transform:scale(.92); opacity:.45 } 50% { transform:scale(1.08); opacity:1 } }
@keyframes bbbEmergencySiren { 0%,100% { transform:rotate(-5deg) translateY(0); opacity:.78 } 50% { transform:rotate(5deg) translateY(-2px); opacity:1 } }
@keyframes bbbEmergencyHeartbeat { 0%,100% { opacity:.35 } 50% { opacity:1 } }
@keyframes bbbEmergencyHands { 0%,100% { transform:translateY(1px) } 50% { transform:translateY(-2px) } }
@keyframes bbbEmergencyAlert { 0%,100% { transform:translateY(1px) } 50% { transform:translateY(-2px) } }

/* The core motion is native SVG <animate>/<animateTransform>, which continues
   to work in modern Android WebView even if CSS motion has been disabled.
   Keep the accessibility preference for the CSS-only decorative effects. */
@media (prefers-reduced-motion: reduce) {
    .db-shortcuts .db-service-animated-art > svg > * { animation: none !important; }
}

/* v1.21.62 — Restore the original Service Card border/stroke.
   Artwork remains standalone; only the card frame is restored. */
.db-shortcuts .service-icon {
    background: transparent !important;
    border: 2px solid #e86b83 !important;
    box-shadow: 0 8px 22px rgba(225, 61, 91, .16), inset 0 1px 0 rgba(255,255,255,.9) !important;
    border-radius: 22px !important;
    overflow: visible !important;
}
.db-shortcuts .service-icon::before {
    display: none !important;
}
.db-shortcuts .service-icon img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}
.db-shortcuts .service-card:hover .service-icon,
.db-shortcuts .service-card:active .service-icon,
.db-shortcuts .service-card.active .service-icon-frame {
    box-shadow: none !important;
    transform: none;
}

/* v1.21.64 — Service Card border belongs to the frame only.
   Never draw a second pink border on the inner icon/artwork. */
.db-shortcuts .service-icon-frame {
    border: 2px solid #e86b83 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(225, 61, 91, .16), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.db-shortcuts .service-icon {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
.db-shortcuts .service-icon img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* v1.21.65 — Service artwork background refresh + police artwork centering.
   The pink border remains ONLY on the service-card frame. The artwork itself
   stays border/stroke-free and now sits on a soft premium pink background
   matching the approved reference look. */
.db-shortcuts .service-icon-frame {
    /* Reference-matched card surface: soft pink glass, subtle glow and
       tiny light points. This background belongs to the frame only, so
       replacing an icon PNG later never changes the artwork itself. */
    background-color: #fff5f8 !important;
    background-image:
        radial-gradient(circle at 16% 16%, rgba(255,255,255,.98) 0 5%, transparent 18%),
        radial-gradient(circle at 84% 20%, rgba(255,255,255,.90) 0 2%, transparent 8%),
        radial-gradient(circle at 74% 78%, rgba(255,224,235,.72) 0 10%, transparent 28%),
        radial-gradient(circle at 28% 82%, rgba(255,235,242,.78) 0 8%, transparent 24%),
        radial-gradient(circle at 54% 12%, rgba(255,255,255,.85) 0 1.5%, transparent 5%),
        linear-gradient(145deg, #fffafd 0%, #fff1f6 48%, #fde4ed 100%) !important;
    border: 2px solid #e86b83 !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 24px rgba(225,61,91,.14), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -8px 18px rgba(238,121,151,.08) !important;
    overflow: hidden !important;
}

.db-shortcuts .service-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.db-shortcuts .service-icon img {
    width: 100% !important;
    height: 100% !important;
    padding: 4px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
}

/* v1.21.67 — Service icon admin selection + police artwork fit.
 * Admin-uploaded Content Card icons always win over title-based fallback art.
 * Police artwork has more transparent breathing room than the other PNGs,
 * so only that card receives a modest scale-up; the PNG itself stays clean.
 */
.db-shortcuts .service-card-police .service-icon img {
    width: 118% !important;
    height: 118% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translate(0, 1%) !important;
}