/* ====================================================================
   🎨 Neutral Elegance - Complete Brand Identity
   الهوية البصرية الكاملة لخدمة حجز السيارات الفاخرة
   ==================================================================== */

/* ============================================================
   🎯 1. المتغيرات الجذرية - CSS Custom Properties
   ============================================================ */
:root {
    /* 🎨 الألوان الأساسية */
    --color-primary: #1E293B; /* الرمادي الجرافيت */
    --color-primary-light: #334155;
    --color-primary-lighter: #475569;
    --color-primary-dark: #0F172A;
    --color-secondary: #F5F1E8; /* البيج الفاخر */
    --color-secondary-light: #FAFAF9;
    --color-secondary-dark: #E8E3DA;
    --color-accent: #B8860B; /* الذهبي الوردي */
    --color-accent-light: #DAA520;
    --color-accent-lighter: #F0D090;
    --color-accent-dark: #9A7209;
    --color-neutral: #94A3B8; /* الرمادي الدافئ */
    --color-neutral-light: #CBD5E1;
    --color-neutral-dark: #64748B;
    --color-success: #059669; /* الأخضر الزمردي */
    --color-success-light: #10B981;
    --color-success-dark: #047857;
    /* ⚠️ ألوان النظام */
    --color-danger: #DC2626;
    --color-danger-light: #EF4444;
    --color-danger-dark: #B91C1C;
    --color-warning: #F59E0B;
    --color-warning-light: #FBBF24;
    --color-warning-dark: #D97706;
    --color-info: #3B82F6;
    --color-info-light: #60A5FA;
    --color-info-dark: #2563EB;
    /* ✍️ ألوان النصوص */
    --text-on-dark: #F5F1E8;
    --text-on-dark-secondary: #94A3B8;
    --text-on-dark-muted: #64748B;
    --text-on-light: #1E293B;
    --text-on-light-secondary: #475569;
    --text-on-light-muted: #64748B;
    --text-on-accent: #FFFFFF;
    /* 🏗️ الخلفيات */
    --bg-primary: #1E293B;
    --bg-secondary: #F5F1E8;
    --bg-tertiary: #FAFAF9;
    --bg-dark: #0F172A;
    --bg-light: #FFFFFF;
    --bg-overlay-dark: rgba(30, 41, 59, 0.95);
    --bg-overlay-light: rgba(245, 241, 232, 0.95);
    --bg-glass-dark: rgba(30, 41, 59, 0.7);
    --bg-glass-light: rgba(245, 241, 232, 0.7);
    /* 🎭 التأثيرات */
    --shadow-sm: 0 1px 2px 0 rgba(30, 41, 59, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(30, 41, 59, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(30, 41, 59, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(30, 41, 59, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(30, 41, 59, 0.25);
    --shadow-accent: 0 10px 25px -5px rgba(184, 134, 11, 0.3);
    --shadow-success: 0 10px 25px -5px rgba(5, 150, 105, 0.3);
    /* 🌈 التدرجات */
    --gradient-primary: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    --gradient-accent: linear-gradient(135deg, #B8860B 0%, #DAA520 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10B981 100%);
    --gradient-warm: linear-gradient(135deg, #F5F1E8 0%, #E8E3DA 100%);
    --gradient-hero: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    /* 📏 القياسات */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    /* 🔤 الطباعة */
    --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-arabic: 'Tajawal', 'Cairo', 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    /* 🌀 الانتقالات */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    /* 📊 الطبقات */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ============================================================
   🎯 2. إعادة التعيين والتأسيس - Reset & Base Styles
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-family-arabic);
    background-color: var(--bg-secondary);
    color: var(--text-on-light);
    line-height: 1.6;
    direction: rtl;
    min-height: 100vh;
}

/* إضافة تأثير زجاجي شفاف */
.glass-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--bg-glass-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   🎯 3. المكونات الأساسية - Core Components
   ============================================================ */

/* 🎛️ 3.1 شريط التنقل - Navbar */
.navbar-brand {
    background: var(--gradient-primary);
    padding: var(--spacing-md) 0;
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

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

.navbar-logo {
    color: var(--color-accent);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

    .navbar-logo span {
        color: var(--text-on-dark);
    }

.navbar-menu {
    display: flex;
    gap: var(--spacing-xl);
    list-style: none;
}

.navbar-link {
    color: var(--text-on-dark);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

    .navbar-link:hover {
        color: var(--color-accent);
        background: rgba(184, 134, 11, 0.1);
    }

/* 🎛️ 3.2 الأزرار - Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family-arabic);
    font-size: var(--font-size-base);
    gap: var(--spacing-sm);
}

.btn-primary {
    background: var(--gradient-accent);
    color: var(--text-on-accent);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-accent);
    }

.btn-secondary {
    background: var(--color-primary);
    color: var(--text-on-dark);
}

    .btn-secondary:hover {
        background: var(--color-primary-light);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-success {
    background: var(--gradient-success);
    color: white;
}

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-success);
    }

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

    .btn-outline:hover {
        background: var(--color-primary);
        color: var(--text-on-dark);
    }

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

.btn-sm {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
}

/* 🎛️ 3.3 البطاقات - Cards */
.card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
    border: 1px solid var(--color-secondary-dark);
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-2xl);
    }

.card-header {
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.card-title {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.card-subtitle {
    color: var(--text-on-light-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.card-body {
    margin-bottom: var(--spacing-lg);
}

.card-footer {
    border-top: 1px solid var(--color-secondary-dark);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* 🎛️ 3.4 النماذج - Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
}

.form-control {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-neutral-light);
    border-radius: var(--radius-md);
    font-family: var(--font-family-arabic);
    font-size: var(--font-size-base);
    color: var(--color-primary);
    background: var(--bg-light);
    transition: all var(--transition-base);
}

    .form-control:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1);
    }

    .form-control::placeholder {
        color: var(--color-neutral);
    }

    /* ====================================================================
       🎯 إصلاح Select - نسخة نهائية بدون تكرار الأسهم
       ==================================================================== */

    .transfer-form-select,
    .form-select {
        /* الارتفاع والأبعاد */
        height: auto !important;
        min-height: 48px;
        line-height: 1.5 !important;
        /* النص */
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-normal) !important;
        color: var(--color-primary) !important;
        /* الحشو */
        padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-md) !important;
        /* الخلفية */
        background-color: var(--bg-light) !important;
        /* 🔥 إزالة السهم الافتراضي من المتصفح */
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        /* منع تكرار الصورة */
        background-repeat: no-repeat !important;
        /* منع قص النص */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        /* الحدود */
        border: 2px solid var(--color-neutral-light) !important;
        border-radius: var(--radius-md) !important;
        /* الانتقالات */
        transition: all var(--transition-base) !important;
    }

    /* للغة العربية - السهم على اليسار */
    html[dir="rtl"] .transfer-form-select,
    html[dir="rtl"] .form-select {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8860B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-position: left 1rem center !important;
        background-size: 1em !important;
        padding-right: var(--spacing-md) !important;
        padding-left: var(--spacing-2xl) !important;
        text-align: right !important;
        direction: rtl !important;
    }

    /* للغة الإنجليزية - السهم على اليمين */
    html[dir="ltr"] .transfer-form-select,
    html[dir="ltr"] .form-select {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8860B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-position: right 1rem center !important;
        background-size: 1em !important;
        padding-left: var(--spacing-md) !important;
        padding-right: var(--spacing-2xl) !important;
        text-align: left !important;
        direction: ltr !important;
    }

    /* خيارات Select */
    .transfer-form-select option,
    .form-select option {
        font-size: var(--font-size-base) !important;
        padding: var(--spacing-sm) var(--spacing-md) !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* حالة التركيز */
    .transfer-form-select:focus,
    .form-select:focus {
        border-color: var(--color-accent) !important;
        box-shadow: 0 0 0 0.25rem rgba(184, 134, 11, 0.25) !important;
        color: var(--color-primary-dark) !important;
        outline: none !important;
    }

    /* عند وجود قيمة مختارة */
    .transfer-form-select:not([value=""]),
    .form-select:not([value=""]) {
        color: var(--color-primary-dark) !important;
        font-weight: var(--font-weight-medium) !important;
    }

    /* الخيار الافتراضي */
    .transfer-form-select option[value=""],
    .form-select option[value=""] {
        color: var(--color-neutral) !important;
        font-style: italic !important;
    }

    /* الهواتف */
    @media (max-width: 768px) {
        .transfer-form-select,
        .form-select {
            font-size: 16px !important;
            padding: var(--spacing-md) !important;
            min-height: 44px !important;
        }
    }

    /* Bootstrap Override */
    select.form-control {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background: var(--bg-light) !important;
        border: 2px solid var(--color-neutral-light) !important;
        border-radius: var(--radius-md) !important;
        transition: all var(--transition-base) !important;
        background-repeat: no-repeat !important;
    }

    select.form-control:focus {
        border-color: var(--color-accent) !important;
        box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1) !important;
    }
/* 🎛️ 3.5 التنبيهات - Alerts */
.alert {
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    border-right: 4px solid;
}

.alert-success {
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.1), transparent);
    border-color: var(--color-success);
    color: var(--color-success-dark);
}

.alert-danger {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.1), transparent);
    border-color: var(--color-danger);
    color: var(--color-danger-dark);
}

.alert-warning {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), transparent);
    border-color: var(--color-warning);
    color: var(--color-warning-dark);
}

