/* partner.maghzeto.ir — پنل شرکای فروش (افیلیت) — derived from pro.css
   -------------------------------------------------------------------------
   A sibling of panel.css/admin.css in spirit (self-hosted fonts, same
   near-black Maghzeto ink, same peach/mint accent threads from
   docs/design-v4-editorial-CURRENT.md) but its own "room": this is the one
   Maghzeto surface a paying EXTERNAL business looks at, not an internal
   instrument — so it borrows the public site's editorial voice (Estedad
   headings over Vazirmatn body) rather than the admin/specialist panels'
   plain single-face instrument look.

   Signature element: the "voucher" card — every referral link and every
   credit-consuming action is visually a ticket stub, because that is
   literally what a credit is (one referral, one paid-for slip), and it is
   the one thing this product's own vernacular (clinics issuing referral
   slips) hands you for free. Used for the wallet balance and every
   invitation row. Rationed to those two places only. */

@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/vazirmatn-arabic.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/vazirmatn-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Estedad'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/estedad-variable.woff2') format('woff2');
}

:root {
  --paper:#FFFFFF;
  --paper-warm:#FBFAF6;
  --surface:#F2F1EC;
  --ink:#17191C;
  --ink-soft:#3A3D42;
  --muted:#6B6F76;
  --faint:#9A9DA3;
  --border:#E7E4DC;
  --border-strong:#D8D4C8;

  --room:#1B4332;      /* pro panel's own identity colour */
  --room-deep:#0E2A1F;
  --room-tint:#EAF2EC;
  --room-ink:#EAF3EE;  /* text on --room */

  --accent-bg:#FBE1D1; --accent-ink:#5D2A1A;   /* shared Maghzeto peach — attention / pending */
  --mint-bg:#DFF5E3;   --mint-ink:#14532D;     /* shared Maghzeto mint — success / completed */
  --danger:#B3261E;    --danger-bg:#FBE9E6;    --danger-ink:#7A2413;

  --radius-sm:12px; --radius-md:18px; --radius-lg:26px;
  --shadow-card:0 1px 2px rgba(23,25,28,.04), 0 8px 24px -12px rgba(23,25,28,.10);
  --shadow-pop:0 12px 32px -8px rgba(14,42,31,.28);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; background:var(--paper-warm); color:var(--ink);
  font-family:'Vazirmatn', Tahoma, system-ui, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* belt-and-braces: no surface on this panel should ever cause page-level horizontal scroll */
}
h1,h2,h3,.font-display { font-family:'Estedad','Vazirmatn',Tahoma,sans-serif; font-weight:700; letter-spacing:-.01em; }
a { color:var(--room); text-underline-offset:3px; }
:focus-visible { outline:2.5px solid var(--room); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------------------------------------------------------------- shell */
.app-shell { display:flex; min-height:100vh; }
.app-side {
  width:248px; flex-shrink:0; background:linear-gradient(175deg, var(--room) 0%, var(--room-deep) 100%);
  color:var(--room-ink); padding:var(--space-5) var(--space-4); position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
}
.app-side .brand-mark { display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-2) var(--space-6); }
.app-side .brand-mark img { width:30px; height:30px; filter:brightness(0) invert(1); opacity:.95; }
.app-side .brand-mark span { font-family:'Estedad','Vazirmatn',sans-serif; font-weight:700; font-size:16px; }
.app-side .brand-mark small { display:block; font-family:'Vazirmatn',sans-serif; font-weight:400; font-size:11px; opacity:.62; margin-top:1px; }
.app-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.app-nav a {
  display:flex; align-items:center; gap:var(--space-3); padding:11px var(--space-3); border-radius:var(--radius-sm);
  color:var(--room-ink); text-decoration:none; font-size:14.5px; opacity:.78; transition:background .15s ease, opacity .15s ease;
}
.app-nav a svg { flex-shrink:0; opacity:.9; }
.app-nav a:hover { background:rgba(255,255,255,.08); opacity:1; }
.app-nav a.active { background:rgba(255,255,255,.14); opacity:1; font-weight:600; }
.app-side .side-foot { padding-top:var(--space-4); border-top:1px solid rgba(255,255,255,.14); }
.app-side .side-foot a { opacity:.62; font-size:13px; }
.app-main { flex:1; min-width:0; padding:var(--space-6) var(--space-7); max-width:980px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap; }
.page-head h1 { font-size:26px; margin:0 0 4px; }
.page-head .lede { color:var(--muted); font-size:14.5px; margin:0; }

