/* =============================== */
/*  PRO v2 styling (FINAL RTL/EN)  */
/* =============================== */

:root{
  --brand:#0b57cf;
  --ink:#0b1b2b;
  --muted:#5e6c7a;
  --bg:#f7fafc;
  --ring:rgba(11,87,207,.25);
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  max-width:100%; overflow-x:hidden;
}
html[lang="ar"] body{
  font-family:'Tajawal',Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }
.small{ font-size:.85rem }
.muted{ color:var(--muted) }
.container{ width:min(1160px,92vw); margin-inline:auto }

/* ================= Header / Nav ================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid #e8eef6;
  overflow:visible; /* منع أي قص داخل الهيدر */
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  padding:10px 0;
}
.brand{ display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none }
.logo{ width:40px; height:40px }
.brand-title{ font-weight:800 }
.brand-sub{ font-size:12px; color:#47607b }
.brand .moic-inline{ height:40px; width:auto; object-fit:contain; margin-inline-start:8px }

/* Desktop nav (نفس شكل الحبوب) */
.nav{
  margin-inline-start:auto;
  display:flex; gap:18px; align-items:center;
}
.site-header .nav a{
  color:#0a1b4d; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center;
  padding:.5rem .7rem;
  border:1px solid #cfe0f7;
  border-radius:999px; background:#fff;
}
.site-header .nav a:hover{ color:#083c99 }

/* لا نستخدم محوّل لغات – إن وُجد نخفيه */
.lang-switch{ display:none !important }

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.05rem; border-radius:12px;
  border:1px solid #cfe0f7; font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.btn-nav{ background:#fff }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff }
.btn-outline{ background:#fff; color:#0a273f }
.btn-full{ width:100% }

/* ================= Hero ================= */
.hero{ position:relative; color:#fff }
.hero-harbour{
  position:relative; min-height:68vh;
  background:#061a30 url('assets/financial-harbour.png') center bottom/contain no-repeat;
  background-attachment:scroll;
}
.hero .backdrop{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,26,48,.6), rgba(6,26,48,.75));
}
.hero-grid{
  position:relative; display:grid; grid-template-columns:1.1fr .9fr;
  gap:32px; align-items:stretch; padding:56px 0;
}
.hero-copy h1{ font-size:44px; line-height:1.08; margin:8px 0 10px }
.hero-sub{ font-weight:600 }
.lead{ margin:8px 0 18px; color:#e6f0ff }
.pills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.pill{
  background:#ffffff22; border:1px solid #ffffff33; color:#fff;
  border-radius:999px; padding:.4rem .7rem; font-weight:700
}
.glass{
  backdrop-filter:blur(6px) saturate(1.2);
  background:linear-gradient(#ffffffee,#ffffffee);
  border:1px solid #e6eef6; border-radius:16px; padding:18px; color:#0b1b2b
}

/* ======== Make hero form text dark (always) ======== */
.hero .glass, .hero .glass *{ color:#0b1b2b !important }
.hero .glass input,
.hero .glass select,
.hero .glass textarea{
  background:#fff !important; border:1px solid #cfd7e3 !important; color:#0b1b2b !important;
}
.hero .glass input::placeholder,
.hero .glass textarea::placeholder{ color:#556779 !important; opacity:1 !重要 }
.hero .glass .helper{ color:#334155 !important }

/* ================= Forms ================= */
.field{ display:flex; flex-direction:column; gap:6px; margin:8px 0 }
.field input,.field select,.field textarea{
  padding:.8rem .9rem; border-radius:12px; border:1px solid #d6e3f4; outline:none; background:#fff;
  font-size:16px; /* يمنع زوم iOS */
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)
}
.field.two{ display:grid; grid-template-columns:.6fr 1fr; gap:10px }
.helper{ font-size:.8rem; color:#5b6b7c; margin-top:6px }

/* ================= Sections / Cards ================= */
.section{ padding:56px 0 }
.alt{ background:#ffffff }
.grid.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.card{ border:1px solid #e6eef6; border-radius:16px; padding:18px; background:#fff }
.card.dark{ background:#0f2341; color:#e6f0ff; border-color:transparent }
.card.accent{ border-color:#b9d4ff; background:#f6faff }
.grid.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.feature{ border:1px solid #e6eef6; border-radius:14px; background:#fff; padding:16px }

.timeline{ list-style:none; display:grid; gap:18px; margin:0; padding:0 }
.timeline li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  background:#fff; border:1px solid #e6eef6; border-radius:14px; padding:14px
}
.t-badge{ font-weight:900; color:#6ba0ff }

/* ================= Footer ================= */
.footer{ border-top:1px solid #e8eef6; background:#061629; color:#cfe0f7 }
.foot-grid{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 }
.left{ display:flex; gap:12px; align-items:center }
.right{ display:flex; gap:16px; flex-wrap:wrap }
.footer-accredit{ display:flex; justify-content:center; align-items:center; text-align:center; margin-top:8px }
.accredit-text{ font-weight:800 }

/* ================= WhatsApp ================= */
.float-wa{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(2,12,24,.25); z-index:12000;
}
.float-wa img{ width:28px; height:28px }

/* ================= Misc ================= */
.moic-logo{ max-width:220px; height:auto }
@media (max-width:980px){ .moic-logo{ max-width:150px } }

/* ================= Responsive ================= */

/* Mobile / Tablet */
@media (max-width:980px){
  /* ترتيب الهيدر: شعار ثم القائمة */
  .header-inner{
    display:grid !important;
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "nav";
    align-items:center; gap:10px;
    padding-block:10px;
    padding-inline:calc(12px + env(safe-area-inset-left)) calc(12px + env(safe-area-inset-right));
    box-sizing:border-box;
    overflow:visible !important;
  }
  .brand{ grid-area:brand }
  .brand-sub, .moic-inline{ display:none }

  /* ===== NAV: فل-بليد + تمرير أفقي (بدون قص) ===== */
  .site-header .nav{
    grid-area:nav;
    display:flex !important;
    gap:10px;
    flex-wrap:nowrap;              /* شريط واحد قابل للتمرير */
    width:100vw;
    margin-inline:calc(50% - 50vw); /* يخرج من حدود .container */
    padding:6px 12px 8px;
    box-sizing:border-box;

    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-header .nav::-webkit-scrollbar{ display:none }
  .site-header .nav a{
    flex:0 0 auto;                /* لا تُضغط */
    white-space:nowrap;
    color:#0a2036 !important;
  }

  .hero-grid, .grid.cards, .grid.features{ grid-template-columns:1fr }
  .hero-copy h1{ font-size:clamp(28px,7vw,34px); line-height:1.12 }
  .hero-harbour{ background-position:center bottom; background-size:contain }

  .field.two{ grid-template-columns:1fr 1fr }
}
@media (max-width:560px){
  .field.two{ grid-template-columns:1fr }
}

/* Desktop */
@media (min-width:981px){
  .header-inner{ display:flex }
  .nav{
    display:flex !important; flex-direction:row; gap:18px; align-items:center;
    margin-inline-start:auto; overflow:visible;
  }
}

/* Parallax on large screens */
@media (min-width:1024px){
  .hero-harbour{ background-attachment:fixed; background-position:center bottom }
}

/* Footer small screens */
@media (max-width:768px){
  .footer-accredit{ display:flex; justify-content:center; align-items:center; text-align:center; margin-top:8px }
}
/* === MOBILE NAV WRAP (fix) === */
@media (max-width:980px){
  /* خلي الهيدر يلف، والمينيو ينزل سطر كامل تحت الشعار */
  .site-header .header-inner{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center;
    gap:10px;
    padding-block:10px;
    padding-inline:12px;
  }
  .site-header .brand{
    flex:1 1 auto;               /* الشعار يسار/يمين ويأخذ مساحته */
    order:1;
  }

  /* المينيو يأخذ 100% عرض الحاوية ويَلِفّ */
  .site-header nav.nav{
    flex:1 0 100% !important;    /* سطر كامل تحت الشعار */
    order:2;
    display:flex !important;
    flex-wrap:wrap !important;    /* أهم سطر: لفّ الروابط */
    gap:10px;
    margin:0 !important;
    padding:6px 0 8px;
    overflow:visible !important;  /* لا قصّ ولا سكرول أفقي */
  }

  /* شكل الحبوب */
  .site-header nav.nav a{
    display:inline-flex;
    align-items:center;
    padding:.5rem .7rem;
    border:1px solid #cfe0f7;
    border-radius:999px;
    background:#fff;
    font-weight:700;
    color:#0a2036 !important;
    white-space:nowrap;           /* تبقى الحبة نفسها بكلمة/كلمتين */
  }
}

/* عطّل أي تمير أفقي فُرض سابقاً */
#nav-hard-fix,
#force-nav-mobile{ display:none !important; }

/* ==== spacing between pills and form on mobile ==== */
@media (max-width:980px){
  /* زيد الفراغ العام بين صفوف الهيرو */
  .hero-grid{ gap:22px !important; }

  /* فراغ تحت الحبوب */
  .hero .pills{ margin-bottom:12px !important; }

  /* أو أضف فراغ أعلى الفورم مباشرة */
  .hero .hero-card{ margin-top:12px !important; }
}
/* === Align bilingual "Always Available" banner text === */
.always-available {
  text-align: left;                /* الافتراضي للإنجليزية */
  padding: 30px 24px;              /* شوية فراغ داخلي متوازن */
  line-height: 1.6;
}

.always-available[lang="ar"],
.always-available[dir="rtl"] {
  text-align: right;               /* للعربية */
}
/* ==== Lower both forms slightly (EN & AR) ==== */
.hero .hero-card {
  margin-top: 20px !important; /* نزل الفورمين لتحت */
}

/* للتأكد من التماثل بين العمودين */
.hero-grid .col-en,
.hero-grid .col-ar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}