/* Bipashana donor form -- responsive, both supplied images combined inside
   the same card: the tribute photo as the header banner, the hands-and-heart
   artwork as a small badge over that banner and again as a soft watermark
   behind the form fields at low opacity so the inputs stay fully legible. */

.bipashana-wrap {
	--bipashana-red: #c0392b;
	--bipashana-red-dark: #922b21;
	--bipashana-ink: #2b2b2b;
	--bipashana-muted: #6b6b6b;
	--bipashana-border: #e7e1de;
	width: 100%;
	max-width: 1800px;
	margin: 2rem auto;
	padding: 0 1rem;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--bipashana-ink);
}
.bipashana-wrap *,
.bipashana-wrap *::before,
.bipashana-wrap *::after {
	box-sizing: border-box;
}

/* Sidebar (chart / latest donors) sits as a full-width row above the main
   donor card, both centered in one column on the page -- rather than a
   side-by-side split. .bipashana-main is capped at the same effective width
   the card has always rendered at, so the registration/search form itself
   is visually unchanged from before. */
.bipashana-layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.bipashana-main {
	position: relative;
	min-width: 0;
	width: 100%;
	max-width: 1000px;
}

.bipashana-card {
	position: relative;
	display: grid;
	grid-template-columns: 300px 1fr;
	background: #fffdfb;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 24px 60px -24px rgba(80, 20, 20, 0.35), 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* --- Live donor-count badge: round, sparkling pink heart, top-right.
   Positioned relative to .bipashana-main (not .bipashana-card) so the
   card can keep clipping its own rounded corners while the badge still
   pops out above/over that corner like a sticker. --- */
.bipashana-donor-badge {
	position: absolute;
	top: -16px;
	right: 1.4rem;
	width: 108px;
	z-index: 6;
	text-align: center;
	pointer-events: none;
}
.bipashana-badge-crown {
	display: block;
	font-size: 1.15rem;
	line-height: 1;
	margin-bottom: -6px;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}
.bipashana-badge-circle {
	position: relative;
	width: 82px;
	height: 82px;
	margin: 0 auto;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #ffffff 0%, #fff2f6 55%, #ffd7e3 100%);
	box-shadow: 0 12px 22px -8px rgba(216, 0, 60, 0.5), 0 0 0 4px #fff, 0 0 0 5px #ffd7e3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bipashana-badge-heart {
	position: relative;
	width: 48px;
	height: 44px;
}
.bipashana-badge-heart .heart-shape {
	position: absolute;
	top: 9px;
	left: 1px;
	width: 30px;
	height: 30px;
	background: linear-gradient(145deg, #ffaec6 0%, #ff3d78 55%, #c8003c 100%);
	transform: rotate(-45deg);
	box-shadow: 0 5px 12px -4px rgba(200, 0, 60, 0.6);
}
.bipashana-badge-heart .heart-shape::before,
.bipashana-badge-heart .heart-shape::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 30px;
	background: inherit;
	border-radius: 50%;
}
.bipashana-badge-heart .heart-shape::before {
	top: -15px;
	left: 0;
}
.bipashana-badge-heart .heart-shape::after {
	top: 0;
	left: 15px;
}
.bipashana-badge-count {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 800;
	font-size: 1.15rem;
	text-shadow: 0 1px 3px rgba(120, 0, 30, 0.55);
	z-index: 2;
}
.bipashana-badge-sparkle {
	position: absolute;
	color: #ffc93c;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	z-index: 3;
	animation: bipashana-twinkle 1.8s ease-in-out infinite;
}
.sparkle-1 {
	top: -3px;
	left: -2px;
	font-size: 1.05rem;
}
.sparkle-2 {
	bottom: 0;
	right: -4px;
	font-size: 0.8rem;
	animation-delay: 0.7s;
}
@keyframes bipashana-twinkle {
	0%, 100% { opacity: 0.55; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1.15); }
}
.bipashana-badge-caption {
	margin: 6px 4px 0;
	font-size: 0.62rem;
	font-weight: 800;
	line-height: 1.25;
	color: #8a0f36;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.bipashana-badge-count.is-bumped {
	animation: bipashana-bump 0.5s ease;
}
@keyframes bipashana-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* --- Sidebar: blood-group distribution doughnut + latest donors, shown as
   a full-width row above the main card (see .bipashana-layout above). --- */
.bipashana-sidebar {
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
	min-width: 0;
	width: 100%;
	max-width: 1000px;
}
.bipashana-sidebar .bipashana-stat-card {
	flex: 1 1 0;
	min-width: 0;
}
.bipashana-stat-card {
	background: #fffdfb;
	border-radius: 18px;
	padding: 1.25rem 1.25rem 1.4rem;
	box-shadow: 0 16px 40px -22px rgba(80, 20, 20, 0.3), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.bipashana-stat-title {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--bipashana-red);
	text-align: center;
}
.bipashana-stat-subtitle {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--bipashana-muted);
}
.bipashana-empty-note {
	margin: 0;
	font-size: 0.8rem;
	color: var(--bipashana-muted);
	text-align: center;
	line-height: 1.5;
}

