/* GETCOURSE — CUSTOM SIDEBAR / CSS v2.14 */
/* Variables */
:root {
    --psych-primary: #3499FD;
    --psych-primary-hover: #218AF4;
    --psych-primary-soft: #EAF4FF;
    --psych-bg: #FFFFFF;
    --psych-text: #171C26;
    --psych-muted: #697386;
    --psych-muted-light: #98A2B3;
    --psych-border: #EEF1F5;
    --psych-border-strong: #E3E8EF;
    --psych-danger: #E5484D;
    --psych-sidebar-width: 252px;
}
/* Preload / FOUC */
#gcAccountUserMenu .gc-account-leftbar {
    background: #FFFFFF !important;
}
#gcAccountUserMenu .gc-account-user-menu > li,
#gcAccountUserMenu .gc-account-user-menu > li > a {
    background: transparent !important;
}
#gcAccountUserMenu .gc-account-leftbar:not(.gc-psych-leftbar) {
    visibility: hidden !important;
}
#gcAccountUserMenu .gc-account-leftbar.gc-psych-leftbar {
    visibility: visible !important;
}
/* Sidebar */
#gcAccountUserMenu
.gc-account-leftbar.gc-psych-leftbar {
    width: var(--psych-sidebar-width) !important;
    background: var(--psych-bg) !important;
    border-right:
        1px solid var(--psych-border) !important;
    box-shadow: none !important;
}
/* Desktop toggle */
#gcAccountUserMenu
.gc-account-leftbar.gc-psych-leftbar
> .toggle-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: 64px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}
#gcAccountUserMenu
.gc-account-leftbar.gc-psych-leftbar
> .toggle-link img {
    width: 24px !important;
    height: 24px !important;
    opacity: 0.55;
    transition:
        opacity 0.18s ease !important;
}
#gcAccountUserMenu
.gc-account-leftbar.gc-psych-leftbar
> .toggle-link:hover img {
    opacity: 0.85;
}
/* Main menu */
#gcAccountUserMenu
.gc-account-user-menu {
    margin: 0 !important;
    padding:
        8px
        12px
        24px !important;
    box-sizing: border-box !important;
}
/* Menu item */
#gcAccountUserMenu
.gc-account-user-menu
> li.gc-psych-menu-item {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    background: transparent !important;
}
/* Menu link */
#gcAccountUserMenu
.gc-account-user-menu
> li.gc-psych-menu-item
> a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--psych-muted) !important;
    text-decoration: none !important;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease !important;
}
/* Remove GetCourse item borders */
#gcAccountUserMenu
.gc-account-leftbar.gc-psych-leftbar
.gc-account-user-menu
> li {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
}
/* Hide GetCourse icons */
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item:not(.menu-item-profile)
> a
> img.menu-item-icon,
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item
> a::after {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    content: none !important;
}
/* Custom SVG icon */
#gcAccountUserMenu
.gc-psych-menu-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    color: currentColor !important;
    transition:
        color 0.18s ease !important;
}
/* Label */
#gcAccountUserMenu
.gc-account-user-menu
> li.gc-psych-menu-item
.menu-item-label {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-family:
        Manrope,
        Arial,
        sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Hover */
#gcAccountUserMenu
.gc-account-user-menu
> li.gc-psych-menu-item:not(.active)
> a:hover {
    background:
        var(--psych-primary-soft) !important;
    color:
        var(--psych-primary) !important;
}
/* Active */
#gcAccountUserMenu
.gc-account-user-menu
> li.gc-psych-menu-item.active
> a {
    background:
        var(--psych-primary) !important;
    color: #FFFFFF !important;
    box-shadow:
        0 4px 12px
        rgba(52, 153, 253, 0.16) !important;
}
/* Notification badge */
#gcAccountUserMenu
.gc-account-user-menu
.notify-count {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    transform:
        translateY(-50%) !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 99px !important;
    background:
        var(--psych-danger) !important;
    color: #FFFFFF !important;
    font-family:
        Manrope,
        Arial,
        sans-serif !important;
    font-size: 10px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    text-align: center !important;
    z-index: 2 !important;
}
/* Profile */
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item-profile.gc-psych-menu-item {
    margin-bottom: 16px !important;
}
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item-profile.gc-psych-menu-item
> a {
    min-height: 60px !important;
    height: 60px !important;
    padding: 10px 12px !important;
    background: #F8FAFC !important;
    border:
        1px solid var(--psych-border) !important;
    border-radius: 14px !important;
    color: var(--psych-text) !important;
}
/* Profile hover */
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item-profile.gc-psych-menu-item:not(.active)
> a:hover {
    background: #F3F8FE !important;
    border-color: #DDEBFA !important;
    color: var(--psych-primary) !important;
}
/* Profile active */
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item-profile.gc-psych-menu-item.active
> a {
    background:
        var(--psych-primary) !important;
    border-color:
        var(--psych-primary) !important;
    color: #FFFFFF !important;
}
/* Profile avatar */
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item-profile
> a
> img.menu-item-icon {
    display: block !important;
    visibility: visible !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    background:
        var(--psych-primary-soft) !important;
    box-shadow:
        0 0 0 1px
        rgba(23, 28, 38, 0.05) !important;
    opacity: 1 !important;
}
/* Hidden GetCourse items */
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item-marathon,
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item-notifications_button_small,
#gcAccountUserMenu
.gc-account-user-menu
> li.menu-item-search {
    display: none !important;
}

/* Balance */
#gcAccountUserMenu .gc-account-user-submenu-bar .user-balance {
    display: none !important;
}

