:root{
  --ink:#0F1720; --ink-2:#16212C; --ink-3:#1C2833;
  --gold:#C89B3C; --gold-soft:#E3C878;
  --teal:#2C8C99; --teal-soft:#4FB3BF;
  --paper:#EDEAE2; --paper-dim:#A9B2BC;
  --green:#4C9A6A; --red:#C85C3C;
  --line: rgba(237,234,226,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto;}
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
body{ background:var(--ink); color:var(--paper); font-family:'Vazirmatn', sans-serif; line-height:1.7; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 28px; }
a{ color:inherit; text-decoration:none; }
@media print{
  :root{
    --ink:#ffffff; --ink-2:#f5f5f5; --ink-3:#eeeeee;
    --paper:#111111; --paper-dim:#444444;
    --line: rgba(0,0,0,0.15);
  }
  nav, button{ display:none !important; }
  h3{ break-after:avoid-page; }
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-100px; left:16px; z-index:1000;
  background:var(--gold); color:#211605; padding:10px 18px;
  border-radius:8px; font-weight:600; font-size:14px; transition:top .15s;
}
.skip-link:focus{ top:16px; }
h1,h2,h3{ font-weight:700; letter-spacing:-0.01em; }
.eyebrow{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold); display:inline-block; }
[dir="rtl"] .eyebrow{ letter-spacing:0; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.btn:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; }
.btn-primary{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#211605; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(200,155,60,.55); }
.btn-ghost{ border-color:var(--line); color:var(--paper); background:rgba(237,234,226,0.03); }
.btn-ghost:hover{ border-color:var(--gold-soft); }
.btn-sm{ padding:11px 18px; font-size:13.5px; }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

nav{ position:sticky; top:0; z-index:50; background:rgba(15,23,32,0.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top, 0px); }
nav .row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; flex-wrap:wrap; gap:10px; }
.logo{ display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800; white-space:nowrap; }
.logo-mark{ width:26px; height:26px; flex:none; }
.logo-mark svg{ width:100%; height:100%; }
.nav-links{ display:flex; align-items:center; gap:20px; font-size:14.5px; color:var(--paper-dim); }
.nav-links a:hover{ color:var(--paper); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.lang-toggle{ position:relative; }
.lang-btn{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13px; background:transparent; color:var(--paper); cursor:pointer; font-family:inherit; }
.lang-menu{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:6px; min-width:150px; display:none; flex-direction:column; z-index:60; }
.lang-menu.open{ display:flex; }
.lang-menu button{ text-align:start; padding:9px 12px; border-radius:9px; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13.5px; cursor:pointer; }
.lang-menu button:hover{ background:var(--ink-3); }
.lang-menu button.active{ color:var(--gold-soft); font-weight:700; }
.cart-badge{ position:relative; }
.cart-count{ position:absolute; top:-6px; inset-inline-end:-6px; background:var(--gold); color:#211605; font-size:10.5px; font-weight:800; border-radius:999px; width:17px; height:17px; display:flex; align-items:center; justify-content:center; }

section{ padding:70px 0; border-top:1px solid var(--line); }
.page-header{ padding:60px 0 40px; text-align:center; }
.page-header h1{ font-size:clamp(30px,5vw,46px); margin-top:16px; }
.page-header p{ color:var(--paper-dim); margin-top:14px; max-width:600px; margin-inline:auto; }

.card{ background:var(--ink-2); border:1px solid var(--line); border-radius:18px; padding:26px; }

.disclaimer{ background:var(--ink-2); border:1px solid var(--line); border-radius:18px; padding:24px 26px; font-size:13.5px; color:var(--paper-dim); line-height:1.9; }
.disclaimer strong{ color:var(--paper); }

footer{ border-top:1px solid var(--line); padding:40px 0 28px; }
footer .row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
footer .copy{ font-size:13px; color:var(--paper-dim); }
footer .foot-links{ display:flex; gap:18px; font-size:13.5px; color:var(--paper-dim); flex-wrap:wrap; row-gap:8px; } /* footer links wrap on phones (long labels in Russian, Kurdish… made the row wider than the screen) */
footer .foot-links a:hover{ color:var(--paper); }

footer .social-icons{ display:flex; gap:10px; }
footer .social-icons a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); color:var(--paper-dim);
  transition:border-color .15s, color .15s, transform .15s;
}
footer .social-icons a:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px); }
footer .social-icons svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.support-contact-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.support-contact-links a{
  display:flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:999px;
  border:1px solid var(--line); color:var(--paper); font-size:13.5px;
  transition:border-color .15s, color .15s;
}
.support-contact-links a:hover{ border-color:var(--gold); color:var(--gold-soft); }
.support-contact-links svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* forms */
label{ display:block; font-size:13.5px; color:var(--paper-dim); margin-bottom:6px; }
/* password, date and date-time fields were missing here: the login/sign-up/reset password fields,
   the date of birth and the admin's competition dates showed the browser's own unstyled look. */
