/* ============================================================================
   donate-page.css — base (light) styles for the donate page form components.
   Scoped to body[data-page='donate']; the dark theme overrides in site-dark.css
   load afterwards and win for dark mode.
   Palette: --primary #0B1F3A / --gold #D4A64A / --paper #F5F1E8 / --ink #10213A
   ============================================================================ */

body[data-page='donate'] .donation-layout{
  display:grid;
  gap:22px;
  margin-top:10px;
}

body[data-page='donate'] .donation-card{
  background:var(--site-card-bg, linear-gradient(180deg,#ffffff,#f8f4ec));
  border:1px solid var(--line);
  border-radius:var(--radius,24px);
  box-shadow:var(--shadow,0 24px 56px rgba(11,31,58,.12));
  padding:26px;
}

@media(min-width:1024px){
  body[data-page='donate'] .donation-layout{
    grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);
    align-items:start;
  }
}

body[data-page='donate'] .donation-card .form-grid{
  display:grid;
  gap:18px;
  margin-top:8px;
}

body[data-page='donate'] .donation-card .field{
  display:grid;
  gap:8px;
}

body[data-page='donate'] .donation-card .field.full{
  grid-column:1/-1;
}

body[data-page='donate'] .donation-card .field > label{
  font-weight:700;
  font-size:13.6px;
  color:var(--ink);
}

body[data-page='donate'] .preset-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

body[data-page='donate'] .amount-chip{
  min-width:76px;
  padding:11px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.82);
  color:var(--ink);
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

body[data-page='donate'] .amount-chip:hover{
  border-color:var(--gold);
  color:var(--primary);
}

body[data-page='donate'] .amount-chip:focus-visible{
  outline:3px solid rgba(212,166,74,.6);
  outline-offset:2px;
}

body[data-page='donate'] .amount-chip.active{
  background:var(--gold);
  border-color:var(--gold);
  color:#10213A;
  box-shadow:0 10px 22px rgba(212,166,74,.3);
}

body[data-page='donate'] .method-picker{
  display:grid;
  gap:10px;
}

@media(min-width:640px){
  body[data-page='donate'] .method-picker{
    grid-template-columns:repeat(3,1fr);
  }
}

body[data-page='donate'] .method-option{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:inherit;
  font:inherit;
  text-align:start;
  cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

body[data-page='donate'] .method-option:hover{
  border-color:var(--gold);
}

body[data-page='donate'] .method-option:focus-visible{
  outline:3px solid rgba(212,166,74,.6);
  outline-offset:2px;
}

body[data-page='donate'] .method-option.active{
  border-color:var(--gold);
  background:rgba(212,166,74,.1);
  box-shadow:inset 0 0 0 1px var(--gold);
}

body[data-page='donate'] .method-copy{
  flex:1;
  min-width:0;
}

body[data-page='donate'] .method-copy strong{
  display:block;
  font-size:15px;
  color:var(--ink);
}

body[data-page='donate'] .method-copy span{
  display:block;
  font-size:12.4px;
  color:var(--muted);
  margin-top:2px;
}

body[data-page='donate'] .method-radio{
  width:19px;
  height:19px;
  flex:none;
  border:2px solid rgba(11,31,58,.28);
  border-radius:50%;
  position:relative;
  transition:border-color .16s ease;
}

body[data-page='donate'] .method-option.active .method-radio{
  border-color:var(--gold);
}

body[data-page='donate'] .method-option.active .method-radio::after{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--gold);
}

body[data-page='donate'] .method-panel{
  display:none;
}

body[data-page='donate'] .method-panel.active{
  display:grid;
  gap:14px;
  padding:18px;
  border:1px dashed rgba(11,31,58,.16);
  border-radius:18px;
  background:rgba(255,255,255,.5);
}

body[data-page='donate'] .paypal-note{
  font-size:13.4px;
  color:var(--muted);
  line-height:1.85;
}

body[data-page='donate'] .button.block{
  display:block;
  width:100%;
}

body[data-page='donate'] .crypto-grid{
  display:grid;
  gap:14px;
}

body[data-page='donate'] .address-card{
  display:grid;
  gap:8px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

body[data-page='donate'] .address-card > strong{
  font-size:13.6px;
  color:var(--primary);
}

body[data-page='donate'] .address-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

body[data-page='donate'] .address-line code{
  flex:1;
  min-width:0;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(11,31,58,.05);
  color:var(--primary);
  font-size:12.6px;
  direction:ltr;
  word-break:break-all;
  white-space:pre-wrap;
}

body[data-page='donate'] .copy-btn{
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--primary);
  font-weight:700;
  font-size:12.6px;
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}

body[data-page='donate'] .copy-btn:hover{
  border-color:var(--gold);
  color:#10213A;
  background:rgba(212,166,74,.08);
}

body[data-page='donate'] .qr-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
  padding-top:4px;
}

body[data-page='donate'] .qr-card img{
  width:74px;
  height:74px;
  border-radius:12px;
  border:1px solid var(--line);
  object-fit:contain;
}

body[data-page='donate'] .qr-card span{
  font-size:12.2px;
  color:var(--muted);
  line-height:1.75;
}

body[data-page='donate'] .upload-shell{
  display:grid;
  gap:8px;
  padding:16px;
  border:1px dashed rgba(11,31,58,.22);
  border-radius:16px;
  background:rgba(255,255,255,.5);
}

body[data-page='donate'] .upload-shell strong{
  font-size:13.6px;
  color:var(--primary);
}

body[data-page='donate'] .upload-shell small{
  font-size:12px;
  color:var(--muted);
}

body[data-page='donate'] .upload-shell input[type='file']{
  font:inherit;
  color:var(--ink);
}

body[data-page='donate'] .file-meta{
  font-size:12.4px;
  color:var(--muted);
}

body[data-page='donate'] .status-msg{
  min-height:22px;
  font-size:13.4px;
  font-weight:600;
}

body[data-page='donate'] .status-msg[hidden]{
  display:none;
}