/* ===== core.css (generated 2026-02-16) ===== */


/* --- source: style.css --- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root{
  --max: 1120px;
  --pad: 16px;

  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;

  --blue1:#0b3aa5;
  --blue2:#0a256b;
  --card:#ffffff;
  --line: rgba(2, 6, 23, .10);

  --radius: 18px;
  --shadow: 0 10px 30px rgba(2, 6, 23, .08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  line-height:1.75;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit}
.container{max-width:var(--max); margin:auto; padding:0 var(--pad)}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo{
  width:38px;height:38px;border-radius:12px;
  display:grid; place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, var(--blue1), #3b82f6);
  color:#fff;
  box-shadow: 0 10px 20px rgba(59,130,246,.25);
}
.brandText{display:flex; flex-direction:column; gap:2px}
.brandText small{color:var(--muted); font-size:12px}

.menu{display:flex; gap:10px; flex-wrap:wrap}
.menu a{
  text-decoration:none; padding:8px 10px; border-radius:12px;
  color:var(--muted);
}
.menu a:hover{background:rgba(2,6,23,.04); color:var(--text)}
.menu a.active{color:var(--text); font-weight:700}

.navCtas{display:flex; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  text-decoration:none; font-weight:700;
  border:1px solid transparent;
}
.btn.solid{
  color:#fff;
  background: linear-gradient(135deg, var(--blue1), #2563eb);
  box-shadow: 0 12px 25px rgba(37,99,235,.25);
}
.btn.ghost{
  background:#fff;
  border-color: var(--line);
  color: var(--text);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
@media (max-width:900px){
  .navCtas{display:none}
}

/* Hero */
.heroWrap{
  background: radial-gradient(1200px 600px at 70% 30%, rgba(59,130,246,.35), transparent 60%),
              linear-gradient(135deg, var(--blue1), var(--blue2));
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  padding:44px 0 54px;
}
.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
}
.hero h1{margin:14px 0 10px; font-size: clamp(28px, 3.2vw, 46px); line-height:1.2}
.hero p{margin:0; color:rgba(255,255,255,.88); max-width:56ch}
.heroActions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}

.heroStartCard{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  max-width: 620px;
}
.heroStartIcon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  flex: 0 0 42px;
  font-size:20px;
}
.heroStartContent{min-width: 0}
.heroStartContent strong{
  display:block;
  font-size:16px;
  color:#fff;
  margin-bottom:2px;
}
.heroStartContent span{
  display:block;
  font-size:12px;
  color: rgba(255,255,255,.88);
  line-height:1.35;
}
.heroStartBtn{
  margin-inline-start:auto;
  padding:12px 14px;
  border-radius:14px;
  white-space:nowrap;
}
@media (max-width: 520px){
  .heroStartCard{flex-wrap:wrap}
  .heroStartBtn{margin-inline-start:0; width:100%; justify-content:center}
}
.miniStats{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.stat{
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.stat strong{display:block; font-size:16px}
.stat span{display:block; font-size:12px; color:rgba(255,255,255,.85)}

.heroCards{display:grid; gap:14px; align-content:center}
.uiCard{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  padding:14px;
  box-shadow: 0 22px 45px rgba(2,6,23,.25);
}
.uiCard.glass{
  background: rgba(255,255,255,.14);
}
.uiHead{display:flex; gap:6px; margin-bottom:10px}
.dot{width:9px;height:9px;border-radius:50%; background:rgba(255,255,255,.45)}
.uiLine{height:10px;border-radius:999px;background:rgba(255,255,255,.22); margin:8px 0}
.w70{width:70%} .w90{width:90%} .w55{width:55%}
.uiGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px}
.uiTile{height:44px;border-radius:16px;background:rgba(255,255,255,.16)}
.uiTag{
  margin-top:12px;
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(2,6,23,.18);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px;
}
.uiKpi{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:rgba(255,255,255,.92)}
.uiBar{height:10px;border-radius:999px;background:rgba(255,255,255,.14); margin:8px 0 14px}
.uiBar span{display:block;height:100%;border-radius:999px;background:rgba(255,255,255,.75)}

.wave{
  position:absolute; left:0; right:0; bottom:-1px;
  width:100%; height:110px;
  fill:#fff;
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:34px 0 52px}
  .heroCards{display:none}
}