/* Desktop page offset */
@media (min-width: 768px) {
    body
    .gc-main-content.with-left-menu {
        margin-left:
            var(--psych-sidebar-width) !important;
    }
}
/* Mobile */
@media (max-width: 767px) {
    /* Page */
    body
    .gc-main-content.with-left-menu,
    body
    .gc-both-main-content.with-left-menu {
        margin-left: 0 !important;
    }
    /* Sidebar — closed */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: 16px !important;
        left: 16px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: 2147483000 !important;
    }
    /* Mobile burger */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    > .toggle-link {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: #FFFFFF !important;
        border:
            1px solid var(--psych-border-strong) !important;
        border-radius: 12px !important;
        box-shadow:
            0 6px 20px
            rgba(23, 28, 38, 0.16) !important;
        z-index: 3 !important;
        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            box-shadow 0.18s ease !important;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    > .toggle-link:active {
        background:
            var(--psych-primary-soft) !important;
        border-color: #D0E7FD !important;
    }
    /* Hide native bars.svg */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    > .toggle-link
    > img {
        display: none !important;
    }
    /* Custom burger */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    > .toggle-link::before {
        content: "" !important;
        display: block !important;
        width: 20px !important;
        height: 14px !important;
        background:
            linear-gradient(
                #344054,
                #344054
            )
            0 0 / 20px 2px no-repeat,
            linear-gradient(
                #344054,
                #344054
            )
            0 6px / 20px 2px no-repeat,
            linear-gradient(
                #344054,
                #344054
            )
            0 12px / 20px 2px no-repeat !important;
        border-radius: 2px !important;
    }
    /* Closed menu content */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar:not(.expanded)
    .gc-account-user-menu,
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar:not(.expanded)
    .gc-account-user-submenu-bar {
        display: none !important;
    }
    /* Sidebar — open */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width:
            min(
                320px,
                calc(100vw - 24px)
            ) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        border: 0 !important;
        border-right:
            1px solid var(--psych-border) !important;
        border-radius:
            0
            18px
            18px
            0 !important;
        box-shadow:
            12px 0 40px
            rgba(23, 28, 38, 0.15) !important;
        overflow: hidden !important;
        z-index: 2147483000 !important;
    }
    /* Close button */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    > .toggle-link {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        background: #F7F9FC !important;
        border-color:
            var(--psych-border) !important;
        box-shadow: none !important;
        /* Submenu z-index: 20; close button stays above it */
        z-index: 30 !important;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    > .toggle-link::before {
        width: 18px !important;
        height: 18px !important;
        background:
            linear-gradient(
                45deg,
                transparent 45%,
                #344054 45%,
                #344054 55%,
                transparent 55%
            ),
            linear-gradient(
                -45deg,
                transparent 45%,
                #344054 45%,
                #344054 55%,
                transparent 55%
            ) !important;
    }
    /* First level list */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .gc-account-user-menu {
        position: absolute !important;
        top: 64px !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height:
            calc(100vh - 64px) !important;
        height:
            calc(100dvh - 64px) !important;
        margin: 0 !important;
        padding:
            8px
            12px
            24px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #FFFFFF !important;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .gc-account-user-menu
    > li.gc-psych-menu-item {
        width: 100% !important;
        margin: 0 0 4px !important;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .gc-account-user-menu
    > li.gc-psych-menu-item
    > a {
        width: 100% !important;
        min-height: 50px !important;
        height: 50px !important;
        padding:
            0
            42px
            0
            12px !important;
        box-sizing: border-box !important;
    }
    /* Mobile icons — gap is already set on <a> */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .gc-psych-menu-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        flex: 0 0 22px !important;
        margin: 0 !important;
    }
    /* Mobile label */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .menu-item-label {
        position: static !important;
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Mobile profile */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .menu-item-profile
    > a {
        min-height: 64px !important;
        height: 64px !important;
        padding: 10px 12px !important;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .menu-item-profile
    .menu-item-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex: 0 0 40px !important;
        margin: 0 !important;
    }
    /* Mobile badge */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .notify-count {
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        transform:
            translateY(-50%) !important;
    }
}
/* Desktop scrollbar */
@media (min-width: 768px) {
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    .gc-account-user-menu {
        scrollbar-width: thin;
        scrollbar-color: #D9DEE7 transparent;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    .gc-account-user-menu::-webkit-scrollbar {
        width: 5px;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    .gc-account-user-menu::-webkit-scrollbar-track {
        background: transparent;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    .gc-account-user-menu::-webkit-scrollbar-thumb {
        background: #D9DEE7;
        border-radius: 10px;
    }
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar
    .gc-account-user-menu::-webkit-scrollbar-thumb:hover {
        background: #C6CDD8;
    }
}
/* Mobile drawer animation */
@media (max-width: 767px) {
    /*
     * The fixed sidebar itself is never transformed.
     * This avoids creating extra containing-block behavior on mobile browsers.
     */
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded {
        animation:
            psychSidebarFadeIn
            0.20s
            ease-out
            both !important;
    }

    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .gc-account-user-menu {
        animation:
            psychSidebarContentIn
            0.22s
            ease-out
            0.03s
            both !important;
    }

    @keyframes psychSidebarFadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes psychSidebarContentIn {
        0% {
            opacity: 0;
            transform:
                translate3d(-8px, 0, 0);
        }
        100% {
            opacity: 1;
            transform:
                translate3d(0, 0, 0);
        }
    }

    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded
    .gc-account-user-menu
    > li.gc-psych-menu-item {
        animation: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        #gcAccountUserMenu
        .gc-account-leftbar.gc-psych-leftbar.expanded,
        #gcAccountUserMenu
        .gc-account-leftbar.gc-psych-leftbar.expanded
        .gc-account-user-menu {
            animation: none !important;
        }
    }
}

/* =========================================================
   Firefox Android — visual viewport positioning / v2.14
   ---------------------------------------------------------
   Uses the current visualViewport directly, exactly like
   the successful v2.12 debug build, for both floating controls.
   ========================================================= */
@media (max-width: 767px) {

    html.gc-psych-firefox-android
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar:not(.expanded) {
        position: fixed !important;
        top:
            var(
                --gc-firefox-fixed-top,
                auto
            ) !important;
        right: auto !important;
        bottom: auto !important;
        left: 16px !important;
        z-index: 2147483000 !important;
    }

    html.gc-psych-firefox-android
    #gcAccountUserMenu
    .gc-page-nav-items-menu
    > .toggler-item {
        position: fixed !important;
        top:
            var(
                --gc-firefox-fixed-top,
                auto
            ) !important;
        bottom: auto !important;
        z-index: 2147483000 !important;
    }

    html.gc-psych-firefox-android
    #gcAccountUserMenu
    .gc-account-leftbar.gc-psych-leftbar.expanded {
        top: 0 !important;
        bottom: auto !important;
    }
}