/* ============================================
   ونش انقاذ مصر — Main stylesheet
   Light theme + red Egyptian accents + Arabic RTL
   ============================================ */

:root {
    /* Brand palette */
    --red: #CE1126;          /* Egyptian flag red */
    --red-dark: #A00E1F;
    --red-light: #FBE9EC;
    --gold: #C8B273;
    --gold-light: #F5EDD8;
    --black: #1A1A1A;
    --dark: #2C2C2C;

    /* Surface */
    --bg: #FFFFFF;
    --bg-alt: #FAFAFA;
    --bg-warm: #FFF9F0;
    --surface: #FFFFFF;
    --surface-elev: #FFFFFF;

    /* Text */
    --text: #1A1A1A;
    --text-soft: #555;
    --text-mute: #888;

    /* Borders */
    --border: #ECECEC;
    --border-strong: #DDDDDD;

    /* Status */
    --whatsapp: #25D366;
    --whatsapp-dark: #128C7E;

    /* Effects */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
    --shadow-red: 0 6px 20px rgba(206, 17, 38, .25);

    /* Radius */
    --r-sm: 6px;
    --r: 12px;
    --r-lg: 18px;
    --r-xl: 24px;

    /* Layout */
    --container: 1280px;
    --header-h: 88px;
}

/* ============================================
   Reset & base
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Cairo', 'Tajawal', Tahoma, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    direction: rtl;
    /*
     * منع الـ horizontal scroll - مهم جداً للموبايل خصوصاً Safari iOS قديم.
     *
     * الـ clip أفضل لإنه ما بيمنعش position:sticky، لكن مش مدعوم على
     * Safari < 16 و Chrome < 90 - فبنستخدم hidden كـ baseline + clip
     * كـ progressive enhancement عبر @supports.
     */
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}
html {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}
img, svg { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; transition: color .2s; }
a:hover { color: var(--red-dark); }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    line-height: 1.3;
    color: var(--black);
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.2rem; }

p { color: var(--text-soft); line-height: 1.85; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

::selection { background: var(--red); color: #fff; }

/* ============================================
   Top bar (Egyptian flag stripe + emergency)
   ============================================ */
.top-bar {
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    border-bottom: 1px solid var(--border);
    position: relative;
    font-size: .9rem;
}
.flag-stripe {
    height: 4px;
    background: linear-gradient(to bottom,
        #CE1126 0 33.3%,
        #fff 33.3% 66.6%,
        #1a1a1a 66.6% 100%);
    /* Egyptian flag horizontal — but we use it as a thin top line */
}
/* Replace with actual horizontal Egyptian flag (red/white/black with eagle hint) */
.flag-stripe {
    height: 4px;
    background:
        linear-gradient(to right,
            var(--red) 0 33.3%,
            #fff 33.3% 66.6%,
            var(--black) 66.6% 100%);
    background:
        linear-gradient(to right,
            var(--red) 0 33.3%,
            #fff 33.3% 66.6%,
            var(--black) 66.6% 100%);
    background:
        linear-gradient(to top,
            var(--black) 0 33.33%,
            #fff 33.33% 66.66%,
            var(--red) 66.66% 100%);
}
.top-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    flex-wrap: wrap;
}
.top-bar-left {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--text-soft);
}
.top-bar-left strong { color: var(--red); font-weight: 800; }
.pulse-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--red);
    position: relative;
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(206,17,38,.6); }
    50% { box-shadow: 0 0 0 8px rgba(206,17,38,0); }
}
.top-bar-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.top-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 99px;
    background: #f3f3f3;
    color: var(--black);
    font-size: .85rem;
    font-weight: 600;
    transition: all .2s;
}
.top-link:hover { background: var(--red); color: #fff; }
.top-link-phone { background: var(--red); color: #fff; }
.top-link-phone:hover { background: var(--red-dark); color: #fff; }

/* ============================================
   Header
   ============================================ */
.site-header {
    background: #fff;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.25rem;
    gap: 1rem;
}
.logo-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--black);
    flex-shrink: 0;
}
.logo-mark {
    width: 48px; height: 48px;
    display: block;
    transition: transform .3s;
}
.logo-link:hover .logo-mark { transform: rotate(-8deg); }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-family: 'Cairo'; font-size: 1.25rem; font-weight: 900; color: var(--black); }
.logo-tag { font-size: .72rem; color: var(--text-mute); font-weight: 500; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list {
    display: flex;
    list-style: none;
    gap: .35rem;
    align-items: center;
}
.nav-list a {
    display: block;
    padding: .55rem .9rem;
    color: var(--black);
    font-weight: 600;
    border-radius: 8px;
    transition: all .2s;
    position: relative;
    font-size: .96rem;
}
.nav-list a:hover {
    background: var(--red-light);
    color: var(--red);
}
.nav-list a.active {
    color: var(--red);
}
.nav-list a.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--red);
    border-radius: 2px;
}
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}
.nav-toggle span {
    width: 24px; height: 2px;
    background: var(--black);
    border-radius: 2px;
    transition: .3s;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.header-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: .55rem 1.1rem;
    background: var(--red);
    color: #fff;
    border-radius: var(--r-sm);
    font-size: .8rem;
    line-height: 1.2;
    transition: all .2s;
    box-shadow: var(--shadow-red);
    flex-shrink: 0;
}
.header-cta:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.header-cta span { opacity: .9; font-weight: 500; }
.header-cta strong { font-size: 1.05rem; font-weight: 800; letter-spacing: .3px; direction: ltr; }

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: 1rem;
    transition: all .2s;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
    white-space: nowrap;
}
.btn-primary {
    background: var(--red);
    color: #fff;
    box-shadow: var(--shadow-red);
}
.btn-primary:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); }
.btn-outline {
    background: transparent;
    color: var(--red);
    border-color: var(--red);
}
.btn-outline:hover { background: var(--red); color: #fff; }
.btn-dark {
    background: var(--black);
    color: #fff;
}
.btn-dark:hover { background: var(--dark); color: #fff; transform: translateY(-2px); }
.btn-whatsapp {
    background: var(--whatsapp);
    color: #fff;
}
.btn-whatsapp:hover { background: var(--whatsapp-dark); color: #fff; transform: translateY(-2px); }
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }
.btn-sm { padding: .45rem 1rem; font-size: .9rem; }

/* ============================================
   Hero (homepage)
   ============================================ */
.hero {
    position: relative;
    background: linear-gradient(135deg, #FFF9F0 0%, #ffffff 50%, #FBE9EC 100%);
    /*
     * Padding أصغر: من 4rem 0 5rem إلى 2.5rem 0 2.5rem.
     * الـ Hero كان فيه فراغ ضخم من الأعلى والأسفل، بدون فايدة بصرية.
     * 2.5rem (40px) كافي لفصل الـ Hero عن الـ header والـ content التحت.
     */
    padding: 2.5rem 0 2.5rem;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(206,17,38,.06) 0, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(200,178,115,.08) 0, transparent 40%);
    pointer-events: none;
}
/* Subtle hero pattern */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(0,0,0,.015) 0 1px, transparent 1px 30px);
    pointer-events: none;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero-text { padding-right: 1rem; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1px solid var(--border);
    padding: .35rem 1rem;
    border-radius: 99px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--red);
    border-radius: 50%;
    animation: pulse 1.6s infinite;
}
.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
    font-weight: 900;
}
.hero h1 .accent { color: var(--red); position: relative; display: inline-block; }
.hero h1 .accent::after {
    content: '';
    position: absolute;
    inset-block-end: 4px;
    inset-inline: 0;
    height: 8px;
    background: var(--red);
    opacity: .15;
    border-radius: 4px;
    z-index: -1;
}
.hero-lead {
    font-size: 1.2rem;
    color: var(--text-soft);
    margin-bottom: 2rem;
    max-width: 560px;
}
.hero-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.hero-stat { text-align: center; }
.hero-stat-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--red);
    line-height: 1;
    display: block;
}
.hero-stat-lbl { font-size: .85rem; color: var(--text-mute); margin-top: .3rem; }

/* Hero illustration - معاد بناؤه ليناسب صور landscape (banner-style) */
.hero-visual {
    /*
     * المشكلة القديمة: align-items: center في hero-inner كان بيخلي الـ banner
     * يطفّ ع النص رأسياً relative للـ text column الطويل (eyebrow + h1 + lead +
     * actions + stats = 500-600px). الـ banner ~300px فكان بيبقى centered مع
     * فراغ كبير من فوق أو تحت داخل الـ row.
     *
     * الحل: align-self: center يضمن إن الـ visual في النص رأسياً،
     * مع padding-block: 5px (spacing بسيط فوق وتحت كما طُلب من الـ user).
     */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    align-self: center;
    padding-block: 5px;
}
.hero-banner {
    /*
     * الصورة تملأ عرض الـ container، الارتفاع تلقائي حسب نسبة الصورة.
     * object-fit: contain يضمن إن الصورة كلها تبقى ظاهرة من غير قص.
     * max-height يمنع الصورة من إنها تطلع طويلة جداً في حالة portrait images.
     */
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}
.hero-visual-bg {
    position: absolute;
    inset: 5% 5% 5% 5%;
    background: linear-gradient(135deg, var(--black) 0%, #333 100%);
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.hero-visual-bg::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, var(--red), var(--gold), var(--red), var(--gold));
    border-radius: 50%;
    z-index: -1;
    animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero-truck {
    position: relative;
    z-index: 2;
    width: 80%;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
}
.hero-badge {
    position: absolute;
    background: #fff;
    border-radius: var(--r);
    padding: .85rem 1.1rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--black);
    z-index: 3;
    animation: float 4s ease-in-out infinite;
}
.hero-badge svg { color: var(--red); flex-shrink: 0; }
.hero-badge-1 { top: 10%; right: -10px; }
.hero-badge-2 { bottom: 18%; left: -20px; animation-delay: -2s; }
.hero-badge strong { color: var(--red); font-weight: 900; font-size: 1.05rem; display: block; line-height: 1; }
.hero-badge small { color: var(--text-mute); font-size: .75rem; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ============================================
   Section base
   ============================================ */
.section { padding: 5rem 0; }
.section-tight { padding: 3rem 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--black); color: #fff; }
.section-dark p { color: #ccc; }
.section-dark h2, .section-dark h3 { color: #fff; }

.section-head {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 720px;
    margin-inline: auto;
}
.section-head-eyebrow {
    display: inline-block;
    color: var(--red);
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .12em;
    margin-bottom: .6rem;
    text-transform: uppercase;
}
.section-head h2 { margin-bottom: 1rem; }
.section-head h2 .accent { color: var(--red); }
.section-head p { font-size: 1.1rem; }

/* ============================================
   Service / Feature cards
   ============================================ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.feature-card {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all .3s;
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--red-light);
}
.feature-card:hover::before { transform: scaleX(1); transform-origin: left; }
.feature-card-icon {
    width: 60px; height: 60px;
    border-radius: var(--r);
    background: var(--red-light);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: all .3s;
}
.feature-card-icon svg { width: 32px; height: 32px; }
.feature-card:hover .feature-card-icon {
    background: var(--red);
    color: #fff;
    transform: scale(1.1) rotate(-5deg);
}
.feature-card h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.feature-card p { color: var(--text-soft); font-size: .95rem; }
.feature-card-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--red);
    font-weight: 700;
    margin-top: 1rem;
    font-size: .9rem;
}
.feature-card-link::after {
    content: '←';
    transition: transform .2s;
}
.feature-card-link:hover::after { transform: translateX(-4px); }

/* ============================================
   Services full section
   ============================================ */
.services-list { display: grid; gap: 1.5rem; }
.service-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    background: #fff;
    border-radius: var(--r-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.service-row-visual {
    aspect-ratio: 1.3;
    border-radius: var(--r);
    background: linear-gradient(135deg, var(--red-light) 0%, #fff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
}
.service-row-visual svg { width: 50%; height: 50%; }
.service-row h3 { margin-bottom: .5rem; }
.service-row .meta { color: var(--text-mute); margin-bottom: 1rem; font-weight: 600; }
.service-row ul { margin: 1rem 0; padding-right: 1.2rem; color: var(--text-soft); }
.service-row li { margin-bottom: .35rem; }

/* ============================================
   Why us / process steps
   ============================================ */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    counter-reset: step;
}
.process-card {
    background: #fff;
    border-radius: var(--r);
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--border);
    position: relative;
    transition: all .3s;
}
.process-card::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -18px;
    right: 50%;
    transform: translateX(50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    box-shadow: var(--shadow-red);
}
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.process-card h4 { margin: 1rem 0 .5rem; }
.process-card p { font-size: .9rem; }

/* ============================================
   Stats band
   ============================================ */
.stats-band {
    background: var(--black);
    color: #fff;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}
.stats-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(206,17,38,.2) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(200,178,115,.1) 0, transparent 40%);
}
.stats-band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1;
}
.stat-big {
    text-align: center;
    padding: 1rem;
    border-right: 1px solid rgba(255,255,255,.1);
}
.stat-big:last-child { border-right: 0; }
.stat-big-num {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    display: block;
    margin-bottom: .5rem;
    direction: ltr;
}
.stat-big-lbl { color: #ccc; font-size: 1rem; }

/* ============================================
   Coverage / Governorates grid
   ============================================ */
.gov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.gov-card {
    background: #fff;
    border-radius: var(--r);
    padding: 1.25rem;
    border: 1px solid var(--border);
    transition: all .2s;
    display: block;
    color: var(--text);
}
.gov-card:hover {
    border-color: var(--red);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    color: var(--text);
}
.gov-card-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
    font-size: .75rem;
    color: var(--red);
    font-weight: 700;
}
.gov-card h4 { font-size: 1.1rem; margin-bottom: .35rem; }
.gov-card .areas-count { color: var(--text-mute); font-size: .85rem; }
.gov-card .arrow { color: var(--red); font-weight: 900; }

/* Governorate detail page */
.gov-hero {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    color: #fff;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}
.gov-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 30px);
}
.gov-hero h1 { color: #fff; }
.gov-hero p { color: rgba(255,255,255,.95); font-size: 1.15rem; max-width: 700px; }
.gov-hero-meta {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.gov-hero-meta div { display: flex; align-items: center; gap: .5rem; }
.gov-hero-meta strong { font-size: 1.3rem; font-weight: 900; }

.areas-list, .streets-list {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.area-chip {
    background: #fff;
    border: 1px solid var(--border);
    padding: .5rem 1rem;
    border-radius: 99px;
    font-size: .9rem;
    color: var(--text);
    font-weight: 600;
    transition: all .2s;
}
.area-chip:hover { background: var(--red-light); border-color: var(--red); color: var(--red); }

/* ============================================
   Directory cards
   ============================================ */
.directory-filters {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    margin-bottom: 2rem;
}
.directory-filters-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}
.directory-filters select,
.directory-filters input {
    padding: .65rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--text);
    font-size: .95rem;
    flex: 1;
    min-width: 180px;
}
.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.dir-card {
    background: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all .3s;
    display: flex;
    flex-direction: column;
}
.dir-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--red-light);
}
/* Note: The active .dir-card-head and .dir-logo styling lives in the
 * "page-specific" section below (around line 1700+). The old block that
 * used a dark gradient header was removed because the current HTML uses
 * a clean white card design — the dark gradient was conflicting with the
 * black h3 color and making company names unreadable. */
.dir-card-services {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: 1rem;
}
.dir-tag {
    background: var(--bg-warm);
    color: var(--text);
    padding: .25rem .65rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--gold-light);
}
.dir-card-foot {
    padding: 1rem 1.5rem;
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    display: flex;
    gap: .5rem;
}
.dir-card-foot .btn { flex: 1; padding: .55rem .8rem; font-size: .85rem; }
.dir-featured {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--gold);
    color: var(--black);
    padding: .2rem .6rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 800;
    z-index: 2;
}

/* ============================================
   Blog
   ============================================ */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.blog-card {
    background: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all .3s;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.blog-card-img {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--red-light), var(--gold-light));
    position: relative;
    overflow: hidden;
}
.blog-card-img-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: 3rem;
    font-weight: 900;
    opacity: .15;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta {
    display: flex;
    gap: .75rem;
    font-size: .8rem;
    color: var(--text-mute);
    margin-bottom: .75rem;
}
.blog-card-cat {
    background: var(--red-light);
    color: var(--red);
    padding: .2rem .65rem;
    border-radius: 99px;
    font-weight: 700;
}
.blog-card h3 { font-size: 1.2rem; margin-bottom: .65rem; }
.blog-card h3 a { color: var(--black); }
.blog-card h3 a:hover { color: var(--red); }
.blog-card-excerpt { color: var(--text-soft); font-size: .9rem; margin-bottom: 1rem; flex: 1; }
.blog-card-readmore {
    color: var(--red);
    font-weight: 700;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    align-self: flex-start;
}
.blog-card-readmore::after { content: '←'; transition: transform .2s; }
.blog-card-readmore:hover::after { transform: translateX(-4px); }

