/*  
=============================================
🚗 PREMIUM CHAUFFEUR SERVICE — Brand Identity System
الهوية البصرية الاحترافية — خدمة السيارات مع السائق
Version: 3.0 BLACK EDITION - Pure Black System
تصميم عالمي راقي | World-Class Design
=============================================
*/

/*  
------------------------------------------------
🎯 BRAND PHILOSOPHY | فلسفة العلامة التجارية
------------------------------------------------
✨ الفخامة مع البساطة — Luxury meets Simplicity
🌍 عالمية الطابع — International Appeal  
🛡️ الثقة والأمان — Trust & Safety
⚡ السرعة والاحترافية — Speed & Professionalism

الألوان تعكس:
- الذهبي → التميز والفخامة
- الأسود النقي → الأناقة والقوة والاحترافية
- الرمادي الداكن → العمق والتوازن
*/


/*  
================================================
🎨 COLOR PALETTE | لوحة الألوان الرسمية
PURE BLACK EDITION
================================================
*/

:root {
    /* ============================================
     🟡 GOLD ACCENT — الذهبي الفاخر
     الاستخدام: 8-12% من التصميم فقط
     للأزرار الرئيسية، التفاصيل المهمة، الأيقونات المميزة
  ============================================ */
    --gold-primary: #D4AF37; /* الذهبي الأساسي - Primary Gold */
    --gold-light: #E6C875; /* ذهبي فاتح - Light Gold */
    --gold-dark: #B8941F; /* ذهبي داكن - Dark Gold */
    --gold-glow: rgba(212, 175, 55, 0.25); /* توهج ذهبي - Gold Glow */
    /* ============================================
     ⚫ PURE BLACK SYSTEM — نظام الأسود النقي
     الاستخدام: 60-70% من التصميم
     للخلفيات، العناصر الرئيسية، التباين القوي
  ============================================ */
    --black-primary: #000000; /* أسود نقي - Pure Black */
    --black-deep: #0a0a0a; /* أسود عميق - Deep Black */
    --black-light: #1a1a1a; /* أسود فاتح - Light Black */
    --black-elevated: #2d2d2d; /* للعناصر المرتفعة - Elevated Elements */
    /* ============================================
     ⚫ DARK BACKGROUNDS — الخلفيات الداكنة
     الاستخدام: 50-60% من التصميم
     للخلفيات الرئيسية والثانوية
  ============================================ */
    --dark-primary: #000000; /* خلفية أساسية - Primary Background (Pure Black) */
    --dark-secondary: #0a0a0a; /* خلفية ثانوية - Secondary Background */
    --dark-elevated: #1a1a1a; /* للبطاقات المرتفعة - Elevated Cards */
    --dark-panel: #0f0f0f; /* للوحات والـ Panels */
    /* ============================================
     ⚪ TEXT COLORS — ألوان النصوص
     للقراءة المريحة والتباين العالي
  ============================================ */
    --text-primary: #F9FAFB; /* نص أساسي - Primary Text */
    --text-secondary: #D1D5DB; /* نص ثانوي - Secondary Text */
    --text-muted: #9CA3AF; /* نص خفيف - Muted Text */
    --text-inverse: #000000; /* نص معكوس (على خلفية فاتحة) - Pure Black */
    /* ============================================
     🎨 ACCENT COLORS — ألوان مساعدة
     للحالات الخاصة (نجاح، تحذير، خطأ)
  ============================================ */
    --success: #10B981; /* نجاح - Success */
    --warning: #F59E0B; /* تحذير - Warning */
    --danger: #EF4444; /* خطأ - Danger */
    --info: #D4AF37; /* معلومات - Info (Gold) */
    /* ============================================
     🌫️ OVERLAYS & BORDERS — الطبقات والحدود
  ============================================ */
    --overlay-light: rgba(255, 255, 255, 0.05);
    --overlay-medium: rgba(255, 255, 255, 0.1);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-darker: rgba(0, 0, 0, 0.8);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-gold: rgba(212, 175, 55, 0.3);
    /* ============================================
     ✨ GRADIENTS — التدرجات
  ============================================ */
    --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #E6C875 100%);
    --gradient-gold-soft: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(230, 200, 117, 0.1) 100%);
    --gradient-dark: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
    --gradient-black-smooth: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
    --gradient-black-elevated: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    --gradient-hero: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
    --gradient-overlay: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    /* ============================================
     🔆 SHADOWS — الظلال
  ============================================ */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.8);
    --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3);
    --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.2);
    --shadow-glow-strong: 0 0 40px rgba(212, 175, 55, 0.4);
}


