/* =========================================================================
   FAISAL PREMIUM — Electronic trading CTA
   Scoped addition only. Does not restyle unrelated components.

   Header (desktop): third pill, subordinate to افتح حسابك.
   Header (≤1024px): hidden in the bar so the existing mobile header
     does not grow, wrap, or overflow. The same destination is shown
     once inside the mobile drawer (.fbc-et-drawer-link). It is NOT a
     WordPress menu item — the existing «التداول الإلكتروني» nav item
     is left untouched.
   Hero (موقع التداول الإلكتروني only): secondary CTA beside the gold
     primary. Styles live here, not inline, so Elementor text edits
     cannot strip borders, color, or the icon.
   ========================================================================= */

/* ---------- Shared monitor + candlestick icon (CSS mask, no icon library) ---------- */
.fbc-et-ico{
  display:inline-block;
  flex:0 0 auto;
  width:1em;
  height:1em;
  font-size:0;
  line-height:0;
  overflow:hidden;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='3' width='19.2' height='12.6' rx='1.8'/%3E%3Cpath d='M8 20.2h8M12 15.6v4.6'/%3E%3Cpath d='M7.2 14V8.6'/%3E%3Cpath d='M6.2 9.5h2v2.7h-2z' fill='%23000' stroke='none'/%3E%3Cpath d='M12 14V6.8'/%3E%3Cpath d='M11 8h2v3.4h-2z' fill='%23000' stroke='none'/%3E%3Cpath d='M16.8 14V7.6'/%3E%3Cpath d='M15.8 9h2v2.8h-2z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='3' width='19.2' height='12.6' rx='1.8'/%3E%3Cpath d='M8 20.2h8M12 15.6v4.6'/%3E%3Cpath d='M7.2 14V8.6'/%3E%3Cpath d='M6.2 9.5h2v2.7h-2z' fill='%23000' stroke='none'/%3E%3Cpath d='M12 14V6.8'/%3E%3Cpath d='M11 8h2v3.4h-2z' fill='%23000' stroke='none'/%3E%3Cpath d='M16.8 14V7.6'/%3E%3Cpath d='M15.8 9h2v2.8h-2z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.fbc-et-sr{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===================== HEADER BUTTON ===================== */
.header .header-actions .fbc-electronic-trading-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  box-sizing:border-box;
  height:38px;
  min-height:38px;
  padding:0 .72rem;
  border-radius:999px;
  border:1.5px solid rgba(0,104,55,.55);
  background:rgba(0,104,55,.08);
  color:#00552c;
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
  font-size:.8rem;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:none;
  flex:0 0 auto;
  max-width:none;
}
.header .header-actions .fbc-electronic-trading-btn .fbc-et-ico{
  width:15px;
  height:15px;
  color:#a8883d;
}
.header .header-actions .fbc-electronic-trading-btn .fbc-electronic-trading-btn__label{
  color:inherit;
  font:inherit;
  line-height:1;
}
.header .header-actions .fbc-electronic-trading-btn:hover{
  background:#006837;
  border-color:#006837;
  color:#fff;
  transform:translateY(-1px);
}
.header .header-actions .fbc-electronic-trading-btn:hover .fbc-et-ico{
  color:#f5d169;
}
.header .header-actions .fbc-electronic-trading-btn:active{
  transform:translateY(0);
}
.header .header-actions .fbc-electronic-trading-btn:focus-visible{
  outline:3px solid #C9A84C;
  outline-offset:2px;
}

/* ===================== DESKTOP: menu scale + adjacency =====================
   Root cause of the regression after the third button (do not reintroduce):

   A) Menu looked smaller because this file overrode top-level .menu-link to
      .88rem / .78rem and cut its padding. Theme size is .95rem, weight 600,
      padding .6rem .8rem. Those overrides are removed. Type is locked back.

   B) The large hole between the last menu item and the first CTA is
      margin-inline-start:auto on .header-actions (theme.css + enhancements.css).
      That auto margin eats every free pixel and pins the buttons to the far
      edge. A previous rule also set .nav { flex:1 1 auto }, which stretched
      the menu box. Both are cancelled. The only separation is the header
      container gap — a small, controlled space, not distributed free space.
   ========================================================================= */
@media (min-width:1025px){
  .header .container:has(.fbc-electronic-trading-btn){
    flex-wrap:nowrap;
    align-items:center;
    gap:.75rem;
    /* Room for the original menu + 3 CTAs on one line. Caps at 84rem so a
       wide monitor does not stretch the row; 100% below that avoids clipping. */
    max-width:min(100%,84rem);
    overflow:visible;
  }
  .header:has(.fbc-electronic-trading-btn){
    overflow:visible;
  }
  .header .container:has(.fbc-electronic-trading-btn) > .nav{
    flex:0 0 auto;
    width:auto;
    min-width:max-content;
  }
  .header .container:has(.fbc-electronic-trading-btn) .nav > ul{
    flex-wrap:nowrap;
    width:max-content;
    gap:.15rem;
  }
  .header .container:has(.fbc-electronic-trading-btn) .nav > ul > li{
    flex:0 0 auto;
  }
  /* Original top-level scale. Weight 700 is the main menu only — submenus stay on .menu-link defaults. */
  .header .container:has(.fbc-electronic-trading-btn) .nav > ul > li > .menu-item-wrap > .menu-link{
    font-size:.95rem;
    font-weight:700;
    line-height:1.2;
    padding:.6rem .8rem;
    white-space:nowrap;
  }
  .header .container:has(.fbc-electronic-trading-btn) > .header-actions{
    flex:0 0 auto;
    flex-wrap:nowrap;
    width:auto;
    /* Container gap stays .75rem (logo unchanged). This extra start margin is
       only the small gap between the last menu item and the first CTA.
       It is not margin:auto, so it cannot reopen the old void. */
    margin-inline-start:.85rem;
    margin-inline-end:0;
    gap:.5rem;
  }
}

/* Narrow desktop: tighten the header gap only. Menu type and padding stay original. */
@media (min-width:1025px) and (max-width:1280px){
  .header .container:has(.fbc-electronic-trading-btn){
    gap:.5rem;
    max-width:100%;
  }
  .header .container:has(.fbc-electronic-trading-btn) > .header-actions{
    gap:.4rem;
    margin-inline-start:.65rem;
  }
}

/* Tablet / mobile: keep the existing header bar exactly as it is.
   The trading destination lives once in the drawer (see below).
   !important is required only to beat .header-cta{display:inline-flex!important}. */
@media (max-width:1024px){
  .header .header-actions .fbc-electronic-trading-btn{
    display:none!important;
  }
}

/* ===================== MOBILE DRAWER DESTINATION ===================== */
#primaryNav > .fbc-et-drawer-link{
  display:none;
}
@media (max-width:1024px){
  #primaryNav > .fbc-et-drawer-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    box-sizing:border-box;
    margin:.15rem 1rem 1rem;
    min-height:48px;
    padding:.7rem 1rem;
    border-radius:999px;
    border:1.5px solid rgba(0,104,55,.55);
    background:rgba(0,104,55,.08);
    color:#00552c;
    font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    font-size:.95rem;
    font-weight:800;
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
    position:relative;
    z-index:2;
  }
  #primaryNav > .fbc-et-drawer-link .fbc-et-ico{
    width:18px;
    height:18px;
    color:#a8883d;
  }
  #primaryNav > .fbc-et-drawer-link:hover,
  #primaryNav > .fbc-et-drawer-link:focus-visible{
    background:#006837;
    border-color:#006837;
    color:#fff;
  }
  #primaryNav > .fbc-et-drawer-link:hover .fbc-et-ico,
  #primaryNav > .fbc-et-drawer-link:focus-visible .fbc-et-ico{
    color:#f5d169;
  }
  #primaryNav > .fbc-et-drawer-link:focus-visible{
    outline:3px solid #C9A84C;
    outline-offset:2px;
  }
}