/* Article single */
.article-hero {
    background: linear-gradient(180deg, var(--bg-warm) 0%, #fff 100%);
    padding: 3rem 0 2rem;
}
.article-meta-row {
    display: flex;
    gap: 1rem;
    color: var(--text-mute);
    font-size: .9rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    /*
     * Defense ضد horizontal scroll: لو المقال فيه table كبير أو صورة
     * عريضة، نتأكد إنها ما بتطلعش برا الـ container.
     * word-wrap كمان عشان الكلمات الإنجليزية الطويلة ما تكسرش الـ layout.
     */
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-x: auto;
    font-size: 1.05rem;
    line-height: 1.95;
}
.article-body h2 { margin: 2rem 0 1rem; color: var(--black); border-bottom: 2px solid var(--red); padding-bottom: .5rem; }
.article-body h3 { margin: 1.5rem 0 .75rem; color: var(--red); }
.article-body h4 { margin: 1.25rem 0 .5rem; color: var(--black); }
.article-body p { margin-bottom: 1.25rem; color: var(--text); }
.article-body ul, .article-body ol { margin: 1rem 0 1.25rem 0; padding-right: 1.5rem; }
.article-body li { margin-bottom: .5rem; }
.article-body strong { color: var(--black); font-weight: 800; }
.article-body img { border-radius: var(--r); margin: 1.5rem 0; }
.article-body blockquote {
    border-right: 4px solid var(--red);
    padding: 1rem 1.25rem;
    background: var(--bg-warm);
    margin: 1.5rem 0;
    border-radius: var(--r-sm);
    color: var(--text);
    font-style: italic;
}

/* ============================================
   Contact / Forms
   ============================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
}
.contact-info-card {
    background: linear-gradient(135deg, var(--black) 0%, #2a2a2a 100%);
    color: #fff;
    padding: 2.5rem;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
}
.contact-info-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100%; height: 4px;
    background: linear-gradient(to left, var(--red), var(--gold));
}
.contact-info-card h3 { color: #fff; margin-bottom: 1.5rem; }
.contact-info-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.contact-info-item:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.contact-info-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-info-icon svg { color: #fff; }
.contact-info-text small { display: block; font-size: .8rem; opacity: .7; }
.contact-info-text strong { font-size: 1.1rem; color: #fff; }
.contact-info-text a { color: #fff; }

.form-grid { display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field label {
    display: block;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .35rem;
    font-size: .9rem;
}
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--text);
    font-size: 1rem;
    transition: border-color .2s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: 0;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(206,17,38,.1);
}
.form-field textarea { min-height: 140px; resize: vertical; }

/* ============================================
   Flash, breadcrumbs, pagination, footer
   ============================================ */
.flash { padding: .9rem 0; font-weight: 600; }
.flash-success { background: #E6F4EA; color: #1B6B33; }
.flash-error { background: #FCE8E8; color: #A00E1F; }
.flash-info { background: #E8F0FE; color: #1A4A8C; }

.breadcrumbs { background: var(--bg-alt); padding: .8rem 0; border-bottom: 1px solid var(--border); }
.breadcrumbs ol { list-style: none; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.breadcrumbs li { color: var(--text-mute); }
.breadcrumbs li::after { content: '«'; margin-right: .5rem; color: var(--text-mute); }
.breadcrumbs li:last-child::after { display: none; }
.breadcrumbs a { color: var(--red); }
.breadcrumbs li[aria-current] { color: var(--text); font-weight: 700; }

.pagination ul {
    list-style: none;
    display: flex;
    gap: .35rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 0;
}
.pagination a {
    display: inline-block;
    padding: .5rem .9rem;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--r-sm);
    font-weight: 700;
    transition: all .2s;
}
.pagination a:hover { background: var(--red); color: #fff; border-color: var(--red); }
.pagination .active a { background: var(--red); color: #fff; border-color: var(--red); }

/* CTA strip (before footer) */
.cta-strip {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    color: #fff;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}
.cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 30%, rgba(255,255,255,.1) 0, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(0,0,0,.15) 0, transparent 50%);
}
.cta-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.cta-strip h2 { color: #fff; margin-bottom: .5rem; }
.cta-strip p { color: rgba(255,255,255,.9); margin-bottom: 0; }
.cta-strip-buttons { display: flex; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; }
.cta-strip .btn-primary { background: #fff; color: var(--red); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.cta-strip .btn-primary:hover { background: var(--black); color: #fff; }

/* Footer */
.site-footer {
    background: #111;
    color: #ddd;
    padding: 4rem 0 1.5rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}
.footer-col h4 {
    color: #fff;
    margin-bottom: 1.25rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--red);
    display: inline-block;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a { color: #bbb; transition: color .2s; }
.footer-col a:hover { color: var(--red); padding-right: 4px; }
.footer-logo { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.footer-logo strong { font-size: 1.3rem; color: #fff; font-weight: 900; }
.footer-about { color: #aaa; font-size: .92rem; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.footer-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #bbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.footer-social a:hover { background: var(--red); color: #fff; transform: translateY(-3px); }
.footer-phone { font-size: 1.5rem !important; font-weight: 900; color: var(--red) !important; direction: ltr; display: inline-block; }
.footer-flag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.06);
    padding: .5rem 1rem;
    border-radius: var(--r-sm);
    font-size: .9rem;
    margin-top: .5rem;
}
.flag-mini {
    width: 24px; height: 16px;
    background:
        linear-gradient(to bottom,
            var(--red) 0 33.3%,
            #fff 33.3% 66.6%,
            var(--black) 66.6% 100%);
    border: 1px solid #444;
    border-radius: 2px;
}
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 1.5rem;
    /*
     * نخلّي المحتوى متمركز افتراضياً عشان لو فيه عنصر واحد (مجرد copyright)
     * يبقى في النص. لو فيه عناصر متعددة (روابط legal مثلاً)، تتوزع.
     */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .85rem;
    color: #888;
    text-align: center;
}
.footer-bottom p {
    margin: 0;
}

/* ============================================
   Floating mobile actions
   ============================================ */
.floating-actions {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.float-btn {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: var(--shadow-lg);
    transition: transform .2s;
    position: relative;
}
.float-btn:hover { transform: scale(1.1); }
.float-whatsapp { background: var(--whatsapp); }
.float-call { background: var(--red); }
.float-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid var(--red);
    opacity: 0;
    animation: ringPulse 1.8s infinite;
}
@keyframes ringPulse {
    0% { opacity: .8; transform: scale(.9); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* ============================================
   Page hero (interior pages)
   ============================================ */
.page-hero {
    background: linear-gradient(135deg, var(--bg-warm) 0%, #fff 60%, var(--red-light) 100%);
    padding: 3.5rem 0 3rem;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.015) 0 1px, transparent 1px 30px);
}
.page-hero-inner { position: relative; z-index: 1; max-width: 800px; }
.page-hero h1 { margin-bottom: .75rem; }
.page-hero p { font-size: 1.15rem; }

/* ============================================
   404 / Empty states
   ============================================ */
.empty-state, .error-404 {
    text-align: center;
    padding: 5rem 1.25rem;
}
.error-404 .code {
    font-size: 8rem;
    font-weight: 900;
    color: var(--red);
    line-height: 1;
    direction: ltr;
}
.error-404 h2 { font-size: 2rem; margin: 1rem 0; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { max-width: 480px; margin: 0 auto; }
    .service-row { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 760px) {
    :root { --header-h: 72px; }
    .top-bar-row { font-size: .82rem; }
    .top-bar-left span:not(strong) { display: none; }
    .header-inner { padding: .65rem 1rem; }
    .logo-tag { display: none; }
    .header-cta { display: none; }
    .nav-toggle { display: flex; }
    /* تعديل وضع الهامبرجر في الموبايل:
       - بدل ما الـ main-nav تاخد flex:1 وتتوسّط، نخلّيها تتقلّص (flex:0)
       - بنخلّي الـ logo-link ياخد flex:1 عشان يدفع الهامبرجر للطرف
       النتيجة: لوجو على اليمين، فاصل، هامبرجر في أقصى اليسار البصري */
    .logo-link { flex: 1; }
    .main-nav { flex: 0 0 auto; position: static; justify-content: flex-end; }
    .nav-toggle { margin-right: auto; }
    .nav-list {
        display: none;
        /*
         * fixed بدل absolute - عشان حتى لو في parent عنده overflow:hidden،
         * الـ menu يطلع من الـ stacking context الخارجي ويظهر دايماً.
         * + z-index أعلى من الـ header (100) عشان نضمن الظهور فوق كل حاجة.
         */
        position: fixed;
        top: var(--header-h);
        right: 0; left: 0;
        background: #fff;
        flex-direction: column;
        padding: 1rem;
        box-shadow: var(--shadow);
        gap: .25rem;
        border-top: 1px solid var(--border);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        z-index: 999;
    }
    .nav-list.open { display: flex; }
    .nav-list a { padding: .75rem 1rem; }
    .hero { padding: 2.5rem 0 3rem; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .hero-stat-num { font-size: 1.8rem; }
    .section { padding: 3rem 0; }
    .stat-big { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 1rem; }
    .stat-big:last-child { border-bottom: 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .form-row { grid-template-columns: 1fr; }
    .cta-strip-inner { flex-direction: column; text-align: center; }
    .cta-strip-buttons { justify-content: center; }
    .hero-badge { font-size: .75rem; padding: .55rem .8rem; }
    .hero-badge-1 { right: 5px; }
    .hero-badge-2 { left: 5px; }
}
@media (max-width: 480px) {
    h1 { font-size: 1.9rem; }
    .hero h1 { font-size: 2.1rem; }
    .nav-list { font-size: .95rem; }
    .hero-actions .btn { flex: 1; min-width: 0; }
}

/* ============================================
   Print
   ============================================ */
@media print {
    .top-bar, .site-header, .floating-actions, .cta-strip, .site-footer { display: none; }
    body { color: #000; }
    a { color: #000; text-decoration: underline; }
}

/* ============================================
   ADDITIONAL STYLES - page-specific
   ============================================ */

/* Reveal-on-scroll */
.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.will-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Header scrolled state */
.site-header.scrolled {
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
}

/* Body floating-hide */
body.hide-floating .floating-actions { opacity: .15; pointer-events: none; }

/* === Section CTAs / centered CTAs === */
.section-cta {
  text-align: center;
  margin-top: 36px;
}
.section-cta .btn { margin: 0 6px 8px; }

/* === Service detail page === */
.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.service-detail-content { background: #fff; padding: 36px; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }

.service-aside .aside-card,
.about-aside .aside-card,
.article-aside .aside-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.aside-card h3 { margin: 0 0 14px; font-size: 1.05rem; color: var(--red); }
.aside-card-flag { background: linear-gradient(135deg,#1A1A1A,#2c1820); color: #fff; }
.aside-card-flag h3, .aside-card-flag strong { color: #fff; }
.aside-card-flag .aside-link { color: var(--gold); }
.aside-list { list-style: none; padding: 0; margin: 0; }
.aside-list li { padding: 8px 0; border-bottom: 1px dashed #eee; }
.aside-list li:last-child { border-bottom: none; }
/*
 * الـ services bicon (SVG) أصلاً بحجم 32-48px في الـ service cards الرئيسية.
 * في الـ sidebar (خدمات أخرى)، محتاجين حجم أصغر بكتير - أيقونة صغيرة جنب النص.
 * بنفرض max-width/height مع object-fit عشان كل SVG/img يلتزم بالحجم ده.
 */
.aside-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.aside-list a svg,
.aside-list a img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px;
    max-height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}
.aside-list a { color: #333; text-decoration: none; display: block; transition: color .2s; }
.aside-list a:hover { color: var(--red); }
.aside-card-cta .btn { margin: 4px 0; }
.btn-block { display: block; width: 100%; text-align: center; }

/* About stats aside */
.aside-card-stats .aside-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
}
.aside-card-stats .aside-stat:last-child { border-bottom: 0; }
.aside-card-stats .num {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--red);
  min-width: 60px;
}
.aside-card-stats .lbl { color: #555; }

/* === Page hero (interior) === */
.page-hero {
  background: linear-gradient(135deg, #faf3f3 0%, #fff 100%);
  padding: 60px 0 32px;  /* أصغر - كان 90/50 */
  border-bottom: 4px solid var(--red);
  position: relative;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(to right, var(--red) 33.33%, #fff 33.33% 66.66%, #1A1A1A 66.66%);
}
/*
 * Service page hero - حجم compact وأكثر احترافية.
 * الـ icon أصغر (1.8rem بدل 3rem)، الـ h1 أصغر، الفراغات أقل.
 * نتيجة: header شيك ومتوازن، مش حجم كبير يدفع الـ content لتحت.
 */
.page-hero h1 {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);  /* كان clamp(2rem, 4vw, 3.2rem) */
  margin: 8px 0 6px;
  line-height: 1.25;
}
.page-hero p {
  font-size: 1rem;  /* كان 1.15rem */
  color: #555;
  max-width: 700px;
  margin: 0;
  line-height: 1.55;
}
.page-hero-icon {
  font-size: 1.8rem;  /* كان 3rem - أيقونة compact جداً */
  margin-bottom: 4px;
  line-height: 1;
}
.page-hero-image {
  margin-bottom: 8px;
}
.page-hero-image img {
  max-height: 60px;  /* صورة compact - كانت بحجم أكبر افتراضياً */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Governorate page hero with red bg */
.gov-hero {
  background: linear-gradient(135deg, var(--red) 0%, #8b0a17 100%);
  color: #fff;
  padding: 90px 0 60px;
  position: relative;
}
.gov-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(to right, #fff 33.33%, #1A1A1A 33.33% 66.66%, var(--gold) 66.66%);
}
.gov-hero h1 { color: #fff; }
.gov-hero h1 .accent { color: var(--gold); }
.gov-hero .gov-hero-sub { color: rgba(255,255,255,.92); font-size: 1.15rem; max-width: 800px; margin: 14px 0 28px; }
.gov-hero .breadcrumbs a { color: rgba(255,255,255,.85); }
.gov-hero .breadcrumbs { color: rgba(255,255,255,.7); }
.gov-hero .hero-eyebrow { background: rgba(255,255,255,.15); color: #fff; }
.gov-hero .pulse-dot { background: var(--gold); }

/* === Coverage / region block === */
.region-block { margin-bottom: 50px; }
.region-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--red);
  margin-bottom: 24px;
}
.region-flag { font-size: 1.6rem; }

/* === Gov card === */
.gov-card-arrow {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--red);
  font-size: 1.4rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity .25s, transform .25s;
}
.gov-card { position: relative; }
.gov-card:hover .gov-card-arrow { opacity: 1; transform: translateX(-4px); }

/* === Area chips === */
.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}
.area-chip {
  display: inline-block;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e8e0e0;
  border-radius: 30px;
  font-size: .92rem;
  color: #333;
  transition: all .2s;
}
.area-chip:hover { border-color: var(--red); color: var(--red); }
.area-chip-street { background: #faf3f3; border-color: #f0d8d8; color: var(--red); }
.streets-block { margin-top: 32px; padding-top: 24px; border-top: 1px dashed #ddd; }
.streets-block h3 { color: var(--red); margin-bottom: 14px; }

/* === Directory layout === */
.dir-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  align-items: start;
}
.dir-sidebar {
  background: #fff;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  position: sticky;
  top: 100px;
}
.dir-sidebar h3 { margin: 0 0 14px; color: var(--red); font-size: 1.05rem; padding-bottom: 10px; border-bottom: 2px solid var(--red); }
.dir-filter-list { list-style: none; padding: 0; margin: 0; max-height: 500px; overflow-y: auto; }
.dir-filter-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  font-size: .95rem;
  transition: all .2s;
}
.dir-filter-list li a:hover { background: #faf3f3; color: var(--red); }
.dir-filter-list li a.active { background: var(--red); color: #fff; }
.dir-filter-list .count { background: rgba(0,0,0,.08); padding: 1px 8px; border-radius: 10px; font-size: .8rem; }
.dir-filter-list a.active .count { background: rgba(255,255,255,.25); color: #fff; }

.dir-results-head {
  background: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Dir search form */
.dir-search-form {
  display: flex;
  gap: 10px;
  max-width: 600px;
  margin-top: 20px;
}
.dir-search-form input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e8e0e0;
  border-radius: 30px;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s;
}
.dir-search-form input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(206,17,38,.1); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 14px;
}
.empty-state .empty-icon { font-size: 4rem; margin-bottom: 16px; }
.empty-state h3 { margin-bottom: 8px; color: var(--red); }

/* === About page === */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.about-text {
  background: #fff;
  padding: 40px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* === Article === */
.article-hero { padding-bottom: 30px; }
.article-category {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.article-meta {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  color: #777;
  font-size: .92rem;
}
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}
.article-content {
  background: #fff;
  padding: 40px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  /*
   * min-height يضمن إن الـ container ياخد ارتفاع مرئي حتى لو فاضي.
   * مع overflow: visible عشان نتأكد إن المحتوى مش متقفل.
   */
  min-height: 400px;
  overflow: visible;
}
.article-featured-img {
  margin: -40px -40px 30px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.article-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.article-excerpt {
  font-size: 1.18rem;
  color: #444;
  font-weight: 500;
  padding: 20px;
  background: #faf3f3;
  border-right: 4px solid var(--red);
  border-radius: 8px;
  margin-bottom: 30px;
}
.article-tags {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px dashed #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tag-chip {
  background: #faf3f3;
  color: var(--red);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .87rem;
}
.article-share {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #ddd;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.share-btn {
  padding: 6px 14px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}
.share-wa { background: #25D366; }
.share-fb { background: #1877F2; }
.share-tw { background: #1DA1F2; }
.related-section { margin-top: 60px; }
.related-section h2 { margin-bottom: 24px; color: var(--red); }

/* === Directory teaser (home) === */
.dir-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.dir-teaser-text h2 { font-size: 2rem; margin: 12px 0 16px; }
.dir-features { list-style: none; padding: 0; margin: 18px 0 24px; }
.dir-features li { padding: 8px 0; color: #333; font-size: 1.05rem; }
.dir-features li::before { color: var(--red); font-weight: 800; }
.dir-teaser-visual { position: relative; min-height: 320px; }
.dir-stack { position: relative; height: 100%; }
.dir-card-mini {
  background: #fff;
  padding: 16px 22px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  font-weight: 600;
  border-right: 4px solid var(--red);
  position: absolute;
  width: 80%;
  transition: transform .3s;
}
.dir-card-mini:hover { transform: translateX(-4px); }
.dir-card-mini:nth-child(1) { top: 0; right: 0; z-index: 6; }
.dir-card-mini:nth-child(2) { top: 50px; right: 30px; z-index: 5; }
.dir-card-mini:nth-child(3) { top: 100px; right: 0; z-index: 4; }
.dir-card-mini:nth-child(4) { top: 150px; right: 30px; z-index: 3; }
.dir-card-mini:nth-child(5) { top: 200px; right: 0; z-index: 2; }
.dir-card-mini:nth-child(6) { top: 250px; right: 30px; z-index: 1; }

/* === Directory cards extras === */
.dir-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold);
  color: #1A1A1A;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 700;
  z-index: 2;
}
.dir-card { position: relative; }
.dir-card-featured { border: 2px solid var(--gold); }
.dir-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #8b0a17);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.dir-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dir-head-text { flex: 1; min-width: 0; }
.dir-head-text h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;          /* النص فوق خلفية سوداء، لازم أبيض عشان يبان */
    font-weight: 800;
    line-height: 1.3;
    word-wrap: break-word;
}
.dir-head-text small {
    color: rgba(255,255,255,.72);   /* رمادي فاتح فوق الخلفية السوداء */
    font-size: .82rem;
    display: block;
    margin-top: .25rem;
}
.dir-card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.dir-addr { color: #555; font-size: .92rem; margin: 8px 0; }
.dir-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.dir-tag {
  background: rgba(206,17,38,.08);
  color: var(--red);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .78rem;
}
.dir-hours { color: #777; font-size: .87rem; margin: 6px 0; }
.dir-card-foot {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #eee;
  flex-wrap: wrap;
}
.dir-btn {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  transition: all .2s;
  /*
   * flex + justify-content: center بيخلي محتوى الزرار (الأيقونة + النص)
   * متمركز في النص. RTL الطبيعي خلّى الأيقونة على اليمين والنص في النص
   * بتوازن. gap: 6px بيبعد الأيقونة عن النص.
   */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.2;
}
.dir-btn svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.dir-btn span,
.dir-btn {
  /* النص ما يلفّش لـ سطرين - يبقى truncate لو طويل */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-btn-call { background: var(--red); color: #fff; }
.dir-btn-call:hover { background: #8b0a17; }
.dir-btn-wa { background: #25D366; color: #fff; }
.dir-btn-wa:hover { background: #128C7E; }
.dir-btn-map { background: #f3f3f3; color: #333; flex: 0 0 44px; padding: 9px 0; }
.dir-btn-map:hover { background: #e0e0e0; }
.dir-btn-web { background: #f3f3f3; color: #333; flex: 0 0 44px; padding: 9px 0; }
.dir-btn-web:hover { background: #e0e0e0; }
.dir-btn-details { background: #1a1a1a; color: #fff; }
.dir-btn-details:hover { background: #000; }

/* === Error/404 page === */
.error-page { padding: 80px 0; }
.error-box {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  padding: 50px 30px;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.error-num {
  font-size: 6rem;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 4px 4px 0 rgba(206,17,38,.1);
}
.error-actions { margin: 24px 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.error-links { margin-top: 20px; color: #777; font-size: .95rem; }
.error-links a { color: var(--red); text-decoration: none; margin: 0 4px; }
.error-links a:hover { text-decoration: underline; }

/* === Contact info card flag block === */
.contact-flag-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 14px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  font-size: .92rem;
}

/* === CTA card === */
.cta-card {
  background: linear-gradient(135deg, var(--red), #8b0a17);
  color: #fff;
  padding: 50px 30px;
  border-radius: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 50%);
  animation: rotate 20s linear infinite;
}
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { color: #fff; margin-bottom: 12px; }
.cta-card p { color: rgba(255,255,255,.92); margin-bottom: 24px; font-size: 1.1rem; }
.cta-card .btn-primary { background: #fff; color: var(--red); }
.cta-card .btn-primary:hover { background: var(--gold); color: #1A1A1A; }

/* === Responsive === */
@media (max-width: 980px) {
  .service-detail-grid,
  .article-layout,
  .about-grid,
  .dir-layout,
  .dir-teaser,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .dir-sidebar { position: static; }
  .dir-stack { height: 320px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 70px 0 36px; }
  .article-content,
  .about-text,
  .service-detail-content { padding: 24px; }
  .article-featured-img { margin: -24px -24px 24px; }
  .error-num { font-size: 4.5rem; }
  .dir-card-foot { flex-wrap: wrap; }
}

/* ============================================
   إضافات لميزات الواجهة الجديدة
   ============================================ */

/* تنسيق صورة الشعار المرفوعة - تستبدل الـ SVG الافتراضي */
.logo-img {
  max-height: 60px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  display: block;
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* صفحة المحتوى الثابت (Privacy, Terms, إلخ) */
.static-page-wrap {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.static-page-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-soft);
}
.static-page-content h2 {
  font-size: 1.5rem;
  color: var(--red);
  margin-top: 1.8em;
  margin-bottom: .8em;
  padding-bottom: .4em;
  border-bottom: 2px solid var(--border);
}
.static-page-content h2:first-child {
  margin-top: 0;
}
.static-page-content h3 {
  font-size: 1.2rem;
  color: var(--black);
  margin-top: 1.5em;
  margin-bottom: .6em;
}
.static-page-content p {
  margin-bottom: 1.2em;
}
.static-page-content ul,
.static-page-content ol {
  margin-bottom: 1.2em;
  padding-right: 1.8em;
}
.static-page-content li {
  margin-bottom: .5em;
}
.static-page-content a {
  color: var(--red);
  text-decoration: underline;
}
.static-page-content blockquote {
  border-right: 4px solid var(--red);
  background: #faf3f3;
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 8px;
  color: var(--text-soft);
  font-style: italic;
}
.static-page-content strong {
  color: var(--black);
}

@media (max-width: 600px) {
  .static-page-wrap { padding: 24px 18px; }
  .static-page-content { font-size: 1rem; }
}

/* ============================================
   إصلاح ظهور الأيقونات (الإيموجي) على كل الأنظمة
   ============================================
   الإيموجي اللي بنستخدمها (🚛 📞 📝 إلخ) محتاجة خط إيموجي عشان تظهر كصور.
   لما المتصفح يلاقي حرف إيموجي، بيدور في الخطوط المتاحة بالترتيب لحد ما
   يلاقي خط فيه شكل مرسوم لهذا الحرف. الخطوط دي مدمجة في معظم الأنظمة:
   Apple Color Emoji (ماك/iOS)، Segoe UI Emoji (ويندوز)، Noto Color Emoji (لينكس/أندرويد).
   لما نضيفهم في الـ font-family، المتصفح يقدر يرسم الإيموجي صح. */
.nav-icon,
.admin-stat-icon,
.admin-brand-icon,
.welcome-card,
.flash,
.btn,
.contact-icon,
.error-num,
.action-btn,
.dir-logo,
.float-btn,
.feature-icon,
.process-icon,
.share-btn,
.tag-chip,
.aside-link,
.pricing-feature,
.empty-icon,
.badge-icon,
.region-flag {
  font-family: 'Cairo', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
}

/* تنسيق عام يضمن أي عنصر فيه إيموجي يستخدم الخطوط الصحيحة */
.emoji,
[data-emoji] {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
  font-style: normal;
}

/* ============================================
   إصلاح دفاعي لبطاقات الدليل - ضمان قابلية القراءة
   ============================================
   ده تثبيت صريح للألوان عشان أي إعدادات قديمة أو متعارضة ميقدروش
   يقلبوا العناصر دي ليبقى الكلام مش واضح. الـ !important هنا ضرورية
   لأنها بتاخد الأولوية على أي قاعدة CSS سابقة بنفس الـ selector.
   عموماً نحاول نتجنّب !important، لكن في حالات إصلاح التعارضات
   بتكون أفضل طريقة لضمان سلوك ثابت. */
.dir-card {
    background: #fff !important;
}
.dir-card-head {
    background: transparent;
    color: var(--text);
}
.dir-head-text h3 {
    color: var(--black);
    margin: 0;
}
.dir-head-text small {
    color: var(--text-mute);
}

/* ============================================
   صفحة اتصل بنا الجديدة (بدون فورم)
   ============================================ */

/* بنر علوي بصورة من الإعدادات */
.contact-banner-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 320px;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 4px solid var(--red);
}
.contact-banner-overlay {
  background: linear-gradient(135deg, rgba(26,26,26,.78) 0%, rgba(206,17,38,.72) 100%);
  width: 100%;
  padding: 90px 0 50px;
  color: #fff;
}
.contact-banner-overlay h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.contact-banner-overlay p { color: rgba(255,255,255,.95); font-size: 1.15rem; max-width: 760px; }
.contact-banner-overlay .breadcrumbs a { color: rgba(255,255,255,.85); }
.contact-banner-overlay .breadcrumbs { color: rgba(255,255,255,.7); }

/* بطاقة الاتصال الكبيرة (Mega Call) - استدعاء سريع وملفت */
.contact-quick-action {
  padding: 50px 0 30px;
}
.contact-mega-call {
  background: linear-gradient(135deg, var(--red) 0%, #8b0a17 100%);
  color: #fff;
  padding: 40px 50px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 30px;
  box-shadow: 0 12px 40px rgba(206,17,38,.25);
  position: relative;
  overflow: hidden;
}
.contact-mega-call::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 50%);
  animation: rotate-bg 25s linear infinite;
}
@keyframes rotate-bg {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
.contact-mega-call > * { position: relative; z-index: 1; }
.contact-mega-pulse {
  width: 14px;
  height: 14px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(74,222,128,.7);
  animation: pulse-green 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.7); }
  70% { box-shadow: 0 0 0 18px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.contact-mega-text {
  flex: 1;
}
.contact-mega-text strong {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 4px;
  color: #fff;
}
.contact-mega-text span {
  color: rgba(255,255,255,.92);
}
.contact-mega-btn {
  background: #fff;
  color: var(--red);
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.contact-mega-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  text-decoration: none;
  color: var(--red);
}

@media (max-width: 800px) {
  .contact-mega-call {
    flex-direction: column;
    padding: 30px 24px;
    text-align: center;
  }
  .contact-mega-btn { width: 100%; justify-content: center; }
}

/* شبكة وسائل التواصل (4 بطاقات) */
.contact-methods-section {
  padding-top: 30px;
}
.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.contact-method {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  border-top: 4px solid transparent;
  transition: all .3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-method:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
  text-decoration: none;
}
.contact-method-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #fff;
}
.contact-method h3 {
  font-size: 1.25rem;
  margin: 8px 0;
  color: var(--black);
}
.contact-method-value {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 8px 0;
  color: var(--red);
  word-break: break-word;
}
.contact-method p {
  color: var(--text-mute);
  font-size: .92rem;
  margin: 6px 0 16px;
}
.contact-method-cta {
  background: var(--red);
  color: #fff;
  padding: 10px 22px;
  border-radius: 30px;
  font-weight: 700;
  font-size: .92rem;
  transition: background .2s;
}
.contact-method:hover .contact-method-cta {
  background: var(--black);
}
.contact-method-cta-static {
  color: var(--text-mute);
  font-weight: 700;
  padding: 10px 22px;
  border: 1px dashed var(--border);
  border-radius: 30px;
  font-size: .92rem;
}

/* ألوان كل بطاقة حسب نوعها */
.contact-method-phone { border-top-color: var(--red); }
.contact-method-phone .contact-method-icon { background: linear-gradient(135deg, var(--red), #8b0a17); }
.contact-method-phone .contact-method-value { color: var(--red); }

.contact-method-whatsapp { border-top-color: #25D366; }
.contact-method-whatsapp .contact-method-icon { background: linear-gradient(135deg, #25D366, #128C7E); }
.contact-method-whatsapp .contact-method-value { color: #128C7E; }
.contact-method-whatsapp .contact-method-cta { background: #25D366; }
.contact-method-whatsapp:hover .contact-method-cta { background: #128C7E; }

.contact-method-email { border-top-color: #3b82f6; }
.contact-method-email .contact-method-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.contact-method-email .contact-method-value { color: #1d4ed8; font-size: 1rem; }
.contact-method-email .contact-method-cta { background: #3b82f6; }
.contact-method-email:hover .contact-method-cta { background: #1d4ed8; }

.contact-method-location { border-top-color: var(--gold); cursor: default; }
.contact-method-location:hover { transform: none; }
.contact-method-location .contact-method-icon { background: linear-gradient(135deg, var(--gold), #a08545); }
.contact-method-location .contact-method-value { color: var(--black); font-size: 1rem; }

/* بطاقة ساعات العمل */
.contact-hours-box {
  display: flex;
  gap: 20px;
  align-items: center;
  background: linear-gradient(135deg, var(--black) 0%, #2a2a2a 100%);
  color: #fff;
  padding: 28px 32px;
  border-radius: 14px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
.contact-hours-box::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 6px; height: 100%;
  background: linear-gradient(to bottom, var(--red) 33%, #fff 33% 66%, var(--black) 66%);
}
.contact-hours-icon {
  font-size: 3rem;
  flex-shrink: 0;
}
.contact-hours-box strong {
  display: block;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 6px;
}
.contact-hours-box p {
  color: rgba(255,255,255,.85);
  margin: 0;
}

/* محتوى إضافي حر في صفحة الاتصال */
.contact-extra-content {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

/* ============================================
   سيكشن المقالة الوسطية في الصفحة الرئيسية
   ============================================ */
.home-article-section {
  padding: 60px 0;
}
.home-article-body {
  max-width: 1000px;
  margin: 30px auto 0;
  /* لا نحط padding أو background ثابتين هنا — نسيب المساحة للأدمن يصمم
     السيكشن زي ما هو عاوز عن طريق HTML/CSS اللي بيكتبه في الإعدادات */
}

/* ============================================
   البنرات الإعلانية
   ============================================ */
.ad-banner {
  /* مسافة معقولة من فوق وتحت - مش مبالغة */
  margin: 12px auto;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
}
.ad-banner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}
.ad-banner iframe {
  max-width: 100%;
  border: 0;
}
/* بنرات داخل الـ container للأقسام */
.section .ad-banner,
.container .ad-banner {
  margin-top: 0;
  margin-bottom: 16px;
}
/* بنرات الشريط الجانبي - تبقى صغيرة */
.ad-banner-article_sidebar,
.ad-banner-blog_sidebar,
.ad-banner-directory_sidebar {
  margin: 14px 0;
}

/* ============================================
   مربع التقييم (Rating Widget)
   ============================================
   التصميم: مربع نظيف يظهر تحت المقال أو الصفحة، فيه 5 نجوم قابلة للنقر.
   لما الزائر يحوّم الماوس فوق نجمة، النجوم لحدّها بتضوّي بلون ذهبي.
   لما يضغط، النجوم بتتثبّت ومربع الشكر يظهر مكان النجوم. */
.rating-widget {
    background: linear-gradient(135deg, #fff 0%, #faf3f3 100%);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    margin: 32px auto;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.rating-prompt {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 12px;
}
.rating-stars {
    display: inline-flex;
    gap: 6px;
    margin: 8px 0 12px;
    /* RTL: نخلي النجوم من اليمين للشمال طبيعي */
    direction: ltr;
    flex-direction: row;
}
.star-btn {
    background: none;
    border: 0;
    font-size: 2.6rem;
    line-height: 1;
    color: #d4d4d4;
    cursor: pointer;
    padding: 4px 6px;
    transition: color .15s, transform .15s;
    /* خط افتراضي يحتوي رمز النجمة (★) */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
}
.star-btn:hover, .star-btn:focus {
    transform: scale(1.15);
    outline: none;
}
/* تأثير hover: النجوم لحدّ النجمة اللي بنقف عليها بتضوّي ذهبي.
   اللوجيك ده بيشتغل بسبب الـ JS اللي بيضيف الكلاس "star-hover".
   ميزة CSS: لو الزائر بيحوّم على النجمة الـ 3، النجوم 1, 2, 3 كلها تتضوّى. */
.star-btn.star-hover {
    color: #fbbf24;
}
.star-btn:disabled {
    cursor: not-allowed;
    opacity: .6;
}
.rating-summary {
    font-size: .92rem;
    color: var(--text-mute);
    margin-top: 8px;
}

/* حالة "تم التقييم" — النجوم متجمّدة بلون ذهبي مع رسالة شكر */
.rating-widget-done {
    background: linear-gradient(135deg, #fff9eb 0%, #fef3c7 100%);
    border-color: var(--gold);
}
.rating-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.rating-thanks strong {
    font-size: 1.1rem;
    color: var(--black);
}
.rating-thanks .star {
    font-size: 1.6rem;
    color: #d4d4d4;
    margin: 0 2px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
}
.rating-thanks .star-on {
    color: #fbbf24;
}

@media (max-width: 500px) {
    .rating-widget { padding: 18px 16px; }
    .star-btn { font-size: 2.2rem; padding: 2px 4px; }
}

/* ============================================
   إصلاح نهائي لبطاقات الدليل - عرض ابيض على ابيض في الكمبيوتر
   ============================================
   المشكلة المتكررة كانت إن .dir-card-head كان داخل قاعدة قديمة بخلفية
   سوداء، وقاعدة جديدة بدون لون نص. النتيجة: نص اسود على خلفية سوداء.
   الحل الجذري: نلغي خلفية الـ head ونخلّي الكارت كله ابيض نظيف مع
   تمييز بصري للعناصر الداخلية بدل ما يكون عن طريق contrast الخلفية. */

/* قاعدة عامة لكل الشاشات - الكارت ابيض كله */
.dir-card,
.dir-card-head {
    background: #fff !important;
    background-image: none !important;
}
.dir-card-head {
    background: transparent !important;
    padding: 18px 20px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.dir-card-head::after {
    display: none !important;  /* نلغي الـ pseudo element القديم */
}
.dir-head-text h3,
.dir-head-text h2 {
    color: var(--black) !important;
    margin: 0 0 4px !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
}
.dir-head-text small,
.dir-head-text .dir-loc {
    color: var(--text-mute) !important;
    font-size: .85rem !important;
}
/* اللوغو الدائري الأحمر - بيفضل بارز */
.dir-card .dir-logo {
    background: linear-gradient(135deg, var(--red), #8b0a17) !important;
    color: #fff !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.dir-card .dir-logo svg {
    width: 28px;
    height: 28px;
    color: #fff;
}

/* مخصص للديسكتوب - مضمون 100% */
@media (min-width: 768px) {
    .dir-card-head {
        background: linear-gradient(135deg, #fafafa 0%, #fff 100%) !important;
    }
    .dir-head-text h3 {
        color: var(--black) !important;
    }
}

/* ============================================
   صفحة تفاصيل الونش (winch.php)
   ============================================ */
.winch-hero {
    background: linear-gradient(135deg, var(--black) 0%, #2a2a2a 100%);
    color: #fff;
    padding: 50px 0 30px;
    border-bottom: 4px solid var(--red);
}
.winch-hero h1 { color: #fff; margin-bottom: 8px; }
.winch-hero .breadcrumbs a { color: rgba(255,255,255,.8); }
.winch-hero-grid {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 24px 0;
}
.winch-hero-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), #8b0a17);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.winch-hero-icon img { width: 100%; height: 100%; object-fit: cover; }
.winch-hero-icon svg { width: 48px; height: 48px; }
.winch-featured-badge {
    display: inline-block;
    background: var(--gold);
    color: var(--black);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 8px;
}
.winch-location { color: rgba(255,255,255,.92); font-size: 1.1rem; margin: 4px 0; }
.winch-address { color: rgba(255,255,255,.7); font-size: .95rem; }
.winch-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.winch-detail-section { padding: 50px 0; background: var(--bg-alt); }
.winch-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}
@media (max-width: 900px) {
    .winch-detail-grid { grid-template-columns: 1fr; }
    .winch-hero-grid { flex-direction: column; text-align: center; }
}

.winch-info-block {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.winch-info-block h2 {
    font-size: 1.4rem;
    color: var(--black);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--red);
    display: inline-block;
}
.winch-description { color: var(--text-soft); line-height: 1.85; }
.winch-services-list { list-style: none; padding: 0; }
.winch-services-list li {
    padding: 8px 0;
    color: var(--text-soft);
    border-bottom: 1px dashed #eee;
}
.winch-services-list li:last-child { border: 0; }

.winch-info-meta { display: flex; flex-direction: column; gap: 16px; }
.winch-meta-item { display: flex; gap: 14px; align-items: flex-start; }
.winch-meta-icon { font-size: 1.6rem; flex-shrink: 0; }
.winch-meta-item strong { color: var(--black); display: block; margin-bottom: 4px; }
.winch-meta-item p { color: var(--text-soft); margin: 0; }

.winch-info-aside { position: sticky; top: 90px; align-self: start; }
.winch-contact-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.winch-contact-card h3 {
    color: var(--black);
    font-size: 1.15rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--red);
}
.winch-contact-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 10px;
    transition: transform .15s, box-shadow .15s;
    color: #fff;
}
.winch-contact-btn:hover { transform: translateX(-3px); text-decoration: none; color: #fff; }
.winch-contact-btn small { display: block; opacity: .85; font-size: .8rem; margin-bottom: 2px; }
.winch-contact-btn strong { display: block; font-size: 1.05rem; color: #fff; }
.winch-contact-phone { background: var(--red); }
.winch-contact-phone:hover { background: #8b0a17; }
.winch-contact-wa { background: #25D366; }
.winch-contact-wa:hover { background: #128C7E; }
.winch-contact-map { background: #4285F4; }
.winch-contact-map:hover { background: #2965c4; }
.winch-contact-web { background: var(--gold); color: var(--black) !important; }
.winch-contact-web small { color: rgba(0,0,0,.7); }
.winch-contact-web strong { color: var(--black) !important; }
.winch-contact-web:hover { background: #b89030; }

.winch-map-embed { margin-top: 20px; border-radius: 12px; overflow: hidden; }

/* أزرار التفاصيل في كارت الدليل */
.dir-btn-details {
    background: var(--black) !important;
    color: #fff !important;
    padding: 8px 14px !important;
    font-weight: 700;
    margin-right: auto;  /* في RTL ده بيدفعه لليسار - يفصله عن الأزرار التانية */
}
.dir-btn-details:hover { background: var(--red) !important; }
.dir-btn-web {
    background: var(--gold) !important;
    color: var(--black) !important;
}

/* ============================================
   شريط الموبايل السفلي (Bottom Navigation)
   ============================================
   إيه فكرة الشريط ده؟ في تطبيقات الموبايل، الأزرار المهمة بتكون دايماً في
   الجزء السفلي من الشاشة لأن ده الجزء اللي إيد المستخدم بتوصل له بسهولة
   من غير ما يحرّك إيده كتير. الويب بدأ يتبنى نفس الفكرة، وده اللي بنعمله هنا.
   
   الشريط مخفي تماماً على الديسكتوب لأن هناك الزائر بيستخدم الماوس،
   فمش محتاج "ergonomic placement" زي الموبايل. */

.mobile-bottom-nav {
    display: none;  /* مخفي افتراضياً - يظهر فقط على الموبايل */
}

@media (max-width: 760px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        background: #fff;
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        padding: 8px 4px;
        z-index: 998;  /* فوق المحتوى، لكن تحت modals والـ floating actions */
        padding-bottom: max(8px, env(safe-area-inset-bottom));  /* احترام الـ notch في iPhone */
    }
    
    .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        color: var(--text-mute);
        text-decoration: none;
        font-size: .68rem;
        font-weight: 600;
        transition: color .15s, transform .15s;
    }
    .mob-nav-item:hover,
    .mob-nav-item:focus {
        color: var(--red);
        text-decoration: none;
    }
    .mob-nav-item svg {
        margin-bottom: 2px;
    }
    .mob-nav-item span {
        font-size: .68rem;
        line-height: 1;
        white-space: nowrap;
    }
    
    /* لون واتساب الأخضر - مستخدم في الشريط السفلي */
    .mob-nav-wa {
        color: #25D366 !important;
    }
    .mob-nav-wa:hover {
        color: #128C7E !important;
    }
    
    /*
     * الـ floating actions (زر الاتصال والواتساب العايمين على الجنب).
     * بنخلّيهم ظاهرين على الموبايل بس فوق شريط الموبايل السفلي.
     * كده الزائر عنده الطريقتين: شريط تنقل + أزرار تواصل عايمة.
     */
    .floating-actions {
        display: flex !important;
        bottom: 90px !important;  /* فوق الشريط السفلي بمسافة آمنة */
        left: 16px !important;
        right: auto !important;
        flex-direction: column !important;
        gap: 12px !important;
        z-index: 999 !important;
    }
    .floating-actions a {
        width: 54px !important;
        height: 54px !important;
    }
    
    /* مساحة في آخر الـ body عشان المحتوى ميتغطاش بالشريط */
    body {
        padding-bottom: 72px;
    }
}

/*
 * قواعد قوية تضمن إن الشريط السفلي يظهر على الموبايل مهما يحصل من تعارضات.
 * بنحط القواعد دي خارج الـ media query عشان نضمن إنها موجودة، ثم
 * بنستخدم media query في الداخل لتفعيل العرض على الموبايل فقط.
 */
.mobile-bottom-nav {
    display: none;  /* مخفي افتراضياً */
}
@media (max-width: 760px) {
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 998 !important;
    }
}

/* ============================================
   سكشن الإحصائيات بدوائر أفقية (جديد)
   ============================================ */
.stats-circles {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 40px 0;
}
.stat-circle-item {
    text-align: center;
    flex: 1;
    min-width: 140px;
}
.stat-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red) 0%, #8b0a17 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    margin: 0 auto 14px;
    box-shadow: 0 10px 30px rgba(206,17,38,.3);
    position: relative;
    border: 4px solid rgba(255,255,255,.15);
}
.stat-circle::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,.25);
    animation: stat-circle-rotate 30s linear infinite;
}
@keyframes stat-circle-rotate { to { transform: rotate(360deg); } }
.stat-circle-label {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 12px;
}
@media (max-width: 760px) {
    .stats-circles { gap: 18px; padding: 24px 0; }
    .stat-circle { width: 100px; height: 100px; font-size: 1.4rem; }
    .stat-circle-label { font-size: .85rem; }
    .stat-circle-item { min-width: 100px; }
}

/* ============================================
   خانة البحث في صفحة التغطية
   ============================================ */
.coverage-search-wrap {
    position: relative;
    max-width: 600px;
    margin: 24px auto 0;
}
.coverage-search-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}
.coverage-search-input {
    width: 100%;
    padding: 16px 52px 16px 50px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1.05rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.coverage-search-input:focus {
    border-color: var(--red);
    outline: none;
    box-shadow: 0 0 0 4px rgba(206,17,38,.1);
}
.coverage-search-clear {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--border);
    color: var(--text);
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    display: none;
    line-height: 1;
}
.coverage-search-clear:hover { background: var(--red); color: #fff; }
.coverage-search-count {
    text-align: center;
    color: var(--text-mute);
    font-size: .92rem;
    margin: 10px 0 0;
    min-height: 1.2em;
}

/* ============================================
   البنرات الإعلانية - تركيز إجباري في الوسط
   ============================================
   الطلب: البنر يبقى دايماً في منتصف الصفحة، مش على الشمال أو اليمين.
   نضمن ذلك بـ:
   1. margin: 0 auto على الـ wrapper
   2. text-align: center للمحتوى الـ inline
   3. display: flex للسماح للمحتوى يتمدّد بالعرض المناسب */
.ad-banner,
[class*="ad-banner-"] {
    margin: 4px auto !important;  /* مسافة صغيرة جداً */
    padding: 0 !important;
    text-align: center !important;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.ad-banner img,
[class*="ad-banner-"] img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
.ad-banner > div,
.ad-banner > a,
[class*="ad-banner-"] > div,
[class*="ad-banner-"] > a {
    max-width: 100%;
    margin: 0 !important;
}
/* الـ banner-slider اللي بيلف الـ slides لو فيه أكتر من بنر */
.ad-banner .banner-slider,
[class*="ad-banner-"] .banner-slider {
    margin: 0 auto !important;
}

/* ============================================
   سكشن الصورة المميزة في الصفحة الرئيسية
   ============================================
   التصميم: إطار مميز بحدود حمراء + ظل ناعم + شريط ذهبي في الزاوية.
   ده بيخلي الصورة تبدو "presented" مش مجرد ملقاة في الصفحة. */
.home-feature-image-section {
    padding: 50px 0;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
}
.home-feature-frame {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    border: 6px solid #fff;
    background: #fff;
}
/* شريط ذهبي صغير في الزاوية - بيلفت الانتباه */
.home-feature-frame::before {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    z-index: 2;
    pointer-events: none;
}
.home-feature-frame img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.home-feature-caption {
    background: linear-gradient(135deg, var(--black) 0%, #2a2a2a 100%);
    color: #fff;
    padding: 18px 28px;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    border-top: 3px solid var(--red);
}
@media (max-width: 600px) {
    .home-feature-frame { border-width: 4px; }
    .home-feature-frame::before { width: 50px; height: 50px; }
    .home-feature-caption { font-size: 1rem; padding: 14px 18px; }
}

/* ============================================
   قائمة المناطق الفرعية تحت المحافظة
   ============================================
   الفكرة: شبكة من البطاقات الصغيرة، كل واحدة بتمثّل منطقة مغطّاة.
   التصميم بسيط ومنظّم بحيث يكون سهل القراءة حتى لو فيه 20+ منطقة. */
.gov-sub-areas-section {
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}
.gov-sub-areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.gov-sub-area-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--black);
    transition: all .2s;
}
.gov-sub-area-card:hover {
    border-color: var(--red);
    background: #faf3f3;
    transform: translateX(-3px);  /* في RTL: حركة بسيطة لليسار */
    text-decoration: none;
}
.gov-sub-area-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    color: var(--red);
}
.gov-sub-area-name {
    flex: 1;
    font-weight: 700;
    color: var(--black);
}
.gov-sub-area-arrow {
    color: var(--red);
    font-size: 1.2rem;
    font-weight: 800;
}

/* لما إحنا في صفحة منطقة فرعية، محتوى المحافظة الأم بيظهر تحت محتوى المنطقة.
   نديله شكل "secondary" عشان الزائر يفهم الفرق. */
.governorate-parent-content {
    margin-top: 30px;
    border-top: 2px dashed var(--border);
    padding-top: 30px;
}
.parent-content-heading {
    font-size: 1.4rem;
    color: var(--text-mute);
    margin-bottom: 20px;
    font-weight: 700;
}

/* الروابط الذكية التلقائية - تظهر بأناقة وسط النص */
.auto-link {
    color: var(--red);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .15s;
}
.auto-link:hover {
    color: var(--red-dark);
    text-decoration-style: solid;
}

/* ============================================
   إصلاح حاسم: أيقونات الخدمات (كانت بتطلع ضخمة)
   ============================================ 
   السبب الأصلي: الـ SVG داخل .service-icon ماكنش عنده container size،
   فالـ browser كان بيرسمه بحجمه الطبيعي أو بيتمدد لحاويته. الحل: نحدد
   حجم ثابت للحاوية، ونخلّي الـ SVG يطابق الحاوية. */
.service-icon {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--red);
    background: linear-gradient(135deg, rgba(206,17,38,.1), rgba(206,17,38,.05));
    border-radius: 50%;
    padding: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.service-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 40px !important;
    max-height: 40px !important;
}

/* ============================================
   إصلاح حاسم: دوائر الإحصائيات (كانت بتطلع عمودية)
   ============================================ 
   نقوّي القواعد بـ !important علشان أي CSS قديم يبقى مكسور.
   النتيجة: 4 دوائر حمراء جنب بعض على سطر واحد، تحت كل دائرة وصفها. */
.stats-band .stats-circles {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: flex-start !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
    padding: 40px 20px !important;
}
.stats-band .stat-circle-item {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 140px;
}
.stats-band .stat-circle {
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--red) 0%, #8b0a17 100%) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.9rem !important;
    font-weight: 900 !important;
    margin: 0 auto 14px !important;
    box-shadow: 0 10px 30px rgba(206,17,38,.4);
    border: 4px solid rgba(255,255,255,.18) !important;
    line-height: 1 !important;
}
.stats-band .stat-circle-label {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    display: block !important;
}
@media (max-width: 760px) {
    .stats-band .stats-circles { gap: 14px !important; padding: 24px 12px !important; }
    .stats-band .stat-circle-item { min-width: 80px !important; flex: 1; }
    .stats-band .stat-circle { width: 90px !important; height: 90px !important; font-size: 1.2rem !important; }
    .stats-band .stat-circle-label { font-size: .78rem !important; }
}

/* ============================================
   شريط بحث التغطية الجديد - inline form
   ============================================
   الفكرة: حاوية أفقية (flex row) فيها مربع الإدخال والزر جنب بعض.
   الأيقونة داخل مربع الإدخال على اليمين (في RTL تظهر على اليمين البصري). */
.coverage-search-row {
    display: flex;
    gap: 10px;
    max-width: 700px;
    margin: 24px auto 0;
    align-items: stretch;
}
.coverage-search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}
.coverage-search-input-wrap .coverage-search-icon {
    position: absolute;
    right: 16px;
    color: var(--text-mute);
    pointer-events: none;
    z-index: 1;
}
.coverage-search-row .coverage-search-input {
    width: 100%;
    height: 52px;
    padding: 0 50px 0 44px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.coverage-search-row .coverage-search-input:focus {
    border-color: var(--red);
    outline: none;
    box-shadow: 0 0 0 4px rgba(206,17,38,.1);
}
.coverage-search-row .coverage-search-clear {
    position: absolute;
    left: 10px;
    background: #e5e7eb;
    color: #374151;
    border: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
}
.coverage-search-row .coverage-search-clear:hover { background: var(--red); color: #fff; }
.coverage-search-btn {
    height: 52px;
    padding: 0 24px;
    background: linear-gradient(135deg, var(--red) 0%, #8b0a17 100%);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
    font-family: inherit;
}
.coverage-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(206,17,38,.3);
}
@media (max-width: 600px) {
    .coverage-search-row { flex-direction: column; gap: 8px; }
    .coverage-search-btn { width: 100%; justify-content: center; }
}

/* صورة الـ hero الجديدة - تغطّي الحاوية الجانبية */
.hero-banner {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.15));
}

/* ============================================
   البنرات الإعلانية - توسيط قسري
   ============================================
   شكوى من العميل: البنرات بتطلع على الجنب لأن الصور المرفوعة بتكون عرضها
   صغير ومش بياخد كل الـ container. الحل: نلزم الـ container ياخد عرض كامل
   ويوسّط محتواه في النص بـ flex centering. القاعدة دي بتطبّق على كل البنرات
   في الموقع، فأي صورة هتيجي في المنتصف ومش هتلصق في جنب.
*/
.ad-banner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px;
    margin: 24px auto !important;
    padding: 0 16px;
    text-align: center;
}
.ad-banner > * {
    max-width: 100%;
    margin: 0 auto !important;
}
.ad-banner img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 10px;
}
.ad-banner a {
    display: inline-block;
    margin: 0 auto !important;
}

/* البنر اللي فوق في الصفحة الرئيسية - بدون margin من فوق عشان يلتصق بالقائمة */
.ad-banner-home_top {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* ============================================
   نظام التعليقات
   ============================================ */
.comments-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid var(--border);
}
.comments-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.6rem;
    margin-bottom: 24px;
}
.comments-count {
    background: var(--red);
    color: #fff;
    font-size: .9rem;
    padding: 4px 12px;
    border-radius: 100px;
    font-weight: 700;
}
.comments-empty {
    padding: 30px;
    background: #faf9f6;
    border-radius: 10px;
    color: var(--text-mute);
    text-align: center;
    font-style: italic;
}

/* شبكة التعليقات - مربعات جنب بعض على الديسكتوب */
.comments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}
.comment-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    transition: box-shadow .2s, transform .2s;
}
.comment-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    transform: translateY(-2px);
}
.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), #8b0a17);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.comment-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.comment-author { color: var(--black); font-size: 1rem; }
.comment-date { font-size: .82rem; color: var(--text-mute); }
.comment-rating { display: flex; gap: 2px; }
.comment-star.on  { color: #f59e0b; }
.comment-star.off { color: #e5e7eb; }
.comment-body {
    color: var(--gray-700);
    line-height: 1.7;
    margin: 0;
    font-size: .95rem;
}

/* نموذج إضافة تعليق */
.comment-form-wrap {
    background: #faf9f6;
    border-radius: 12px;
    padding: 28px;
    margin-top: 30px;
}
.comment-form-wrap h3 { margin-top: 0; margin-bottom: 18px; }
.comment-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.comment-form .form-field {
    margin-bottom: 16px;
}
.comment-form .form-field label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--black);
    font-size: .95rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    transition: border-color .2s;
    box-sizing: border-box;
}
.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--red);
    outline: none;
}
.comment-form textarea { resize: vertical; min-height: 100px; }

/* تقييم النجوم التفاعلي - معكوس بالـ direction عشان يبدأ من اليمين في RTL */
.rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}
.rating-input input { display: none; }
.rating-input label {
    cursor: pointer;
    font-size: 1.8rem;
    color: #e5e7eb;
    transition: color .15s;
    margin: 0 !important;
    padding: 0 4px;
}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
    color: #f59e0b;
}

/* Honeypot - مخفي تماماً عن المستخدم البشري */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    visibility: hidden;
}

/* رسائل التنبيه (نجاح/خطأ) في التعليق */
.comment-alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-weight: 600;
}
.comment-alert-success {
    background: #d1fae5;
    color: #065f46;
    border-right: 4px solid #10b981;
}
.comment-alert-error {
    background: #fee2e2;
    color: #991b1b;
    border-right: 4px solid #ef4444;
}
.form-note {
    font-size: .85rem;
    color: var(--text-mute);
    margin: 12px 0 0;
}

/* استجابة موبايل */
@media (max-width: 600px) {
    .comment-form-row { grid-template-columns: 1fr; }
    .comments-grid { grid-template-columns: 1fr; }
    .comment-form-wrap { padding: 20px; }
}

/* ============================================
   إصلاح Breadcrumbs داخل الـ hero الملوّن
   ============================================
   المشكلة: ستايل الـ breadcrumb الأصلي مصمم على خلفية بيضاء بألوان حمراء.
   لما يتعمل داخل .gov-hero أو .page-hero (خلفيات ملوّنة)، النصوص بتختفي
   لأن الأحمر على الأحمر = شفاف.
   
   الحل: قواعد override تجعل الـ breadcrumb يلبس ألوان فاتحة على الخلفيات
   الملوّنة. بدون background عشان يبان أنه جزء من الـ hero مش شريط منفصل.
*/
.gov-hero .breadcrumbs,
.page-hero .breadcrumbs,
.contact-banner-hero .breadcrumbs {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 0 0 16px !important;
    margin: 0 0 8px !important;
}
.gov-hero .breadcrumbs ol,
.page-hero .breadcrumbs ol,
.contact-banner-hero .breadcrumbs ol {
    font-size: .92rem;
    opacity: .95;
}
.gov-hero .breadcrumbs li,
.gov-hero .breadcrumbs li::after,
.page-hero .breadcrumbs li,
.page-hero .breadcrumbs li::after,
.contact-banner-hero .breadcrumbs li,
.contact-banner-hero .breadcrumbs li::after {
    color: rgba(255,255,255,.85) !important;
}
.gov-hero .breadcrumbs a,
.page-hero .breadcrumbs a,
.contact-banner-hero .breadcrumbs a {
    color: #fff !important;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.4);
    text-underline-offset: 3px;
}
.gov-hero .breadcrumbs a:hover,
.page-hero .breadcrumbs a:hover,
.contact-banner-hero .breadcrumbs a:hover {
    text-decoration-color: #fff;
}
.gov-hero .breadcrumbs li[aria-current],
.page-hero .breadcrumbs li[aria-current],
.contact-banner-hero .breadcrumbs li[aria-current] {
    color: #fff !important;
    font-weight: 700;
}

/*
 * الـ breadcrumb في contact-banner-hero ممكن يطلع على الشريط الأبيض الفاصل
 * (تحت الـ banner image). عشان النص الأبيض ميختفيش في الجزء الأبيض،
 * نضيف text-shadow غامق يخليه واضح فوق أي خلفية.
 */
.contact-banner-hero .breadcrumbs li,
.contact-banner-hero .breadcrumbs a {
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ============================================
   بطاقات الخدمات - شكل مستطيل أفقي (Wide cards)
   ============================================
   الفكرة: الخدمة بتظهر كصف أفقي - الأيقونة على الجنب، النص فيه عنوان
   ووصف ورابط على الجنب التاني. شكل أكثر احترافية ومناسب للقراءة لأنه
   بياخد مساحة عرض أكبر للنص بدل ما يضغطه.
*/
.services-grid.services-grid-wide {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 32px 0;
}
.service-card.service-card-wide {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: right !important;  /* RTL */
    gap: 20px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    min-height: 140px;
}
.service-card.service-card-wide:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    border-color: var(--red);
}
.service-card.service-card-wide .service-icon {
    flex-shrink: 0 !important;
    margin: 0 !important;  /* نلغي الـ margin auto الافتراضي */
}
.service-card.service-card-wide .service-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.service-card.service-card-wide h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--black);
    font-weight: 800;
}
.service-card.service-card-wide p {
    margin: 0;
    color: var(--gray-700);
    line-height: 1.6;
    font-size: .95rem;
}
.service-card.service-card-wide .service-link {
    color: var(--red);
    font-weight: 700;
    font-size: .9rem;
    margin-top: 4px;
}

/* موبايل: عمود واحد، نفس الشكل بس بحجم أصغر */
@media (max-width: 760px) {
    .services-grid.services-grid-wide {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .service-card.service-card-wide {
        padding: 18px;
        gap: 14px;
        min-height: auto;
    }
    .service-card.service-card-wide h3 { font-size: 1.05rem; }
    .service-card.service-card-wide p  { font-size: .9rem; }
}

/* شاشات صغيرة جداً: لو محتاجين الأيقونة فوق والمحتوى تحت */
@media (max-width: 380px) {
    .service-card.service-card-wide {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* ============================================
   إصلاح حاسم: أيقونة صفحة الخدمة الواحدة
   ============================================
   نفس مشكلة .service-icon السابقة: الـ SVG كان بدون container size، فبيتمدد
   للحاوية. الإصلاح بنفس الفكرة - container ثابت 100×100 بكسل، SVG داخله 60×60.
*/
.page-hero-icon {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--red);
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,.2);
}
.page-hero-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 60px !important;
    max-height: 60px !important;
}

/* ============================================
   سلايدر البنرات الإعلانية
   ============================================
   لما يكون فيه أكتر من بنر في نفس الموقع، بنعرضهم في slider.
   التصميم: stack الـ slides فوق بعض بـ absolute positioning، الـ active
   هو الظاهر، الباقيين مخفيين بـ opacity:0. التبديل بترانزشن fade.
*/
/* ============================================
   سلايدر البنرات الإعلانية (v3 - LTR isolation)
   ============================================
   مشكلة v2: استخدمنا flex-direction: row-reverse عشان RTL، لكن ده بيخلط
   الـ browser وقت حساب الـ transform، فالـ slide التانية بتطلع خارج viewport.
   
   الحل v3: نعزل السلايدر عن RTL بـ direction: ltr على الـ wrapper الداخلي.
   كده الـ slides بترتيب طبيعي left-to-right، والـ transform بـ translateX سالب
   يحرّك لليسار. الـ outer container لسه RTL فالـ buttons والـ dots بيرحلوا
   صح حسب اتجاه الصفحة.
*/
.banner-slider {
    position: relative;
    max-width: 1400px;
    margin: 8px auto;
    overflow: hidden;
    border-radius: 8px;
    direction: ltr; /* عزل عن RTL - مهم جداً */
    padding: 0 50px;
    box-sizing: border-box;
}
.banner-slider-track {
    display: flex;
    flex-direction: row;
    transition: transform .5s ease-in-out;
    width: 100%;
}
.banner-slider .banner-slide {
    /*
     * Banner slider الـ basic - صورة واحدة 100% في كل مرة.
     * لو فيه أكتر من بنر، الـ JS بيحرّك الـ track بـ -idx * 100%.
     * 
     * الـ side-by-side mode (3 شرايح بأحجام متفاوتة) موجود في hero-slider الجديد
     * في الـ /admin/hero-slider مع 3 templates للاختيار.
     */
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 0;
    opacity: 1;
    transform: none;
}
.banner-slider .banner-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
/* المحتوى الداخلي للـ slides يفضل RTL */
.banner-slider .banner-slide > * {
    direction: rtl;
}
/* على الموبايل: padding أصغر للأزرار */
@media (max-width: 768px) {
    .banner-slider {
        padding: 0 36px;
    }
}

/* أزرار prev/next - دواير بيضاء على الجوانب */
.banner-slider-prev,
.banner-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: 0;
    color: var(--black);
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: background .15s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.banner-slider-prev { right: 12px; }
.banner-slider-next { left: 12px; }
.banner-slider-prev:hover,
.banner-slider-next:hover {
    background: var(--red);
    color: #fff;
}

/* dots إندكاتور تحت الـ slides */
.banner-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}
.banner-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.6);
    cursor: pointer;
    transition: all .2s;
    padding: 0;
}
.banner-slider-dot.active {
    background: var(--red);
    transform: scale(1.2);
}

@media (max-width: 600px) {
    .banner-slider-prev, .banner-slider-next {
        width: 32px;
        height: 32px;
        font-size: 1.3rem;
    }
}

/* ============================================
   القائمة الشجرية (Dropdown Menus)
   ============================================
   عناصر القائمة اللي عندها children بتظهر بسهم صغير ▾، ولما المستخدم
   يحوّم عليها أو يضغط، القائمة الفرعية بتظهر تحتها بـ animation سلس.
   
   التصميم على الديسكتوب: dropdown ينزل تحت الكلمة.
   على الموبايل: nested list بـ indent بدل ما يكون floating.
*/
.main-nav .nav-list > li.has-dropdown {
    position: relative;
}
.main-nav .nav-list > li.has-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.main-nav .dropdown-arrow {
    font-size: .7em;
    transition: transform .2s;
    opacity: .7;
}
.main-nav .has-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* القائمة الفرعية - مخفية افتراضياً، تظهر بالـ hover */
.main-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    padding: 8px 0;
    list-style: none;
    margin: 8px 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 100;
    border: 1px solid var(--border);
}
.main-nav .has-dropdown:hover .dropdown-menu,
.main-nav .has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* عناصر القائمة الفرعية */
.main-nav .dropdown-menu li {
    margin: 0;
}
.main-nav .dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--gray-700);
    text-decoration: none;
    border-bottom: none !important;
    font-size: .95rem;
    transition: background .15s, color .15s;
}
.main-nav .dropdown-menu a:hover {
    background: #faf9f6;
    color: var(--red);
}

/* الموبايل: nested list بـ indent + ألوان صحيحة للخلفية البيضاء */
@media (max-width: 980px) {
    .main-nav .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: #faf9f6; /* خلفية فاتحة للتمييز عن العناصر الرئيسية */
        padding: 4px 0;
        margin: 4px 0 8px;
        min-width: 0;
        border-radius: 8px;
        /* 
         * Toggle behavior في الموبايل: الـ submenu مخفي افتراضياً،
         * يظهر لما الـ parent يكون عنده class "expanded".
         * الـ user يقدر يضغط على السهم ▾ عشان يفتح/يقفل.
         */
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        transition: max-height .25s ease-out, padding .25s, margin .25s;
    }
    .main-nav .has-dropdown.expanded .dropdown-menu {
        max-height: 500px; /* قيمة كبيرة كافية لأي عدد عناصر */
        padding: 4px 0;
        margin: 4px 0 8px;
    }
    .main-nav .dropdown-menu a {
        padding: 10px 32px;  /* indent أكبر للتمييز */
        color: var(--gray-700) !important;  /* اللون الأهم - مش أبيض! */
        font-size: .92rem;
        background: transparent;
    }
    .main-nav .dropdown-menu a:hover,
    .main-nav .dropdown-menu a:active {
        background: rgba(200, 16, 46, .08);
        color: var(--red) !important;
    }
    .main-nav .has-dropdown .dropdown-arrow {
        margin-right: 6px;
        display: inline-block;
        transition: transform .2s;
        font-size: .85em;
    }
    .main-nav .has-dropdown.expanded .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* ============================================
   نموذج "أضف شركتك بدون تسجيل"
   ============================================ */
.submit-intro {
    background: #fff3cd;
    border-right: 4px solid #f59e0b;
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #78350f;
}

.submit-listing-form .form-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}
.submit-listing-form .form-section h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--black);
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 10px;
}
.submit-listing-form .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .submit-listing-form .form-grid-2 { grid-template-columns: 1fr; }
}
.submit-listing-form .form-field {
    margin-bottom: 14px;
}
.submit-listing-form .form-field label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--black);
}
.submit-listing-form input,
.submit-listing-form select,
.submit-listing-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .2s;
}
.submit-listing-form input:focus,
.submit-listing-form select:focus,
.submit-listing-form textarea:focus {
    border-color: var(--red);
    outline: none;
}

.form-errors {
    background: #fee2e2;
    color: #991b1b;
    padding: 14px 18px;
    border-radius: 8px;
    border-right: 4px solid #ef4444;
    margin-bottom: 18px;
}
.form-errors ul {
    margin: 6px 0 0;
    padding-right: 20px;
}

.submit-success {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border: 2px solid #10b981;
    border-radius: 16px;
}
.submit-success .success-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}
.submit-success h2 {
    color: #065f46;
    margin: 0 0 12px;
}

/* زرار "أضف شركتك" في صفحات الدليل */
.add-listing-cta {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 2px dashed #f59e0b;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.add-listing-cta .cta-text strong { color: #78350f; }
.add-listing-cta .cta-text p { margin: 4px 0 0; color: #78350f; font-size: .92rem; }
.add-listing-cta a {
    background: #f59e0b;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: background .15s;
    white-space: nowrap;
}
.add-listing-cta a:hover { background: #d97706; }

/* ============================================
   لوجوهات المحافظات
   ============================================
   استراتيجية الصور: اللوجوهات بتيجي بأشكال وأبعاد متنوعة (دواير، مستطيلات،
   PNG شفاف، JPG بخلفية). عشان نوحّد المنظر:
   - الكونتينر دائرة بحجم ثابت بخلفية بيضاء
   - الصورة object-fit: contain تبقى كاملة من غير قص
   - padding خفيف يبعد الصورة عن حواف الدائرة
*/

/* صفحة /coverage - لوجو دائري صغير فوق اسم المحافظة */
.gov-card.has-logo {
    text-align: center;
    padding-top: 80px;
    position: relative;
}
.gov-card-logo {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .2s, border-color .2s;
}
.gov-card.has-logo:hover .gov-card-logo {
    transform: translateX(-50%) scale(1.08);
    border-color: var(--red);
}
.gov-card-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* لو الكارت فيه لوجو، نضبط موقع باقي العناصر */
.gov-card.has-logo h3 {
    margin-top: 0;
}

/* صفحة المحافظة - بطاقة معلومات بـ floated sidebar */
.gov-info-wrapper {
    margin: 20px 0 0;
}
.gov-info-card {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    /* float-right عشان المحتوى تحته يلف حواليها على الديسكتوب */
    float: left;
    width: 280px;
    margin: 0 0 20px 28px;
    box-sizing: border-box;
}
.gov-info-logo {
    /* مربع كبير - object-fit: contain عشان الصورة كاملة من غير قص */
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f9fafb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 14px;
    box-sizing: border-box;
    margin-bottom: 16px;
    border: 1px solid var(--border, #e5e7eb);
}
.gov-info-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.gov-info-body h3 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    color: var(--black);
}
.gov-info-en {
    color: var(--gray-500);
    font-size: .92rem;
    margin: 0 0 16px;
    font-style: italic;
}
.gov-info-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    background: #faf9f6;
    border-radius: 8px;
    padding: 12px 16px;
}
.gov-info-stats li {
    padding: 4px 0;
    color: var(--gray-700);
}
.gov-info-stats strong {
    color: var(--red);
}
.gov-info-call {
    display: block;
    background: var(--red, #C8102E);
    color: #fff !important;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 700;
    transition: background .15s, transform .15s;
}
.gov-info-call:hover {
    background: #a00d24;
    transform: translateY(-1px);
}

/* موبايل: تكون full width فوق المحتوى */
@media (max-width: 900px) {
    .gov-info-card {
        float: none;
        width: 100%;
        margin: 0 0 20px;
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }
    .gov-info-logo {
        flex: 0 0 120px;
        width: 120px;
        margin-bottom: 0;
    }
    .gov-info-body {
        flex: 1;
        min-width: 0;
    }
}
@media (max-width: 500px) {
    .gov-info-card {
        flex-direction: column;
    }
    .gov-info-logo {
        flex: 0 0 auto;
        width: 50%;
        max-width: 160px;
        margin: 0 auto;
    }
}

/* clearfix للـ section اللي بتحتوي المحتوى المخصص عشان الـ float يقفل صح */
.governorate-custom-content::after {
    content: "";
    display: table;
    clear: both;
}

/* صورة ديفولت للمقالات (لوجو الموقع) - بنخليها بـ padding وخلفية فاتحة
   عشان تظهر بشكل متجانس مع الكروت اللي عندها صور فعلية */
.blog-img-fallback {
    object-fit: contain !important;
    padding: 30px !important;
    background: linear-gradient(135deg, #faf9f6 0%, #fff5f5 100%);
    opacity: .75;
}

/* ============================================
   Widgets System
   ============================================
   كل ودجت بيظهر كـ card في الـ sidebar مع تصميم موحّد.
   الـ layout: محتوى رئيسي + sidebar بـ grid responsive.
*/
.blog-layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    align-items: start;
}
.blog-sidebar {
    position: sticky;
    top: 20px;
}
.widget {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.widget-title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--red, #C8102E);
    color: var(--black);
    font-size: 1.05rem;
}
.widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.widget-list li:last-child { border-bottom: 0; }
.widget-list a {
    color: var(--gray-700);
    text-decoration: none;
    transition: color .15s;
}
.widget-list a:hover { color: var(--red); }
.widget-list small {
    display: block;
    color: var(--gray-500);
    font-size: .85rem;
    margin-top: 2px;
}
.widget-cta {
    text-align: center;
}
.widget-cta p {
    margin: 0 0 14px;
    font-weight: 700;
    color: var(--black);
}
.widget-cta .btn { display: block; }
.widget-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.widget-social a {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 6px;
    text-decoration: none;
    color: var(--gray-700);
    font-size: .9rem;
    transition: all .15s;
}
.widget-social a:hover {
    background: var(--red);
    color: #fff;
}

@media (max-width: 900px) {
    .blog-layout-with-sidebar { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
}

/* ============================================
   Videos Section
   ============================================ */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.video-card {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--black);
    transition: transform .2s, box-shadow .2s;
    display: block;
}
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.video-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
    overflow: hidden;
}
.video-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.6);
    font-size: 3rem;
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
}
.video-play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(200, 16, 46, .9);
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all .2s;
    pointer-events: none;
}
.video-card:hover .video-play-icon {
    background: var(--red, #C8102E);
    transform: translate(-50%, -50%) scale(1.1);
}
.video-featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f59e0b;
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.video-card-body {
    padding: 16px;
}
.video-card-body h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    line-height: 1.4;
}
.video-cat {
    display: inline-block;
    background: #fef3c7;
    color: #78350f;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .75rem;
    margin-bottom: 8px;
}
.video-card-body p {
    color: var(--gray-700);
    margin: 0 0 10px;
    font-size: .92rem;
    line-height: 1.5;
}
.video-meta {
    font-size: .82rem;
    color: var(--gray-500);
}

/* صفحة الفيديو الواحد */
.video-player-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.video-player-wrapper iframe,
.video-player-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-description {
    margin-top: 28px;
    padding: 20px;
    background: #faf9f6;
    border-radius: 10px;
}
.video-description h3 { margin-top: 0; }
.video-meta-row {
    margin-top: 20px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--gray-700);
}

/* article_inline widgets - بتظهر داخل المقال نفسه */
.article-inline-widgets {
    margin: 32px 0;
    padding: 20px;
    background: #faf9f6;
    border-radius: 12px;
    border-right: 4px solid var(--red, #C8102E);
}
.article-inline-widgets .widget {
    box-shadow: none;
    margin-bottom: 16px;
}
.article-inline-widgets .widget:last-child {
    margin-bottom: 0;
}

/* خريطة المحافظة من ويكيبيديا */
.gov-info-map {
    margin: 14px 0;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border, #e5e7eb);
}
.gov-info-map img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    max-height: 200px;
    object-fit: contain;
}
.gov-info-map small {
    display: block;
    margin-top: 6px;
    color: var(--gray-500);
    font-size: .75rem;
}

/* Service hero image - بديل عن الأيقونة لو الأدمن رفع صورة */
.page-hero-image {
    max-height: 200px;
    margin: 0 auto 16px;
    text-align: center;
}
.page-hero-image img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

/* ودجات داخل المقال - أعرض من ودجات الـ sidebar */
.article-inline-widgets {
    margin: 30px 0;
    padding: 20px;
    background: #faf9f6;
    border-radius: 12px;
    border: 1px solid var(--border, #e5e7eb);
}
.article-inline-widgets .widget {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    margin-bottom: 24px;
}
.article-inline-widgets .widget:last-child { margin-bottom: 0; }

/* features-grid: 3 كروت في الصف على الديسكتوب
   - 2 على التابلت
   - 1 على الموبايل */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 24px;
}
@media (max-width: 980px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .features-grid { grid-template-columns: 1fr; }
}

/* عنوان مخصص جنب اللوجو لما الأدمن يكتبه في الإعدادات */
.logo-link.has-header-text {
    display: flex;
    align-items: center;
    gap: 14px;
}
.logo-text-custom {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.logo-text-custom .logo-name {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--black);
}
.logo-text-custom .logo-tag {
    font-size: .8rem;
    color: var(--gray-500);
    margin-top: 2px;
}
@media (max-width: 640px) {
    .logo-text-custom .logo-name { font-size: .95rem; }
    .logo-text-custom .logo-tag { font-size: .72rem; }
}

/* ============================================
   Keyword Tags Section (SEO chips)
   ============================================ */
.keyword-tags-section {
    padding: 36px 0;
    background: #faf9f6;
    border-top: 1px solid var(--border, #e5e7eb);
}
.keyword-tags-box {
    margin-bottom: 24px;
}
.keyword-tags-box:last-child { margin-bottom: 0; }
.keyword-tags-title {
    font-size: 1.1rem;
    margin: 0 0 14px;
    color: var(--gray-700);
    font-weight: 700;
}
.keyword-tags-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.keyword-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    font-size: .9rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: all .15s;
    line-height: 1.4;
}
.keyword-chip:not(.keyword-chip-static):hover {
    background: var(--red, #C8102E);
    color: #fff;
    border-color: var(--red, #C8102E);
    transform: translateY(-1px);
}
.keyword-chip-static {
    background: #f3f4f6;
    color: var(--gray-500);
    cursor: default;
}

/* CSS لشاشة إدارة الكلمات */
.keyword-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background: #fafafa;
    border-radius: 6px;
}
.keyword-row input[type="text"] {
    margin: 0;
    padding: 8px 12px;
}
.kw-nofollow {
    font-size: .85rem;
    color: var(--gray-500);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
@media (max-width: 700px) {
    .keyword-row { grid-template-columns: 1fr; }
}

/* لوجو الفوتر المخصص لو الأدمن رفعه */
.footer-logo-img {
    max-height: 56px;
    width: auto;
    max-width: 100%;
}

/* قسم "كيف نصل إليك" - الخطوات الـ 4 */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.process-step {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 30px 20px 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    border: 1px solid var(--border, #e5e7eb);
    transition: transform .25s, box-shadow .25s;
}
.process-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.process-step-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 12px;
}
.process-step-num {
    position: absolute;
    top: -14px;
    right: 50%;
    transform: translateX(50%);
    background: var(--red, #C8102E);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(200, 16, 46, .3);
}
.process-step h3 {
    margin: 8px 0 10px;
    font-size: 1.1rem;
}
.process-step p {
    color: var(--text-soft, #6b7280);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 980px) {
    .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .process-steps { grid-template-columns: 1fr; }
}

/* ============================================
   Hero Slider — السلايدر تحت القائمة الرئيسية
   ============================================ */
.hero-slider {
    position: relative;
    max-width: 1400px;
    margin: 8px auto 16px;
    overflow: hidden;
    border-radius: 10px;
    direction: ltr; /* عزل عن RTL */
    padding: 0 50px;
    box-sizing: border-box;
}
.hero-slider-track {
    display: flex;
    flex-direction: row;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    align-items: center;
}
.hero-slider .hero-slide {
    margin: 0 !important;
    box-sizing: border-box;
    padding: 0 6px;
}
.hero-slider .hero-slide a,
.hero-slider .hero-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ============ Template: side-by-side ============
   الوسط 50%، الجوانب 25%، الـ active بـ scale 1، الجوانب بـ scale .88 وopacity .3 */
.hero-slider-side-by-side .hero-slide {
    flex: 0 0 25%;
    width: 25%;
    max-width: 25%;
    min-width: 25%;
    opacity: .3;
    transform: scale(.88);
    transition: opacity .4s, transform .4s, flex-basis .4s, width .4s, min-width .4s, max-width .4s;
}
.hero-slider-side-by-side .hero-slide.active {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 50%;
    opacity: 1;
    transform: scale(1);
}

/* ============ Template: fade ============
   شريحة واحدة بـ 100% تتبدل بـ opacity. كلهم متراكبين فوق بعض. */
.hero-slider-fade {
    padding: 0 50px;
}
.hero-slider-fade .hero-slider-track {
    position: relative;
    min-height: 300px;
    transform: none !important;  /* ما يحركش الـ track في fade */
}
.hero-slider-fade .hero-slide {
    flex: 0 0 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    padding: 0;
}
.hero-slider-fade .hero-slide.active {
    opacity: 1;
    position: relative;  /* الـ active بياخد ارتفاع الـ track */
}

/* ============ Template: carousel ============
   3 صور متجاورة بحجم متساوي، تتحرك بـ translateX */
.hero-slider-carousel .hero-slide {
    flex: 0 0 33.333%;
    width: 33.333%;
    max-width: 33.333%;
    min-width: 33.333%;
    opacity: 1;
}

/* ============ أزرار التحكم ============ */
.hero-slider-prev,
.hero-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    z-index: 5;
    transition: background .2s;
}
.hero-slider-prev:hover,
.hero-slider-next:hover { background: rgba(0, 0, 0, .8); }
.hero-slider-prev { left: 8px; }
.hero-slider-next { right: 8px; }

.hero-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}
.hero-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: all .2s;
    padding: 0;
}
.hero-slider-dot.active {
    background: var(--red, #C8102E);
    transform: scale(1.3);
}

/* موبايل - كل التيمبليتس بتتحول لـ fade mode عشان تشتغل بدون JS dependency.
 * السبب: الـ side-by-side / carousel بيعتمدوا على transform: translateX اللي
 * بيتطبق بعد ما الـ JS يشغّل. قبل كده، الـ slides بتطلع بشكل غلط على الـ first paint.
 * بـ fade mode على الموبايل، كل slide مطلق (position:absolute) ومـ opacity 1 للـ active فقط
 * - ده شغّال 100% بدون أي JS، فلا فيه initial flicker. */
/* الـ mobile rules للـ hero-slider مجمّعة كلها في @media block واحد
 * كبير في نهاية ملف CSS - شوف القسم المعنون "🎬 Hero Slider Mobile - Full Rebuild" */

/* ============================================================
   🎬 Hero Slider Templates Expansion (Round 19)
   5 templates إضافية على الـ 3 الموجودة:
     - ken-burns: zoom سينمائي
     - full-width: عرض الشاشة كامل
     - split: صورة + نص + CTA
     - before-after: مقارنة بـ handle slider
     - 3d-carousel: ثلاثي الأبعاد
   ============================================================ */

/* ============ Template: Ken Burns ============
 * كل سلايد متراكب فوق الباقي (position: absolute) زي الـ fade،
 * بس الـ active بياخد animation فوقها زوّم + pan بطيء.
 * النتيجة: صورة ثابتة بتبدو "حية" زي في الأفلام الوثائقية.
 */
.hero-slider-ken-burns {
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
}
.hero-slider-ken-burns .hero-slider-track {
    position: relative;
    min-height: 400px;
    transform: none !important;  /* مفيش translate في Ken Burns */
}
.hero-slider-ken-burns .hero-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    padding: 0;
    overflow: hidden;  /* مهم - الصورة هتكبر فوق حدودها */
}
.hero-slider-ken-burns .hero-slide.active {
    opacity: 1;
    position: relative;  /* الـ active بياخد ارتفاع الـ track */
}
.hero-slider-ken-burns .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
}
.hero-slider-ken-burns .hero-slide.active img {
    animation: kenBurnsEffect 12s ease-in-out infinite alternate;
}
@keyframes kenBurnsEffect {
    0%   { transform: scale(1.0) translate(0%, 0%); }
    100% { transform: scale(1.15) translate(-3%, -2%); }
}

/* ============ Template: Full-Width ============
 * الـ slider بيكسر حدود الـ container ويصبح بعرض الـ viewport كامل.
 * calc(50% - 50vw) trick بيشيله من الـ container padding.
 */
.hero-slider-full-width {
    max-width: none !important;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    padding: 0;
}
.hero-slider-full-width .hero-slide {
    padding: 0;
}
.hero-slider-full-width .hero-slide img {
    width: 100vw;
    height: auto;
    max-height: 75vh;
    object-fit: cover;
    border-radius: 0;
}
.hero-slider-full-width .hero-slider-prev { left: 16px; }
.hero-slider-full-width .hero-slider-next { right: 16px; }

/* ============ Template: Split (image + caption) ============
 * كل slide مقسوم 50/50: صورة جنب نص + زرار CTA.
 * استخدام grid عشان السهولة + responsive.
 */
.hero-slider-split {
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
    background: var(--gray-900, #1f2937);
}
.hero-slider-split .hero-slider-track {
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.hero-slider-split .split-slide {
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    min-height: 360px;
    direction: rtl;  /* النص على اليمين، الصورة على الشمال */
}
.hero-slider-split .split-image {
    overflow: hidden;
}
.hero-slider-split .split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.hero-slider-split .split-caption {
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--red, #C8102E) 0%, #8b0e22 100%);
}
.hero-slider-split .split-title {
    font-size: 1.9rem;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.3;
}
.hero-slider-split .split-text {
    font-size: 1.05rem;
    opacity: .95;
    margin: 0 0 20px;
    line-height: 1.7;
}
.hero-slider-split .split-btn {
    align-self: flex-start;
    background: #fff !important;
    color: var(--red, #C8102E) !important;
    padding: 12px 28px;
    font-weight: 700;
    border: 0;
    text-decoration: none;
    border-radius: 8px;
    transition: transform .2s;
}
.hero-slider-split .split-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* ============ Template: Before/After ============
 * صورتين متراكبتين، الـ "بعد" بـ width متغيّر حسب الـ handle.
 * الـ user يقدر يسحب الـ handle ليرى المقارنة.
 */
.hero-slider-before-after {
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
}
.hero-slider-before-after .hero-slider-track {
    position: relative;
    transform: none !important;  /* مفيش track translation هنا */
    min-height: 400px;
}
.hero-slider-before-after .ba-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .5s;
    padding: 0;
}
.hero-slider-before-after .ba-slide.active {
    opacity: 1;
    position: relative;  /* الـ active بياخد ارتفاع */
}
.ba-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    overflow: hidden;
    user-select: none;
    cursor: ew-resize;
}
.ba-before, .ba-after {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ba-after-wrapper {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    overflow: hidden;
    /* width يتم تعديله من JS - الافتراضي 50% */
}
.ba-handle {
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 12px rgba(0,0,0,.5);
    transform: translateX(-50%);
    z-index: 10;
    cursor: ew-resize;
}
.ba-handle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #fff;
    color: var(--red, #C8102E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.ba-label {
    position: absolute;
    top: 16px;
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 600;
    z-index: 5;
}
.ba-label-before { right: 16px; }
.ba-label-after { left: 16px; }

/* ============ Template: 3D Carousel ============
 * الصور مرتّبة في فضاء ثلاثي الأبعاد، تدور حول محور Y.
 * بنستخدم perspective + transform-style: preserve-3d.
 */
.hero-slider-3d-carousel {
    perspective: 1200px;
    overflow: visible;
    padding: 40px 0;
}
.hero-slider-3d-carousel .hero-slider-track {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
    height: 380px;
    transform: none !important;  /* JS بيتحكم بالـ transform مباشرة */
}
.hero-slider-3d-carousel .hero-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 60%;
    max-width: 700px;
    transform: translateX(-50%);
    transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .8s;
    backface-visibility: hidden;
    padding: 0;
}
.hero-slide.position-active {
    transform: translateX(-50%) translateZ(0);
    opacity: 1;
    z-index: 3;
}
.hero-slide.position-left {
    transform: translateX(-110%) translateZ(-200px) rotateY(35deg);
    opacity: .55;
    z-index: 2;
}
.hero-slide.position-right {
    transform: translateX(10%) translateZ(-200px) rotateY(-35deg);
    opacity: .55;
    z-index: 2;
}
.hero-slide.position-hidden {
    transform: translateX(-50%) translateZ(-500px);
    opacity: 0;
    z-index: 1;
}
.hero-slider-3d-carousel .hero-slide img {
    width: 100%;
    height: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    border-radius: 12px;
}

/* ============ Mobile fallback للـ templates الجديدة ============
 * كلهم بيتحولوا لـ fade mode بسيط على الشاشات الصغيرة.
 * ده ضروري عشان:
 *   - Split: 50/50 ما يبقاش عملي على موبايل ضيق
 *   - 3D carousel: الـ perspective بيبقى مزدحم
 *   - Before/After: الـ drag تجربة سيئة على touch صغير
 *   - Ken Burns: بيشتغل عادي حتى على موبايل
 */
/* ملاحظة: الـ mobile rules للـ templates كلها (split, before-after, 3d, إلخ)
 * موجودة في @media block واحد كبير في نهاية الملف - شوف "🎬 Hero Slider Mobile - Full Rebuild" */

/* ============================================================
   .services-grid + .service-card الـ basic (للـ governorate page)
   ============================================================
   كان فيه bug إن الـ governorate.php بيستخدم .services-grid وما لقاش
   CSS مخصص ليها، فالأيقونات بتطلع غير متناسقة (الأول مرتفع، الباقي
   مختلف). الحل: نضمن grid layout متّسق مع icon container ثابت لكل بطاقة.
   ============================================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 24px 0;
}
.service-card {
    /* بطاقة الخدمة - flex column عمودي مع alignment متّسق */
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    padding: 26px 20px;
    text-decoration: none;
    color: inherit;
    display: flex !important;
    flex-direction: column;
    align-items: center;  /* كل العناصر في النص أفقياً */
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
    min-height: 220px;    /* ارتفاع موحّد لكل البطاقات */
}
.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: var(--red, #C8102E);
}
/*
 * Icon container: ارتفاع وعرض ثابت لكل البطاقات.
 * ده الـ fix الأهم - بدونه، الـ icon الأول يبقى مرتفع لو شكله بـ SVG path
 * مختلف عن الباقي (مثلاً SVG بـ aspect ratio غريب).
 *
 * الـ flex centering يضمن إن مهما كان الـ icon (emoji أو SVG أو img)،
 * يبقى متمركز في الـ container.
 */
.service-card .service-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px;
    min-height: 72px;
    margin: 0 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(206,17,38,.1), rgba(206,17,38,.04));
    border-radius: 50%;
    color: var(--red, #C8102E);
    flex-shrink: 0;  /* ما يصغّرش في الـ flex */
    font-size: 1.8rem;  /* للـ emoji icons */
    line-height: 1;
}
.service-card .service-icon svg {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
}
.service-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--black);
    line-height: 1.35;
}
.service-card p {
    margin: 0;
    font-size: .9rem;
    color: var(--text-soft, #666);
    line-height: 1.55;
    flex-grow: 1;  /* يأخذ المساحة المتبقية لمحاذاة البطاقات */
}
@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .service-card {
        padding: 18px 12px;
        min-height: 180px;
    }
    .service-card .service-icon {
        width: 56px !important;
        height: 56px !important;
    }
    .service-card .service-icon svg {
        width: 28px !important;
        height: 28px !important;
    }
    .service-card h3 { font-size: .95rem; }
    .service-card p  { font-size: .82rem; }
}

/* ============================================================
   🎬 Hero Slider Mobile - Full Rebuild
   ============================================================
   فلسفة الموبايل: كل الـ 8 templates تتحوّل إلى "fade-mode موحّد"
   على الشاشات الصغيرة (≤ 768px). السبب:
   - الـ side-by-side / carousel / 3d بيعتمدوا على transforms أفقية
     محتاجة عرض شاشة كبير. على الموبايل الشاشة ضيقة، فالـ transforms
     بتخرج العناصر برّا الشاشة (overflow) أو تخفّيها.
   - الـ split (50/50) ما بيشتغلش - الـ caption والصورة بيتلزقوا.
   - الـ before-after drag صعب على شاشة صغيرة بإيد واحدة.
   - الـ full-width الـ negative margins ممكن تسبّب horizontal scroll.

   الحل: على الموبايل، كل slide تتركّب فوق التانية (position: absolute)
   ومـ opacity 1 للـ active فقط. ده consistent عبر كل الـ templates.
   فقط بعض الـ templates تحتفظ بميزتها (Ken Burns animation، Split stacked).
   ============================================================ */
@media (max-width: 768px) {

    /* ============== Base: container + track ============== */
    .hero-slider {
        padding: 0 14px !important;
        margin: 8px auto !important;
        min-height: 200px;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .hero-slider-track {
        position: relative !important;
        transform: none !important;  /* نوقف كل الـ JS-applied transforms */
        min-height: 200px;
        display: block !important;   /* مش flex على الموبايل */
        perspective: none !important; /* لو 3D، نلغي الـ 3D space */
        transform-style: flat !important;
    }

    /* ============== كل slide تشتغل كـ fade ============== */
    .hero-slider .hero-slide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        opacity: 0;
        transform: none !important;
        transition: opacity .5s ease-in-out !important;
        padding: 0 !important;
        z-index: 1;
    }
    .hero-slider .hero-slide.active {
        opacity: 1 !important;
        position: relative !important;  /* الـ active بيدّي ارتفاع للـ track */
        z-index: 2;
    }

    /* ============== الصور الأساسية ============== */
    .hero-slider .hero-slide img {
        width: 100% !important;
        height: auto;
        max-height: 260px !important;
        object-fit: cover !important;
        margin: 0 !important;
        border-radius: 8px !important;
        display: block;
    }

    /* ============== Template: Full-Width ============== */
    /* نلغي الـ negative margins اللي بتسبّب horizontal scroll */
    .hero-slider-full-width {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        border-radius: 8px;
    }
    .hero-slider-full-width .hero-slide img {
        width: 100% !important;
        max-height: 50vh !important;
    }

    /* ============== Template: Ken Burns ============== */
    .hero-slider-ken-burns .hero-slider-track {
        min-height: 240px !important;
    }
    .hero-slider-ken-burns .hero-slide img {
        height: 240px !important;
        max-height: 240px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
    /* الـ Ken Burns animation بيشتغل عادي - بنخفّضه قليلاً عشان أداء أفضل */
    .hero-slider-ken-burns .hero-slide.active img {
        animation-duration: 10s;
    }

    /* ============== Template: Split (stacked على الموبايل) ============== */
    /*
     * بدل الـ 50/50 grid، نخلّيها column واحد: الصورة فوق + الـ caption تحت.
     * ده الـ pattern المعروف لـ mobile cards.
     */
    .hero-slider-split .split-slide {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        position: absolute !important;
        top: 0; left: 0; right: 0;
        opacity: 0;
        transition: opacity .5s;
    }
    .hero-slider-split .split-slide.active {
        opacity: 1;
        position: relative !important;
    }
    .hero-slider-split .split-image {
        order: 1;
    }
    .hero-slider-split .split-image img {
        width: 100% !important;
        max-height: 180px !important;
        object-fit: cover !important;
        border-radius: 8px 8px 0 0 !important;
    }
    .hero-slider-split .split-caption {
        order: 2;
        padding: 16px 14px !important;
        text-align: center;
        border-radius: 0 0 8px 8px;
    }
    .hero-slider-split .split-title {
        font-size: 1.1rem !important;
        margin: 0 0 6px !important;
    }
    .hero-slider-split .split-text {
        font-size: .88rem !important;
        margin: 0 0 12px !important;
        line-height: 1.5 !important;
    }
    .hero-slider-split .split-btn {
        align-self: center;
        padding: 8px 16px !important;
        font-size: .9rem;
    }

    /* ============== Template: Before/After ============== */
    /*
     * نسيب الـ drag interaction (شغّال على touch)، بس نكبّر الـ handle
     * عشان يبقى سهل اللمس بالإصبع. + نقلل الـ min-height.
     */
    .hero-slider-before-after .hero-slider-track {
        min-height: 240px !important;
    }
    .hero-slider-before-after .ba-container {
        min-height: 240px !important;
    }
    .ba-handle {
        width: 5px !important;
    }
    .ba-handle-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.3rem !important;
    }
    .ba-label {
        font-size: .75rem !important;
        padding: 4px 10px !important;
        top: 10px !important;
    }
    .ba-label-before { right: 10px !important; }
    .ba-label-after { left: 10px !important; }

    /* ============== Template: 3D Carousel (fade fallback) ============== */
    /*
     * الـ 3D transforms مش مناسبة للموبايل - بنحوّلها لـ fade بسيط.
     * كل الـ position-* classes تتلغي ونرجع للـ fade behavior الأساسي.
     */
    .hero-slider-3d-carousel {
        padding: 0 14px !important;
        perspective: none !important;
    }
    .hero-slider-3d-carousel .hero-slider-track {
        height: auto !important;
        min-height: 240px;
        transform-style: flat !important;
        transform: none !important;
    }
    .hero-slider-3d-carousel .hero-slide {
        position: absolute !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
        opacity: 0;
        backface-visibility: visible;
    }
    /* أي class من classes الموقع 3D ما يتأثرش */
    .hero-slider-3d-carousel .hero-slide.position-active,
    .hero-slider-3d-carousel .hero-slide.active {
        opacity: 1 !important;
        transform: none !important;
        position: relative !important;
        z-index: 2;
    }
    .hero-slider-3d-carousel .hero-slide.position-left,
    .hero-slider-3d-carousel .hero-slide.position-right,
    .hero-slider-3d-carousel .hero-slide.position-hidden {
        opacity: 0 !important;
        transform: none !important;
        z-index: 1;
    }
    .hero-slider-3d-carousel .hero-slide img {
        max-height: 240px !important;
        object-fit: cover !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
    }

    /* ============== Controls (Prev / Next / Dots) ============== */
    .hero-slider-prev,
    .hero-slider-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
        background: rgba(0, 0, 0, .65) !important;
    }
    .hero-slider-prev { left: 4px !important; }
    .hero-slider-next { right: 4px !important; }
    .hero-slider-dots {
        bottom: 8px !important;
        gap: 5px !important;
    }
    .hero-slider-dot {
        width: 7px !important;
        height: 7px !important;
    }
}

/* ============== موبايل صغير جداً (≤ 380px) ============== */
@media (max-width: 380px) {
    .hero-slider {
        padding: 0 8px !important;
    }
    .hero-slider .hero-slide img {
        max-height: 200px !important;
    }
    .hero-slider-split .split-image img {
        max-height: 140px !important;
    }
    .hero-slider-split .split-title {
        font-size: 1rem !important;
    }
}

/* ============================================================
   🌳 Nested Dropdown Menus (Sub-submenus - unlimited depth)
   ============================================================
   لو فيه dropdown داخل dropdown، الـ submenu الثاني والثالث وهكذا
   بيظهر على اليسار (في RTL) بدل ما يظهر تحت الـ parent.
   ============================================================ */

/* المستوى الثاني وما فوقه: submenu يطلع على الجنب */
.main-nav .dropdown-menu .has-dropdown {
    position: relative;
}
.main-nav .dropdown-menu .dropdown-menu {
    /*
     * في RTL، الـ submenu الفرعي يطلع على اليسار (left: 100%)
     * مش تحت الـ parent (top: 100%).
     */
    top: 0;
    right: auto;
    left: 100%;
    margin-top: -8px;  /* compensate لـ padding الـ parent */
    transform: translateX(-10px);
}
.main-nav .dropdown-menu .has-dropdown:hover > .dropdown-menu,
.main-nav .dropdown-menu .has-dropdown:focus-within > .dropdown-menu {
    transform: translateX(0);
}

/* السهم في الـ submenu (◂) - يشاور لليسار بدل ما يشاور لتحت */
.main-nav .dropdown-menu .dropdown-arrow {
    font-size: .7rem;
    margin-right: 4px;
}

/* الـ sub-submenu items: indent بسيط على الموبايل */
@media (max-width: 768px) {
    /* على الموبايل: nested menus تتفرد عمودياً (مش horizontal)، مع indent */
    .main-nav .dropdown-menu .dropdown-menu {
        position: static;
        transform: none;
        margin: 4px 0 4px 16px;
        padding-right: 12px;
        border-right: 2px dashed rgba(0,0,0,.1);
        box-shadow: none;
        background: rgba(0,0,0,.02);
        border-radius: 0;
        opacity: 1;
        visibility: visible;
    }
    .main-nav .dropdown-menu .dropdown-menu a {
        font-size: .88rem;
        padding: 6px 12px;
    }
}

/* Footer submenu - indent بسيط لأي nesting داخل الفوتر */
.footer-col ul .footer-submenu {
    margin: 4px 0 8px 0;
    padding-right: 14px;
    border-right: 2px solid rgba(255,255,255,.1);
}
.footer-col ul .footer-submenu li a {
    font-size: .85rem;
    opacity: .85;
}

/* ============================================================
   📱 Mobile-Only Hero Slider Templates (6 خيارات)
   ============================================================
   كل template يفعّل CSS rules محددة على شاشات ≤ 768px فقط.
   على Desktop، الـ mobile classes ما تتطبقش (الـ desktop template يشتغل عادي).
   ============================================================ */

@media (max-width: 768px) {

    /* ============== 1. Simple Fade (الأبسط والأخف) ============== */
    /*
     * كل السلايدات position absolute + opacity فقط. مفيش transforms.
     * هدف: الحد الأدنى من الـ rendering overhead.
     */
    .hero-slider.mobile-tpl-simple-fade .hero-slider-track {
        position: relative !important;
        min-height: 220px !important;
        transform: none !important;
    }
    .hero-slider.mobile-tpl-simple-fade .hero-slide {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        transform: none !important;
        transition: opacity .35s ease !important;
        animation: none !important;  /* نلغي Ken Burns لو فيه */
    }
    .hero-slider.mobile-tpl-simple-fade .hero-slide.active {
        opacity: 1 !important;
        position: relative !important;
    }
    .hero-slider.mobile-tpl-simple-fade .hero-slide img {
        width: 100% !important;
        height: 220px !important;
        max-height: 220px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        animation: none !important;
    }

    /* ============== 2. Mobile Cards (Instagram-like) ============== */
    /*
     * كل سلايد بتبقى كارت مستقل: صورة فوق + caption تحت (لو موجود).
     * الـ shadow + border-radius + padding يخلوها تحس feel-cardish.
     */
    .hero-slider.mobile-tpl-cards {
        padding: 0 16px !important;
    }
    .hero-slider.mobile-tpl-cards .hero-slider-track {
        position: relative !important;
        min-height: 280px !important;
        transform: none !important;
    }
    .hero-slider.mobile-tpl-cards .hero-slide {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        transform: scale(.95) !important;
        transition: opacity .4s, transform .4s !important;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        overflow: hidden;
        padding: 0 !important;
    }
    .hero-slider.mobile-tpl-cards .hero-slide.active {
        opacity: 1 !important;
        transform: scale(1) !important;
        position: relative !important;
    }
    .hero-slider.mobile-tpl-cards .hero-slide img {
        width: 100% !important;
        height: 200px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        border-radius: 14px 14px 0 0 !important;
        display: block;
    }
    /* لو الـ slide فيه split-caption (template split)، نعرضه تحت الصورة */
    .hero-slider.mobile-tpl-cards .split-caption {
        padding: 14px 16px !important;
        text-align: center;
    }
    .hero-slider.mobile-tpl-cards .split-title {
        font-size: 1.05rem !important;
        margin: 0 0 6px !important;
    }
    .hero-slider.mobile-tpl-cards .split-text {
        font-size: .85rem !important;
    }

    /* ============== 3. Full-Width Mobile ============== */
    /*
     * الصورة تملأ عرض الشاشة بالكامل، بدون margins/paddings.
     * مناسب لـ hero banners كبيرة بدون أي container.
     */
    .hero-slider.mobile-tpl-full-width {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        border-radius: 0 !important;
    }
    .hero-slider.mobile-tpl-full-width .hero-slider-track {
        position: relative !important;
        min-height: 260px !important;
        transform: none !important;
    }
    .hero-slider.mobile-tpl-full-width .hero-slide {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        transform: none !important;
        transition: opacity .4s !important;
        padding: 0 !important;
    }
    .hero-slider.mobile-tpl-full-width .hero-slide.active {
        opacity: 1 !important;
        position: relative !important;
    }
    .hero-slider.mobile-tpl-full-width .hero-slide img {
        width: 100% !important;
        height: 260px !important;
        max-height: 260px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    /* ============== 4. Compact (ارتفاع صغير) ============== */
    /*
     * مناسب لـ banner بسيط، مش hero ضخم. الارتفاع ~140-160px فقط.
     */
    .hero-slider.mobile-tpl-compact {
        padding: 0 12px !important;
    }
    .hero-slider.mobile-tpl-compact .hero-slider-track {
        position: relative !important;
        min-height: 150px !important;
        transform: none !important;
    }
    .hero-slider.mobile-tpl-compact .hero-slide {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        transform: none !important;
        transition: opacity .35s !important;
        padding: 0 !important;
    }
    .hero-slider.mobile-tpl-compact .hero-slide.active {
        opacity: 1 !important;
        position: relative !important;
    }
    .hero-slider.mobile-tpl-compact .hero-slide img {
        width: 100% !important;
        height: 150px !important;
        max-height: 150px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
    .hero-slider.mobile-tpl-compact .hero-slider-dots {
        bottom: 4px !important;
    }

    /* ============== 5. Swipe Slider (native mobile feel) ============== */
    /*
     * scroll-snap: الـ slides تتعرض جنب بعض في horizontal scroll.
     * الـ user يسحب بإصبعه (touch)، والـ snap يخليها تقف على slide كاملة.
     * مفيش JS - الكل CSS scroll-snap API.
     */
    .hero-slider.mobile-tpl-swipe {
        padding: 0 !important;
        overflow: hidden !important;
    }
    .hero-slider.mobile-tpl-swipe .hero-slider-track {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;     /* Firefox */
        transform: none !important;
        min-height: auto !important;
        gap: 8px;
        padding: 0 8px;
    }
    .hero-slider.mobile-tpl-swipe .hero-slider-track::-webkit-scrollbar {
        display: none;             /* Chrome/Safari */
    }
    .hero-slider.mobile-tpl-swipe .hero-slide {
        position: relative !important;
        flex: 0 0 calc(100% - 16px) !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        opacity: 1 !important;
        transform: none !important;
        scroll-snap-align: center;
        padding: 0 !important;
    }
    .hero-slider.mobile-tpl-swipe .hero-slide img {
        width: 100% !important;
        height: 220px !important;
        max-height: 220px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }
    /* في swipe mode، الـ prev/next buttons مش محتاجينهم - السحب باليد */
    .hero-slider.mobile-tpl-swipe .hero-slider-prev,
    .hero-slider.mobile-tpl-swipe .hero-slider-next {
        display: none !important;
    }
    /* الـ dots ممكن نسيبهم بس بـ position منخفض */
    .hero-slider.mobile-tpl-swipe .hero-slider-dots {
        bottom: 6px !important;
        background: rgba(0, 0, 0, .4);
        padding: 4px 10px;
        border-radius: 20px;
    }
}

/* على Desktop، أي mobile-tpl-* تتشال من الـ CSS الخاصة بيها (ما بتشتغلش) */

/* ============================================================
   🛠️ Service Page - Features + FAQ sections
   ============================================================ */
.service-features {
    margin-top: 32px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);
    border-radius: 12px;
    border-right: 4px solid #f59e0b;
}
.service-features h3 {
    margin-top: 0;
    color: #92400e;
}
.features-grid {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.features-grid li {
    background: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    color: #78350f;
    border: 1px solid #fde68a;
    line-height: 1.5;
}

/* FAQ section */
.service-faq {
    margin-top: 32px;
}
.service-faq h3 {
    color: var(--red, #C8102E);
    margin-bottom: 16px;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.faq-item[open] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    border-color: var(--red, #C8102E);
}
.faq-item summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--black);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: '+';
    background: rgba(200, 16, 46, .1);
    color: var(--red, #C8102E);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform .2s, background .2s;
}
.faq-item[open] summary::before {
    content: '−';
    background: var(--red, #C8102E);
    color: #fff;
}
.faq-answer {
    padding: 0 18px 18px 56px;
    color: var(--gray-700, #444);
    line-height: 1.8;
}

@media (max-width: 600px) {
    .features-grid { grid-template-columns: 1fr; }
    .faq-answer { padding-left: 18px; padding-right: 56px; }
}

/* =============================================================
 * Sticky Mobile Emergency Bar
 *
 * شريط ثابت أسفل الشاشة في الموبايل بس - بنخفيه على الديسكتوب
 * عشان مش يـ-distract. بيقدّم 2-3 أزرار سريعة (call/WA/order).
 *
 * Z-index عالي عشان مش يـ-cover حاجة. padding-bottom على الـ body
 * فيه space عشان الـ bar مش يـ-overlap على الـ content في الـ scroll.
 * ============================================================= */

.sticky-mobile-bar {
    display: none; /* default: مخفي. نظهره في الـ media query */
}

@media (max-width: 768px) {
    body {
        /*
         * padding-bottom = ارتفاع الـ bar (62px) + safe area (للـ notched phones).
         * env(safe-area-inset-bottom) = iPhone X+ home indicator area.
         */
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    .sticky-mobile-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        background: #fff;
        border-top: 1px solid var(--border, #e5e7eb);
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
        z-index: 9990;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .smb-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 4px;
        text-decoration: none;
        color: var(--gray-700, #333);
        font-weight: 600;
        font-size: .78rem;
        line-height: 1.2;
        gap: 2px;
        transition: background .12s, color .12s;
        position: relative;
    }
    .smb-btn:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0; top: 12px; bottom: 12px;
        width: 1px;
        background: var(--border, #e5e7eb);
    }
    .smb-btn:active { background: rgba(0,0,0,.04); }
    .smb-btn .smb-icon { font-size: 1.4rem; line-height: 1; }
    .smb-btn .smb-text { letter-spacing: -.2px; }

    /* الـ Call: brand red */
    .smb-call { color: var(--red, #C8102E); }
    /* WhatsApp: official green */
    .smb-whatsapp { color: #25d366; }
    /* Order: prominence مع gradient + scale */
    .smb-order {
        background: linear-gradient(135deg, var(--red, #C8102E), #8b0000);
        color: #fff !important;
        margin: 6px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(200, 16, 46, .35);
        animation: pulse-order 2s ease-in-out infinite;
    }
    .smb-order::after { display: none; }
    @keyframes pulse-order {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.03); }
    }
}

/* الـ scroll-back-to-top button يفترض يكون أعلى من الـ sticky bar */
@media (max-width: 768px) {
    .back-to-top { bottom: 78px !important; }
}

/* =============================================================
 * Content overflow guards - مهم جداً للموبايل
 *
 * المحتوى الناتج من Quill / WYSIWYG / المستخدم قد يحتوي على:
 * - صور بـ width ثابت أكبر من viewport
 * - tables عريضة
 * - <pre>/<code> blocks بـ long lines
 * - iframes (YouTube، خرائط، إلخ)
 * - links طويلة مفيش space فيها
 *
 * بدون الـ rules دي، أي واحد من دول كفيل بـ-create horizontal scrollbar
 * في كل الصفحة على الموبايل. هنا بنحمي كل content containers.
 * ============================================================= */

/* Images / videos / iframes - دايماً تـ-fit في الـ container */
.article-body img, .article-body video, .article-body iframe,
.static-page-content img, .static-page-content video, .static-page-content iframe,
.service-description img, .service-description video, .service-description iframe,
.project-detail-grid img, .project-detail-grid video, .project-detail-grid iframe,
.ql-editor img, .ql-editor video, .ql-editor iframe {
    max-width: 100% !important;
    height: auto;
}

/* Tables - بنخلّيها scrollable داخلياً بدون كسر الـ layout */
.article-body, .static-page-content, .service-description {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.article-body table, .static-page-content table, .service-description table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pre / code blocks - scroll أفقي داخلي بدل break الـ layout */
.article-body pre, .static-page-content pre, .service-description pre,
.article-body code, .static-page-content code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* روابط طويلة - نخلّيها تـ-wrap */
.article-body a, .static-page-content a, .service-description a {
    word-break: break-word;
}

/* Form inputs - مهم لـ /order-winch ولأي فورم على الموبايل */
form input, form textarea, form select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Container على الموبايل - safety padding */
@media (max-width: 768px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* لو فيه أي element بـ negative margin (full-bleed)، يـ-stay داخل viewport */
    .section { overflow-x: hidden; }

    /* المقالات والصفحات: يـ-fit بالكامل */
    .article-content, .static-page,
    .article-body, .static-page-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Order form: ضمان الـ form inputs مش تخرج */
    .order-form input,
    .order-form textarea,
    .order-form select,
    form[method="post"] input,
    form[method="post"] textarea,
    form[method="post"] select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* =============================================================
 * Final Horizontal Scroll Guard - الحل النهائي
 *
 * بعد محاولات متعددة، نـ-enforce strict guards على الموبايل عشان
 * نضمن انعدام الـ horizontal scroll حتى لو في element rogue.
 * ============================================================= */

@media (max-width: 768px) {
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative;
    }
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        position: relative;
    }

    /*
     * أي direct child للـ main content مش يتجاوز الـ viewport.
     *
     * مهم: نـ-exclude الـ <header> من الـ overflow:hidden لأنه عنده
     * absolutely-positioned children (mobile nav dropdown) لو نـ-clip parent
     * مش هتظهر. الـ header z-index عالي وما عندوش overflow بطبيعته.
     */
    body > *:not(.site-header):not(header),
    .admin-shell > *,
    main > *,
    .page-hero,
    .section,
    section[class*="section"] {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* الـ header نفسه نسمحله بـ overflow ظاهر عشان الـ dropdown يطلع */
    .site-header, header {
        overflow: visible !important;
        max-width: 100vw;
    }

    /* الـ container الأصلي - safety */
    .container, .wrap, .wrapper {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    /* صور وعناصر media - دايماً تـ-fit */
    img, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto;
    }

    /* Tables - scroll داخلي */
    table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Forms - الـ inputs على الموبايل ما تتجاوزش */
    input, textarea, select, button {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Quill editor على الموبايل في الفرونت لو هيظهر */
    .ql-editor { max-width: 100% !important; overflow-x: hidden; }

    /* Article + page content - الـ ultimate guard */
    .article-content,
    .article-body,
    .static-page,
    .static-page-content,
    article {
        max-width: 100% !important;
        overflow-x: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Order form specifically - الـ user قال إنها فيها مشكلة */
    .order-winch-form,
    .order-winch-form .form-row,
    form input[type="text"],
    form input[type="tel"],
    form input[type="email"],
    form textarea,
    form select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =============================================================
 * Calculator Summary Banner - يظهر في /order-winch
 * لما العميل جاي من /calculator مع بيانات pre-filled
 * ============================================================= */
.calc-summary-banner {
    display: flex;
    gap: 14px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    align-items: flex-start;
}
.csb-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.csb-content { flex: 1; }
.csb-content > strong {
    display: block;
    color: #166534;
    font-size: 1.05rem;
    margin-bottom: 6px;
}
.csb-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 8px;
    font-size: .9rem;
    color: #166534;
}
.csb-details strong { color: #14532d; }
.csb-content small {
    color: #4b5563;
    font-size: .82rem;
    line-height: 1.6;
}
@media (max-width: 600px) {
    .calc-summary-banner { padding: 12px 14px; gap: 10px; }
    .csb-icon { font-size: 1.6rem; }
    .csb-details { font-size: .82rem; gap: 4px 10px; }
}

/* Imported distance banner (lightweight version) */
.imported-distance-banner {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    color: #0c4a6e;
    font-size: .92rem;
}