/*  
================================================
📐 SPACING SYSTEM | نظام المسافات
================================================
*/

:root {
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    /* Container Sizes */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/*  
================================================
🔤 TYPOGRAPHY | نظام الطباعة
================================================
*/

/* 
استخدام خطوط احترافية للعربية والإنجليزية:
- Tajawal: خط عربي عصري واضح
- Inter: خط إنجليزي احترافي
*/

:root {
    /* Font Families */
    /*--font-arabic: 'Tajawal', 'Cairo', sans-serif;
    --font-english: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Tajawal', 'Inter', sans-serif*/;
    
    /* Font Families */
    --font-arabic: 'IBM Plex Sans Arabic', sans-serif;
    --font-english: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
    --text-6xl: 3.75rem; /* 60px */
    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
}


/*  
================================================
🎨 BASE STYLES | الأنماط الأساسية
================================================
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-arabic);
    background: var(--gradient-dark);
    color: var(--text-primary);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

    /* تبديل للغة الإنجليزية */
    body:lang(en),
    [lang="en"] {
        font-family: var(--font-english);
    }


/*  
================================================
🧩 COMPONENT LIBRARY | مكتبة المكونات
================================================
*/

/* ============================================
   📦 CARDS | البطاقات
============================================ */

.card {
    background: var(--dark-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: all var(--transition-base);
}

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

.card-premium {
    background: linear-gradient(135deg, var(--dark-elevated) 0%, var(--dark-panel) 100%);
    border: 1px solid var(--border-gold);
    position: relative;
    overflow: hidden;
}

    .card-premium::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-gold);
    }

.card-interactive {
    cursor: pointer;
    background: var(--dark-elevated);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-base);
}

    .card-interactive:hover {
        border-color: var(--gold-primary);
        box-shadow: var(--shadow-gold);
        transform: translateY(-2px);
        background: var(--black-light);
    }


/* ============================================
   🔘 BUTTONS | الأزرار
============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

/* زر ذهبي رئيسي - Primary Gold Button */
.btn-gold {
    background: var(--gradient-gold);
    color: var(--text-inverse);
    box-shadow: var(--shadow-gold);
}

    .btn-gold:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-glow-strong);
        filter: brightness(1.1);
    }

    .btn-gold:active {
        transform: translateY(0);
    }

/* زر أسود - Black Button */
.btn-black {
    background: var(--gradient-black-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

    .btn-black:hover {
        transform: translateY(-2px);
        border-color: var(--gold-primary);
        box-shadow: var(--shadow-gold);
    }

/* زر شفاف بحدود - Outline Button */
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}

    .btn-outline:hover {
        background: var(--overlay-light);
        border-color: var(--gold-primary);
        color: var(--gold-primary);
    }

/* زر شبحي - Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
}

    .btn-ghost:hover {
        background: var(--overlay-light);
        color: var(--text-primary);
    }

/* أحجام الأزرار */
.btn-sm {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--text-lg);
}


/* ============================================
   ✍️ TYPOGRAPHY COMPONENTS | مكونات النصوص
============================================ */

