@charset "UTF-8";
/* ==========================================================================
   المصرية الهندسية — ee.com.eg
   Design System v5  |  إعادة بناء كاملة من الصفر
   --------------------------------------------------------------------------
   مبني على الماركب الفعلي لكل صفحة. بدون !important، وبدون
   تعارضات. كل سطح (فاتح/داكن) بيحدد لون نصه بنفسه.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand */
  --navy-900:#080d2e; --navy-800:#0d1452; 
  --navy-700:#141c6e; --navy:#1a237e; --navy-600:#28329b;
  --gold-700:#8a6716; --gold-600:#a67c1a; --gold:#c9982e;
  --gold-400:#dfb85c; --gold-200:#f0dfb4; --gold-50:#fbf6e9;

  --primary:var(--navy);
  --primary-dark:var(--navy-800);
  --primary-soft:#eef0fa;
  --accent:var(--gold);
  --accent-soft:var(--gold-50);

  /* Neutrals */
  --ink-900:#0f1424; --ink-800:#1e2434; --ink-700:#3a4256;
  --ink-600:#5b6478; --ink-500:#818b9e; --ink-400:#a8b0c0;
  --line:#e4e8f0; --line-soft:#eef1f6;
  --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#eff3f9;

  /* Status */
  --ok:#0f9d58; --ok-soft:#e7f6ee;
  --warn:#e8890c; --warn-soft:#fdf3e3;
  --err:#d8382f; --err-soft:#fdeceb;
  --wa:#25d366; --wa-dark:#1da851;

  /* Type scale */
  --fs-xs:.75rem; --fs-sm:.82rem; --fs-base:.94rem; --fs-md:1.02rem;
  --fs-lg:1.15rem; --fs-xl:1.35rem; --fs-2xl:1.7rem; --fs-3xl:2.1rem; --fs-4xl:2.6rem;

  /* Space */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* Radius */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* Elevation */
  --e1:0 1px 2px rgba(15,20,36,.06), 0 1px 3px rgba(15,20,36,.04);
  --e2:0 2px 6px rgba(15,20,36,.07), 0 4px 12px rgba(15,20,36,.05);
  --e3:0 6px 16px rgba(15,20,36,.09), 0 12px 28px rgba(15,20,36,.07);
  --e4:0 12px 28px rgba(15,20,36,.12), 0 24px 56px rgba(15,20,36,.1);
  --e-navy:0 8px 24px rgba(26,35,126,.26);
  --e-gold:0 8px 24px rgba(201,152,46,.3);

  --ease:cubic-bezier(.4,0,.2,1);
  --t:.22s var(--ease);
  --t-slow:.4s var(--ease);

  --container:1200px;
  --header-h:76px;

  /* legacy aliases (كود قديم بيستخدمها) */
  --white:#fff; --dark:var(--ink-900);
  --gray-900:var(--ink-900); --gray-800:var(--ink-800); --gray-700:var(--ink-700);
  --gray-600:var(--ink-600); --gray-500:var(--ink-500); --gray-400:var(--ink-400);
  --gray-300:var(--line); --gray-200:var(--line-soft); --gray-100:var(--surface-2);
  --primary-light:var(--primary-soft); --secondary:var(--gold); --secondary-dark:var(--gold-600);
  --accent-light:var(--gold-50); --gold-light:var(--gold-200);
  --navy-mid:var(--navy); --success:var(--ok); --warning:var(--warn); --danger:var(--err);
  --shadow:var(--e1); --shadow-lg:var(--e3);
  --radius:var(--r); --radius-lg:var(--r-lg); --transition:all var(--t);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
  overflow-x:hidden;
}

body{
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-base);
  line-height:1.75;
  color:var(--ink-700);
  background:var(--surface-2);
  direction:rtl;
  text-align:right;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* المفتاح: العناوين بترث لون السطح — ده بيمنع نهائياً
   مشكلة "نص غامق على خلفية غامقة" من غير أي !important */
h1,h2,h3,h4,h5,h6{
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.015em;
  color:inherit;
}
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}  h4{font-size:var(--fs-lg)}
h5{font-size:var(--fs-md)}  h6{font-size:var(--fs-base)}

p{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t)}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
table{border-collapse:collapse;width:100%}
hr{border:none;border-top:1px solid var(--line)}
strong,b{font-weight:800;color:var(--ink-900)}
::selection{background:var(--gold);color:#fff}

:focus-visible{
  outline:3px solid rgba(201,152,46,.6);
  outline-offset:2px;
  border-radius:6px;
}

/* أسطح داكنة: أي حاجة جواها بترث الأبيض */
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark h5,.on-dark h6{color:#fff}
.on-dark p{color:rgba(255,255,255,.86)}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--sp-5);
}

.section{padding:var(--sp-16) 0}
.section-tight{padding:var(--sp-10) 0}
.section-alt{background:var(--surface-2)}
.section-white{background:var(--surface)}

.content-section{padding:var(--sp-12) 0;background:var(--surface-2)}

.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 328px;
  gap:var(--sp-8);
  align-items:start;
}

.content-main{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-8);
  box-shadow:var(--e1);
  min-width:0;
}

/* ==========================================================================
   4. TYPOGRAPHY INSIDE CONTENT
   ========================================================================== */
.content-main>h2,.content-main>h3,.content-main>h4,
.content-text h2,.content-text h3,
.article-content h2,.article-content h3,
.governorate-content h2,.area-content h2,.fault-content h2{
  color:var(--ink-900);
  margin:var(--sp-8) 0 var(--sp-4);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.content-main>h2:first-child,.content-main>h3:first-child{margin-top:0}

.content-main>h2,.content-text h2,.article-content h2,.fault-content h2{
  font-size:var(--fs-xl);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);
  position:relative;
}
.content-main>h2::after,.content-text h2::after,
.article-content h2::after,.fault-content h2::after{
  content:'';position:absolute;bottom:-1px;right:0;
  width:64px;height:2px;background:var(--gold);border-radius:2px;
}

.content-main>h3,.content-text h3,.article-content h3{font-size:var(--fs-lg);color:var(--navy)}

.content-main>p,.content-text p,.article-content p,
.governorate-content p,.area-content p,.fault-content p{
  margin-bottom:var(--sp-4);
  line-height:1.95;
  color:var(--ink-700);
}

.content-main>ul,.content-main>ol,
.content-text ul,.content-text ol,
.article-content ul,.article-content ol,
.fault-content ul,.fault-content ol{
  margin:var(--sp-4) 0 var(--sp-6);
  padding-right:var(--sp-2);
}

.content-main>ul>li,.content-text ul li,.article-content ul li,.fault-content ul li{
  position:relative;
  padding-right:var(--sp-6);
  margin-bottom:var(--sp-3);
  line-height:1.9;
}
.content-main>ul>li::before,.content-text ul li::before,
.article-content ul li::before,.fault-content ul li::before{
  content:'';position:absolute;top:.72em;right:0;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
}

.content-main>ol,.content-text ol,.article-content ol{counter-reset:n}
.content-main>ol>li,.content-text ol li,.article-content ol li{
  counter-increment:n;position:relative;
  padding-right:var(--sp-8);margin-bottom:var(--sp-3);line-height:1.9;
}
.content-main>ol>li::before,.content-text ol li::before,.article-content ol li::before{
  content:counter(n);position:absolute;right:0;top:.15em;
  width:24px;height:24px;border-radius:50%;
  background:var(--primary-soft);color:var(--navy);
  font-size:var(--fs-xs);font-weight:800;
  display:grid;place-items:center;
}

/* الروابط النصية جوه المحتوى فقط */
.content-main>p a,.content-text a,.article-content a,
.fault-content a,.governorate-content a,.area-content a{
  color:var(--navy);font-weight:700;
  border-bottom:1px solid rgba(26,35,126,.28);
}
.content-main>p a:hover,.content-text a:hover,.article-content a:hover,
.fault-content a:hover{color:var(--gold);border-bottom-color:var(--gold)}

.intro-text{
  font-size:var(--fs-md);line-height:1.95;color:var(--ink-700);
  background:var(--surface-2);border-right:4px solid var(--gold);
  border-radius:var(--r);padding:var(--sp-5);margin-bottom:var(--sp-6);
}

.inline-phone{
  color:var(--navy);font-weight:800;direction:ltr;display:inline-block;
  border-bottom:2px solid var(--gold);
}
.inline-phone:hover{color:var(--gold)}

.text-danger{color:var(--err)}

/* جداول داخل المحتوى */
.content-main table,.article-content table,.fault-content table{
  margin:var(--sp-5) 0;font-size:var(--fs-sm);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--e1);
}
.content-main th,.article-content th,.fault-content th{
  background:var(--navy);color:#fff;padding:var(--sp-3) var(--sp-4);
  text-align:right;font-weight:800;
}
.content-main td,.article-content td,.fault-content td{
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);
}
.content-main tr:nth-child(even) td{background:var(--surface-2)}

/* ==========================================================================
   5. SECTION TITLES
   ========================================================================== */
.section-title{text-align:center;max-width:720px;margin:0 auto var(--sp-10)}

.section-badge{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:6px var(--sp-4);margin-bottom:var(--sp-4);
  background:var(--gold-50);color:var(--gold-700);
  border:1px solid var(--gold-200);border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:800;
}

.section-title h2{
  font-size:var(--fs-3xl);color:var(--ink-900);
  margin-bottom:var(--sp-3);display:inline-block;
}
.section-title h2::after{
  content:'';display:block;width:70px;height:3px;
  background:var(--gold);border-radius:3px;margin:var(--sp-3) auto 0;
}
.section-title p{font-size:var(--fs-md);color:var(--ink-600);line-height:1.85}

/* عنوان قسم داخلي */
.section-heading{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-xl);font-weight:900;color:var(--ink-900);
  margin:0 0 var(--sp-3);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line);position:relative;
}
.section-heading::after{
  content:'';position:absolute;bottom:-1px;right:0;
  width:80px;height:2px;background:var(--gold);
}
.section-heading-icon{
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--r);
  display:grid;place-items:center;font-size:var(--fs-md);
  background:var(--primary-soft);color:var(--navy);
}
.section-heading-alert .section-heading-icon{background:var(--err-soft);color:var(--err)}
.section-lead{font-size:var(--fs-base);color:var(--ink-600);margin-bottom:var(--sp-5)}
.section-action{text-align:center;margin-top:var(--sp-6)}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:12px var(--sp-6);
  font-size:var(--fs-base);font-weight:800;line-height:1.2;
  border-radius:var(--r);border:2px solid transparent;
  white-space:nowrap;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn i{font-size:.92em}

