/* ==========================================================================
   ELITE TECH PRODUCTIONS - MASTER DESIGN SYSTEM & APP STYLES
   STRICT NO-BOOTSTRAP RULE | PURE CSS TOKENS | NEON GLASSMORPHISM
   ========================================================================== */

/*========================================================================
   FORCING BROWSER BRAND COLORS, SCROLLBAR & SELECTION
==========================================================================*/

/* إلزام المتصفح بنمط الألوان الداكن الثابت */
html {
    color-scheme: dark !important;
    scrollbar-color: var(--color-accent-cyan, #18C8F8) #06131F;
    scrollbar-width: thin;
}

/* تخصيص شكل ولون شريط التمرير (Scrollbar) بـ Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #06131F !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(24, 200, 248, 0.35) !important;
    border-radius: 4px;
    border: 1px solid rgba(24, 200, 248, 0.5);
    box-shadow: 0 0 10px rgba(24, 200, 248, 0.4);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-accent-cyan, #18C8F8) !important;
        box-shadow: 0 0 15px var(--color-accent-cyan);
    }

/* تخصيص لون تظليل النصوص المحددة */
::selection {
    background: rgba(24, 200, 248, 0.3) !important;
    color: #64E8FF !important;
}

/*========================================================================
   1. IMPORTS & LUXURY TYPOGRAPHY & CSS VARIABLES TOKENS
==========================================================================*/

:root {
    --color-primary-navy: #0B2341;
    --color-secondary-blue: #147FC1;
    --color-accent-cyan: #18C8F8;
    --color-highlight-glow: #64E8FF;
    --color-bg-dark: #06131F;
    --color-bg-surface: #040C14;
    --color-text-main: #FFFFFF;
    --color-text-muted: #B6D5E8;
    --color-status-success: #00D084;
    --color-status-danger: #FF4D4D;
    --font-family-ar: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-en: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/*========================================================================
   2. GLOBAL RESETS & LAYER STACKING FOR KINETIC CANVAS
==========================================================================*/

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: #06131F !important;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    color: var(--color-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Directionality & Fonts */
[lang="ar"] {
    direction: rtl;
}

[lang="en"] {
    direction: ltr;
}

body[dir="rtl"], [lang="ar"] {
    font-family: var(--font-family-ar) !important;
}

body[dir="ltr"], [lang="en"] {
    font-family: var(--font-family-en) !important;
}

a {
    color: var(--color-accent-cyan);
    text-decoration: none;
    transition: color 0.3s ease;
}

    a:hover {
        color: var(--color-highlight-glow);
    }

/*========================================================================
   3. GLOBAL KINETIC CANVAS & TRANSPARENT SECTIONS WITH TOP FADE MASK
==========================================================================*/

.global-kinetic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

.page, main, .main-content, .main-body-content {
    position: relative;
    z-index: 2;
    background-color: transparent !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 🌟 طبقة التلاشي العلوية المسرعة بـ GPU - مع إضافة pointer-events: none لعدم حجب الأزرار */
.top-fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 998;
    pointer-events: none !important; /* السماح بعبور النقرات للأزرار الموجودة تحتها */
    background: linear-gradient( to bottom, #06131F 0px, #06131F 0px, rgba(6, 19, 31, 0.85) 100px, rgba(6, 19, 31, 0) 100% );
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

    .top-fade-overlay.is-scrolled {
        opacity: 1 !important;
    }

section[id], #hero, #about, #capabilities, #projects, #contact {
    scroll-margin-top: 65px !important;
}

[class*="-section"],
.hero-section,
.trusted-by-section,
.who-we-are-section,
.our-capabilities-section,
.target-sectors-section,
.metrics-impact-section,
.featured-projects-section,
.equipment-showcase-section,
.technology-alliances-section,
.main-footer {
    background-color: transparent !important;
    background-image: none !important;
    position: relative;
    z-index: 2;
}

.glass-glow-card,
.capability-card,
.sector-card,
.project-card,
.equipment-card,
.partner-card,
.metric-item,
.glass-card {
    background: rgba(11, 35, 65, 0.65) !important;
    border: 1px solid rgba(24, 200, 248, 0.28) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px;
}

/*========================================================================
   4. NEON ICONOGRAPHY & GLOWS & BUTTONS
==========================================================================*/

.neon-icon {
    font-size: 2.3rem;
    color: var(--color-accent-cyan);
    filter: drop-shadow(0 0 10px rgba(24, 200, 248, 0.8)) drop-shadow(0 0 25px rgba(24, 200, 248, 0.4));
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.neon-icon-glow {
    color: var(--color-highlight-glow);
    filter: drop-shadow(0 0 12px rgba(100, 232, 255, 0.9)) drop-shadow(0 0 30px rgba(100, 232, 255, 0.5));
}

.capability-card:hover .neon-icon,
.sector-card:hover .neon-icon,
.partner-card:hover .neon-icon {
    transform: scale(1.15) rotate(-3deg);
    filter: drop-shadow(0 0 18px rgba(24, 200, 248, 1)) drop-shadow(0 0 35px rgba(100, 232, 255, 0.7));
}

.btn-neon-primary, .btn-cyan-glow {
    background: rgba(24, 200, 248, 0.15);
    border: 1px solid var(--color-accent-cyan);
    color: var(--color-accent-cyan);
    padding: 0.6rem 1.4rem;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(24, 200, 248, 0.2);
    position: relative;
    z-index: 1005 !important;
    pointer-events: auto !important;
}

    .btn-neon-primary:hover, .btn-cyan-glow:hover {
        background: var(--color-accent-cyan);
        color: #06131F;
        box-shadow: 0 0 25px rgba(24, 200, 248, 0.8);
        transform: translateY(-2px);
    }

/*========================================================================
   5. STAGGERED SCROLL ENTRY ANIMATIONS
==========================================================================*/

@keyframes floatGlow {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.35;
    }

    50% {
        transform: translateY(-15px) scale(1.1);
        opacity: 0.6;
    }
}

.glow-backdrop {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, var(--color-accent-cyan) 0%, rgba(20, 127, 193, 0) 70%);
    filter: blur(85px);
    pointer-events: none;
    z-index: 1;
    animation: floatGlow 7s ease-in-out infinite;
}

.scroll-entry {
    opacity: 0;
    transform: translateY(60px) scale(0.92);
    filter: blur(8px);
    transition: opacity 1.2s cubic-bezier(0.05, 0.7, 0.1, 1.0), transform 1.2s cubic-bezier(0.05, 0.7, 0.1, 1.0), filter 1.2s cubic-bezier(0.05, 0.7, 0.1, 1.0);
    will-change: opacity, transform, filter;
}

    .scroll-entry.is-in-view {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        filter: blur(0) !important;
    }

/*========================================================================
   6. PWA BANNER & INSTALLATION STYLES (Z-INDEX PROTECTED)
==========================================================================*/

.pwa-banner-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border: 1px solid var(--color-accent-cyan);
    background: rgba(6, 19, 31, 0.95);
    border-radius: 12px;
    gap: 1rem;
    position: relative;
    z-index: 1000 !important; /* ضمان العرض والظهور فوق أي خلفية */
    pointer-events: auto !important;
}

.pwa-banner-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pwa-icon {
    font-size: 2rem;
    color: var(--color-accent-cyan);
}

.pwa-title {
    margin: 0;
    color: #fff;
    font-weight: 700;
}

.pwa-desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/*========================================================================
   7. ADMIN LAYOUT SHELL (SIDEBAR, TOPBAR & RESPONSIVE DRAWER)
==========================================================================*/

.admin-layout-wrapper {
    display: flex;
    min-height: 100vh;
    background: var(--color-bg-surface);
    position: relative;
    direction: rtl;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999;
}

.admin-sidebar {
    width: 280px;
    background: rgba(6, 19, 31, 0.95);
    border-left: 1px solid rgba(24, 200, 248, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 1rem;
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .admin-sidebar.collapsed {
        width: 80px;
    }

        .admin-sidebar.collapsed .brand-title,
        .admin-sidebar.collapsed .sidebar-nav .nav-item span,
        .admin-sidebar.collapsed .sidebar-footer span {
            display: none;
        }

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.15);
}

.brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.6));
}