.heading-display {
    font-size: var(--text-6xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.heading-1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

.heading-2 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.heading-3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.heading-4 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

.text-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}


/* ============================================
   🎯 ICONS | الأيقونات
============================================ */

.icon {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.icon-gold {
    color: var(--gold-primary);
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

.icon-xl {
    width: 48px;
    height: 48px;
}


/* ============================================
   📝 FORMS | النماذج
============================================ */

.input {
    width: 100%;
    padding: var(--space-md);
    background: var(--dark-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: all var(--transition-base);
}

    .input:focus {
        outline: none;
        border-color: var(--gold-primary);
        box-shadow: 0 0 0 3px var(--gold-glow);
        background: var(--black-light);
    }

    .input::placeholder {
        color: var(--text-muted);
    }

.input-lg {
    padding: var(--space-lg);
    font-size: var(--text-lg);
}


/* ============================================
   🔔 BADGES | الشارات
============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--overlay-light);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.badge-gold {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold-primary);
    border: 1px solid var(--border-gold);
}

.badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-black {
    background: var(--black-light);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}


/* ============================================
   🚗 SERVICE CARD | بطاقة الخدمة
============================================ */

.service-card {
    background: var(--dark-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .service-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-gold);
        transform: scaleX(0);
        transition: transform var(--transition-base);
    }

    .service-card:hover::before {
        transform: scaleX(1);
    }

    .service-card:hover {
        border-color: var(--gold-primary);
        transform: translateY(-8px);
        box-shadow: var(--shadow-gold);
        background: var(--black-light);
    }

.service-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-gold-soft);
    border-radius: var(--radius-lg);
    color: var(--gold-primary);
}


/* ============================================
   📍 LOCATION CARD | بطاقة الموقع
============================================ */

.location-card {
    background: var(--dark-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

    .location-card:hover {
        background: var(--dark-elevated);
        border-color: var(--gold-primary);
        transform: translateX(5px);
    }

[dir="rtl"] .location-card:hover {
    transform: translateX(-5px);
}


/* ============================================
   💳 PRICING CARD | بطاقة الأسعار
============================================ */

.pricing-card {
    background: var(--dark-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    position: relative;
}

    .pricing-card.featured {
        border: 2px solid var(--gold-primary);
        background: linear-gradient(135deg, var(--dark-elevated) 0%, var(--dark-panel) 100%);
        box-shadow: var(--shadow-gold);
        transform: scale(1.05);
    }

        .pricing-card.featured::before {
            content: 'الأكثر طلباً';
            position: absolute;
            top: var(--space-lg);
            right: var(--space-lg);
            background: var(--gradient-gold);
            color: var(--text-inverse);
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            font-weight: var(--font-bold);
        }


/* ============================================
   ⭐ RATING STARS | نجوم التقييم
============================================ */

.rating {
    display: flex;
    gap: var(--space-xs);
}

.star {
    width: 20px;
    height: 20px;
    color: var(--gold-primary);
}


/* ============================================
   📱 NAVBAR | شريط التنقل
============================================ */

.navbar {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-lg) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ============================================
   🦶 FOOTER | التذييل
============================================ */

.footer {
    background: var(--dark-primary);
    border-top: 1px solid var(--border-subtle);
}


/*  
================================================
📱 RESPONSIVE DESIGN | التصميم المتجاوب
================================================
*/

@media (max-width: 768px) {
    :root {
        --text-6xl: 2.5rem;
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
    }

    .heading-display {
        font-size: var(--text-4xl);
    }

    .card {
        padding: var(--space-lg);
    }

    .service-card {
        padding: var(--space-xl);
    }
}


/*  
================================================
♿ ACCESSIBILITY | إمكانية الوصول
================================================
*/

/* Focus Visible للتنقل بالكيبورد */
*:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
}

/* تحسين التباين للقراءة */
.high-contrast {
    color: var(--text-primary);
    background: var(--dark-primary);
}


/*  
================================================
🎬 ANIMATIONS | الحركات والتأثيرات
================================================
*/

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

.slide-in {
    animation: slideInRight 0.6s ease-out;
}

.glow-animate {
    animation: glow 2s ease-in-out infinite;
}

/*  
=============================================
🌐 SATCO - Language Switcher & Mobile Menu
تنسيقات خاصة بمحول اللغة وزر القائمة
IDs خاصة لعدم التأثير على باقي الموقع
=============================================
*/

/* ============================================
   🌐 LANGUAGE SWITCHER
============================================ */

/* Container */
#satco-lang-switcher {
    position: relative;
}

/* الزر الرئيسي */
#satco-lang-menu-btn {
    background: var(--overlay-light);
    border: 1px solid var(--border-subtle);
    color: var(--gold-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition-base);
    min-width: 85px;
}

    #satco-lang-menu-btn:hover {
        background: var(--gold-primary);
        border-color: var(--gold-primary);
        color: var(--text-inverse);
        transform: translateY(-2px);
        box-shadow: var(--shadow-gold);
    }

    #satco-lang-menu-btn:focus {
        box-shadow: 0 0 0 3px var(--gold-glow);
        outline: none;
    }

    #satco-lang-menu-btn i {
        font-size: 1rem;
    }

    #satco-lang-menu-btn .lang-text {
        font-weight: 600;
        letter-spacing: 0.5px;
    }

