/* ==========================================================
   THEMANAI NAVBAR
   PART 1 - RESET & VARIABLES
========================================================== */

:root{

    --nav-bg:#1f2937;
    --nav-hover:#374151;

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --white:#ffffff;
    --text:#f8fafc;

    --radius:10px;

    --shadow:
        0 4px 18px rgba(0,0,0,.15);

    --transition:.25s ease;

    /* جديدة */
    --bg-color:#0f0fe8;
    --text-color:#f4f1f1;
    --navbar-color:rgb(0, 0, 0);
    --card-color:#257bd6;
    --button-color:#2563eb;
    --link-color:#2563eb;
    --button-text-color:#ffffff;
    --link-text-color:#ffffff;

}

/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    background:var(--bg-color);

    color:var(--text-color);

}

/* ==========================================================
   NAVBAR
========================================================== */

#ftco-navbar{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    min-height:72px;

    padding:12px 20px;

    background:var(--navbar-color);

    color:var(--text-color);

    box-shadow:var(--shadow);

    z-index:9999;

}

/* ==========================================================
   PART 3 - LINKS & PROFILE
========================================================== */

/* روابط القائمة */

.nav-link{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 16px;

    color:var(--text-color);

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    border-radius:var(--radius);

    transition:var(--transition);

    white-space:nowrap;

}

.nav-link:hover{

    background:var(--button-color);

    color:var(--text-color);

}

/* القائمة المنسدلة */

.dropdown{

    position:relative;

}

.dropdown-toggle{

    cursor:pointer;

}

.dropdown-toggle::after{

    content:"▼";

    font-size:10px;

    margin-left:8px;

    transition:transform .25s;

}

.dropdown.show .dropdown-toggle::after{

    transform:rotate(180deg);

}

/* معلومات المستخدم */

#navbarProfile{

    display:flex;

    align-items:center;

    gap:10px;

    padding:4px 8px;

    border-radius:var(--radius);

    transition:var(--transition);

}

#navbarProfile:hover{

    background:rgba(255,255,255,.08);

}

/* صورة المستخدم */

#navbarAvatar{

    width:40px;

    height:40px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(255,255,255,.35);

    flex-shrink:0;

}

/* اسم المستخدم */

#navbarUsername{

    color:var(--text-color);

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:160px;

}

/* ==========================================================
   PART 4 - SEARCH
========================================================== */

.searchform{

    display:flex;

    align-items:center;

    width:100%;

    max-width:420px;

    height:42px;

    background:var(--card-color);

    border-radius:999px;

    overflow:hidden;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}

.searchform input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    padding:0 16px;

    font-size:15px;

    color:var(--text-color);

}

.searchform input::placeholder{

    color:#9ca3af;

}

.searchform button{

    width:48px;

    height:42px;

    border:none;

    background:var(--button-color);

    color:var(--button-text-color);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.searchform button:hover{

    background:var(--button-color);

}

.searchform:focus-within{

    box-shadow:
        0 0 0 3px rgba(37,99,235,.25);

}

/* ==========================================================
   PART 5 - DROPDOWN
========================================================== */

.dropdown{

    position:relative;

}

/* زر القائمة */

.dropdown-toggle{

    cursor:pointer;

    user-select:none;

}

/* القائمة */

.dropdown-menu{

    position:absolute;

    top:calc(100% + 10px);

    left:0;

    min-width:220px;

    padding:8px;

    background:var(--card-color);

    border-radius:12px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);

    display:none;

    flex-direction:column;

    gap:4px;

    z-index:10000;

    animation:dropdownFade .18s ease;

}

/* عند الفتح */

.dropdown-menu.show{

    display:flex;

}

/* عناصر القائمة */

.dropdown-item{

    display:flex;

    align-items:center;

    padding:12px 14px;

    color:var(--text-color);

    text-decoration:none;

    border-radius:8px;

    font-size:15px;

    font-weight:500;

    transition:background .2s,color .2s;

}

.dropdown-item:hover{

    background:var(--button-color);

    color:var(--button-text-color);

}

/* حركة الظهور */

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

#profileDropdown{

    position:relative;

}

#navbarProfile{

    cursor:pointer;

}

#profileMenu{

    left:auto;

    right:0;

    top:calc(100% + 8px);

    min-width:220px;

}

#profileDropdown.show #profileMenu{

    display:flex;

}

#profileMenu hr{

    border:none;

    border-top:1px solid #e5e7eb;

    margin:6px 0;

}

.logout-item{

    color:#dc2626;

    font-weight:600;

}

.logout-item:hover{

    background:#dc2626;

    color:#fff;

}

/* قائمة Paramètres */

#gamesMenu{

    position:relative;

}

#gamesMenu .dropdown-menu{

    left:0;

    right:auto;

    top:calc(100% + 8px);

}

#resetThemeBtn{

    background:var(--button-color);

    color:var(--button-text-color);

    border:none;

}

#resetThemeBtn:hover{

    opacity:.9;

}