/* ---------------------------------------------------------------- cards */
.card { background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); margin-bottom:var(--space-4); box-shadow:var(--shadow-card); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.card-head h2 { font-size:17px; margin:0; }
.card-head .hint { color:var(--muted); font-size:13px; }
.muted { color:var(--muted); font-size:14px; }
.faint { color:var(--faint); font-size:12.5px; }

/* hero stat (wallet balance) */
.stat-hero { display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.stat-hero .stat-figure { display:flex; align-items:baseline; gap:8px; }
.stat-hero .stat-figure b { font-family:'Estedad',sans-serif; font-size:44px; line-height:1; font-variant-numeric:tabular-nums; }
.stat-hero .stat-figure span { color:var(--muted); font-size:14px; }
.stat-hero .stat-actions { display:flex; gap:var(--space-2); margin-inline-start:auto; flex-wrap:wrap; }

/* ---------------------------------------------------------------- voucher (signature component) */
.voucher {
  position:relative; display:flex; align-items:stretch; background:var(--paper);
  border:1px solid var(--border); border-radius:var(--radius-md); overflow:visible; margin-bottom:var(--space-3);
  box-shadow:var(--shadow-card);
}
.voucher .voucher-main { flex:1; min-width:0; padding:var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:6px; }
.voucher .voucher-main .v-title { font-weight:700; font-size:15px; }
.voucher .voucher-main .v-sub { color:var(--muted); font-size:13px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.voucher .voucher-stub {
  width:132px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:var(--space-3); position:relative; border-inline-start:2px dashed var(--border-strong);
  text-align:center;
}
.voucher .voucher-stub::before, .voucher .voucher-stub::after {
  content:""; position:absolute; inset-inline-start:-9px; width:18px; height:18px; border-radius:50%; background:var(--paper-warm);
  border:1px solid var(--border);
}
.voucher .voucher-stub::before { top:-9px; }
.voucher .voucher-stub::after { bottom:-9px; }
.voucher .voucher-stub .v-stub-label { font-size:11px; color:var(--muted); }
.voucher .voucher-stub .v-stub-value { font-family:'Estedad',sans-serif; font-weight:700; font-size:20px; }
.voucher.is-cancelled { opacity:.55; }
.voucher .voucher-link { direction:ltr; text-align:left; font-size:12px; background:var(--surface); border-radius:8px; padding:6px 10px; color:var(--ink-soft); display:inline-block; max-width:100%; overflow-wrap:anywhere; }
code.token-link { overflow-wrap:anywhere; max-width:100%; }

/* ---------------------------------------------------------------- buttons */
.btn {
  font-family:inherit; font-size:14.5px; font-weight:600; border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; background:var(--ink); color:#fff; min-height:44px;
  transition:opacity .15s ease, transform .1s ease;
}
.btn:hover { opacity:.88; }
.btn:active { transform:scale(.98); }
.btn[disabled] { opacity:.4; cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-room { background:var(--room); color:var(--room-ink); }
.btn-danger { background:transparent; color:var(--danger); border:1.5px solid var(--danger); }
.btn-sm { padding:8px 16px; font-size:13px; min-height:36px; }
.btn-block { width:100%; }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom:var(--space-4); }
.field label { display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--ink-soft); }
.field .field-hint { font-size:12.5px; color:var(--muted); margin-top:5px; }
.field .field-error { font-size:12.5px; color:var(--danger); margin-top:5px; }
input, select {
  font-family:inherit; font-size:15px; padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  width:100%; background:var(--paper); color:var(--ink); min-height:48px;
}
input::placeholder { color:var(--faint); }
input:focus, select:focus { outline:none; border-color:var(--room); box-shadow:0 0 0 3px var(--room-tint); }
input:invalid[data-touched] { border-color:var(--danger); }

/* ---------------------------------------------------------------- badges & alerts */
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; background:var(--surface); color:var(--muted); }
.badge-pending { background:var(--accent-bg); color:var(--accent-ink); }
.badge-completed { background:var(--mint-bg); color:var(--mint-ink); }
.badge-cancelled { background:var(--surface); color:var(--faint); }
.alert { border-radius:var(--radius-sm); padding:13px 18px; margin-bottom:var(--space-4); font-size:14px; display:flex; gap:10px; align-items:flex-start; }
.alert-error { background:var(--danger-bg); color:var(--danger-ink); }
.alert-ok { background:var(--mint-bg); color:var(--mint-ink); }
.alert svg { flex-shrink:0; margin-top:2px; }