/* Dropdown Menu */
#satco-lang-dropdown {
    background: var(--dark-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    box-shadow: var(--shadow-lg);
    min-width: 150px;
}

    /* Dropdown Items */
    #satco-lang-dropdown .dropdown-item {
        color: var(--text-secondary);
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        transition: all var(--transition-fast);
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border-left: 3px solid transparent;
    }

        #satco-lang-dropdown .dropdown-item:hover {
            background: var(--overlay-light);
            color: var(--gold-primary);
            border-left-color: var(--gold-primary);
            padding-left: 1.25rem;
        }

        #satco-lang-dropdown .dropdown-item.active {
            background: rgba(212, 175, 55, 0.1);
            color: var(--gold-primary);
            border-left-color: var(--gold-primary);
            font-weight: 600;
        }

    /* الأعلام */
    #satco-lang-dropdown .lang-flag {
        border-radius: var(--radius-xs);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    #satco-lang-dropdown .lang-name {
        font-size: 0.875rem;
    }

/* RTL Support */
[dir="rtl"] #satco-lang-dropdown .dropdown-item {
    text-align: right;
    border-left: none;
    border-right: 3px solid transparent;
}

    [dir="rtl"] #satco-lang-dropdown .dropdown-item:hover {
        border-right-color: var(--gold-primary);
        border-left-color: transparent;
        padding-right: 1.25rem;
        padding-left: 1rem;
    }

    [dir="rtl"] #satco-lang-dropdown .dropdown-item.active {
        border-right-color: var(--gold-primary);
        border-left-color: transparent;
    }

/* ============================================
   📱 MOBILE MENU BUTTON (Hamburger)
   زر القائمة المحمول
============================================ */

/* الزر نفسه */
.navbar-toggler {
    border: 2px solid var(--gold-primary) !important;
    background: rgba(212, 175, 55, 0.15) !important;
    padding: 0.6rem 0.8rem !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-base) !important;
}

    .navbar-toggler:hover {
        background: rgba(212, 175, 55, 0.3) !important;
        transform: scale(1.05);
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 4px var(--gold-glow) !important;
        outline: none !important;
    }

    .navbar-toggler:active {
        transform: scale(0.95);
    }

/* الخطوط الثلاثة (Icon) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23D4AF37' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.6em !important;
    height: 1.6em !important;
}

/* عند الفتح */
.navbar-toggler[aria-expanded="true"] {
    background: rgba(212, 175, 55, 0.4) !important;
    border-color: var(--gold-primary) !important;
}

/* Animation للخطوط */
.navbar-toggler-icon {
    transition: transform var(--transition-base);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    transform: rotate(90deg);
}

/* ============================================
   📱 RESPONSIVE - Mobile Adjustments
============================================ */

