/**
 * Imperial Diamond CSS — V34.0 COMPLETE EDITION
 * LiveWeb SaaS Connector — Plugin Stylesheet
 * ═══════════════════════════════════════════════════════════════════
 * SCOPE: All plugin styles in ONE file. Zero inline <style> in PHP.
 *
 * ما الجديد في V34 عن V33:
 *   🆕 Breadcrumb — Schema-aware, Silo-integrated (3 مستويات)
 *   🆕 Hero + Featured Image — two-column layout
 *   🆕 Hero text fix — color: #fff على h1/p
 *   🔧 color-mix() — فول فول فول fallback لمتصفحات بدون دعم
 *   🔧 Logical properties — border-right → border-inline-end
 *   🔧 contain-intrinsic-size — إصلاح الصيغة الصحيحة: 0 500px
 *   🔧 Local evidence boxes — styles كاملة (كانت ناقصة في V33)
 *   🔧 sas-ba-arrow — إيقاف animation على موبايل
 *   🔧 process-steps connector — display:none على موبايل
 *   🔧 Hero btn-group — z-index + position
 *
 * INDEX:
 *   ①  Design Tokens (CSS Custom Properties)
 *   ②  Theme System (data-theme)
 *   ③  Global Reset & Base Typography
 *   ④  Layout Wrappers
 *   ⑤  Hero Section (standard + featured-image variant)
 *   ⑥  Breadcrumb — V34 NEW
 *   ⑦  Stats Grid (Glassmorphism 2.0)
 *   ⑧  Content Typography (h2–h4, lists, blockquote, code, images)
 *   ⑨  Buttons (all variants + groups)
 *   ⑩  CTA Box
 *   ⑪  Comparison Table
 *   ⑫  Price Cards Grid
 *   ⑬  Process Steps
 *   ⑭  Feature Cards Grid
 *   ⑮  FAQ / Details Accordion
 *   ⑯  Regions Box + Pills
 *   ⑰  Areas Matrix / Silo (Hierarchical)
 *   ⑱  Divergence Card — V32 + V43 Hybrid
 *   ⑲  V43 Governorate Blocks
 *   ⑳  Before / After Section
 *   ㉑  Pipeline Images
 *   ㉒  Trust Badges & Guarantee
 *   ㉓  Testimonials / Reviews
 *   ㉔  Cluster Grid (Supporting Articles)
 *   ㉕  Local Evidence / Geo-Cluster Boxes
 *   ㉖  Floating Action Buttons (WhatsApp / Call)
 *   ㉗  Section Titles & Decorative Elements
 *   ㉘  Interface Themes (plumbing/cleaning/hospitality/maintenance)
 *   ㉙  Scroll Animations (CSS-only)
 *   ㉚  Responsive — Mobile First
 *   ㉛  Print Optimization
 *   ㉜  Accessibility (prefers-reduced-motion, forced-colors)
 * ═══════════════════════════════════════════════════════════════════
 */

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

/* ══════════════════════════════════════════════════════════════════
   ① DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════ */
:root {
    /* Brand */
    --imp-pri:        #0f766e;
    --imp-sec:        #f97316;
    --imp-acc:        #fbbf24;
    --imp-danger:     #ef4444;
    --imp-success:    #22c55e;
    --imp-info:       #3b82f6;

    /* Neutral */
    --imp-txt:        #1e293b;
    --imp-txt-mid:    #475569;
    --imp-txt-muted:  #64748b;
    --imp-bg:         #f8fafc;
    --imp-bg-alt:     #f1f5f9;
    --imp-border:     #e2e8f0;
    --imp-white:      #ffffff;

    /* Radius */
    --r-xl:   24px;
    --r-lg:   20px;
    --r-md:   14px;
    --r-sm:   10px;
    --r-xs:   6px;
    --r-pill: 9999px;

    /* Shadows */
    --sh-xs:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sh-sm:  0 4px 12px rgba(0,0,0,.06);
    --sh-md:  0 8px 24px rgba(0,0,0,.08);
    --sh-lg:  0 16px 40px rgba(0,0,0,.10);
    --sh-xl:  0 24px 64px rgba(0,0,0,.12);
    --sh-pri: 0 8px 24px rgba(15,118,110,.25);
    --sh-wa:  0 8px 24px rgba(37,211,102,.30);
    --sh-sec: 0 8px 24px rgba(249,115,22,.25);

    /* Glass */
    --glass-bg:     rgba(255,255,255,.75);
    --glass-border: rgba(255,255,255,.45);
    --glass-shadow: 0 8px 32px rgba(0,0,0,.06);
    --glass-blur:   blur(18px);

    /* Animation */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --dur-fast:    200ms;
    --dur-mid:     350ms;
    --dur-slow:    600ms;

    /*
     * Dynamic aliases — يتم Override من inject_custom_colors() في PHP
     * بناءً على _sas_primary_color, _sas_secondary_color, _sas_accent_color
     */
    --imperial-primary:   var(--imp-pri);
    --imperial-secondary: var(--imp-sec);
    --imperial-accent:    var(--imp-acc);

    /* Fallback colors for color-mix() غير المدعومة */
    --imperial-primary-dark:  #065f46;
    --imperial-primary-dark2: #042f26;
}

/* ══════════════════════════════════════════════════════════════════
   ② THEME SYSTEM (data-theme attribute)
   ══════════════════════════════════════════════════════════════════ */