.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-800));color:#fff;box-shadow:var(--e-navy)}
.btn-primary:hover{box-shadow:0 12px 30px rgba(26,35,126,.38);color:#fff}

.btn-secondary,.btn-gold,.btn-accent{
  background:linear-gradient(135deg,var(--gold),var(--gold-600));color:#fff;box-shadow:var(--e-gold);
}
.btn-secondary:hover,.btn-gold:hover,.btn-accent:hover{box-shadow:0 12px 30px rgba(201,152,46,.42);color:#fff}

.btn-success{background:linear-gradient(135deg,var(--wa),var(--wa-dark));color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.3)}
.btn-success:hover{box-shadow:0 12px 30px rgba(37,211,102,.42);color:#fff}

.btn-white,.btn-light{background:#fff;color:var(--navy);box-shadow:var(--e2)}
.btn-white:hover,.btn-light:hover{background:var(--gold-50);color:var(--navy-800)}

.btn-outline{background:transparent;border-color:var(--line);color:var(--ink-700)}
.btn-outline-primary{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline:hover,.btn-outline-primary:hover{
  background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--e-navy);
}

.btn-glass{
  background:rgba(255,255,255,.14);color:#fff;
  border-color:rgba(255,255,255,.3);backdrop-filter:blur(10px);
}
.btn-glass:hover{background:rgba(255,255,255,.24);color:#fff}

.btn-sm{padding:8px var(--sp-4);font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-lg{padding:15px var(--sp-8);font-size:var(--fs-md);border-radius:var(--r-lg)}
.btn-block{display:flex;width:100%}

.cta-buttons{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}

.spinner{
  width:18px;height:18px;border-radius:50%;display:inline-block;
  border:3px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   7. TOP BAR + HEADER + NAV
   ========================================================================== */
.top-bar{
  background:var(--navy-900);color:rgba(255,255,255,.85);
  font-size:var(--fs-xs);padding:9px 0;
  border-bottom:1px solid rgba(201,152,46,.22);
}
.top-bar-content{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.top-bar-content span,.top-bar-content a{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.top-bar-content i{color:var(--gold);font-size:.78rem}
.top-bar-content a:hover{color:var(--gold)}

.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t),background var(--t);
}
.header.scrolled{box-shadow:var(--e2);background:rgba(255,255,255,.97)}
.header>.container{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);min-height:var(--header-h);
}

/* Logo */
.logo{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.logo-icon{
  width:48px;height:48px;flex:0 0 48px;border-radius:14px;
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--navy-800));
  color:var(--gold);font-size:22px;box-shadow:var(--e-navy);
}
.logo-icon img{width:34px;height:34px;object-fit:contain}
.logo-text{display:flex;flex-direction:column;line-height:1.25}
.logo-name{font-size:1.22rem;font-weight:900;color:var(--navy);letter-spacing:-.02em}
.logo-tagline{font-size:.72rem;color:var(--ink-500);font-weight:600}

/* Desktop nav — الروابط أبناء مباشرين، مفيش <li> */
.nav-desktop{display:flex;align-items:center;gap:2px}

.nav-desktop>a,
.nav-desktop .dropdown-toggle{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:700;color:var(--ink-700);
  white-space:nowrap;cursor:pointer;
  transition:color var(--t),background var(--t);
}
.nav-desktop>a::after,
.nav-desktop .dropdown-toggle::after{
  content:'';position:absolute;bottom:4px;right:14px;left:14px;height:2px;
  border-radius:2px;background:var(--gold);
  transform:scaleX(0);transition:transform var(--t);
}
.nav-desktop>a:hover,.nav-desktop>a.active,
.nav-dropdown:hover .dropdown-toggle,.dropdown-toggle.active{
  color:var(--navy);background:var(--primary-soft);
}
.nav-desktop>a:hover::after,.nav-desktop>a.active::after,
.nav-dropdown:hover .dropdown-toggle::after{transform:scaleX(1)}

.nav-desktop .dropdown-toggle i{font-size:.68rem;transition:transform var(--t)}
.nav-dropdown:hover .dropdown-toggle i{transform:rotate(180deg)}

.nav-dropdown{position:relative}
.nav-dropdown .dropdown-menu{
  position:absolute;top:calc(100% + 12px);right:0;min-width:262px;
  background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--r-lg);
  box-shadow:var(--e4);padding:var(--sp-2);z-index:1200;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t),visibility var(--t),transform var(--t);
}
/* جسر خفي يمنع القائمة تقفل في المسافة */
.nav-dropdown .dropdown-menu::before{
  content:'';position:absolute;top:-14px;right:0;left:0;height:14px;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown .dropdown-menu.show{opacity:1;visibility:visible;transform:translateY(0)}

.nav-dropdown .dropdown-menu a{
  display:flex;align-items:center;gap:10px;
  padding:11px var(--sp-3);border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600;color:var(--ink-700);
  transition:background var(--t),color var(--t),transform var(--t);
}
.nav-dropdown .dropdown-menu a i{width:20px;text-align:center;color:var(--gold)}
.nav-dropdown .dropdown-menu a:hover{
  background:var(--primary-soft);color:var(--navy);transform:translateX(-4px);
}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.header-call{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px var(--sp-5);border-radius:var(--r);
  background:linear-gradient(135deg,var(--navy),var(--navy-800));
  color:#fff;font-weight:800;font-size:.92rem;white-space:nowrap;
  box-shadow:var(--e-navy);transition:transform var(--t),box-shadow var(--t);
}
.header-call i{color:var(--gold);font-size:.88rem}
.header-call:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(26,35,126,.38);color:#fff}

.menu-toggle{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;font-size:1.15rem;
  background:var(--primary-soft);border:1px solid var(--line);color:var(--navy);
  transition:background var(--t),color var(--t);
}
.menu-toggle:hover{background:var(--navy);color:#fff}

/* ==========================================================================
   8. MOBILE MENU (drawer)
   ========================================================================== */
.mobile-menu-overlay{
  position:fixed;inset:0;background:rgba(8,13,46,.55);
  backdrop-filter:blur(3px);z-index:1400;
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.mobile-menu-overlay.active{opacity:1;visibility:visible}

.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);
  background:var(--surface);z-index:1500;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s var(--ease);
  box-shadow:-8px 0 40px rgba(8,13,46,.2);
}
.mobile-menu.active{transform:translateX(0)}

.mobile-menu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5);background:linear-gradient(135deg,var(--navy),var(--navy-800));
  color:#fff;font-weight:900;font-size:var(--fs-md);flex-shrink:0;
}
.mobile-menu-close{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;font-size:1rem;
  transition:background var(--t);
}
.mobile-menu-close:hover{background:rgba(255,255,255,.26)}

.mobile-menu-list{flex:1;overflow-y:auto;padding:var(--sp-3);overscroll-behavior:contain}
.mobile-menu-list li{margin-bottom:2px}
.mobile-menu-list a{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:12px var(--sp-3);border-radius:var(--r-sm);
  font-weight:700;font-size:.92rem;color:var(--ink-700);
  transition:background var(--t),color var(--t),transform var(--t);
}
.mobile-menu-list a i{width:22px;text-align:center;color:var(--gold)}
.mobile-menu-list a:hover{background:var(--primary-soft);color:var(--navy);transform:translateX(-4px)}

.menu-divider{
  padding:var(--sp-4) var(--sp-3) var(--sp-2);
  font-size:var(--fs-xs);font-weight:800;color:var(--ink-400);
  text-transform:uppercase;letter-spacing:.06em;
}

.mobile-menu-cta{
  padding:var(--sp-4);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--sp-2);flex-shrink:0;
  background:var(--surface-2);
}

/* ==========================================================================
   9. MOBILE BOTTOM NAV — الروابط أبناء مباشرين للـ nav (مفيش .container)
   ========================================================================== */
.mobile-bottom-nav{
  display:none;
  position:fixed;bottom:0;right:0;left:0;z-index:1000;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:6px var(--sp-2) calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -4px 20px rgba(15,20,36,.08);
}

.bottom-nav-item{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:7px 4px;border-radius:var(--r-sm);
  font-size:.68rem;font-weight:700;color:var(--ink-500);
  text-align:center;transition:color var(--t),background var(--t);
}
.bottom-nav-item i{font-size:1.12rem;line-height:1}
.bottom-nav-item span{
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bottom-nav-item:hover,.bottom-nav-item.active{color:var(--navy);background:var(--primary-soft)}

.bottom-nav-item.call-btn{
  background:linear-gradient(135deg,var(--navy),var(--navy-800));
  color:#fff;box-shadow:var(--e-navy);
  transform:translateY(-8px);
  padding:11px 4px;border-radius:var(--r);
  flex:0 0 74px;
}
.bottom-nav-item.call-btn i{font-size:1.2rem}
.bottom-nav-item.call-btn:hover{background:linear-gradient(135deg,var(--navy-600),var(--navy));color:#fff}

/* ==========================================================================
   10. FLOATING BUTTONS
   ========================================================================== */
.float-buttons{
  position:fixed;bottom:96px;left:18px;z-index:990;
  display:flex;flex-direction:column;gap:10px;
}
.float-btn{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:1.3rem;
  box-shadow:var(--e3);transition:transform var(--t),box-shadow var(--t);
}
.float-btn.whatsapp{background:linear-gradient(135deg,var(--wa),var(--wa-dark))}
.float-btn.call,.float-btn.phone{background:linear-gradient(135deg,var(--navy),var(--navy-800))}
.float-btn:hover{transform:scale(1.09) translateY(-2px);box-shadow:var(--e4);color:#fff}

/* الفقاعة تظهر فقط عند المرور بالماوس */
.float-bubble{
  position:fixed;bottom:164px;left:80px;z-index:990;
  background:var(--surface);color:var(--ink-700);
  padding:10px var(--sp-4);border-radius:var(--r);
  box-shadow:var(--e3);font-size:.84rem;font-weight:700;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px) scale(.94);
  transition:opacity var(--t),visibility var(--t),transform var(--t);
}
.float-bubble::after{
  content:'';position:absolute;bottom:-6px;left:22px;
  width:12px;height:12px;background:var(--surface);transform:rotate(45deg);
}
.float-buttons:hover~.float-bubble,
.float-bubble:hover{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}

/* ==========================================================================
   11. PAGE HERO (page-header)
   ========================================================================== */
.page-header{
  position:relative;isolation:isolate;overflow:hidden;
  padding:var(--sp-16) 0 var(--sp-12);
  text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-800));
  background-size:cover;background-position:center;
}
.page-header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,13,46,.28),rgba(8,13,46,.62));
}
.page-header::after{
  content:'';position:absolute;bottom:0;right:0;left:0;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
}
.page-header h1{
  font-size:var(--fs-4xl);font-weight:900;
  text-shadow:0 3px 16px rgba(0,0,0,.35);margin-bottom:var(--sp-3);
}
.page-header p{color:rgba(255,255,255,.9);font-size:var(--fs-md);max-width:640px;margin:0 auto}
.page-header-title{
  font-size:var(--fs-sm);font-weight:800;color:var(--gold);
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:var(--sp-2);
}

.brand-page-header{padding:var(--sp-12) 0 var(--sp-10)}

.brand-header-logo,.category-logo-card{
  width:96px;height:96px;margin:0 auto var(--sp-5);padding:14px;
  display:grid;place-items:center;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px);box-shadow:var(--e3);
}
.brand-header-logo img{max-width:100%;max-height:100%;object-fit:contain}
.category-logo-card i{font-size:34px;color:#fff}

.breadcrumb{
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp-2);margin-top:var(--sp-4);
  font-size:var(--fs-sm);flex-wrap:wrap;
}
.breadcrumb a{color:rgba(255,255,255,.82)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:rgba(255,255,255,.5)}

/* ==========================================================================
   12. MOBILE QUICK ACTIONS
   ========================================================================== */
.mobile-quick-actions{display:none;gap:10px;padding:12px var(--sp-4);background:var(--surface);border-bottom:1px solid var(--line)}
.quick-action-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:var(--r);color:#fff;font-weight:800;font-size:.9rem;
  transition:transform var(--t),box-shadow var(--t);
}
.quick-action-btn.call{background:linear-gradient(135deg,var(--navy),var(--navy-800));box-shadow:var(--e-navy)}
.quick-action-btn.whatsapp{background:linear-gradient(135deg,var(--wa),var(--wa-dark));box-shadow:0 8px 24px rgba(37,211,102,.3)}
.quick-action-btn:active{transform:scale(.97)}

/* ==========================================================================
   13. STATS BAR  (بعرض السلايدر، مش عرض الشاشة)
   ========================================================================== */
.stats-bar-section{background:transparent;padding:0;margin-top:-28px;position:relative;z-index:5}
.stats-bar{
  display:flex;align-items:center;justify-content:space-around;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
  color:#fff;border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-5);
  box-shadow:0 16px 40px rgba(8,13,46,.28);
  border:1px solid rgba(201,152,46,.22);
}
.stats-bar .stat-item{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-5);min-width:0}
.stat-icon{
  width:50px;height:50px;flex:0 0 50px;border-radius:14px;display:grid;place-items:center;
  background:rgba(201,152,46,.16);border:1px solid rgba(201,152,46,.28);
}
.stat-icon i{color:var(--gold);font-size:1.25rem}
.stat-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.stat-number{font-size:1.5rem;font-weight:900;line-height:1.1;color:#fff}
.stat-label{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.72)}
.stat-divider{width:1px;height:42px;background:rgba(255,255,255,.16);flex-shrink:0}

/* ==========================================================================
   14. CARD PRIMITIVES
   ========================================================================== */
.card,
.service-card,.feature-card,.fault-card,.blog-card,
.area-card,.brand-card,.contact-box,.sidebar-widget,.gov-block{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}

.card-title{
  font-size:var(--fs-base);font-weight:800;color:var(--ink-900);
  margin:0;border:none;padding:0;
}

/* ==========================================================================
   15. SERVICES
   ========================================================================== */
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-4)}
.service-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-4);text-align:center;
}
.service-card:hover{border-color:var(--gold);box-shadow:var(--e3);transform:translateY(-5px)}
.service-card .icon{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--primary-soft);transition:background var(--t);
}
.service-card:hover .icon{background:var(--gold-50)}
.service-card .icon i{font-size:1.4rem;color:var(--navy);transition:color var(--t)}
.service-card:hover .icon i{color:var(--gold)}
.service-card h3{font-size:.95rem;font-weight:700;color:var(--ink-800)}

/* بطاقات الخدمات بالصور */
.services-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--sp-4)}
.service-image-card{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-lg);box-shadow:var(--e2);
  transition:transform var(--t),box-shadow var(--t);
}
.service-image-card:hover{transform:translateY(-5px);box-shadow:var(--e4)}
.service-image-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.service-image-card:hover img{transform:scale(1.07)}

.service-card-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sp-4);color:#fff;
  background:linear-gradient(to top,
    rgba(8,13,46,.93) 0%,rgba(8,13,46,.6) 44%,rgba(8,13,46,.06) 100%);
}
.service-card-overlay h3{
  font-size:var(--fs-md);font-weight:800;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.55);line-height:1.45;
}
.service-card-icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:10px;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);
}
.service-card-icon i{color:var(--gold);font-size:1.1rem}

/* ==========================================================================
   16. BRANDS
   ========================================================================== */
.brands-grid{display:grid;gap:var(--sp-4)}
.brands-grid-with-logos{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--sp-3)}

.brand-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:var(--sp-5) var(--sp-3);text-align:center;
  position:relative;overflow:hidden;
}
.brand-card::before{
  content:'';position:absolute;top:0;right:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--navy));
  transform:scaleX(0);transition:transform var(--t);
}
.brand-card:hover{border-color:var(--gold);box-shadow:var(--e3);transform:translateY(-4px)}
.brand-card:hover::before{transform:scaleX(1)}

.brand-card-with-logo{min-height:130px}
.brand-card .brand-logo{
  width:84px;height:46px;object-fit:contain;padding:6px 8px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  transition:border-color var(--t);
}
.brand-card:hover .brand-logo{border-color:var(--gold)}
.brand-card .card-title,.brand-card h3,.brand-card h4{
  font-size:.88rem;font-weight:700;color:var(--ink-800);margin:0;border:none;padding:0;
}

/* صفحة كل الماركات */
.brands-grid-large{grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:var(--sp-5)}
.brand-card-large{
  min-height:246px;padding:var(--sp-6) var(--sp-5);
  justify-content:space-between;gap:var(--sp-3);
}
.brand-logo-wrapper{
  width:104px;height:72px;display:grid;place-items:center;padding:10px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  transition:border-color var(--t),background var(--t);
}
.brand-card-large:hover .brand-logo-wrapper{border-color:var(--gold)}
.brand-logo-large{max-width:100%;max-height:100%;object-fit:contain}
.brand-logo-placeholder{background:linear-gradient(135deg,var(--primary-soft),var(--surface-2))}
.brand-logo-placeholder i{font-size:1.8rem;color:var(--ink-400);transition:color var(--t)}
.brand-card-large:hover .brand-logo-placeholder i{color:var(--gold)}
.brand-card-large .card-title{font-size:var(--fs-md);font-weight:900;color:var(--ink-900)}
.brand-name-en{font-size:.78rem;font-weight:700;color:var(--ink-500);letter-spacing:.04em}
.brand-country{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--line-soft);
  font-size:.76rem;font-weight:700;color:var(--ink-500);
}
.brand-country i{color:var(--gold)}

/* ==========================================================================
   17. AREAS
   ========================================================================== */
