/* =======================================================================  
   Artboard Light Palette & Fine Artistic Typography (Enhanced Version)  
   ======================================================================= */  
   @font-face {  
    font-family: 'SiderFine';  
    src: url('/mnt/data/file-ngwyeoEN29l1M3O1QpdxCwkj-sider-font.ttf'); /* تأكد من صحة المسار */  
    font-weight: normal;  
    font-style: normal;  
    font-display: swap;  
}  

/* ==========================================================================  
   متغيرات الألوان الفنية - لوحة فاتحة (مع تحديثات طفيفة)  
   ========================================================================== */  
:root {  
    /* ألوان اللوحة الفاتحة الجديدة */  
    --primary-light-accent: #8A6EEF; /* بنفسجي غني - تم توحيد الحالة */  
    --secondary-light-accent: #71E1C8; /* تركواز ناعم - تم توحيد الحالة */  
    --accent-light: #F994A1; /* وردي ياقوتي - تم توحيد الحالة */  

    --light-bg-start: #E9FDF6; /* أخضر نعناعي فاتح */  
    --light-bg-end: #F9ECFA; /* ليلكي رمادٍ فاتح */  

    /* ألوان النصوص */  
    --text-dark-strong: #203349; /* كحلي قوي */  
    --text-dark-medium: #5B6572; /* رمادي بالغ */  
    --text-light-on-dark: #FDFDFD; /* أبيض نقي للعناصر التي قد تكون بخلفية أغمق قليلاً */  

    /* ألوان للخلفيات الشفافة (Glassmorphism enhanced) */  
    --glass-light: rgba(255, 255, 255, 0.85); /* أقل شفافية بقليل لتحسين الوضوح */  
    --glass-medium: rgba(255, 255, 255, 0.95); /* شبه معتم */  
    --glass-dark-overlay: rgba(0, 0, 0, 0.03); /* طبقة خفيفة لتعزيز العمق */  

    /* ظلال بسيطة متناسقة مع الفاتح (تم تعزيزها قليلاً) */  
    --shadow-light: rgba(160, 138, 255, 0.08);  
    --shadow-medium: rgba(127, 205, 205, 0.15);  
    --shadow-deep: rgba(0, 0, 0, 0.05);  

    /* شدة التوهج (فقط للـ text-shadow و box-shadow الثابتة) - تم تعزيزها قليلاً */  
    --glow-intensity-low: 0 0 6px; /* زيادة بسيطة */  
    --glow-intensity-medium: 0 0 12px; /* زيادة بسيطة */  

    /* متغييرات جديدة للمسافات والحدود لتسهيل التعديل والاتساق */  
    --spacing-xs: 0.5rem;  
    --spacing-sm: 1rem;  
    --spacing-md: 1.5rem;  
    --spacing-lg: 2rem;  
    --spacing-xl: 3rem;  

    --border-radius-sm: 10px;  
    --border-radius-md: 16px;  
    --border-radius-lg: 25px;  
}  

/* ==========================================================================  
   الأساسيات (Base Styles)  
   ========================================================================== */  
html {  
    scroll-behavior: smooth;  
    box-sizing: border-box; /* للتأكد من حساب الـ padding والـ border ضمن العرض */  
}  

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