[data-theme="teal"]    { --imp-pri:#0f766e; --b-lt:#f0fdfa; --b-acc:#14b8a6; --b-dk:#134e4a; --imperial-primary-dark:#065f46; }
[data-theme="blue"]    { --imp-pri:#1d4ed8; --b-lt:#eff6ff; --b-acc:#3b82f6; --b-dk:#1e3a5f; --imperial-primary-dark:#1e3a5f; }
[data-theme="emerald"] { --imp-pri:#059669; --b-lt:#ecfdf5; --b-acc:#10b981; --b-dk:#064e3b; --imperial-primary-dark:#064e3b; }
[data-theme="green"]   { --imp-pri:#15803d; --b-lt:#f0fdf4; --b-acc:#22c55e; --b-dk:#14532d; --imperial-primary-dark:#14532d; }
[data-theme="amber"]   { --imp-pri:#b45309; --b-lt:#fffbeb; --b-acc:#f59e0b; --b-dk:#78350f; --imperial-primary-dark:#78350f; }
[data-theme="cyan"]    { --imp-pri:#0891b2; --b-lt:#ecfeff; --b-acc:#06b6d4; --b-dk:#164e63; --imperial-primary-dark:#164e63; }
[data-theme="indigo"]  { --imp-pri:#4f46e5; --b-lt:#eef2ff; --b-acc:#6366f1; --b-dk:#312e81; --imperial-primary-dark:#312e81; }
[data-theme="rose"]    { --imp-pri:#e11d48; --b-lt:#fff1f2; --b-acc:#f43f5e; --b-dk:#881337; --imperial-primary-dark:#881337; }

/* ══════════════════════════════════════════════════════════════════
   ③ GLOBAL RESET & BASE
   ══════════════════════════════════════════════════════════════════ */
.imperial-wrapper,
.imperial-wrapper * {
    box-sizing: border-box;
}

.imperial-wrapper {
    direction: rtl;
    font-family: 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.8;
    color: var(--imp-txt);
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.imperial-wrapper *:focus-visible {
    outline: 3px solid var(--imperial-accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* ══════════════════════════════════════════════════════════════════
   ④ LAYOUT WRAPPERS
   ══════════════════════════════════════════════════════════════════ */
.imp-diamond-wrapper {
    max-width: 980px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

.imp-spacer { height: 60px; }

/* ══════════════════════════════════════════════════════════════════
   ⑤ HERO SECTION
   ══════════════════════════════════════════════════════════════════ */
.imp-hero {
    /* Fallback gradient — بدون color-mix() */
    background: linear-gradient(135deg, var(--imperial-primary) 0%, var(--imperial-primary-dark) 60%, var(--imperial-primary-dark2) 100%);
    /* Progressive enhancement: color-mix() إن كان المتصفح يدعمه */
    background: linear-gradient(135deg,
        var(--imperial-primary) 0%,
        color-mix(in srgb, var(--imperial-primary) 70%, #000) 60%,
        color-mix(in srgb, var(--imperial-primary) 40%, #000) 100%);
    color: #fff;
    padding: clamp(48px, 9vw, 88px) 20px clamp(80px, 12vw, 120px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Animated blob overlay */
.imp-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    inset-inline-end: -20%;
    width: 70%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,.08) 0%, transparent 65%);
    pointer-events: none;
    animation: heroBlob 10s ease-in-out infinite alternate;
}

/* Shimmer bottom bar */
.imp-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: 6px;
    background: linear-gradient(90deg,
        var(--imperial-accent),
        var(--imperial-secondary),
        var(--imperial-primary),
        var(--imperial-accent));
    background-size: 200% auto;
    animation: shimmer 3s linear infinite;
}

@keyframes heroBlob {
    from { transform: scale(1) rotate(0deg); opacity: 0.6; }
    to   { transform: scale(1.15) rotate(8deg); opacity: 1; }
}
@keyframes shimmer {
    to { background-position: 200% center; }
}

/* Decorative shapes */
.imp-hero-shape   { position: absolute; border-radius: 50%; opacity: 0.06; pointer-events: none; }
.imp-hero-shape-1 { width: 400px; height: 400px; background: #fff; top: -100px; left: -100px; }
.imp-hero-shape-2 { width: 250px; height: 250px; background: var(--imperial-accent); bottom: -80px; right: 10%; }

/* V34 FIX: إضافة color: #fff صريحة على العناصر */
.imp-hero h1 {
    font-size: clamp(1.7rem, 4.5vw, 2.9rem);
    font-weight: 900;
    margin: 0 0 18px;
    line-height: 1.25;
    text-shadow: 0 4px 16px rgba(0,0,0,.3);
    text-wrap: balance;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    color: #fff; /* صريح — لا يُلغيه ثيم الـ theme */
}

.imp-hero p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    opacity: .92;
    margin: 0 auto 28px;
    max-width: 680px;
    line-height: 1.65;
    text-wrap: balance;
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.95);
}

/* V34 FIX: btn-group داخل hero يحتاج z-index */
.imp-hero .imp-btn,
.imp-hero .imp-btn-group,
.imp-hero-text {
    position: relative;
    z-index: 1;
}

/* ─── V34 NEW: Hero with Featured Image ────────────────────────── */
.imp-hero.has-featured-image {
    text-align: right;
    padding-block: clamp(40px, 7vw, 72px);
}

.imp-hero.has-featured-image .imp-diamond-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    max-width: 1000px;
}

.imp-hero-featured-img {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,.35);
    max-width: clamp(220px, 38vw, 420px);
    aspect-ratio: 4/3;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.imp-hero-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    transition: transform var(--dur-slow) var(--ease-out);
}
.imp-hero-featured-img:hover img { transform: scale(1.04); }

/* ══════════════════════════════════════════════════════════════════
   ⑥ BREADCRUMB — V34 NEW
   ══════════════════════════════════════════════════════════════════ */
.sas-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 2px;
    padding: 10px 18px;
    background: var(--imp-bg);
    border-radius: var(--r-sm);
    margin-bottom: 20px;
    font-size: .88rem;
    border: 1px solid var(--imp-border);
    direction: rtl;
    box-shadow: var(--sh-xs);
}

.sas-bc-item {
    color: var(--imperial-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--dur-fast);
    padding: 2px 4px;
    border-radius: var(--r-xs);
}
.sas-bc-item:hover {
    color: var(--imperial-secondary);
    background: rgba(249,115,22,.07);
}

.sas-bc-current {
    color: var(--imp-txt-muted);
    font-weight: 600;
    cursor: default;
}

.sas-bc-sep {
    color: #94a3b8;
    font-size: .8rem;
    padding: 0 3px;
    user-select: none;
}

/* ══════════════════════════════════════════════════════════════════
   ⑦ STATS GRID (Glassmorphism 2.0 — overlaps hero bottom)
   ══════════════════════════════════════════════════════════════════ */
.imp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: -48px auto 48px;
    position: relative;
    z-index: 10;
}

.imp-stat-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    padding: 24px 16px;
    text-align: center;
    box-shadow: var(--glass-shadow), 0 1px 0 rgba(255,255,255,.6) inset;
    transition: transform var(--dur-mid) var(--ease-spring),
                box-shadow var(--dur-mid) var(--ease-out);
    cursor: default;
}
.imp-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--sh-lg);
}

.imp-icon-box {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
    transition: transform var(--dur-mid) var(--ease-spring);
}
.imp-stat-card:hover .imp-icon-box { transform: scale(1.2) rotate(-5deg); }

.imp-stat-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--imperial-primary);
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.imp-stat-card p {
    margin: 0;
    font-size: .82rem;
    color: var(--imp-txt-muted);
    font-weight: 500;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════
   ⑧ CONTENT TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════ */
.imp-main-content { padding: 40px 0 20px; }

.imp-main-content h2 {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 800;
    color: var(--imp-txt);
    margin: 48px 0 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--imperial-accent);
    position: relative;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.imp-main-content h2::after {
    content: '';
    position: absolute;
    bottom: -3px;
    inset-inline-start: 0;
    width: 90px;
    height: 3px;
    background: var(--imperial-primary);
    border-radius: 3px;
    transition: width var(--dur-slow) var(--ease-out);
}
.imp-main-content h2:hover::after { width: 140px; }

.imp-main-content h3 {
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 700;
    color: var(--imperial-primary);
    margin: 32px 0 14px;
    line-height: 1.4;
}
.imp-main-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--imp-txt-mid);
    margin: 24px 0 10px;
}
.imp-main-content p {
    line-height: 1.9;
    margin: 0 0 18px;
    font-size: 1rem;
    color: #334155;
}

.imp-main-content a {
    color: var(--imperial-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--imperial-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: all var(--dur-fast);
}
.imp-main-content a:hover {
    color: var(--imperial-secondary);
    text-decoration-color: var(--imperial-secondary);
}

/* Lists */
.imp-main-content ul,
.imp-main-content ol  { padding-inline-start: 24px; margin: 16px 0 20px; }
.imp-main-content li  { line-height: 1.9; margin-bottom: 8px; color: #334155; }
.imp-main-content ul li::marker { color: var(--imperial-primary); font-size: 1.2em; }
.imp-main-content ol li::marker { color: var(--imperial-primary); font-weight: 700; }

/* Blockquote */
.imp-main-content blockquote {
    border-inline-start: 5px solid var(--imperial-primary);
    padding: 18px 24px;
    margin: 28px 0;
    background: linear-gradient(135deg, #f0fdfa, rgba(255,255,255,.95));
    border-radius: var(--r-sm);
    font-style: italic;
    color: #475569;
    font-size: 1.05em;
    box-shadow: var(--sh-xs);
}

/* Inline code */
.imp-main-content code {
    background: #f1f5f9;
    color: var(--imperial-primary);
    padding: 2px 8px;
    border-radius: var(--r-xs);
    font-size: .9em;
    font-family: 'Courier New', monospace;
}

/* Content images */
.imp-main-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    margin: 24px 0;
    box-shadow: var(--sh-md);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow);
    display: block;
}
.imp-main-content img:hover { transform: scale(1.012); box-shadow: var(--sh-lg); }

/* ══════════════════════════════════════════════════════════════════
   ⑨ BUTTONS
   ══════════════════════════════════════════════════════════════════ */
.imp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: var(--r-pill);
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    transition: transform var(--dur-mid) var(--ease-spring),
                box-shadow var(--dur-mid) var(--ease-out),
                background var(--dur-fast);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    line-height: 1;
}
.imp-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.12);
    opacity: 0;
    transition: opacity var(--dur-fast);
    border-radius: inherit;
}
.imp-btn:hover::after { opacity: 1; }
.imp-btn:active       { transform: scale(0.95) !important; }

/* Variants */
.btn-call,
.btn-call-white {
    background: #fff;
    color: var(--imperial-primary) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.btn-call:hover,
.btn-call-white:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }

.btn-wa {
    background: #25d366;
    color: #fff !important;
    box-shadow: var(--sh-wa);
}
.btn-wa:hover { background: #20b858; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(37,211,102,.4); }

.btn-primary {
    background: var(--imperial-primary);
    color: #fff !important;
    box-shadow: var(--sh-pri);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,118,110,.4); }

.btn-secondary {
    background: var(--imperial-secondary);
    color: #fff !important;
    box-shadow: var(--sh-sec);
}
.btn-secondary:hover { transform: translateY(-3px); }

.btn-outline {
    background: transparent;
    color: var(--imperial-primary) !important;
    border: 2px solid var(--imperial-primary);
}
.btn-outline:hover {
    background: var(--imperial-primary);
    color: #fff !important;
    transform: translateY(-3px);
}

/* Button group */
.imp-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}