/* Sections */
.section{padding:34px 0}
.section.soft{
  background: linear-gradient(180deg, rgba(37,99,235,.06), transparent);
  border-radius: 26px;
  padding:26px 18px;
}
.secHead{margin-bottom:14px}
.secHead h2{margin:0 0 6px; font-size:22px}
.secHead p{margin:0; color:var(--muted)}
.secHead.row{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}

.cards4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.card{
  text-decoration:none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.card:hover{transform: translateY(-2px)}
.icon{font-size:22px}
.card h3{margin:10px 0 6px}
.card p{margin:0; color:var(--muted)}
@media (max-width:980px){ .cards4{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:560px){ .cards4{grid-template-columns: 1fr} }

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
}
.stepNo{
  width:34px;height:34px;border-radius:12px;
  display:grid; place-items:center;
  background: rgba(37,99,235,.10);
  color:#1d4ed8; font-weight:900;
}
.step h3{margin:10px 0 6px}
.step p{margin:0; color:var(--muted)}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }

/* Carousel */
.carousel{
  display:flex; align-items:center; gap:10px;
}
.carBtn{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:#fff;
  font-size:22px;
  cursor:pointer;
}
.carTrack{
  display:flex;
  gap:12px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding:6px;
  border-radius: 18px;
}
.carTrack::-webkit-scrollbar{height:8px}
.carTrack::-webkit-scrollbar-thumb{background:rgba(2,6,23,.12); border-radius:999px}

.postCard{
  min-width: 320px;
  scroll-snap-align: start;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.postCard h3{margin:10px 0 8px; font-size:18px}
.postCard p{margin:0; color:var(--muted)}
.meta{margin-top:10px; font-size:12px; color:var(--muted)}
.tag{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--line);
  background:rgba(2,6,23,.03);
}

/* CTA */
.cta{padding:10px 0 40px}
.ctaBox{
  display:flex; gap:14px; justify-content:space-between; align-items:center;
  padding:18px;
  border-radius: 22px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(2,6,23,.02));
}
.ctaBox h2{margin:0 0 6px}
.ctaBox p{margin:0; color:var(--muted); max-width:70ch}
.ctaBtns{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width:860px){
  .ctaBox{flex-direction:column; align-items:flex-start}
}

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  padding: 22px 0;
  margin-top: 6px;
}
.footGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:16px;
}
.footBrand{display:flex; align-items:center; gap:10px}
.footP{margin:10px 0 0; color:var(--muted)}
.footLinks{display:grid; gap:8px; margin-top:10px}
.footLinks a{color:var(--muted); text-decoration:none}
.footLinks a:hover{color:var(--text)}

.footerLogoWrap{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.footerTagline{margin-top:2px; color:var(--muted); font-size:13px; line-height:1.6}

.footerLogoCenter{display:flex; justify-content:center; margin-top:14px}
.footerLogoImg{width:220px; height:auto; max-width:75%; display:block}
.copyright{margin-top:18px; color:var(--muted); font-size:13px}
@media (max-width:860px){
  .footGrid{grid-template-columns: 1fr}
}


/* === Footer layout: center the grid inside the global container === */
.footer{ width:100%; }
.footer .container{ max-width:var(--max); margin:auto; padding:0 var(--pad); }
.footer .footGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:16px;
  align-items:flex-start;
}
@media (max-width:860px){
  .footer .footGrid{ grid-template-columns: 1fr; }
}


/* === Content Pages Enhancements === */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:14px;background:rgba(2,6,23,.03);padding:10px 12px}
.faq summary{cursor:pointer;font-weight:700}
.faq .faqBody{margin-top:8px;color:var(--muted);line-height:1.9}



