/* ================================================================
   PRIYO STORY — BLOOD DONORS
   ================================================================ */

/* ---------------- filters ---------------- */
.bd-filters{
  background:var(--card, #fff);
  border-radius:14px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 1px 3px rgba(15,81,50,.06);
}
.bd-filter-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:12px; flex-wrap:wrap;
}
.bd-filter-head h2{ font-size:19.5px; font-weight:700; }
.bd-filter-head #bdCount{ font-size:15.5px; color:var(--muted, #6b7a72); }
.bd-filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
}
.bd-filter-grid label{
  display:block;
  font-size:15px; font-weight:700;
  color:var(--muted, #6b7a72);
  margin-bottom:5px;
}
.bd-filter-grid input, .bd-filter-grid select{
  width:100%;
  border:1.5px solid var(--border, #e2e8e4);
  border-radius:10px;
  padding:10px 12px;
  font-family:inherit; font-size:17px;
  color:var(--text, #1f2a24);
  background:#fff;
  outline:none;
}
.bd-filter-grid input:focus, .bd-filter-grid select:focus{ border-color:var(--red, #e2231a); }
.bd-reset{
  border:none; background:transparent;
  font-family:inherit; font-size:15.5px; font-weight:700;
  color:var(--red, #e2231a);
  cursor:pointer;
}
.bd-reset:hover{ text-decoration:underline; }

/* ---------------- donor cards ---------------- */
.bd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}
.bd-card{
  background:var(--card, #fff);
  border:1px solid var(--border, #e2e8e4);
  border-radius:14px;
  padding:14px;
  display:flex; flex-direction:column;
  min-width:0;
}
.bd-card-top{ display:flex; align-items:flex-start; gap:11px; margin-bottom:10px; }
.bd-pic{
  width:56px; height:56px;
  border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background:var(--green-light, #e8f5ee);
  display:block;
}
.bd-pic.sm{ width:42px; height:42px; }
.bd-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.bd-who{ flex:1; min-width:0; }
.bd-name{
  font-size:17.5px; font-weight:700;
  color:var(--text, #1f2a24);
  text-decoration:none;
  display:flex; align-items:center; gap:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.bd-name:hover{ text-decoration:underline; }
.bd-ver svg{ width:14px; height:14px; color:#1877f2; }
.bd-role, .bd-loc{
  font-size:15px; color:var(--muted, #6b7a72);
  margin-top:2px;
  display:flex; align-items:center; gap:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bd-loc svg{ width:12px; height:12px; flex-shrink:0; }
.bd-badge{
  background:var(--red, #e2231a);
  color:#fff;
  font-size:18px; font-weight:800;
  padding:5px 12px;
  border-radius:20px;
  flex-shrink:0;
  letter-spacing:.3px;
  box-shadow:0 2px 8px rgba(226,35,26,.28);
}
.bd-stats{
  font-size:15.5px; color:var(--muted, #6b7a72);
  padding:8px 0;
  border-top:1px solid var(--border, #e2e8e4);
  margin-bottom:10px;
}
.bd-stats span{ display:flex; align-items:center; gap:6px; }
.bd-stats svg{ width:13px; height:13px; color:var(--red, #e2231a); }
.bd-stats b{ color:var(--text, #1f2a24); }

.bd-actions{ display:flex; gap:8px; margin-top:auto; }
.bd-btn{
  border:none;
  border-radius:9px;
  padding:10px 14px;
  font-family:inherit; font-size:16px; font-weight:700;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  text-decoration:none;
  min-width:0;
}
.bd-btn svg{ width:15px; height:15px; flex-shrink:0; }
.bd-btn.solid{ background:var(--red, #e2231a); color:#fff; flex:1; }
.bd-btn.ghost{ background:var(--bg, #f0f2f0); color:var(--text, #1f2a24); }
.bd-btn:hover{ opacity:.92; }

.bd-empty{
  grid-column:1 / -1;
  padding:30px 18px;
  text-align:center;
  color:var(--muted, #6b7a72);
  font-size:16.5px; line-height:1.7;
  border:1px dashed var(--border, #e2e8e4);
  border-radius:12px;
}

/* ---------------- my donor profile ---------------- */
.bd-mine-top{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.bd-mine-stat{
  font-size:16px; color:var(--muted, #6b7a72);
  padding:9px 0;
  border-top:1px solid var(--border, #e2e8e4);
  margin-bottom:10px;
}
.bd-mine-stat b{ color:var(--red, #e2231a); font-size:21px; }
.bd-mine-off p{ font-size:16px; line-height:1.7; color:var(--muted, #6b7a72); margin-bottom:11px; }
.bd-mine-off b{ color:var(--text, #1f2a24); }
.bd-mine .bd-btn, .bd-mine-off .bd-btn{ width:100%; }

/* ---------------- top donors ---------------- */
.bd-top-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border, #e2e8e4);
  text-decoration:none;
  color:inherit;
}
.bd-top-row:last-child{ border-bottom:none; }
.bd-rank{
  width:26px; height:26px; border-radius:50%;
  background:var(--bg, #f0f2f0);
  color:var(--muted, #6b7a72);
  font-size:15.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bd-rank.r1{ background:#f5c518; color:#5a4400; }
.bd-rank.r2{ background:#c9d4ce; color:#3d4a44; }
.bd-rank.r3{ background:#e0a879; color:#5a3a1a; }
.bd-top-row .bd-who{ display:flex; flex-direction:column; }
.bd-top-count{
  display:flex; align-items:center; gap:4px;
  font-size:16px; font-weight:800;
  color:var(--red, #e2231a);
  flex-shrink:0;
}
.bd-top-count svg{ width:13px; height:13px; }

/* ================================================================
   URGENT REQUEST SLIDER
   ================================================================ */
.bd-urgent-wrap{ margin-bottom:16px; position:relative; }
.bd-urgent{
  background:linear-gradient(135deg, #8f1410 0%, #e2231a 100%);
  border-radius:14px;
  padding:16px 18px;
  color:#fff;
  box-shadow:0 6px 22px rgba(226,35,26,.28);
}
.bd-urgent-head{
  display:flex; align-items:center; gap:7px;
  font-size:16px; font-weight:800;
  letter-spacing:.3px;
  margin-bottom:12px;
  text-transform:uppercase;
}
.bd-urgent-head svg{ width:16px; height:16px; }
.bd-urgent-body{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.bd-urgent-fig{ text-align:center; flex-shrink:0; }
.bd-urgent-fig b{ display:block; font-size:27px; font-weight:800; line-height:1.2; }
.bd-urgent-fig span{ font-size:14px; opacity:.85; }
.bd-urgent-txt{ flex:1; min-width:180px; font-size:16.5px; line-height:1.65; }
.bd-when{ font-weight:700; margin-top:3px; }
.bd-urgent-msg{
  margin-top:7px;
  font-size:16px; font-style:italic;
  background:rgba(255,255,255,.14);
  padding:7px 11px;
  border-radius:9px;
}
.bd-urgent-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:14px; flex-wrap:wrap;
}
.bd-urgent-by{ font-size:15px; opacity:.9; }
.bd-urgent .bd-btn.solid{ background:#fff; color:var(--red, #e2231a); flex:0 0 auto; }
.bd-urgent .bd-btn.ghost{ background:rgba(255,255,255,.18); color:#fff; }

.bd-slide-nav{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-top:10px;
}
.bd-dots{ display:flex; gap:6px; }
.bd-dot{
  width:8px; height:8px; border-radius:50%;
  border:none; background:#c9d4ce;
  cursor:pointer; padding:0;
}
.bd-dot.on{ background:var(--red, #e2231a); width:22px; border-radius:8px; }

/* ================================================================
   REQUEST FORM
   ================================================================ */
.bd-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bd-note{
  background:#fff6e5;
  border:1px solid #f0dcae;
  border-radius:11px;
  padding:12px 14px;
  font-size:15.5px; line-height:1.75;
  color:#7a5510;
  margin-top:14px;
}
.bd-once{
  background:var(--green-light, #e8f5ee);
  border:1px solid #bfe3ce;
  border-radius:11px;
  padding:10px 13px;
  font-size:15.5px; line-height:1.7;
  color:var(--green-dark, #0f5132);
  margin-top:10px;
}
.bd-target{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px;
  background:var(--bg, #f0f2f0);
  border-radius:12px;
  margin-bottom:14px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:900px){
  .bd-grid{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width:700px){
  .bd-filters{ padding:14px; }
  .bd-filter-grid{ grid-template-columns:1fr 1fr; gap:9px; }
  .bd-filter-grid .bd-wide{ grid-column:1 / -1; }
  .bd-grid{ grid-template-columns:1fr; }
  .bd-urgent{ padding:14px; }
  .bd-urgent-body{ gap:12px; }
  .bd-urgent-fig b{ font-size:23px; }
  .bd-urgent-foot .bd-btn{ flex:1; }
  .bd-grid2{ grid-template-columns:1fr; }
}
@media (max-width:380px){
  .bd-filter-grid{ grid-template-columns:1fr; }
  .bd-badge{ font-size:16px; padding:4px 10px; }
  .bd-actions{ flex-direction:column; }
  .bd-actions .bd-btn{ width:100%; }
}

/* ---------------- request details (from a notification) ---------------- */
.bd-detail-top{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px;
  background:var(--bg, #f0f2f0);
  border-radius:12px;
  margin-bottom:14px;
}
.bd-detail{
  border:1px solid var(--border, #e2e8e4);
  border-radius:12px;
  overflow:hidden;
}
.bd-drow{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px;
  padding:10px 13px;
  border-bottom:1px solid var(--border, #e2e8e4);
  font-size:16.5px;
}
.bd-drow:last-child{ border-bottom:none; }
.bd-drow span{ color:var(--muted, #6b7a72); flex-shrink:0; }
.bd-drow b{ text-align:right; word-break:break-word; }
.bd-detail-msg{
  margin-top:12px;
  background:var(--green-light, #e8f5ee);
  border-radius:11px;
  padding:11px 13px;
  font-size:16.5px; font-style:italic; line-height:1.7;
  color:var(--green-dark, #0f5132);
}
.bd-details{
  border:none; background:transparent;
  color:#fff;
  font-family:inherit; font-size:15px; font-weight:700;
  text-decoration:underline;
  cursor:pointer;
  padding:0;
}

/* ================================================================
   BLOOD GROUP CHIPS
   ================================================================ */
.blood-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-bottom:10px;
}
.blood-chip{
  border:1.5px solid var(--border, #e2e8e4);
  background:var(--bg, #f0f2f0);
  border-radius:11px;
  padding:11px 4px 9px;
  cursor:pointer;
  font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:border-color .15s ease, background .15s ease;
  min-width:0;
}
.blood-chip .bt{
  font-size:19px; font-weight:800;
  color:var(--red, #e2231a);
  line-height:1.2;
}
.blood-chip .bc{
  font-size:15px;
  color:var(--muted, #6b7a72);
  white-space:nowrap;
}
.blood-chip:hover{ border-color:var(--red, #e2231a); background:#fdecea; }
.blood-chip.on{
  border-color:var(--red, #e2231a);
  background:var(--red, #e2231a);
}
.blood-chip.on .bt,
.blood-chip.on .bc{ color:#fff; }
.blood-chip.empty{ opacity:.55; }

.bd-allgroups{
  width:100%;
  border:none;
  background:transparent;
  color:var(--green-dark, #0f5132);
  font-family:inherit; font-size:16.5px; font-weight:700;
  padding:8px 0 2px;
  cursor:pointer;
  text-align:center;
}
.bd-allgroups:hover{ text-decoration:underline; }
.bd-allgroups.active{ color:var(--red, #e2231a); }

@media (max-width:400px){
  .blood-grid{ gap:6px; }
  .blood-chip{ padding:9px 2px 8px; }
  .blood-chip .bt{ font-size:18px; }
  .blood-chip .bc{ font-size:14px; }
}

/* ================================================================
   BLOOD GROUP CHIPS
   ================================================================ */
.blood-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-bottom:8px;
}
.blood-chip{
  border:1.5px solid var(--border, #e2e8e4);
  background:var(--bg, #f0f2f0);
  border-radius:11px;
  padding:11px 4px 9px;
  cursor:pointer;
  font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:border-color .15s ease, background .15s ease;
  min-width:0;
}
.blood-chip .bt{
  font-size:20px; font-weight:800;
  color:var(--red, #e2231a);
  line-height:1.2;
}
.blood-chip .bc{
  font-size:15.5px;
  color:var(--muted, #6b7a72);
  white-space:nowrap;
}
.blood-chip:hover{ border-color:var(--red, #e2231a); background:#fdecea; }
.blood-chip.on{ border-color:var(--red, #e2231a); background:var(--red, #e2231a); }
.blood-chip.on .bt,
.blood-chip.on .bc{ color:#fff; }
.blood-chip.empty{ opacity:.55; }

.bd-allgroups{
  width:100%;
  border:none; background:transparent;
  color:var(--green-dark, #0f5132);
  font-family:inherit; font-size:17px; font-weight:700;
  padding:8px 0 2px;
  cursor:pointer; text-align:center;
}
.bd-allgroups:hover{ text-decoration:underline; }
.bd-allgroups.active{ color:var(--red, #e2231a); }

@media (max-width:400px){
  .blood-grid{ gap:6px; }
  .blood-chip{ padding:9px 2px 8px; }
  .blood-chip .bt{ font-size:19px; }
  .blood-chip .bc{ font-size:14.5px; }
}