/* ══════════════════════════════════════════════════════════════
   TOPA TRADERS — BROKERS / اختيار المسار
   ══════════════════════════════════════════════════════════════
   صفحة قصيرة جداً: مهمتها الوحيدة أن يختار الزائر منطقته
   وينتقل إلى رابط التسجيل الصحيح. لا صور، لا شعارات،
   لا أسماء شركات، لا كروت تسعير.
   ══════════════════════════════════════════════════════════════ */

/* ── كتم واجهة Kajabi الافتراضية داخل هذه الصفحة وحدها ── */
body:has(.topa-brokers) #section-header,
body:has(.topa-brokers) #section-footer,
body:has(.topa-brokers) #section-exit_pop,
body:has(.topa-brokers) #section-two_step{display:none!important}
html.tbk-host #section-header,
html.tbk-host #section-footer,
html.tbk-host #section-exit_pop,
html.tbk-host #section-two_step{display:none!important}
html.tbk-host body{background:#000!important}
html.tbk-host main{padding:0!important;margin:0!important;min-height:0!important}

.topa .topa-brokers{--tbk-ink2:#b9bfbb;--tbk-ink3:#7f8783;--tbk-rule:rgba(255,255,255,.085)}

/* الصفحة قصيرة: نثبّتها بارتفاع الشاشة فلا يطفو التذييل في الفراغ */
.topa .topa-brokers{display:flex;flex-direction:column;
  min-height:100vh;          /* احتياط للمتصفحات الأقدم */
  min-height:100svh}
.topa .tbk-main{flex:1 0 auto}

/* ══════════ ترويسة مصغّرة ══════════ */
.topa .tbk-hdr{border-bottom:1px solid var(--tbk-rule)}
.topa .tbk-hdr__in{display:flex;align-items:center;justify-content:center;height:68px}
.topa .tbk-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:12.6px;font-weight:600;letter-spacing:.14em;color:var(--w)}
.topa .tbk-brand img{width:34px;height:34px;object-fit:contain;flex:none}
.topa .tbk-brand:hover{color:var(--g)}

/* ══════════ الهيرو ══════════ */
.topa .tbk-hero{position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(40px,5.4vw,72px) clamp(26px,3vw,38px)}
.topa .tbk-hero__glow{position:absolute;pointer-events:none;
  width:min(620px,94vw);height:min(620px,94vw);top:-64%;right:50%;transform:translateX(50%);
  background:radial-gradient(circle,var(--g12),transparent 68%)}
.topa .tbk-hero__in{position:relative;z-index:2;max-width:560px;margin-inline:auto}
.topa .tbk-eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.19em;
  color:var(--g);border:1px solid var(--g30);border-radius:999px;padding:8px 16px;
  background:var(--g08)}
.topa .tbk-h1{margin-top:20px;font-size:clamp(23px,3.1vw,34px);font-weight:600;
  line-height:1.5;letter-spacing:-.014em;color:var(--w)}
.topa .tbk-hero__p{margin-top:14px;font-size:clamp(13.6px,1.5vw,15px);
  color:var(--tbk-ink2);line-height:1.95}

/* ══════════ لوحتا الاختيار ══════════ */
.topa .tbk-opts{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,24px);max-width:880px;margin-inline:auto;
  padding-block:clamp(6px,1vw,12px) clamp(30px,3.6vw,46px)}
/* منطقة واحدة فقط: تتوسّط بعرض معقول بدل أن تشغل نصف الشبكة */
.topa .tbk-opt:only-child{grid-column:1 / -1;max-width:440px;margin-inline:auto;width:100%}

.topa .tbk-opt{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,30px);border-radius:18px;
  background:linear-gradient(162deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--tbk-rule);
  transition:border-color .4s var(--ez),transform .4s var(--ez),box-shadow .4s var(--ez)}
.topa .tbk-opt::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .4s var(--ez);
  background:radial-gradient(120% 80% at 50% 0%,var(--g12),transparent 62%)}
.topa .tbk-opt:hover,.topa .tbk-opt:focus-within{
  border-color:var(--g30);transform:translateY(-3px);
  box-shadow:0 30px 62px -34px rgba(6,206,42,.42)}
.topa .tbk-opt:hover::before,.topa .tbk-opt:focus-within::before{opacity:1}

/* رمز جغرافي تجريدي — SVG خالص، لا صور ولا شعارات */
.topa .tbk-opt__mark{position:relative;z-index:2;width:46px;height:46px;
  display:grid;place-items:center;border-radius:13px;
  color:var(--g);background:var(--g08);border:1px solid var(--g22);
  transition:background .4s var(--ez),border-color .4s var(--ez)}
.topa .tbk-opt__mark svg{width:23px;height:23px}
.topa .tbk-opt:hover .tbk-opt__mark{background:var(--g14);border-color:var(--g30)}

.topa .tbk-opt__t{position:relative;z-index:2;margin-top:18px;
  font-size:clamp(16.5px,1.9vw,19px);font-weight:600;color:var(--w);line-height:1.6}
.topa .tbk-opt__d{position:relative;z-index:2;margin-top:9px;flex:1 0 auto;
  font-size:13.6px;color:var(--tbk-ink2);line-height:1.95}

/* ══════════ الزر ══════════ */
.topa .tbk-btn{position:relative;z-index:2;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:24px;min-height:54px;padding:0 24px;border-radius:12px;
  font-size:14.2px;font-weight:600;color:#001603;
  background:var(--g);border:1px solid var(--g);
  transition:background .24s,transform .2s var(--ez),box-shadow .3s var(--ez)}