.alert-info {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
    border-color: var(--color-info);
    color: var(--color-info-dark);
}

/* 🎛️ 3.6 الحاويات والتخطيط - Containers & Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section {
    padding: var(--spacing-3xl) 0;
}

.section-title {
    text-align: center;
    color: var(--color-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xl);
    position: relative;
}

    .section-title::after {
        content: '';
        display: block;
        width: 80px;
        height: 3px;
        background: var(--gradient-accent);
        margin: var(--spacing-md) auto;
        border-radius: var(--radius-full);
    }

/* 🎛️ 3.7 التحميل - Loading */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-neutral-light);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 🎛️ 3.8 الأيقونات - Icons */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--gradient-accent);
    color: var(--text-on-accent);
    font-size: var(--font-size-lg);
}

/* 🎛️ 3.9 التقدم - Progress */
.progress-bar {
    height: 8px;
    background: var(--color-secondary-dark);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

/* ============================================================
   🎯 4. فئات المساعدة - Utility Classes
   ============================================================ */

/* 🎨 الألوان */
.text-accent {
    color: var(--color-accent);
}

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

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

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

.bg-accent {
    background: var(--gradient-accent);
}

.bg-success {
    background: var(--gradient-success);
}

.bg-danger {
    background: linear-gradient(135deg, var(--color-danger-light), var(--color-danger));
}

/* 📏 التباعد */
.mt-1 {
    margin-top: var(--spacing-sm);
}

.mt-2 {
    margin-top: var(--spacing-md);
}

.mt-3 {
    margin-top: var(--spacing-lg);
}

.mt-4 {
    margin-top: var(--spacing-xl);
}

.mt-5 {
    margin-top: var(--spacing-2xl);
}

.mb-1 {
    margin-bottom: var(--spacing-sm);
}

.mb-2 {
    margin-bottom: var(--spacing-md);
}

.mb-3 {
    margin-bottom: var(--spacing-lg);
}

.mb-4 {
    margin-bottom: var(--spacing-xl);
}

.mb-5 {
    margin-bottom: var(--spacing-2xl);
}

.p-1 {
    padding: var(--spacing-sm);
}

.p-2 {
    padding: var(--spacing-md);
}

.p-3 {
    padding: var(--spacing-lg);
}

.p-4 {
    padding: var(--spacing-xl);
}

.p-5 {
    padding: var(--spacing-2xl);
}

/* 📐 العرض والارتفاع */
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

/* 📏 الحدود */
.border-accent {
    border: 2px solid var(--color-accent);
}

.border-success {
    border: 2px solid var(--color-success);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

/* 📐 المرونة */
.d-flex {
    display: flex;
}

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

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.gap-1 {
    gap: var(--spacing-sm);
}

.gap-2 {
    gap: var(--spacing-md);
}

.gap-3 {
    gap: var(--spacing-lg);
}

/* 📝 النصوص */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   🎯 5. الطباعة - Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

p {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    a:hover {
        color: var(--color-accent-dark);
        text-decoration: underline;
    }

/* ============================================================
   🎯 6. الطبقات الخاصة - Special Classes
   ============================================================ */

/* 🎫 بطاقة الحجز الخاصة */
.booking-card-special {
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-light));
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-accent);
}