.areas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-8)}
.area-card{display:flex;align-items:center;padding:13px var(--sp-4);border-radius:var(--r)}
.area-card:hover{border-color:var(--gold);background:var(--surface-2);transform:translateX(-4px);box-shadow:var(--e1)}
.area-card .card-title,.area-card h3,.area-card h4{
  display:flex;align-items:center;gap:9px;
  font-size:.89rem;font-weight:700;color:var(--ink-800);
  margin:0;border:none;padding:0;line-height:1.5;
}
.area-card i{color:var(--gold);font-size:.84rem;flex-shrink:0}

.areas-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)}
.area-page-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.area-page-card:hover{border-color:var(--gold);box-shadow:var(--e3);transform:translateY(-4px)}

/* صفحة مناطق الخدمة — بلوك كل محافظة */
.gov-block{margin-bottom:var(--sp-6);padding:var(--sp-6)}
.gov-block:hover{border-color:var(--line);box-shadow:var(--e2)}
.gov-block-title{
  display:flex;align-items:center;gap:11px;
  font-size:var(--fs-lg);font-weight:900;color:var(--navy);
  margin:0 0 var(--sp-5);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line);position:relative;
}
.gov-block-title::after{content:'';position:absolute;bottom:-1px;right:0;width:66px;height:2px;background:var(--gold)}
.gov-block-title i{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--navy);font-size:.9rem;
}
.gov-block-title a{color:inherit;border:none}
.gov-block-title a:hover{color:var(--gold)}
.gov-block-count{
  margin-inline-start:auto;background:var(--surface-3);color:var(--ink-600);
  font-size:.73rem;font-weight:800;padding:4px 12px;border-radius:var(--r-pill);
}
.gov-block .areas-grid{margin:0}

/* ==========================================================================
   18. FAULTS
   ========================================================================== */
.faults-section{margin:var(--sp-10) 0}
.faults-list{display:flex;flex-direction:column;gap:var(--sp-3)}

.fault-list-item{
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--t),background var(--t),transform var(--t),box-shadow var(--t);
}
.fault-list-item:hover{border-color:var(--gold);background:var(--surface-2);transform:translateX(-4px);box-shadow:var(--e2)}
.fault-list-icon{
  width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;
  background:var(--err-soft);color:var(--err);font-size:1.15rem;
}
.fault-list-content{flex:1;min-width:0}
.fault-list-content .card-title,.fault-list-content h3{
  font-size:var(--fs-md);font-weight:800;color:var(--ink-900);
  margin:0 0 6px;border:none;padding:0;
}
.fault-list-content p{font-size:.87rem;color:var(--ink-600);line-height:1.65;margin-bottom:8px}
.fault-list-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;font-weight:700;color:var(--navy);
  transition:color var(--t),gap var(--t);
}
.fault-list-item:hover .fault-list-link{color:var(--gold);gap:10px}

.faults-grid,.related-faults,.category-faults{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--sp-4);
}
.fault-card{padding:var(--sp-5);display:block}
.fault-card:hover{border-color:var(--gold);box-shadow:var(--e3);transform:translateY(-4px)}
.fault-card h3{font-size:.98rem;font-weight:800;color:var(--navy);margin-bottom:8px}
.fault-card p{font-size:.85rem;color:var(--ink-600);margin:0}

.fault-item{
  background:var(--surface);border:1px solid var(--line);
  border-right:4px solid var(--gold);border-radius:var(--r);
  padding:var(--sp-5);margin-bottom:var(--sp-4);
  transition:box-shadow var(--t),transform var(--t);
}
.fault-item:hover{box-shadow:var(--e2);transform:translateX(-3px)}
.fault-item-title{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-md);font-weight:800;color:var(--ink-900);margin-bottom:10px;
}
.fault-item-title i{color:var(--gold)}
.fault-item p{margin-bottom:6px;font-size:.9rem}

/* بلوكات صفحة العطل */
.fault-description,.fault-symptoms,.fault-causes,
.fault-solutions,.fault-prevention,.fault-cost{margin-bottom:var(--sp-6)}

.symptoms-content,.causes-content,.solutions-content,.prevention-content{
  padding:var(--sp-5);border-radius:var(--r);margin-top:var(--sp-4);
}
.symptoms-content{background:#f6effa;border-right:4px solid #9c27b0}
.causes-content{background:var(--err-soft);border-right:4px solid var(--err)}
.solutions-content{background:var(--ok-soft);border-right:4px solid var(--ok)}
.prevention-content{background:#e9f2fd;border-right:4px solid #2196f3}

.symptoms-content ul,.causes-content ul,.solutions-content ul,.prevention-content ul,
.symptoms-content ol,.causes-content ol,.solutions-content ol,.prevention-content ol{
  padding-right:var(--sp-5);margin:0;
}
.symptoms-content li,.causes-content li,.solutions-content li,.prevention-content li{
  padding:6px 0;line-height:1.85;
}

/* ==========================================================================
   19. GALLERY / أعمالنا
   ========================================================================== */
.gallery-masonry{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:224px;gap:var(--sp-4)}
/* الامتداد لعنصرين فقط ولو فيه 4 عناصر أو أكتر */
.gallery-item:nth-child(1):nth-last-child(n+4),
.gallery-item:nth-child(4):nth-last-child(n+3){grid-row:span 2}

.gallery-item{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-3);box-shadow:var(--e2);
  transition:transform var(--t),box-shadow var(--t);
}
.gallery-item:hover{transform:translateY(-5px);box-shadow:var(--e4)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.gallery-item:hover img{transform:scale(1.06)}

.gallery-info,.gallery-overlay{
  position:absolute;inset:auto 0 0 0;
  display:flex;flex-direction:column;gap:5px;
  padding:52px var(--sp-4) var(--sp-4);color:#fff;
  background:linear-gradient(to top,
    rgba(8,13,46,.96) 0%,rgba(8,13,46,.8) 40%,rgba(8,13,46,.3) 72%,transparent 100%);
}
.gallery-info h3,.gallery-info h4,.gallery-overlay h3,.gallery-overlay h4{
  font-size:var(--fs-md);font-weight:800;color:#fff;line-height:1.45;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gallery-info p,.gallery-overlay p{
  font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.88);
  text-shadow:0 1px 8px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gallery-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.gallery-tags span{
  background:rgba(201,152,46,.95);color:#fff;
  font-size:.7rem;font-weight:800;padding:4px 11px;
  border-radius:var(--r-pill);white-space:nowrap;
}

/* ==========================================================================
   20. BLOG
   ========================================================================== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-6)}
.blog-card{display:flex;flex-direction:column;overflow:hidden}
.blog-card:hover{border-color:var(--gold);box-shadow:var(--e3);transform:translateY(-5px)}
.blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform var(--t-slow)}
.blog-card:hover img{transform:scale(1.05)}
.blog-card-content,.blog-card .card-content{padding:var(--sp-5);display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card-content .date,.blog-card .card-meta{
  display:flex;align-items:center;gap:6px;
  font-size:.79rem;color:var(--ink-500);font-weight:600;
}
.blog-card-content .date i,.blog-card .card-meta i{color:var(--gold)}
.blog-card-content h3,.blog-card .card-content h3{
  font-size:var(--fs-md);font-weight:800;color:var(--ink-900);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-content p,.blog-card .card-content p{
  font-size:.88rem;color:var(--ink-600);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.read-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  font-size:.87rem;font-weight:800;color:var(--navy);
  transition:color var(--t),gap var(--t);
}
.blog-card:hover .read-more{color:var(--gold);gap:10px}

.article-header{margin-bottom:var(--sp-6)}
.article-header img{width:100%;border-radius:var(--r-lg);margin-bottom:var(--sp-5);box-shadow:var(--e2)}
.article-meta{
  display:flex;gap:var(--sp-4);flex-wrap:wrap;
  font-size:.84rem;color:var(--ink-500);margin-bottom:var(--sp-4);
}
.article-meta i{color:var(--gold);margin-inline-end:4px}
.article-header h1{font-size:var(--fs-2xl);color:var(--ink-900);line-height:1.4}
.article-content img{border-radius:var(--r);margin:var(--sp-4) 0}

/* ==========================================================================
   21. SIDEBAR
   ========================================================================== */
.sidebar{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:var(--sp-4)}
.sidebar-widget{padding:var(--sp-5)}
.sidebar-widget[style*="linear-gradient"]{border-color:transparent;box-shadow:var(--e-navy)}

.sidebar-heading,.sidebar-widget>h2:first-child,.sidebar-widget>h3:first-child{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-md);font-weight:800;color:inherit;
  margin:0 0 var(--sp-4);padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--gold);
}
.sidebar-widget[style*="linear-gradient"] .sidebar-heading{border-bottom-color:rgba(255,255,255,.3)}
.sidebar-widget .btn{margin-bottom:8px}
.sidebar-widget .btn:last-child{margin-bottom:0}
.mb-2{margin-bottom:8px}

.sidebar-widget ul{padding:0;margin:0}
.sidebar-widget .footer-links{display:grid;grid-template-columns:1fr;gap:2px}
.sidebar-widget .footer-links a{
  display:flex;align-items:center;gap:9px;
  padding:10px 8px;border-radius:var(--r-sm);
  font-size:.89rem;font-weight:600;color:var(--ink-700);
  transition:background var(--t),color var(--t),transform var(--t);
}
.sidebar-widget .footer-links a i{color:var(--gold);width:18px;text-align:center;flex-shrink:0}
.sidebar-widget .footer-links a:hover{background:var(--primary-soft);color:var(--navy);transform:translateX(-4px)}

.sidebar-brand-logo{
  text-align:center;padding:var(--sp-4);margin-bottom:var(--sp-4);
  background:var(--surface-2);border-radius:var(--r);
}
.sidebar-brand-logo img{max-width:130px;margin:0 auto}

/* ==========================================================================
   22. CTA BLOCKS
   ========================================================================== */
.cta-section{
  padding:var(--sp-16) 0;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-900));
}
.cta-section h2{font-size:var(--fs-3xl);font-weight:900;margin-bottom:var(--sp-3);color:#fff}
.cta-section p{font-size:var(--fs-md);color:rgba(255,255,255,.88);max-width:620px;margin:0 auto var(--sp-6)}

.cta-box{
  background:var(--gold-50);border:1px solid var(--gold-200);
  border-right:4px solid var(--gold);border-radius:var(--r-lg);
  padding:var(--sp-6);text-align:center;margin-top:var(--sp-8);
}
.cta-box h3{color:var(--navy);margin-bottom:10px}
.cta-box p{color:var(--ink-700);margin-bottom:var(--sp-4)}

.cta-box-enhanced{
  padding:var(--sp-8);border-radius:var(--r-xl);text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-800));
  box-shadow:var(--e-navy);margin:var(--sp-8) 0;
}
.cta-box-enhanced h2,.cta-box-enhanced h3{color:#fff;margin-bottom:10px}
.cta-box-enhanced p{color:rgba(255,255,255,.88);margin-bottom:var(--sp-5)}

.mega-cta-section{padding:var(--sp-12) 0}
.mega-cta{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--e4)}
.mega-cta-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.mega-cta::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(8,13,46,.93),rgba(26,35,126,.8));
}
.mega-cta-content{padding:var(--sp-16) var(--sp-6);text-align:center;color:#fff}
.mega-cta-content h2{font-size:var(--fs-3xl);color:#fff;margin-bottom:var(--sp-3)}
.mega-cta-content p{color:rgba(255,255,255,.88);font-size:var(--fs-md);margin-bottom:var(--sp-6)}
.hero-cta-group{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px var(--sp-4);margin-bottom:var(--sp-4);
  background:rgba(201,152,46,.2);border:1px solid rgba(201,152,46,.45);
  border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:800;color:#fff;
}

/* ==========================================================================
   23. FEATURES
   ========================================================================== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-5)}
.feature-card{padding:var(--sp-6) var(--sp-5);text-align:center}
.feature-card:hover{border-color:var(--gold);box-shadow:var(--e3);transform:translateY(-4px)}
.feature-card .icon{
  width:58px;height:58px;margin:0 auto var(--sp-4);border-radius:50%;
  display:grid;place-items:center;background:var(--primary-soft);
}
.feature-card .icon i{font-size:1.4rem;color:var(--navy)}
.feature-card h4{font-size:var(--fs-xl);font-weight:900;color:var(--navy);margin-bottom:6px}
.feature-card p{font-size:.87rem;color:var(--ink-600)}

/* ==========================================================================
   24. CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--sp-8);align-items:start}
.contact-info h2{font-size:var(--fs-2xl);color:var(--ink-900);margin-bottom:var(--sp-3)}
.contact-info>p{color:var(--ink-600);line-height:1.85;margin-bottom:var(--sp-5)}

.contact-box{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5);margin-bottom:var(--sp-3)}
.contact-box:hover{border-color:var(--gold);box-shadow:var(--e2);transform:translateX(-4px)}
.contact-box .icon{
  width:52px;height:52px;flex:0 0 52px;border-radius:14px;
  display:grid;place-items:center;font-size:1.3rem;
}
.contact-box .icon.phone{background:var(--primary-soft);color:var(--navy)}
.contact-box .icon.whatsapp{background:var(--ok-soft);color:var(--wa-dark)}
.contact-box .icon.clock{background:var(--warn-soft);color:var(--warn)}
.contact-box .icon.location{background:#fdecf3;color:#e0457f}
.contact-box h3{font-size:.86rem;font-weight:700;color:var(--ink-600);margin-bottom:3px}
.contact-box .value{font-size:var(--fs-md);font-weight:800;color:var(--ink-900);direction:ltr;display:inline-block}
.contact-info-card{padding:var(--sp-5);text-align:center}

/* ==========================================================================
   25. FORMS
   ========================================================================== */
.form-group{margin-bottom:var(--sp-4)}
.form-group label{display:block;font-weight:700;font-size:.88rem;color:var(--ink-700);margin-bottom:7px}

.form-group input,.form-group select,.form-group textarea,
.contact-booking-form input,.contact-booking-form select,.contact-booking-form textarea{
  width:100%;padding:12px var(--sp-4);
  background:var(--surface-2);
  border:2px solid var(--line);border-radius:var(--r-sm);
  font-size:.93rem;font-family:inherit;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
.contact-booking-form input:focus,.contact-booking-form select:focus,.contact-booking-form textarea:focus{
  outline:none;border-color:var(--gold);background:var(--surface);
  box-shadow:0 0 0 4px rgba(201,152,46,.14);
}
.form-group textarea{resize:vertical;min-height:88px}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--ink-400)}

.contact-booking-form{
  background:var(--surface);border:1px solid var(--line);
  border-top:4px solid var(--gold);border-radius:var(--r-lg);
  padding:var(--sp-8);box-shadow:var(--e2);
}
.booking-form-header{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-6);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line);
}
.booking-form-header i{font-size:1.5rem;color:var(--gold)}
.booking-form-header h3{font-size:var(--fs-lg);font-weight:800;color:var(--ink-900)}

