/* =========================================================
   ZENITH KARATE ACADEMY
   SHARED MOBILE NAVIGATION
========================================================= */

.mobile-nav-menu {
    position: fixed;

    inset: 0;

    z-index: 5000;

    pointer-events: none;
}


.mobile-nav-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.72);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    opacity: 0;

    transition:
        opacity 0.25s ease;
}


.mobile-nav-panel {
    position: absolute;

    top: 0;
    right: 0;

    width:
        min(88vw, 360px);

    height: 100%;

    display: flex;

    flex-direction: column;

    padding:
        1rem;

    background:
        linear-gradient(
            145deg,
            #151515,
            #090909
        );

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

    box-shadow:
        -20px 0 60px
        rgba(0, 0, 0, 0.5);

    transform:
        translateX(100%);

    transition:
        transform 0.3s cubic-bezier(
            0.25,
            0.8,
            0.25,
            1
        );

    overflow-y: auto;
}


.mobile-nav-menu.active {
    pointer-events: auto;
}


.mobile-nav-menu.active
.mobile-nav-overlay {
    opacity: 1;
}


.mobile-nav-menu.active
.mobile-nav-panel {
    transform:
        translateX(0);
}


/* =========================================================
   HEADER
========================================================= */

.mobile-nav-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        0.5rem
        0 1rem
        1.25rem;

    margin-bottom: 1rem;

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


.mobile-nav-brand {
    display: flex;

    flex-direction: column;
}


.mobile-nav-brand-title {
    font-size: 1.8rem;

    letter-spacing: 2px;

    line-height: 1;
}


.mobile-nav-brand-subtitle {
    margin-top: 5px;

    color:
        #c91111;

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.mobile-nav-close {
    width: 42px;
    height: 42px;

    display: flex;

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

    flex-shrink: 0;

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

    border-radius: 6px;

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

    color: white;

    font-size: 1.55rem;

    cursor: pointer;

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


.mobile-nav-close:hover {
    background:
        rgba(230, 7, 44, 0.1);

    border-color:
        rgba(230, 7, 44, 0.5);
}


.mobile-nav-close:active {
    transform:
        scale(0.94);
}


/* =========================================================
   LINKS
========================================================= */

.mobile-nav-links {
    display: flex;

    flex-direction: column;

    gap: 0.35rem;
}


.mobile-nav-link {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 50px;

    padding:
        0.8rem
        1rem;

    border:
        1px solid
        transparent;

    border-radius: 5px;

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

    color: white;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 1.5px;

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


.mobile-nav-link::after {
    content: "→";

    margin-left: auto;

    color:
        rgba(253, 178, 3, 0.6);

    transition:
        transform 0.2s ease;
}


.mobile-nav-link:hover,
.mobile-nav-link:active {
    background:
        rgba(230, 7, 44, 0.08);

    border-color:
        rgba(230, 7, 44, 0.18);

    color:
        #ffffff;

    transform:
        translateX(3px);
}


.mobile-nav-link:hover::after,
.mobile-nav-link:active::after {
    transform:
        translateX(4px);
}


/* =========================================================
   ACTIONS
========================================================= */

.mobile-nav-actions {
    display: flex;

    flex-direction: column;

    gap: 0.55rem;

    margin-top: auto;

    padding-top: 1.25rem;
}


.mobile-nav-action {
    width: 100%;

    min-height: 48px;

    display: flex;

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

    border-radius: 5px;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.2px;

    cursor: pointer;

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


.mobile-nav-login,
.mobile-nav-account,
.mobile-nav-profile {
    border:
        1px solid
        rgba(212, 175, 55, 0.35);

    background:
        rgba(212, 175, 55, 0.06);

    color:
        #fdb203;
}


.mobile-nav-login:hover,
.mobile-nav-account:hover,
.mobile-nav-profile:hover {
    background:
        rgba(212, 175, 55, 0.12);

    border-color:
        rgba(212, 175, 55, 0.6);

    transform:
        translateY(-1px);
}


.mobile-nav-logout {
    border:
        1px solid
        rgba(230, 7, 44, 0.5);

    background:
        linear-gradient(
            135deg,
            #750718,
            #a90722
        );

    color: white;
}


.mobile-nav-logout:hover {
    background:
        linear-gradient(
            135deg,
            #a90722,
            #e6072c
        );

    transform:
        translateY(-1px);
}


/* =========================================================
   BODY LOCK
========================================================= */

body.mobile-nav-open {
    overflow: hidden;
}


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

@media (min-width: 1001px) {

    .mobile-nav-menu {
        display: none;
    }

}


@media (max-width: 420px) {

    .mobile-nav-panel {
        width:
            min(92vw, 330px);
    }

    .mobile-nav-brand-title {
        font-size: 1.55rem;
    }

    .mobile-nav-link {
        min-height: 47px;

        font-size: 0.68rem;
    }

}


/* =========================================================
   MOBILE NAVBAR ACCOUNT BUTTON
========================================================= */

@media (max-width: 600px) {

    .navigationbar .account-menu {
        display: none;
    }

    .account-button {
        width: 2.55rem;
        height: 2.55rem;
    }


    .account-icon {
        width: 1.2rem;
        height: 1.2rem;
    }


    .account-menu-panel {
        top:
            calc(
                100% + 0.55rem
            );

        min-width: 8.5rem;
    }
}