@media (max-width: 991px) {

    /* Language Switcher في الموبايل */
    #satco-lang-switcher {
        margin-top: 1rem;
        width: 100%;
    }

    #satco-lang-menu-btn {
        width: 100%;
        justify-content: center;
    }

    #satco-lang-dropdown {
        width: 100%;
    }

    /* زر القائمة أكبر شوية في الموبايل */
    .navbar-toggler {
        padding: 0.7rem 0.9rem !important;
    }

    .navbar-toggler-icon {
        width: 1.8em !important;
        height: 1.8em !important;
    }
}

@media (max-width: 576px) {

    /* Language Switcher أصغر في الشاشات الصغيرة جداً */
    #satco-lang-menu-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.813rem;
        min-width: 75px;
    }

        #satco-lang-menu-btn i {
            font-size: 0.875rem;
        }

    #satco-lang-dropdown .dropdown-item {
        padding: 0.65rem 0.85rem;
        font-size: 0.813rem;
    }

    #satco-lang-dropdown .lang-flag {
        width: 18px;
        height: auto;
    }
}

/* ============================================
   ✨ EXTRA ENHANCEMENTS
============================================ */

/* Loading state for language switch */
#satco-lang-dropdown form button[type="submit"]:active {
    opacity: 0.7;
    cursor: wait;
}

/* Smooth transition when switching */
body.transitioning {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* Focus visible للـ Accessibility */
#satco-lang-menu-btn:focus-visible,
.navbar-toggler:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 3px;
}

/* Disabled state (إذا احتجته مستقبلاً) */
#satco-lang-menu-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

    #satco-lang-menu-btn:disabled:hover {
        transform: none;
        box-shadow: none;
    }

/* ============================================
   🎨 ANIMATION EFFECTS
============================================ */

/* Fade in للـ dropdown */
#satco-lang-dropdown {
    animation: fadeInDown 0.3s ease;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse effect للزر عند التحويم */
#satco-lang-menu-btn:hover {
    animation: pulse-subtle 1s infinite;
}

@keyframes pulse-subtle {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
    }
}

/* ============================================
   🔍 PRINT STYLES (Optional)
============================================ */
@media print {
    #satco-lang-switcher,
    .navbar-toggler {
        display: none !important;
    }
}

/*  
================================================
📋 DESIGN GUIDELINES | إرشادات التصميم
BLACK EDITION
================================================

✅ DO:
1. استخدم الأسود النقي (#000000) للخلفيات الرئيسية
2. استخدم درجات الأسود (#0a0a0a, #1a1a1a) للعمق والطبقات
3. استخدم الذهبي للأزرار الرئيسية والعناصر المهمة فقط (8-12%)
4. اجعل التباين عالي جداً (أبيض نقي على أسود نقي)
5. استخدم الظلال الداكنة للعمق
6. اجعل التفاعلات سلسة مع الذهبي

❌ DON'T:
1. لا تستخدم الأزرق أبداً (تم استبداله بالأسود)
2. لا تجعل كل شيء ذهبي
3. لا تستخدم ألوان ساطعة مزعجة
4. لا تستخدم رمادي فاتح على أسود (ضعف التباين)
5. لا تنسى حالة الـ hover والـ focus
6. لا تخلط الأسود مع الأزرق

================================================
🎯 COLOR USAGE PERCENTAGES | نسب استخدام الألوان
BLACK EDITION
================================================
- الأسود النقي ودرجاته: 60-70%
- النصوص البيضاء/الرمادية: 20-25%
- الذهبي (Accent): 8-12%
- ألوان الحالات (Success, Warning, etc): 2-3%

================================================
🔥 PURE BLACK PHILOSOPHY
================================================
الأسود النقي (#000000) يعطي:
- ✨ فخامة لا مثيل لها
- 💎 أناقة عالمية
- 🎯 تركيز على المحتوى
- ⚡ تباين قوي مع الذهبي
- 🌟 مظهر احترافي راقي

================================================
*/