/* Steps */
.booking-steps{
  display:flex;align-items:flex-start;justify-content:center;
  position:relative;margin-bottom:var(--sp-8);padding:0 var(--sp-5);
}
.booking-steps::before{
  content:'';position:absolute;top:20px;right:64px;left:64px;height:3px;
  background:var(--line);z-index:0;
}
.booking-steps .step{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex:1;position:relative;z-index:1;
}
.step-number{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-3);border:3px solid var(--line);color:var(--ink-500);
  font-weight:800;transition:all var(--t);
}
.step-label{font-size:.8rem;font-weight:700;color:var(--ink-500);text-align:center;transition:color var(--t)}
.step.active .step-number{
  background:var(--gold);border-color:var(--gold);color:#fff;
  transform:scale(1.1);box-shadow:var(--e-gold);
}
.step.active .step-label{color:var(--gold-700);font-weight:800}
.step.completed .step-number{background:var(--navy);border-color:var(--navy);color:#fff}
.step.completed .step-label{color:var(--navy)}

.step-title{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-md);font-weight:800;color:var(--ink-900);margin-bottom:var(--sp-5);
}
.step-title i{color:var(--gold)}
.step-buttons{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.step-buttons .btn{flex:1}

.booking-step-content{display:none}
.booking-step-content.active{display:block;animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Device & brand pickers */
.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-bottom:var(--sp-5)}
.device-option,.brand-option{display:block;cursor:pointer}
.device-option input,.brand-option input{position:absolute;opacity:0;pointer-events:none}

.device-card,.brand-card-select{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:var(--sp-4) 10px;min-height:88px;
  background:var(--surface-2);border:2px solid var(--line);border-radius:var(--r);
  font-size:.84rem;font-weight:700;color:var(--ink-700);text-align:center;
  transition:border-color var(--t),background var(--t),color var(--t),box-shadow var(--t);
}
.device-card i{font-size:1.5rem;color:var(--navy);transition:color var(--t)}
.device-card:hover,.brand-card-select:hover{border-color:var(--navy);background:var(--surface)}
.device-option.selected .device-card,.device-option input:checked+.device-card,
.device-card.active,.device-card.selected,
.brand-option.selected .brand-card-select,.brand-option input:checked+.brand-card-select{
  border-color:var(--gold);background:var(--gold-50);color:var(--navy-800);
  box-shadow:0 4px 14px rgba(201,152,46,.22);
}
.device-option.selected .device-card i,.device-option input:checked+.device-card i{color:var(--gold)}

.brand-grid,.brand-grid-with-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;max-height:330px;overflow-y:auto;padding:2px}
.brand-select-logo{width:58px;height:38px;object-fit:contain}
.brand-card-select.has-logo .brand-letter-box{display:none}
.brand-letter-box{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-weight:900;font-size:1.05rem;
}

/* Success state */
.booking-success{text-align:center;padding:var(--sp-8) var(--sp-5)}
.success-icon{margin-bottom:var(--sp-5)}
.success-icon i,.booking-success>i{font-size:64px;color:var(--wa)}
.booking-success h3{font-size:var(--fs-xl);color:var(--ink-900);margin-bottom:8px}
.booking-number-box{
  max-width:300px;margin:var(--sp-5) auto;padding:var(--sp-4);
  background:var(--surface-2);border:2px dashed var(--gold);border-radius:var(--r);
}
.booking-number-box span{display:block;font-size:.82rem;color:var(--ink-500);margin-bottom:5px}
.booking-number-box strong{font-size:var(--fs-lg);color:var(--navy);letter-spacing:.05em}
.tracking-info-box{max-width:420px;margin:var(--sp-5) auto}
.tracking-info-box label{display:block;font-size:.83rem;font-weight:700;color:var(--ink-600);margin-bottom:7px}
.tracking-link-wrapper{display:flex;border:2px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.tracking-link-wrapper input{flex:1;border:none;padding:10px var(--sp-3);font-size:.83rem;background:var(--surface-2);direction:ltr}
.tracking-link-wrapper input:focus{outline:none}
.tracking-link-wrapper button{background:var(--navy);color:#fff;padding:10px var(--sp-4);transition:background var(--t)}
.tracking-link-wrapper button:hover{background:var(--navy-800)}
.success-actions{display:flex;flex-direction:column;gap:10px;max-width:350px;margin:var(--sp-6) auto 0}

/* ==========================================================================
   26. MODAL + ALERTS
   ========================================================================== */
.booking-modal-overlay{
  display:none;position:fixed;inset:0;z-index:3000;
  background:rgba(8,13,46,.62);backdrop-filter:blur(4px);
}
.booking-modal-overlay.active{display:block}

.booking-modal{
  display:none;position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:3001;
  width:calc(100% - 32px);max-width:600px;max-height:90vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--e4);
}
.booking-modal.active{display:block;animation:modalIn .28s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.modal-close{
  position:absolute;top:var(--sp-4);left:var(--sp-4);
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-600);font-size:1rem;z-index:2;
  transition:background var(--t),color var(--t);
}
.modal-close:hover{background:var(--err);color:#fff}

/* التنبيه مخفي وهو فاضي — كان ظاهر دايماً */
.custom-alert{
  position:fixed;bottom:var(--sp-6);left:50%;transform:translateX(-50%) translateY(16px);
  z-index:4000;padding:14px var(--sp-6);border-radius:var(--r);
  background:var(--ink-900);color:#fff;font-weight:700;font-size:.9rem;
  box-shadow:var(--e4);max-width:calc(100% - 32px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t),visibility var(--t),transform var(--t);
}
.custom-alert:empty{display:none}
.custom-alert:not(:empty){opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   27. SHARE BUTTONS
   ========================================================================== */
.share-buttons{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--line);
}
.share-buttons span{font-weight:700;color:var(--ink-600);font-size:.89rem}
.share-buttons a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:.9rem;transition:transform var(--t),box-shadow var(--t);
}
.share-fb{background:#1877f2}.share-tw{background:#1da1f2}
.share-wa{background:var(--wa)}.share-tg{background:#0088cc}
.share-buttons a:hover{transform:translateY(-3px);box-shadow:var(--e2);color:#fff}

/* ==========================================================================
   28. TRACK ORDER PAGE
   ========================================================================== */
.status-icon{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  font-size:1.7rem;margin:0 auto var(--sp-4);
  background:var(--primary-soft);color:var(--navy);
}
.status-content{text-align:center}
.status-note{
  display:flex;align-items:flex-start;gap:10px;
  padding:var(--sp-4);margin-top:var(--sp-4);
  background:var(--warn-soft);border-right:4px solid var(--warn);border-radius:var(--r-sm);
  font-size:.88rem;color:var(--ink-700);
}
.status-note i{color:var(--warn);margin-top:3px}

.step-check,.completed-icon{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok);color:#fff;font-size:.8rem;
}
.step-name{font-weight:800;color:var(--ink-900);font-size:.93rem}
.step-desc{font-size:.83rem;color:var(--ink-600)}

.date-icon{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--navy);
}
.date-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.date-label{font-size:.78rem;color:var(--ink-500);font-weight:600}
.date-value{font-size:.92rem;font-weight:800;color:var(--ink-900)}

.order-info-content{display:flex;flex-direction:column;gap:var(--sp-3)}
.order-info-content .note{
  padding:var(--sp-3);background:var(--surface-2);
  border-radius:var(--r-sm);font-size:.87rem;color:var(--ink-600);
}
.order-info-content .full{grid-column:1/-1}
.arrow{color:var(--ink-400)}

/* ==========================================================================
   29. MISC BLOCKS
   ========================================================================== */
.error-page{text-align:center;padding:var(--sp-20) var(--sp-5);max-width:620px;margin:0 auto}
.error-page>i{font-size:66px;color:var(--gold);margin-bottom:var(--sp-5)}
.error-page h1{font-size:96px;font-weight:900;color:var(--navy);line-height:1;margin-bottom:8px}
.error-page h2{font-size:var(--fs-xl);color:var(--ink-800);margin-bottom:var(--sp-4)}
.error-page p{color:var(--ink-600);margin-bottom:var(--sp-6)}

.quick-index{
  display:flex;gap:10px;overflow-x:auto;padding:var(--sp-4) 0;
  margin-bottom:var(--sp-6);-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.quick-index a{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
  padding:10px var(--sp-5);border-radius:var(--r-pill);
  background:var(--surface);border:2px solid var(--navy);
  font-size:.87rem;font-weight:700;color:var(--navy);white-space:nowrap;
  transition:background var(--t),color var(--t);
}
.quick-index a:hover{background:var(--navy);color:#fff}

.related-faults-box{
  padding:var(--sp-5);background:var(--surface-2);
  border-radius:var(--r-lg);border:1px solid var(--line);margin-top:var(--sp-6);
}
.category-link,.brand-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;border-radius:var(--r-pill);
  background:var(--primary-soft);color:var(--navy);
  font-size:.79rem;font-weight:700;
  transition:background var(--t),color var(--t);
}
.category-link:hover,.brand-link:hover{background:var(--navy);color:#fff}

.stars{color:var(--gold);letter-spacing:1px}
.stars i{font-size:.85rem}

/* ==========================================================================
   30. FOOTER
   ========================================================================== */
.footer{background:var(--navy-900);color:rgba(255,255,255,.72);padding:var(--sp-16) 0 0;margin-top:auto}
.footer h3,.footer h4,.footer-widget h3,.footer-widget h4{
  color:#fff;font-size:var(--fs-md);margin-bottom:var(--sp-4);
  padding-bottom:10px;border-bottom:2px solid var(--gold);display:inline-block;
}
.footer p{color:rgba(255,255,255,.66);line-height:1.85;font-size:.89rem}
.footer a{color:rgba(255,255,255,.72)}
.footer a:hover{color:var(--gold)}

.footer-links{display:grid;grid-template-columns:1fr;gap:4px}
.footer-links a{
  display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.88rem;
  transition:color var(--t),transform var(--t);
}
.footer-links a i{color:var(--gold);font-size:.75rem}
.footer-links a:hover{color:var(--gold);transform:translateX(-4px)}

.footer-bottom{
  margin-top:var(--sp-10);padding:var(--sp-5) 0;
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;font-size:.82rem;color:rgba(255,255,255,.5);
}
.footer-bottom a{color:var(--gold)}
/* إخفاء حقوق مرحبا */
.footer-bottom p:last-child:not(:only-child){display:none}

/* ==========================================================================
   31. RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .nav-desktop>a,.nav-desktop .dropdown-toggle{padding:9px 10px;font-size:.86rem}
  .header-call{padding:10px var(--sp-4);font-size:.87rem}
  .content-grid{grid-template-columns:minmax(0,1fr) 290px;gap:var(--sp-6)}
}

@media (max-width:991px){
  :root{--fs-4xl:2rem;--fs-3xl:1.7rem;--fs-2xl:1.45rem}
  .nav-desktop{display:none}
  .menu-toggle{display:inline-flex}
  .mobile-bottom-nav{display:flex;align-items:flex-end;justify-content:space-around}
  .mobile-quick-actions{display:flex}
  body{padding-bottom:72px}
  .float-buttons{bottom:88px;left:14px}
  .float-bubble{display:none}

  .content-grid{grid-template-columns:1fr}
  .sidebar{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
  .contact-grid{grid-template-columns:1fr}
  .gallery-masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .gallery-item:nth-child(n){grid-row:auto}
  .brands-grid-with-logos{grid-template-columns:repeat(4,1fr)}
  .stats-bar .stat-item{padding:0 var(--sp-3)}
}

@media (max-width:768px){
  :root{--fs-4xl:1.7rem;--fs-3xl:1.45rem;--fs-2xl:1.28rem;--fs-xl:1.12rem}
  .container{padding-inline:var(--sp-4)}
  .section{padding:var(--sp-10) 0}
  .content-section{padding:var(--sp-8) 0}
  .content-main{padding:var(--sp-5);border-radius:var(--r)}
  .page-header{padding:var(--sp-10) 0 var(--sp-8)}
  .brand-header-logo,.category-logo-card{width:74px;height:74px;padding:10px;margin-bottom:var(--sp-4)}
  .category-logo-card i{font-size:26px}
  .section-title{margin-bottom:var(--sp-6)}
  .section-heading{font-size:var(--fs-md);gap:10px}
  .section-heading-icon{width:36px;height:36px;flex-basis:36px;font-size:.88rem}

  .top-bar{font-size:.7rem;padding:7px 0}
  .top-bar-content{justify-content:center;gap:var(--sp-3)}
  .top-bar-content span:nth-child(2){display:none}

  .stats-bar{border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-2)}
  .stats-bar .stat-item{flex:1;flex-direction:column;text-align:center;gap:4px;padding:0 4px}
  .stat-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  .stat-icon i{font-size:.85rem}
  .stat-number{font-size:1.08rem}
  .stat-label{font-size:.66rem}
  .stat-divider{height:32px}

  .services-image-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .service-card-overlay{padding:var(--sp-3)}
  .service-card-overlay h3{font-size:.84rem}
  .service-card-icon{width:32px;height:32px;margin-bottom:7px}
  .service-card-icon i{font-size:.85rem}

  .brands-grid-with-logos{grid-template-columns:repeat(3,1fr);gap:9px}
  .brand-card-with-logo{min-height:108px;padding:var(--sp-3) 8px}
  .brand-card .brand-logo{width:62px;height:36px}
  .brands-grid-large{grid-template-columns:repeat(2,1fr);gap:10px}
  .brand-card-large{min-height:206px;padding:var(--sp-4) var(--sp-3)}
  .brand-logo-wrapper{width:80px;height:56px}

  .areas-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .area-card{padding:11px var(--sp-3)}
  .area-card .card-title,.area-card h3,.area-card h4{font-size:.8rem}

  .gov-block{padding:var(--sp-4);border-radius:var(--r)}
  .gov-block-title{font-size:var(--fs-md)}
  .gov-block-title i{width:30px;height:30px;flex-basis:30px;font-size:.8rem}
  .gov-block-count{display:none}

  .fault-list-item{padding:var(--sp-4);gap:var(--sp-3)}
  .fault-list-icon{width:40px;height:40px;flex-basis:40px;font-size:1rem}

  .blog-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .contact-booking-form{padding:var(--sp-5) var(--sp-4)}
  .booking-steps{padding:0}
  .booking-steps::before{right:44px;left:44px}
  .step-label{font-size:.7rem}
  .device-grid{grid-template-columns:repeat(3,1fr)}
  .brand-grid,.brand-grid-with-images{grid-template-columns:repeat(3,1fr)}
  .step-buttons{flex-direction:column-reverse}

  .error-page{padding:var(--sp-12) var(--sp-5)}
  .error-page h1{font-size:66px}
  .error-page>i{font-size:48px}
}

@media (max-width:560px){
  .gallery-masonry{grid-template-columns:1fr;grid-auto-rows:212px;gap:10px}
  .gallery-info,.gallery-overlay{padding:42px var(--sp-3) var(--sp-3)}
}

@media (max-width:480px){
  .logo-tagline{display:none}
  .logo-name{font-size:1.02rem}
  .logo-icon{width:42px;height:42px;flex-basis:42px}
  .logo-icon img{width:30px;height:30px}
  .header-call span{display:none}
  .header-call{width:44px;height:44px;padding:0;justify-content:center}
  .header-call i{font-size:1.05rem}

  .btn{padding:11px var(--sp-5);font-size:.9rem}
  .btn-lg{padding:13px var(--sp-6);font-size:.95rem}

  .stat-icon{display:none}
  .stat-number{font-size:.95rem}
  .stat-label{font-size:.6rem}

  .brands-grid-with-logos{grid-template-columns:repeat(2,1fr)}
  .device-grid,.brand-grid,.brand-grid-with-images{grid-template-columns:repeat(2,1fr)}
  .bottom-nav-item{font-size:.62rem}
  .bottom-nav-item i{font-size:1.05rem}
  .bottom-nav-item.call-btn{flex-basis:64px}
}

/* ==========================================================================
   32. A11Y / MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

@media print{
  .top-bar,.header,.footer,.float-buttons,.float-bubble,
  .mobile-quick-actions,.mobile-bottom-nav,.booking-modal,
  .booking-modal-overlay,.share-buttons,.sidebar,.custom-alert{display:none}
  body{background:#fff;color:#000;padding-bottom:0}
  .content-grid{grid-template-columns:1fr}
  .content-main{border:none;box-shadow:none;padding:0}
  a{text-decoration:underline}
}

/* ==========================================================================
   43. TRACK ORDER PAGE
   ========================================================================== */
.track-search-card{
  max-width:600px;margin:0 auto var(--sp-8);padding:var(--sp-8);
  background:var(--surface);border:1px solid var(--line);
  border-top:4px solid var(--gold);border-radius:var(--r-lg);box-shadow:var(--e2);
}
.track-search-form{display:flex;gap:10px;flex-wrap:wrap}
.track-search-form input{flex:1;min-width:190px}
.track-error{
  padding:var(--sp-4);margin-top:var(--sp-4);border-radius:var(--r-sm);
  background:var(--err-soft);border-right:4px solid var(--err);
  color:var(--err);font-weight:700;font-size:.9rem;
}
.track-instructions{
  max-width:600px;margin:var(--sp-6) auto 0;padding:var(--sp-5);
  background:var(--surface-2);border-radius:var(--r);
  font-size:.88rem;color:var(--ink-600);
}

.order-details-card{
  max-width:820px;margin:0 auto;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--e2);
}
.order-header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-6);color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-800));
}
.order-header h2,.order-header h3{color:#fff}
.order-number{
  font-family:ui-monospace,monospace;font-size:var(--fs-lg);font-weight:900;
  letter-spacing:.06em;padding:7px var(--sp-4);border-radius:var(--r-sm);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
}
.order-cancelled-notice{
  padding:var(--sp-5);margin:var(--sp-5);border-radius:var(--r);
  background:var(--err-soft);border-right:4px solid var(--err);color:var(--ink-800);
}
.order-completed-view{padding:var(--sp-6)}
.completed-cost{
  font-size:var(--fs-2xl);font-weight:900;color:var(--ok);
  text-align:center;margin:var(--sp-4) 0;
}
.completed-parts,.completed-info{
  padding:var(--sp-4);margin-bottom:var(--sp-3);
  background:var(--surface-2);border-radius:var(--r-sm);font-size:.9rem;
}
.completed-rating{text-align:center;padding:var(--sp-5);border-top:1px solid var(--line)}

.order-progress-enhanced{display:flex;flex-direction:column;gap:0;padding:var(--sp-6)}
.order-progress-enhanced .step{
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding-bottom:var(--sp-6);position:relative;
}
.order-progress-enhanced .step:not(:last-child)::before{
  content:'';position:absolute;top:34px;right:16px;bottom:0;
  width:2px;background:var(--line);
}
.order-progress-enhanced .step.completed:not(:last-child)::before{background:var(--ok)}
.step-circle{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;z-index:1;
  background:var(--surface-3);color:var(--ink-500);
  border:2px solid var(--line);font-size:.8rem;
}
.step.completed .step-circle{background:var(--ok);border-color:var(--ok);color:#fff}
.step.active .step-circle{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:var(--e-gold)}
.step-info{display:flex;flex-direction:column;gap:3px;padding-top:4px}

.scheduled-date-box{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-5);margin:0 var(--sp-6) var(--sp-5);
  background:var(--gold-50);border:1px solid var(--gold-200);border-radius:var(--r);
}
.order-info-details{padding:0 var(--sp-6) var(--sp-6)}
.info-row{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:12px 0;border-bottom:1px solid var(--line-soft);
  font-size:.9rem;
}
.info-row:last-child{border-bottom:none}
.info-row i{color:var(--gold);width:20px;text-align:center;flex-shrink:0;margin-top:4px}
.info-row strong{flex:0 0 auto;color:var(--ink-800)}
.order-actions{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--line);background:var(--surface-2);
}