/* === Mega Menu === */
.megaNav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.navDrop{position:relative}
.navDrop>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px}
.navDrop>summary::-webkit-details-marker{display:none}
.navDrop>summary:after{content:"▾";font-size:.9em;opacity:.7}
.navDrop[open]>summary:after{transform:rotate(180deg)}
/* Panels */
.dropPanel{
  position:absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  z-index: 60;
}
.dropPanel a{display:block;padding:10px 10px;border-radius:10px;color:inherit;text-decoration:none}
.dropPanel a:hover{background: rgba(0,0,0,.04)}
.megaPanel{
  position:absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  width: min(980px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
  z-index: 70;
}

/* hover-bridge: يمنع اختفاء القوائم عند التحرك من الـ summary للـ panel */
.dropPanel::before,
.megaPanel::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-14px;
  height:14px;
}
.megaGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
}
.megaCol{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.35);
}
.megaTitle{font-weight:800;margin-bottom:10px}
.megaCol a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
}
.megaCol a:hover{background: rgba(0,0,0,.04)}
.megaCtas{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.megaCtas .btn{flex:1;min-width:140px;justify-content:center}
/* Desktop hover open (optional) */
@media (min-width: 900px){
  .navDrop.mega:hover .megaPanel{display:block}
  .navDrop.mega:not([open]) .megaPanel{display:none}
}
/* Mobile: panels become static block */
@media (max-width: 899px){
  .dropPanel,.megaPanel{
    position:static;
    width:100%;
    min-width:0;
    margin-top:10px;
  }
  .megaGrid{grid-template-columns:1fr;gap:10px}
  .megaCol{padding:12px}
}



/* === Mega Menu RTL Fix === */
html[dir="rtl"] .megaPanel{
  inset-inline-end: auto;
  inset-inline-start: 0;
  transform: translateX(-8px);
}
html[dir="rtl"] .dropPanel{
  inset-inline-end: auto;
  inset-inline-start: 0;
}



/* === Footer Container Fix === */
/* بعض الصفحات كانت بتقفل الـ main قبل الفوتر، فالفوتر يظهر بعرض الشاشة.
   هذا التعديل يجعل محتوى الفوتر يتوسّط بعرض الـ container في كل الحالات. */
.footer .ctaBox,
.footer .footGrid,
.footer .copyright{
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Expand footer columns to fill available width (remove left blank) */
.footer .footGrid{max-width:none;}



/* === Hover Dropdown UX === */
/* فتح القوائم المنسدلة عند الوقوف بالماوس (Desktop فقط) */
@media (hover: hover) and (pointer: fine){
  .navDrop:hover > .megaPanel,
  .navDrop:hover > .dropPanel{
    display:block;
  }
  .navDrop > .megaPanel,
  .navDrop > .dropPanel{
    display:none;
  }
}



/* === Mobile Responsive Pack v1 === */
:root{
  --max: 1100px;
  --pad: 16px;
}

/* Containers */
.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* Cards grid */
.cards4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 1024px){
  .cards4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 560px){
  .cards4{grid-template-columns:1fr}
}

/* Header layout */
.topbar .nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .logo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px}
.brandText{display:flex;flex-direction:column;line-height:1.05}
.brandText small{opacity:.75}

/* Mobile menu toggle */
.navToggle{
  display:none;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:12px;
  padding:10px 12px;
  line-height:1;
  box-shadow:var(--shadow);
}
.navWrap{display:flex;align-items:center;gap:14px}
@media (max-width: 900px){
  .navToggle{display:inline-flex}
  .navWrap{
    position:fixed;
    inset: 64px 0 auto 0;
    background: var(--card);
    border-top:1px solid var(--line);
    padding: 12px var(--pad) 16px;
    display:none;
    flex-direction:column;
    gap:10px;
    z-index:120;
  }
  .navWrap.open{display:flex}
  .megaNav{width:100%;flex-direction:column;align-items:stretch;gap:8px}
  .megaNav > a,
  .navDrop > summary{
    padding:12px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background: rgba(255,255,255,.35);
  }
  .navCtas{width:100%;display:flex;gap:10px}
  .navCtas .btn{flex:1;justify-content:center}
  /* Make dropdown panels static inside mobile menu */
  .dropPanel,.megaPanel{position:static;width:100%;margin-top:10px}
  .megaGrid{grid-template-columns:1fr}
  .megaCol{background:transparent}
}

