/* ══ SENRA · drawer, donation ══════════════════════════════ */

/* ── scrim ─────────────────────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; z-index:80; background:rgba(4,4,8,.7);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fadeOnly .45s ease both;
}

/* ── settings drawer ───────────────────────────────────────────── */
.drawer{
  position:fixed; top:0 ; right:0; bottom:0; width:min(392px,92vw); z-index:90;
  background:rgba(9,9,16,.96);
  border-left:1px solid var(--hair-2);
  backdrop-filter:blur(24px) saturate(120%); -webkit-backdrop-filter:blur(24px) saturate(120%);
  transform:translateX(103%); visibility:hidden;
  transition:transform .74s var(--ease-out), visibility .74s;
  box-shadow:-40px 0 90px -40px rgba(0,0,0,1);
  display:flex; flex-direction:column;
}
.drawer.is-open{ transform:none; visibility:visible; }
.drawer-inner{ display:flex; flex-direction:column; height:100%; }
.drawer-head{
  position:relative; padding:26px clamp(20px,4vw,30px) 20px; border-bottom:1px solid var(--hair);
}
.drawer-head .eyebrow{ margin-bottom:9px; }
.drawer-title{
  margin:0; font-family:var(--serif); font-weight:300; font-size:27px; color:var(--silver);
}
.drawer-x{ position:absolute; top:22px; right:18px; }
.drawer-x svg .s-thin{ stroke:currentColor; }
.drawer-body{ flex:1; overflow-y:auto; padding:6px clamp(20px,4vw,30px) 26px; }
.drawer-foot{
  padding:16px clamp(20px,4vw,30px); border-top:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ver{ font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-4); }

.set-group{ padding:22px 0 4px; border-bottom:1px solid var(--hair); }
.set-group:last-child{ border-bottom:0; }
.set-group-t{
  margin:0 0 16px; font-size:8.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--violet);
}
.set-row{ margin-bottom:20px; }
.set-row-line{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.set-lab{ flex:1 1 138px; min-width:0; font-size:12px; color:var(--silver-2); letter-spacing:.02em; }
.set-hint{ display:block; font-size:10px; color:var(--silver-4); margin-top:3px; line-height:1.55; }

.seg{ flex:0 1 auto; max-width:100%; display:flex; border:1px solid var(--hair); border-radius:var(--rad); overflow:hidden; }
.seg button{
  flex:1; background:none; border:0; border-right:1px solid var(--hair);
  color:var(--silver-4); padding:7px 9px; cursor:pointer; font-family:var(--sans);
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  transition:color .3s, background .3s;
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ color:var(--silver-2); background:rgba(226,229,242,.03); }
.seg button.is-on{ color:var(--silver); background:rgba(142,125,208,.13); }

.slider-row{ display:flex; align-items:center; gap:13px; margin-top:11px; }
.slider-row input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none; height:1px; outline:none;
  background:linear-gradient(90deg,var(--violet) 0%,var(--violet) var(--fill,50%),rgba(226,229,242,.14) var(--fill,50%));
}
.slider-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--silver); border:1px solid var(--violet); cursor:pointer;
  box-shadow:0 0 12px rgba(183,169,255,.7);
}
.slider-row input[type=range]::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--silver);
  border:1px solid var(--violet); cursor:pointer;
}
.slider-val{
  font-family:var(--serif); font-size:13px; color:var(--silver-2);
  min-width:38px; text-align:right; font-variant-numeric:tabular-nums;
}

/* language grid inside the drawer */
.lang-select{ margin-top:12px; }
.seg-lang{ display:grid; grid-template-columns:repeat(5,1fr); border-bottom:0; }
.seg-lang button{ border-bottom:1px solid var(--hair); padding:9px 4px; font-size:10px; letter-spacing:.08em; }
.seg-lang button:nth-child(5n){ border-right:0; }
.seg-lang button:nth-last-child(-n+5){ border-bottom:0; }

/* ── donation ──────────────────────────────────────────────────── */
.view-donate.is-live{ display:flex; align-items:center; justify-content:center; }
.donate-shell{ width:100%; max-width:1060px; margin:0 auto; }
.donate-head{ margin-bottom:44px; }

.qr-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair);
}
.qr-card{
  position:relative; background:rgba(11,11,19,.55); padding:26px 22px 22px;
  display:flex; flex-direction:column; align-items:center; gap:15px; overflow:hidden;
  animation:stepIn .8s var(--ease-out) both; animation-delay:var(--d,0s);
  transition:background .6s var(--ease);
}
.qr-card::after{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(280px 200px at 50% 24%, rgba(142,125,208,.16), transparent 68%);
  transition:opacity .6s;
}
.qr-card:hover{ background:rgba(20,20,34,.72); }
.qr-card:hover::after{ opacity:1; }
.qr-title{
  font-family:var(--serif); font-size:19px; color:var(--silver); line-height:1.2; text-align:center;
}
.qr-kind{ font-size:8.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--violet); }
.qr-frame{
  position:relative; width:min(174px,52vw); aspect-ratio:1; padding:11px;
  background:linear-gradient(158deg,rgba(226,229,242,.94),rgba(196,201,222,.86));
  border:1px solid var(--hair-2); cursor:zoom-in;
  transition:transform .6s var(--ease-out), box-shadow .6s;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.9);
}
.qr-frame:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 24px 54px -18px rgba(0,0,0,.95), 0 0 40px -12px rgba(142,125,208,.5); }
.qr-frame img{ width:100%; height:100%; display:block; image-rendering:pixelated; }
.qr-frame::before,.qr-frame::after{
  content:''; position:absolute; width:13px; height:13px; border:1px solid rgba(20,20,34,.5);
}
.qr-frame::before{ top:4px; left:4px; border-right:0; border-bottom:0; }
.qr-frame::after{ bottom:4px; right:4px; border-left:0; border-top:0; }
.qr-note{ font-size:10.5px; color:var(--silver-3); text-align:center; line-height:1.6; min-height:2.4em; }
.qr-addr{
  display:flex; align-items:center; gap:8px; width:100%; justify-content:center;
  /* the address row is the card's baseline: cards that only say "scan to give"
   * must reserve the same height as the ones carrying a URL + COPY button, or
   * the bottom row of the grid steps up and down */
  min-height:26px; margin-top:auto;
}
.qr-addr code{
  font-family:ui-monospace,Menlo,monospace; font-size:9.5px; color:var(--silver-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:128px;
}

.donate-foot{
  margin-top:30px; text-align:center;
}
.donate-foot p{
  margin:0; font-size:11px; letter-spacing:.13em; color:var(--silver-3); font-style:italic;
}

/* qr loupe reuse */
.loupe-inner.is-qr{
  width:min(360px,80vw); aspect-ratio:1;
  background:linear-gradient(158deg,rgba(232,234,244,.96),rgba(200,205,226,.9));
  padding:18px; border:1px solid var(--hair-2);
}
.loupe-inner.is-qr img{ width:100%; height:100%; image-rendering:pixelated; }

@media (max-width:860px){
  .drawer{ width:100%; }
}