/* ==========================================================================
   44. FOOTER GRID + MODAL HEADER
   ========================================================================== */
.footer-grid{
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);
  gap:var(--sp-8);padding-bottom:var(--sp-8);
}
.footer-contact{display:flex;flex-direction:column;gap:8px;margin-top:var(--sp-4)}
.footer-contact a{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.9rem}
.footer-contact a i{color:var(--gold);width:18px;text-align:center}

.footer-social{display:flex;gap:9px;margin-top:var(--sp-4);flex-wrap:wrap}
.footer-social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);font-size:.9rem;
  transition:background var(--t),color var(--t),transform var(--t);
}
.footer-social a:hover{background:var(--gold);color:var(--navy-900);transform:translateY(-3px)}

.booking-modal-header{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5) var(--sp-6);color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-800));
}
.booking-modal-header h3{color:#fff;font-size:var(--fs-md);display:flex;align-items:center;gap:10px}
.booking-modal-header h3 i{color:var(--gold)}
.booking-modal-header .modal-close{position:static;background:rgba(255,255,255,.16);color:#fff}
.booking-modal-header .modal-close:hover{background:var(--err)}
.booking-modal-body{padding:var(--sp-6)}

/* ==========================================================================
   45. UTILITIES
   ========================================================================== */
.text-center{text-align:center}
.mt-4{margin-top:var(--sp-4)}
.static-faults{display:flex;flex-direction:column;gap:var(--sp-4)}
.with-logos{gap:var(--sp-3)}
.with-logo{display:flex;align-items:center;gap:10px}

/* الماركات في الرئيسية: .brands-grid.with-logos (كلاسات منفصلة) */
.brands-grid.with-logos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--sp-4);
}
.brand-card.with-logo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:var(--sp-5) var(--sp-3);min-height:130px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.brand-card.with-logo::before{
  content:'';position:absolute;top:0;right:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--navy));
  transform:scaleX(0);transition:transform var(--t);
}
.brand-card.with-logo:hover{border-color:var(--gold);box-shadow:var(--e3);transform:translateY(-4px)}
.brand-card.with-logo:hover::before{transform:scaleX(1)}
.brand-card.with-logo .brand-logo{
  width:84px;height:46px;object-fit:contain;padding:6px 8px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  transition:border-color var(--t);
}
.brand-card.with-logo:hover .brand-logo{border-color:var(--gold)}
.brand-card.with-logo .brand-name{font-size:.88rem;font-weight:700;color:var(--ink-800)}

@media (max-width:991px){
  .brands-grid.with-logos{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:768px){
  .brands-grid.with-logos{grid-template-columns:repeat(3,1fr);gap:10px}
  .brand-card.with-logo{min-height:108px;padding:var(--sp-3) 8px}
  .brand-card.with-logo .brand-logo{width:62px;height:36px}
}
@media (max-width:420px){
  .brands-grid.with-logos{grid-template-columns:repeat(2,1fr)}
}
.brand-name{font-weight:800;color:var(--ink-900)}

/* ==========================================================================
   46. HOMEPAGE RESPONSIVE
   ========================================================================== */
@media (max-width:991px){
  .hero-slides{height:clamp(360px,60vw,440px)}
  .hero-arrow{display:none}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
  .process-timeline{gap:var(--sp-5)}
  .timeline-connector{display:none}
  .carousel-arrow{display:none}
  .horizontal-articles{grid-template-columns:1fr}
}

@media (max-width:768px){
  .hero-section{padding:var(--sp-3) 0 0}
  .hero-slider{border-radius:var(--r-lg)}
  .hero-slides{height:clamp(330px,72vw,400px)}
  .hero-slide-overlay{background:linear-gradient(to top,rgba(8,13,46,.95) 0%,rgba(8,13,46,.72) 55%,rgba(8,13,46,.42) 100%)}
  .hero-slide-content{text-align:center;padding:var(--sp-5) 0}
  .hero-slide-content p{margin-inline:auto}
  .hero-cta-group{justify-content:center}
  .hero-cta-group .btn{flex:1 1 auto;min-width:145px}

  .trust-strip{padding:var(--sp-6) 0}
  .trust-strip-inner{grid-template-columns:repeat(2,1fr);gap:10px}
  .trust-badge-item{flex-direction:column;text-align:center;gap:8px;font-size:.78rem;padding:var(--sp-3)}
  .trust-badge-item i{width:36px;height:36px;flex-basis:36px;font-size:.95rem}

  .services-section,.common-faults-section,.section-dark{padding:var(--sp-10) 0}
  .services-carousel>*{flex-basis:78%}
  .common-fault-card{flex-basis:82%}
  .review-card{flex-basis:84%;padding:var(--sp-5)}
  .timeline-node{flex-basis:100%;max-width:none}
  .node-circle{width:60px;height:60px;font-size:1.25rem}
  .image-cta-overlay{padding:var(--sp-12) 0}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .order-header{padding:var(--sp-5)}
  .order-progress-enhanced,.order-info-details{padding:var(--sp-5)}
  .booking-modal-body{padding:var(--sp-5)}
}

@media (max-width:480px){
  .hero-slide-content h1{font-size:1.32rem}
  .hero-slide-content p{font-size:.85rem;margin-bottom:var(--sp-4)}
  .hero-dot.active{width:22px}
  .services-carousel>*,.common-fault-card,.review-card{flex-basis:88%}
  .h-article-img{width:88px;height:80px;flex-basis:88px}
}


/* ==========================================================================
   47. HOMEPAGE — الأقسام الأصلية (محفوظة كما هي)
   الصفحة الرئيسية كانت الأفضل، فرجّعت تنسيقاتها الأصلية بالكامل
   وبتشتغل فوق نظام التصميم الجديد.
   ========================================================================== */


/* ========== SECTION TITLE ========== */
.section-title {
  text-align: center;
  margin-bottom: 50px;
}


.section-title h2 {
  font-size: 2rem;
  color: var(--gray-900);
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}


.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 50%;
  transform: translateX(50%);
  width: 60px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}


.section-title p {
  font-size: 1.05rem;
  color: var(--gray-500);
  max-width: 600px;
  margin: 20px auto 0;
}


.hero-stats-bar .stat-item {
  text-align: center;
  color: #fff;
}


.hero-stats-bar .stat-label {
  font-size: 0.85rem;
  opacity: 0.85;
}


/* ========== TRUST STRIP ========== */
.trust-strip {
  background: var(--gold-light);
  padding: 20px 0;
  border-bottom: 1px solid rgba(201,152,46,0.2);
}


.trust-strip-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gray-800);
}


.trust-badge-item i {
  color: var(--gold);
  font-size: 1.1rem;
}


/* ========== CHIP AREAS ========== */
.chip-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}


.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
  color: var(--gray-700);
}


.area-chip:hover {
  border-color: var(--gold);
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}


.area-chip i {
  color: var(--gold);
}


