:root {
    /* ألوان الوضع المظلم الأساسية */
    --bg-body: #052235;
    --bg-nav: #172e4b67;
    --bg-loading: linear-gradient(180deg, #bacae1, #4276b6);
    --bg-hero: linear-gradient(180deg, #1c2d48, #255493);
    --bg-card: linear-gradient(180deg, #2e4b79, #1a314e);
    --bg-card-body: linear-gradient(180deg, #2d4a75, #0b2c54);
    --bg-footer: #172e4b;
    --bg-control: rgba(1, 70, 154, 0.4);
    --bg-uni-item: linear-gradient(180deg, #e9f5ff, #c3dafb);
    --accent-blue: #3498db;
    --scroll-bg: #395d83;
    
    --bg-coming-soon: linear-gradient(145deg, #ffffff, #f0f0f0);
    /* ألوان النصوص واللمسات */
    --text-white: #ffffff;
    --text-dark: #333333;
    --text-muted: #888888;


  
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;

}

body{
    
    background-color: var(--bg-body) !important;
    color: var(--text-white) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    cursor: default;
    margin-top: 70px !important;
    overflow-x: hidden !important;
    overflow-y: scroll;
    transition: background-color 0.5s ease, color 0.5s ease !important;
    min-height: 100vh;
    
  }
 

h1 {font-size: clamp(22px, 6vw , 40px) !important;}
h2 {font-size: clamp(20px, 4vw, 27px) !important;}
h3 {font-size: clamp(14px, 3vw, 20px) !important;}
h4 {font-size: clamp(14px, 4vw, 20px) !important;}
h5 , h6 {font-size: clamp(16px, 3vw, 19px) !important;}
p, .lead, .card-text ,div , span  ,li , label ,strong , a ,small {font-size: clamp(13px, 2vw , 17px) !important;} 

.no-scroll{overflow: hidden !important;}

.card, .navbar, .uni-item, .border, .border-top, .border-bottom {
    border: 1px solid transparent !important; 
    transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease !important;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-loading) !important;
    color: var(--text-white) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* لضمان تغطية جميع العناصر */
    transition: opacity 0.5s ease-out; /* انتقال سلس عند الاختفاء */
    
}
@keyframes textshow {
    from {
        opacity: 0;
        transform: translate(0, -20px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.loading-text-loader  {
    margin-top: 10px;
    font-size:  clamp(2rem, 5vw , 3rem) !important;
    font-weight: 500;
    text-align: center;
    color: var(--text-white) !important;
    text-shadow: 1px 1px  #0e33975c ;
    animation: textshow 1s ease forwards;
}
.loading-text{
    margin-bottom: 10px;
    font-weight: 500;
    font-size: clamp(0.8rem, 3vw, 1.3rem) !important;
    text-align: center;
    color: var(--text-white) !important;
    text-shadow: 1px 1px  #0e339724;
    animation: textshow 1s ease forwards;
}


.loader {
    height: 30px;
    aspect-ratio: 2.5;
    --_g: no-repeat radial-gradient(farthest-side,#4872d5 90%,#00000000);
    background:var(--_g), var(--_g), var(--_g), var(--_g);
    background-size: 20% 50%;
    animation: l43 1s infinite linear; 
  }
  @keyframes l43 {
    0%     {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    16.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    33.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    50%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
    66.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
    83.33% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
    100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
 }


 

  .navbar{
    background-color: var(--bg-nav) !important;
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999 !important;
    backdrop-filter: blur(10px);
    
  }

nav a:hover{color: var(--accent-blue) !important;}

nav a:active{color: var(--accent-deep-blue) !important;}



.bs-highlight {
    position: relative; /* ضروري */
    z-index: 1;
    text-shadow: 1px 1px 4px #000000 
}

.textshadow{
    text-shadow: rgba(0, 0, 0, 0.52) 1px 1px 4px ;
}

.hero img{
    width: auto !important;
    height: 100px !important;
}
/* تصميم العناوين */
.section-title {
    font-weight: 700;
    letter-spacing: 1px;
    border-right: 4px solid var(--accent-dark-blue) !important;
    padding-right: 15px;
}

/* حاوية الشبكة */
.uni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* تصميم البطاقة */
.uni-item {
    display: flex;
    align-items: center;
    background: var(--bg-uni-item) ;
    padding: 12px 15px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   
}

.light-mode .uni-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #0065fd !important;
    
}
.uni-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(255, 255, 255, 0.1);
    border: 1px solid #0065fd !important;
    
}


/* تصميم اللوجو داخل البطاقة */
.uni-logo {
    width: 55px;
    height: 55px;
    min-width: 55px;
    background: #fff;
    border-radius: 10px;
    margin-inline-end: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.uni-logo img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.uni-info strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.2;
}

.uni-info small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* السهم الصغير */
.uni-item i {
    font-size: 0.8rem;
    color: #5a5959;
    transition: 0.3s;
}

.uni-item:hover i {
    color: var(--accent-dark-blue);
    transform: translateX(-5px);
}

/* تنسيق خاص بكرت قريباً ليبرز بشكل احترافي */
.coming-soon-card {
    grid-column: 1 / -1; 
    max-width: 500px;    
    margin: 0 auto;     
    cursor: default !important;
}

.coming-soon-card:hover {
    transform: none !important; /* إلغاء حركة الرفع لهذا الكرت تحديداً */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* حركة دوران الساعة الرملية */
.bi-hourglass-split {
    animation: rotate-hourglass 2s infinite linear;
}

@keyframes rotate-hourglass {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

.card {
    background: var(--bg-card) !important;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    margin: 20px auto;
    border: 1px solid #cccccc29 !important;
    color: var(--text-white) !important;
    
}




.about{

    font-weight: bold;
    margin-top: 10px;
    border-radius:10px;
}

.about h1{
    text-align: center;
    padding: 10px auto;
    font-weight: 800;
}

.about p{
    font-size: 1rem;
    text-align: center;
    padding: 10px 25px;
    line-height: 2rem;

}


.control {
    background-color: var(--bg-control) !important; 
    backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 1px 1px 40px rgba(255, 255, 255, 0.1); 
}

footer{background-color: var(--bg-footer)  !important;}

/* تنسيق أساسي لزر العودة للأعلى */
.scroll-top {
    position: fixed; /* تثبيت الزر في مكانه */
    bottom: 25px;
    right: 25px;
    z-index: 999; 
    display: none; 
    cursor: pointer;
    background-color: var(--scroll-bg) ;
    padding: 5px;
    border-radius: 50px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.scroll-top:hover {
    opacity: 1;
}

.hero-sectio {

    background: var(--bg-hero) ; 
    background-size: 100% 100%; 
    background-position: 100% 100%;
    animation: 
        hero 2s ease linear infinite 5s,
        shimmer 2s ease-in-out infinite 5s;
    position: relative; 
    overflow: hidden; 
}


@keyframes hero {
    from {background-position: 0% ;}
    to {background-position: 100% ;}
}

.hero-sectio::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 200%;
    background: linear-gradient(180deg, #1c2d4800 0%, rgba(57, 163, 255, 0.054) 50%, #1c2d4800 100% );
    transform: translateY(-100%); 
    animation: shimmer 5s infinite;
}


@keyframes shimmer {
    0% {transform: translateY(-100%); }
    100% {transform: translateY(100%); }
}

/* --- تنسيق زر التبديل (الوضع المظلم / الوضع الفاتح) --- */
.mode-toggle-container {
    display: flex;
    align-items: center;
    padding: 5px;

}

.mode-toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.mode-toggle-label {
    background-color: #ffffff; /* خلفية الزر */
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    height: 33px;
    width: 66px;
    transition: background-color 0.3s;
    border: 1px solid #3498db;
}

.ball {
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 7px;
    height: 24px;
    width: 24px;
    transition: transform 0.3s ease-in-out, background-color 0.3s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.mode-toggle-checkbox:checked + .mode-toggle-label .ball {
    transform: translateX(28px);
    background-color: #f39c12; /* لون الشمس */
}

.sun-icon {
    color: #f39c12; /* لون الشمس في الوضع المظلم */
    margin-left: 5px;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.moon-icon {
    color: #f1c40f; /* لون القمر */
    margin-right: 5px;
    font-size: 1.1rem;
    transition: color 0.3s;
}

/* إخفاء القمر في الوضع المظلم وإظهار الشمس */
.mode-toggle-checkbox:checked + .mode-toggle-label .moon-icon {
    visibility: hidden;
    opacity: 0;
}

.mode-toggle-checkbox:checked + .mode-toggle-label .sun-icon {
    visibility: visible;
    opacity: 1;
    color: #f1c40f; /* لون الشمس بعد التبديل */
}

/* --- تنسيق الوضع الفاتح (White Mode) --- */
.light-mode {
    background-color: #f8f9fa !important; /* خلفية بيضاء فاتحة */
    color: #333 !important; /* خط داكن */
    text-shadow: none; /* إزالة الظل من النص */
}

.light-mode h1, .light-mode h2, .light-mode h3, .light-mode h4, .light-mode h5, .light-mode h6,
.light-mode p, .light-mode .lead, .light-mode .card-text , .light-mode div , .light-mode span  , .light-mode li , .light-mode label {
    color: #333 !important; /* تأكيد لون النص */
  
}

.light-mode .mode-toggle-label {
    background-color: #172e4b; /* خلفية الزر */
}
/* تعديل خلفية شريط التنقل */
.light-mode .navbar {
    background: linear-gradient(180deg, #e9f5ff67, #c3dafb67) !important;
    border-bottom-color: #0000002e !important;
   
}

/* تعديل الـ hero section */
.light-mode .hero-sectio {
    background: linear-gradient(180deg, #e9f5ff, #c3dafb);
}

.light-mode .hero-content h1, .light-mode .hero-content p {
    color: #052235 !important;
    text-shadow: none;
}
.light-mode .hero h1{
    color: #ffffff !important;
    text-shadow: 1px 1px 4px #000000 
}
/* تعديل الكروت (Cards) */
.light-mode .card {
    background: linear-gradient(180deg, #e9f5ff, #c3dafb) !important;
    border-color: #0000002e !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.023) !important;
    color: #333 !important;
}


.light-mode .card-header {
    background-color: #090c6d !important; /* لون أساسي لتمييز الهيدر */
    color: white !important;
}

.light-mode .card-title {

    border-bottom-color: #090c6d3a  !important;
}
.light-mode .border-bottom{
    border-bottom-color: #0000002e !important;
}
.light-mode .border{
    border-color: #0000002e !important;
}
.light-mode .border-top{
    border-top-color: #0000002e !important;
}

.light-mode a{
    color: #000000 !important;
}

/* تعديل الفوتر (Footer) */
.light-mode footer {
    background: #c3dafb !important;
    border-top: 1px solid #e0e0e0;
}

.light-mode footer p {
    color: #333 !important;
}

/* تعديل زر العودة للأعلى */
.light-mode .scroll-top {
    background-color: #01137acc !important;
}

.light-mode .scroll-top i {
    color: white !important;
}

/* تعديل حاوية التواصل */
.light-mode .lead.bg-primary-subtle {
    background-color: #e3f2fd !important;
}

/* --- تنسيق رسالة التنبيه (Toast) --- */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    padding: 10px 20px;
    border-radius: 8px;
    color: white;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.5s, transform 0.5s;
    font-size: 0.9rem !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-notification.dark {
    background-color: #3498db; /* لون الوضع المظلم */
}

.toast-notification.light {
    background-color: #f1c40f; /* لون الوضع الفاتح */
    color: #052235;
}

/* إزالة الحدود الزرقاء الافتراضية نهائياً */
#majorSearch:focus, 
.search-container .input-group:focus-within {
    outline: none !important;
    box-shadow: none !important; /* هذا هو المسؤول عن الوهج الأزرق */
    border: none !important;
}

/* تنسيق حاوية البحث بشكل ناعم */
.search-container .input-group {
    background: rgba(255, 255, 255, 0.15); /* شفافية خفيفة */
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

/* التغيير الذي يحدث عند الضغط (بدون لون أزرق) */
.search-container .input-group:focus-within {
    background: rgba(255, 255, 255, 1); /* يتحول للأبيض السادة */
    border: 2px solid #0065fd !important;
}

/* تنسيق النص داخل البحث */
#majorSearch {
    background: transparent !important;
    border: none !important;
    color: white !important;
    box-shadow: none !important;
}
.input-group-text i {
    color: rgb(148, 148, 148) !important;
}
.light-mode #majorSearch {
    color: #333 !important;
}
#majorSearch:focus {
    color: #333 !important; /* لون النص يصبح غامقاً عند الكتابة في الخلفية البيضاء */
}

/* تعديل لون أيقونة البحث عند الفوكس */
.search-container .input-group:focus-within .bi-search {
    color: #001f3f !important;
}

#searchResultsList {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* ظل خفيف جداً واحترافي */
    margin-top: 8px;
    padding: 5px;
}

#searchResultsList li a {
    border-radius: 8px;
    color: #333;
    font-size: 0.95rem;
}

#searchResultsList li a:hover {
    background-color: #f8f9fa; /* لون رمادي فاتح جداً عند المرور */
    color: #001f3f;
}

/* إزالة الحدود الزرقاء نهائياً */
#majorSearch:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* القائمة المنسدلة */
#searchResultsList {
    border: none;
    border-radius: 12px;
    padding: 8px;
    margin-top: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12); /* ظل ناعم جداً */
    background: #fff;
    min-width: 280px; /* عرض مناسب للقائمة */
}

/* شكل السطر الواحد عند مرور الماوس */
#searchResultsList li a {
    border-radius: 8px;
    transition: all 0.2s ease;
}

#searchResultsList li a:hover {
    background-color: #f0f4f8; /* لون سماوي باهت جداً مريح للعين */
    transform: scale(0.98); /* تأثير ضغط بسيط للداخل */
}

/* فاصل بين النتائج ما عدا الأخيرة */
#searchResultsList li:not(:last-child) {
    border-bottom: 1px solid #f8f9fa;
}


@media (min-width: 992px) and (max-width: 1250px) {
    
   
    .search-container {
        max-width: 250px !important; /* تصغير البحث في الموبايل ليفسح مجالاً للمنيو */
        margin: 0 auto;
    }
    
    #majorSearch {
        font-size: 1rem; /* تصغير الخط قليلاً */
    }
    .navbar-nav a{
        font-size: 0.8rem !important;
    }
   
}

@media (max-width: 520px) {
    .search-container {
        max-width: 180px !important; /* تصغير البحث في الموبايل ليفسح مجالاً للمنيو */
        margin: 0 auto;
    }
    
    #majorSearch {
        font-size: 1rem; /* تصغير الخط قليلاً */
    }
}
@media (max-width: 415px) {
    .search-container {
        max-width: 170px !important; /* تصغير البحث في الموبايل ليفسح مجالاً للمنيو */
        margin: 0 auto;
    }
    
    #majorSearch {
        font-size: 0.8rem; /* تصغير الخط قليلاً */
    }
}

@media (max-width: 375px) {
    .search-container {
        max-width: 140px !important; /* تصغير البحث في الموبايل ليفسح مجالاً للمنيو */
        margin: 0 auto;
    }
    
    #majorSearch {
        font-size: 0.8rem; /* تصغير الخط قليلاً */
    }
}
@media (max-width: 355px) {
    .search-container {
        max-width: 100px !important; /* تصغير البحث في الموبايل ليفسح مجالاً للمنيو */
        margin: 0 auto;
    }
    
    #majorSearch {
        font-size: 0.8rem; /* تصغير الخط قليلاً */
    }
}


/* تأكد من أن القائمة المنسدلة لا تمنع التفاف النص */
#searchResultsList {
    min-width: 320px; /* زيادة العرض الأدنى قليلاً */
    max-width: 100%;
    overflow-x: hidden; /* منع التمرير الأفقي */
}

/* لضمان أن العناصر الطويلة تنزل لسطر جديد ولا تخرج عن الإطار */
.dropdown-item {
    white-space: normal !important; 
    word-wrap: break-word;
}

/* تحسين شكل الفاصل */
.text-silver {
    color: #dee2e6;
}
.result-item {
    padding: 8px 15px; /* تقليل المسافات الرأسية */
    border-bottom: 1px solid #eee;
}