.topa .tbk-btn:hover{background:var(--g-lt);box-shadow:0 16px 36px -16px rgba(6,206,42,.66)}
.topa .tbk-btn:active{transform:scale(.982)}
.topa .tbk-btn svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ez)}
.topa .tbk-btn:hover svg{transform:translateX(-5px)}
/* وميض خفيف عند الضغط — تأكيد بصري لا يؤخّر فتح الرابط */
.topa .tbk-btn.is-tapped::after{content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.3);animation:tbkTap .42s ease-out 1 both}
@keyframes tbkTap{from{opacity:1}to{opacity:0}}

/* تركيز واضح للوحة المفاتيح */
.topa .tbk-btn:focus-visible,.topa .tbk-brand:focus-visible,
.topa .tbk-wa:focus-visible,.topa .tbk-ft__in a:focus-visible{
  outline:2px solid var(--g);outline-offset:3px;border-radius:12px}

/* ══════════ الملاحظات القانونية ══════════ */
.topa .tbk-notes{max-width:640px;margin-inline:auto;
  padding-block:clamp(18px,2.2vw,26px);border-top:1px solid var(--tbk-rule)}
.topa .tbk-notes p{font-size:12.6px;line-height:2.05;color:var(--tbk-ink3);text-align:center}
.topa .tbk-notes p + p{margin-top:10px}

/* ══════════ المساعدة ══════════ */
.topa .tbk-help{max-width:640px;margin-inline:auto;text-align:center;
  padding-block:clamp(26px,3.2vw,40px) clamp(34px,4vw,52px)}
.topa .tbk-help__t{font-size:clamp(16px,1.8vw,18.5px);font-weight:600;color:var(--w)}
.topa .tbk-help__d{margin-top:10px;font-size:13.4px;color:var(--tbk-ink2);line-height:1.95}
.topa .tbk-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:20px;min-height:48px;padding:0 22px;border-radius:12px;
  font-size:13.6px;font-weight:600;color:var(--g);
  background:var(--g08);border:1px solid var(--g30);
  transition:background .26s,border-color .26s,color .26s,transform .24s var(--ez)}
.topa .tbk-wa:hover{background:var(--g14);border-color:var(--g);color:var(--g-lt);
  transform:translateY(-2px)}
.topa .tbk-wa svg{width:16px;height:16px;flex:none}

/* ══════════ التذييل ══════════ */
.topa .tbk-ft{flex:none;border-top:1px solid var(--tbk-rule);padding-block:18px}
.topa .tbk-ft__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 22px;font-size:11.8px;color:var(--tbk-ink3)}
.topa .tbk-ft__in nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.topa .tbk-ft__in a{display:inline-flex;align-items:center;min-height:40px;
  transition:color .22s}
.topa .tbk-ft__in a:hover{color:var(--g)}

/* ══════════ الحركة ══════════
   لا شيء يبدأ مخفياً. الصنف tbk-armed يضيفه JavaScript
   بعد التأكد من عمله، فتبقى الصفحة كاملة الظهور لو تعطّل. */
.topa.topa-brokers.tbk-armed [data-tbk]{opacity:0;transform:translateY(16px);
  transition:opacity .74s var(--ez),transform .74s var(--ez)}
.topa.topa-brokers.tbk-armed [data-tbk].is-in{opacity:1;transform:none}
.topa.topa-brokers.tbk-armed [data-tbk-stagger] > *{opacity:0;transform:translateY(20px);
  transition:opacity .72s var(--ez),transform .72s var(--ez)}
.topa.topa-brokers.tbk-armed [data-tbk-stagger].is-in > *{opacity:1;transform:none}
.topa.topa-brokers.tbk-armed [data-tbk-stagger].is-in > *:nth-child(1){transition-delay:.08s}
.topa.topa-brokers.tbk-armed [data-tbk-stagger].is-in > *:nth-child(2){transition-delay:.22s}
.topa.topa-brokers.tbk-armed [data-tbk-stagger].is-in > *:nth-child(3){transition-delay:.36s}
.topa.topa-brokers.tbk-armed [data-tbk-stagger].is-in > *:nth-child(4){transition-delay:.5s}

/* ══════════ التجاوب ══════════ */
@media (max-width:820px){
  .topa .tbk-opts{max-width:620px}
}
@media (max-width:680px){
  .topa .tbk-hdr__in{height:60px}
  .topa .tbk-opts{grid-template-columns:1fr;max-width:460px;gap:22px}
  .topa .tbk-opt{padding:24px 20px}
  .topa .tbk-btn{width:100%;min-height:56px;padding:0 18px}
  .topa .tbk-wa{width:100%;max-width:340px}
  .topa .tbk-ft__in{flex-direction:column;text-align:center}
}
@media (max-width:400px){
  /* الترويسة هنا لا تحمل غير الشعار، فيبقى اسم العلامة ظاهراً */
  .topa .tbk-brand{font-size:11.6px;letter-spacing:.1em;gap:8px}
  .topa .tbk-brand img{width:30px;height:30px}
  .topa .tbk-eyebrow{font-size:10.4px;letter-spacing:.15em;padding:7px 13px}
  .topa .tbk-opt__d{font-size:13.2px}
}

@media (prefers-reduced-motion:reduce){
  .topa.topa-brokers.tbk-armed [data-tbk],
  .topa.topa-brokers.tbk-armed [data-tbk-stagger] > *{opacity:1;transform:none;transition:none}
  .topa .tbk-opt,.topa .tbk-btn,.topa .tbk-wa,.topa .tbk-opt__mark{transition:none}
  .topa .tbk-opt:hover{transform:none}
  .topa .tbk-btn.is-tapped::after{animation:none}
}