/* ================= Tokens — Bareeq Affiliate (Green Dark Identity) ================= */
:root{
  /* خلفية عامة */
  --bg:#0B5A1E;              /* أخضر داكن مريح */
  --fg:#E9FFE5;              /* نص أساسي فاتح مائل للأخضر */
  --muted:#9BC6A1;           /* نص ثانوي */

  /* ألواح وبطاقات */
  --panel:#0E6423;           /* بطاقات رئيسية */
  --panel-2:#11802A;         /* هيرو/بلوكات مميزة */
  --border:rgba(0,0,0,0.38); /* حدود أغمق شوية عشان توضح على الأخضر */
  --soft:rgba(232,255,214,.08);  /* خلفيات خفيفة */
  --soft-2:rgba(232,255,214,.04);

  /* البراند */
  --brand:#0EDC3A;           /* أخضر فاقع (الأساسي) */
  --brand-2:#B5FF3C;         /* لايم للـ CTA القوية */
  --accent:#B5FF3C;          /* تأكيدات ونقط حالة */

  /* ظل وحواف */
  --shadow:0 12px 30px rgba(0,0,0,.55);
  --radius:18px; 
  --radius-sm:12px;
  --ring:0 0 0 3px rgba(181,255,60,.38); /* فوكس واضح */

  --gap:18px;
}

/* ================= Base ================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
:focus{outline:none; box-shadow:var(--ring)}
img{max-width:100%; height:auto; display:block}
.container{max-width:1200px; margin-inline:auto; padding:24px; padding-bottom:64px}
.grid{display:grid; gap:var(--gap)}
.grid.three{grid-template-columns:repeat(3,1fr)}

/* أزرار */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--brand); color:#0B3010; font-weight:800; cursor:pointer;
  transition:transform .15s ease, filter .15s ease, background .2s ease;
  box-shadow:var(--shadow); min-height:44px
}
.btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.05) brightness(1.03);
  background:var(--brand-2, #B5FF3C);
}
.btn.secondary{
  background:transparent;
  color:var(--brand-2);
  border:1.5px solid var(--brand-2);
}
.btn.ghost{
  background:transparent;
  color:var(--fg);
  border:1px solid var(--border);
}
.btn:disabled{opacity:.6; cursor:not-allowed}

/* شارات / Chips */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:var(--soft);
  color:var(--brand-2);
  font-weight:800;
  border:1px solid var(--border);
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
}

/* كروت ونصوص */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.kicker{letter-spacing:.5px; color:var(--muted); font-weight:800; font-size:13px}
.title-xl{font-size:clamp(26px,4.8vw,44px); line-height:1.2; font-weight:900; letter-spacing:-.3px}
.title-lg{font-size:clamp(20px,3vw,28px); font-weight:900}
.title-md{font-size:18px; font-weight:800}
.muted{color:var(--muted)}
.note{font-size:12.5px; color:var(--muted)}
.money{font-weight:900; font-size:clamp(18px,3vw,28px)}

/* إحصائيات */
.stat{
  display:flex; flex-direction:column; gap:6px;
  padding:14px; border:1px dashed var(--border);
  border-radius:14px;
  background:var(--soft-2);
  min-height:84px
}
.stat .label{color:var(--muted); font-size:13px}
.stat .value{font-weight:900; font-size:clamp(18px,3vw,26px)}
.stat .value.sm{font-size:18px}

/* حقول فورم */
.input{display:flex; flex-direction:column; gap:6px}
.input input,
.input textarea,
.input select{
  padding:12px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--fg);
}
.input textarea{resize:vertical}
.input input:focus,
.input textarea:focus,
.input select:focus{
  box-shadow:var(--ring);
  border-color:var(--brand);
}

/* جريد وفواصل */
.form-grid{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
.row{display:flex; gap:10px; align-items:center}
.wrap{flex-wrap:wrap}
.center{justify-content:center; width:100%}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mb8{margin-bottom:8px}
.two-col{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gap)}
.overflow{overflow:auto}

/* جدول */
.table{width:100%; border-collapse:collapse; min-width:520px}
.table th,.table td{
  border-bottom:1px dashed var(--border);
  padding:10px 8px;
  text-align:center;
  white-space:nowrap;
}
.table th{font-weight:900}

/* Hero */
.hero{padding:18px 0 10px}
.heroWrap{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
.heroBlock{
  border:1px solid var(--border); border-radius:20px; padding:26px;
  background:
    linear-gradient(180deg, rgba(14,100,35,.82), transparent),
    var(--panel-2);
}
.brandClr{color:var(--brand-2)}
.ok{display:inline-flex; align-items:center; gap:8px}
.ok::before{
  content:"✓";
  display:inline-grid; place-items:center;
  width:22px; height:22px;
  border-radius:8px;
  background:var(--soft);
  border:1px solid var(--border);
  font-weight:900;
}

/* حالات */
.status{
  padding:4px 8px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border:1px solid var(--border)
}
.paid{background:rgba(22,163,74,.16); color:#4ade80}
.pending{background:rgba(250,204,21,.18); color:#facc15}
.processing{background:rgba(59,130,246,.18); color:#60a5fa}
.rejected{background:rgba(239,68,68,.16); color:#f87171}

/* Ticker */
.ticker{
  position:fixed; inset:auto 12px 12px 12px; z-index:60;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:14px;
  box-shadow:var(--shadow)
}
.ticker .dot{
  width:8px; height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(181,255,60,.18)
}
.ticker .close{
  margin-inline-start:auto;
  border:1px solid var(--border);
  background:transparent;
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer
}
.ticker[hidden]{display:none}

/* Header / Footer / Links */
.nav{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:900}
.input#refLink{flex:1}
.bullets{margin:0; padding-inline-start:18px; line-height:1.9}
.plan-cta{grid-template-columns:1.1fr .9fr; align-items:center}
.btns-end{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.cta{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.hdr{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(6px); background:rgba(11,90,30,.88)}
.hdr-in{grid-template-columns:1fr auto; align-items:center}
.ftr{margin-top:18px}
.ftr-in{grid-template-columns:1fr auto; align-items:center}
.links{display:flex; gap:8px; flex-wrap:wrap}

/* Responsive & Motion */
@media (max-width:1080px){
  .heroWrap{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .plan-cta{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--gap:14px}
  .container{padding:16px}
  .grid.compact{gap:10px}
  .heroBlock{padding:18px}
  .table{min-width:unset}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* تحسينة بسيطة لزر ghost على الخلفية الداكنة */
.btn.ghost:hover{ background: rgba(255,255,255,.04) }

/* ======== segmented control لاختيار المنصّة ======== */
.seg {
  display:inline-flex;
  gap:6px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
}
.seg .seg-btn{
  min-height:36px;
  padding:8px 12px;
}
.seg .seg-btn.is-active{
  border-color: var(--brand-2);
  box-shadow: var(--ring);
}