:root{
	--bg:#ffffff;        /* page background -> white */
	--accent:#3dbbe6;
	--muted:#6b7280;     /* darker muted for light bg */
	--card:#000000;      /* cards remain black */
	--text:#0b1220;      /* dark text on white bg */
	/* new: unified spacing and subtle border color for cards */
	--card-gap:18px;
	--card-border: rgba(0,0,0,0.06);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html{height:100%}
body{min-height:100%;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{background:rgba(0,0,0,0.2);backdrop-filter:blur(4px);position:sticky;top:0;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:12px}
.logo{color:var(--text);font-weight:700;text-decoration:none}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:20px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center;}
.main-nav li{display:flex;align-items:center;}
.main-nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:6px;display:inline-flex;align-items:center;line-height:1;}

/* auth buttons on the right */
.auth-actions{display:flex;align-items:center;gap:10px}

/* outline button variant */
.btn-outline{
	background:transparent;
	color:var(--text);
	border:1px solid rgba(0,0,0,0.12);
	padding:8px 14px;
	border-radius:8px;
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

/* auth form sections */
.auth{padding:48px 0}
.auth-form{display:grid;gap:10px;max-width:420px}
.auth-form input{padding:12px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);background:#ffffff;color:var(--text)}
.auth-form button{align-self:start}

/* small helper text */
.muted{color:var(--muted);margin-top:8px;font-size:14px}
.muted a{color:var(--accent);text-decoration:none}

.hero{
	/* remove dark gradient + image so hero matches white page bg */
	background: var(--bg);
	padding:120px 0;
}
.hero-inner{max-width:700px}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 18px}
.btn{display:inline-block;background:var(--accent);color:#05202a;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:600}

/* logo image */
.logo-img {
	height: 40px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

/* hero subtitle */
.hero-subtitle {
	color: #ff4d4f;
	margin: 0 0 12px;
	font-weight: 600;
}

/* hero actions (buttons row) */
.hero-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin: 14px 0;
}

/* hero large transparent buttons */
.hero-btn {
	display: inline-block;
	background: transparent;
	border: 1px solid rgba(0,0,0,0.12);
	color: #ff4d4f;
	padding: 30px 60px;
	border-radius: 8px;
	font-weight: 600;
	font-size: calc(1rem * 3);
	text-decoration: none;
	text-align: center;
	line-height: 1;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.hero-btn:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }

.about, .services, .contact{padding:60px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:10px;color:#ffffff;} /* black card, white text */
.card h3{margin:0 0 8px;color:inherit;}
.card p{color:inherit;}
.contact-form{display:grid;gap:10px;max-width:600px}
.contact-form input, .contact-form textarea{padding:12px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);background:#ffffff;color:var(--text)}
.contact-form button{align-self:start}

.site-footer {
	/* keep existing light-grey background */
	background: #f5f5f5;
	padding: 0;
	color: var(--muted);
}

/* --- New: consistent spacing, subtle borders and section separation --- */

/* Ensure consistent vertical spacing for sections and a subtle separator */
section { padding: calc(var(--card-gap) * 1.2) 0; }
section + section { border-top: 1px solid rgba(0,0,0,0.04); padding-top: calc(var(--card-gap) * 1.2); margin-top: 0; }

/* Apply same gap and wrapping behavior to all primary grids */
.group-cards,
.stats-grid,
.how-grid,
.cards,
.footer-grid {
	display: flex;
	gap: var(--card-gap);
	flex-wrap: wrap;
	align-items: stretch;
}

/* Give each direct child a uniform “panel” look so divs are visually separated */
.group-cards > *,
.stats-grid > *,
.how-grid > *,
.cards > *,
.footer-grid > * {
	box-sizing: border-box;
	padding: 14px;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	background: #fff;
	color: var(--text) !important;
	box-shadow: 0 8px 20px rgba(13,38,59,0.04);
	margin: 0;
}

/* Preserve specific layout widths but let flex handle spacing */
.group-card { flex: 1 1 calc(25% - var(--card-gap)); min-width:150px; }
.stat-card  { flex: 1 1 calc(50% - var(--card-gap)); min-width:160px; }
.how-card   { flex: 1 1 calc(33.333% - var(--card-gap)); min-width:160px; }
.footer-col { flex: 1 1 calc(25% - var(--card-gap)); min-width:160px; }

/* Responsive: stack nicely on smaller screens */
@media (max-width:900px) {
	.group-card { flex:1 1 calc(50% - var(--card-gap)); max-width:48%; }
	.stat-card  { flex:1 1 100%; }
	.how-card   { flex:1 1 100%; }
	.footer-col { flex:1 1 100%; }
}
@media (max-width:520px) {
	.group-card { flex:1 1 100%; max-width:100%; }
}

/* Replace footer-grid/footer-col rules to ensure footer columns are visually separated */
.footer-grid {
	display:flex;
	gap:var(--card-gap);
	align-items:flex-start;
	justify-content:space-between;
	flex-wrap:wrap;
	/* avoid panel background on the outer container */
	padding:0;
	margin:0;
}

/* Make each footer column look like a panel with subtle separation */
.footer-col {
	flex: 1 1 calc(25% - var(--card-gap));
	min-width:160px;
	box-sizing:border-box;
	padding:18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
	border-left: 1px solid var(--card-border);
	border-radius: 0;
}

/* Remove left border for the first column so edge looks neat */
.footer-col:first-child { border-left: none; }

/* Slight rounded corners for outer columns on larger screens */
.footer-grid > .footer-col:first-child { border-top-left-radius:8px; border-bottom-left-radius:8px; }
.footer-grid > .footer-col:last-child  { border-top-right-radius:8px; border-bottom-right-radius:8px; }

/* Footer bottom row separation */
.footer-bottom { border-top:1px solid var(--card-border); padding-top:12px; margin-top:12px; }

/* On small screens stack columns and remove left borders for clean stacked panels */
@media (max-width:900px) {
	.footer-col { flex:1 1 100%; border-left:none; border-radius:8px; }
	.footer-grid { gap:12px; }
}

/* --- Footer: single wrapper styling --- */

/* ensure footer background remains distinct */
.site-footer {
	/* keep existing light-grey background */
	background: #f5f5f5;
	padding: 0;
	color: var(--muted);
}

/* unified inner wrapper */
.footer-single {
	max-width:1200px;
	margin:0 auto;
	padding:22px 20px;
	display:flex;
	gap:24px;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	box-sizing:border-box;
	background: transparent;
}

/* neutralize older .footer-grid/.footer-col panel rules */
.footer-grid, .footer-col { display:block; }
.footer-grid > *, .footer-col { background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; }

/* individual blocks inside single wrapper */
.footer-single .footer-block { flex: 1 1 calc(25% - 24px); min-width:180px; box-sizing:border-box; padding:0 6px; }
.footer-single .footer-block.brand { display:flex; align-items:center; gap:12px; }
.footer-single .footer-block h4 { margin:0 0 6px; color:var(--text); }
.footer-single .footer-block .footer-link { color:var(--text); text-decoration:none; }
.footer-single .footer-block .footer-link:hover { color:#ff4d4f; text-decoration:underline; }

/* footer bottom row inside same wrapper */
.footer-single .footer-bottom {
	width:100%;
	margin-top:14px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	padding-top:12px;
	border-top:1px solid rgba(0,0,0,0.06);
	box-sizing:border-box;
	color:var(--muted);
}

/* responsive: stack single-block children on narrow screens */
@media (max-width:900px) {
	.footer-single .footer-block { flex:1 1 100%; padding:8px 0; }
	.footer-single .footer-bottom { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Blood availability — improved visuals */
.blood-groups {
	padding: 36px 0;
	background: linear-gradient(180deg, rgba(255,244,244,0.6), rgba(255,250,250,0.4));
	border-radius: 12px;
}

.blood-groups h2 {
	margin-bottom: 18px;
	color: #b71c1c;
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	letter-spacing: 0.6px;
	font-weight: 700;
	font-size: 1.15rem;
	text-align: center;
}

/* keep cards centered and evenly spaced */
.group-cards {
	justify-content: center;
	gap: 18px;
}

/* modern card appearance */
.group-card {
	flex: 0 1 210px;
	max-width: 220px;
	min-width: 180px;
	padding: 18px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);
	color: #fff;
	text-align: center;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	transition: transform .18s ease, box-shadow .18s ease;
	border: 1px solid rgba(255,255,255,0.08);
}

/* subtle lift on hover */
.group-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(201,42,42,0.14);
}

/* blood type */
.group-name {
	font-size:1.45rem;
	font-weight:800;
	letter-spacing:1px;
	color:#fff;
	text-shadow: 0 2px 8px rgba(0,0,0,0.18);
	margin-bottom:8px;
	font-family: "Segoe UI Semibold", "Segoe UI", Roboto, Arial, sans-serif;
}

/* units line with badge */
.units {
	font-size:0.95rem;
	color: rgba(255,255,255,0.95);
	display:flex;
	align-items:center;
	gap:10px;
}

/* unit count badge */
.unit-count {
	display:inline-block;
	min-width:38px;
	padding:6px 10px;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-weight:700;
	border-radius:999px;
	box-shadow: inset 0 -2px 6px rgba(0,0,0,0.12);
}

/* accent for low stock (example) */
.group-card[data-low="true"] {
	background: linear-gradient(135deg, #ffad1f 0%, #ff7043 100%);
}

/* STAT CARDS */
.stats-grid { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:stretch; }

.stat-card {
	background: #fff;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	min-width: 160px;
	flex: 1 1 calc(50% - 1rem);
	box-sizing: border-box;
	text-align: left;
}

.stat-label { font-size:0.9rem; color:#666; }
.stat-value { font-size:1.6rem; font-weight:700; margin-top:6px; }
.stat-meta { font-size:0.85rem; color:#555; margin-top:6px; }

.stat-accent-red { color:#ff4d4f; }
.stat-accent-green { color:#28a745; }
.stat-accent-orange { color:#ff9900; }
.stat-accent-blue { color:#007bff; }

/* HOW card title */
.how-title { font-weight:700; color:#ff4d4f; font-size:1.05rem; margin-bottom:8px; }

/* Footer: ensure footer buttons and elements styled */
.footer-single .footer-bottom .btn {
	background:#ff4d4f;
	color:#fff;
	padding:8px 12px;
	border-radius:20px;
	text-decoration:none;
}

/* --- moved page-specific styles --- */

/* Auth pages (login / signup) */
.auth.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem 1rem;
}
.auth-form {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form .btn {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	font-size: 1rem;
	border-radius: 4px;
}
.auth-form .btn { cursor: pointer; }
.auth-form .muted { text-align: center; margin-top: 0.5rem; }

/* Donor registration */
.registration {
	padding: 40px 16px;
	background: linear-gradient(180deg, rgba(255,77,79,0.04), transparent 60%);
}
.reg-inner {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	gap: 24px;
}
.reg-intro {
	text-align: center;
	padding: 28px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.reg-intro h1 { margin: 0 0 8px; font-size: 1.9rem; color:#c62828; }
.reg-intro p { margin:0; color:#444; font-size:1.05rem; }

.reg-form {
	background: #fff;
	padding: 22px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.reg-form .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}
.reg-form .full { grid-column: 1 / -1; }
label { display:block; font-size:0.9rem; margin-bottom:6px; color:#333; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
	width:100%;
	padding:10px 12px;
	border:1px solid #e6e6e6;
	border-radius:8px;
	font-size:0.95rem;
	background:#fafafa;
	box-sizing:border-box;
	outline:none;
	transition:box-shadow .15s, border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color:#ff4d4f; box-shadow:0 4px 18px rgba(255,77,79,0.08); background:#fff; }
textarea { min-height:100px; resize:vertical; }
.reg-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.reg-actions .note { color:#666; font-size:0.9rem; }
.reg-actions .btn { background:#ff4d4f; color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; border:none; cursor:pointer; }

/* Match page */
.match-section {
	padding: 40px 16px;
	background: linear-gradient(180deg, rgba(255,77,79,0.03), transparent 60%);
}
.match-inner {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 20px;
}
.match-intro {
	text-align: center;
	background:#fff;
	padding:22px;
	border-radius:10px;
	box-shadow:0 8px 24px rgba(0,0,0,0.06);
}
.match-intro h1 { margin:0 0 8px; color:#c62828; font-size:1.8rem; }
.match-intro p { margin:0; color:#444; font-size:1rem; }

.match-form {
	background:#fff;
	padding:18px;
	border-radius:10px;
	box-shadow:0 10px 30px rgba(0,0,0,0.06);
}
.match-form .form-grid {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:12px 14px;
}
.match-form .full { grid-column:1 / -1; }
.match-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.match-actions .btn { background:#ff4d4f; color:#fff; padding:10px 16px; border-radius:8px; border:none; cursor:pointer; }

/* Footer styles (moved from inline attributes) */
.site-footer { padding: 1.25rem 0; }
.footer-single { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.footer-block { min-width:160px; }
.footer-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.footer-logo { height:44px; width:auto; border-radius:6px; }
.footer-link { text-decoration:none; color:inherit; }
.footer-bottom { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.footer-note { color:inherit; font-size:0.95rem; }

/* About page — feature and value cards */
.about-cards {
	display:flex;
	gap:1rem;
	margin-top:1.4rem;
	flex-wrap:wrap;
	align-items:stretch;
}
.about-card {
	flex:1 1 calc(33% - 1rem);
	min-width:200px;
	padding:1.25rem;
	border-radius:12px;
	background: linear-gradient(180deg, #fff, #fff);
	box-shadow: 0 8px 22px rgba(0,0,0,0.06);
	border-left:6px solid rgba(255,77,79,0.12);
	transition:transform .18s ease, box-shadow .18s ease;
	display:flex;
	gap:12px;
	align-items:flex-start;
}
.about-card:hover {
	transform:translateY(-6px);
	box-shadow:0 18px 40px rgba(0,0,0,0.10);
}
.card-icon {
	flex:0 0 56px;
	height:56px;
	width:56px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg, rgba(255,77,79,0.12), rgba(255,77,79,0.04));
	box-shadow: inset 0 -2px 6px rgba(255,77,79,0.02);
}
.card-icon img { width:34px; height:34px; display:block; }

/* card content */
.card-body h3 { margin:0 0 .35rem; font-size:1.05rem; color:#c62828; }
.card-body p { margin:0; color:#444; font-size:0.95rem; line-height:1.35; }

/* Values cards (four cards) */
.our-values { margin-top:2rem; padding-top:0.5rem; }
.values-cards {
	display:flex;
	gap:1rem;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
}
.value-card {
	flex:1 1 calc(25% - 1rem);
	min-width:160px;
	padding:1rem;
	border-radius:12px;
	text-align:center;
	background:linear-gradient(180deg,#fff,#fff);
	box-shadow:0 8px 20px rgba(0,0,0,0.05);
	transition:transform .18s ease, box-shadow .18s ease;
	display:flex;
	flex-direction:column;
	gap:8px;
	align-items:center;
}
.value-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.08); }
.value-icon {
	height:54px;
	width:54px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg, rgba(255,77,79,0.08), rgba(255,77,79,0.02));
}
.value-icon img { width:34px; height:34px; display:block; }
.value-card strong { display:block; font-size:1rem; color:#b71c1c; }
.value-card p { margin:0; color:#555; font-size:0.92rem; }

/* Responsive */
@media (max-width:980px) {
	.about-card { flex:1 1 48%; }
	.value-card { flex:1 1 48%; }
}
@media (max-width:600px) {
	.about-card, .value-card { flex:1 1 100%; }
}