/* ===================== HERO CTA — one component, both trading pages =====================
   موقع التداول الإلكتروني uses .fbc-svc.fbc-web.
   التداول الإلكتروني uses .fbc-svc.fbc-etrade.
   The previous rules were scoped to .fbc-web only, so the etrade hero button
   had the class but no border. Both pages now share these exact declarations.
   ========================================================================= */
.fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn,
.fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn,
.elementor .fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn,
.elementor .fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  box-sizing:border-box;
  margin:0;
  padding:.85rem 1.45rem;
  border-radius:999px;
  border:1.5px solid rgba(0,143,74,.9);
  background:rgba(0,104,55,.22);
  color:#fff;
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
  font-size:1rem;
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,104,55,.28);
  cursor:pointer;
  -webkit-text-fill-color:#fff;
}
.fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn .fbc-et-ico,
.fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn .fbc-et-ico,
.fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn .fbc-m.fbc-et-ico,
.fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn .fbc-m.fbc-et-ico{
  width:18px;
  height:18px;
  color:#C9A84C;
  background-color:#C9A84C;
  flex:0 0 auto;
}
.fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn:hover,
.fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn:hover,
.elementor .fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn:hover,
.elementor .fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn:hover{
  background:#006837;
  border-color:#008f4a;
  color:#fff;
  -webkit-text-fill-color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,104,55,.4);
}
.fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn:hover .fbc-et-ico,
.fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn:hover .fbc-et-ico{
  color:#f5d169;
  background-color:#f5d169;
}
.fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn:focus-visible,
.fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn:focus-visible{
  outline:3px solid #C9A84C;
  outline-offset:3px;
}

/* Keep the hero row balanced and in flow — never overlapping copy or charts. */
.fbc-svc.fbc-web .fbc-hero .fbc-cta:has(.fbc-electronic-trading-hero-btn),
.fbc-svc.fbc-etrade .fbc-hero .fbc-cta:has(.fbc-electronic-trading-hero-btn){
  align-items:center;
}
@media (max-width:640px){
  .fbc-svc.fbc-web .fbc-hero .fbc-cta:has(.fbc-electronic-trading-hero-btn),
  .fbc-svc.fbc-etrade .fbc-hero .fbc-cta:has(.fbc-electronic-trading-hero-btn){
    flex-direction:column;
    align-items:stretch;
    width:min(100%,22rem);
    margin-inline:auto;
  }
  .fbc-svc.fbc-web .fbc-hero .fbc-cta:has(.fbc-electronic-trading-hero-btn) > .fbc-btn,
  .fbc-svc.fbc-etrade .fbc-hero .fbc-cta:has(.fbc-electronic-trading-hero-btn) > .fbc-btn{
    width:100%;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .header .header-actions .fbc-electronic-trading-btn,
  .fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn,
  .fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn,
  #primaryNav > .fbc-et-drawer-link{
    transition:none;
  }
  .header .header-actions .fbc-electronic-trading-btn:hover,
  .fbc-svc.fbc-web .fbc-hero .fbc-electronic-trading-hero-btn:hover,
  .fbc-svc.fbc-etrade .fbc-hero .fbc-electronic-trading-hero-btn:hover{
    transform:none;
  }
}