/* Doughnut: a conic-gradient ring (percentages computed server-side, one
   fixed-order categorical color per blood group) with a solid center hole
   showing the total donor count. Percent labels always live in the legend
   text below -- never color alone -- per the contrast-relief requirement
   for the aqua/yellow/magenta slots in this palette. */
.bipashana-donut-row {
	display: flex;
	justify-content: center;
	margin-bottom: 1.1rem;
}
.bipashana-donut {
	position: relative;
	width: 148px;
	height: 148px;
	border-radius: 50%;
	flex-shrink: 0;
}
.bipashana-donut-hole {
	position: absolute;
	inset: 20px;
	border-radius: 50%;
	background: #fffdfb;
	box-shadow: inset 0 0 0 1px var(--bipashana-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.bipashana-donut-total {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--bipashana-ink);
	line-height: 1.1;
}
.bipashana-donut-total-label {
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--bipashana-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bipashana-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem 0.75rem;
}
.bipashana-legend li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	color: var(--bipashana-ink);
}
.bipashana-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.bipashana-legend-label {
	font-weight: 700;
}
.bipashana-legend-pct {
	margin-left: auto;
	color: var(--bipashana-muted);
	font-variant-numeric: tabular-nums;
}

/* Latest donors: no fixed/min height anywhere in this chain, so the card
   hugs exactly however many of the (up to 10) rows exist -- no leftover
   space below a short list, no scrollbar on a full one. */
.bipashana-latest-list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 2;
	column-gap: 1.25rem;
}
.bipashana-latest-list li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.1rem;
	border-bottom: 1px solid var(--bipashana-border);
	font-size: 0.85rem;
}
.bipashana-latest-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.bipashana-latest-list li:first-child {
	padding-top: 0;
}
.bipashana-latest-list strong {
	color: var(--bipashana-ink);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bipashana-mini-heart {
	position: relative;
	width: 11px;
	height: 10px;
	flex-shrink: 0;
	transform: rotate(-45deg);
	background: linear-gradient(145deg, #ffaec6 0%, #ff3d78 55%, #c8003c 100%);
}
.bipashana-mini-heart::before,
.bipashana-mini-heart::after {
	content: "";
	position: absolute;
	width: 11px;
	height: 11px;
	background: inherit;
	border-radius: 50%;
}
.bipashana-mini-heart::before {
	top: -5.5px;
	left: 0;
}
.bipashana-mini-heart::after {
	top: 0;
	left: 5.5px;
}

/* --- Header banner: memorial/tribute image + heart badge --- */
.bipashana-media {
	position: relative;
	background-size: cover;
	background-position: top center;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
	padding: 1.75rem 1.5rem;
}
.bipashana-media-caption {
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.bipashana-heart-badge {
	display: block;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 3px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
	margin-bottom: 0.75rem;
}
.bipashana-media-caption h2 {
	margin: 0 0 0.15rem;
	font-size: 1.7rem;
	letter-spacing: 0.02em;
}
.bipashana-media-caption p {
	margin: 0.2rem 0;
	font-size: 0.92rem;
	opacity: 0.95;
}
.bipashana-tagline {
	font-style: italic;
	font-size: 0.82rem !important;
	opacity: 0.85 !important;
}

/* --- Form side: heart-and-hands image as a soft watermark behind fields --- */
.bipashana-content {
	position: relative;
	padding: 1.75rem 1.85rem 2rem;
	background: #fffdfb;
	overflow: hidden;
}
.bipashana-content::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(255, 253, 251, 0.9), rgba(255, 253, 251, 0.94)), var(--bipashana-heart-img);
	background-size: cover;
	background-position: center 30%;
	opacity: 0.22;
	pointer-events: none;
}
/* Every field already sits on its own solid-white input/select/textarea
   background, so this watermark stays a tasteful, subtle texture behind
   the labels and spacing rather than ever competing with typed text. */
.bipashana-content > * {
	position: relative;
	z-index: 1;
}

/* --- Tabs --- */
.bipashana-tabs {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--bipashana-border);
}
.bipashana-tab {
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--bipashana-muted);
	padding: 0.6rem 0.9rem;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.bipashana-tab.is-active {
	color: var(--bipashana-red);
	border-bottom-color: var(--bipashana-red);
}
.bipashana-panel {
	display: none;
}
.bipashana-panel.is-active {
	display: block;
}

