/* =========================================================
   ROMANTIC DATING
   MINI GLASS MOBILE MENU
   ========================================================= */

.mobile-extra-backdrop,
.mobile-extra-menu {
    display: none;
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    .mobile-extra-backdrop,
    .mobile-extra-menu {
        display: block;
    }


    .mobile-extra-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1998;

        background: rgba(0, 0, 0, .03);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .20s ease,
            visibility .20s ease;
    }

    .mobile-extra-backdrop.open {
        opacity: 1;
        visibility: visible;
    }


    /* MENU */

    .mobile-extra-menu {
        position: fixed;

        /* ровно под шапкой */
        top: 50px;
        left: 0;

        width: 188px;
        box-sizing: border-box;

        padding: 5px 7px 8px;

        z-index: 1999;

        /* настоящее полупрозрачное стекло */
        background:
            linear-gradient(
                145deg,
                rgba(12, 10, 14, .46),
                rgba(28, 18, 25, .38)
            );

        border-right: 1px solid rgba(255,255,255,.13);
        border-bottom: 1px solid rgba(255,255,255,.13);

        border-radius: 0 0 13px 0;

        box-shadow:
            5px 8px 18px rgba(0,0,0,.13),
            inset 0 1px 0 rgba(255,255,255,.07);

        backdrop-filter:
            blur(14px)
            saturate(120%);

        -webkit-backdrop-filter:
            blur(14px)
            saturate(120%);

        transform: translateX(-105%);
        opacity: 0;

        transition:
            transform .23s cubic-bezier(.22,.61,.36,1),
            opacity .17s ease;
    }

    .mobile-extra-menu.open {
        transform: translateX(0);
        opacity: 1;
    }


    /* CLOSE */

    .mobile-extra-close {
        width: 28px;
        height: 28px;

        margin: 0 0 3px 3px;
        padding: 0;

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

        border: 0;
        outline: 0;
        background: transparent;

        color: rgba(255,255,255,.92);

        font-family: Arial, Helvetica, sans-serif;
        font-size: 27px;
        font-weight: 200;
        line-height: 1;

        cursor: pointer;
    }

    .mobile-extra-close:active {
        color: #ff1682;
        transform: scale(.92);
    }


    /* NAV */

    .mobile-extra-nav {
        display: flex;
        flex-direction: column;
        width: 100%;
    }


    /* ITEM */

    .mobile-extra-item {
        width: 100%;
        min-height: 39px;

        box-sizing: border-box;

        padding: 0 9px;

        display: flex;
        align-items: center;

        gap: 9px;

        color: rgba(255,255,255,.94) !important;

        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        font-weight: 500;
        line-height: 1;

        text-decoration: none !important;

        border-bottom:
            1px solid rgba(255,255,255,.10);
    }

    .mobile-extra-item:last-child {
        border-bottom: 0;
    }


    /* HOME */

    .mobile-extra-item.active {
        min-height: 41px;

        margin-bottom: 2px;

        color: #ff3a94 !important;

        border: 0;
        border-radius: 9px;

        background:
            linear-gradient(
                90deg,
                rgba(133, 7, 61, .35),
                rgba(194, 40, 100, .28)
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05);
    }


    /* ICON */

    .mobile-extra-icon {
        width: 21px;
        height: 21px;

        flex: 0 0 21px;

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

        color: rgba(255,255,255,.94);
    }

    .mobile-extra-item.active .mobile-extra-icon {
        color: #ff1682;
    }

    .mobile-extra-icon svg {
        width: 19px;
        height: 19px;

        display: block;
        fill: currentColor;
    }


    .mobile-extra-item:active {
        background: rgba(255,255,255,.05);
    }

    .mobile-extra-item.active:active {
        background:
            linear-gradient(
                90deg,
                rgba(133,7,61,.42),
                rgba(194,40,100,.34)
            );
    }
}
/* =========================================================
   HEADER AUTH LINKS
   ========================================================= */

.mobile-home-v11 .header-auth {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    white-space: nowrap;
}

.mobile-home-v11 .header-auth .forgot-password {
    color: rgba(255,255,255,.72);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}

.mobile-home-v11 .header-auth .forgot-password:active {
    color: #ff3a94;
}

.mobile-home-v11 .header-auth .login {
    white-space: nowrap;
}

@media (max-width: 370px) {
    .mobile-home-v11 .header-auth {
        gap: 6px;
    }

    .mobile-home-v11 .header-auth .forgot-password {
        font-size: 9px;
    }
}