body {  
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
    color: var(--text-dark-strong);  
    background: linear-gradient(135deg, var(--light-bg-start) 0%, var(--light-bg-end) 40%, #fffbf9 100%);  
    background-attachment: fixed;  
    min-height: 100vh;  
    display: flex;  
    flex-direction: column;  
    overflow-x: hidden;  
    position: relative;  
    padding-top: 80px; /* زيادة لترك مساحة أكبر للناف بار */  
    letter-spacing: 0.015em;  
    line-height: 1.6; /* تحسين قابلية القراءة */  
}  

/* شريط التمرير - يتناسب مع لوحة الألوان الفاتحة */  
::-webkit-scrollbar {  
    width: 12px;  
}  

::-webkit-scrollbar-track {  
    background: var(--light-bg-start);  
    border-radius: var(--border-radius-sm);  
}  

::-webkit-scrollbar-thumb {  
    background: linear-gradient(to bottom, var(--primary-light-accent), var(--secondary-light-accent));  
    border-radius: var(--border-radius-sm);  
    border: 3px solid var(--light-bg-start);  
}  

::-webkit-scrollbar-thumb:hover {  
    background: linear-gradient(to bottom, var(--accent-light), var(--primary-light-accent));  
}  

/* ==========================================================================  
   شريط التنقل (Navbar) - لوحة فنية فاتحة (معزز)  
   ========================================================================== */  
.navbar {  
    position: fixed;  
    top: 0;  
    width: 100%;  
    background: var(--glass-light); /* استخدام متغير الزجاج المحسن */  
    backdrop-filter: blur(10px); /* إضافة تأثير الضبابية */  
    -webkit-backdrop-filter: blur(10px); /* لدعم الويب كيت */  
    border-bottom: 1.5px solid rgba(229, 230, 252, 0.7);  
    box-shadow: 0 6px 20px rgba(160, 138, 255, 0.1); /* ظل أقوى قليلاً */  
    z-index: 1020;  
    padding: 0.75rem var(--spacing-lg); /* زيادة الـ padding الأفقي والعمودي */  
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* إضافة انتقال للظل */  
}  

.navbar.scrolled-down {  
    transform: translateY(-100%);  
}  

.navbar.scrolled-up {  
    transform: translateY(0);  
    box-shadow: 0 8px 25px rgba(160, 138, 255, 0.15); /* ظل أوضح عند الظهور */  
}  

.navbar-brand {  
    font-family: 'SiderFine', 'Orbitron', sans-serif;  
    color: var(--primary-light-accent) !important;  
    font-size: 2.2rem; /* زيادة حجم الخط قليلاً */  
    text-shadow: var(--glow-intensity-low) var(--primary-light-accent);  
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease-out; /* إضافة انتقال لـ transform */  
    letter-spacing: 1.5px; /* زيادة تباعد الأحرف */  
}  

.navbar-brand:hover {  
    color: var(--accent-light) !important;  
    text-shadow: var(--glow-intensity-low) var(--accent-light);  
    transform: translateY(-2px); /* تأثير رفع خفيف عند التحويم */  
}  

.navbar-nav .nav-link {  
    color: var(--text-dark-medium) !important;  
    font-weight: 600;  
    margin: 0 var(--spacing-sm); /* استخدام متغير المسافات */  
    position: relative;  
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease-out; /* إضافة انتقال لـ transform */  
    padding: 8px 0; /* زيادة padding */  
}  

.navbar-nav .nav-link::after {  
    content: '';  
    position: absolute;  
    bottom: 0;  
    left: 50%;  
    transform: translateX(-50%);  
    width: 0;  
    height: 3px;  
    background: linear-gradient(to right, var(--secondary-light-accent), var(--accent-light));  
    border-radius: 2px;  
    transition: width 0.3s ease-out;  
}  

.navbar-nav .nav-link:hover::after,  
.navbar-nav .nav-link.active::after {  
    width: 100%;  
}  

.navbar-nav .nav-link:hover {  
    color: var(--primary-light-accent) !important;  
    text-shadow: var(--glow-intensity-low) var(--secondary-light-accent);  
    transform: translateY(-2px);  
}  

.navbar-nav .nav-link.active {  
    color: var(--accent-light) !important;  
    text-shadow: var(--glow-intensity-low) var(--accent-light);  
}  

.navbar-toggler {  
    border: none;  
    outline: none;  
    box-shadow: none !important;  
    padding: 0.5rem; /* زيادة padding */  
}  

.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='rgba%28138, 110, 239, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;  
}  

/* حقل البحث وزر البحث - تبسيط طفيف مع ألوان فاتحة (معزز) */  
.navbar .form-control {  
    background-color: var(--glass-light);  
    border: 1px solid rgba(138, 110, 239, 0.4); /* border أقوى قليلاً */  
    color: var(--text-dark-strong);  
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;  
    border-radius: var(--border-radius-sm);  
    padding: 0.65rem var(--spacing-sm); /* زيادة padding */  
    box-shadow: var(--glow-intensity-low) rgba(138, 110, 239, 0.2); /* ظل أوضح */  
}  

.navbar .form-control::placeholder {  
    color: var(--text-dark-medium);  
    opacity: 0.8;  
}  

