/* ============================================================
   donation-v2.css — Don / Donation page refonte 2026
   Scoped under .dv2-shell
   ============================================================ */

.dv2-shell, .dv2-shell * { box-sizing: border-box; }

.dv2-shell {
  --dv2-brand-900:#1e3a8a;
  --dv2-brand-800:#1e40af;
  --dv2-brand-700:#1d4ed8;
  --dv2-brand-600:#2563eb;
  --dv2-brand-50:#eff6ff;
  --dv2-ink-900:#0f172a;
  --dv2-ink-700:#334155;
  --dv2-ink-500:#64748b;
  --dv2-line:#e2e8f0;
  --dv2-bg:#f8fafc;
  --dv2-g-blue-bg:#e8f0fe;   --dv2-g-blue-text:#1967d2;
  --dv2-g-red-bg:#fce8e6;    --dv2-g-red-text:#c5221f;
  --dv2-g-yellow-bg:#fef7e0; --dv2-g-yellow-text:#b06000;
  --dv2-g-green-bg:#e6f4ea;  --dv2-g-green-text:#137333;

  background: var(--dv2-bg);
  color: var(--dv2-ink-700);
  font-family: 'Inter', 'Catamaran', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dv2-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px){ .dv2-wrap{ padding: 0 24px; } }
.dv2-wrap--narrow { max-width: 760px; }
.dv2-wrap--md { max-width: 960px; }

