/* Shared UI kit (core layer): tokens, buttons, pills, sheets, toasts, skeletons. Campaign look lives in campaign.css. */
/* IRANSansX (FaNum), licensed by the owner. To swap in the official files, replace the four WOFF2 files in
   /assets/fonts/ keeping the same names; nothing else changes. */
@font-face { font-family: 'IRANSansXFaNum'; src: url('/assets/fonts/IRANSansXFaNum-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IRANSansXFaNum'; src: url('/assets/fonts/IRANSansXFaNum-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IRANSansXFaNum'; src: url('/assets/fonts/IRANSansXFaNum-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IRANSansXFaNum'; src: url('/assets/fonts/IRANSansXFaNum-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
:root {
  --bg-0: #24150B; --bg-1: #160C06; --bg-2: #0A0604;
  --text: #F7EAD0; --text-2: #E3D3B6; --muted: #A89272;
  --gold: #F6C453; --gold-2: #E9B44C; --gold-hi: #FFE38E; --ink: #2A1606;
  --warn: #FBBF5A; --ok: #7BD88F; --err: #FF8A7A;
  --radius: 16px; --radius-lg: 20px;
  --font: 'IRANSansXFaNum', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --topbar-h: 56px;
  --gutter: 24px; /* side padding of the page content (sections use 24px) */
  --section-gap: 72px; /* between the last content of a club section and what follows */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 8px); }
html, body { margin: 0; padding: 0; background: var(--bg-2); }
body {
  font-family: var(--font); color: var(--text); min-height: 100vh; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 8px; }
.skip-link { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--gold); color: var(--ink); border-radius: 10px; }
.skip-link:focus { top: 8px; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* Buttons (design v2: inset 1px ring instead of a border) */
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: var(--radius);
  font-size: 18px; font-weight: 900; cursor: pointer; text-align: center; user-select: none;
  transition: transform .12s ease, filter .2s ease, opacity .2s ease; border: 0; padding: 0 16px;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--gold {
  color: var(--ink); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFE38E 0%, #EBB03A 55%, #B9771B 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 191, .7), 0 8px 24px rgba(255, 154, 60, .45);
}
.btn--gold:hover { color: var(--ink); filter: brightness(1.06); }
.btn--outline { background: rgba(246, 196, 83, .06); box-shadow: inset 0 0 0 1.5px rgba(246, 196, 83, .6); color: var(--gold); font-size: 16px; font-weight: 700; }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(246, 196, 83, .35); color: var(--gold); font-size: 14px; }
.btn--sm { height: 36px; font-size: 13px; border-radius: 10px; padding: 0 12px; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled {
  cursor: not-allowed; filter: grayscale(.85) brightness(.7); box-shadow: none; transform: none;
}
.btn[aria-disabled="true"]::before, .btn:disabled::before { animation: none; opacity: 0; }
.btn[aria-busy="true"] { cursor: progress; }

/* Shine sweep (design `shimmer`): painted under the label (z-index -1 inside the isolated button), so the code
   can keep replacing the button text. 3.2s loop: sweeps during the first 45%, then rests. */
.btn--gold::before, .shine::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -110px; width: 70px; pointer-events: none;
  transform: skewX(-20deg); opacity: 0;
  background: linear-gradient(90deg, rgba(255, 248, 220, 0) 0%, rgba(255, 248, 220, .35) 35%, rgba(255, 255, 255, .75) 50%, rgba(255, 248, 220, .35) 65%, rgba(255, 248, 220, 0) 100%);
  animation: shine 3.2s cubic-bezier(.45, 0, .25, 1) infinite;
}
.shine { position: relative; overflow: hidden; isolation: isolate; }
.shine::before { left: -50px; width: 26px; background: linear-gradient(90deg, rgba(255, 248, 220, 0), rgba(255, 255, 255, .7), rgba(255, 248, 220, 0)); animation-name: shine-sm; }
@keyframes shine { 0% { left: -110px; opacity: 0; } 8% { opacity: 1; } 45% { left: calc(100% + 50px); opacity: 1; } 100% { left: calc(100% + 50px); opacity: 0; } }
@keyframes shine-sm { 0% { left: -50px; opacity: 0; } 8% { opacity: 1; } 45% { left: calc(100% + 30px); opacity: 1; } 100% { left: calc(100% + 30px); opacity: 0; } }

/* Icon tile (design v2: inset ring, outer glow, inner top light) */
.ibox {
  position: relative; flex: none; display: block; overflow: hidden;
  background: linear-gradient(180deg, #5A3A18, #22140A);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 121, .8), 0 0 14px rgba(246, 166, 60, .3), inset 0 2px 4px rgba(255, 226, 154, .25);
}
.ibox img { position: absolute; inset: 0; display: block; }
.ibox--48 { width: 48px; height: 48px; border-radius: 14.4px; } .ibox--48 img { width: 48px; height: 48px; }
.ibox--46 { width: 46px; height: 46px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 216, 121, .8), 0 0 16px rgba(246, 166, 60, .35), inset 0 2px 4px rgba(255, 226, 154, .25); } .ibox--46 img { width: 46px; height: 46px; }
.ibox--44 { width: 44px; height: 44px; border-radius: 13.2px; } .ibox--44 img { width: 44px; height: 44px; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(246, 196, 83, .45); background: rgba(20, 11, 5, .7); color: var(--gold); font-size: 13px; font-weight: 700; cursor: pointer;
}
.pill--login { background: linear-gradient(180deg, #FFE38E 0%, #EBB03A 55%, #B9771B 100%); color: var(--ink); border-color: rgba(255, 241, 191, .7); font-weight: 900; }
.pill__label { color: var(--muted); font-weight: 500; }
.pill__value { font-size: 15px; font-weight: 900; color: var(--gold-hi); unicode-bidi: isolate; }
.pill--loading { cursor: default; width: 56px; justify-content: center; }

.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(246, 196, 83, .25); border-top-color: var(--gold); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Banners */
.banner { position: sticky; top: 0; z-index: 60; padding: 10px 16px; text-align: center; font-size: 13px; font-weight: 600; }
.banner--offline { background: #5A2A10; color: #FFE3C4; }
.banner--maintenance { background: #6B3B0E; color: #FFF0B8; }
.banner--dev { position: static; background: #1E3A2A; color: #CFF5DC; font-size: 12px; padding: 6px; }

/* Toasts */
.toasts { position: fixed; z-index: 90; top: calc(var(--topbar-h) + 8px); left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: #2A190D; border: 1px solid rgba(246, 196, 83, .35); box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  font-size: 14px; line-height: 22px; color: var(--text); animation: toast-in .2s ease-out;
}
.toast--success { border-color: rgba(123, 216, 143, .5); }
.toast--error { border-color: rgba(255, 138, 122, .6); }
.toast__msg { flex: 1; }
.toast__link { font-weight: 700; white-space: nowrap; }
.toast__close { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; }
/* Confirmation toast (Figma «Master Toast Notification»): close on the left, text, check, green bar on the right. */
.toast--confirm { direction: ltr; width: min(358px, 100%); align-self: center; gap: 16px; padding: 6px; }
.toast--confirm .toast__msg { direction: rtl; min-width: 0; text-align: right; }
.toast--confirm .toast__close { order: -1; flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; }
.toast__check { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 4px; box-sizing: content-box; border-radius: 4px; background: rgba(232, 248, 240, .1); }
.toast__bar { flex: none; align-self: stretch; width: 4px; border-radius: 100px; background: var(--ok); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* Overlays: centered modal and bottom sheet */
.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(5, 3, 2, .72); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .18s ease-out; }
.overlay--sheet { align-items: flex-end; padding: 0; }
@keyframes fade { from { opacity: 0; } }
.modal, .sheet {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  border-radius: var(--radius-lg); border: 1px solid transparent; padding: 24px 18px 20px;
  background: linear-gradient(180deg, #33210F, #150C06) padding-box, linear-gradient(180deg, rgba(255, 216, 121, .7), rgba(246, 196, 83, .1)) border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
}
.sheet { border-radius: 24px 24px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); animation: sheet-in .22s ease-out; }
@keyframes sheet-in { from { transform: translateY(40px); opacity: .4; } }
.modal__close { position: absolute; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(246, 196, 83, .25); background: rgba(0, 0, 0, .3); color: var(--gold); font-size: 22px; line-height: 1; cursor: pointer; }
.sheet__title, .modal__title { margin: 0 0 8px; font-size: 20px; font-weight: 900; color: var(--gold); }
.sheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sheet__head .sheet__title { margin: 0; }
.sheet__desc { margin: 0 0 16px; color: var(--text-2); font-size: 14px; line-height: 24px; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.form__label { font-size: 13px; color: var(--muted); }
.form__input {
  height: 52px; border-radius: 12px; border: 1px solid rgba(246, 196, 83, .3); background: #1E120A; color: var(--text);
  font: inherit; font-size: 17px; padding: 0 14px; text-align: left;
}
.form__input:focus { border-color: var(--gold); }
.form__input--code { letter-spacing: 10px; text-align: center; font-size: 22px; font-weight: 900; }
.form__error { margin: 0; min-height: 20px; color: var(--err); font-size: 13px; }
.form__hint { margin: 0; color: var(--text-2); font-size: 14px; }
.form__link { background: none; border: 0; color: var(--gold); font-size: 14px; font-weight: 600; padding: 6px 0; cursor: pointer; align-self: flex-start; }
.form__link--center { align-self: center; }
.form__link:disabled { color: var(--muted); cursor: default; }
.form__terms { align-self: center; color: var(--muted); font-size: 12px; }

/* Skeletons */
.skeleton { position: relative; overflow: hidden; background: rgba(246, 196, 83, .07); border-radius: 10px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255, 226, 154, .08), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(-100%); } }

.noscript { text-align: center; padding: 16px; color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn--gold::before, .shine::before { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}