input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], input[type=datetime-local], input[type=tel], input[type=url], input[type=search], select, textarea{
  width:100%; background:var(--ink-3); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--paper); font-family:inherit; font-size:16px; outline:none;
}
input[type=date], input[type=datetime-local]{ color-scheme:dark; } /* the browser's date picker icon and popup in the dark theme */
input:focus, select:focus, textarea:focus{ border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(227,200,120,0.25); }
.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--paper-dim); }
.checkbox-row input{ margin-top:3px; width:auto; }

/* live chat bubble */
.chat-bubble{
  position:fixed; bottom:22px; inset-inline-end:22px; z-index:70;
  width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 30px -6px rgba(200,155,60,.6);
  border:none;
}
.chat-panel{
  position:fixed; bottom:92px; inset-inline-end:22px; z-index:70; width:320px; max-width:calc(100vw - 44px);
  background:var(--ink-2); border:1px solid var(--line); border-radius:18px; padding:18px; display:none; flex-direction:column; gap:10px;
}
.chat-panel.open{ display:flex; }
.chat-panel h4{ font-size:15px; }
.chat-panel p{ font-size:13.5px; color:var(--paper-dim); }

table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:start; padding:10px 12px; border-bottom:1px solid var(--line); }
th{ color:var(--paper-dim); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }

.tag{ display:inline-block; font-size:11px; padding:4px 10px; border-radius:999px; background:var(--gold); color:#211605; font-weight:700; }
.tag-ghost{ background:var(--ink-3); color:var(--paper-dim); border:1px solid var(--line); }
.status-badge{ font-size:12px; padding:4px 10px; border-radius:999px; font-weight:600; }
.status-active{ background:rgba(76,154,106,.18); color:var(--green); }
.status-breached{ background:rgba(200,92,60,.18); color:var(--red); }
.status-funded{ background:rgba(200,155,60,.2); color:var(--gold-soft); }

@media (max-width:860px){
  .field-row{ grid-template-columns:minmax(0,1fr); }
  .nav-links{ display:none; }
  /* The header buttons used to sit on one line that never wrapped: in languages
     with longer labels (Russian, Spanish, Kurdish, English…) that line was wider
     than the phone, so the whole page widened and its content was cut off. */
  .nav-actions{ flex-wrap:wrap; max-width:100%; gap:8px; }
  .nav-actions > *{ min-width:0; }
  .nav-actions .btn{ white-space:normal; text-align:center; }
}
@media (max-width:480px){
  .nav-actions .btn{ padding:8px 12px; font-size:13px; }
  .lang-btn{ padding:7px 11px; }
}

/* Toast notifications — a non-blocking, on-brand replacement for the
   browser's native alert(), which freezes the whole page and looks like
   an OS dialog instead of part of the site. Auto-dismisses; RTL-aware via
   inset-inline so it sits correctly in both LTR and RTL languages. */
.toast-container{
  position:fixed; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); inset-inline-end:20px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; max-width:min(380px, calc(100vw - 40px));
  pointer-events:none;
}
.toast{
  background:var(--ink-2); border:1px solid var(--line); border-inline-start:3px solid var(--gold);
  border-radius:10px; padding:13px 16px; font-size:13.5px; line-height:1.6;
  box-shadow:0 8px 24px rgba(0,0,0,.35); pointer-events:auto;
  animation:toast-in .25s ease-out;
}
.toast.toast-success{ border-inline-start-color:var(--green); }
.toast.toast-error{ border-inline-start-color:var(--red); }
.toast.toast-leaving{ animation:toast-out .2s ease-in forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes toast-out{ from{ opacity:1; } to{ opacity:0; transform:translateY(6px); } }


/* ---- Charity page: tabs and stat boxes (used only on charity.html) ---- */
.tabs{ display:flex; gap:8px; border-bottom:1px solid var(--line); }
.tab-btn{ background:none; border:none; color:var(--paper-dim); font:inherit; font-size:14px; font-weight:600; padding:10px 4px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s ease, border-color .15s ease; }
.tab-btn:hover{ color:var(--paper); }
.tab-btn.active{ color:var(--gold-soft); border-bottom-color:var(--gold); }
.charity-stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; }
.stat-box{ background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center; }
.stat-num{ font-family:var(--font-display, inherit); font-size:24px; font-weight:700; color:var(--gold-soft); }
.stat-label{ font-size:12px; color:var(--paper-dim); margin-top:4px; }

/* ---- row-item: shared list-row pattern (previously only defined inline in admin.html; needed here for charity.html's public account feed) ---- */
.row-item{ background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; font-size:13.5px; }
.row-item .top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.row-item .meta{ color:var(--paper-dim); font-size:12px; margin-top:6px; }

/* ---- mini table: shared compact table pattern (used by charity.html's monthly reports table) ---- */
table.mini{ width:100%; font-size:13px; border-collapse:collapse; }
table.mini th, table.mini td{ padding:6px 8px; text-align:start; border-bottom:1px solid var(--line); }
table.mini th{ color:var(--paper-dim); font-weight:600; }