/* هدر: نوار بالایی، هدر اصلی، جستجو، منو و منوی موبایل */
.topbar {
    background: var(--dark);
    color: #cbd5e1;
    font-size: 13px
}

    .topbar .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 16px;
        flex-wrap: wrap
    }

    .topbar a:hover {
        color: #fff
    }

    .topbar .grp {
        display: flex;
        gap: 16px;
        align-items: center
    }

    .topbar select {
        background: transparent;
        color: #cbd5e1;
        border: 0;
        margin: 0;
        padding: 0;
        width: auto;
        box-shadow: none
    }

    .topbar option {
        color: #000
    }

header.main {
    background: var(--card);
    box-shadow: var(--sh);
    position: sticky;
    top: 0;
    z-index: 30
}

.hbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 16px
}

.search {
    flex: 1;
    display: flex;
    position: relative
}

    .search input {
        margin: 0;
        border-radius: 0 8px 8px 0;
        border-left: 0
    }

    .search .btn {
        border-radius: 8px 0 0 8px
    }

    .search select {
        width: 130px;
        margin: 0;
        border-radius: 0;
        /*border-left: 0*/
    }

.hact {
    display: flex;
    gap: 8px;
    align-items: center
}

.burger {
    display: none
}

nav.menu a {
    padding: 10px 18px;
    font-weight: 500;
    display: block
}

    nav.menu a:hover, nav.menu a.on {
        background: var(--pri)
    }

.dd {
    position: relative
}

    .dd .sub {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--card);
        color: var(--text);
        min-width: 200px;
        box-shadow: var(--sh);
        border-radius: 0 0 8px 8px;
        z-index: 5;
        border: 1px solid var(--line)
    }

    .dd:hover .sub {
        display: block
    }

    .dd .sub a:hover {
        background: var(--pri-soft);
        color: var(--pri)
    }

nav.menu {
    background: var(--dark2);
    color: #fff;
    display: grid;
    grid-template-rows: 1fr
}

    nav.menu .wrap {
        display: flex;
        gap: 2px;
        min-height: 0
    }

.burger svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round
}

.burger .x {
    display: none
}

.burger.open .b {
    display: none
}

.burger.open .x {
    display: block
}

@media(max-width:700px) {
    .topbar .grp:first-child {
        display: none
    }

    .topbar .wrap {
        justify-content: center;
        padding: 4px 16px
    }

    .burger {
        display: grid
    }

    .hbar {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 14px
    }

    .burger {
        order: 1
    }

    .logo {
        order: 2;
        flex: 1;
        font-size: 21px;
        text-align: right
    }

    .hact {
        order: 3;
        gap: 6px
    }

    .search {
        order: 4;
        flex-basis: 100%
    }

    .ic {
        width: 38px;
        height: 38px;
        font-size: 16px;
        border-radius: 9px
    }

    .hact a[title="حساب کاربری"] {
        display: none
    }

    .search select {
        display: none
    }

    .search input {
        border-radius: 0 8px 8px 0;
        border-left: 0
    }

    nav.menu {
        grid-template-rows: 0fr;
        opacity: 0;
        visibility: hidden;
        transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility 0s linear .35s
    }

        nav.menu.open {
            grid-template-rows: 1fr;
            opacity: 1;
            visibility: visible;
            transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility 0s
        }

        nav.menu .wrap {
            flex-direction: column;
            overflow: hidden;
            gap: 0;
            padding: 0
        }

        nav.menu.open .wrap {
            overflow-y: auto;
            max-height: 60vh
        }

        nav.menu a {
            padding: 12px 20px;
            border-top: 1px solid rgba(255,255,255,.07)
        }

    .dd .sub {
        display: block;
        position: static;
        background: rgba(255,255,255,.05);
        color: #cbd5e1;
        border: 0;
        box-shadow: none;
        border-radius: 0
    }

        .dd .sub a {
            padding: 9px 38px;
            font-size: 14px
        }
}