/* --- Fields --- */
.bipashana-field {
	margin-bottom: 1rem;
}
.bipashana-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.bipashana-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
	color: var(--bipashana-ink);
}
.bipashana-field .req {
	color: var(--bipashana-red);
}
.bipashana-field input,
.bipashana-field select,
.bipashana-field textarea {
	width: 100%;
	font: inherit;
	font-size: 0.95rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--bipashana-border);
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bipashana-field input:focus,
.bipashana-field select:focus,
.bipashana-field textarea:focus {
	outline: none;
	border-color: var(--bipashana-red);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
.bipashana-field small {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--bipashana-muted);
}
.bipashana-phone-status.is-error {
	color: var(--bipashana-red);
	font-weight: 600;
}
.bipashana-phone-status.is-ok {
	color: #1e8449;
	font-weight: 600;
}

/* --- Consent block --- */
.bipashana-consent {
	background: #fbf3f1;
	border: 1px solid #f1ddd8;
	border-radius: 14px;
	padding: 1rem 1.1rem;
	margin: 1.1rem 0 1.3rem;
}
.bipashana-consent-text {
	max-height: 140px;
	overflow-y: auto;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--bipashana-muted);
	padding-right: 0.4rem;
	margin-bottom: 0.75rem;
}
.bipashana-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}
.bipashana-checkbox input {
	margin-top: 0.2rem;
	width: 17px;
	height: 17px;
	accent-color: var(--bipashana-red);
	flex-shrink: 0;
}

/* --- Buttons & messages --- */
.bipashana-submit {
	appearance: none;
	border: none;
	width: 100%;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: #fff;
	padding: 0.85rem 1rem;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--bipashana-red), var(--bipashana-red-dark));
	box-shadow: 0 10px 22px -10px rgba(192, 57, 43, 0.6);
	transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.bipashana-submit:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -10px rgba(192, 57, 43, 0.7);
}
.bipashana-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}
.bipashana-message {
	margin-top: 0.85rem;
	font-size: 0.9rem;
	font-weight: 600;
	min-height: 1.2em;
}
.bipashana-message.is-success {
	color: #1e8449;
}
.bipashana-message.is-error {
	color: var(--bipashana-red);
}
.bipashana-search-note {
	margin-top: 0.9rem;
	font-size: 0.78rem;
	color: var(--bipashana-muted);
}

/* --- Responsive: stack the banner on top of the form below ~760px --- */
@media (max-width: 760px) {
	.bipashana-card {
		grid-template-columns: 1fr;
	}
	.bipashana-media {
		min-height: 220px;
		background-position: top center;
	}
	.bipashana-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.bipashana-sidebar {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.bipashana-latest-list {
		column-count: 1;
	}
}

/* The floating "sticker" badge needs real clearance above the tabs/media
   caption to avoid overlapping them -- that only reliably exists once the
   card is close to its full 980px width. Below that (including the
   two-column tablet width, before .bipashana-card itself stacks at 760px)
   the badge instead becomes a compact row sitting above the whole card. */
@media (max-width: 900px) {
	.bipashana-donor-badge {
		position: static;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.6rem;
		width: 100%;
		margin: 0 0 0.85rem;
		text-align: left;
		pointer-events: auto;
	}
	.bipashana-badge-crown {
		display: none;
	}
	.bipashana-badge-circle {
		margin: 0;
		flex-shrink: 0;
	}
	.bipashana-badge-caption {
		margin: 0;
		max-width: 150px;
	}
}

@media (max-width: 420px) {
	.bipashana-content {
		padding: 1.4rem 1.1rem 1.6rem;
	}
	.bipashana-media {
		padding: 1.25rem 1.1rem;
		min-height: 190px;
	}
	.bipashana-media-caption h2 {
		font-size: 1.4rem;
	}
}

/* Ultra-wide theme containers (a "full width" WordPress page template, for
   example, with far more room than a single centered ~1000px column can
   use well) move the sidebar back beside the form instead of above it, and
   widen the form's own banner photo -- so the extra horizontal space goes
   to visible content instead of sitting empty beside a narrow card. Order
   is set explicitly because the sidebar now comes first in the markup
   (it's the top row below this width) but must render on the right here.
   This block is deliberately last in the file: it has to win the cascade
   over the earlier plain (non-media) .bipashana-layout/.bipashana-sidebar/
   .bipashana-card rules, which share the same specificity. */
@media (min-width: 1440px) {
	.bipashana-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		align-items: start;
		gap: 2rem;
	}
	.bipashana-main {
		order: 1;
		max-width: none;
	}
	.bipashana-sidebar {
		order: 2;
		flex-direction: column;
		max-width: none;
		width: auto;
	}
	.bipashana-sidebar .bipashana-stat-card {
		flex: none;
	}
	.bipashana-card {
		grid-template-columns: 420px 1fr;
	}
}