/* ========== FEATURES ========== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}


.feature-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: var(--transition);
}


.feature-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}


.feature-card i {
  width: 64px;
  height: 64px;
  background: var(--accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.5rem;
  color: var(--gold);
  border: 2px solid rgba(201,152,46,0.2);
}


.feature-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--gray-900);
}


.feature-card p {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin: 0;
}


.process-timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 40px 0;
}


.process-timeline::before {
  content: '';
  position: absolute;
  top: 68px;
  right: 80px;
  left: 80px;
  height: 3px;
  background: var(--gray-300);
  z-index: 0;
}


.timeline-node {
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 1;
}


.timeline-node .node-circle {
  width: 56px;
  height: 56px;
  background: var(--gold);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0 auto 20px;
  border: 4px solid var(--white);
  box-shadow: 0 4px 15px rgba(201,152,46,0.3);
  position: relative;
  z-index: 2;
}


.timeline-node h4 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--gray-900);
}


.timeline-node p {
  font-size: 0.85rem;
  color: var(--gray-500);
  max-width: 180px;
  margin: 0 auto;
}


/* ========== REVIEWS ========== */
.reviews-slider {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}


.review-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px 24px 24px;
  position: relative;
  transition: var(--transition);
}


.review-card::before {
  content: '\201C';
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 80px;
  line-height: 1;
  color: rgba(201,152,46,0.15);
  font-family: Georgia, serif;
  pointer-events: none;
}


.review-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}


.review-card .review-text {
  font-size: 0.95rem;
  color: var(--gray-600);
  margin-bottom: 16px;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}


.review-card .review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}


.review-card .review-stars {
  color: var(--gold);
  margin-bottom: 12px;
}


.review-card .author-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gray-900);
}


.review-card .author-location {
  font-size: 0.8rem;
  color: var(--gray-500);
}


/* ========== QUOTE CARD ========== */
.quote-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 40px 32px 32px;
  position: relative;
}


.quote-card::before {
  content: '\201C';
  position: absolute;
  top: 10px;
  right: 24px;
  font-size: 80px;
  line-height: 1;
  color: rgba(201,152,46,0.15);
  font-family: Georgia, serif;
  pointer-events: none;
}


/* ========== FAQ ========== */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}


.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-right: 3px solid var(--gold);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  transition: var(--transition);
}


.faq-item:hover {
  border-color: var(--gold);
}


.faq-item.active {
  border-color: var(--gold);
  box-shadow: var(--shadow);
}


.faq-question {
  padding: 18px 24px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gray-800);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
  background: none;
  border: none;
  width: 100%;
  text-align: right;
  font-family: 'Cairo', sans-serif;
  gap: 12px;
}


.faq-question:hover {
  color: var(--primary);
}


.faq-question i,
.faq-question::after {
  color: var(--gold);
  transition: transform 0.3s ease;
}


.faq-answer {
  padding: 0 24px 18px;
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.8;
  display: none;
}


.faq-item.active .faq-answer {
  display: block;
}


/* ========== GALLERY MASONRY ========== */
.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}


.gallery-masonry > *:nth-child(1),
.gallery-masonry > *:nth-child(4) {
  grid-row: span 2;
}


.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}


.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}


.gallery-item:hover img {
  transform: scale(1.08);
}


.gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,20,82,0.8) 0%, transparent 60%);
  opacity: 0;
  transition: var(--transition);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}


.gallery-item:hover .gallery-overlay {
  opacity: 1;
}


.gallery-item .gallery-overlay h4 {
  color: #fff;
  font-size: 1rem;
}


.gallery-item .gallery-overlay p {
  color: rgba(255,255,255,0.8);
  font-size: 0.8rem;
  margin: 0;
}


/* ========== IMAGE CTA ========== */
.image-cta {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 80px 0;
  text-align: center;
}


.image-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,20,82,0.85);
}


.image-cta .container {
  position: relative;
  z-index: 1;
}


.image-cta h2 {
  color: #fff;
  margin-bottom: 16px;
}


.image-cta p {
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  margin: 0 auto 24px;
}


/* ========== SECTION DARK ========== */
.section-dark {
  background: var(--navy);
  color: #fff;
}


.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #fff;
}


.section-dark p {
  color: rgba(255,255,255,0.75);
}


.section-dark .section-title h2::after {
  background: var(--gold);
}


/* ========== COMMON FAULTS SECTION ========== */
.common-faults-section {
  padding: 60px 0;
}


.common-faults-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}


.common-faults-scroll::-webkit-scrollbar {
  height: 6px;
}


.common-faults-scroll::-webkit-scrollbar-track {
  background: var(--gray-200);
  border-radius: 3px;
}


.common-faults-scroll::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 3px;
}


.common-fault-card {
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px 20px;
  scroll-snap-align: start;
  transition: var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}


.common-fault-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}


.common-fault-card i {
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}


.common-fault-card h4 {
  font-size: 0.95rem;
  margin-bottom: 6px;
}


.common-fault-card p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin: 0;
}


/* ========== HORIZONTAL ARTICLES ========== */
.horizontal-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}


.h-article {
  display: flex;
  flex-direction: row-reverse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}


.h-article:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}


.h-article .article-img {
  width: 40%;
  min-height: 200px;
  flex-shrink: 0;
}


.h-article .article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.h-article .article-body {
  width: 60%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.h-article .article-body h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--gray-900);
}


.h-article .article-body p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 12px;
}


.h-article .article-body .read-more {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


.h-article .article-body .read-more:hover {
  color: var(--gold);
}
@media (max-width: 768px){


  .hero-stats-bar .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
  }


  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }


  .feature-card {
    padding: 20px 16px;
  }


  .reviews-slider {
    grid-template-columns: 1fr;
  }


  .h-article {
    flex-direction: column;
  }


  .h-article .article-img {
    width: 100%;
    min-height: 180px;
  }


  .h-article .article-body {
    width: 100%;
  }


  .section-title {
    margin-bottom: 32px;
  }


  .section-title h2 {
    font-size: 1.5rem;
  }


  .image-cta {
    padding: 50px 0;
  }


  .trust-strip-inner {
    gap: 16px;
  }


  .trust-badge-item {
    font-size: 0.8rem;
  }


  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }
}
@media (max-width: 480px){


  .features-grid {
    grid-template-columns: 1fr;
  }


  .chip-areas {
    gap: 8px;
  }


  .area-chip {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
}


/* ========== HERO SECTION ========== */
.hero-section {
  padding: 30px 0 30px;
  background: var(--white);
}


/* ========== HERO SLIDESHOW ========== */
.hero-slider {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(13,20,82,0.18);
}


.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}


.hero-slide {
  position: absolute;
  inset: 0;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}


.hero-slide.active {
  opacity: 1;
  position: relative;
  z-index: 1;
}


.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,20,82,0.88) 0%, rgba(26,35,126,0.78) 50%, rgba(13,20,82,0.88) 100%);
  display: flex;
  align-items: center;
}


.hero-slide-content {
  padding: 70px 40px;
  max-width: 720px;
}


.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,152,46,0.15);
  border: 1px solid rgba(201,152,46,0.4);
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 30px;
  margin-bottom: 20px;
}


.hero-slide-content h1 {
  color: #fff;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}


.hero-slide-content p {
  color: rgba(255,255,255,0.85);
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 620px;
}


.hero-cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}


.hero-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}


.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}


.hero-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.2);
}


.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}


.hero-arrow:hover {
  background: rgba(201,152,46,0.5);
}


.hero-prev { right: 20px; }

.hero-next { left: 20px; }


/* ========== NEW BUTTON STYLES ========== */
.btn-accent {
  background: linear-gradient(135deg, var(--gold), #d4a84a);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(201,152,46,0.35);
}


.btn-accent:hover {
  background: linear-gradient(135deg, #d4a84a, var(--gold));
  box-shadow: 0 6px 20px rgba(201,152,46,0.5);
  transform: translateY(-2px);
}


.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(37,211,102,0.3);
}


.btn-whatsapp:hover {
  background: #1ebe57;
  box-shadow: 0 6px 20px rgba(37,211,102,0.45);
  transform: translateY(-2px);
}


.btn-glass {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 700;
}


.btn-glass:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
}


.btn-outline-gold {
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
}


.btn-outline-gold:hover {
  background: var(--gold);
  color: #fff;
}


/* ========== SECTION BADGE ========== */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 6px 18px;
  border-radius: 20px;
  margin-bottom: 16px;
}


.section-badge i {
  font-size: 0.85rem;
}


/* ========== STATS BAR SECTION ========== */
.stats-bar-section {
  background: var(--navy);
  padding: 0;
  margin-top: 0;
}


.stats-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 28px 0;
}


.stats-bar .stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 35px;
}


.stat-icon {
  width: 50px;
  height: 50px;
  background: rgba(201,152,46,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.stat-icon i {
  color: var(--gold);
  font-size: 1.3rem;
}


.stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.stat-number {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}


.stat-label {
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  font-weight: 600;
}


.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.15);
}


/* ========== SERVICES CAROUSEL ========== */
.services-carousel-wrapper {
  position: relative;
}


.services-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 20px;
  scrollbar-width: none;
}


.services-carousel::-webkit-scrollbar {
  display: none;
}


.service-slide-card {
  min-width: 300px;
  max-width: 320px;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: var(--transition);
  border: 1px solid var(--gray-200);
}


.service-slide-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}


.service-slide-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}


.service-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}


.service-slide-card:hover .service-slide-img img {
  transform: scale(1.05);
}


.service-slide-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  background: var(--gold);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(201,152,46,0.4);
}


.service-slide-body {
  padding: 20px;
}


.service-slide-body h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--gray-900);
}


.service-slide-body p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 16px;
  line-height: 1.6;
}


.service-slide-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


.service-slide-actions .btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}


.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}


.carousel-arrow:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}


.carousel-prev { right: -16px; }

.carousel-next { left: -16px; }


/* ========== TIMELINE CONNECTOR ========== */
.timeline-connector {
  flex-shrink: 0;
  width: 60px;
  height: 3px;
  background: var(--gray-300);
  align-self: flex-start;
  margin-top: 46px;
}


.section-dark .timeline-connector {
  background: rgba(255,255,255,0.2);
}


.section-dark .timeline-node h3 {
  color: #fff;
}


.section-dark .timeline-node p {
  color: rgba(255,255,255,0.65);
}


.section-dark .timeline-node .node-circle {
  border-color: var(--navy);
}


/* ========== MEGA CTA SECTION ========== */
.mega-cta-section {
  padding: 70px 0;
  background: var(--gray-100);
}


.mega-cta {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
}


.mega-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}


.mega-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,20,82,0.92), rgba(26,35,126,0.85));
}


.mega-cta-content {
  position: relative;
  z-index: 2;
  padding: 60px;
  max-width: 620px;
}


.mega-cta-content h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  margin: 16px 0;
}


.mega-cta-content p {
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
  margin-bottom: 24px;
}


/* ========== REVIEWER INFO ========== */
.reviewer-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}


.reviewer-avatar {
  width: 40px;
  height: 40px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}


.reviewer-info .name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gray-800);
}


/* ========== QUOTE CARD ========== */
.review-card.quote-card {
  position: relative;
}


.review-card.quote-card::before {
  content: '\201D';
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 4rem;
  color: var(--gold);
  opacity: 0.2;
  font-family: Georgia, serif;
  line-height: 1;
}


/* ========== H-ARTICLE IMG/TEXT ALIASES ========== */
.h-article .h-article-img {
  width: 40%;
  min-height: 200px;
  flex-shrink: 0;
}


.h-article .h-article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.h-article .h-article-text {
  width: 60%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.h-article .h-article-text h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--gray-900);
}


.h-article .h-article-text p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 12px;
}


.h-article .h-article-text .read-more {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


.h-article .h-article-text .read-more:hover {
  color: var(--gold);
}


/* ========== IMAGE CTA OVERLAY ========== */
.image-cta-overlay {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}


/* ========== FAULT ICON / INFO (Homepage faults cards) ========== */
.fault-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.fault-icon i {
  color: var(--gold);
  font-size: 1.2rem;
}


.fault-info {
  flex: 1;
}


.fault-category {
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}


.fault-info h3 {
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: var(--gray-900);
}


.fault-link {
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


.common-fault-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}


/* ========== GALLERY INFO & TAGS ========== */
.gallery-info {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 30px 20px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8), transparent);
  color: #fff;
}


.gallery-info h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}


.gallery-info p {
  font-size: 0.82rem;
  opacity: 0.8;
  margin-bottom: 8px;
}


.gallery-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}


.gallery-tags span {
  background: rgba(201,152,46,0.3);
  color: var(--gold-light);
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}


.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}