/* Improve tap targets */
a, button, summary{min-height:40px}

/* Typography scaling */
h1{font-size:clamp(22px, 3.4vw, 34px)}
h2{font-size:clamp(18px, 2.8vw, 24px)}
p{font-size:clamp(14px, 2.2vw, 16px);line-height:1.8}

/* Media */
img{max-width:100%;height:auto}

/* Footer spacing on small screens */
@media (max-width: 560px){
  .footGrid{display:grid;grid-template-columns:1fr;gap:12px}
  .ctaBox{flex-direction:column;align-items:stretch}
  .ctaBox .btn{width:100%;justify-content:center}
}



/* === Mega Menu UX Fix v2 === */
/* 1) تصغير وعرض متوسط + توسيط */
.megaPanel{
  max-width: 860px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* 2) منطقة أمان لمنع اختفاء القائمة أثناء تحريك الماوس */
.navDrop.mega{
  position: relative;
}
.navDrop.mega::after{
  content:"";
  position:absolute;
  top:100%;
  inset-inline-start:0;
  width:100%;
  height:18px; /* منطقة أمان */
}

/* 3) تأخير بسيط للإغلاق (Desktop فقط) */
@media (hover: hover) and (pointer: fine){
  .navDrop.mega .megaPanel{
    transition: opacity .15s ease, transform .15s ease;
    opacity:0;
    pointer-events:none;
  }
  .navDrop.mega:hover .megaPanel,
  .navDrop.mega:focus-within .megaPanel{
    opacity:1;
    pointer-events:auto;
  }
}



/* === Dropdown UX Fix (More) v1 === */
/* نفس مشكلة الاختفاء السريع على (المزيد) — نضيف منطقة أمان + تدرّج ظهور */
.navDrop{
  position: relative;
}
.navDrop::after{
  content:"";
  position:absolute;
  top:100%;
  inset-inline-start:0;
  width:100%;
  height:14px; /* منطقة أمان للماوس */
}

/* توسيط قائمة (المزيد) بشكل أهدى */
.dropPanel{
  max-width: 320px;
}

/* تأثير ظهور/إخفاء لطيف (Desktop فقط) */
@media (hover: hover) and (pointer: fine){
  .navDrop .dropPanel{
    transition: opacity .15s ease, transform .15s ease;
    opacity:0;
    pointer-events:none;
    transform: translateY(4px);
  }
  .navDrop:hover > .dropPanel,
  .navDrop:focus-within > .dropPanel{
    opacity:1;
    pointer-events:auto;
    transform: translateY(0);
  }
}



/* === Header RTL + Mega Cards v3 === */
.navRTL{display:flex;align-items:center;justify-content:space-between;gap:14px}
.navRight{display:flex;align-items:center;gap:16px}
.navLeft{display:flex;align-items:center;gap:10px}
.mainNav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.searchBtn{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:var(--shadow);
}
.searchBtn:hover{transform:translateY(-1px)}

/* Mega head + cards */
.megaHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.megaH{font-weight:900;font-size:18px}
.megaS{color:var(--muted);margin-top:2px;max-width:52ch}
.linkAll{text-decoration:none}
.megaGrid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.megaCard{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:2px 10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.35);
  text-decoration:none;
  color:inherit;
}
.megaCard:hover{background: rgba(0,0,0,.04)}
.megaCard .mi{font-size:20px;grid-row:1 / span 2}
.megaCard .mt{font-weight:800}
.megaCard .ms{color:var(--muted);font-size:13px}
.megaCtasRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.megaCtasRow .btn{justify-content:center}

