/* =========================================
   TOPBAR USER AREA - BASE
   ========================================= */

.topbar-user-area {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

.topbar-user-area > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}


/* =========================================
   WELCOME
   ========================================= */

.topbar-user-welcome {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}


/* =========================================
   LOGOUT FORM
   ========================================= */

.topbar-user-logout-form {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================
   PROFILE + LOGOUT
   مشترک و کاملاً یکسان
   ========================================= */

.topbar-user-panel,
.topbar-user-logout {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    flex: 0 0 auto !important;

    width: auto !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 3px 9px !important;

    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 4px !important;

    background: rgba(255,255,255,0.05) !important;

    color: inherit !important;

    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;

    line-height: 20px !important;

    white-space: nowrap !important;
    text-decoration: none !important;

    vertical-align: middle !important;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


/* =========================================
   PROFILE + LOGOUT HOVER
   ========================================= */

.topbar-user-panel:hover,
.topbar-user-logout:hover {
    background: rgba(255,255,255,0.12) !important;

    border-color: rgba(255,255,255,0.35) !important;

    text-decoration: none !important;
}


/* =========================================
   LOGIN
   ========================================= */

.topbar-user-login {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    flex: 0 0 auto !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 3px 10px !important;

    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 4px !important;

    background: rgba(255,255,255,0.05) !important;

    color: inherit !important;

    font: inherit !important;

    line-height: 20px !important;

    white-space: nowrap !important;
    text-decoration: none !important;

    vertical-align: middle !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.topbar-user-login:hover {
    background: rgba(255,255,255,0.12) !important;

    border-color: rgba(255,255,255,0.35) !important;

    text-decoration: none !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       User Area
       ----------------------------------------- */

    .topbar-user-area {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: nowrap !important;

        margin: 9px 0 2px 0 !important;
        padding: 7px 5px 2px 5px !important;

        gap: 1px !important;

        clear: both !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;

        border-top: 1px solid rgba(255,255,255,0.12);
    }


    .topbar-user-area > * {
        flex: 0 0 auto !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------
       Welcome
       ----------------------------------------- */

    .topbar-user-welcome {
        display: inline-flex !important;

        align-items: center !important;

        height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 13px !important;

        line-height: 28px !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------
       Logged In
       Welcome + Profile + Logout
       ----------------------------------------- */

    .topbar-user-area.user-logged-in {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: nowrap !important;

        margin-top: 9px !important;
        padding: 7px 5px 2px 5px !important;

        gap: 10px !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;
    }


    .topbar-user-area.user-logged-in > * {
        flex: 0 0 auto !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------
       Profile + Logout
       موبایل: دقیقاً یک اندازه
       ----------------------------------------- */

    .topbar-user-area.user-logged-in .topbar-user-panel,
    .topbar-user-area.user-logged-in .topbar-user-logout {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        width: auto !important;

        height: 28px !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 3px 9px !important;

        border: 1px solid rgba(255,255,255,0.25) !important;
        border-radius: 5px !important;

        background: rgba(255,255,255,0.06) !important;

        color: inherit !important;

        font: inherit !important;
        font-size: 13px !important;
        font-weight: inherit !important;

        line-height: 20px !important;

        white-space: nowrap !important;
        text-decoration: none !important;

        vertical-align: middle !important;

        cursor: pointer;
    }


    /* -----------------------------------------
       Logout Form
       ----------------------------------------- */

    .topbar-user-area.user-logged-in .topbar-user-logout-form {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       Active
       ----------------------------------------- */

    .topbar-user-logout:active {
        transform: scale(0.96);

        background: rgba(255,255,255,0.12) !important;
    }


    /* -----------------------------------------
       Logged Out
       ----------------------------------------- */

    .topbar-user-area.user-logged-out {
        display: inline-flex !important;

        width: auto !important;
        max-width: none !important;
        flex-basis: auto !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: nowrap !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;

        border-top: none !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------
       Login
       ----------------------------------------- */

    .topbar-user-area.user-logged-out .topbar-user-login {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        height: 28px !important;
        min-height: 28px !important;

        margin: 0 0 0 10px !important;
        padding: 3px 10px !important;

        box-sizing: border-box !important;

        border-top: none !important;

        white-space: nowrap !important;
    }

}


/* =========================================
   MOBILE TOP BAR LEFT
   Special / Hot / Contact / Language
   همه در یک خط
   ========================================= */

@media (max-width: 767px) {

    .top-bar-left .top-bar-info {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: nowrap !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    .top-bar-left .top-bar-info > li {
        display: inline-flex !important;

        align-items: center !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 5px !important;

        flex: 0 0 auto !important;

        white-space: nowrap !important;
    }


    .top-bar-left .top-bar-info > li .info-link {
        display: inline-flex !important;

        align-items: center !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    .top-bar-left .top-bar-info > li .info-text {
        white-space: nowrap !important;
    }

}


/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

    /* -----------------------------------------
       User Area
       ----------------------------------------- */

    .topbar-user-area {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        flex-wrap: nowrap !important;

        margin-left: 12px !important;
        padding-left: 10px !important;

        border-left: 1px solid rgba(255,255,255,0.18);

        gap: 8px !important;

        white-space: nowrap !important;

        vertical-align: middle !important;
    }


    .topbar-user-area > * {
        display: inline-flex !important;

        align-items: center !important;

        flex: 0 0 auto !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------
       Welcome
       ----------------------------------------- */

    .topbar-user-welcome {
        display: inline-flex !important;

        align-items: center !important;

        height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 28px !important;

        white-space: nowrap !important;

        opacity: 0.95;
    }


    /* -----------------------------------------
       Logout Form
       ----------------------------------------- */

    .topbar-user-logout-form {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       Profile + Logout
       دقیقاً یک شکل و یک اندازه
       ----------------------------------------- */

    .topbar-user-panel,
    .topbar-user-logout {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        width: auto !important;

        height: 28px !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 3px 9px !important;

        border: 1px solid rgba(255,255,255,0.22) !important;
        border-radius: 4px !important;

        background: rgba(255,255,255,0.05) !important;

        color: inherit !important;

        font: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;

        line-height: 20px !important;

        white-space: nowrap !important;
        text-decoration: none !important;

        vertical-align: middle !important;

        cursor: pointer;
    }


    /* -----------------------------------------
       Hover
       ----------------------------------------- */

    .topbar-user-panel:hover,
    .topbar-user-logout:hover {

        background: rgba(255,255,255,0.12) !important;

        border-color: rgba(255,255,255,0.35) !important;

        text-decoration: none !important;
    }


    /* -----------------------------------------
       Login Desktop
       ----------------------------------------- */

    .topbar-user-login {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        height: 28px !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 3px 10px !important;

        border: 1px solid rgba(255,255,255,0.22) !important;
        border-radius: 4px !important;

        background: rgba(255,255,255,0.05) !important;

        color: inherit !important;

        font: inherit !important;

        line-height: 20px !important;

        white-space: nowrap !important;
        text-decoration: none !important;

        vertical-align: middle !important;
    }


    .topbar-user-login:hover {

        background: rgba(255,255,255,0.12) !important;

        border-color: rgba(255,255,255,0.35) !important;

        text-decoration: none !important;
    }


    /* -----------------------------------------
       Social Icons
       کمی به سمت وسط
       ----------------------------------------- */

    .top-bar-social-networks .inner {
        white-space: nowrap !important;
    }


    .top-bar-social-networks .inner > a {
        position: relative !important;
        left: 50px !important;
    }

}


/* =========================================
   ENGLISH MOBILE - SLIGHTLY COMPACT
   ========================================= */

@media (max-width: 767px) {

    .topbar-user-area.user-logged-in.topbar-english {
        gap: 7px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .topbar-user-area.user-logged-in.topbar-english
    .topbar-user-panel,
    .topbar-user-area.user-logged-in.topbar-english
    .topbar-user-logout {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 13px !important;
    }

}