/* ===== Reset + базовые вещи ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, section, summary, time,
mark, audio, video { margin:0; padding:0; border:0; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ol, ul { list-style:none; }
table { border-collapse:collapse; border-spacing:0; }

/* ===== Тема ===== */
:root{
  --bg-0:#0a0a0b;
  --bg-1:#0f1013;
  --glass:rgba(255,255,255,.06);
  --glass-b:rgba(255,255,255,.10);
  --text:#e9e9f0;
  --muted:#9aa0a6;
  --accent:#5865F2;
  --accent2:#27A7E7;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ===== Фон + всегда включённый скролл ===== */
html{
  overflow-y: auto; /* всегда показываем вертикальный скролл */
  min-height:100%;
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(88,101,242,.12), transparent 60%),
    radial-gradient(900px 700px at 10% -20%, rgba(39,167,231,.10), transparent 55%),
    repeating-linear-gradient(-25deg, rgba(255,255,255,.03) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, #0b0c10);
  background-attachment: fixed, fixed, fixed, fixed;
}

body{
  min-height:100%;
  color:var(--text);
  background:transparent;        /* фон рисует html */
  overflow-x: hidden;            /* убираем горизонтальный скролл */
}

/* ===== Кастомный скролл ===== */
*::-webkit-scrollbar{ width:12px; height:12px; }
*::-webkit-scrollbar-track{ background:#0b0c10; }
*::-webkit-scrollbar-thumb{
  background:rgba(120,120,140,0.35);
  border-radius:10px;
  border:2px solid #0b0c10;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(140,140,160,0.55); }
*{ scrollbar-width:thin; scrollbar-color:rgba(120,120,140,0.55) #0b0c10; }

/* ===== Общий лэйаут ===== */
.wrapper{ min-height:100%; }

.header__wrapper{
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; width:100%; z-index:1000;
}

.logo{ width:60px; height:auto; display:block; }

.navigate{
  position:absolute; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px;
  height:40px; padding:0 10px;
  background:var(--glass); border:.5px solid var(--glass-b);
  box-shadow:0 0 0 4px rgba(255,255,255,.03);
  backdrop-filter:blur(4px); border-radius:20px;
}
.navigate a{
  position:relative; text-decoration:none; color:white;
  margin:5px; padding:7px 17px; border-radius:20px; transition:.3s;
  z-index:0;
}
.navigate a::before{
  content:""; position:absolute; inset:0; border-radius:20px;
  background:rgba(200,230,200,.20); opacity:0; transition:.3s; z-index:-1;
}
.navigate a:hover::before{ opacity:1; }

.telegram-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; background:#27a7e796; color:#fff;
  font-size:16px; font-weight:600; border-radius:12px; text-decoration:none;
  transition:.2s; box-shadow:0 4px 10px rgba(39,167,231,.21);
}
.telegram-btn:hover{ background:#1d95cf; box-shadow:0 6px 14px rgba(39,167,231,.6); transform:translateY(-2px); }
.telegram-btn:active{ transform:translateY(0); }
.telegram-icon{ width:22px; height:22px; }

.main__wrapper{
  max-width:1200px;
  margin:80px auto 80px;
  padding:0 20px;
}

/* ===== Hero ===== */
.donate-hero{ margin-bottom:24px; }
.donate-hero h1{ font-size:clamp(28px,4vw,44px); line-height:1.1; letter-spacing:.5px; }
.donate-hero p{ margin-top:8px; color:var(--muted); }

/* ===== Filter bar ===== */
.filter__bar{
  position:sticky; top:12px; z-index:5;
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:12px; margin:18px 0 24px;
  border-radius:var(--radius);
  background:var(--glass); border:1px solid var(--glass-b);
  backdrop-filter:blur(8px); box-shadow:var(--shadow);
}
@media (max-width:700px){ .filter__bar{ grid-template-columns:1fr; } }

.filter__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-b);
  color:var(--muted); font-weight:600; font-size:14px; cursor:pointer; transition:.2s;
}
.chip:hover{ background:rgba(255,255,255,.10); color:var(--text); }
.chip.is-active{ background:var(--accent); border-color:transparent; color:#fff; }

.search{
  display:flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-b);
  border-radius:10px; padding:8px 12px;
}
.search input{ background:transparent; border:0; color:var(--text); outline:none; min-width:180px; }

.sort{
  appearance:none; background:rgba(255,255,255,.06);
  border:1px solid var(--glass-b); color:var(--text);
  padding:10px 12px; border-radius:10px; cursor:pointer;
}

/* ===== Cards ===== */
.donat__cards{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px;
}

.card{
  display:flex; flex-direction:column;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--glass-b);
  overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}

.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(255,255,255,.18); }

