/* ===============================
   MEV Charger - Core CSS (Header + Footer + Base)
   Put in: /assets/css/app.css
================================ */

/* ---- Root ---- */
:root{
  --bg:#ffffff;
  --surface:#f6f8fb;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.10);
  --radius:18px;
  --shadow:0 12px 35px rgba(15,23,42,.08);

  --grad:linear-gradient(135deg,#0ea5e9,#22c55e);
  --navy:#0b1220;
}

/* ---- Reset ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

/* ---- Base ---- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
}
.site-main{
  padding:22px 0 46px;
}

/* ---- Helpers ---- */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ===============================
   Header (Responsive + RTL)
================================ */
.mev-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.mev-header__wrap{
  max-width:1200px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}

/* Logo */
.mev-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:1000;
}
.mev-logo__mark{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--grad);
  color:#052014;
  flex:0 0 auto;
}
.mev-logo__text{font-size:16px;letter-spacing:.2px}
.mev-logo__muted{opacity:.7;font-weight:900}

/* Desktop Nav */
.mev-nav{display:flex;align-items:center;gap:10px}
.mev-nav__link{
  text-decoration:none;
  color:rgba(15,23,42,.78);
  font-weight:900;
  font-size:13px;
  padding:9px 10px;
  border-radius:12px;
}
.mev-nav__link:hover{
  background:rgba(15,23,42,.05);
  color:var(--text);
}

/* Actions */
.mev-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
html[dir="rtl"] .mev-actions{
  margin-left:0;
  margin-right:auto;
}

.mev-action{
  text-decoration:none;
  font-weight:1000;
  border-radius:999px;
  padding:9px 12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:var(--text);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.mev-action:hover{
  border-color:rgba(15,23,42,.24);
}
.mev-action--wa{
  border:0;
  background:var(--grad);
  color:#052014;
}
.mev-action__txt{display:inline}
@media(max-width:520px){
  .mev-action__txt{display:none;}
}

/* Burger */
.mev-burger{
  display:none;
  appearance:none;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:10px;
  cursor:pointer;
}
.mev-burger:hover{border-color:rgba(15,23,42,.24)}
.mev-burger__bar{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  margin:3px 0;
  border-radius:999px;
}

/* Mobile Menu */
.mev-mobile{
  border-top:1px solid var(--border);
  background:#fff;
}
.mev-nav--mobile{
  max-width:1200px;
  margin:0 auto;
  padding:10px 16px 14px;
  display:grid;
  gap:6px;
}
.mev-nav--mobile .mev-nav__link{
  padding:12px 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:#fff;
}
.mev-nav--mobile .mev-nav__link:hover{
  background:rgba(15,23,42,.04);
}

.mev-mobile__row{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.mev-mobile__btn{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  text-decoration:none;
  font-weight:1000;
  color:var(--text);
  text-align:center;
}
.mev-mobile__btn:hover{border-color:rgba(15,23,42,.24)}
.mev-mobile__btn--wa{
  border:0;
  background:var(--grad);
  color:#052014;
}



/* ======================================================
   FINAL HEADER FIX – NO RTL FLIP, EVER
   ====================================================== */





/* ================= MOBILE (ALL LANGS SAME) ================= */
@media (max-width:1023.98px){



  /* Logo أقصى اليسار */
  .mev-logo{
    order:1;
    margin-right:auto;
    margin-left:0;
  }

  /* Burger أقصى اليمين */
  .mev-actions{
    order:2;
    margin-left:auto;
    margin-right:0;
    flex-direction:row;
  }

  /* أخفِ منيو الديسكتوب */
  .mev-nav--desktop{
    display:none;
  }
}

/* Mobile sizing */
@media (max-width:768px){
  .mev-header__wrap{
    height:66px;
    padding:0 12px;
  }
  .mev-logo__img{ height:34px; }
  .mev-burger{ padding:6px; }
  .mev-burger__bar{ width:24px; }
}

/* ===============================
   Footer (Responsive + Dark)
================================ */
.mev-footer{
  margin-top:40px;
  background:var(--navy);
  color:rgba(226,232,240,.88);
  border-top:1px solid rgba(148,163,184,.15);
}

.mev-footer__wrap{
  max-width:1200px;
  margin:0 auto;
  padding:28px 16px;
}

.mev-footer__top{
  display:grid;
  gap:18px;
}
@media(min-width:980px){
  .mev-footer__top{
    grid-template-columns:1fr 1.5fr;
    align-items:start;
  }
}

.mev-footer__logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:1000;
}
.mev-footer__mark{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--grad);
  color:#052014;
  flex:0 0 auto;
}
.mev-footer__name{color:#e2e8f0}
.mev-footer__desc{
  margin:10px 0 0;
  line-height:1.8;
  color:rgba(226,232,240,.75);
  font-size:13px;
}

.mev-footer__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.mev-footer__btn{
  text-decoration:none;
  font-weight:1000;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.22);
  background:transparent;
  color:#e2e8f0;
  font-size:12px;
}
.mev-footer__btn:hover{
  border-color:rgba(148,163,184,.38);
}
.mev-footer__btn--wa{
  border:0;
  background:var(--grad);
  color:#052014;
}