.gallery-tall {
  grid-row: span 2;
}
@media (max-width: 480px){


  .hero-section {
    padding: 12px 0 16px;
  }


  .hero-slider {
    border-radius: 14px;
    min-height: 400px;
  }


  .hero-slide {
    min-height: 400px;
  }


  .hero-slide-content {
    padding: 40px 16px;
  }


  .hero-slide-content h1 {
    font-size: 1.4rem;
  }


  .stat-icon {
    display: none;
  }


  .stats-bar .stat-item {
    padding: 0 4px;
  }


  .stat-number {
    font-size: 0.95rem;
  }


  .stat-label {
    font-size: 0.6rem;
  }


  .stat-divider {
    height: 24px;
  }


  .service-slide-card {
    min-width: 240px;
  }


  .service-slide-actions {
    flex-direction: column;
  }


  .mega-cta-content {
    padding: 30px 16px;
  }


  .mega-cta-content h2 {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   48. تصحيحات فوق الرئيسية الأصلية
   ========================================================================== */
.gallery-info,.gallery-overlay{
  background:linear-gradient(to top,rgba(8,13,46,.96) 0%,rgba(8,13,46,.8) 40%,rgba(8,13,46,.3) 72%,transparent 100%);
  padding:52px var(--sp-4) var(--sp-4);
}
.gallery-info h3,.gallery-info h4,.gallery-overlay h3,.gallery-overlay h4{
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gallery-info p,.gallery-overlay p{
  color:rgba(255,255,255,.88);opacity:1;text-shadow:0 1px 8px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gallery-tags span{background:rgba(201,152,46,.95);color:#fff}
/* الأسهم كانت بتغطي الكروت */
.carousel-prev{right:-8px}
.carousel-next{left:-8px}
@media (max-width:1240px){.carousel-arrow{display:none}}
/* الأزرار المتساوية داخل كارت الخدمة */
.service-slide-actions{display:flex;gap:8px}
.service-slide-actions .btn{flex:1 1 0;min-width:0;padding:10px 8px;font-size:.83rem}

/* ==========================================================================
   49. وضع الماركة  —  BRAND MODE
   ========================================================================== */
.header-brand-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px 6px 8px;margin-inline-start:auto;
  background:var(--gold-50);border:1px solid var(--gold-200);
  border-radius:var(--r-pill);flex-shrink:0;
  transition:border-color var(--t),background var(--t);
}
.header-brand-chip:hover{border-color:var(--gold);background:#fff}
.header-brand-chip img{width:38px;height:24px;object-fit:contain}
.header-brand-letter{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-weight:900;font-size:.8rem;
}
.header-brand-name{font-size:.85rem;font-weight:800;color:var(--navy-800);white-space:nowrap}

.nav-exit-brand{color:var(--gold-700)!important}
.nav-exit-brand i{font-size:.72rem}

.brand-mode-bar{
  background:linear-gradient(135deg,var(--gold-50),#fff);
  border-bottom:1px solid var(--gold-200);
  border-top:1px solid var(--gold-200);
  padding:11px 0;font-size:.86rem;
}
.brand-mode-bar>.container{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
}
.brand-mode-info{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.brand-mode-logo{
  width:52px;height:34px;flex:0 0 52px;display:grid;place-items:center;padding:4px;
  background:#fff;border:1px solid var(--gold-200);border-radius:var(--r-sm);
}
.brand-mode-logo img{max-width:100%;max-height:100%;object-fit:contain}
.brand-mode-text{color:var(--ink-700);line-height:1.6}
.brand-mode-text strong{color:var(--navy);font-weight:900}
.brand-mode-en{color:var(--ink-500);font-size:.8rem;direction:ltr;display:inline-block}
.brand-mode-exit{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:7px var(--sp-4);border-radius:var(--r-pill);
  background:var(--navy);color:#fff;font-size:.8rem;font-weight:800;
  transition:background var(--t),transform var(--t);
}
.brand-mode-exit:hover{background:var(--gold);color:var(--navy-900);transform:translateY(-2px)}

.menu-exit-brand,.footer-exit-brand{color:var(--gold)!important;font-weight:800}
.bottom-nav-exit i{color:var(--gold)}

@media (max-width:768px){
  .header-brand-chip{padding:5px 10px 5px 6px;gap:6px}
  .header-brand-chip img{width:30px;height:20px}
  .header-brand-name{display:none}
  .brand-mode-bar{padding:9px 0;font-size:.78rem}
  .brand-mode-bar>.container{gap:10px}
  .brand-mode-logo{width:40px;height:28px;flex-basis:40px}
  .brand-mode-text{flex:1;min-width:0}
}

/* ==========================================================================
   50. شريط تقدّم التصفح بدون تحميل
   ========================================================================== */
.spa-progress{
  position:fixed;top:0;right:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--gold),var(--gold-400));
  box-shadow:0 0 10px rgba(201,152,46,.7);
  opacity:0;transition:width .3s var(--ease),opacity .3s var(--ease);
  pointer-events:none;
}
.spa-progress.active{opacity:1}
.spa-progress.done{opacity:0}
html.spa-loading{cursor:progress}
html.spa-loading #app-main{opacity:.55;transition:opacity .18s var(--ease)}
#app-main{opacity:1;transition:opacity .18s var(--ease)}

/* الرابط النشط في المنيوهات */
.nav-desktop>a.active,.mobile-menu-list a.active{color:var(--navy);background:var(--primary-soft)}
.bottom-nav-item.active:not(.call-btn){color:var(--navy);background:var(--primary-soft)}

/* ==========================================================================
   51. السايدبار — تصميم جديد
   ========================================================================== */
.sidebar-widget{
  padding:var(--sp-5);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--e1);
}

/* الرأس يمتد لحواف الكارت عبر هوامش سالبة — والمحتوى يفضل بمسافاته */
.sidebar-heading,
.sidebar-widget>h2:first-child,
.sidebar-widget>h3:first-child{
  display:flex;align-items:center;gap:9px;
  margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  background:var(--surface-2);border-bottom:1px solid var(--line);
  border-top:3px solid var(--gold);
  font-size:.96rem;font-weight:900;color:var(--ink-900);
}
.sidebar-heading i,
.sidebar-widget>h2:first-child i,
.sidebar-widget>h3:first-child i{color:var(--gold)}

/* الويدجت الداكن (اتصل الآن) */
.sidebar-widget[style*="linear-gradient"]{
  border:none;box-shadow:var(--e-navy);
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-800) 60%,var(--navy-900) 100%)!important;
  position:relative;isolation:isolate;
}
.sidebar-widget[style*="linear-gradient"]::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(circle at 85% 0%,rgba(201,152,46,.35),transparent 55%);
}
.sidebar-widget[style*="linear-gradient"] .sidebar-heading{
  background:transparent;border-bottom:1px solid rgba(255,255,255,.16);
  border-top:none;color:#fff;padding-top:var(--sp-5);
}
.sidebar-widget[style*="linear-gradient"] p{color:rgba(255,255,255,.85)}

/* قوائم الويدجت */
.sidebar-widget ul{padding:0;margin:0}
.sidebar-widget .footer-links{margin-inline:calc(-1 * var(--sp-2))}
.sidebar-widget .footer-links a{
  border-radius:var(--r-sm);padding:10px var(--sp-3);
  border:1px solid transparent;
}
.sidebar-widget .footer-links a:hover{
  background:var(--gold-50);border-color:var(--gold-200);
  color:var(--navy);transform:translateX(-4px);
}

/* قائمة المميزات */
.sidebar-widget ul li{display:flex;align-items:center;gap:9px;font-size:.88rem}
.sidebar-widget ul li i.fa-check-circle{color:var(--ok)}

@media (max-width:991px){
  .sidebar-widget>*{padding-inline:var(--sp-4)}
  .sidebar-heading,
  .sidebar-widget>h2:first-child,
  .sidebar-widget>h3:first-child{padding-inline:var(--sp-4)}
}

/* ==========================================================================
   52. عدّاد الماركات + تحسينات صفحة تتبع الطلب
   ========================================================================== */
.brands-counter{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--sp-3);
  padding:6px var(--sp-4);border-radius:var(--r-pill);
  background:var(--primary-soft);color:var(--navy);
  font-size:.82rem;font-weight:800;
}
.brands-counter i{color:var(--gold)}

.track-search-card{
  max-width:640px;margin:0 auto var(--sp-6);padding:var(--sp-8);
  border-top:4px solid var(--gold);
}
.track-search-card h2,.track-search-card h3{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-lg);color:var(--ink-900);margin-bottom:var(--sp-5);
}
.track-search-form input{
  padding:13px var(--sp-4);border:2px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:.94rem;
}
.track-search-form input:focus{
  outline:none;border-color:var(--gold);background:#fff;
  box-shadow:0 0 0 4px rgba(201,152,46,.14);
}
.track-instructions{
  max-width:640px;margin:0 auto;padding:var(--sp-5) var(--sp-6);
  background:var(--surface);border:1px solid var(--line);
  border-right:4px solid var(--gold);border-radius:var(--r);
  box-shadow:var(--e1);
}
.track-instructions h3,.track-instructions h2{
  font-size:var(--fs-md);color:var(--ink-900);margin-bottom:10px;
}
.track-instructions p{font-size:.88rem;color:var(--ink-600);line-height:1.85;margin-bottom:6px}
.track-instructions strong{color:var(--navy)}

/* ==========================================================================
   53. حماية: صور المحتوى مايخرجش برّه الكروت
   ========================================================================== */
.service-slide-img img,
.gallery-item img,
.blog-card img,
.h-article-img img,
.service-image-card img{object-fit:cover}
.brand-logo,.brand-logo-large,.brand-select-logo,
.brand-mode-logo img,.header-brand-chip img{object-fit:contain}

/* ==========================================================================
   54. الصفحات القانونية (سياسة الخصوصية / إخلاء المسؤولية)
   ========================================================================== */
.legal-page{line-height:1.95}
.legal-updated{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;color:var(--ink-500);font-weight:700;
  background:var(--surface-2);padding:6px var(--sp-4);border-radius:var(--r-pill);
  margin-bottom:var(--sp-5);
}
.legal-updated i{color:var(--gold)}

.legal-highlight{
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-5);margin-bottom:var(--sp-6);
  background:var(--gold-50);border:1px solid var(--gold-200);
  border-right:4px solid var(--gold);border-radius:var(--r);
}
.legal-highlight i{color:var(--gold-700);font-size:1.3rem;margin-top:2px;flex-shrink:0}
.legal-highlight p{margin:0;color:var(--ink-800);font-size:.98rem;line-height:1.8}

.legal-page h2{
  margin-top:var(--sp-8);margin-bottom:var(--sp-3);
  font-size:var(--fs-lg);color:var(--navy);
}
.legal-page h2:first-of-type{margin-top:var(--sp-5)}
.legal-page ul{margin:var(--sp-3) 0 var(--sp-5)}
.legal-page li{margin-bottom:10px;line-height:1.85}