/* Search modal */
.searchModal{position:fixed;inset:0;display:none;z-index:200}
.searchModal.open{display:block}
.searchBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.searchBox{
  position:relative;
  max-width:760px;
  margin: 90px auto 0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px;
}
.searchTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.searchTitle{font-weight:900}
.searchClose{
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
  padding:8px 10px;
}
.searchInput{
  width:100%;
  margin-top:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  outline:none;
}
.searchHint{margin-top:8px;color:var(--muted);font-size:13px}
.searchResults{margin-top:10px;display:grid;gap:8px;max-height:50vh;overflow:auto;padding:4px}
.searchItem{
  display:block;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  text-decoration:none;
  color:inherit;
  background: rgba(255,255,255,.35);
}
.searchItem:hover{background: rgba(0,0,0,.04)}
.searchMeta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.searchCat{color:var(--muted);font-size:12px}
.searchDesc{color:var(--muted);font-size:13px;margin-top:4px}

/* Mobile header: menu collapses into panel */
@media (max-width: 900px){
  .mainNav{display:none}
  .navLeft .btn{display:none}
  .navToggle{display:inline-flex}
  .navRight{gap:10px}
  .searchBox{margin-top:70px;width:calc(100vw - 24px)}
  .mobilePanel{
    position:fixed;
    inset:64px 0 auto 0;
    background:var(--card);
    border-top:1px solid var(--line);
    padding:12px var(--pad) 16px;
    display:none;
    z-index:180;
  }
  .mobilePanel.open{display:block}
  .mobilePanel .mainNav{display:flex;flex-direction:column;gap:10px}
  .mobilePanel .mainNav > a,
  .mainNav > details > summary,
  .mobilePanel .navDrop > summary{
    padding:12px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background: rgba(255,255,255,.35);
  }
  .megaGrid2{grid-template-columns:1fr}
  .dropPanel,.megaPanel{position:static;width:100%;margin-top:10px}
}



/* === Header Compact Tweaks === */
@media (min-width: 901px){
  .mainNav{gap:10px}
  .mainNav > a, .mainNav > details > summary{font-size:14px}
  .navLeft{gap:8px}
}



/* === MobilePanel Desktop Hide Fix === */
.mobilePanel{display:none;}
@media (max-width: 900px){
  .mobilePanel.open{display:block;}
}


/* 2uto header logo size */
header img[src*="logo_header"], .logo img[src*="logo_header"], img.siteLogo[src*="logo_header"] {
  height: 70px;
  width: auto;
  max-width: 145px;
}
@media (max-width: 768px){
  header img[src*="logo_header"], .logo img[src*="logo_header"], img.siteLogo[src*="logo_header"] {
    height: 70px;
    max-width: 145px;
  }
}


/* ===== Article Prose (2uto) ===== */
.articleShell{ max-width: 980px; margin: 0 auto; padding: 28px var(--pad); }
.articleCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 22px 18px;
}
.breadcrumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:13px; margin: 6px 0 14px;}
.breadcrumbs a{ color:inherit; }
.breadcrumbs .sep{ opacity:.6; }
.articleTitle{ margin: 0 0 8px; font-size: 34px; line-height: 1.2; letter-spacing: -.2px; }
.articleIntro{ margin: 0 0 14px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.metaBar{
  display:flex; flex-wrap:wrap; gap:10px;
  padding: 12px 12px;
  border:1px solid var(--line);
  border-radius: 18px;
  background: rgba(2,6,23,.02);
  margin: 14px 0 18px;
}
.chip{
  display:inline-flex; gap:8px; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background:#fff;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.chip svg{ width: 16px; height: 16px; opacity:.85; }

.prose{ color: var(--text); font-size: 16px; line-height: 1.9; }
.prose h2{ margin: 26px 0 10px; font-size: 22px; line-height: 1.35; }
.prose h3{ margin: 20px 0 10px; font-size: 18px; line-height: 1.35; }
.prose p{ margin: 0 0 14px; }
.prose ul, .prose ol{ margin: 0 0 14px; padding-inline-start: 22px; }
.prose li{ margin: 6px 0; }
.prose hr{ border:0; border-top:1px solid var(--line); margin: 20px 0; }
.prose img{
  max-width:100%;
  height:auto;
  border-radius: 18px;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  margin: 12px 0;
}

.keyPoints{
  border: 1px dashed rgba(2,6,23,.18);
  background: rgba(2,6,23,.02);
  border-radius: 22px;
  padding: 14px 14px;
  margin: 16px 0 18px;
}
.keyPoints h2{ margin: 0 0 8px; font-size: 18px; }
.tipBox{
  border:1px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.06);
  border-radius: 22px;
  padding: 14px 14px;
  margin: 18px 0;
}
.tipBox strong{ display:block; margin-bottom: 6px; }

.relatedBox{
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: grid;
  gap: 12px;
}
.relatedGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.relatedCard{
  background: rgba(2,6,23,.02);
  border:1px solid var(--line);
  border-radius: 20px;
  padding: 12px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.relatedCard .t{ font-weight: 800; }
.relatedCard .d{ color: var(--muted); font-size: 13px; line-height: 1.6; }
.articleActions{
  display:flex; flex-wrap:wrap; gap: 10px;
  margin-top: 12px;
}
.articleActions .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 16px;
  border:1px solid var(--line);
  background:#fff;
  font-weight: 800;
  box-shadow: var(--shadow);
}

/* Reading progress bar */
.readProgress{
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: rgba(59,130,246,.25);
  z-index: 9999;
  pointer-events: none;
}
.readProgress > span{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue1), var(--blue2));
}