.navbar .form-control:focus {  
    background-color: var(--glass-medium);  
    border-color: var(--primary-light-accent);  
    box-shadow: 0 0 0 0.25rem rgba(138, 110, 239, 0.3); /* ظل تركيز أوضح */  
    color: var(--text-dark-strong);  
}  

.navbar .btn-outline-light {  
    color: var(--primary-light-accent) !important;  
    border-color: var(--primary-light-accent) !important;  
    transition: all 0.3s ease;  
    border-radius: var(--border-radius-sm);  
    font-weight: 600;  
    padding: 0.65rem var(--spacing-md); /* زيادة padding */  
    background-color: transparent;  
    text-transform: capitalize; /* للتناسق */  
}  

.navbar .btn-outline-light:hover {  
    background-color: var(--primary-light-accent) !important;  
    color: var(--text-light-on-dark) !important;  
    transform: translateY(-2px); /* تأثير رفع خفيف */  
    box-shadow: 0 4px 10px rgba(138, 110, 239, 0.3); /* ظل عند التحويم */  
}  

/* ==========================================================================  
   المحتوى الرئيسي (Main Content Container) - لوحة فنية فاتحة (معزز)  
   ========================================================================== */  
main {  
    flex-grow: 1;  
    position: relative;  
    z-index: 10;  
    padding-top: var(--spacing-xl); /* زيادة كبيرة في الـ padding العلوي */  
    padding-bottom: var(--spacing-xl); /* زيادة كبيرة في الـ padding السفلي */  
}  

.container {  
    background: linear-gradient(138deg, #fffdfc 70%, #e9fdf6 130%);  
    border-radius: var(--border-radius-lg);  
    padding: var(--spacing-xl); /* زيادة كبيرة في الـ padding */  
    box-shadow: 0 15px 40px 0 var(--shadow-light); /* ظل أقوى */  
    border: 1.5px solid #e5e6fc;  
    margin-top: var(--spacing-lg); /* زيادة margin */  
    margin-bottom: var(--spacing-lg); /* زيادة margin */  
    position: relative;  
    overflow: hidden; /* للتأكد من أن أي عناصر تتجاوز الحدود لا تظهر خارج الـ border-radius */  
}  

/* ==========================================================================  
   رسائل الفلاش (Flash Messages) - لوحة فنية فاتحة (معزز)  
   ========================================================================== */  
.alert {  
    border-radius: var(--border-radius-md);  
    border: none;  
    background: linear-gradient(95deg, #fffdfc, #f7f5fd 90%);  
    box-shadow: 0 10px 25px rgba(179, 157, 219, 0.15); /* ظل أقوى */  
    color: var(--text-dark-medium);  
    padding: 1.25rem var(--spacing-lg); /* زيادة padding */  
    font-weight: 600;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.05); /* ظل نص أخف */  
    margin-bottom: var(--spacing-md); /* زيادة margin */  
    position: relative;  
    overflow: hidden; /* للتأكد من أن border-left يظل داخل الـ border-radius */  
}  

.alert::before {  
    content: '';  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 10px; /* زيادة العرض */  
    height: 100%;  
    background: linear-gradient(to bottom, var(--primary-light-accent), var(--secondary-light-accent));  
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);  
}  