/* ---------------------------------------------------------------- table */
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:right; padding:12px 10px; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-weight:600; font-size:12.5px; text-transform:none; }
tbody tr:last-child td { border-bottom:none; }
td.num, th.num { font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- empty state */
.empty-state { text-align:center; padding:var(--space-7) var(--space-4); color:var(--muted); }
.empty-state svg { opacity:.5; margin-bottom:var(--space-3); }
.empty-state p { margin:0 0 var(--space-3); }

/* ---------------------------------------------------------------- auth pages */
.auth-shell {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-5);
  background:
    radial-gradient(560px 420px at 82% 8%, var(--room-tint) 0%, transparent 65%),
    radial-gradient(480px 380px at 10% 95%, var(--accent-bg) 0%, transparent 60%),
    var(--paper-warm);
  position:relative; overflow:hidden;
}
.auth-shell::before {
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(circle, var(--border-strong) 1px, transparent 1px);
  background-size:22px 22px; mask-image:radial-gradient(circle at 50% 30%, black, transparent 72%);
}
.auth-card { position:relative; width:100%; max-width:408px; background:var(--paper); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6) var(--space-5); box-shadow:var(--shadow-pop); }
.auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:var(--space-5); }
.auth-brand img { width:34px; height:34px; }
.auth-brand b { font-family:'Estedad',sans-serif; font-size:16px; }
.auth-brand span { display:block; font-size:11.5px; color:var(--muted); margin-top:1px; }
.auth-card h1 { font-size:21px; margin:0 0 6px; }
.auth-card .auth-lede { color:var(--muted); font-size:14px; margin:0 0 var(--space-5); }
.auth-foot { margin-top:var(--space-4); text-align:center; font-size:13.5px; color:var(--muted); }
.auth-shell .auth-legal { position:absolute; bottom:var(--space-4); font-size:12px; color:var(--faint); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .app-shell { flex-direction:column; }
  .app-side { width:100%; height:auto; position:sticky; top:0; z-index:20; padding:var(--space-3) var(--space-4);
    flex-direction:row; align-items:center; }
  .app-side .brand-mark { padding:0; margin-inline-end:var(--space-3); flex-shrink:0; }
  .app-side .brand-mark span { display:none; } /* wordmark text drops on the mobile top bar — the icon alone is enough at this width */
  .app-nav { flex-direction:row; overflow-x:auto; flex:1; min-width:0; gap:4px; -webkit-overflow-scrolling:touch; }
  .app-nav a { flex-direction:column; gap:3px; font-size:11.5px; padding:8px 10px; white-space:nowrap; flex-shrink:0; }
  .app-side .side-foot { display:none; }
  .app-main { padding:var(--space-4); max-width:100%; }
  .voucher { flex-direction:column; }
  .voucher .voucher-stub { width:100%; border-inline-start:none; border-top:2px dashed var(--border-strong); flex-direction:row; justify-content:space-between; padding:10px var(--space-4); }
  .voucher .voucher-stub::before, .voucher .voucher-stub::after { inset-inline-start:auto; top:-9px; }
  .voucher .voucher-stub::before { right:16px; }
  .voucher .voucher-stub::after { left:16px; bottom:auto; top:-9px; }
  .stat-hero .stat-actions { margin-inline-start:0; width:100%; }
  .stat-hero .stat-actions .btn { flex:1; }
}