.badge{
  position:absolute; top:10px; left:10px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.5px; color:#fff;
  background:linear-gradient(135deg, #ff7a7a, #ff4d4d);
  box-shadow:0 6px 14px rgba(255,77,77,.35);
}
.badge.badge-new{ background:linear-gradient(135deg, #7affc1, #2fe39d); box-shadow:0 6px 14px rgba(47,227,157,.35); }

.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 14px;
}
.price{ font-weight:900; font-size:18px; letter-spacing:.2px; color:#eaeaf6; }

.btn-buy:hover{ background:#4752C4; transform:translateY(-2px); box-shadow:0 6px 14px rgba(88,101,242,.55); }
.btn-buy:active{ transform:translateY(0); }

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; z-index:2000;
}
.modal-overlay.active{ opacity:1; visibility:visible; }

.modal{
  width:min(92vw, 440px);
  color:var(--text);
  background:linear-gradient(180deg, rgba(20,21,25,.92), rgba(15,16,19,.92));
  border:1px solid var(--glass-b);
  border-radius:16px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  transform:translateY(-10px); transition:transform .2s;
}
.modal-overlay.active .modal{ transform:translateY(0); }

.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--glass-b);
  background:rgba(255,255,255,.02);
}
.modal-title{ margin:0; font-size:18px; font-weight:800; letter-spacing:.2px; }
.close-btn{
  appearance:none; background:transparent; border:0; color:#cfcfe4;
  font-size:24px; line-height:1; cursor:pointer; padding:4px 6px; border-radius:8px;
  transition:background .15s, transform .15s, color .15s;
}
.close-btn:hover{ background:rgba(255,255,255,.08); color:#fff; transform:translateY(-1px); }

.modal-body{ padding:16px; line-height:1.55; }
.modal-body p{ margin:0 0 8px; }
.modal-body ul{ margin:10px 0 0; padding:0; list-style:none; }
.modal-body li{ position:relative; padding-left:16px; color:var(--muted); margin:6px 0; }
.modal-body li::before{
  content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45);
}

.modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:12px 16px 16px; border-top:1px solid var(--glass-b); background:rgba(255,255,255,.02); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; border:1px solid transparent; font-weight:800; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 14px rgba(88,101,242,.45); }
.btn-primary:hover{ background:#4752C4; box-shadow:0 10px 20px rgba(88,101,242,.55); transform:translateY(-2px); }
.btn-secondary{ background:var(--glass); border-color:var(--glass-b); color:var(--text); }
.btn-secondary:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

@media (max-width:420px){
  .modal-title{ font-size:17px; }
  .btn{ padding:9px 14px; }
}
/* === Legal footer for donate === */
body{padding-bottom:64px}
.site-footer{position:fixed;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(6,10,20,0),rgba(6,10,20,.55));
  backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.06);z-index:1000}