@media (max-width: 900px){
  .articleShell{ padding: 16px var(--pad); }
  .articleCard{ padding: 16px 14px; border-radius: 22px; }
  .articleTitle{ font-size: 26px; }
  .articleIntro{ font-size: 15px; }
  .prose{ font-size: 15.5px; }
  .relatedGrid{ grid-template-columns: 1fr; }
}


/* === Footer container alignment (global) === */
.footer .ctaBox,
.footer .footGrid,
.footer .footerLogoCenter,
.footer .copyright{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}


/* Search enhancements */
.searchFilters{display:flex;gap:10px;align-items:center;margin-top:10px}
.searchFilters select{flex:1;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:transparent;color:inherit}
.searchPills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.searchPills button{border:1px solid rgba(0,0,0,.12);background:transparent;color:inherit;padding:6px 10px;border-radius:999px;font-size:13px;cursor:pointer}
.searchPills button.active{background:rgba(0,0,0,.06)}


/* --- source: header-hotfix.css --- */

/* Header Hotfix for 2uto */
/* Fix hero height, mockup overflow, and wave spacing */

.hero-section {
  min-height: 520px;
  padding-top: 80px;
  padding-bottom: 60px;
}

.hero-mockup {
  max-height: 360px;
  overflow: hidden;
}

.hero-wave {
  margin-top: -40px;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .hero-mockup {
    max-height: 260px;
  }
}

/* تصحيح RTL للنصوص داخل سلايدر اختيار العربية */
.heroCars,
.heroCars *{
  direction: rtl;
  text-align: right;
}

/* استثناء عنصر الحركة نفسه (لازم يفضل LTR) */
.heroCars .carTrack{
  direction: ltr;
}

/* تأكيد محاذاة العناوين والنص */
.heroCars h3,
.heroCars p,
.heroCars li,
.heroCars .carSliderTitle{
  text-align: right;
}


/* heroCars positional tweak (RTL-safe)
   بدل right ثابت (كان بيكسر على الشاشات المختلفة) */
@media (min-width: 901px){
  html[dir="rtl"] .heroCars .carSlider{ margin-right: 18px; }
}

/* --- 2uto logos (header+footer) --- */
.footBrand .footerSiteLogo{
  height:52px;
  width:auto;
  display:block;
}



/* 2uto header logo size */
header img[src*="logo_header"], .logo img[src*="logo_header"], .siteLogo img[src*="logo_header"] {
  height: 52px;
  width: auto;
  max-width: 214px;
}
@media (max-width: 768px){
  header img[src*="logo_header"], .logo img[src*="logo_header"], .siteLogo img[src*="logo_header"] {
    height: 44px;
    max-width: 180px;
  }
}

/* --- Force consistent header logo sizing across all pages --- */
.topbar .brand .siteLogo{
  height: 70px;
  width:auto;
  max-width:145px;
  display:block;
}
@media (max-width: 480px){
  .topbar .brand .siteLogo{ height: 60px; }
}