.brand-title h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 700;
}

.brand-title span {
    font-size: 0.75rem;
    color: var(--color-accent-cyan);
}

.btn-close-mobile {
    display: none;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
}

    .nav-item:hover, .nav-item.active {
        background: rgba(24, 200, 248, 0.15);
        color: var(--color-accent-cyan);
        border: 1px solid rgba(24, 200, 248, 0.3);
        box-shadow: 0 0 15px rgba(24, 200, 248, 0.2);
    }

.nav-icon {
    font-size: 1.1rem;
}

.sidebar-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(24, 200, 248, 0.15);
}

.btn-share-site {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid var(--color-accent-cyan);
    color: var(--color-accent-cyan);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .btn-share-site:hover {
        background: var(--color-accent-cyan);
        color: #06131F;
        box-shadow: 0 0 15px rgba(24, 200, 248, 0.5);
    }

.admin-main-content {
    margin-right: 280px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: calc(100% - 280px);
    transition: margin-right 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-sidebar.collapsed + .admin-main-content {
    margin-right: 80px;
    width: calc(100% - 80px);
}

.admin-topbar {
    height: 70px;
    background: rgba(6, 19, 31, 0.85);
    border-bottom: 1px solid rgba(24, 200, 248, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 900;
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.btn-toggle-sidebar {
    background: transparent;
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .btn-toggle-sidebar:hover {
        background: rgba(24, 200, 248, 0.2);
        color: var(--color-accent-cyan);
    }

.topbar-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-status-success);
}

.status-indicator {
    width: 8px;
    height: 8px;
    background: var(--color-status-success);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-status-success);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #ffffff;
}

.neon-icon-sm {
    color: var(--color-accent-cyan);
}

.btn-logout {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.3);
    color: var(--color-status-danger);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .btn-logout:hover {
        background: var(--color-status-danger);
        color: #ffffff;
        box-shadow: 0 0 12px rgba(255, 77, 77, 0.5);
    }

.admin-page-body {
    padding: 2rem;
    flex: 1;
}

/*========================================================================
   8. CYBER TABLES AND CARDS RESPONSIVE STYLING
==========================================================================*/

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.cyber-table {
    width: 100%;
    border-collapse: collapse;
    color: #ffffff;
    text-align: right;
}

    .cyber-table th {
        padding: 1rem;
        background: rgba(6, 19, 31, 0.9);
        color: var(--color-accent-cyan);
        border-bottom: 2px solid rgba(24, 200, 248, 0.3);
        white-space: nowrap;
    }

    .cyber-table td {
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

.employee-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.emp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent-cyan);
}

.emp-name-ar {
    font-weight: 700;
}

.emp-name-en {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.badge-active {
    background: rgba(0, 208, 132, 0.15);
    color: #00D084;
    border: 1px solid #00D084;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

.badge-inactive {
    background: rgba(255, 77, 77, 0.15);
    color: #FF4D4D;
    border: 1px solid #FF4D4D;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

.action-buttons {
    display: flex;
    gap: 0.4rem;
}

.btn-icon {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    border: 1px solid rgba(24, 200, 248, 0.3);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon.delete {
        border-color: rgba(255, 77, 77, 0.4);
        color: #FF4D4D;
    }

/*========================================================================
   9. MOBILE & TABLET RESPONSIVE OVERRIDES
==========================================================================*/

@media (max-width: 992px) {
    .admin-main-content {
        margin-right: 0 !important;
        width: 100% !important;
    }

    .admin-sidebar {
        transform: translateX(100%);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
    }

        .admin-sidebar.mobile-open {
            transform: translateX(0);
        }

    .btn-close-mobile {
        display: block;
    }

    .topbar-status span {
        display: none;
    }
}

@media (max-width: 768px) {
    .admin-page-body {
        padding: 0.8rem;
    }

    .admin-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .btn-cyan-glow {
        width: 100%;
        justify-content: center;
    }

    .cyber-table, .cyber-table thead, .cyber-table tbody, .cyber-table th, .cyber-table td, .cyber-table tr {
        display: block;
    }

        .cyber-table thead {
            display: none;
        }

        .cyber-table tbody tr {
            margin-bottom: 1rem;
            background: rgba(11, 35, 65, 0.8);
            border: 1px solid rgba(24, 200, 248, 0.3);
            border-radius: 12px;
            padding: 0.8rem;
        }

        .cyber-table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

            .cyber-table td:last-child {
                border-bottom: none;
                justify-content: flex-end;
            }

    .badge-modal-large {
        width: 98% !important;
        padding: 0.8rem !important;
    }

    .printable-badge-card {
        width: 100% !important;
        max-width: 310px;
        height: auto !important;
        min-height: 460px;
    }
}

/* ==========================================================================
   ELITE TECH PRODUCTIONS - MASTER DESIGN SYSTEM & APP STYLES
   STRICT NO-BOOTSTRAP RULE | PURE CSS TOKENS | NEON GLASSMORPHISM
   ========================================================================== */

/*========================================================================
  FORCING BROWSER BRAND COLORS, SCROLLBAR & SELECTION
==========================================================================*/

/* إلزام المتصفح بنمط الألوان الداكن الثابت */
html {
    color-scheme: dark !important;
    scrollbar-color: var(--color-accent-cyan, #18C8F8) #06131F;
    scrollbar-width: thin;
}

/* تخصيص شكل ولون شريط التمرير (Scrollbar) بـ Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #06131F !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(24, 200, 248, 0.35) !important;
    border-radius: 4px;
    border: 1px solid rgba(24, 200, 248, 0.5);
    box-shadow: 0 0 10px rgba(24, 200, 248, 0.4);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-accent-cyan, #18C8F8) !important;
        box-shadow: 0 0 15px var(--color-accent-cyan);
    }

/* تخصيص لون تظليل النصوص المحددة */
::selection {
    background: rgba(24, 200, 248, 0.3) !important;
    color: #64E8FF !important;
}

/*========================================================================
  1. IMPORTS & LUXURY TYPOGRAPHY & CSS VARIABLES TOKENS
==========================================================================*/

:root {
    --color-primary-navy: #0B2341;
    --color-secondary-blue: #147FC1;
    --color-accent-cyan: #18C8F8;
    --color-highlight-glow: #64E8FF;
    --color-bg-dark: #06131F;
    --color-bg-surface: #040C14;
    --color-text-main: #FFFFFF;
    --color-text-muted: #B6D5E8;
    --color-status-success: #00D084;
    --color-status-danger: #FF4D4D;
    --font-family-ar: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-en: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/*========================================================================
  2. GLOBAL RESETS & LAYER STACKING FOR KINETIC CANVAS
==========================================================================*/

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: #06131F !important;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    color: var(--color-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Directionality & Fonts */
[lang="ar"] {
    direction: rtl;
}

[lang="en"] {
    direction: ltr;
}

body[dir="rtl"], [lang="ar"] {
    font-family: var(--font-family-ar) !important;
}

body[dir="ltr"], [lang="en"] {
    font-family: var(--font-family-en) !important;
}

a {
    color: var(--color-accent-cyan);
    text-decoration: none;
    transition: color 0.3s ease;
}

    a:hover {
        color: var(--color-highlight-glow);
    }

/*========================================================================
  3. GLOBAL KINETIC CANVAS & TRANSPARENT SECTIONS WITH TOP FADE MASK
==========================================================================*/

.global-kinetic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

.page, main, .main-content, .main-body-content {
    position: relative;
    z-index: 2;
    background-color: transparent !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 🌟 طبقة التلاشي العلوية المسرعة بـ GPU - مع إضافة pointer-events: none لعدم حجب الأزرار */
.top-fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 998;
    pointer-events: none !important;
    background: linear-gradient( to bottom, #06131F 0px, #06131F 0px, rgba(6, 19, 31, 0.85) 100px, rgba(6, 19, 31, 0) 100% );
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

    .top-fade-overlay.is-scrolled {
        opacity: 1 !important;
    }

section[id], #hero, #about, #capabilities, #projects, #contact {
    scroll-margin-top: 65px !important;
}

[class*="-section"],
.hero-section,
.trusted-by-section,
.who-we-are-section,
.our-capabilities-section,
.target-sectors-section,
.metrics-impact-section,
.featured-projects-section,
.equipment-showcase-section,
.technology-alliances-section,
.main-footer {
    background-color: transparent !important;
    background: transparent !important;
    position: relative;
    z-index: 2;
}

/* 🌟 تحسين ظهور الأقسام التلقائي عند بداية التحميل */
.scroll-entry:first-child {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/*========================================================================
  4. LUXURY BUTTONS & NEON GLOWS
==========================================================================*/

.btn-primary-cyber {
    background: linear-gradient(135deg, var(--color-accent-cyan) 0%, var(--color-secondary-blue) 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(24, 200, 248, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.92rem;
}

    .btn-primary-cyber:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 25px rgba(24, 200, 248, 0.65);
        color: #FFFFFF !important;
    }

    .btn-primary-cyber.btn-green {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%);
        box-shadow: 0 0 15px rgba(0, 208, 132, 0.35);
    }

        .btn-primary-cyber.btn-green:hover {
            box-shadow: 0 0 25px rgba(0, 208, 132, 0.65);
        }

.btn-secondary-cyber {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: var(--color-text-main) !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.65rem 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-size: 0.92rem;
}

    .btn-secondary-cyber:hover {
        background: rgba(24, 200, 248, 0.15);
        border-color: var(--color-accent-cyan);
        color: var(--color-highlight-glow) !important;
    }

/*========================================================================
  5. GLOBAL GLASSMORPHIC CARDS & PANELS
==========================================================================*/

.glass-panel-cyber {
    background: rgba(11, 35, 65, 0.45);
    border: 1px solid rgba(24, 200, 248, 0.18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.badge-pill-cyber {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

    .badge-pill-cyber.active {
        background: rgba(0, 208, 132, 0.15);
        border: 1px solid #00D084;
        color: #00FF9D;
        box-shadow: 0 0 10px rgba(0, 208, 132, 0.25);
    }

    .badge-pill-cyber.inactive {
        background: rgba(255, 77, 77, 0.15);
        border: 1px solid #FF4D4D;
        color: #FF5E36;
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.25);
    }

/*========================================================================
  6. ADMIN DASHBOARD GLOBAL LAYOUT & CYBER TABLES
==========================================================================*/

.admin-page-frame {
    width: 100%;
    margin-top: calc(70px + 1rem);
    padding: 0 1rem 2rem 1rem;
    box-sizing: border-box;
    color: #FFFFFF;
    direction: rtl;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px - 1rem);
}

.admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
    padding-bottom: 0.8rem;
}

.header-title-block h2 {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    color: #FFFFFF;
    margin: 0 0 0.2rem 0;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.dashboard-inner-card {
    background: rgba(11, 35, 65, 0.45);
    border: 1px solid rgba(24, 200, 248, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.filter-action-bar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.search-cyber-wrapper {
    position: relative;
}

    .search-cyber-wrapper input {
        width: 100%;
        background: rgba(4, 12, 20, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        padding: 0.55rem 2.2rem 0.55rem 0.75rem;
        color: #FFFFFF;
        font-size: 0.84rem;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.2s;
        min-height: 40px;
    }

        .search-cyber-wrapper input:focus {
            border-color: #18C8F8;
        }

    .search-cyber-wrapper i {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        color: #18C8F8;
        font-size: 0.82rem;
    }

.select-cyber-dropdown {
    background: rgba(4, 12, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.84rem;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 40px;
}

.table-scroll-container {
    flex: 1;
    overflow-x: auto;
}

.cyber-admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 0.86rem;
}

    .cyber-admin-table th {
        color: #18C8F8;
        padding: 0.8rem 0.65rem;
        border-bottom: 2px solid rgba(24, 200, 248, 0.25);
        font-weight: 700;
        white-space: nowrap;
    }

    .cyber-admin-table td {
        padding: 0.75rem 0.65rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

.action-buttons {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* ==========================================================================
   10. UNIVERSAL MASTER MODALS SYSTEM (FULLSCREEN CYBER GLASSMORPHISM)
   - توحيد طبقات الظهور (Z-Index: 2147483647) لكافة نوافذ الموقع ولوحة التحكم
   - قفل اللمس والسحب ومنع تسريب السكرول على الخلفية (Overscroll Containment)
   - تغطية تامة لكافة مكونات الصفحات (الأزرار العائمة، الهيدر، زر القائمة، محول اللغة)
   - دعم التجاوب المطلق مع كافة مقاسات الشاشات والهواتف الذكية (iOS Safari Safe Insets)
   ========================================================================== */

/* 🌟 10.1 خلفيات التعتيم الشاملة لجميع المودالات بدون استثناء */
.modal-backdrop-cyber,
.modal-backdrop,
.modal-overlay,
.crop-modal-backdrop,
.prm-modal-backdrop,
.reels-modal-overlay,
.edm-modal-backdrop,
.edm-modal-overlay,
.cdm-modal-overlay,
.cfm-modal-overlay,
.efm-modal-overlay,
.ep-modal-overlay,
.delete-backdrop,
.timeline-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: env(safe-area-inset-top, 12px) env(safe-area-inset-right, 12px) env(safe-area-inset-bottom, 12px) env(safe-area-inset-left, 12px) !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    user-select: none;
    -webkit-user-select: none;
}

/* 🌟 10.2 بطاقات المودال الرئيسية الشاملة */
.modal-card-cyber,
.modal-card,
.form-modal-container,
.crop-modal-container,
.glass-modal.crop-modal-container,
.reels-modal-container,
.equipment-details-modal,
.prm-modal-card,
.edm-modal-card,
.edm-delete-card,
.cdm-delete-alert-card,
.cfm-modal-card,
.efm-modal-card,
.ep-modal-card,
.delete-confirm-card,
.badge-modal-card,
.timeline-modal-card,
.timeline-scrubber-card,
.category-modal-card,
.equipment-form-card,
.equipment-preview-card {
    position: relative !important;
    width: min(720px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(24, 200, 248, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
    z-index: 2147483647 !important;
}

    /* أحجام مخصصة للمودالات العريضة والملمومة */
    .badge-modal-card,
    .prm-modal-card,
    .reels-modal-container,
    .timeline-modal-card,
    .timeline-scrubber-card,
    .glass-modal.crop-modal-container.is-wide {
        width: min(920px, calc(100vw - 16px)) !important;
    }

    .category-modal-card,
    .delete-confirm-card,
    .edm-delete-card,
    .cdm-delete-alert-card,
    .glass-modal.crop-modal-container.is-compact,
    .cfm-modal-card {
        width: min(480px, calc(100vw - 20px)) !important;
    }

.equipment-preview-card,
.ep-modal-card,
.equipment-details-modal {
    width: min(560px, calc(100vw - 20px)) !important;
}

/* حاوية النماذج المرنة */
.modal-form-flex {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 🌟 10.3 رؤوس المودالات الثابتة */
.modal-header-cyber,
.modal-header,
.ep-modal-header,
.cfm-modal-header,
.efm-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2) !important;
    padding: 1.1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    flex-shrink: 0 !important;
}

    .modal-header-cyber h3,
    .modal-header h3,
    .ep-modal-header h3,
    .cfm-modal-header h3,
    .efm-card-header h3,
    .modal-title-group h3 {
        margin: 0 !important;
        font-size: 1.15rem !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

.neon-accent-icon,
.neon-icon-sm,
.cfm-neon-icon,
.efm-neon-icon {
    color: #18C8F8 !important;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55) !important;
}

.btn-close-modal,
.btn-close-crop,
.ep-close-btn,
.cfm-close-dismiss-btn,
.efm-close-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .btn-close-modal:hover,
    .btn-close-crop:hover,
    .ep-close-btn:hover,
    .cfm-close-dismiss-btn:hover,
    .efm-close-btn:hover {
        background: #FF4D4D !important;
        color: #FFFFFF !important;
        border-color: #FF4D4D !important;
    }

/* 🌟 10.4 أجسام المودالات القابلة للتمرير السلس */
.modal-body-cyber,
.modal-body-scroll,
.modal-body-scrollable,
.badge-modal-body,
.ep-modal-body,
.prm-modal-body,
.edm-modal-body,
.cfm-modal-body,
.efm-card-body-scroll,
.crop-modal-container .modal-body,
.timeline-modal-body {
    padding: 1.3rem 1.5rem !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;
}

    .modal-body-cyber::-webkit-scrollbar,
    .modal-body-scroll::-webkit-scrollbar,
    .modal-body-scrollable::-webkit-scrollbar,
    .badge-modal-body::-webkit-scrollbar,
    .ep-modal-body::-webkit-scrollbar {
        width: 4px;
    }

    .modal-body-cyber::-webkit-scrollbar-thumb,
    .modal-body-scroll::-webkit-scrollbar-thumb,
    .modal-body-scrollable::-webkit-scrollbar-thumb,
    .badge-modal-body::-webkit-scrollbar-thumb,
    .ep-modal-body::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.35);
        border-radius: 4px;
    }

/* 🌟 10.5 شبكات الحقول وعناصر الإدخال */
.form-row-2col,
.form-grid-2,
.efm-form-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.1rem !important;
    width: 100% !important;
}

.form-group,
.cfm-form-cyber-group,
.efm-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
}

    .form-group.full-width {
        grid-column: 1 / -1 !important;
    }

    .input-label,
    .form-group label,
    .cfm-form-cyber-group label,
    .efm-form-group label {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        font-size: 0.84rem !important;
        color: #B6D5E8 !important;
        margin-bottom: 0.2rem !important;
        font-weight: 700 !important;
    }

.req-star,
.cfm-req-star,
.efm-req-star {
    color: #FF4D4D !important;
    font-weight: 900 !important;
}

.form-control-cyber,
.cyber-input,
.cfm-cyber-form-control,
.efm-form-control {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.28) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

    .form-control-cyber:focus,
    .cyber-input:focus,
    .cfm-cyber-form-control:focus,
    .efm-form-control:focus {
        border-color: #18C8F8 !important;
        background: rgba(6, 19, 31, 0.98) !important;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    .form-control-cyber::placeholder,
    .cyber-input::placeholder,
    .efm-form-control::placeholder {
        color: rgba(182, 213, 232, 0.45) !important;
        font-size: 0.84rem !important;
    }

    .form-control-cyber.textarea,
    textarea.form-control-cyber,
    textarea.cyber-input,
    textarea.efm-form-control {
        min-height: 80px !important;
        line-height: 1.5 !important;
        resize: vertical !important;
        padding: 0.75rem 1rem !important;
    }

.val-msg {
    color: #FF5E36 !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

/* بطاقات الاختيار والتفعيل */
.form-row-checkbox-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 0.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.custom-checkbox-card {
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.25) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

    .custom-checkbox-card:hover {
        border-color: #18C8F8 !important;
        background: rgba(11, 35, 65, 0.6) !important;
    }

    .custom-checkbox-card.is-checked {
        border-color: #00D084 !important;
        background: rgba(0, 208, 132, 0.08) !important;
        box-shadow: 0 0 15px rgba(0, 208, 132, 0.15) !important;
    }

.cyber-checkbox-hidden {
    display: none !important;
}

.checkbox-card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.cb-title {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
}

.cb-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

    .cb-status-badge.active {
        color: #00FF9D !important;
    }

    .cb-status-badge.inactive {
        color: #FF5E36 !important;
    }

.cb-toggle-switch {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.is-checked .cb-toggle-switch {
    background: #00D084 !important;
    border-color: #00D084 !important;
    box-shadow: 0 0 10px #00D084 !important;
}

    .is-checked .cb-toggle-switch::after {
        content: '✓';
        color: #040C14;
        font-size: 0.75rem;
        font-weight: 900;
    }

/* 🌟 10.6 تذييل المودالات الثابتة وأزرار الحفظ والإغلاق */
.modal-footer-cyber,
.modal-footer,
.ep-modal-footer,
.cfm-modal-footer,
.efm-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel,
.ep-btn-dismiss,
.cfm-btn-action-dismiss {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
}

    .btn-cancel:hover,
    .ep-btn-dismiss:hover,
    .cfm-btn-action-dismiss:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

.btn-primary-cyber,
.cfm-btn-action-save,
.btn-cyan-glow {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

    .btn-primary-cyber:hover,
    .cfm-btn-action-save:hover,
    .btn-cyan-glow:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55) !important;
    }

    .btn-primary-cyber.btn-green {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%) !important;
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3) !important;
    }

        .btn-primary-cyber.btn-green:hover {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55) !important;
        }

/* 🌟 10.7 تحرير الحاويات والخلفيات لمنع حجب المودالات وقفل سكرول الصفحة */
body.modal-open,
body.admin-modal-open,
body.reels-open,
body.equipment-modal-open,
body.crop-open {
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}

    body.modal-open .page,
    body.modal-open main,
    body.modal-open .main-content,
    body.modal-open .scroll-entry,
    body.admin-modal-open .page,
    body.admin-modal-open main,
    body.admin-modal-open .admin-page-frame,
    body.reels-open .page,
    body.reels-open main,
    body.reels-open .scroll-entry,
    body.equipment-modal-open .page,
    body.equipment-modal-open main,
    body.equipment-modal-open .scroll-entry {
        position: static !important;
        z-index: auto !important;
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        will-change: auto !important;
    }

/* 🌟 10.8 تجاوب المودالات مع شاشات الجوال */
@media (max-width: 768px) {
    .modal-backdrop-cyber,
    .modal-backdrop,
    .modal-overlay,
    .crop-modal-backdrop,
    .prm-modal-backdrop,
    .reels-modal-overlay,
    .edm-modal-backdrop,
    .edm-modal-overlay,
    .cdm-modal-overlay,
    .cfm-modal-overlay,
    .efm-modal-overlay,
    .ep-modal-overlay {
        padding: 8px !important;
    }

    .modal-card-cyber,
    .modal-card,
    .form-modal-container,
    .crop-modal-container,
    .glass-modal.crop-modal-container,
    .reels-modal-container,
    .equipment-details-modal,
    .prm-modal-card,
    .edm-modal-card,
    .edm-delete-card,
    .cdm-delete-alert-card,
    .cfm-modal-card,
    .efm-modal-card,
    .ep-modal-card,
    .delete-confirm-card,
    .badge-modal-card,
    .timeline-modal-card,
    .timeline-scrubber-card {
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .form-row-2col,
    .form-grid-2,
    .efm-form-row-2 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .modal-body-cyber,
    .modal-body-scroll,
    .modal-body-scrollable,
    .badge-modal-body,
    .ep-modal-body,
    .cfm-modal-body,
    .efm-card-body-scroll {
        padding: 1rem 0.85rem !important;
    }

    .modal-footer-cyber,
    .modal-footer,
    .ep-modal-footer,
    .cfm-modal-footer,
    .efm-modal-footer {
        padding: 0.75rem 0.85rem !important;
        flex-direction: column-reverse !important;
    }

        .modal-footer-cyber button,
        .modal-footer button,
        .ep-modal-footer button,
        .cfm-modal-footer button,
        .efm-modal-footer button {
            width: 100% !important;
            justify-content: center !important;
        }
}

/* ==========================================================================
   🌟 UNIVERSAL CYBER FILE UPLOAD & PICKER SYSTEM (لوحة التحكم وجميع الواجهات)
   التنسيق الشامل والموحد لجميع أزرار وحاويات اختيار ورفع الملفات
========================================================================== */

/* 1. إخفاء حقول الإدخال الأصلية عند استخدام الأزرار المخصصة */
input[type="file"].hidden-file-input,
input[type="file"][hidden],
.hidden-file-input {
    display: none !important;
}

/* 2. التنسيق الجذري لحقول الملفات الأصلية الافتراضية في حال ظهورها مباشرة */
input[type="file"] {
    display: flex;
    align-items: center;
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1.5px dashed rgba(24, 200, 248, 0.35) !important;
    color: #B6D5E8 !important;
    padding: 0.5rem 0.8rem !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    direction: rtl !important;
}

    input[type="file"]:hover {
        border-color: #18C8F8 !important;
        background: rgba(6, 19, 31, 0.95) !important;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.35) !important;
    }

    /* تخصيص زر "اختيار ملف" المدمج في المتصفحات الحديثة */
    input[type="file"]::file-selector-button,
    input[type="file"]::-webkit-file-upload-button {
        background: linear-gradient(135deg, rgba(24, 200, 248, 0.18) 0%, rgba(0, 114, 255, 0.22) 100%) !important;
        border: 1.5px solid #18C8F8 !important;
        color: #FFFFFF !important;
        padding: 0.55rem 1.2rem !important;
        border-radius: 8px !important;
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        font-family: inherit !important;
        cursor: pointer !important;
        margin-left: 1rem !important;
        margin-right: 0 !important;
        transition: all 0.25s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 0 12px rgba(24, 200, 248, 0.25) !important;
    }

        input[type="file"]::file-selector-button:hover,
        input[type="file"]::-webkit-file-upload-button:hover {
            background: #18C8F8 !important;
            color: #06131F !important;
            box-shadow: 0 0 18px rgba(24, 200, 248, 0.6) !important;
            border-color: #18C8F8 !important;
            transform: translateY(-1px) !important;
        }

/* 3. الزر السيبراني الموحد لرفع واختيار الملفات (Universal Cyber Upload Button) */
.btn-upload-cyber,
.btn-upload-label,
.btn-upload-banner,
.btn-cyber-upload,
.efm-btn-crop-trigger {
    position: relative !important;
    background: linear-gradient(135deg, rgba(24, 200, 248, 0.15) 0%, rgba(0, 114, 255, 0.18) 100%) !important;
    border: 1.5px solid #18C8F8 !important;
    color: #FFFFFF !important;
    padding: 0.65rem 1.25rem !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    user-select: none !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.25) !important;
    text-decoration: none !important;
}

    .btn-upload-cyber i,
    .btn-upload-label i,
    .btn-upload-banner i,
    .btn-cyber-upload i,
    .efm-btn-crop-trigger i {
        font-size: 0.95rem !important;
        color: #18C8F8 !important;
        transition: all 0.25s ease !important;
    }

    .btn-upload-cyber:hover,
    .btn-upload-label:hover,
    .btn-upload-banner:hover,
    .btn-cyber-upload:hover,
    .efm-btn-crop-trigger:hover {
        background: #18C8F8 !important;
        color: #06131F !important;
        border-color: #18C8F8 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.6) !important;
    }

        .btn-upload-cyber:hover i,
        .btn-upload-label:hover i,
        .btn-upload-banner:hover i,
        .btn-cyber-upload:hover i,
        .efm-btn-crop-trigger:hover i {
            color: #06131F !important;
            transform: scale(1.15) !important;
        }

    .btn-upload-cyber:active,
    .btn-upload-label:active,
    .btn-upload-banner:active,
    .btn-cyber-upload:active,
    .efm-btn-crop-trigger:active {
        transform: translateY(0) scale(0.98) !important;
    }

/* 4. حاويات ومنصات رفع الصور والوسائط (Upload Dropzones & Tiles) */
.photo-upload-container,
.efm-img-upload-tile,
.upload-banner-container,
.cyber-upload-dropzone {
    background: rgba(4, 12, 20, 0.75) !important;
    border: 1.5px dashed rgba(24, 200, 248, 0.35) !important;
    border-radius: 14px !important;
    padding: 1.1rem !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

    .photo-upload-container:hover,
    .efm-img-upload-tile:hover,
    .upload-banner-container:hover,
    .cyber-upload-dropzone:hover {
        border-color: #18C8F8 !important;
        background: rgba(6, 19, 31, 0.92) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(24, 200, 248, 0.25) !important;
    }

.upload-hint-text,
.upload-meta-info {
    color: rgba(182, 213, 232, 0.65) !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    line-height: 1.4 !important;
}

    .upload-hint-text i,
    .upload-meta-info i {
        color: #18C8F8 !important;
        font-size: 0.75rem !important;
    }

/* ==========================================================================
   FOUR CORE SERVICES GRID & WHY ELITE & PROCESS STYLES
   ========================================================================== */
.core-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
    margin-top: 2rem;
}

.service-card-glass {
    background: rgba(6, 19, 31, 0.88);
    border: 1.5px solid rgba(24, 200, 248, 0.28);
    border-radius: 20px;
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    backdrop-filter: blur(20px);
    transition: all 0.35s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

    .service-card-glass:hover {
        border-color: #18C8F8;
        transform: translateY(-6px);
        box-shadow: 0 18px 45px rgba(0,0,0,0.8), 0 0 25px rgba(24, 200, 248, 0.35);
    }

.card-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.service-icon-wrapper {
    width: 52px;
    height: 52px;
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid #18C8F8;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #18C8F8;
}

.service-num-badge {
    font-size: 1.2rem;
    font-weight: 900;
    color: rgba(24, 200, 248, 0.4);
    font-family: monospace;
}

.service-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.3rem 0;
}

.service-tagline {
    font-size: 0.88rem;
    font-weight: 700;
    color: #00FF9D;
    margin-bottom: 0.9rem;
    display: block;
}

.service-description {
    font-size: 0.92rem;
    color: #B6D5E8;
    line-height: 1.6;
    margin-bottom: 1.4rem;
    flex-grow: 1;
}

.service-bullets-list {
    list-style: none;
    padding: 1rem 0;
    margin: 0 0 1.5rem 0;
    border-top: 1px solid rgba(24, 200, 248, 0.15);
    border-bottom: 1px solid rgba(24, 200, 248, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

    .service-bullets-list li {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.85rem;
        color: #FFFFFF;
    }

        .service-bullets-list li i {
            color: #18C8F8;
            font-size: 0.8rem;
        }

.btn-service-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #18C8F8;
    font-weight: 700;
    font-size: 0.92rem;
    transition: all 0.25s ease;
}

    .btn-service-cta:hover {
        color: #64E8FF;
        transform: translateX(-4px);
    }

/* Why Elite Grid */
.why-elite-section, .our-process-section {
    padding: 5rem 1rem;
}

.why-elite-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.pillar-card-glass, .step-card-glass {
    background: rgba(6, 19, 31, 0.75);
    border: 1px solid rgba(24, 200, 248, 0.2);
    border-radius: 16px;
    padding: 1.6rem;
    text-align: center;
    backdrop-filter: blur(14px);
    transition: all 0.3s ease;
    height: 100%;
}

    .pillar-card-glass:hover, .step-card-glass:hover {
        border-color: #18C8F8;
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(24, 200, 248, 0.2);
    }

.pillar-icon-box {
    font-size: 2rem;
    color: #18C8F8;
    margin-bottom: 0.8rem;
}

.pillar-card-glass h3, .step-card-glass h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.5rem 0;
}

.pillar-card-glass p, .step-card-glass p {
    font-size: 0.86rem;
    color: #B6D5E8;
    line-height: 1.55;
    margin: 0;
}

/* Process Track */
.process-steps-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.step-badge-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(24, 200, 248, 0.15);
    border: 1.5px solid #18C8F8;
    color: #18C8F8;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.8rem auto;
}

@media (max-width: 992px) {
    .core-services-grid {
        grid-template-columns: 1fr;
    }

    .why-elite-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-steps-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .why-elite-grid {
        grid-template-columns: 1fr;
    }

    .process-steps-track {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   REGIONAL PRESENCE & FINAL CTA STYLES
   ========================================================================== */
.regional-presence-section {
    padding: 5.5rem 1rem;
    background: transparent;
}

.regional-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-top: 2.5rem;
}

.region-card-glass {
    background: rgba(6, 19, 31, 0.85);
    border: 1.5px solid rgba(24, 200, 248, 0.25);
    border-radius: 20px;
    padding: 2.2rem 1.6rem;
    text-align: center;
    backdrop-filter: blur(18px);
    transition: all 0.35s ease;
    height: 100%;
}

    .region-card-glass:hover {
        border-color: #18C8F8;
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(24, 200, 248, 0.3);
    }

.region-flag-icon {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
}

.region-card-glass h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.4rem 0;
}

.region-hub-tag {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #00FF9D;
    background: rgba(0, 255, 157, 0.1);
    border: 1px solid rgba(0, 255, 157, 0.3);
    padding: 0.25rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.region-card-glass p {
    font-size: 0.9rem;
    color: #B6D5E8;
    line-height: 1.6;
    margin: 0;
}

/* Final Call To Action */
.final-cta-section {
    padding: 4rem 1rem 6rem 1rem;
}

.final-cta-card-glass {
    position: relative;
    background: linear-gradient(135deg, rgba(11, 35, 65, 0.9) 0%, rgba(6, 19, 31, 0.95) 100%);
    border: 2px solid rgba(24, 200, 248, 0.4);
    border-radius: 28px;
    padding: 3.5rem 2rem;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(24, 200, 248, 0.25);
}

.cta-pill-slogan {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #18C8F8;
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid #18C8F8;
    padding: 0.45rem 1.3rem;
    border-radius: 30px;
    margin-bottom: 1.2rem;
}

.cta-main-title {
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    color: #FFFFFF;
    margin: 0 0 1rem 0;
}

.cta-main-desc {
    font-size: 1.05rem;
    color: #B6D5E8;
    max-width: 760px;
    margin: 0 auto 2.2rem auto;
    line-height: 1.7;
}

.cta-buttons-cluster {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

@media (max-width: 992px) {
    .regional-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons-cluster {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-glow, .btn-secondary-glow {
        width: 100%;
        justify-content: center;
    }
}