/* ============================================================
   Donor Portal — Full-width, theme-inheriting CSS
   ============================================================ */
.cdp-wrap {
  font-family: inherit;
  color: inherit;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  --cdp-primary:   #1a3a54;
  --cdp-accent:    #e8a020;
  --cdp-success:   #28a745;
  --cdp-danger:    #dc3545;
  --cdp-border:    color-mix(in srgb, currentColor 12%, transparent);
  --cdp-bg:        color-mix(in srgb, currentColor 4%, transparent);
  --cdp-card:      Canvas;
  --cdp-muted:     color-mix(in srgb, currentColor 55%, transparent);
  --cdp-radius:    10px;
}
.cdp-wrap, .cdp-wrap * { box-sizing: border-box; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .cdp-wrap { --cdp-border: rgba(0,0,0,.12); --cdp-bg: rgba(0,0,0,.03); --cdp-muted: rgba(0,0,0,.55); }
}

/* ── Auth ────────────────────────────────────────────────── */
.cdp-auth-wrap { display:flex; justify-content:center; padding:3em 1em; background:var(--cdp-bg); width:100%; }
.cdp-auth-card { background:var(--cdp-card); border:1px solid var(--cdp-border); border-radius:var(--cdp-radius); box-shadow:0 8px 40px rgba(0,0,0,.12); width:100%; max-width:30em; overflow:hidden; }
.cdp-auth-header { background:linear-gradient(135deg,var(--cdp-primary),#235070); padding:2em; text-align:center; }
.cdp-auth-logo { width:3.75em; height:3.75em; background:rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto .75em; }
.cdp-auth-logo svg { width:1.9em; height:1.9em; stroke:#fff; }
.cdp-auth-header h2 { color:#fff; margin:0 0 .25em; font-size:1.3em; font-family:inherit; }
.cdp-auth-header p  { color:rgba(255,255,255,.7); margin:0; font-size:.9em; }
.cdp-auth-tabs { display:flex; border-bottom:2px solid var(--cdp-border); }
.cdp-auth-tab { flex:1; padding:.8em; background:none; border:none; font-family:inherit; font-size:.92em; font-weight:600; opacity:.6; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .16s; }
.cdp-auth-tab.active { opacity:1; color:var(--cdp-primary); border-bottom-color:var(--cdp-primary); }
.cdp-auth-form { display:none; padding:1.5em; }
.cdp-auth-form.active { display:block; }
.cdp-auth-error { background:#f8d7da; color:#721c24; border-radius:6px; padding:.6em .8em; font-size:.9em; margin-bottom:1em; }
.cdp-remember { display:flex; align-items:center; gap:.4em; font-size:.85em; opacity:.7; margin-bottom:1em; cursor:pointer; }

/* ── Fields ──────────────────────────────────────────────── */
.cdp-field { margin-bottom:1em; }
.cdp-field label { display:block; font-size:.82em; font-weight:700; opacity:.8; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35em; }
.cdp-field small { display:block; font-size:.78em; opacity:.6; margin-top:.2em; }
.cdp-req { color:var(--cdp-danger); }
.cdp-field-row { display:grid; grid-template-columns:1fr 1fr; gap:1em; }
@media(max-width:480px){ .cdp-field-row { grid-template-columns:1fr; } }
.cdp-input { width:100%; padding:.6em .8em; border:1.5px solid var(--cdp-border); border-radius:7px; font-size:1em; font-family:inherit; color:inherit; background:var(--cdp-card); outline:none; box-sizing:border-box; transition:border .18s,box-shadow .18s; }
.cdp-input:focus { border-color:var(--cdp-primary); box-shadow:0 0 0 3px rgba(26,58,84,.08); }
.cdp-pass-wrap { position:relative; }
.cdp-pass-wrap .cdp-input { padding-right:4em; }
.cdp-toggle-pass { position:absolute; right:.6em; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--cdp-muted); font-size:.8em; cursor:pointer; font-family:inherit; }

/* ── Buttons ─────────────────────────────────────────────── */
.cdp-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45em; padding:.65em 1.3em; border-radius:7px; font-family:inherit; font-size:1em; font-weight:700; cursor:pointer; border:2px solid transparent; transition:all .18s; text-decoration:none; }
.cdp-btn-full { width:100%; }
.cdp-btn-primary { background:linear-gradient(135deg,var(--cdp-primary),#235070); color:#fff; box-shadow:0 4px 14px rgba(26,58,84,.25); }
.cdp-btn-primary:hover { filter:brightness(1.08); }
.cdp-btn-outline { background:transparent; border-color:var(--cdp-border); color:inherit; }
.cdp-btn-outline:hover { border-color:var(--cdp-primary); color:var(--cdp-primary); }
.cdp-btn-sm { padding:.4em 1em; font-size:.85em; }

/* ── Dashboard header (full width) ──────────────────────── */
.cdp-header { background:linear-gradient(135deg,var(--cdp-primary),#235070); position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,.15); width:100%; }
.cdp-header-inner { display:flex; align-items:center; justify-content:space-between; padding:.9em 2em; flex-wrap:wrap; gap:.6em; width:100%; }
.cdp-brand { display:flex; align-items:center; gap:.7em; }
.cdp-brand-icon { width:2.6em; height:2.6em; background:rgba(255,255,255,.15); border-radius:9px; display:flex; align-items:center; justify-content:center; }
.cdp-brand-icon svg { width:1.4em; height:1.4em; stroke:#fff; }
.cdp-brand-name { display:block; font-size:1em; font-weight:700; color:#fff; }
.cdp-brand-sub  { display:block; font-size:.76em; color:rgba(255,255,255,.65); }
.cdp-user-row { display:flex; align-items:center; gap:.6em; }
.cdp-avatar { width:2.3em; height:2.3em; background:rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.9em; }
.cdp-user-name { display:block; font-size:.9em; font-weight:600; color:#fff; }
.cdp-logout-btn { display:block; background:none; border:none; color:rgba(255,255,255,.6); font-size:.76em; cursor:pointer; font-family:inherit; padding:0; text-align:left; }
.cdp-logout-btn:hover { color:#fff; }
.cdp-nav { display:flex; padding:0 2em; overflow-x:auto; scrollbar-width:none; gap:0; width:100%; }
.cdp-nav::-webkit-scrollbar { display:none; }
.cdp-nav-tab { display:flex; align-items:center; gap:.4em; padding:.8em 1.1em; background:transparent; border:none; border-bottom:3px solid transparent; font-family:inherit; font-size:.88em; font-weight:600; color:rgba(255,255,255,.6); cursor:pointer; white-space:nowrap; transition:all .16s; }
.cdp-nav-tab svg { width:1em; height:1em; }
.cdp-nav-tab:hover { color:rgba(255,255,255,.9); }
.cdp-nav-tab.active { color:#fff; border-bottom-color:var(--cdp-accent); }

/* ── Loading ─────────────────────────────────────────────── */
.cdp-loading { text-align:center; padding:4em 1em; opacity:.6; }
.cdp-spinner-lg { width:2.2em; height:2.2em; border:3px solid var(--cdp-border); border-top-color:var(--cdp-primary); border-radius:50%; animation:cdp-spin .7s linear infinite; margin:0 auto .9em; }
@keyframes cdp-spin { to { transform:rotate(360deg); } }

/* ── Tabs/Sections (full width, generous padding) ───────── */
.cdp-section { padding:1.75em 2em; width:100%; }
.cdp-two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.5em; margin-top:1.5em; width:100%; }
@media(max-width:900px){ .cdp-two-col { grid-template-columns:1fr; } }
.cdp-card { background:var(--cdp-card); border:1px solid var(--cdp-border); border-radius:var(--cdp-radius); overflow:hidden; width:100%; }
.cdp-card-hd { padding:1em 1.3em; border-bottom:1px solid var(--cdp-border); }
.cdp-card-hd h3 { margin:0; font-size:1.05em; font-weight:700; color:var(--cdp-primary); font-family:inherit; }

/* ── Stats row ───────────────────────────────────────────── */
.cdp-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(13em,1fr)); gap:1em; width:100%; }
.cdp-stat { background:var(--cdp-card); border:1px solid var(--cdp-border); border-radius:var(--cdp-radius); padding:1.1em 1.3em; border-left:4px solid var(--cdp-primary); }
.cdp-stat-val { font-size:1.6em; font-weight:800; color:var(--cdp-primary); line-height:1; }
.cdp-stat-lbl { font-size:.78em; opacity:.65; text-transform:uppercase; letter-spacing:.04em; margin-top:.3em; }

/* ── Cause cards in donor view ───────────────────────────── */
.cdp-cause-card { padding:1.1em 1.3em; border-bottom:1px solid var(--cdp-border); }
.cdp-cause-card:last-child { border-bottom:none; }
.cdp-cause-row { display:flex; justify-content:space-between; align-items:flex-start; gap:.8em; margin-bottom:.5em; }
.cdp-cause-title { font-weight:700; font-size:.95em; }
.cdp-cause-my-badge { background:var(--cdp-bg); color:var(--cdp-primary); border-radius:99px; padding:.15em .7em; font-size:.78em; font-weight:700; white-space:nowrap; }
.cdp-prog-bar { height:.5em; background:var(--cdp-border); border-radius:99px; overflow:hidden; margin:.4em 0 .25em; }
.cdp-prog-fill { height:100%; background:linear-gradient(90deg,var(--cdp-primary),var(--cdp-accent)); border-radius:99px; transition:width .6s; }
.cdp-cause-meta { display:flex; gap:1.1em; font-size:.78em; opacity:.65; flex-wrap:wrap; }
.cdp-cause-meta strong { opacity:1; color:inherit; }

/* ── Spending updates ────────────────────────────────────── */
.cdp-spending-section { margin-top:1.5em; }
.cdp-spending-section h4 { font-size:.9em; font-weight:700; color:var(--cdp-primary); text-transform:uppercase; letter-spacing:.05em; margin:0 0 .9em; padding:0 1.3em; }
.cdp-update-card { padding:1em 1.3em; border-left:3px solid var(--cdp-accent); background:color-mix(in srgb, var(--cdp-accent) 6%, transparent); margin:0 1.3em .8em; border-radius:0 8px 8px 0; }
.cdp-update-title { font-weight:700; font-size:.92em; margin-bottom:.25em; }
.cdp-update-body { font-size:.88em; opacity:.75; line-height:1.6; margin:.4em 0; }
.cdp-update-meta { display:flex; gap:1.1em; font-size:.75em; opacity:.6; margin-top:.4em; flex-wrap:wrap; }
.cdp-update-meta .cdp-spent-badge { background:#fff3cd; color:#856404; border-radius:4px; padding:.1em .6em; font-weight:700; }
.cdp-no-updates { padding:1.3em; font-size:.88em; opacity:.6; font-style:italic; }

/* ── Donations table ─────────────────────────────────────── */
.cdp-table-wrap { overflow-x:auto; width:100%; }
.cdp-table { width:100%; border-collapse:collapse; font-size:.92em; }
.cdp-table th { background:var(--cdp-bg); color:var(--cdp-primary); font-weight:700; font-size:.74em; text-transform:uppercase; letter-spacing:.05em; padding:.7em 1em; border-bottom:2px solid var(--cdp-border); text-align:left; white-space:nowrap; }
.cdp-table td { padding:.7em 1em; border-bottom:1px solid var(--cdp-border); vertical-align:middle; }
.cdp-table tbody tr:hover { background:var(--cdp-bg); }
.cdp-table tbody tr:last-child td { border-bottom:none; }

/* ── Msg ─────────────────────────────────────────────────── */
.cdp-msg { padding:.6em .9em; border-radius:7px; font-size:.9em; margin-bottom:1em; }
.cdp-msg.success { background:#d4edda; color:#155724; }
.cdp-msg.error   { background:#f8d7da; color:#721c24; }

/* ── Activity row (overview recent) ─────────────────────── */
.cdp-activity { padding:.9em 1.3em; border-bottom:1px solid var(--cdp-border); display:flex; align-items:center; gap:.9em; }
.cdp-activity:last-child { border-bottom:none; }
.cdp-act-icon { width:2.4em; height:2.4em; background:linear-gradient(135deg,var(--cdp-primary),#235070); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85em; font-weight:700; flex-shrink:0; }
.cdp-act-info { flex:1; min-width:0; }
.cdp-act-info strong { display:block; font-size:.92em; }
.cdp-act-info span { font-size:.78em; opacity:.6; }
.cdp-act-right { text-align:right; }
.cdp-act-right strong { display:block; color:var(--cdp-primary); font-size:.92em; }

/* ── Make a Donation tab ─────────────────────────────────── */
.cdp-donate-form-card { max-width:36em; }
.cdp-amount-presets { display:flex; flex-wrap:wrap; gap:.5em; margin-bottom:.8em; }
.cdp-preset-btn { padding:.5em 1.1em; border:2px solid var(--cdp-border); border-radius:99px; font-size:.9em; font-weight:600; cursor:pointer; background:var(--cdp-card); color:inherit; transition:all .16s; font-family:inherit; }
.cdp-preset-btn:hover, .cdp-preset-btn.active { border-color:var(--cdp-primary); background:var(--cdp-primary); color:#fff; }

@media(max-width:640px){
  .cdp-section { padding:1em; }
  .cdp-header-inner { padding:.6em .8em; gap:.5em; }
  .cdp-brand { gap:.5em; }
  .cdp-brand-icon { width:2em; height:2em; border-radius:7px; }
  .cdp-brand-icon svg { width:1.1em; height:1.1em; }
  .cdp-brand-name { font-size:.85em; }
  .cdp-brand-sub { font-size:.68em; }
  .cdp-avatar { width:1.9em; height:1.9em; font-size:.78em; }
  .cdp-user-name { font-size:.8em; }
  .cdp-logout-btn { font-size:.7em; }
  .cdp-nav { padding:0 .4em; }
  .cdp-nav-tab { padding:.6em .65em; font-size:.74em; gap:.3em; }
  .cdp-nav-tab svg { width:.85em; height:.85em; }
  .cdp-stats-row { grid-template-columns: repeat(2, 1fr); gap:.7em; }
  .cdp-stat { padding:.85em 1em; }
  .cdp-stat-val { font-size:1.3em; }
}

@media(max-width:380px){
  .cdp-brand-sub { display:none; }
  .cdp-nav-tab span, .cdp-nav-tab { font-size:.7em; }
  .cdp-stats-row { grid-template-columns: 1fr 1fr; }
}