/* 🏆 بطاقة التأكيد */
.confirmation-card {
    background: var(--gradient-warm);
    border: 3px solid var(--color-success);
    position: relative;
    overflow: hidden;
}

    .confirmation-card::before {
        content: '✓';
        position: absolute;
        top: -20px;
        left: -20px;
        font-size: 120px;
        color: rgba(5, 150, 105, 0.1);
        font-weight: bold;
        z-index: 0;
    }

/* 🎨 التأثيرات الخاصة */
.gradient-text {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.shadow-accent {
    box-shadow: var(--shadow-accent);
}

/* ============================================================
   🎯 7. الاستجابة - Responsive Design
   ============================================================ */
@media (max-width: 768px) {
    .navbar-menu {
        display: none;
    }

    .navbar-container {
        padding: 0 var(--spacing-md);
    }

    .section {
        padding: var(--spacing-xl) 0;
    }

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

    .btn {
        width: 100%;
    }

    .container {
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }
}

/* ============================================================
   🎯 8. الرسوم المتحركة - Animations
   ============================================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

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

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

    50% {
        opacity: 0.7;
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* ============================================================
   🎯 9. الطباعة - Print Styles
   ============================================================ */
@media print {
    .navbar-brand,
    .btn,
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ============================================================
   🎯 10. التخصيصات الخاصة - Custom Overrides
   ============================================================ */
/* إضافة هنا أي تخصيصات خاصة بالموقع */

/* 🎨 وضع مظلم اختياري */
[data-theme="dark"] {
    --bg-primary: #1E293B;
    --bg-secondary: #0F172A;
    --text-on-light: #F5F1E8;
    --bg-tertiary: #334155;
}

/* 🎨 وضع فاتح اختياري */
[data-theme="light"] {
    --bg-primary: #F5F1E8;
    --bg-secondary: #FAFAF9;
    --bg-tertiary: #FFFFFF;
}



/* ============================================================
   🎯 التذييل المميز - Enhanced Footer
   ============================================================ */

.booking-footer {
    background: linear-gradient(145deg, var(--color-primary-dark), var(--color-primary));
    color: var(--text-on-dark);
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--color-accent);
}

    .booking-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: linear-gradient(45deg, rgba(184, 134, 11, 0.05) 0%, rgba(30, 41, 59, 0.9) 50%, rgba(184, 134, 11, 0.05) 100%);
        z-index: 0;
    }

