:root { --bmr-teal:#1b6055; --bmr-teal-light:#eaf7f4; --bmr-border:#dee2e6; }
[x-cloak] { display:none !important; }

/* ── Tab pills ── */
.page-tabs { display:flex; gap:.5rem; margin-bottom:1.5rem; border-bottom:2px solid #f0f0f0; padding-bottom:0; }
.page-tab {
  padding:.55rem 1.3rem; font-size:.88rem; font-weight:700;
  border:none; background:transparent; color:#888; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s;
}
.page-tab.active { color:var(--bmr-teal); border-bottom-color:var(--bmr-teal); }
.page-tab:hover:not(.active) { color:#555; }

/* ── Donation type cards ── */
.type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.type-card {
  background:#fff; border:2px solid var(--bmr-border); border-radius:14px;
  padding:1.4rem 1rem; text-align:center; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.type-card:hover {
  border-color:var(--bmr-teal); box-shadow:0 6px 20px rgba(27,96,85,.12); transform:translateY(-2px);
}
.type-card-icon {
  width:46px; height:46px; border-radius:12px; margin:0 auto .75rem;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.type-card-name { font-weight:700; font-size:.88rem; color:#1f2937; }

/* ── Section heading ── */
.section-head {
  display:flex; align-items:center; gap:.65rem;
  margin-bottom:.9rem;
}
.section-head-icon {
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.82rem;
}
.section-head h6 { font-weight:700; font-size:.95rem; color:#111; margin:0; flex:1; }
.section-divider { height:1.5px; background:linear-gradient(90deg,#e5e7eb 0%,transparent 100%); margin-bottom:1rem; }

/* ── Event program cards ── */
.event-card {
  background:#fff; border:1px solid var(--bmr-border); border-radius:12px;
  padding:1rem 1.2rem; margin-bottom:.8rem; display:flex;
  align-items:center; gap:1rem; text-decoration:none; color:inherit;
  transition:box-shadow .15s, border-color .15s;
}
.event-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); border-color:#b8d4cf; }
.event-card-body { flex:1; min-width:0; }
.event-card-title { font-weight:700; font-size:.92rem; color:#111; margin-bottom:.2rem; }
.event-card-meta  { font-size:.78rem; color:#9ca3af; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.event-card-meta i { color:#1b6055; }
.event-type-badge {
  font-size:.68rem; font-weight:700; padding:.12rem .5rem;
  border-radius:20px; background:#ede9fe; color:#5b21b6; white-space:nowrap;
}

/* ── Donation items form ── */
.items-category { margin-bottom:.75rem; background:#fff; border:1px solid var(--bmr-border); border-radius:10px; overflow:hidden; }
.items-category-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .9rem; cursor:pointer; user-select:none;
  transition:background .12s;
}
.items-category-header:hover { background:#f9fafb; }
.items-category-title {
  font-size:.78rem; font-weight:700; color:#555; text-transform:uppercase;
  letter-spacing:.05em; margin:0;
}
.items-category-meta { font-size:.74rem; color:#9ca3af; display:flex; align-items:center; gap:.5rem; }
.items-category-chevron { font-size:.72rem; color:#9ca3af; transition:transform .18s ease; }
.items-category-chevron.open { transform:rotate(-180deg); }
.items-category-body { padding:.4rem .75rem .75rem; }
.item-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .75rem; background:#fff; border:1px solid var(--bmr-border);
  border-radius:8px; margin-bottom:.4rem;
}
.item-row-name { flex:1; font-size:.87rem; font-weight:600; color:#374151; }
.item-row-badge {
  font-size:.7rem; font-weight:700; padding:.1rem .45rem;
  border-radius:20px; background:#d1fae5; color:#065f46; white-space:nowrap;
}
.item-row-input { width:110px; flex-shrink:0; }

/* ── Donor info fields ── */
.donor-fields { background:#fff; border:1px solid var(--bmr-border); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem; }

/* ── Donate total bar ── */
.donate-total-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.2rem; background:#f0fdfa; border:1px solid #b8d4cf;
  border-radius:12px; margin-bottom:1rem;
}
.donate-total-bar .lbl { font-size:.82rem; color:#555; }
.donate-total-bar .val { font-size:1.2rem; font-weight:800; color:var(--bmr-teal); }

/* ── No-events notice ── */
.no-events-box {
  text-align:center; padding:2.5rem 1rem;
  background:#fff; border:1.5px dashed #d1d5db; border-radius:12px; margin-bottom:1rem;
}
.no-events-box i { font-size:2rem; color:#e5e7eb; }
.no-events-box p { font-size:.88rem; color:#9ca3af; margin:.6rem 0 0; }

/* ── Back button header ── */
.step-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.step-header h5 { margin:0; font-weight:700; font-size:1rem; color:#111; }
.step-type-badge {
  font-size:.72rem; font-weight:700; padding:.18rem .6rem;
  border-radius:20px; background:var(--bmr-teal-light); color:var(--bmr-teal);
}

/* ── My Donations (reuse existing) ── */
.don-filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1.25rem; }
.filter-combo { position:relative; min-width:200px; }
.filter-combo-btn {
  width:100%; min-height:37px; border:1.5px solid var(--bmr-border);
  border-radius:20px; background:#fff; color:#374151;
  display:flex; align-items:center; justify-content:space-between; gap:.65rem;
  padding:.34rem .8rem; font-size:.8rem; font-weight:700;
  cursor:pointer; transition:border-color .15s, color .15s, box-shadow .15s;
}
.filter-combo-btn:hover,.filter-combo-btn.open { border-color:var(--bmr-teal); color:var(--bmr-teal); box-shadow:0 8px 22px rgba(27,96,85,.08); }
.filter-combo-label { min-width:0; flex:1; display:flex; align-items:center; gap:.4rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.filter-combo-menu { position:absolute; top:calc(100% + 7px); left:0; z-index:30; width:240px; max-width:calc(100vw - 2rem); background:#fff; border:1px solid #d9e6e3; border-radius:10px; box-shadow:0 18px 40px rgba(15,23,42,.14); overflow:hidden; }
.filter-combo-option { display:flex; align-items:center; gap:.55rem; padding:.55rem .75rem; cursor:pointer; font-size:.82rem; font-weight:600; color:#374151; margin:0; }
.filter-combo-option:hover { background:var(--bmr-teal-light); color:var(--bmr-teal); }
.filter-combo-option input { accent-color:var(--bmr-teal); }
.filter-combo-option i { width:16px; text-align:center; color:var(--bmr-teal); }
.filter-combo-footer { border-top:1px solid #edf2f1; padding:.45rem .65rem; display:flex; justify-content:flex-end; }
.filter-clear-btn { border:0; background:transparent; color:var(--bmr-teal); font-size:.76rem; font-weight:700; padding:.15rem .25rem; }
.don-month-select {
  border:1.5px solid var(--bmr-border); border-radius:20px; padding:.3rem .85rem; font-size:.8rem; font-weight:600;
  background:#fff; color:#555; outline:none; cursor:pointer; appearance:none; padding-right:1.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .5rem center; background-size:.65em; transition:border-color .15s;
}
.don-month-select:focus { border-color:var(--bmr-teal); }
.don-stats { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.don-stat-chip { background:#fff; border:1px solid var(--bmr-border); border-radius:10px; padding:.55rem 1rem; font-size:.82rem; }
.don-stat-chip .val { font-weight:700; font-size:1.05rem; color:var(--bmr-teal); }
.don-stat-chip .lbl { color:#888; font-size:.75rem; }
.don-card { background:#fff; border-radius:14px; border:1px solid var(--bmr-border); overflow:hidden; margin-bottom:1rem; }
.don-card-head { display:flex; justify-content:space-between; align-items:flex-start; padding:.85rem 1.2rem; border-bottom:1px solid #f0f4f3; gap:.75rem; flex-wrap:wrap; }
.don-ref { font-weight:800; font-size:.95rem; color:#111; }
.don-date { font-size:.75rem; color:#9ca3af; margin-top:.15rem; }
.don-head-right { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.don-status { font-size:.71rem; font-weight:700; padding:.2rem .65rem; border-radius:20px; letter-spacing:.03em; white-space:nowrap; }
.don-status.paid { background:#dcfce7; color:#166534; }
.don-status.submitted { background:#dbeafe; color:#1e40af; }
.don-status.pending { background:#fef9c3; color:#854d0e; }
.don-status.approved { background:#d1fae5; color:#065f46; }
.don-group { margin-bottom:1.5rem; }
.don-group-header { display:flex; align-items:center; gap:.65rem; margin-bottom:.6rem; padding:.1rem 0; }
.don-group-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.78rem; flex-shrink:0; }
.don-group-icon.event { background:#ede9fe; color:#5b21b6; }
.don-group-icon.monthly { background:#fff7ed; color:#92400e; }
.don-group-icon.adhoc { background:#f0fdf4; color:#166534; }
.don-group-title { font-weight:700; font-size:.9rem; color:#111; flex:1; }
.don-group-meta { font-size:.76rem; color:#9ca3af; white-space:nowrap; }
.don-group-divider { height:1.5px; background:linear-gradient(90deg,#e5e7eb 0%,transparent 100%); margin-bottom:.7rem; }
.prog-type-badge { font-size:.68rem; font-weight:700; padding:.1rem .5rem; border-radius:20px; background:#ede9fe; color:#5b21b6; white-space:nowrap; flex-shrink:0; }
.don-card-body { padding:.85rem 1.2rem; }
.don-event-tag { font-size:.78rem; color:#6b7280; margin-bottom:.65rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.don-event-tag strong { color:#374151; }
.don-li-row { display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; padding:.25rem 0; border-bottom:1px solid #f3f4f6; gap:.5rem; }
.don-li-row:last-of-type { border-bottom:0; }
.don-li-name { color:#374151; flex:1; }
.don-li-qty { color:#9ca3af; font-size:.76rem; white-space:nowrap; }
.don-li-sub { font-weight:600; color:#111; white-space:nowrap; }
.don-card-foot { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1.2rem; border-top:1px solid #f0f4f3; background:#fafbfc; }
.don-total { font-size:.9rem; }
.don-total strong { font-size:1.05rem; color:var(--bmr-teal); }
.don-remark { font-size:.78rem; color:#6b7280; font-style:italic; margin-top:.55rem; padding:.4rem .7rem; background:#f9fafb; border-left:3px solid #e5e7eb; border-radius:0 6px 6px 0; }
.don-empty { text-align:center; padding:3rem 1rem; background:#fff; border-radius:14px; border:1px solid var(--bmr-border); }
.don-empty i { font-size:2.5rem; color:#e5e7eb; }
.don-empty p { font-size:.88rem; color:#9ca3af; margin:.75rem 0 1.25rem; }

/* ── Accordion groups ── */
.acc-item {
  background:#fff; border:1px solid var(--bmr-border); border-radius:12px;
  overflow:hidden; margin-bottom:.75rem;
}
.acc-header {
  width:100%; border:none; background:transparent;
  display:flex; align-items:center; gap:.65rem;
  padding:.85rem 1.1rem; cursor:pointer; text-align:left;
  transition:background .12s;
}
.acc-header:hover { background:#f9fafb; }
.acc-chevron {
  flex-shrink:0; color:#9ca3af; font-size:.75rem;
  transition:transform .2s ease;
}
.acc-chevron.rotated { transform:rotate(-180deg); }
.acc-body { padding:.6rem 1.1rem 1.1rem; }

/* ── Pagination ── */
.don-pagination {
  display:flex; align-items:center; justify-content:center;
  gap:.65rem; padding:.75rem 0 .25rem;
}
.don-page-btn {
  width:32px; height:32px; border-radius:8px;
  border:1.5px solid var(--bmr-border); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; cursor:pointer; color:#374151;
  transition:border-color .12s, color .12s;
}
.don-page-btn:hover:not([disabled]) { border-color:var(--bmr-teal); color:var(--bmr-teal); }
.don-page-btn[disabled] { opacity:.4; cursor:not-allowed; }
.don-page-info { font-size:.83rem; color:#6b7280; }
.don-page-info strong { color:#111; }