/* ألوان الرسائل المحددة */  
.alert-success {  
    background: linear-gradient(95deg, #f0fdf7, #e6f7ef 90%);  
    color: #3d8f76; /* لون نص أخضر داكن أكثر وضوحًا */  
    border-left: 10px solid var(--secondary-light-accent);  
}  

.alert-danger {  
    background: linear-gradient(95deg, #fff3f5, #fce9ec 90%);  
    color: #b94f61; /* لون نص أحمر داكن أكثر وضوحًا */  
    border-left: 10px solid var(--accent-light);  
}  

.alert-info {  
    background: linear-gradient(95deg, #f0f8fd, #e6f2fc 90%);  
    color: #4b7ea6; /* لون نص أزرق داكن أكثر وضوحًا */  
    border-left: 10px solid #81d4fa;  
}  

.alert-warning {  
    background: linear-gradient(95deg, #fffcf0, #fcfbe6 90%);  
    color: #a07d35; /* لون نص أصفر داكن أكثر وضوحًا */  
    border-left: 10px solid #fff9c4;  
}  

.alert .btn-close {  
    background-color: transparent;  
    opacity: 0.8; /* زيادة opacity قليلاً */  
    transition: opacity 0.3s ease, transform 0.2s ease-out;  
    filter: none;  
    color: var(--text-dark-medium);  
    font-size: 1.2rem; /* زيادة حجم الخط */  
    padding: var(--spacing-xs);  
}  

.alert .btn-close:hover {  
    opacity: 1;  
    color: var(--text-dark-strong);  
    transform: rotate(90deg); /* تأثير دوران خفيف */  
}  

/* ==========================================================================  
   التذييل (Footer) - لوحة فنية فاتحة (معزز)  
   ========================================================================== */  
footer {  
    background: var(--glass-light) !important; /* استخدام متغير الزجاج المحسن */  
    backdrop-filter: blur(8px); /* إضافة تأثير الضبابية */  
    -webkit-backdrop-filter: blur(8px);  
    border-top: 1.5px solid rgba(229, 230, 252, 0.7);  
    color: var(--text-dark-medium) !important;  
    padding: var(--spacing-lg) 0; /* زيادة padding */  
    margin-top: auto;  
    font-size: 0.95rem; /* زيادة حجم الخط قليلاً */  
    position: relative;  
    z-index: 1000;  
    box-shadow: 0 -6px 20px rgba(160, 138, 255, 0.1); /* ظل أقوى قليلاً */  
}  

footer p {  
    margin-bottom: 0;  
    letter-spacing: 0.01em;  
}  

/* ==========================================================================  
   الروابط العامة (General Links) - لوحة فنية فاتحة (معزز)  
   ========================================================================== */  
a {  
    color: var(--primary-light-accent);  
    text-decoration: none;  
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease-out;  
}  

a:hover {  
    color: var(--accent-light);  
    text-shadow: var(--glow-intensity-low) var(--accent-light);  
    transform: translateY(-1px); /* تأثير رفع خفيف */  
}  

/* ==========================================================================  
   العناوين (Headings) - لوحة فنية فاتحة (معزز)  
   ========================================================================== */  
h1, h2, h3, h4, h5, h6 {  
    font-family: 'SiderFine', 'Orbitron', sans-serif;  
    color: var(--text-dark-strong);  
    margin-bottom: var(--spacing-md); /* استخدام متغير المسافات */  
    letter-spacing: 0.05em; /* زيادة تباعد الأحرف */  
    background: linear-gradient(120deg, var(--primary-light-accent), var(--accent-light) 60%, var(--secondary-light-accent));  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    text-shadow: 0 6px 15px rgba(160, 138, 255, 0.08), 0 0px 10px rgba(113, 225, 200, 0.09); /* ظلال أقوى */  
}  
h1 { font-size: 3.2rem; font-weight: 800; line-height: 1.2; } /* زيادة الحجم والـ line-height */  
h2 { font-size: 2.5rem; font-weight: 800; line-height: 1.3; }  
h3 { font-size: 2rem; font-weight: 700; line-height: 1.4; }  
h4 { font-size: 1.7rem; font-weight: 600; line-height: 1.5; }  
h5 { font-size: 1.4rem; font-weight: 600; }  
h6 { font-size: 1.1rem; font-weight: 600; }  


/* ==========================================================================  
   أزرار Bootstrap مخصصة (Custom Bootstrap Buttons) - لوحة فنية فاتحة (معزز)  
   ========================================================================== */  
.btn-primary {  
    background: linear-gradient(105deg, var(--primary-light-accent), var(--accent-light));  
    border: none;  
    box-shadow: 0 10px 20px 0 rgba(160, 138, 255, 0.25); /* ظل أقوى */  
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); /* منحنى انتقال أكثر سلاسة */  
    font-weight: 700;  
    padding: 0.9rem 2.2rem; /* زيادة padding */  
    border-radius: var(--border-radius-md); /* استخدام متغير الحدود */  
    color: var(--text-light-on-dark);  
    text-transform: uppercase;  
    letter-spacing: 0.1em; /* زيادة تباعد الأحرف */  
    display: inline-flex; /* لضبط محاذاة النص والأيقونات إذا وجدت */  
    align-items: center;  
    justify-content: center;  
}  

.btn-primary:hover {  
    box-shadow: 0 15px 30px rgba(160, 138, 255, 0.35); /* ظل أقوى عند التحويم */  
    background: linear-gradient(105deg, var(--accent-light), var(--primary-light-accent)); /* عكس التدرج */  
    color: var(--text-light-on-dark);  
    transform: translateY(-4px); /* رفع أكثر وضوحاً */  
}  

.btn-secondary {  
    background: linear-gradient(97deg, #e3e0f9, #f7dbe7 95%); /* تدرج فاتح ومحسن */  
    border: 1.5px solid #b39ddb;  
    color: var(--text-dark-strong);  
    box-shadow: 0 7px 18px rgba(179, 157, 219, 0.2); /* ظل أقوى */  
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);  
    font-weight: 600;  
    padding: 0.9rem 2.2rem; /* زيادة padding */  
    border-radius: var(--border-radius-md);  
    letter-spacing: 0.1em; /* زيادة تباعد الأحرف */  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
}  

.btn-secondary:hover {  
    background: linear-gradient(97deg, var(--secondary-light-accent), var(--primary-light-accent));  
    border-color: transparent;  
    color: var(--text-light-on-dark);  
    box-shadow: 0 10px 25px rgba(113, 225, 200, 0.35);  
    transform: translateY(-4px);  
}  

/* ==========================================================================  
   التجاوبية (Responsive Design) - لوحة فنية فاتحة (معزز)  
   ========================================================================== */  
@media (max-width: 991.98px) {  
    .navbar {  
        padding: 0.75rem var(--spacing-md);  
    }  
    .navbar-collapse {  
        background: var(--glass-medium); /* خلفية أكثر وضوحاً في وضع الهاتف */  
        backdrop-filter: blur(15px); /* ضبابية أقوى */  
        -webkit-backdrop-filter: blur(15px);  
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); /* حدود دائرية أكبر */  
        padding: var(--spacing-lg);  
        margin-top: var(--spacing-sm);  
        border: 1px solid rgba(229, 230, 252, 0.9); /* border أوضح */  
        box-shadow: 0 10px 30px rgba(160, 138, 255, 0.2); /* ظل أقوى */  
    }  
    .navbar-nav .nav-link {  
        margin: var(--spacing-xs) 0;  
        padding: var(--spacing-sm) var(--spacing-md);  
        border-radius: var(--border-radius-sm);  
        font-size: 1.05rem; /* زيادة طفيفة */  
    }  
    .navbar-nav .nav-link:hover {  
        background-color: rgba(138, 110, 239, 0.1); /* لون فاتح ناعم */  
    }  
    .navbar-nav .nav-link.active { background-color: rgba(138, 110, 239, 0.2); }  
    .navbar .form-control { margin-top: var(--spacing-md); width: 100%; }  
    .navbar .btn-outline-light { width: 100%; margin-top: var(--spacing-sm); }  
    .container { padding: var(--spacing-xl); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }  
    .navbar-brand { font-size: 2rem; }  
    h1 { font-size: 2.8rem; }  
    h2 { font-size: 2.1rem; }  
}  

@media (max-width: 767.98px) {  
    body {  
        padding-top: 70px; /* تعديل padding-top للـ body */  
    }  
    .navbar {  
        padding: 0.5rem var(--spacing-sm);  
    }  
    .navbar-brand { font-size: 1.8rem; }  
    .container { padding: var(--spacing-lg); margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }  
    h1 { font-size: 2.4rem; margin-bottom: var(--spacing-sm); }  
    h2 { font-size: 1.8rem; margin-bottom: var(--spacing-sm); }  
    h3 { font-size: 1.6rem; }  
    .alert { font-size: 0.9rem; padding: 1rem var(--spacing-md); }  
}  

@media (max-width: 575.98px) {  
    body {  
        padding-top: 65px;  
    }  
    .navbar {  
        padding: 0.4rem var(--spacing-xs);  
    }  
    .container { padding: var(--spacing-md); }  
    .navbar-brand { font-size: 1.6rem; }  
    h1 { font-size: 2rem; }  
    h2 { font-size: 1.6rem; }  
    h3 { font-size: 1.4rem; }  
    .btn-primary, .btn-secondary {  
        padding: 0.7rem 1.5rem;  
        font-size: 0.9rem;  
    }  
}