[x-cloak] { display:none !important; }

/* ── Layout ──────────────────────────────────────────── */
.don-shell {
  display:grid;
  grid-template-columns:1fr 380px;
  gap:1.25rem;
  align-items:start;
}
@media (max-width:1024px) {
  .don-shell { grid-template-columns:1fr; }
}

/* ── Cards ───────────────────────────────────────────── */
.don-card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}
.don-card-header {
  padding:.85rem 1.2rem;
  border-bottom:1px solid #f0f0f0;
  display:flex; align-items:center; gap:.6rem;
}
.don-card-header h6 {
  margin:0; font-size:.9rem; font-weight:700; color:#1a1a1a;
}
.don-card-header .step-chip {
  width:22px; height:22px; border-radius:50%;
  background:var(--theme-deafult,#1b6055); color:#fff;
  font-size:.7rem; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.don-card-body { padding:1.1rem 1.2rem; }

/* ── Donation type pills ─────────────────────────────── */
.type-pill {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem 1rem; border-radius:20px;
  border:1.5px solid #e5e7eb; background:#fff;
  font-size:.83rem; font-weight:600; color:#555;
  cursor:pointer; transition:all .15s;
  white-space:nowrap;
}
.type-pill:hover   { border-color:var(--theme-deafult,#1b6055); color:var(--theme-deafult,#1b6055); }
.type-pill.active  { background:var(--theme-deafult,#1b6055); border-color:var(--theme-deafult,#1b6055); color:#fff; }

/* ── Category accordion ──────────────────────────────── */
.cat-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem .9rem; background:#f8fffe;
  border:1px solid #e5e7eb; border-radius:8px;
  cursor:pointer; user-select:none; margin-bottom:.4rem;
}
.cat-header:hover { background:#f0fdf9; }
.cat-title { font-size:.83rem; font-weight:700; color:#1a1a1a; }
.cat-chevron { font-size:.7rem; color:#aaa; transition:transform .2s; }
.cat-chevron.open { transform:rotate(180deg); }

/* ── Item rows ───────────────────────────────────────── */
.item-row {
  display:grid;
  grid-template-columns:1fr auto auto auto;
  align-items:center;
  gap:.6rem;
  padding:.55rem .5rem;
  border-bottom:1px solid #f3f4f6;
  font-size:.83rem;
}
.item-row:last-child { border-bottom:none; }
.item-name { font-weight:600; color:#222; }
.item-hint { font-size:.72rem; color:#888; margin-top:.1rem; }
.item-qty  { width:68px; }
.item-amt  { width:100px; }
.item-amt.fixed-badge {
  background:#f3f4f6; border:none; color:#555;
  font-weight:700; text-align:right; padding-right:.5rem;
  border-radius:6px; min-height:36px;
  display:flex; align-items:center; justify-content:flex-end;
}

/* ── Program search & selector ───────────────────────── */
.prog-search-wrap { position:relative; }
.prog-search-wrap .si {
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  color:#aaa; font-size:.8rem; pointer-events:none;
}
.prog-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:50;
  max-height:240px; overflow-y:auto;
}
.prog-option {
  padding:.6rem .85rem; cursor:pointer;
  font-size:.83rem; border-bottom:1px solid #f5f5f5;
  transition:background .12s;
}
.prog-option:last-child { border-bottom:none; }
.prog-option:hover { background:#f0fdf9; }
.prog-option .po-title { font-weight:700; color:#222; }
.prog-option .po-meta  { font-size:.72rem; color:#888; margin-top:.1rem; }

/* Date chip selector */
.date-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .75rem; border-radius:20px;
  border:1.5px solid #e5e7eb; background:#fff;
  font-size:.78rem; font-weight:600; color:#555;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.date-chip:hover  { border-color:var(--theme-deafult,#1b6055); color:var(--theme-deafult,#1b6055); }
.date-chip.active { background:var(--theme-deafult,#1b6055); border-color:var(--theme-deafult,#1b6055); color:#fff; }

/* ── Running total bar ───────────────────────────────── */
.total-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.2rem;
  background:#f8fffe; border-top:1px solid #e5e7eb;
}
.total-label { font-size:.83rem; font-weight:700; color:#555; }
.total-amount { font-size:1.2rem; font-weight:800; color:var(--theme-deafult,#1b6055); }

/* ── Donor search ─────────────────────────────────────── */
.donor-search-wrap { position:relative; }
.donor-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:50;
  max-height:220px; overflow-y:auto;
}
.donor-option {
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem .85rem; cursor:pointer;
  border-bottom:1px solid #f5f5f5; transition:background .12s;
}
.donor-option:last-child { border-bottom:none; }
.donor-option:hover { background:#f0fdf9; }
.donor-option .do-name  { font-size:.83rem; font-weight:700; color:#222; }
.donor-option .do-email { font-size:.72rem; color:#888; }
.donor-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:#e8f5f3; border:1px solid #b2dcd5;
  border-radius:20px; padding:.3rem .85rem;
  font-size:.82rem; font-weight:600; color:#1b6055;
}
.donor-tag button { background:none; border:none; color:#1b6055; padding:0; line-height:1; cursor:pointer; font-size:.8rem; }

/* ── Summary card ─────────────────────────────────────── */
.summary-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:.45rem 0; border-bottom:1px dashed #f0f0f0;
  font-size:.82rem;
}
.summary-item:last-child { border-bottom:none; }
.summary-total {
  display:flex; justify-content:space-between; align-items:center;
  padding:.7rem 0 0; font-size:1rem; font-weight:800;
  color:var(--theme-deafult,#1b6055);
  border-top:2px solid #e5e7eb; margin-top:.35rem;
}

/* ── Success screen ──────────────────────────────────── */
.success-wrap { text-align:center; padding:2.5rem 1rem; }
.success-icon {
  width:72px; height:72px; border-radius:50%;
  background:#d1fae5; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#065f46;
}
.ref-chip {
  display:inline-block; background:#f0fdf9;
  border:1.5px solid #b2dcd5; border-radius:8px;
  padding:.4rem 1.25rem; font-size:1.1rem;
  font-weight:800; color:var(--theme-deafult,#1b6055);
  letter-spacing:.05em; font-family:monospace;
}

/* ── Misc ─────────────────────────────────────────────── */
.empty-msg { text-align:center; padding:2rem 1rem; color:#bbb; font-size:.85rem; }
.empty-msg i { font-size:1.6rem; display:block; margin-bottom:.5rem; }
.tbl-sm td, .tbl-sm th { padding:.45rem .75rem; font-size:.82rem; vertical-align:middle; }

/* ── POS category tabs ─────────────────────────────────── */
.pos-cat-tabs { display:flex; gap:.4rem; flex-wrap:wrap; }
.pos-cat-tab {
  padding:.28rem .7rem; border-radius:20px;
  border:1.5px solid #e5e7eb; background:#fff;
  color:#6b7280; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:all .13s;
}
.pos-cat-tab.active { background:var(--theme-deafult,#1b6055); color:#fff; border-color:var(--theme-deafult,#1b6055); }
.pos-cat-tab:hover:not(.active) { border-color:#b8d4cf; color:var(--theme-deafult,#1b6055); }

/* ── POS item grid (management) ──────────────────────── */
.mgmt-pos-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:.75rem;
}
@media(max-width:600px) { .mgmt-pos-grid { grid-template-columns:repeat(2,1fr); } }

.pos-card {
  background:#fff; border-radius:10px;
  border:2px solid #e5e7eb; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .13s, box-shadow .13s;
}
.pos-card-active { border-color:var(--theme-deafult,#1b6055); box-shadow:0 0 0 3px rgba(27,96,85,.1); }

.pos-card-img {
  position:relative; aspect-ratio:1;
  background:#f9fafb; overflow:hidden;
}
.pos-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pos-card-img-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:#d1d5db; font-size:1.5rem;
}
.pos-card-badge {
  position:absolute; top:.25rem; right:.25rem;
  background:var(--theme-deafult,#1b6055); color:#fff;
  min-width:20px; height:20px; border-radius:10px; padding:0 .25rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:800;
}

.pos-card-body { padding:.5rem .6rem .2rem; flex:1; }
.pos-card-name {
  font-size:.76rem; font-weight:700; color:#1f2937;
  line-height:1.3; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pos-card-price { font-size:.72rem; font-weight:700; color:var(--theme-deafult,#1b6055); margin-top:.15rem; }
.pos-card-price-custom { color:#9ca3af; font-weight:600; }

.pos-card-ctrl { padding:.25rem .6rem .55rem; }

.pos-qty-row { display:flex; align-items:center; gap:.3rem; }
.pos-qty-btn {
  width:24px; height:24px; border-radius:6px;
  border:1.5px solid #e5e7eb; background:#fff;
  color:#374151; font-size:.9rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .12s; flex-shrink:0; padding:0; line-height:1;
}
.pos-qty-btn:hover:not(:disabled) { background:#eaf7f4; border-color:var(--theme-deafult,#1b6055); color:var(--theme-deafult,#1b6055); }
.pos-qty-btn:disabled { opacity:.3; cursor:default; }
.pos-qty-btn-add:hover:not(:disabled) { background:var(--theme-deafult,#1b6055); color:#fff; border-color:var(--theme-deafult,#1b6055); }
.pos-qty-val { flex:1; text-align:center; font-size:.85rem; font-weight:700; color:#1f2937; }

/* ── Summary card — editable line items ──────────────── */
.summary-ctrl { display:flex; align-items:center; gap:.3rem; margin-top:.2rem; }
.summary-unit { font-size:.72rem; color:#9ca3af; white-space:nowrap; }
.summary-ctrl .pos-qty-val { flex:none; min-width:20px; }
.summary-ctrl .pos-qty-btn { width:22px; height:22px; font-size:.8rem; }
.summary-amt-input { max-width:120px; margin-top:.2rem; }

.pos-cart-remove {
  width:20px; height:20px; border-radius:50%;
  border:none; background:#f3f4f6; color:#9ca3af;
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; cursor:pointer; flex-shrink:0;
  transition:background .12s, color .12s;
}
.pos-cart-remove:hover { background:#fee2e2; color:#dc2626; }