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

@media (max-width: 768px) {

    .mobile-menu {
        position: absolute;

        top: 100%;
        left: 12px;
        right: 12px;

        width: auto;
        max-width: none;

        box-sizing: border-box;

        padding: 10px;

        margin: 0;

        border-radius: 18px;

        background: rgba(255, 255, 255, 0.98);

        border: 1px solid rgba(0, 0, 0, 0.08);

        box-shadow:
            0 18px 50px rgba(0, 0, 0, 0.14);

        z-index: 10000;

        overflow: visible;
    }


    /* ========================================================
       ОСНОВНЫЕ ПУНКТЫ
       ======================================================== */

    .mobile-menu > a {
        box-sizing: border-box;

        display: flex;
        align-items: center;

        width: 100%;

        min-height: 42px;

        padding: 9px 12px;

        margin: 2px 0;

        border-radius: 10px;

        color: #111;

        text-decoration: none;

        font-size: 14px;
        font-weight: 600;

        line-height: 1.2;

        white-space: nowrap;

        transition:
            background 0.15s ease,
            transform 0.15s ease;
    }


    .mobile-menu > a:hover {
        background: rgba(0, 0, 0, 0.04);
    }


    .mobile-menu > a:active {
        transform: scale(0.98);
    }


    /* ========================================================
       РАЗДЕЛИТЕЛЬ
       ======================================================== */

    .mobile-menu-divider {
        width: 100%;
        height: 1px;

        margin: 8px 0;

        background: rgba(0, 0, 0, 0.08);
    }


    /* ========================================================
       ПОЛЬЗОВАТЕЛЬ
       ======================================================== */

    .mobile-user {
        display: flex;
        align-items: center;

        width: 100%;

        box-sizing: border-box;

        padding: 8px 10px;

        gap: 10px;
    }


    .mobile-user-avatar {
        width: 36px;
        height: 36px;

        min-width: 36px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #fec30a;

        color: #111;

        font-size: 14px;
        font-weight: 700;
    }


    .mobile-user-name {
        max-width: calc(100vw - 100px);

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        font-size: 14px;
        font-weight: 700;

        line-height: 1.2;
    }


    .mobile-user-label {
        margin-top: 2px;

        font-size: 11px;

        color: rgba(0, 0, 0, 0.5);

        line-height: 1.2;
    }


    /* ========================================================
       ССЫЛКИ ПОЛЬЗОВАТЕЛЯ
       ======================================================== */

    .mobile-user-link {
        display: flex;
        align-items: center;

        width: 100%;

        min-height: 42px;

        box-sizing: border-box;

        padding: 8px 10px;

        margin: 2px 0;

        gap: 10px;

        border-radius: 10px;

        color: #111;

        text-decoration: none;

        font-size: 14px;
        font-weight: 600;

        line-height: 1.2;

        white-space: nowrap;

        transition:
            background 0.15s ease,
            transform 0.15s ease;
    }


    .mobile-user-link:hover {
        background: rgba(0, 0, 0, 0.04);
    }


    .mobile-user-link:active {
        transform: scale(0.98);
    }


    /* ========================================================
       ИКОНКИ
       ======================================================== */

    .mobile-user-link-icon {
        width: 28px;
        height: 28px;

        min-width: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 8px;

        background: rgba(254, 195, 10, 0.14);

        font-size: 14px;
    }


    /* ========================================================
       ВЫХОД
       ======================================================== */

    .mobile-user-logout {
        color: #555;
    }


    .mobile-user-logout .mobile-user-link-icon {
        background: rgba(0, 0, 0, 0.05);
    }


    /* ========================================================
       КНОПКА
       ======================================================== */

    .mobile-menu .btn-primary {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;

        min-height: 42px;

        box-sizing: border-box;

        margin-top: 6px;

        padding: 9px 12px;

        border-radius: 10px;

        font-size: 14px;
        font-weight: 700;

        white-space: nowrap;
    }

}


/* ============================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ
   ============================================================ */

@media (max-width: 380px) {

    .mobile-menu {
        left: 8px;
        right: 8px;

        padding: 8px;

        border-radius: 16px;
    }


    .mobile-menu > a {
        min-height: 40px;

        padding: 8px 10px;

        font-size: 13px;
    }


    .mobile-user {
        padding: 7px 8px;
    }


    .mobile-user-avatar {
        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size: 13px;
    }


    .mobile-user-link {
        min-height: 40px;

        padding: 8px;

        font-size: 13px;
    }


    .mobile-user-link-icon {
        width: 26px;
        height: 26px;

        min-width: 26px;
    }


    .mobile-menu .btn-primary {
        min-height: 40px;

        font-size: 13px;
    }

}

@media (max-width: 768px) {

    .nav-right > .btn-login {
        display: none;
    }

}