/* ══════════════════════════════════════════════════════════════════
   ⑩ CTA BOX
   ══════════════════════════════════════════════════════════════════ */
.imp-cta-box {
    /* Fallback */
    background: linear-gradient(135deg, var(--imperial-primary), var(--imperial-primary-dark) 100%);
    /* Progressive */
    background: linear-gradient(135deg,
        var(--imperial-primary),
        color-mix(in srgb, var(--imperial-primary) 70%, #000) 100%);
    color: #fff;
    padding: clamp(32px, 6vw, 52px) clamp(24px, 4vw, 40px);
    border-radius: var(--r-xl);
    text-align: center;
    margin: 48px 0;
    box-shadow: var(--sh-pri);
    position: relative;
    overflow: hidden;
}
.imp-cta-box::before {
    content: '';
    position: absolute;
    top: -60%;
    inset-inline-start: -20%;
    width: 55%;
    height: 220%;
    background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 60%);
    pointer-events: none;
}
.imp-cta-box h2 {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 900;
    margin: 0 0 14px;
    color: #fff;
    border: none;
    padding: 0;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}
.imp-cta-box h2::after { display: none; }
.imp-cta-box p {
    font-size: 1.1rem;
    opacity: .92;
    margin: 0 0 28px;
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.95);
}
.imp-cta-box .imp-btn-group { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════
   ⑪ COMPARISON TABLE
   ══════════════════════════════════════════════════════════════════ */
.imp-main-content table,
.sas-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: .95rem;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}
.imp-main-content thead th,
.sas-comparison-table thead th {
    background: var(--imperial-primary);
    color: #fff;
    font-weight: 700;
    padding: 14px 18px;
    text-align: center;
    font-size: .92rem;
    letter-spacing: .02em;
    white-space: nowrap;
}
.imp-main-content thead th:first-child,
.sas-comparison-table thead th:first-child { text-align: right; }
.imp-main-content tbody tr,
.sas-comparison-table tbody tr { transition: background var(--dur-fast); }
.imp-main-content tbody tr:nth-child(even),
.sas-comparison-table tbody tr:nth-child(even) { background: var(--imp-bg); }
.imp-main-content tbody tr:hover,
.sas-comparison-table tbody tr:hover { background: #f0fdf4; }
.imp-main-content tbody td,
.sas-comparison-table tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--imp-border);
    vertical-align: middle;
    color: var(--imp-txt-mid);
    line-height: 1.6;
}
/* V34 FIX: border-right → border-inline-start (logical property) */
.sas-comparison-table tbody tr.is-best td {
    background: #ecfdf5;
    font-weight: 600;
    color: var(--imp-txt);
    border-inline-start: 4px solid var(--imperial-primary);
}
.sas-check   { color: var(--imp-success); font-size: 1.1rem; font-weight: 700; }
.sas-cross   { color: var(--imp-danger);  font-size: 1.1rem; font-weight: 700; }
.sas-neutral { color: var(--imp-txt-muted); }

/* ══════════════════════════════════════════════════════════════════
   ⑫ PRICE CARDS GRID
   ══════════════════════════════════════════════════════════════════ */
