﻿/* Header / Navbar */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(180deg,#0b1220 0%,#0d1530 100%);
    border-bottom: 1px solid var(--border)
}

.navbar {
    padding: .6rem 0
}

/* Brand with image box (replace image path in :before if needed) */
.navbar-brand {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    padding-left: 92px;
    padding-right: 16px;
    margin-right: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35)
}

/* Header / Navbar */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(180deg,#0b1220 0%,#0d1530 100%);
    border-bottom: 1px solid var(--border)
}

.navbar {
    padding: .6rem 0
}

/* برند: لوگو در HTML + متن کنار آن */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 64px;
    padding: 0;
    margin-inline-end: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35)
}
/* لوگو سمت راست، بعد متن — در RTL همین DOM ترتیب کافی است */
.brand-logo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 2px solid #fff;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,.35)
}

.brand-text {
    background: linear-gradient(90deg,#ffffff 0%,#f5b301 35%,#ffffff 70%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldPulse 2.4s ease-in-out infinite
}

@keyframes goldPulse {
    0% {
        background-position: 0% 50%;
        text-shadow: 0 0 0 rgba(245,179,1,0)
    }

    50% {
        background-position: 100% 50%;
        text-shadow: 0 0 12px rgba(245,179,1,.45)
    }

    100% {
        background-position: 0% 50%;
        text-shadow: 0 0 0 rgba(245,179,1,0)
    }
}

.navbar-nav {
    gap: .25rem
}

.nav-item {
    position: relative
}

.nav-link {
    color: #c8d3e0 !important;
    font-weight: 600;
    padding: .65rem .9rem;
/*    border-radius: 10px;*/
    transition: all .25s
}

    .nav-link:hover {
        color: #fff !important;
        background: rgba(255,255,255,.06);
        transform: translateY(-1px)
    }

.dropdown-menu {
    --bs-dropdown-bg: #1f2b4a;
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-color: var(--txt);
    border-radius: 12px;
    padding: .5rem;
    min-width: 220px;
    animation: dropFade .22s ease both
}

.dropdown-item {
    color: #cbd5e1;
    font-weight: 500;
    border-radius: 8px;
    padding: .55rem .7rem
}

    .dropdown-item:hover {
        background: rgba(255,255,255,.08);
        color: #fff
    }

@keyframes dropFade {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

/* Caret */
.navbar .dropdown-toggle::after {
    display: none
}

/* منو بین برند و دکمه‌های ورود/ثبت‌نام مرکزچین */
@media (min-width: 992px) {
    .site-header .navbar > .container {
        display: flex;
        align-items: center
    }

    #mainnav {
        display: flex !important;
        align-items: center
    }

        #mainnav .navbar-nav {
            margin-inline: auto !important;
            gap: .25rem
        }

    .navbar-nav .nav-item + .nav-item .nav-link {
        border-inline-start: 1px solid var(--border)
    }

    .navbar-nav .nav-link {
        padding-inline: 1rem
    }
}

/* موبایل */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .navbar-nav .nav-item .nav-link {
        border-bottom: 1px solid var(--border)
    }

    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: 0
    }
}

/* RTL dropdown align */
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    margin-right: 10px;
    padding: 6px;
    border-radius: 14px;
    overflow: hidden;
    text-align: right;
    transform-origin: top right
}

    html[dir="rtl"] .dropdown-menu .dropdown-item {
        margin: 0;
        padding: .55rem .9rem;
        border-radius: 10px;
    }


    .navbar-brand .brand-text {
        background: linear-gradient(90deg,#ffffff 0%,#f5b301 35%,#ffffff 70%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: goldPulse 2.4s ease-in-out infinite
    }

@keyframes goldPulse {
    0% {
        background-position: 0% 50%;
        text-shadow: 0 0 0 rgba(245,179,1,0)
    }

    50% {
        background-position: 100% 50%;
        text-shadow: 0 0 12px rgba(245,179,1,.45)
    }

    100% {
        background-position: 0% 50%;
        text-shadow: 0 0 0 rgba(245,179,1,0)
    }
}

.navbar-nav {
    gap: .25rem
}

.nav-item {
    position: relative
}

.nav-link {
    color: #c8d3e0 !important;
    font-weight: 600;
    padding: .65rem .9rem;
    /*border-radius: 10px;*/
    transition: all .25s
}

    .nav-link:hover {
        color: #fff !important;
        background: rgba(255,255,255,.06);
        transform: translateY(-1px)
    }

.dropdown-menu {
    --bs-dropdown-bg: #1f2b4a;
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-color: var(--txt);
    border-radius: 12px;
    padding: .5rem;
    min-width: 220px;
    animation: dropFade .22s ease both
}

.dropdown-item {
    color: #cbd5e1;
    font-weight: 500;
    border-radius: 8px;
    padding: .55rem .7rem
}

    .dropdown-item:hover {
        background: rgba(255,255,255,.08);
        color: #fff
    }

@keyframes dropFade {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

/* Remove caret triangles */
.navbar .dropdown-toggle::after {
    display: none
}

/* Center nav between brand and login on desktop */
@media (min-width: 992px) {
    .site-header .navbar > .container {
        display: flex;
        align-items: center
    }

    #mainnav {
        display: flex !important;
        align-items: center
    }

        #mainnav .navbar-nav {
            margin-inline: auto !important;
            gap: .25rem
        }

    .navbar-nav .nav-item + .nav-item .nav-link {
        border-inline-start: 1px solid var(--border)
    }

    .navbar-nav .nav-link {
        padding-inline: 1rem
    }
}

/* Mobile spacing + separators */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .navbar-nav .nav-item .nav-link {
        border-bottom: 1px solid var(--border)
    }

    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: 0
    }

    .navbar-nav .nav-item:first-child .nav-link {
        margin-top: .35rem
    }

    .navbar-nav .nav-item:last-child .nav-link {
        margin-bottom: .5rem
    }
}

/* RTL dropdown align */
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    margin-right: 10px;
    padding: 6px;
    border-radius: 14px;
    overflow: hidden;
    text-align: right;
    transform-origin: top right
}

    html[dir="rtl"] .dropdown-menu .dropdown-item {
        margin: 0;
        padding: .55rem .9rem;
        border-radius: 10px;
    }