.mev-footer__cols{
  display:grid;
  gap:14px;
}
@media(min-width:720px){
  .mev-footer__cols{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.mev-footer__col h4{
  margin:0 0 10px;
  color:#e2e8f0;
  font-size:13px;
}
.mev-footer__col a{
  display:block;
  text-decoration:none;
  color:rgba(226,232,240,.78);
  font-weight:800;
  font-size:13px;
  padding:6px 0;
}
.mev-footer__col a:hover{color:#fff}

.mev-footer__meta{
  display:grid;
  gap:8px;
  font-size:13px;
  color:rgba(226,232,240,.75);
}
.mev-footer__meta a{
  color:#e2e8f0;
  text-decoration:none;
}
.mev-footer__meta a:hover{color:#fff}

.mev-footer__bottom{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.12);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.mev-footer__copy{
  color:rgba(226,232,240,.72);
  font-size:12px;
}
.mev-footer__legal{
  display:flex;
  align-items:center;
  gap:10px;
}
.mev-footer__legal a{
  color:rgba(226,232,240,.78);
  text-decoration:none;
  font-weight:900;
  font-size:12px;
}
.mev-footer__legal a:hover{color:#fff}
.mev-footer__dot{opacity:.6}

/* RTL small tweaks */
html[dir="rtl"] .mev-footer__bottom{flex-direction:row-reverse}
html[dir="rtl"] .mev-footer__legal{flex-direction:row-reverse}

/* Optional: improve tap targets on very small screens */
@media(max-width:420px){
  .mev-footer__btn{width:100%;text-align:center}
}
/* ===== Logo sizing (fix too large) ===== */
.mev-logo--img{display:flex;align-items:center}

.mev-logo__img{
  height:32px;          /* ↓ صغّر هنا */
  width:auto;
  max-width:170px;      /* يمنع التمدد */
  object-fit:contain;
  display:block;
}

/* Desktop أكبر شوي */
@media(min-width:900px){
  .mev-logo__img{
    height:36px;
    max-width:220px;
  }
}

.mev-footer__img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(148,163,184,.25);
  padding:4px;
}
/* ======================================================
   FINAL HEADER FIX – NO RTL FLIP, EVER
   ====================================================== */


/* ================= DESKTOP ================= */

/* English */
html[dir="ltr"] .mev-logo{ order:1; }
html[dir="ltr"] .mev-nav--desktop{
  order:2;
  justify-content:center;
}
html[dir="ltr"] .mev-actions{ order:3; }

/* Arabic */
html[dir="rtl"] .mev-actions{ order:1; } /* يسار */
html[dir="rtl"] .mev-nav--desktop{
  order:2;
  justify-content:center;
  direction:rtl;      /* النص عربي */
  text-align:right;
}
html[dir="rtl"] .mev-logo{ order:3; }   /* يمين */

/* ================= MOBILE (ALL LANGS SAME) ================= */
@media (max-width:1023.98px){



  /* Logo أقصى اليسار */
  .mev-logo{
    order:1;
    margin-right:auto;
    margin-left:0;
  }

  /* Burger أقصى اليمين */
  .mev-actions{
    order:2;
    margin-left:auto;
    margin-right:0;
    flex-direction:row;
  }

  /* أخفِ منيو الديسكتوب */
  .mev-nav--desktop{
    display:none;
  }
}

/* Mobile sizing */
@media (max-width:768px){
  .mev-header__wrap{
    height:66px;
    padding:0 12px;
  }
  .mev-logo__img{ height:34px; }
  .mev-burger{ padding:6px; }
  .mev-burger__bar{ width:24px; }
}