.footer-content {
    position: relative;
    z-index: 1;
}

/* الصف العلوي */
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

/* العلامة التجارية */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-logo {
    color: var(--text-on-dark);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

    .footer-logo i {
        color: var(--color-accent);
    }

.footer-description {
    color: var(--text-on-dark-secondary);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.footer-social {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-on-dark);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    text-decoration: none;
    font-size: var(--font-size-lg);
}

    .social-icon:hover {
        background: var(--color-accent);
        color: var(--text-on-accent);
        transform: translateY(-3px);
        box-shadow: var(--shadow-accent);
    }

/* الروابط */
.footer-links,
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.footer-title {
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: var(--spacing-sm);
}

    .footer-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        @(isArabic ? "right: 0;" : "left: 0;") width: 40px;
        height: 2px;
        background: var(--gradient-accent);
    }

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

    .footer-menu li a {
        color: var(--text-on-dark-secondary);
        text-decoration: none;
        font-size: var(--font-size-sm);
        transition: all var(--transition-fast);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

        .footer-menu li a::before {
            content: '›';
            color: var(--color-accent);
            font-weight: bold;
        }

        .footer-menu li a:hover {
            color: var(--color-accent);
            padding- @(isArabic ? "right" : "left"): var(--spacing-sm);
        }

/* معلومات الاتصال */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-on-dark-secondary);
    font-size: var(--font-size-sm);
}

    .contact-item i {
        color: var(--color-accent);
        width: 20px;
        font-size: var(--font-size-base);
    }

/* الخط الفاصل */
.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.3), transparent);
    margin: var(--spacing-xl) 0;
}

/* الصف السفلي */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.footer-copyright {
    color: var(--text-on-dark-secondary);
    font-size: var(--font-size-sm);
}

    .footer-copyright .text-accent {
        color: var(--color-accent);
        font-weight: var(--font-weight-semibold);
    }

.footer-payments {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.payment-text {
    color: var(--text-on-dark-secondary);
    font-size: var(--font-size-xs);
}

.payment-icons {
    display: flex;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

    .payment-icons i {
        color: var(--text-on-dark-secondary);
        transition: all var(--transition-fast);
    }

        .payment-icons i:hover {
            color: var(--color-accent);
            transform: scale(1.2);
        }

/* Responsive للفوتر */
@@media (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@@media (max-width: 768px) {
    .booking-footer {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .footer-payments {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

@@media (max-width: 480px) {
    .footer-social {
        justify-content: center;
    }

    .contact-item {
        justify-content: center;
    }

    .footer-menu li a {
        justify-content: center;
    }
}

/* تأثيرات إضافية للفوتر */
.booking-footer {
    animation: footer-appear 0.8s ease-out;
}

@@keyframes footer-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ============================================
   LOGO STYLING
   ============================================ */

.navbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--transition-fast);
}

    .navbar-logo img {
        height: 50px; /* ارتفاع ثابت */
        width: auto; /* العرض يتناسب تلقائياً */
        object-fit: contain;
        transition: var(--transition-fast);
    }

    /* تأثير عند التمرير */
    .navbar-logo:hover img {
        transform: scale(1.05);
    }

/* حجم الشعار على الشاشات الصغيرة */
@media (max-width: 768px) {
    .navbar-logo img {
        height: 40px; /* أصغر قليلاً على الموبايل */
    }
}

@media (max-width: 576px) {
    .navbar-logo img {
        height: 35px; /* أصغر على الشاشات الصغيرة جداً */
    }
}

/* في حالة وجود نص مع الشعار */
.navbar-logo span {
    font-family: var(--font-family-arabic);
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-right: 10px;
}

/* تنسيق شعار الفوتر */
.footer-logo img {
    height: 60px;
    width: auto;
    margin-bottom: 15px;
}
/* ✨ نهاية ملف الهوية البصرية */