/* ═══════════════════════════════════════════════════════
 *  inc-header.css — أُستخرِج آليًا من includes/header.php
 *  المقطع 1 من 1 · سطور 147–147 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 * ═══════════════════════════════════════════════════════ */
/* ═══ أُلغي zoom-out الـ10% — 2 أغسطس 2026 ═══
   كان: @media(min-width:769px){html{zoom:.9}} مع قائمة استثناءات لصفحات
   «تطبيق-شِل» المبنية على 100vh. أُزيل الزووم وأُزيلت معه القائمة والمنطق
   كله، فما عادت له لازمة. الصفحات دلوقتي بحجمها الطبيعي 100%.
   ملاحظة: نظير هذا الزووم في pages/dashboard.php أُزيل أيضًا، ومعه تعويض
   الارتفاع calc(100vh/.9) الذي كان مقترنًا به — الاثنان لا ينفصلان. */
:root{--brand:#2563EB;--brand-hover:#1D4ED8;--brand-2:#10B981;--primary:var(--brand);--nv:#0D1B3E;--dark:#1d1d1f;--text:#6e6e73;--mut:#6b7480;--faint:#6b7280;--border:#e3e3e6;--light:#f5f5f7}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Arial,sans-serif;color:#1d1d1f;background:#fff}
html,body{overflow-x:clip;max-width:100%}
/* ===== الناڤبار — حر بلا خط فاصل ===== */
.main-navbar{background:transparent;width:100%;position:sticky;top:0;z-index:1000;padding:12px 18px}
/* ⚠️ العرض ١٣٠٠ مش ١١٨٠ — أُصلح ١٢ أغسطس ٢٠٢٦.
   الكبسولة كانت ١١٨٠ بكسل، وده كان مقاس مظبوط على حالة «مسجّل دخول» بس:
   وقتها الجانب الأيسر فيه أيقونتين صغيرتين (٥٤٤ بكسل مساحة فاضية داخل
   الكبسولة). لكن في حالة «غير مسجّل» بيزيد زرّين كاملين — «تواصل معنا»
   و«دخول / تسجيل» — فيقفز عرض الأزرار من ١٥٤ لـ٣١٣ بكسل، وتفضل المساحة
   الفاضية ٩٢ بكسل بس تتوزّع على جانبين، يعني ٤٦ بكسل بين آخر رابط وبين
   شارة اللغة. النتيجة إن القائمة والأزرار بيبانوا كتلة واحدة ملزوقة.
   ١٣٠٠ بتدّي الحالتين نفس التنفّس تقريبًا (١٠٦ و١٣٤ بكسل) من غير ما
   الشكل يتغيّر في أي حاجة تانية. */
.navbar-flex{display:flex;flex-direction:row;justify-content:space-between;align-items:center;max-width:1300px;margin:0 auto;padding:9px 26px;gap:16px;background:#fff;border:1px solid #eaedf4;border-radius:999px;box-shadow:0 8px 30px rgba(13,27,90,.10)}
/* اللوجو */
.brand-logo{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;flex-shrink:0}
.brand-logo .logo-text{font-size:1.55rem;font-weight:900;color:var(--nv);line-height:1}
.brand-logo .logo-text span{color:var(--primary)}
.brand-logo .logo-sub{font-size:.58rem;font-weight:800;color:var(--primary);letter-spacing:3px;margin-top:1px}
/* روابط الناف */
.nav-links-wrap{display:flex;align-items:center;justify-content:center;flex:1}
.nav-menu{display:flex;flex-direction:row;align-items:center;gap:2px;list-style:none}
.ni{position:relative}
.ni>a,.ni>.ntop{position:relative;padding:8px 15px 20px;font-size:.93rem;font-weight:600;color:#3d4552;display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;background:none;border:none;font-family:inherit;transition:color .2s;white-space:nowrap}
.ni>a .cx,.ni>.ntop .cx{font-size:.6rem;opacity:.55;transition:transform .28s}
.ni:hover>a,.ni:hover>.ntop,.ni.open>.ntop{color:var(--primary)}
.ni:hover>.ntop .cx,.ni.open>.ntop .cx{transform:rotate(180deg);opacity:1}
/* النقطة الزرقاء المنوّرة */
.ni.has-dd>.ntop:after{content:"";position:absolute;bottom:6px;right:50%;transform:translateX(50%) scale(0);width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 9px 2px rgba(37,99,235,.6);transition:transform .28s cubic-bezier(.2,.9,.2,1)}
.ni.has-dd:hover>.ntop:after,.ni.has-dd.open>.ntop:after{transform:translateX(50%) scale(1)}
/* الدروب داون — نصّي، حواف مستديرة، زجاجي، نزول ناعم */
.dd{position:absolute;top:calc(100% + 12px);right:50%;transform:translateX(50%) translateY(10px) scale(.97);transform-origin:top center;opacity:0;pointer-events:none;background:#ffffff;border:1px solid #edf0f6;box-shadow:0 30px 72px rgba(13,27,90,.20);border-radius:24px;padding:16px;z-index:1001;transition:opacity .26s ease, transform .36s cubic-bezier(.2,.9,.2,1)}
.dd:before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.ni.has-dd:hover .dd,.ni.has-dd.open .dd{opacity:1;pointer-events:auto;transform:translateX(50%) translateY(0) scale(1)}
.dd.wide{width:480px}.dd.narrow{width:284px}.dd.xwide{width:780px;max-width:calc(100vw - 40px)}
.dd.s2{width:680px;max-width:calc(100vw - 40px)}.dd.s2 .dd-row{gap:14px}
.dd-gt{font-size:.66rem;font-weight:800;color:var(--faint);letter-spacing:.8px;text-transform:uppercase;padding:2px 12px 8px}
.dd-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dd-row.cols3{grid-template-columns:1fr 1fr 1fr;gap:14px}
.dd-it{display:block;padding:9px 12px;border-radius:14px;text-decoration:none;transition:background .15s}
.dd-it:hover{background:rgba(37,99,235,.06)}
.dd-it .dd-t{display:block;margin:0 0 2px;font-size:.9rem;font-weight:700;color:var(--nv)}
.dd-it p{margin:0;font-size:.76rem;color:var(--mut);line-height:1.5}
/* ═ أيقونات المزايا الحيّة ═ */
.dd-it.ic{display:flex;gap:11px;align-items:flex-start;padding:8px 10px}
.dd-ic{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#EEF4FF;transition:transform .2s}
.dd-it.ic:hover .dd-ic{transform:scale(1.08)}
.dd-ic i{color:var(--primary);font-size:1.06rem;transform-origin:center}
.dd-it.ic:hover .dd-ic i{animation:zPop .7s ease-in-out infinite}
.dd-it.ic:hover .dd-ic i.fa-gears,.dd-it.ic:hover .dd-ic i.fa-clock-rotate-left,.dd-it.ic:hover .dd-ic i.fa-compass{animation:zSpin 1.15s linear infinite}
.dd-it.ic:hover .dd-ic i.fa-truck-fast,.dd-it.ic:hover .dd-ic i.fa-rocket,.dd-it.ic:hover .dd-ic i.fa-user-tie,.dd-it.ic:hover .dd-ic i.fa-cart-shopping{animation:zBob .7s ease-in-out infinite}
.dd-it.ic:hover .dd-ic i.fa-scale-balanced,.dd-it.ic:hover .dd-ic i.fa-umbrella{animation:zSwing .9s ease-in-out infinite}
.dd-it.ic:hover .dd-ic i.fa-heart-pulse,.dd-it.ic:hover .dd-ic i.fa-shield-halved,.dd-it.ic:hover .dd-ic i.fa-handshake,.dd-it.ic:hover .dd-ic i.fa-circle-check,.dd-it.ic:hover .dd-ic i.fa-handshake-angle{animation:zBeat .7s ease-in-out infinite}
.dd-it.ic:hover .dd-ic i.fa-plug,.dd-it.ic:hover .dd-ic i.fa-crown,.dd-it.ic:hover .dd-ic i.fa-bell{animation:zWiggle .55s ease-in-out infinite}
@keyframes zPop{0%,100%{transform:scale(1)}45%{transform:scale(1.22)}}
@keyframes zSpin{to{transform:rotate(360deg)}}
@keyframes zBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes zSwing{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
@keyframes zBeat{0%,100%{transform:scale(1)}45%{transform:scale(1.2)}}
@keyframes zWiggle{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes zFlick{0%,100%{transform:scaleY(.6);opacity:.5}50%{transform:scaleY(1.15);opacity:1}}
@keyframes zDraw{0%{stroke-dashoffset:22}55%,100%{stroke-dashoffset:0}}
@keyframes zPulse{0%{stroke-dashoffset:40}60%,100%{stroke-dashoffset:0}}

.dd-it.ic .dd-t{font-size:.84rem}
.dd-it.ic p{font-size:.7rem}
.dd-it.ic svg *{animation-play-state:paused!important}
.dd-it.ic:hover svg *{animation-play-state:running!important}
@keyframes zFloat{50%{transform:translateY(-2.5px)}}
@keyframes zInk{0%{stroke-dashoffset:26}55%{stroke-dashoffset:0}80%{stroke-dashoffset:0}100%{stroke-dashoffset:26}}
@keyframes zPen{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2.5px,1.2px) rotate(-5deg)}55%{transform:translate(-5px,0) rotate(0)}80%{transform:translate(-2px,-1px) rotate(4deg)}}
@keyframes zDrop{0%{transform:translateY(-5px);opacity:0}30%{opacity:1}65%{transform:translateY(2.5px);opacity:1}100%{transform:translateY(2.5px);opacity:0}}
@keyframes zSign{0%{stroke-dashoffset:40}50%{stroke-dashoffset:0}72%{stroke-dashoffset:0}100%{stroke-dashoffset:-40}}
@keyframes zScan{0%,100%{transform:translateY(-4.6px)}50%{transform:translateY(4.6px)}}
@keyframes zLed{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes zPlug{0%,78%,100%{transform:translateX(0)}88%{transform:translateX(-2px)}}
@keyframes zHop{0%,42%,100%{transform:translate(0,0) scale(1)}8%{transform:translate(0,-2.5px) scale(1.18)}52%{transform:translate(-8.5px,-2.5px) scale(1.18)}62%,94%{transform:translate(-8.5px,0) scale(1)}}
@keyframes zBarA{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes zBarB{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
@keyframes zBarC{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(.4)}}
@keyframes zRing{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@keyframes zBell{0%,55%,100%{transform:rotate(0)}10%{transform:rotate(13deg)}25%{transform:rotate(-10deg)}40%{transform:rotate(5deg)}}
@keyframes zMag{0%,100%{transform:translate(0,0)}25%{transform:translate(-3.5px,2px)}50%{transform:translate(-5.5px,-2px)}75%{transform:translate(-1.5px,-3px)}}
.dd-foot{border-top:1px solid rgba(0,0,0,.06);margin-top:10px;padding:12px 12px 3px;display:flex;justify-content:space-between;align-items:center}
.dd-foot a{color:var(--primary);font-weight:800;font-size:.83rem;text-decoration:none}
.dd-foot .h{font-size:.72rem;color:var(--faint)}
/* أزرار وأكشنز */
/* المسافة بين شارة اللغة و«تواصل معنا» و«دخول / تسجيل» — كانت ٨ بكسل،
   وهي كفاية لأيقونتين لكن مش لزرّين بحدود. ١٢ بيفصلهم من غير ما يتفرّقوا. */
.navbar-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.iconbtn{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#5b6472;cursor:pointer;transition:.18s;position:relative;text-decoration:none;font-size:1.12rem}
.iconbtn:hover{background:#f2f5fb;color:var(--primary)}
.user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#5b7bff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.02rem;cursor:pointer;text-decoration:none;box-shadow:0 6px 16px rgba(37,99,235,.3);transition:opacity .2s}
.user-avatar:hover{opacity:.9}
.cart-badge{position:absolute;top:5px;left:6px;min-width:16px;height:16px;background:#EF4444;color:#fff;font-size:.6rem;font-weight:800;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid #fff;line-height:1}
.btn-nav{padding:10px 20px;font-size:.85rem;font-weight:700;border-radius:12px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .2s;cursor:pointer;border:none;font-family:inherit}
.btn-nav-outline{background:transparent;color:#334155;border:1px solid var(--border)}
.btn-nav-outline:hover{border-color:#c9dbf6;color:var(--primary);background:#eef4fd}
.btn-nav-primary{background:linear-gradient(120deg,#2563EB,#5b7bff);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.34)}
.btn-nav-primary:hover{filter:brightness(1.06)}
/* الإشعارات: التصميم الآن في includes/notif_widget.php (مصدر واحد مشترك مع الداشبورد) */
/* ═══════════════════════════════════════════════════════════════════════════
   الشاشات المتوسطة (901px – 1366px) — أُضيفت 12 أغسطس 2026
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ الناڤبار كان يُقصّ على أي شاشة أضيق من ١٤٤٠ بكسل: القائمة تحوي أحد عشر
   عنصرًا كلها `white-space:nowrap` داخل كبسولة `max-width:1180px`، ونقطة
   التحوّل إلى زرّ القائمة كانت عند 900px فقط. أي أن ما بين 901 و1439 بكسل —
   وهو مقاس أغلب اللابتوبات (1366×768 و1280×800) — يعرض القائمة الكاملة في
   مساحة لا تكفيها، فتفيض. ولأن `html,body{overflow-x:clip}` فالفائض يُقصّ
   بلا شريط تمرير: زرّ «دخول / تسجيل» يخرج من الكبسولة ويبدو مقطوعًا.
   الحلّ في مرحلتين: تضييق تدريجي أولًا، ثم زرّ القائمة قبل أن يحدث القصّ.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1439px){
  /* ملاحظة: مافيش max-width هنا عن قصد. لما كان مكتوب `max-width:100%`
     كانت الكبسولة بتقفز فجأة من ١١٨٠ لـ١٤٠٣ بكسل عند ١٤٣٩ بالظبط. دلوقتي
     الأساس ١٣٠٠، وتحت ١٣٠٠ بتضيق لوحدها مع الحاوية — انتقال ناعم بلا قفزة. */
  .navbar-flex{padding:9px 18px;gap:10px}
  .ni>a,.ni>.ntop{padding:8px 10px 20px;font-size:.87rem}
  .nav-menu{gap:0}
  .btn-nav{padding:9px 14px;font-size:.82rem}
}
@media(max-width:1240px){
  .ni>a,.ni>.ntop{padding:8px 7px 20px;font-size:.83rem}
  .btn-nav-outline{display:none}          /* «تواصل معنا» يبقى في الفوتر والقائمة */
  .brand-logo .logo-text{font-size:1.38rem}
}
/* ===== الموبايل ===== */
.nav-toggle{display:none;background:transparent;border:none;color:var(--dark);font-size:1.45rem;cursor:pointer;padding:4px 8px;line-height:1}
@media(max-width:1100px){
  .nav-toggle{display:inline-flex;align-items:center}
  .navbar-flex{padding:11px 16px;gap:10px}
  .nav-links-wrap{position:absolute;top:100%;right:0;left:0;background:#fff;border-top:1px solid var(--border);box-shadow:0 16px 34px rgba(0,0,0,.10);display:none;padding:8px 0;flex:none}
  .main-navbar.open .nav-links-wrap{display:block}
  .nav-menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .ni{border-bottom:1px solid #F1F5F9}
  .ni:last-child{border-bottom:none}
  .ni>a,.ni>.ntop{padding:14px 22px;font-size:1rem;justify-content:space-between;width:100%}
  .ni.has-dd>.ntop:after{display:none}
  .dd{position:static;transform:none;opacity:1;pointer-events:auto;box-shadow:none;border:none;border-radius:0;background:#F8FAFC;width:auto;padding:2px 0 8px;display:none;backdrop-filter:none}
  .dd:before{display:none}
  .ni.has-dd.open .dd{display:block;transform:none}
  .dd-row{grid-template-columns:1fr;gap:0}
  .dd-it{padding:11px 34px;border-radius:0}
  .dd-it p{display:none}
  .dd-gt{padding:8px 34px 4px}
  .dd-foot{display:none}
  .btn-nav-outline{display:none}
  .navbar-actions{gap:8px}
  .brand-logo .logo-text{font-size:1.3rem}
}
@media(max-width:380px){.btn-nav-primary{padding:9px 14px;font-size:.8rem}}