.sas-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 32px 0;
}
.sas-price-card {
    background: #fff;
    border: 1px solid var(--imp-border);
    border-radius: var(--r-lg);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid);
    position: relative;
    overflow: hidden;
}
.sas-price-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: var(--imperial-primary);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.sas-price-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.sas-price-card.is-featured { border-color: var(--imperial-primary); border-width: 2px; }
.sas-price-card.is-featured::before {
    background: linear-gradient(90deg, var(--imperial-primary), var(--imperial-accent));
    height: 5px;
}
.sas-price-badge {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    background: var(--imperial-accent);
    color: var(--imp-txt);
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-pill);
}
.sas-price-label  { font-size: .95rem; font-weight: 600; color: var(--imp-txt-mid); margin-bottom: 12px; }
.sas-price-amount { font-size: 2.2rem; font-weight: 900; color: var(--imperial-primary); line-height: 1; margin-bottom: 6px; letter-spacing: -0.04em; }
.sas-price-unit   { font-size: .82rem; color: var(--imp-txt-muted); margin-bottom: 20px; }
.sas-price-features { text-align: right; list-style: none; padding: 0; margin: 0 0 20px; }
.sas-price-features li {
    padding: 7px 0;
    border-bottom: 1px solid var(--imp-border);
    font-size: .9rem;
    color: var(--imp-txt-mid);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sas-price-features li:last-child { border-bottom: none; }
.sas-price-features li::before   { content: '✓'; color: var(--imp-success); font-weight: 700; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   ⑬ PROCESS STEPS
   ══════════════════════════════════════════════════════════════════ */
.sas-process-steps {
    list-style: none;
    padding: 0;
    margin: 32px 0;
    counter-reset: steps;
}
.sas-process-step {
    counter-increment: steps;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding: 22px 24px;
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    border: 1px solid var(--imp-border);
    transition: box-shadow var(--dur-mid), transform var(--dur-mid) var(--ease-out);
    position: relative;
}
.sas-process-step:hover { box-shadow: var(--sh-md); transform: translateX(-4px); }
.sas-process-step::before {
    content: counter(steps);
    min-width: 46px;
    height: 46px;
    border-radius: 50%;
    /* Fallback */
    background: linear-gradient(135deg, var(--imperial-primary), var(--imperial-primary-dark));
    /* Progressive */
    background: linear-gradient(135deg, var(--imperial-primary), color-mix(in srgb, var(--imperial-primary) 80%, #000));
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15,118,110,.3);
}
/* Connector line */
.sas-process-steps .sas-process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -24px;
    inset-inline-start: 44px;
    width: 2px;
    height: 24px;
    background: linear-gradient(to bottom, var(--imperial-primary), transparent);
}
.sas-process-step-content h3 { font-size: 1.05rem; font-weight: 700; color: var(--imp-txt); margin: 0 0 6px; }
.sas-process-step-content p  { margin: 0; font-size: .92rem; color: var(--imp-txt-muted); line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════
   ⑭ FEATURE CARDS GRID
   ══════════════════════════════════════════════════════════════════ */
.sas-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin: 32px 0;
}
.sas-feature-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--imp-border);
    border-radius: var(--r-md);
    padding: 22px 18px;
    text-align: center;
    transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid);
    box-shadow: var(--sh-xs);
}
.sas-feature-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--imperial-primary); }
.sas-feature-icon  { font-size: 2.2rem; display: block; margin-bottom: 12px; transition: transform var(--dur-mid) var(--ease-bounce); }
.sas-feature-card:hover .sas-feature-icon { transform: scale(1.2); }
.sas-feature-title { font-weight: 700; font-size: .95rem; color: var(--imp-txt); margin-bottom: 6px; }
.sas-feature-desc  { font-size: .85rem; color: var(--imp-txt-muted); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════
   ⑮ FAQ / DETAILS ACCORDION
   ══════════════════════════════════════════════════════════════════ */
.sas-faq-section       { margin: 40px 0; }
.sas-faq-section > h2  { margin-top: 0; }

.sas-faq-item,
.sas-dv-faq-item {
    border: 1px solid var(--imp-border);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    background: #fff;
    box-shadow: var(--sh-xs);
    transition: box-shadow var(--dur-mid);
    overflow: hidden;
}
.sas-faq-item[open],
.sas-dv-faq-item[open] { box-shadow: var(--sh-sm); border-color: var(--imperial-primary); }

.sas-faq-question,
.sas-dv-faq-q {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: .97rem;
    font-weight: 700;
    color: var(--imp-txt);
    list-style: none;
    transition: background var(--dur-fast), color var(--dur-fast);
    gap: 12px;
}
.sas-faq-question::-webkit-details-marker,
.sas-dv-faq-q::-webkit-details-marker { display: none; }
.sas-faq-question:hover,
.sas-dv-faq-q:hover { background: #f0fdf4; color: var(--imperial-primary); }
.sas-faq-item[open] .sas-faq-question,
.sas-dv-faq-item[open] .sas-dv-faq-q { background: var(--imperial-primary); color: #fff; }

.sas-faq-arrow,
.sas-dv-arrow {
    font-size: .78rem;
    color: var(--imp-txt-muted);
    transition: transform var(--dur-mid) var(--ease-spring);
    flex-shrink: 0;
}
.sas-faq-item[open] .sas-faq-arrow,
.sas-dv-faq-item[open] .sas-dv-arrow { transform: rotate(180deg); color: rgba(255,255,255,.8); }

.sas-faq-answer,
.sas-dv-faq-a {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--imp-border);
    animation: faqReveal var(--dur-mid) var(--ease-out) forwards;
}
.sas-faq-answer p,
.sas-dv-faq-a p { margin: 0; font-size: .95rem; line-height: 1.8; color: var(--imp-txt-mid); }

@keyframes faqReveal {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════
   ⑯ REGIONS BOX + PILLS
   ══════════════════════════════════════════════════════════════════ */
.imp-regions-box {
    margin: 40px 0;
    padding: 28px;
    background: var(--imp-bg);
    border-radius: var(--r-lg);
    border: 1px solid var(--imp-border);
}
.imp-section-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--imp-txt);
    margin: 0 0 20px;
}
.imp-pills-container { display: flex; flex-wrap: wrap; gap: 10px; }

/* ══════════════════════════════════════════════════════════════════
   ⑰ AREAS MATRIX / HIERARCHICAL SILO
   ══════════════════════════════════════════════════════════════════ */
.sas-hierarchical-silo {
    margin: 48px 0;
    padding: clamp(24px, 4vw, 40px);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--imp-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    /* V34 FIX: صيغة contain-intrinsic-size الصحيحة */
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

.sas-country-header { text-align: center; margin-bottom: 32px; }
.sas-country-header h2 { font-size: 1.4rem; border: none; padding: 0; margin-bottom: 14px; }
.sas-country-header h2::after { display: none; }
.sas-line {
    width: 90px;
    height: 4px;
    background: linear-gradient(90deg, var(--imperial-primary), var(--imperial-accent));
    margin: 0 auto;
    border-radius: var(--r-pill);
}

.sas-tree-container { display: grid; gap: 24px; }

.sas-city-block {
    background: #fff;
    border: 1px solid var(--imp-border);
    border-radius: var(--r-md);
    padding: 20px 22px;
    transition: box-shadow var(--dur-mid), border-color var(--dur-fast);
}
.sas-city-block:hover { box-shadow: var(--sh-md); border-color: var(--imperial-primary); }

.sas-city-header {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 800;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--imp-border);
}
.sas-city-header a { color: var(--imperial-primary); text-decoration: none; transition: color var(--dur-fast); }
.sas-city-header a:hover { color: var(--imperial-secondary); }

.sas-area-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.sas-area-item {
    padding: 7px 16px;
    background: var(--imp-bg);
    border: 1px solid var(--imp-border);
    border-radius: var(--r-pill);
    font-size: .88rem;
    font-weight: 600;
    color: var(--imp-txt);
    text-decoration: none !important;
    transition: all var(--dur-mid) var(--ease-spring);
    white-space: nowrap;
    display: inline-block;
}
.sas-area-item:hover {
    background: var(--imperial-primary);
    color: #fff !important;
    border-color: var(--imperial-primary);
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--sh-pri);
}