/* ===== partner.maghzeto.ir additions (everything below is specific to the affiliate panel) ===== */
.auth-shell--wide { align-items:flex-start; padding-top:var(--space-6); overflow:auto; }
.auth-card--wide { max-width:720px; margin-bottom:var(--space-6); }
.auth-foot.faint { font-size:12.5px; }
.app-side .side-foot .who { color:var(--room-ink); font-size:13.5px; margin-bottom:var(--space-2); opacity:.92; }
.app-side .side-foot .who small { display:block; opacity:.6; font-size:12px; margin-top:2px; }
.note { font-size:13px; line-height:2; margin:var(--space-3) 0 0; }
.code-chip { background:var(--room-tint); color:var(--room); padding:2px 10px; border-radius:999px; font-weight:700; letter-spacing:.06em; }
.table-wrap { overflow-x:auto; }
.table-wrap td { white-space:nowrap; }

.terms-box { max-height:340px; overflow:auto; background:var(--paper-warm); border:1px solid var(--border); border-radius:var(--radius-md); padding:6px 20px 14px; margin:0 0 var(--space-4); }
.terms-box--open { max-height:none; background:transparent; border:0; padding:0; }
.terms-box:focus-visible { outline:3px solid var(--accent-bg); outline-offset:2px; }
.terms-item { padding:12px 0; border-bottom:1px dashed var(--border); }
.terms-item:last-of-type { border-bottom:0; }
.terms-item h3 { display:flex; align-items:center; gap:10px; margin:0 0 4px; font-size:15px; }
.terms-item h3 span { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--mint-bg); color:var(--mint-ink); font-size:12px; flex:none; }
.terms-item p { margin:0; color:var(--ink-soft); line-height:2; font-size:14px; }

.consent { display:flex; align-items:flex-start; gap:12px; margin:0 0 var(--space-4); line-height:1.95; font-size:14px; cursor:pointer; }
.consent input { flex:none; width:22px; height:22px; margin-top:4px; accent-color:var(--room); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

.link-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; margin:10px 0; }
.link-row > span { font-size:13px; color:var(--muted); white-space:nowrap; }
.link-row input { min-width:0; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper-warm); color:var(--ink); font:inherit; font-size:13.5px; }
@media (max-width:640px) { .link-row { grid-template-columns:1fr auto; } .link-row > span { grid-column:1 / -1; } }

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--space-3); margin-bottom:var(--space-4); }
.kpi { padding:16px; border-radius:var(--radius-md); background:var(--paper); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.kpi small { display:block; color:var(--muted); font-size:12.5px; margin-bottom:4px; }
.kpi strong { font-family:'Estedad','Vazirmatn',sans-serif; font-size:21px; font-variant-numeric:tabular-nums; }
.kpi--accent { background:var(--mint-bg); border-color:transparent; }
.kpi--accent small, .kpi--accent strong { color:var(--mint-ink); }
.tier { line-height:2.1; font-size:14.5px; }
.tier .bar { height:8px; border-radius:999px; background:var(--border); overflow:hidden; margin-top:8px; }
.tier .bar i { display:block; height:100%; background:var(--room); border-radius:inherit; }

.stack-form { max-width:520px; }
.stack-form input:not([type=checkbox]) { width:100%; }

.kit-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-4); align-items:start; }
.kit-card { margin:0; padding:12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--paper-warm); }
.kit-card img { display:block; width:100%; height:auto; border-radius:12px; }
.kit-card figcaption { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:10px; font-size:13.5px; }
.kit-card figcaption .btn { margin-inline-start:auto; }
.caption { margin:0 0 var(--space-4); }
.caption-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.caption textarea { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper-warm); color:var(--ink); font:inherit; font-size:14px; line-height:2; resize:vertical; }
.rules { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-3); }
.rules-col { padding:14px 18px; border-radius:var(--radius-md); }
.rules-col h4 { margin:0 0 6px; }
.rules-col ul { margin:0; padding-inline-start:20px; line-height:2; font-size:14px; }
.rules-ok { background:var(--mint-bg); color:var(--mint-ink); }
.rules-no { background:var(--accent-bg); color:var(--accent-ink); }