.dv2-eyebrow {
  display:inline-flex; align-items:center; gap: 6px;
  font-size: .8rem; font-weight: 700;
  background: var(--dv2-brand-50); color: var(--dv2-brand-700);
  padding: 5px 12px; border-radius: 9999px;
  margin-bottom: 14px;
}
.dv2-eyebrow svg { width: 14px; height: 14px; }
.dv2-h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.85rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--dv2-ink-900); margin: 0 0 14px;
}
.dv2-h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800; letter-spacing: -.02em;
  color: var(--dv2-ink-900); margin: 0 0 8px;
}
.dv2-lead {
  color: var(--dv2-ink-500); font-size: 1.05rem; line-height: 1.65;
  max-width: 38rem; margin: 0;
}
.dv2-section { padding: 56px 0; }
@media (max-width:600px){ .dv2-section{ padding: 36px 0; } }
.dv2-section--white { background:#fff; border-top: 1px solid var(--dv2-line); border-bottom: 1px solid var(--dv2-line); }
.dv2-section__head { text-align:center; margin-bottom: 32px; }
.dv2-section__head .dv2-lead { margin: 0 auto; }

/* HERO */
.dv2-hero {
  background: linear-gradient(135deg, #eff6ff, #fff 50%, #eff6ff);
  border-bottom: 1px solid var(--dv2-line);
  padding: 56px 0 64px;
}
.dv2-hero-grid {
  display:grid; grid-template-columns: 7fr 5fr; gap: 40px;
  align-items: start;
}
@media (max-width: 960px){ .dv2-hero-grid{ grid-template-columns: 1fr; } }

.dv2-pills { display:flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dv2-pill {
  display:inline-flex; align-items:center; gap: 8px;
  padding: 7px 12px; border-radius: 9999px;
  background:#fff; border: 1px solid var(--dv2-line);
  font-size: .85rem; color: var(--dv2-ink-700);
}
.dv2-pill svg { width: 14px; height: 14px; }
.dv2-pill--green svg { color: var(--dv2-g-green-text); }
.dv2-pill--blue  svg { color: var(--dv2-g-blue-text); }
.dv2-pill--red   svg { color: var(--dv2-g-red-text); }

/* CARD */
.dv2-card {
  background:#fff;
  border: 1px solid var(--dv2-line);
  border-radius: 14px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.dv2-card--hover { transition: .15s; }
.dv2-card--hover:hover { border-color:#cbd5e1; box-shadow: 0 6px 18px -6px rgba(15,23,42,.1); transform: translateY(-2px); }
.dv2-card__bar { height: 4px; margin: -24px -24px 18px; }
.dv2-bar--blue   { background:#4285f4; }
.dv2-bar--red    { background:#ea4335; }
.dv2-bar--yellow { background:#fbbc04; }
.dv2-bar--green  { background:#34a853; }

.dv2-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom: 14px;
}
.dv2-icon svg { width: 20px; height: 20px; }
.dv2-ic--blue   { background: var(--dv2-g-blue-bg);   color: var(--dv2-g-blue-text); }
.dv2-ic--red    { background: var(--dv2-g-red-bg);    color: var(--dv2-g-red-text); }
.dv2-ic--yellow { background: var(--dv2-g-yellow-bg); color: var(--dv2-g-yellow-text); }
.dv2-ic--green  { background: var(--dv2-g-green-bg);  color: var(--dv2-g-green-text); }

.dv2-card h3 { font-weight:700; color: var(--dv2-ink-900); margin: 0 0 8px; font-size: 1rem; }
.dv2-card p  { font-size: .94rem; color: var(--dv2-ink-700); line-height: 1.6; margin: 0; }

/* DONATION FORM */
.dv2-don-form { padding: 26px; }
.dv2-don-form h2 { text-align:center; font-size: 1.2rem; margin: 0 0 4px; color: var(--dv2-ink-900); font-weight: 800; }
.dv2-don-form__sub { text-align:center; font-size: .85rem; color: var(--dv2-ink-500); margin: 0 0 18px; }

.dv2-amounts {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 12px;
}
.dv2-amounts input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.dv2-amounts label {
  display:block; cursor:pointer; text-align:center;
  padding: 14px 6px; border-radius: 10px;
  border: 2px solid var(--dv2-line);
  background:#f8fafc;
  font-weight: 700; color: var(--dv2-ink-900);
  transition: .12s;
  position: relative;
}
.dv2-amounts label:hover { border-color:#93c5fd; }
.dv2-amounts__val { font-size: 1.25rem; }
.dv2-amounts__cur { font-size: .85rem; color: var(--dv2-ink-500); margin-left: 2px; }
.dv2-amounts label.is-free { font-size: .9rem; font-weight: 600; padding: 18px 6px; }
.dv2-amounts input:checked + label {
  background: var(--dv2-g-blue-bg);
  border-color:#4285f4; color: var(--dv2-g-blue-text);
}
.dv2-amounts input:checked + label .dv2-amounts__cur { color: var(--dv2-g-blue-text); }
.dv2-amounts__star {
  position:absolute; top:-8px; right:6px;
  background:#34a853; color:#fff;
  font-size: .65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 9999px;
}

.dv2-custom { margin: 4px 0 0; display:none; }
.dv2-custom.is-on { display:block; }
.dv2-custom__wrap { position:relative; }
.dv2-custom input {
  width: 100%; text-align:center;
  padding: 14px 36px 14px 12px;
  border-radius: 10px;
  border: 2px solid #93c5fd;
  font-size: 1.1rem; font-weight: 700;
  outline: none;
  font-family: inherit;
  color: var(--dv2-ink-900);
  background:#fff;
}
.dv2-custom input:focus { border-color: var(--dv2-brand-600); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.dv2-custom__cur { position:absolute; right:14px; top:50%; transform: translateY(-50%); color: var(--dv2-ink-500); font-weight: 700; }

.dv2-btn {
  display:inline-flex; align-items:center; justify-content:center; gap: 8px;
  background: var(--dv2-brand-600);
  color:#fff; font-weight: 700;
  padding: 12px 22px; border-radius: 10px;
  border: 0; cursor: pointer;
  transition: .15s;
  font-family: inherit; font-size: .95rem;
  text-decoration: none;
}
.dv2-btn:hover { background: var(--dv2-brand-800); color:#fff; text-decoration:none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,.25); }
.dv2-btn:disabled { opacity:.6; cursor: not-allowed; transform:none; box-shadow:none; }
.dv2-btn svg { width: 16px; height: 16px; }
.dv2-btn--full { width: 100%; padding: 14px 22px; font-size: 1rem; }
.dv2-btn--ghost { background:#fff; color: var(--dv2-brand-700); border: 1px solid var(--dv2-line); }
.dv2-btn--ghost:hover { background:#f1f5f9; color: var(--dv2-brand-900); border-color:#cbd5e1; box-shadow:none; }

.dv2-secure {
  margin: 12px 0 0; text-align:center;
  font-size: .76rem; color: var(--dv2-ink-500);
  display:flex; align-items:center; justify-content:center; gap: 6px;
}
.dv2-secure svg { width: 14px; height: 14px; }

/* Lists */
.dv2-list { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 10px; }
.dv2-list li { display:flex; gap: 10px; font-size: .94rem; color: var(--dv2-ink-700); line-height: 1.55; }
.dv2-list li::before { content:"›"; font-weight:900; flex-shrink:0; }
.dv2-list--green li::before { color:#34a853; }
.dv2-list--yellow li::before { color:#fbbc04; }

.dv2-list__title {
  display:flex; align-items:center; gap: 8px;
  font-weight:800; font-size: 1rem; margin: 0 0 14px;
}
.dv2-list__title svg { width: 18px; height: 18px; }
.dv2-list__title--green { color: var(--dv2-g-green-text); }
.dv2-list__title--yellow { color: var(--dv2-g-yellow-text); }

/* Callout */
.dv2-callout {
  border-left: 4px solid var(--dv2-brand-600);
  background: var(--dv2-brand-50);
  color: var(--dv2-brand-900);
  padding: 14px 18px; border-radius: 8px;
  margin: 18px 0 0; font-size: .95rem; line-height: 1.6;
}
.dv2-callout strong { font-weight:700; }

/* Grids */
.dv2-grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width:900px){ .dv2-grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width:540px){ .dv2-grid-3{ grid-template-columns: 1fr; } }
.dv2-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width:900px){ .dv2-grid-2{ grid-template-columns: 1fr; } }

/* CTA Final */
.dv2-cta { padding: 56px 0; text-align:center; background:#fff; border-top: 1px solid var(--dv2-line); }
.dv2-cta__btns { display:flex; flex-wrap:wrap; gap: 12px; justify-content:center; margin-top: 22px; }

/* DONATED page */
.dv2-thanks { padding: 80px 0; text-align:center; }
.dv2-thanks__icon {
  width: 80px; height: 80px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--dv2-g-green-bg);
  color: var(--dv2-g-green-text);
  display:flex; align-items:center; justify-content:center;
}
.dv2-thanks__icon svg { width: 40px; height: 40px; }
.dv2-share-list {
  display:flex; gap: 12px; justify-content:center;
  margin: 28px 0; padding: 0; list-style: none;
}
.dv2-share-list a {
  width: 48px; height: 48px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border: 1px solid var(--dv2-line);
  transition: .15s;
}
.dv2-share-list a:hover { border-color: var(--dv2-brand-600); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,23,42,.08); }
.dv2-share-list img { width: 22px; height: 22px; }

/* Dark mode */
body.dark-mode .dv2-shell { background:#0b1220; color:#cbd5e1; }
body.dark-mode .dv2-card,
body.dark-mode .dv2-section--white,
body.dark-mode .dv2-cta { background:#0f172a; border-color:#1e293b; }
body.dark-mode .dv2-h1, body.dark-mode .dv2-h2,
body.dark-mode .dv2-card h3 { color:#f1f5f9; }
body.dark-mode .dv2-lead, body.dark-mode .dv2-card p,
body.dark-mode .dv2-list li { color:#cbd5e1; }
body.dark-mode .dv2-amounts label { background:#1e293b; border-color:#334155; color:#f1f5f9; }
body.dark-mode .dv2-pill { background:#0f172a; border-color:#1e293b; color:#cbd5e1; }
body.dark-mode .dv2-hero { background: linear-gradient(135deg, #0b1428, #0b1220, #0b1428); }