/* Areas Coverage (fix_duplicate_areas_section) */
.sas-areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 1.5rem;
}
.sas-area-coverage-item {
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--imp-border);
    box-shadow: var(--sh-xs);
    transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid);
}
.sas-area-coverage-item:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.sas-area-coverage-item strong { display: block; font-size: 1.05rem; color: var(--imp-txt); margin-bottom: .5rem; }
.sas-area-coverage-item p      { margin: 0; font-size: .9rem; color: var(--imp-txt-muted); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════
   ⑱ DIVERGENCE CARD — V32 + V43 Hybrid
   ══════════════════════════════════════════════════════════════════ */
.sas-divergence-card {
    background: linear-gradient(135deg, #fefce8 0%, #fff7ed 50%, #fef3c7 100%);
    border: 1px solid var(--imperial-accent);
    border-inline-start: 6px solid var(--imperial-primary);
    border-radius: var(--r-xl);
    padding: clamp(22px, 4vw, 36px);
    margin: 40px 0;
    box-shadow: 0 4px 16px rgba(251,191,36,.12), var(--sh-sm);
    position: relative;
    overflow: hidden;
}
.sas-divergence-card::before {
    content: '';
    position: absolute;
    top: -40%;
    inset-inline-end: -20%;
    width: 50%;
    height: 150%;
    background: radial-gradient(circle, rgba(251,191,36,.07) 0%, transparent 70%);
    pointer-events: none;
}

.sas-dv-header { margin-bottom: 16px; }
.sas-dv-title  { font-size: 1.25rem; font-weight: 800; color: #92400e; margin: 0; line-height: 1.4; }

.sas-dv-intro {
    font-size: 1rem;
    line-height: 1.9;
    color: #451a03;
    margin: 0 0 22px;
    padding-inline-start: 16px;
    border-inline-start: 3px solid var(--imperial-primary);
}

.sas-dv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.sas-dv-stat {
    text-align: center;
    padding: 14px 10px;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(251,191,36,.35);
    border-radius: var(--r-sm);
    backdrop-filter: blur(6px);
    transition: transform var(--dur-mid) var(--ease-spring);
}
.sas-dv-stat:hover      { transform: translateY(-4px); }
.sas-dv-stat-value      { display: block; font-size: 1.7rem; font-weight: 900; color: var(--imperial-primary); letter-spacing: -0.04em; line-height: 1; }
.sas-dv-stat-label      { font-size: .82rem; color: #78716c; font-weight: 500; margin-top: 4px; }

.sas-dv-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.sas-dv-feature {
    font-size: .93rem;
    color: #451a03;
    padding: 10px 14px;
    background: rgba(255,255,255,.65);
    border-radius: var(--r-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sas-dv-check { color: var(--imperial-primary); font-weight: 900; flex-shrink: 0; font-size: 1.1rem; }

.sas-dv-tip {
    padding: 14px 18px;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(251,191,36,.3);
    border-radius: var(--r-sm);
    margin-bottom: 22px;
    font-size: .93rem;
    line-height: 1.7;
    color: #451a03;
}

.sas-dv-faqs    { margin-bottom: 22px; }
.sas-dv-faqs h4 { font-size: 1.05rem; color: #92400e; margin: 0 0 12px; font-weight: 700; }

.sas-dv-cta     { text-align: center; }
.sas-dv-cta-btn {
    display: inline-block;
    padding: 13px 30px;
    background: var(--imperial-primary);
    color: #fff !important;
    text-decoration: none;
    border-radius: var(--r-pill);
    font-size: 1rem;
    font-weight: 700;
    transition: all var(--dur-mid) var(--ease-spring);
    box-shadow: var(--sh-pri);
}
.sas-dv-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,118,110,.4); }

/* ══════════════════════════════════════════════════════════════════
   ⑲ V43 GOVERNORATE BLOCKS
   ══════════════════════════════════════════════════════════════════ */
.sas-v43-gov-blocks { margin: 40px 0; direction: rtl; }

.sas-gov-block {
    margin-bottom: 48px;
    border: 1px solid #e5e7eb;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    background: #fff;
    transition: box-shadow var(--dur-mid);
}
.sas-gov-block:hover { box-shadow: var(--sh-lg); }

.sas-gov-header {
    /* Fallback */
    background: linear-gradient(135deg, var(--imperial-primary, #1a56db) 0%, var(--imperial-primary-dark, #1e3a5f) 100%);
    /* Progressive */
    background: linear-gradient(135deg,
        var(--imperial-primary, #1a56db) 0%,
        color-mix(in srgb, var(--imperial-primary, #1a56db) 70%, #000) 100%);
    color: #fff;
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
}
.sas-gov-header::before {
    content: '';
    position: absolute;
    top: -50%;
    inset-inline-end: -10%;
    width: 50%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 60%);
    pointer-events: none;
}
.sas-gov-header .sas-section-title {
    color: #fff;
    border-inline-start-color: rgba(255,255,255,.5);
    margin-bottom: 8px;
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}
.sas-gov-intro {
    color: rgba(255,255,255,.92);
    margin: 8px 0 0;
    font-size: 1rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.sas-gov-stats {
    display: flex;
    gap: 12px;
    padding: 20px 32px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.sas-stat-item {
    flex: 1;
    min-width: 110px;
    text-align: center;
    padding: 14px 10px;
    background: #fff;
    border-radius: var(--r-sm);
    border: 1px solid #e5e7eb;
    transition: transform var(--dur-mid) var(--ease-spring);
}
.sas-stat-item:hover { transform: translateY(-4px); }
.sas-stat-icon  { display: block; font-size: 1.3rem; margin-bottom: 4px; }
.sas-stat-value { display: block; font-size: 1.05rem; font-weight: 800; color: var(--imperial-primary, #1a56db); }
.sas-stat-label { display: block; font-size: .78rem; color: #6b7280; margin-top: 2px; }

.sas-gov-areas          { padding: 22px 32px; border-bottom: 1px solid #e5e7eb; }
.sas-gov-areas h3       { font-size: 1rem; font-weight: 700; margin: 0 0 14px; color: #1f2937; }
.sas-areas-list         { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.sas-gov-cta {
    padding: 22px 32px;
    background: #f0fdf4;
    border-top: 1px solid #d1fae5;
    text-align: center;
}
.sas-gov-cta p { margin: 0 0 14px; font-weight: 600; color: #065f46; font-size: .95rem; }
.sas-gov-cta .sas-cta-btn {
    display: inline-block;
    background: var(--imperial-primary, #0e9f6e);
    color: #fff !important;
    padding: 12px 28px;
    border-radius: var(--r-pill);
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    transition: all var(--dur-mid) var(--ease-spring);
    box-shadow: 0 4px 14px rgba(14,159,110,.25);
}
.sas-gov-cta .sas-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(14,159,110,.4); }

/* ══════════════════════════════════════════════════════════════════
   ⑳ BEFORE / AFTER SECTION
   ══════════════════════════════════════════════════════════════════ */
.sas-before-after-section {
    margin: 48px 0;
    padding: clamp(24px, 4vw, 40px);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: var(--r-xl);
    border: 1px solid #e2e8f0;
    box-shadow: var(--sh-xs);
}

.sas-before-after-section h2 {
    text-align: center;
    color: var(--imp-txt);
    margin-bottom: 8px;
    font-size: 1.6rem;
    border: none;
    padding: 0;
}
.sas-before-after-section h2::after { display: none; }
.sas-ba-intro { text-align: center; color: var(--imp-txt-muted); margin-bottom: 2rem; font-size: 1.05rem; }

.sas-ba-results-grid { display: flex; align-items: stretch; gap: 20px; margin-bottom: 2.5rem; }

.sas-ba-card {
    flex: 1;
    padding: 1.8rem;
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-mid) var(--ease-out);
}
.sas-ba-card:hover { transform: translateY(-4px); }
.sas-ba-before { background: #fff5f5; border: 2px solid #fed7d7; }
.sas-ba-after  { background: #f0fff4; border: 2px solid #c6f6d5; }
.sas-ba-label  { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; text-align: center; }
.sas-ba-before .sas-ba-label { color: #e53e3e; }
.sas-ba-after  .sas-ba-label { color: #38a169; }
.sas-ba-card ul { list-style: none; padding: 0; margin: 0; }
.sas-ba-card li {
    padding: .65rem 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-size: .95rem;
    color: #334155;
    line-height: 1.6;
}
.sas-ba-card li:last-child { border-bottom: none; }

.sas-ba-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    min-width: 50px;
    color: var(--imp-info);
    animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(-4px); }
}

.sas-ba-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    margin-top: 1.5rem;
}
.sas-ba-stat {
    text-align: center;
    padding: 1.2rem .8rem;
    background: #fff;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-xs);
    transition: transform var(--dur-mid) var(--ease-spring);
}
.sas-ba-stat:hover { transform: translateY(-4px); }
.sas-ba-number { display: block; font-size: 1.9rem; font-weight: 900; color: #2563eb; margin-bottom: .3rem; letter-spacing: -0.04em; }
.sas-ba-desc   { display: block; font-size: .85rem; color: var(--imp-txt-muted); }

/* Image B/A Gallery */
.sas-ba-gallery    { display: flex; flex-direction: column; gap: 2rem; }
.sas-ba-image-pair { display: flex; align-items: center; gap: 1.2rem; justify-content: center; }
.sas-ba-img-container {
    position: relative;
    flex: 1;
    max-width: 420px;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-md);
    transition: transform var(--dur-mid) var(--ease-out);
}
.sas-ba-img-container:hover { transform: scale(1.02); }
.sas-ba-img-container img   { width: 100%; height: auto; display: block; }
.sas-ba-img-label {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    padding: 4px 14px;
    border-radius: var(--r-pill);
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(4px);
}
.sas-label-before { background: rgba(229,62,62,.9); }
.sas-label-after  { background: rgba(56,161,105,.9); }
.sas-ba-caption   { text-align: center; font-size: .88rem; color: var(--imp-txt-muted); margin-top: 8px; font-style: italic; }

/* ══════════════════════════════════════════════════════════════════
   ㉑ PIPELINE IMAGES
   ══════════════════════════════════════════════════════════════════ */
.sas-pipeline-img {
    margin: 2.5rem 0;
    text-align: center;
    direction: rtl;
}
.sas-pipeline-img img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow);
    display: inline-block;
}
.sas-pipeline-img img:hover { transform: scale(1.015); box-shadow: var(--sh-lg); }
.sas-pipeline-caption { display: block; text-align: center; color: var(--imp-txt-muted); font-size: .9rem; margin-top: 10px; font-style: italic; }

.sas-img-process      { border-inline-start: 4px solid var(--imperial-primary); padding-inline-start: 1rem; }
.sas-img-before_after { border-inline-start: 4px solid #f59e0b;                  padding-inline-start: 1rem; }
.sas-img-team         { border-inline-start: 4px solid #3b82f6;                  padding-inline-start: 1rem; }
.sas-img-equipment    { border-inline-start: 4px solid #8b5cf6;                  padding-inline-start: 1rem; }

/* Image Pending Alert */
.img-pending-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fffbeb;
    border: 2px dashed #f59e0b;
    border-radius: var(--r-sm);
    padding: 14px 18px;
    margin: 20px 0;
    font-size: .9rem;
    color: #92400e;
    font-weight: 500;
}
.img-pending-alert::before { content: '🖼️'; font-size: 1.4rem; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   ㉒ TRUST BADGES & GUARANTEE
   ══════════════════════════════════════════════════════════════════ */
.sas-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: var(--imp-bg);
    border-radius: var(--r-md);
    border: 1px solid var(--imp-border);
    margin: 32px 0;
}
.sas-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--imp-txt-mid);
    padding: 8px 16px;
    background: #fff;
    border-radius: var(--r-pill);
    border: 1px solid var(--imp-border);
    box-shadow: var(--sh-xs);
    white-space: nowrap;
}
.sas-trust-badge span { font-size: 1.2rem; }

.sas-guarantee-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 2px solid #6ee7b7;
    border-radius: var(--r-md);
    margin: 28px 0;
    box-shadow: 0 4px 12px rgba(34,197,94,.12);
}
.sas-guarantee-icon { font-size: 2.5rem; flex-shrink: 0; }
.sas-guarantee-text strong { display: block; font-size: 1.05rem; color: #065f46; margin-bottom: 4px; }
.sas-guarantee-text p      { margin: 0; font-size: .9rem; color: #047857; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════
   ㉓ TESTIMONIALS / REVIEWS
   ══════════════════════════════════════════════════════════════════ */
.sas-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 32px 0;
}
.sas-review-card {
    background: #fff;
    border: 1px solid var(--imp-border);
    border-radius: var(--r-md);
    padding: 22px;
    box-shadow: var(--sh-xs);
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
    position: relative;
}
.sas-review-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.sas-review-card::before {
    content: '"';
    position: absolute;
    top: 16px;
    inset-inline-end: 20px;
    font-size: 4rem;
    color: var(--imperial-accent);
    opacity: .35;
    line-height: 1;
    font-family: Georgia, serif;
}
.sas-review-stars  { color: var(--imperial-accent); font-size: 1.1rem; margin-bottom: 10px; letter-spacing: 2px; }
.sas-review-text   { font-size: .93rem; line-height: 1.8; color: var(--imp-txt-mid); margin: 0 0 14px; }
.sas-review-author { display: flex; align-items: center; gap: 10px; }
.sas-review-avatar { width: 40px; height: 40px; background: var(--imperial-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.sas-review-name   { font-weight: 700; font-size: .92rem; color: var(--imp-txt); }
.sas-review-date   { font-size: .8rem; color: var(--imp-txt-muted); }

/* ══════════════════════════════════════════════════════════════════
   ㉔ CLUSTER GRID (Supporting Articles)
   ══════════════════════════════════════════════════════════════════ */
.sas-cluster-section {
    margin: 40px 0;
    padding: 28px;
    background: var(--imp-bg);
    border-radius: var(--r-lg);
    border: 1px solid var(--imp-border);
}
.cluster-title { font-size: 1.15rem; font-weight: 700; color: var(--imp-txt); margin: 0 0 18px; }
.cluster-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.cluster-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--imp-border);
    border-radius: var(--r-sm);
    text-decoration: none !important;
    transition: all var(--dur-mid) var(--ease-spring);
    color: var(--imp-txt) !important;
    box-shadow: var(--sh-xs);
}
.cluster-item:hover {
    background: var(--imperial-primary);
    color: #fff !important;
    border-color: var(--imperial-primary);
    transform: translateY(-3px);
    box-shadow: var(--sh-pri);
}
.cluster-item .icon { font-size: 1.2rem; flex-shrink: 0; }
.cluster-item .text { font-size: .88rem; font-weight: 600; line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════════
   ㉕ LOCAL EVIDENCE / GEO-CLUSTER BOXES
   V34 FIX: كانت الـ styles ناقصة في V33 — أضفنا الخصائص الكاملة
   ══════════════════════════════════════════════════════════════════ */
.sas-local-evidence-box {
    background: #fdfcf6;
    padding: 22px 24px;
    border-inline-end: 6px solid var(--imperial-accent);
    border-radius: var(--r-md);
    margin: 28px 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.08);
    transition: box-shadow var(--dur-mid), transform var(--dur-mid) var(--ease-out);
    border: 1px solid rgba(251,191,36,.25);
    border-inline-end: 6px solid var(--imperial-accent);
}
.sas-local-evidence-box:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.sas-local-evidence-box h3 {
    color: #92400e;
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sas-local-evidence-box p {
    font-size: 1rem;
    line-height: 1.85;
    color: #451a03;
    margin: 0;
}

.sas-local-generic-box {
    padding: 18px 22px;
    border: 1px dashed #cbd5e1;
    border-radius: var(--r-sm);
    margin: 20px 0;
    background: #f8fafc;
    color: var(--imp-txt-mid);
    font-size: .95rem;
    line-height: 1.75;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.sas-local-generic-box:hover {
    border-color: var(--imperial-primary);
    background: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   ㉖ FLOATING ACTION BUTTONS
   ══════════════════════════════════════════════════════════════════ */
.sas-float-group {
    position: fixed;
    bottom: 28px;
    inset-inline-end: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 9999;
}
.sas-float-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-size: 1.55rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.2);
    transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid);
    position: relative;
    cursor: pointer;
    border: none;
}
.sas-float-btn:hover  { transform: scale(1.15) translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.28); }
.sas-float-btn:active { transform: scale(0.95); }

.sas-float-wa  { background: #25d366; color: #fff; animation: waPulse  3s ease-in-out infinite; }
.sas-float-tel { background: var(--imperial-primary); color: #fff; animation: telPulse 3s ease-in-out infinite 1.5s; }

@keyframes waPulse  {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
    50%       { box-shadow: 0 0 0 14px rgba(37,211,102,.0); }
}
@keyframes telPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15,118,110,.6); }
    50%       { box-shadow: 0 0 0 14px rgba(15,118,110,.0); }
}

.sas-float-tooltip {
    position: absolute;
    inset-inline-end: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15,23,42,.88);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: var(--r-xs);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast);
    backdrop-filter: blur(4px);
    font-family: 'Noto Sans Arabic', sans-serif;
}
.sas-float-btn:hover .sas-float-tooltip { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   ㉗ SECTION TITLES & DECORATIVE ELEMENTS
   ══════════════════════════════════════════════════════════════════ */
.sas-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--imp-txt);
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--imperial-primary);
    line-height: 1.4;
    margin: 0 0 20px;
}
.sas-divider {
    height: 1px;
    background: linear-gradient(to left, transparent, var(--imp-border), transparent);
    margin: 40px 0;
    border: none;
}
/* Highlight text */
.sas-highlight {
    /* Fallback */
    background: linear-gradient(transparent 60%, rgba(251,191,36,.35) 60%);
    /* Progressive */
    background: linear-gradient(transparent 60%, color-mix(in srgb, var(--imperial-accent) 35%, transparent) 60%);
    padding: 0 2px;
    font-weight: 600;
}
/* Pill badge */
.sas-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    font-size: .8rem;
    font-weight: 700;
    /* Fallback */
    background: rgba(15,118,110,.12);
    color: var(--imperial-primary);
    border: 1px solid rgba(15,118,110,.25);
    /* Progressive */
    background: color-mix(in srgb, var(--imperial-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--imperial-primary) 25%, transparent);
}
.sas-pill-success { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.sas-pill-warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.sas-pill-danger  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ══════════════════════════════════════════════════════════════════
   ㉘ INTERFACE THEMES — Body-level
   ══════════════════════════════════════════════════════════════════ */

/* 🔵 Plumbing */
body.interface-plumbing { --imperial-primary: #0284c7; --imperial-accent: #38bdf8; --imperial-primary-dark: #075985; }
body.interface-plumbing .imp-hero::before {
    background: radial-gradient(circle at 60% 50%, rgba(56,189,248,.15) 0%, transparent 55%);
    animation: ripple 8s infinite linear;
}
@keyframes ripple {
    0%, 100% { transform: scale(1)    rotate(0deg); opacity: .5; }
    50%       { transform: scale(1.12) rotate(6deg); opacity: 1; }
}
body.interface-plumbing .sas-dv-stat {
    border-radius: 50% 50% 50% 10px / 50% 50% 10px 10px;
    border-color: rgba(2,132,199,.3);
}

/* 🟢 Cleaning */
body.interface-cleaning { --imperial-primary: #059669; --imperial-accent: #34d399; --imperial-primary-dark: #047857; }
body.interface-cleaning .imp-hero { box-shadow: inset 0 -12px 32px rgba(16,185,129,.2); }
body.interface-cleaning .sas-dv-check { text-shadow: 0 0 10px rgba(16,185,129,.5); }
body.interface-cleaning .sas-area-item:hover { background: #059669; }

/* 🟡 Hospitality */
body.interface-hospitality { --imperial-primary: #b45309; --imperial-accent: #f59e0b; --imperial-primary-dark: #92400e; }
body.interface-hospitality .imp-hero h1 { letter-spacing: .03em; }
body.interface-hospitality .sas-divergence-card { border: 2px solid #d97706; }

/* 🔧 Maintenance */
body.interface-maintenance { --imperial-primary: #475569; --imperial-accent: #f97316; --imperial-primary-dark: #334155; }
body.interface-maintenance .imp-hero {
    background: repeating-linear-gradient(
        45deg,
        #1e293b 0px, #1e293b 10px,
        #0f172a 10px, #0f172a 20px
    ) !important;
    border-bottom: 6px solid var(--imperial-accent);
}
body.interface-maintenance .sas-divergence-card {
    border-radius: 4px;
    border-inline-start: 8px solid #ea580c;
    background: #f8fafc;
}

/* ══════════════════════════════════════════════════════════════════
   ㉙ SCROLL ANIMATIONS (CSS-only)
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .sas-animate {
        opacity: 0;
        transform: translateY(24px);
        animation: revealUp var(--dur-slow) var(--ease-out) forwards;
        animation-play-state: paused;
    }
    .sas-animate.is-visible    { animation-play-state: running; }
    .sas-animate-left          { transform: translateX(24px); }
    .sas-animate-right         { transform: translateX(-24px); }
    .sas-animate-scale         { transform: scale(.94); }

    @keyframes revealUp {
        to { opacity: 1; transform: none; }
    }

    .sas-animate[data-delay="1"] { animation-delay: 100ms; }
    .sas-animate[data-delay="2"] { animation-delay: 200ms; }
    .sas-animate[data-delay="3"] { animation-delay: 300ms; }
    .sas-animate[data-delay="4"] { animation-delay: 400ms; }
}

/* ══════════════════════════════════════════════════════════════════
   ㉚ RESPONSIVE — Mobile First
   ══════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
    .imp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: -32px; }
    .sas-ba-stats   { grid-template-columns: repeat(2, 1fr); }
    .sas-areas-grid { grid-template-columns: 1fr; }
    .sas-gov-header { padding: 20px; }
    .sas-gov-stats  { padding: 14px 20px; gap: 8px; }
    .sas-gov-areas,
    .sas-gov-cta    { padding: 18px 20px; }

    /* V34: Featured image hero collapses to single column */
    .imp-hero.has-featured-image .imp-diamond-wrapper {
        grid-template-columns: 1fr;
    }
    .imp-hero-featured-img { max-width: 100%; aspect-ratio: 16/9; }
    .imp-hero.has-featured-image { text-align: center; }
}

/* Mobile */
@media (max-width: 640px) {
    .imp-stats-grid       { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: -24px; }
    .imp-stat-card        { padding: 18px 12px; }
    .imp-diamond-wrapper  { padding-inline: 14px; }
    .imp-btn-group        { flex-direction: column; width: 100%; }
    .imp-btn              { width: 100%; justify-content: center; }
    .imp-cta-box          { padding: 28px 18px; }

    .sas-ba-results-grid  { flex-direction: column; }
    /* V34 FIX: إيقاف animation السهم على موبايل بعد rotate */
    .sas-ba-arrow         { transform: rotate(90deg) !important; animation: none !important; }
    .sas-ba-stats         { grid-template-columns: repeat(2, 1fr); }
    .sas-ba-image-pair    { flex-direction: column; }

    .sas-before-after-section  { padding: 20px 16px; }
    .sas-hierarchical-silo     { padding: 20px 16px; }
    .sas-divergence-card       { padding: 20px 16px; margin: 28px 0; }
    .sas-dv-stats    { grid-template-columns: repeat(2, 1fr); }
    .sas-dv-features { grid-template-columns: 1fr; }
    .sas-price-grid  { grid-template-columns: 1fr; }
    .sas-reviews-grid{ grid-template-columns: 1fr; }
    .cluster-grid    { grid-template-columns: 1fr 1fr; }

    .sas-float-btn   { width: 52px; height: 52px; font-size: 1.4rem; }
    .sas-float-group { bottom: 20px; inset-inline-end: 14px; }

    .imp-main-content h2 { font-size: 1.3rem; }

    /* V34 FIX: Process steps على موبايل — column layout + إخفاء connector */
    .sas-process-step { flex-direction: column; gap: 12px; }
    .sas-process-steps .sas-process-step:not(:last-child)::after { display: none; }

    /* V34: إخفاء الصورة في الهيرو على شاشات صغيرة جداً */
    .imp-hero-featured-img { display: none; }
    .imp-hero.has-featured-image { text-align: center; }
}

/* Very small */
@media (max-width: 380px) {
    .imp-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .sas-ba-stats   { grid-template-columns: 1fr 1fr; }
    .cluster-grid   { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   ㉛ PRINT OPTIMIZATION
   ══════════════════════════════════════════════════════════════════ */
@media print {
    .sas-divergence-card,
    .sas-hierarchical-silo,
    .sas-before-after-section,
    .imp-cta-box {
        box-shadow: none !important;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
    .imp-hero {
        background: none !important;
        color: #000 !important;
        padding: 12px 0 !important;
    }
    .imp-hero h1,
    .imp-hero p           { color: #000 !important; text-shadow: none !important; }
    .imp-hero::before,
    .imp-hero::after      { display: none; }
    .imp-hero-featured-img { display: none; }
    .sas-breadcrumb        { background: none; border: none; box-shadow: none; }
    .imp-btn-group,
    .sas-float-group       { display: none !important; }
    .sas-area-item         { border: 1px solid #ccc; }
    a[href]::after         { content: " (" attr(href) ")"; font-size: .8em; color: #666; }
}

/* ══════════════════════════════════════════════════════════════════
   ㉜ ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .sas-float-wa,
    .sas-float-tel { animation: none !important; }
}

@media (forced-colors: active) {
    .imp-stat-card,
    .sas-price-card,
    .sas-review-card { border: 2px solid ButtonText; }
    .imp-btn          { border: 2px solid ButtonText; }
    .sas-area-item    { border: 2px solid ButtonText; }
    .imp-hero         { background: ButtonFace !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ㉝ CITIES / REGIONS GRID — [sas_regions] Shortcode
   مُستخرج من functions.php — titan_display_cities_grid()
   V34.1: ربط المتغيرات بـ Design Tokens بدل القيم الثابتة
   ══════════════════════════════════════════════════════════════════ */
.titan-cities-container {
    padding: 40px 0;
    direction: rtl;
}

.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
}

.city-btn-card {
    background: var(--glass-bg, rgba(255,255,255,.75));
    border: 1px solid var(--imp-border, #e2e8f0);
    border-radius: var(--r-lg, 20px);
    padding: 30px 20px;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: transform var(--dur-mid, 350ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow var(--dur-mid, 350ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
                background var(--dur-fast, 200ms);
    box-shadow: var(--glass-shadow, 0 8px 32px rgba(0,0,0,.06));
    position: relative;
    overflow: hidden;
    /* V34.1: backdrop-filter للـ Glassmorphism 2.0 */
    backdrop-filter: var(--glass-blur, blur(18px));
    -webkit-backdrop-filter: var(--glass-blur, blur(18px));
}

/* Top accent bar — يتمدد عند hover */
.city-btn-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--imperial-primary), var(--imperial-accent));
    transform: scaleX(0);
    transform-origin: right; /* RTL: ينمو من اليمين */
    transition: transform var(--dur-mid, 350ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.city-btn-card:hover::before { transform: scaleX(1); }

.city-btn-card:hover {
    transform: translateY(-8px);
    background: #fff;
    box-shadow: var(--sh-lg, 0 16px 40px rgba(0,0,0,.10));
    border-color: var(--imperial-primary);
}

.city-icon {
    font-size: 32px;
    margin-bottom: 5px;
    display: block;
    transition: transform var(--dur-mid, 350ms) var(--ease-bounce, cubic-bezier(0.68,-0.55,0.27,1.55));
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.city-btn-card:hover .city-icon { transform: scale(1.2) rotate(-5deg); }

.city-name {
    color: var(--imp-txt, #1e293b);
    font-weight: 900;
    font-size: 18px;
    line-height: 1.4;
    transition: color var(--dur-fast, 200ms);
    /* عدد أحرف آمن على الأجهزة الصغيرة */
    word-break: break-word;
}
.city-btn-card:hover .city-name { color: var(--imperial-primary); }

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .city-btn-card {
        padding: 20px 10px;
        gap: 10px;
    }
    .city-icon { font-size: 24px; }
    .city-name { font-size: 15px; }
}

@media (max-width: 380px) {
    .cities-grid { grid-template-columns: 1fr; }
    .city-btn-card { padding: 18px; flex-direction: row; text-align: right; }
    .city-icon { margin-bottom: 0; font-size: 22px; }
}

/* Print — إخفاء التأثيرات */
@media print {
    .city-btn-card { box-shadow: none; border: 1px solid #ccc; }
    .city-btn-card::before { display: none; }
}