.legal-cta{
  margin-top:var(--sp-8);padding:var(--sp-6);
  background:var(--surface-2);border-radius:var(--r-lg);text-align:center;
}
.legal-cta p{margin-bottom:var(--sp-4);font-weight:700;color:var(--ink-800)}
.legal-cta-buttons{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   55. إخلاء المسؤولية في الفوتر + روابط قانونية
   ========================================================================== */
.footer-disclaimer{
  margin-top:var(--sp-6);padding:var(--sp-5) 0 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-disclaimer p{
  font-size:.8rem;line-height:1.9;color:rgba(255,255,255,.55);
  max-width:1000px;margin:0 auto;text-align:center;
}
.footer-disclaimer strong{color:rgba(255,255,255,.8);font-weight:800}
.footer-disclaimer a{color:var(--gold);white-space:nowrap;font-weight:700}
.footer-disclaimer a:hover{text-decoration:underline}

.footer-legal-links{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;margin-bottom:var(--sp-3);
  font-size:.84rem;
}
.footer-legal-links a{color:rgba(255,255,255,.72);font-weight:700}
.footer-legal-links a:hover{color:var(--gold)}
.footer-legal-links span{color:rgba(255,255,255,.28)}

@media (max-width:768px){
  .footer-disclaimer p{font-size:.74rem}
  .footer-legal-links{gap:7px;font-size:.78rem}
  .legal-cta-buttons{flex-direction:column}
  .legal-cta-buttons .btn{width:100%}
}

/* ==========================================================================
   56. شريط الماركات في صفحة من نحن
   ========================================================================== */
.about-brands-strip{
  display:flex;flex-wrap:wrap;gap:10px;margin:var(--sp-4) 0 var(--sp-8);
}
.about-brand-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:92px;height:52px;padding:8px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.about-brand-chip:hover{border-color:var(--gold);box-shadow:var(--e2);transform:translateY(-3px)}
.about-brand-chip img{max-width:72px;max-height:34px;object-fit:contain}
.about-brand-chip span{font-size:.82rem;font-weight:800;color:var(--ink-700)}
@media (max-width:768px){
  .about-brand-chip{min-width:76px;height:46px}
  .about-brand-chip img{max-width:58px;max-height:28px}
}

/* ==========================================================================
   57. تصحيحات نهائية + تجديد الأشكال
   (هذا القسم آخر شيء في الملف، فهو الذي يفوز في التتالي)
   ========================================================================== */

/* ── 57a: كارت السايدبار الداكن كان نصه أبيض على رأس فاتح ──
   article.php يستخدم <h2> عادي مش .sidebar-heading، فالقاعدة
   العامة كانت بتديله خلفية فاتحة والنص أبيض = مش ظاهر.        */
.sidebar-widget[style*="linear-gradient"]>h2:first-child,
.sidebar-widget[style*="linear-gradient"]>h3:first-child,
.sidebar-widget[style*="gradient"]>h2:first-child,
.sidebar-widget[style*="gradient"]>h3:first-child,
.sidebar-widget[style*="color:#fff"]>h2:first-child,
.sidebar-widget[style*="color:#fff"]>h3:first-child{
  background:transparent;
  border-top:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  color:#fff;
  padding-top:var(--sp-5);
}
.sidebar-widget[style*="linear-gradient"] p,
.sidebar-widget[style*="gradient"] p{color:rgba(255,255,255,.88)}
.sidebar-widget[style*="linear-gradient"] .btn-white{color:var(--navy)}

/* ── 57b: الإحصائيات بعرض السلايدر بالظبط (مش عرض الشاشة) ── */
.stats-bar-section{
  background:transparent;
  padding:0;
  margin-top:-30px;
  position:relative;
  z-index:5;
}
.stats-bar{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:0;
  padding:var(--sp-6) var(--sp-5);
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
  border:1px solid rgba(201,152,46,.22);
  border-radius:var(--r-xl);
  box-shadow:0 18px 44px rgba(8,13,46,.3);
}
.stats-bar .stat-item{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-5);min-width:0}
.stats-bar .stat-number{color:#fff}
.stats-bar .stat-label{color:rgba(255,255,255,.72)}

@media (max-width:768px){
  .stats-bar-section{margin-top:-16px}
  .stats-bar{border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-2)}
  .stats-bar .stat-item{flex:1;flex-direction:column;text-align:center;gap:4px;padding:0 4px}
}

/* ── 57c: تجديد شكل كروت الخدمات (الرئيسية) ──
   شريط ذهبي علوي + شارة دائرية + رفع أنعم                     */
.service-slide-card{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.service-slide-card::after{
  content:'';position:absolute;top:0;right:0;left:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--gold),var(--navy));
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.service-slide-card:hover{border-color:var(--gold);box-shadow:var(--e4);transform:translateY(-6px)}
.service-slide-card:hover::after{transform:scaleX(1)}
.service-slide-badge{
  border-radius:50%;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(8,13,46,.22);
}
.service-slide-img::after{
  content:'';position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(to top,rgba(8,13,46,.42),transparent);
  pointer-events:none;
}

/* ── 57d: كروت الخدمات بالصور — إطار ذهبي عند المرور ── */
.service-image-card{border:1px solid transparent;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.service-image-card:hover{border-color:var(--gold)}

/* ── 57e: صفحة الماركات — شكل أهدأ وأوضح ── */
.brand-card-large{
  border-radius:var(--r-xl);
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(160deg,var(--line),transparent 45%) border-box;
  border:1px solid transparent;
}
.brand-card-large:hover{
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(160deg,var(--gold),transparent 55%) border-box;
}
.brand-logo-wrapper{border-radius:var(--r)}

/* ── 57f: عناوين الأقسام — خط ذهبي متدرّج بدل الخط المصمت ── */
.section-title h2::after{
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  height:3px;width:96px;
}
.section-heading::after,
.content-main>h2::after,
.gov-block-title::after{
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* ── 57g: الصفحات الداخلية — خلفية بنقشة خفيفة تكسر الفراغ ── */
.content-section{
  background:
    radial-gradient(circle at 12% 0%,rgba(26,35,126,.05),transparent 42%),
    radial-gradient(circle at 88% 100%,rgba(201,152,46,.06),transparent 42%),
    var(--surface-2);
}

/* ── 57h: البطاقة الرئيسية — حافة ذهبية علوية رفيعة ── */
.content-main{
  position:relative;
  border-top:3px solid var(--gold);
}

/* ── 57i: كروت المقالات — تمييز الصورة والتاريخ ── */
.blog-card{border-radius:var(--r-lg);overflow:hidden}
.blog-card .blog-card-content .date,
.blog-card .card-meta{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-600);
  font-size:.76rem;font-weight:700;width:fit-content;
}

/* ── 57j: المقال المفرد — صورة الغلاف وإطار المحتوى ── */
.article-header img{border:1px solid var(--line);box-shadow:var(--e2)}
.article-content{font-size:var(--fs-md);line-height:2}

/* ── 57k: شبكة المناطق — نقطة ذهبية بدل الحد الكامل ── */
.area-card{position:relative;overflow:hidden}
.area-card::before{
  content:'';position:absolute;top:0;bottom:0;right:0;width:3px;
  background:var(--gold);transform:scaleY(0);transform-origin:center;
  transition:transform var(--t);
}
.area-card:hover::before{transform:scaleY(1)}

/* ── 57l: ضبط رأس الويدجت الداكن مع الهوامش السالبة ── */
.sidebar-widget[style*="gradient"]>h2:first-child,
.sidebar-widget[style*="gradient"]>h3:first-child,
.sidebar-widget[style*="gradient"] .sidebar-heading{
  margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
}

/* ==========================================================================
   58. الإحصائيات — كارت فاتح بدل الكحلي على الكحلي
   السبب: كانت كحلي فوق هيرو كحلي، فالحد بينهم بيضيع.
   الفاتح بيفصلها كشريط ثقة مستقل والأرقام بتبان أقوى.
   ========================================================================== */
.stats-bar{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9);
  border-top:3px solid var(--gold);
  box-shadow:0 18px 44px rgba(8,13,46,.18), 0 2px 8px rgba(8,13,46,.06);
}
.stats-bar .stat-number{color:var(--navy)}
.stats-bar .stat-label{color:var(--ink-600)}
.stats-bar .stat-divider{background:var(--line)}
.stats-bar .stat-icon{
  background:linear-gradient(140deg,var(--gold-50),#fff);
  border:1px solid var(--gold-200);
  box-shadow:0 4px 12px rgba(201,152,46,.16);
}
.stats-bar .stat-icon i{color:var(--gold-700)}

/* لمسة: العنصر يرتفع قليلاً عند المرور */
.stats-bar .stat-item{
  border-radius:var(--r);
  transition:transform var(--t);
}
.stats-bar .stat-item:hover{transform:translateY(-3px)}

@media (max-width:768px){
  .stats-bar{border-top-width:2px}
  .stats-bar .stat-icon{box-shadow:none}
}

/* ==========================================================================
   59. كارت "احجز موعد صيانة الآن" — إظهار الصورة + شكل أرقى
   كان التعتيم ٩٣٪ فالصورة مختفية تماماً.
   ========================================================================== */
.mega-cta{
  border-radius:var(--r-xl);
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 24px 60px rgba(8,13,46,.28);
}
.mega-cta-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  transform:scale(1.04);
  transition:transform 8s linear;
}
.mega-cta:hover .mega-cta-bg{transform:scale(1.1)}

/* تدرّج جانبي: الصورة تبان على الشمال والنص مقروء على اليمين */
.mega-cta::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to left,
      rgba(8,13,46,.96) 0%,
      rgba(13,20,82,.88) 38%,
      rgba(13,20,82,.52) 68%,
      rgba(8,13,46,.28) 100%);
}
/* توهّج ذهبي خفيف من أعلى اليمين */
.mega-cta::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 88% 8%,rgba(201,152,46,.28),transparent 52%);
}

.mega-cta-content{
  padding:var(--sp-16) var(--sp-10);
  text-align:right;
  max-width:640px;
  /* في RTL: margin-inline-end = يسار → يدفع الكتلة لليمين فوق الجزء الداكن */
  margin-inline-end:auto;
  margin-inline-start:0;
}
.mega-cta-content h2{
  font-size:clamp(1.5rem,3vw,2.3rem);
  color:#fff;margin-bottom:var(--sp-3);
  text-shadow:0 3px 16px rgba(0,0,0,.4);
}
.mega-cta-content p{
  color:rgba(255,255,255,.9);
  font-size:var(--fs-md);
  margin:0 0 var(--sp-6);
}
.mega-cta-content .hero-cta-group{justify-content:flex-start}

@media (max-width:768px){
  .mega-cta-content{
    padding:var(--sp-10) var(--sp-5);
    text-align:center;max-width:none;margin-inline-start:0;
  }
  .mega-cta-content .hero-cta-group{justify-content:center}
  .mega-cta::before{
    background:linear-gradient(to top,rgba(8,13,46,.96) 0%,rgba(13,20,82,.86) 55%,rgba(13,20,82,.6) 100%);
  }
}

/* ==========================================================================
   60. فقاعة الرقم العائم — كانت مختفية تماماً
   السبب: الفقاعة داخل زر الاتصال (ابن)، وأنا استخدمت ~ (شقيق)
   فالقاعدة ما كانتش بتطابق أصلاً.
   ========================================================================== */
.float-btn{position:relative;overflow:visible}

.float-bubble{
  position:absolute;
  top:50%;
  left:calc(100% + 14px);
  transform:translateY(-50%) translateX(-8px) scale(.94);
  bottom:auto;right:auto;

  display:inline-flex;align-items:center;
  padding:9px var(--sp-4);
  background:var(--navy);
  color:#fff;
  border:1px solid rgba(201,152,46,.5);
  border-radius:var(--r-pill);
  font-size:.8rem;font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(8,13,46,.32);

  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  z-index:2;
}
/* السهم الصغير الناحية اليمين */
.float-bubble::after{
  content:'';position:absolute;top:50%;right:-5px;
  width:10px;height:10px;margin-top:-5px;
  background:var(--navy);
  border-right:1px solid rgba(201,152,46,.5);
  border-top:1px solid rgba(201,152,46,.5);
  transform:rotate(45deg);
  bottom:auto;left:auto;box-shadow:none;
}

/* تظهر عند المرور على الزر */
.float-btn:hover .float-bubble,
.float-btn:focus-visible .float-bubble{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(-50%) translateX(0) scale(1);
}

/* وتظهر تلقائياً بعد ٣ ثوانٍ لجذب الانتباه ثم تختفي */
.float-btn.call .float-bubble{
  animation:bubbleHint 9s ease-in-out 3s 2;
}
@keyframes bubbleHint{
  0%,100%   {opacity:0;visibility:hidden;transform:translateY(-50%) translateX(-8px) scale(.94)}
  6%,42%    {opacity:1;visibility:visible;transform:translateY(-50%) translateX(0) scale(1)}
  50%       {opacity:0;visibility:hidden;transform:translateY(-50%) translateX(-8px) scale(.94)}
}
/* لو المستخدم بيمرّ بالماوس، الـ hover يغلب الأنيميشن */
.float-btn.call:hover .float-bubble{animation:none}

/* نبضة خفيفة حوالين زر الاتصال تلفت النظر */
.float-btn.call::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--gold);
  animation:floatPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes floatPulse{
  0%  {transform:scale(1);opacity:.65}
  70% {transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}

@media (max-width:768px){
  .float-bubble{display:none}
  .float-btn.call::before{animation-duration:3.4s}
}
@media (prefers-reduced-motion:reduce){
  .float-btn.call .float-bubble{animation:none}
  .float-btn.call::before{animation:none}
}

/* رقم الهاتف داخل الفقاعة يفضل يقرأ من الشمال لليمين */
.float-bubble{unicode-bidi:plaintext}

/* ==========================================================================
   61. إصلاح السلايدر على الموبايل
   ------------------------------------------------------------------
   المشكلة: محتوى السلايد كان جوّه .hero-slide-overlay وهي position:absolute،
   يعني ارتفاعها مش بيحسب من المحتوى — الارتفاع كان ثابت (min-height / height)
   والمحتوى الأطول منه بيتقص بسبب overflow:hidden على .hero-slider.
   (ده اللي كان بيقطع زرار "واتساب فوري" وشارة "فنيون معتمدون").
   الحل: على الموبايل السلايد النشط يبقى في الـ flow والارتفاع يتحدد من المحتوى.
   ========================================================================== */
@media (max-width:768px){
  .hero-slider{min-height:0;height:auto}
  .hero-slides{height:auto!important;min-height:0}
  .hero-slide{min-height:0}

  /* السلايد النشط: في الـ flow والمحتوى هو اللي بيحدد الارتفاع */
  .hero-slide.active{position:relative;inset:auto;z-index:1}
  .hero-slide.active > .hero-slide-overlay{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
  }
  /* باقي السلايدات فوق بعض للتلاشي */
  .hero-slide:not(.active) > .hero-slide-overlay{position:absolute;inset:0}

  .hero-slide-content{
    padding:30px 16px 66px;
    max-width:100%;
    text-align:center;
  }
  .hero-tag{margin-bottom:14px;font-size:.8rem;padding:6px 14px}
  .hero-slide-content p{margin-bottom:20px}
  .hero-cta-group{flex-direction:column;gap:10px}
  .hero-cta-group .btn{width:100%;min-width:0}
  .hero-dots{bottom:16px}
  .hero-arrow{width:38px;height:38px;font-size:.9rem}
}

@media (max-width:480px){
  .hero-slide-content{padding:26px 14px 60px}
  .hero-arrow{display:none}
  /* أزرار عائمة أصغر عشان ما تغطّيش شريط الإحصائيات */
  .float-btn{width:48px;height:48px;font-size:1.05rem}
  .float-buttons{bottom:84px;left:12px;gap:10px}
}

@media (max-width:480px){
  .hero-slide-content p{line-height:1.7;font-size:.88rem}
  .hero-slide-content h1{line-height:1.35}
}

/* ==========================================================================
   62. كروت المقالات في الرئيسية — إصلاح الموبايل
   ------------------------------------------------------------------
   المشكلة: .horizontal-articles{grid-template-columns:repeat(2,1fr)}
   متكتوبة بعد الميديا كويري بتاعة الموبايل، فكانت بتغلبها والموبايل
   كان بيعرض عمودين. وكمان الصورة واخدة 40% من الكارت فالنص بيتبقى له
   ١٣٠ بكسل بس — كل كلمة في سطر.
   ========================================================================== */
@media (max-width:991px){
  .horizontal-articles{grid-template-columns:1fr!important;gap:16px}
}

@media (max-width:600px){
  .h-article{flex-direction:row-reverse;align-items:stretch}
  .h-article .h-article-img{
    width:120px;
    flex:0 0 120px;
    height:auto;
    min-height:120px;
    align-self:stretch;
    position:relative;
    overflow:hidden;
  }
  .h-article .h-article-img img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .h-article .h-article-text{
    width:auto;
    flex:1 1 auto;
    min-width:0;
    padding:14px 16px;
    justify-content:flex-start;
  }
  .h-article .h-article-text h3{
    font-size:.98rem;
    line-height:1.5;
    margin-bottom:6px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .h-article .h-article-text p{
    font-size:.8rem;
    line-height:1.6;
    margin-bottom:8px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .h-article .h-article-text .read-more{font-size:.83rem}
}

/* نفس المعالجة لأي كروت مقالات تانية بنفس الأسماء القديمة */
@media (max-width:600px){
  .h-article .article-img{width:120px;flex:0 0 120px;min-height:0}
  .h-article .article-body{width:auto;flex:1 1 auto;min-width:0;padding:14px 16px}
}

/* ==========================================================================
   63. اللوجو الرسمي (بدل اللوجو النصي)
   ========================================================================== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.logo{display:flex;align-items:center;gap:0;flex-shrink:0;text-decoration:none}
.logo-img{
  height:46px;
  width:auto;
  max-width:280px;
  object-fit:contain;
  display:block;
}
.logo-mark{display:none}

.logo:hover .logo-img,
.logo:hover .logo-mark{opacity:.85;transition:opacity var(--t)}

/* على الشاشات الصغيرة نكتفي بالرمز عشان الهيدر ما يزنقش */
@media (max-width:600px){
  .logo-img{display:none}
  .logo-mark{
    display:block;
    height:44px;
    width:44px;
    object-fit:contain;
  }
}

@media (max-width:1100px) and (min-width:601px){
  .logo-img{height:40px;max-width:220px}
}

/* لوجو الفوتر (نسخة بيضاء على الخلفية الغامقة) */
.footer-logo{
  height:54px;
  width:auto;
  max-width:260px;
  object-fit:contain;
  display:block;
  margin-bottom:var(--sp-4);
}
@media (max-width:768px){
  .footer-logo{height:46px;margin-inline:auto}
}