.site-footer .wrap{max-width:1200px;margin:0 auto;display:flex;gap:12px;
  align-items:center;justify-content:space-between;font-size:12px;color:#9aa4b2}
.site-footer a{color:#aeb8ff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
@media (max-width:768px){.site-footer .wrap{flex-direction:column;gap:6px}}

/* BlockEra footer (shared) */
html, body { height: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
.wrapper, main { flex: 1 0 auto; }

.site-footer {
  margin-top: auto;
  flex-shrink: 0;
  background: rgba(8,12,20,.8);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-footer__left{
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.site-footer__nav{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.site-footer__nav a{ color: rgba(255,255,255,.85); font-size:12px; text-decoration:none; }
.site-footer__nav a:hover{ text-decoration: underline; }
.site-footer .dot{ opacity:.35; }

@media (max-width:640px){
  .site-footer__inner{ flex-direction:column; align-items:flex-start; row-gap:6px; }
}
/* END BlockEra footer (shared) */

/* --- FIX: double scroll on donate --- */
body { padding-bottom: 0 !important; overflow-y: auto; }
.wrapper { min-height: 0 !important; flex: 1 0 auto; }
/* --- END FIX --- */

/* --- Shared BlockEra footer (как на главной) --- */
html, body { height: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
.wrapper, main { flex: 1 0 auto; }

.site-footer {
  margin-top: auto;
  flex-shrink: 0;
  background: rgba(8,12,20,.8);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-footer__left{
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.site-footer__nav{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.site-footer__nav a{ color: rgba(255,255,255,.85); font-size:12px; text-decoration:none; }
.site-footer__nav a:hover{ text-decoration: underline; }
.site-footer .dot{ opacity:.35; }

@media (max-width:640px){
  .site-footer__inner{ flex-direction:column; align-items:flex-start; row-gap:6px; }
}
/* --- END Shared BlockEra footer --- */

/* --- Unify footer with main (BlockEra) --- */
.site-footer{ padding: 0 !important; } /* на главной паддинга у .site-footer нет */
.site-footer__inner{
  max-width: 1180px !important;
  padding: 10px 14px !important;   /* top/bottom 10, sides 14 — как на главной */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.site-footer__left{ font-size: 12px !important; line-height: 1.35 !important; }
.site-footer__nav a{ font-size: 12px !important; }
/* --- END unify --- */
/* === responsive patch (donate) === */
@media (max-width: 900px){
  .header__wrapper{ padding:12px 14px; }
  .navigate{ transform:none; left:auto; position:static; flex-wrap:wrap; justify-content:center; gap:6px; padding:4px 6px; }
  .navigate a{ margin:2px; padding:6px 12px; font-size:14px; }
  .telegram-btn{ padding:10px 14px; font-size:14px; }
}
@media (max-width: 520px){
  .navigate a{ font-size:13px; padding:6px 10px; }
  .btn, .btn-buy { width: 100%; }
}


.card__img{height:180px;overflow:hidden;border-radius:12px;background:#111; display: flex; align-items: center; justify-content: center;}
.card__img img{width: 180px; height: 180px;object-fit:cover;display:block} 
.card__title{margin:14px 16px 6px;font-size:18px;font-weight:800;line-height:1.1;letter-spacing:.2px;color:#eaeaf6}
.card__desc{margin:0 16px 12px;color:var(--muted);font-size:14px;line-height:1.4;flex-grow:1;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.card__price{margin:14px 16px 6px; font-weight:900;font-size:18px;letter-spacing:.2px;color:#eaeaf6}

.card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between; /* цена слева, кнопка справа */
  gap: 12px;
  padding: 0 16px 16px;           /* такие же боковые отступы, как у заголовка/описания */
}

/* боковые отступы цене больше не нужны — их даёт padding футера */
.card__price{
  margin: 4px 0 0;               /* было: 14px 16px 6px */
}

/* кнопку не толкаем марджином — её уводит вправо justify-content */
.buy-btn{
  margin: 0;                      /* убери текущий margin: 0 0 10px 100px */
}



/* === MOBILE FIX PACK (<= 480px) === */
@media (max-width: 480px){

  /* шапка: навигация больше не absolute, не выпрыгивает из рамки */
  .header__wrapper{
    padding: 12px 10px;
    gap: 10px;
  }
  .logo{ width: 44px; }

  .navigate{
    position: static;               /* вместо absolute */
    left: auto; transform: none;    /* убираем центрирование через translate */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    height: auto;
    padding: 6px 8px;
    margin: 6px 0 0;
    border-radius: 16px;
  }
  .navigate a{
    margin: 0;
    padding: 6px 10px;
    border-radius: 14px;
    font-size: 13px;
  }
}

@media (max-width: 600px){
  .header__wrapper{ gap: 8px; }
  .navigate{
    height: 40px;            /* оставляем фикс */
    flex-wrap: nowrap;       /* запрещаем перенос */
    gap: 4px;
    padding: 2px 6px;
  }
  .navigate a{
    padding: 5px 9px;
    font-size: 13px;
  }
}
/* modal nickname field */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.field input{background:rgba(255,255,255,.06);border:1px solid var(--glass-b);color:var(--text);padding:10px 12px;border-radius:10px;outline:none}
.field-hint{color:var(--muted);font-size:12px}
.field input.is-error{border-color:#ff6b6b}