/*  ============================================================================
    UNIFIED SUBNAV CSS
    Description: For Customer Account, Account Settings, Social Settings, Vendor Dashboard, etc
    File location: /wp-content/plugins/spirit-collective/shared/components/navigation/sc-navigation.css
    ============================================================================ */

/* #region CSS VARIABLES FOR SHARED VALUES  */
/* ======================================== */
:root {
    /* Typography */
    --subnav-font-family: var(--sc-font-heading);
    --subnav-item-font-size: 14px;

    /* Colors - Now using SC variables */
    --sc-text-dark: var(--sc-color-text);
    --sc-text-light: var(--sc-color-white);
    --sc-pink: var(--sc-color-primary);
    --sc-tan: var(--sc-color-active-menu-item);
    
    /* Spacing */
    --subnav-item-gap: var(--sc-space-5);
    --subnav-item-padding: 13px var(--sc-space-20);
    --subnav-collapsed-padding: var(--sc-space-12);
    --subnav-heading-padding-top: 13px;
    --subnav-heading-padding-bottom: var(--sc-space-10);
    
    /* Sizing */
    --subnav-icon-size: var(--sc-space-18);
    --subnav-icon-font-size: 24px;
    --subnav-icon-font-size-fa: 17px; /* Font Awesome icons */
    --subnav-width: 250px;
    --subnav-collapsed-width: 68px;
    --subnav-mobile-header-height: 44px;
    --mobile-header-height: 60px;
    
    /* Border Radius */
    --subnav-item-radius: var(--sc-radius-6);
    
    /* Transitions */
    --subnav-transition-speed: 0.2s;
    --subnav-mobile-transition-speed: var(--sc-transition);
}
/* #endregion CSS VARIABLES FOR SHARED VALUES */

/* #region BASE CONTAINER STYLES            */
/* ======================================== */

#custom-subnav #subnav-header {
    background-color: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 60px;
    position: relative;
    z-index: 29;
}
/* #endregion BASE CONTAINER STYLES */

/* #region MENU STRUCTURE & ITEMS           */
/* ======================================== */

/* Menu Container */
#custom-subnav #menu-container {
    padding: 0 var(--sc-space-20);
}

/* All Menu Lists - Normalize structure */
#custom-subnav .subnav-menu,
#custom-subnav .tutor-dashboard-permalinks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* All Menu Items */
#custom-subnav .subnav-menu-item,
#custom-subnav .tutor-dashboard-menu-item {
    margin-bottom: var(--subnav-item-gap);
    display: flex;
    cursor: pointer;
}

/* Remove bottom margin from last items */
#custom-subnav .subnav-menu-item:last-child,
#custom-subnav .subnav-menu-item.has-submenu,
#custom-subnav .tutor-dashboard-menu-item:last-child {
    margin-bottom: 0;
}

/* All Menu Links */
#custom-subnav .subnav-menu-item a,
#custom-subnav .tutor-dashboard-menu-item-link,
#custom-subnav .subnav-link {
    font-family: var(--subnav-font-family);
    font-weight: 400;
    background-color: transparent;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: -0.24px;
    color: var(--sc-text-dark);
    transition-duration: 0s;
    border-radius: var(--subnav-item-radius);
    padding: var(--subnav-item-padding);
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sc-space-10);
    text-decoration: none;
    box-shadow: initial;
}

/* Menu Link Hover States */
#custom-subnav .subnav-menu-item:not(.active):not(.current-menu-item) a:hover,
#custom-subnav .subnav-menu-item:not(.active):not(.current-menu-item) a:focus,
#custom-subnav .tutor-dashboard-menu-item-link:hover:not(.active):not(.current-menu-item) {
    background-color: var(--sc-pink);
    color: var(--sc-text-light);
}

/* Parent item stays highlighted when hovering submenu */
#custom-subnav .subnav-menu-item.has-submenu:not(.active):not(.current-menu-item):hover > a,
#custom-subnav .subnav-menu-item.has-submenu:not(.active):not(.current-menu-item):hover > a {
    background-color: var(--sc-pink);
    color: var(--sc-text-light);
}

/* Menu dropdown caret hover color */
#custom-subnav .subnav-menu-item:not(.active):not(.current-menu-item):hover .menu-dropdown,
#custom-subnav .subnav-menu-item.has-submenu:not(.active):not(.current-menu-item):hover > a i {
    color: var(--sc-text-light);
}

/* Active/Current Menu States */
#custom-subnav .current-menu-item > a,
#custom-subnav .subnav-menu-item.active > a,
#custom-subnav .tutor-dashboard-menu-item.current-menu-item .tutor-dashboard-menu-item-link {
    background-color: var(--bb-sidenav-menu-background-color-active);
    color: var(--bb-sidenav-text-active);
}

/* Active state hover - maintain active appearance */
#custom-subnav .current-menu-item:hover > a,
#custom-subnav .subnav-menu-item.active:hover > a {
    color: var(--bb-sidenav-text-active);
    background-color: var(--bb-sidenav-menu-background-color-active);
}
/* #endregion MENU STRUCTURE & ITEMS */

/* #region MENU TEXT & ICONS                */
/* ======================================== */

/* Menu Text */
#custom-subnav .subnav-text,
#custom-subnav .tutor-dashboard-menu-item-text {
    text-wrap-mode: nowrap;
    font-family: var(--subnav-font-family);
}

/* All Icons - Base styles */
#custom-subnav .subnav-icon,
#custom-subnav .subnav-icon i,
#custom-subnav .subnav-menu-item svg,
#custom-subnav .tutor-dashboard-menu-item-icon {
    color: var(--bb-sidenav-text-regular);
    fill: var(--bb-sidenav-text-regular);
    opacity: 1;
    height: var(--subnav-icon-size);
    width: var(--subnav-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* BuddyBoss icons */
#custom-subnav .subnav-icon i[class*="bb-icon-"], #custom-subnav .navigation-submenu i[class*="bb-icon-"] {
    font-size: var(--subnav-icon-font-size);
}

/* Font Awesome icons */
#custom-subnav .subnav-icon .fas,
#custom-subnav .subnav-icon .far,
#custom-subnav .subnav-icon .fab {
    font-size: var(--subnav-icon-font-size-fa);
}

/* Icon hover states */
#custom-subnav .subnav-menu-item:not(.active):not(.current-menu-item) a:hover .subnav-icon,
#custom-subnav .subnav-menu-item:not(.active):not(.current-menu-item) a:hover .subnav-icon i,
#custom-subnav .subnav-menu-item:not(.active):not(.current-menu-item) a:hover svg,
#custom-subnav .tutor-dashboard-menu-item-link:hover:not(.active):not(.current-menu-item) .tutor-dashboard-menu-item-icon {
    fill: var(--sc-text-light);
    color: var(--sc-text-light);
    opacity: 1;
}

/* Active state icons */
#custom-subnav .current-menu-item .subnav-icon,
#custom-subnav .current-menu-item .subnav-icon i,
#custom-subnav .current-menu-item svg,
#custom-subnav .subnav-menu-item.active .subnav-icon i,
#custom-subnav .tutor-dashboard-menu-item.current-menu-item .tutor-dashboard-menu-item-icon {
    fill: var(--bb-sidenav-text-active);
    color: var(--bb-sidenav-text-active);
    opacity: 1;
}

/* SVG icon support */
#custom-subnav .subnav-icon svg {
    fill: var(--bb-sidenav-text-regular);
    height: var(--subnav-icon-size);
    width: var(--subnav-icon-size);
    display: inline-flex;
    vertical-align: middle;
}

/* SVG hover states */
#custom-subnav .subnav-menu-item:not(.active):not(.current-menu-item) a:hover .subnav-icon svg,
#custom-subnav .subnav-menu-item:not(.active):not(.current-menu-item) a:hover .subnav-icon svg path {
    fill: var(--sc-text-light);
}

/* SVG active states */
#custom-subnav .current-menu-item .subnav-icon svg,
#custom-subnav .current-menu-item .subnav-icon svg path,
#custom-subnav .subnav-menu-item.active .subnav-icon svg,
#custom-subnav .subnav-menu-item.active .subnav-icon svg path {
    fill: var(--bb-sidenav-text-active);
}

/* Submenu SVG icons */
#custom-subnav .navigation-submenu svg {
    fill: var(--bb-body-text-color);
    height: 24px;
    width: 24px;
    vertical-align: middle;
    padding-top: 4px;
}
#custom-subnav .navigation-submenu svg path {
    fill: var(--bb-body-text-color);
}
#custom-subnav .navigation-submenu li.current svg path, #custom-subnav .navigation-submenu a:hover svg path {
    fill: var(--sc-text-light);
}

/* Fix Tutor Pro create course button icon */
.tutor-dashboard-create-course .tutor-icon-plus-light::before,
.tutor-create-new-course .tutor-icon-plus-light::before {
    font-family: "tutor" !important;
    font-size: var(--sc-space-15);
}
/* #endregion MENU TEXT & ICONS */

/* #region HEADINGS & DIVIDERS              */
/* ======================================== */

/* All Headings */
#custom-subnav .subnav-heading h2,
#custom-subnav .tutor-dashboard-menu-divider-header {
    margin-bottom: 0;
    color: var(--bb-sidenav-text-regular);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--subnav-item-font-size);
    opacity: 0.5;
    line-height: 16.8px;
    font-family: var(--subnav-font-family);
}

/* Heading spacing */
#custom-subnav .tutor-dashboard-menu-divider-header,
#custom-subnav .subnav-heading {
    padding-bottom: var(--subnav-heading-padding-bottom);
    margin-bottom: 0;
}

/* Dividers */
#custom-subnav .tutor-dashboard-menu-divider {
    height: 1px;
    background-color: var(--bb-sidenav-text-regular);
    opacity: 0.2;
    margin: var(--sc-space-15) 0;
    list-style: none;
}
/* #endregion HEADINGS & DIVIDERS */

/* #region SUBMENU STYLES                   */
/* ======================================== */

/* Submenu container */
#custom-subnav .navigation-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bb-sidenav-background);
    box-shadow: 0 3px 13px 0 rgba(18, 43, 70, .1);
    border: 1px solid var(--sc-tan);
}

/* Submenu items */
#custom-subnav .navigation-submenu li {
    padding: 0;
    margin: 0;
    display: block;
}

#custom-subnav .navigation-submenu li:before {
    display: none;
}

/* Submenu links */
#custom-subnav .navigation-submenu li a {
    display: flex;
    padding: var(--sc-space-10) var(--sc-space-20);
    color: var(--bb-sidenav-text-regular);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* Submenu hover states */
#custom-subnav .navigation-submenu li:not(.current) a:hover {
    background-color: var(--bb-sidenav-menu-background-color-hover);
    color: var(--bb-sidenav-text-hover);
}

/* Submenu current item */
#custom-subnav .navigation-submenu li.current a {
    color: var(--bb-sidenav-text-active);
    background-color: var(--bb-sidenav-menu-background-color-active);
}

/* Menu dropdown caret */
#custom-subnav .menu-dropdown {
    margin-left: auto;
    font-size: var(--sc-space-12);
    color: var(--bb-sidenav-text-regular);
    transition: transform var(--sc-transition) ease;
}

/* All backgrounds */
#custom-subnav,
#custom-subnav .navigation-submenu {
    background: var(--bb-sidenav-background);
}
/* #endregion SUBMENU STYLES */

/* #region SPECIAL ELEMENTS                 */
/* ======================================== */

/* Toggle button */
#custom-subnav .bb-icon-sidebar {
    font-size: 21px;
    padding: var(--sc-space-10) 12.5px;
    border-radius: var(--subnav-item-radius);
}

#custom-subnav .bb-icon-sidebar::before {
    color: var(--bb-sidenav-text-regular);
}

#custom-subnav .bb-icon-sidebar:hover {
    background-color: var(--bb-sidenav-menu-background-color-hover);
}

#custom-subnav .bb-icon-sidebar:hover::before {
    color: var(--bb-sidenav-text-hover);
}

#custom-subnav #toggle-subnav {
    margin-left: var(--sc-space-10);
}

/* Hide specific elements */
.woocommerce-MyAccount-navigation {
    display: none;
}

/* Fix Tutor's default responsive behavior */
.tutor-col-12.tutor-col-md-4.tutor-col-lg-3 {
    all: unset;
    display: block;
}

/* Remove Tutor's default styles */
#custom-subnav .tutor-fs-6,
#custom-subnav .tutor-color-black,
#custom-subnav .tutor-ml-12 {
    all: unset;
}

/* Transform Tutor menu structure */
.tutor-dashboard-left-menu {
    all: unset;
    display: block;
}
/* #endregion SPECIAL ELEMENTS */

/* #region PAGE LAYOUT & CONTENT            */
/* ======================================== */

/* Main page structure */
#main .entry-header:not(.profile-header) {
    margin-bottom: 0;
}

#page .settings-header, 
#page .screen-heading {
    display: none;
}

/* Content padding */
#content {
    padding-left: calc(var(--subnav-width) + var(--sc-space-30));
}

#content .container {
    margin: 0 auto;
}

/* Account page wrapper */
.account-page-wrapper {
    display: flex;
    gap: var(--sc-space-30);
    position: relative;
}

.account-content-area {
    flex: 1;
    min-width: 0;
}

/* WooCommerce specific */
.bb-template-v2 .woocommerce .woocommerce-MyAccount-content {
    padding: 0;
    border: unset;
    background: unset;
}

#page #content .bp-invites-container, 
#page #content .bp-settings-container {
    flex-flow: column wrap;
}

#page #content .bb-bp-settings-content {
    width: 100%;
}
/* #endregion PAGE LAYOUT & CONTENT */

/* #region BREADCRUMBS                      */
/* ======================================== */

.custom-breadcrumbs {
    padding-bottom: 1.875rem;
}

.breadcrumb-navigation {
    display: flex;
    align-items: center;
    gap: var(--sc-space-10);
    font-size: 14px;
    margin-bottom: var(--sc-space-10);
}

.breadcrumb-navigation a {
    color: var(--sc-color-text-light);
    text-decoration: none;
    transition: color var(--sc-transition);
}
.breadcrumb-navigation a, .breadcrumb-navigation p {
    text-align: center;
    line-height: 1.33;
}

.breadcrumb-navigation a:hover {
    color: var(--sc-color-primary);
    text-decoration: underline;
}

.breadcrumb-navigation .separator {
    color: var(--sc-color-text-light);
}

#page .breadcrumb-current-page {
    margin: 0;
    font-size: 2em;
    color: var(--sc-color-text);
    line-height: 1;
}

/* Breadcrumb header layout */
.breadcrumb-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sc-space-20);
}

.breadcrumb-main {
    flex: 1;
}

.breadcrumb-actions {
    flex-shrink: 0;
}

/* Profile button styling */
.breadcrumb-actions .button {
    background-color: var(--sc-color-btn-primary);
    color: var(--sc-color-text);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-30);
    padding: var(--sc-space-10) var(--sc-space-20);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-8);
    font-size: 14px;
    transition: all var(--sc-transition) ease;
}

.breadcrumb-actions .button:hover,
.breadcrumb-actions .button:focus {
    background-color: var(--sc-color-btn-hover);
    color: var(--sc-color-primary);
    border-color: var(--sc-color-btn-hover);
}

.breadcrumb-actions .button i {
    font-size: 16px;
}
/* #endregion */

/* #region FORM ELEMENTS                    */
/* ======================================== */

/* Input Fields */
#page #content [type='text'], 
#page #content input:where(:not([type])), 
#page #content [type='email'], 
#page #content [type='url'], 
#page #content [type='password'], 
#page #content [type='number'], 
#page #content [type='date'], 
#page #content [type='datetime-local'], 
#page #content [type='month'], 
#page #content [type='search'], 
#page #content [type='tel'], 
#page #content [type='time'], 
#page #content [type='week'], 
#page #content [multiple], 
#page #content textarea, 
#page #content select {
    display: inline-block;
    font-family: inherit;
    font-style: inherit;
    font-size: var(--sc-space-15);
    height: var(--sc-space-40);
    outline: 0;
    vertical-align: middle;
    background-color: var(--sc-color-white);
    border: 1px solid var(--bb-content-border-color);
    border-radius: var(--bb-input-radius);
    box-shadow: none;
    padding: 0 var(--sc-space-12);
}

/* Textarea height auto */
#page #content textarea {
    height: auto;
    min-height: 100px;
    padding: var(--sc-space-12);
}

/* Input focus states */
#page #content [type='text']:focus, 
#content input:where(:not([type])):focus, 
#page #content [type='email']:focus, 
#page #content [type='url']:focus, 
#page #content [type='password']:focus, 
#page #content [type='number']:focus, 
[type='date']:focus, 
#page #content [type='datetime-local']:focus, 
#page #content [type='month']:focus, 
[type='search']:focus, 
#page #content [type='tel']:focus, 
#page #content [type='time']:focus, 
#page #content [type='week']:focus, 
#page #content [multiple]:focus, 
#page #content textarea:focus, 
#page #content select:focus {
    box-shadow: var(--bb-input-focus-shadow);
    border-color: var(--bb-input-focus-border-color);
}

/* Submit buttons */
#page #content [type='submit'] {
    background-color: var(--bb-secondary-button-background-regular);
    fill: var(--sc-color-text);
    color: var(--sc-color-text);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--bb-secondary-button-border-regular);
}

#page #content [type='submit']:hover, 
#page #content [type='submit']:focus {
    background-color: var(--bb-secondary-button-background-hover);
    color: var(--bb-secondary-button-text-hover);
    border-color: var(--bb-secondary-button-border-hover);
}

/* BuddyPress input override */
#content #buddypress input {
    background-color: var(--sc-color-white);
}
/* #endregion FORM ELEMENTS */

/* #region DESKTOP STYLES (≥1051px)         */
/* ======================================== */

@media screen and (min-width: 1051px) {
    /* Admin bar adjustment */
    .admin-bar #custom-subnav {
        height: calc(100vh - 92px);
        top: 92px;
    }
    .admin-bar #page {
        top: 32px
    }

    /* Main subnav positioning */
    #custom-subnav {
        position: fixed;
        left: 230px;
        background-color: var(--bb-sidenav-background);
        height: calc(100vh - 60px);
        top: 60px;
        z-index: 613;
        border-right: 1px solid var(--sc-color-border);
        width: var(--subnav-width);
        -webkit-transition: left var(--subnav-transition-speed), width var(--subnav-transition-speed);
        transition: left var(--subnav-transition-speed), width var(--subnav-transition-speed);
        scrollbar-width: none;
        -ms-overflow-style: none;
        overflow: visible; /* For submenus */
    }
    
    /* Shadow effect */
    #custom-subnav:before {
        content: "";
        position: absolute;
        top: 0;
        left: -13px;
        bottom: 0;
        width: 13px;
        box-shadow: var(--sc-shadow-subnav);
        pointer-events: none;
    }
    
    /* Position when BuddyPanel closed */
    body:not(.buddypanel-open) #custom-subnav {
        left: 68px;
    }
    
    /* Hide scrollbar */
    #custom-subnav::-webkit-scrollbar {
        display: none;
    }

    /* BuddyPanel search z-index fix */
    body.bp-search aside.buddypanel {
        z-index: 614;
        box-shadow: none;
    }

    /* ===== COLLAPSED STATE ===== */
    
    /* Collapsed width */
    #custom-subnav.collapsed {
        width: var(--subnav-collapsed-width);
        overflow-y: visible;
    }
    
    /* Collapsed content adjustment */
    #content {
        padding-left: calc(var(--subnav-collapsed-width) + var(--sc-space-30));
        -webkit-transition: var(--subnav-transition-speed);
        transition: var(--subnav-transition-speed);
    }
    #content.expanded-subnav {
        padding-left: calc(var(--subnav-width) + var(--sc-space-30));
    }
    
    /* Collapsed menu container padding */
    #custom-subnav.collapsed #menu-container {
        padding-left: var(--sc-space-10);
        padding-right: var(--sc-space-10);
        align-items: start;
        padding: 0 var(--sc-space-12);
    }
    
    /* Collapsed menu item padding */
    #custom-subnav.collapsed .subnav-menu-item a,
    #custom-subnav.collapsed .tutor-dashboard-menu-item-link {
        padding: var(--subnav-collapsed-padding);
    }
    
    /* Hide text when collapsed */
    #custom-subnav.collapsed .subnav-text,
    #custom-subnav.collapsed .tutor-dashboard-menu-item-text {
        display: none;
    }
    
    /* Center icons when collapsed */
    #custom-subnav.collapsed .subnav-icon {
        justify-content: center;
        width: 100%;
    }
    
    #custom-subnav.collapsed .subnav-menu-item > a,
    #custom-subnav.collapsed .tutor-dashboard-menu-item-link {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 0;
        line-height: 1em;
    }
    
    /* Hide collapsed submenu carets */
    #custom-subnav.collapsed .menu-dropdown {
        display: none;
    }
    
    /* Headings become dividers when collapsed */
    #custom-subnav.collapsed .subnav-heading-first,
    #custom-subnav.collapsed .tutor-dashboard-menu-divider-header {
        display: none;
    }
    
    #custom-subnav.collapsed .subnav-heading:not(.subnav-heading-first) {
        padding-top: var(--sc-space-5);
    }
    
    #custom-subnav.collapsed .subnav-heading:after,
    #custom-subnav.collapsed .tutor-dashboard-menu-divider {
        display: block;
        background-color: var(--bb-sidenav-text-regular);
        content: "";
        opacity: .3;
        height: 1px;
        width: var(--sc-space-20);
        margin-left: auto;
        margin-right: auto;
    }


    
    /* ===== DESKTOP SUBMENU POSITIONING ===== */

    /* Parent menu item positioning context */
    #custom-subnav .subnav-menu-item.has-submenu {
        position: relative;
    }

    /* Hide submenu by default on desktop */
    #custom-subnav .subnav-menu-item .navigation-submenu {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 190px;
        display: none;
        padding: 1.5px;
        z-index: 100;
        /* Ensure submenu doesn't go below viewport */
        max-height: calc(100vh - 100px); /* Leave some space at bottom */
        overflow-y: auto; /* Add scroll if needed */
    }

    /* Alternative: Position from bottom of parent if in lower half */
    #custom-subnav .subnav-menu-item:nth-last-child(-n+3) .navigation-submenu {
        top: auto;
        bottom: 0;
    }

    /* Show submenu on hover */
    #custom-subnav .subnav-menu-item.has-submenu:hover .navigation-submenu {
        display: block;
    }

    /* Keep menu dropdown caret visible */
    #custom-subnav:not(.collapsed) .subnav-menu-item.has-submenu .menu-dropdown {
        display: inline-block;
    }

    /* Hide scrollbar but keep functionality */
    #custom-subnav .navigation-submenu::-webkit-scrollbar {
        width: 4px;
    }

    #custom-subnav .navigation-submenu::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 2px;
    }
    
    /* ===== TOOLTIPS ===== */
    
    /* Base tooltip setup */
    #custom-subnav .subnav-menu-item[data-tooltip] {
        position: relative;
    }
    
    /* Tooltip content */
    #custom-subnav .subnav-menu-item[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%) translateX(-10px);
        margin-left: var(--sc-space-18);
        background-color: var(--sc-color-primary);
        color: var(--sc-color-white);
        font-size: var(--sc-space-12);
        font-weight: 500;
        padding: 3px var(--sc-space-10);
        border-radius: 4px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 9999;
        height: var(--sc-space-30);
        font-family: var(--sc-font-heading);
        line-height: 25px;
        text-shadow: none;
        box-shadow: none;
    }
    
    /* Tooltip arrow */
    #custom-subnav .subnav-menu-item[data-tooltip]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%) translateX(-10px);
        margin-left: 6px;
        border: 7px solid transparent;
        border-right-color: var(--sc-color-primary);
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    /* Show tooltips on hover when collapsed */
    #custom-subnav.collapsed .subnav-menu-item:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    
    #custom-subnav.collapsed .subnav-menu-item:hover::before {
        opacity: 1;
        transform: translateY(-50%);
    }
    
    /* Disable tooltips for submenus */
    #custom-subnav.collapsed .subnav-menu-item.has-submenu[data-tooltip]::after,
    #custom-subnav.collapsed .subnav-menu-item.has-submenu[data-tooltip]::before {
        display: none !important;
    }
}
/* #endregion DESKTOP STYLES (≥1051px) */

/* #region TABLET STYLES (800px-1050px)     */
/* ======================================== */

@media (min-width: 800px) and (max-width: 1050px) {
    body:not(.buddypanel-open) #custom-subnav {
        width: calc(100vw - 68px);
        left: 68px;
        -webkit-transition: left .2s, width 0.2s;
        transition: left .2s, width 0.2s;
    }
    
    body.buddypanel-open #custom-subnav {
        width: calc(100vw - 230px);
        left: 230px;
        -webkit-transition: left .2s, width 0.2s;
        transition: left .2s, width 0.2s;
    }
}
/* #endregion TABLET STYLES (800px-1050px) */

/* #region MOBILE STYLES (≤1050px)          */
/* ======================================== */

@media (max-width: 1050px) {
    /* Content padding */
    #content {
        padding-left: var(--sc-space-30);
    }
    
    /* Account page layout */
    .account-page-wrapper {
        flex-direction: column;
        gap: 0;
    }
    
    .account-content-area {
        margin-top: 44px; /* Height of collapsed mobile menu */
    }
    
    /* Header heading display */
    #custom-subnav .header-heading-display {
        font-family: var(--sc-font-heading);
        font-size: 14px;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: var(--bb-sidenav-text-regular);
        font-weight: 500;
        font-size: 16px;
    }
    
    /* Mobile subnav container */
    #custom-subnav {
        border: none;
        padding: 0;
        background-color: var(--bb-sidenav-background);
        z-index: 500;
        overflow: hidden;
        height: auto;
        transition: max-height var(--subnav-mobile-transition-speed) ease-out;
        max-height: var(--subnav-mobile-header-height);
        position: fixed;
        top: var(--mobile-header-height);
    }

    /* Admin bar adjustment */
    .admin-bar #custom-subnav {
        top: calc(var(--mobile-header-height) + 32px);
    }
    
    /* Expanded state */
    #custom-subnav:not(.collapsed) {
        border-radius: 0 0 var(--bb-block-radius) var(--bb-block-radius);
        max-height: 70vh !important;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.2) transparent;
    }
    
    #custom-subnav:not(.collapsed)::-webkit-scrollbar {
        width: 4px;
        display: block;
    }
    
    #custom-subnav:not(.collapsed)::-webkit-scrollbar-track {
        background: transparent;
    }
    
    #custom-subnav:not(.collapsed)::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 4px;
    }
    
    /* Menu container bottom border */
    #custom-subnav:not(.collapsed) #menu-container {
        position: relative;
        gap: var(--sc-space-5) var(--sc-space-5);
        row-gap: var(--sc-space-5);
        column-gap: var(--sc-space-5);
        border-bottom: 1px solid var(--sc-color-border);
    }
    
    /* Header styling */
    #custom-subnav #subnav-header {
        height: unset;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        border-top: 1px solid var(--sc-color-border);
        border-bottom: 1px solid var(--sc-color-border);
        background: var(--bb-sidenav-background);
        flex-direction: row;
        min-height: var(--subnav-mobile-header-height);
        cursor: pointer;
        justify-content: flex-start !important;
        align-items: center;
        gap: 0;
    }
    
    /* Shadow on scroll */
    #subnav-header.has-scrolled {
        box-shadow: 0 1px 0 0 rgba(139,141,157,.05), 0 5px 10px -7px rgba(65,71,108,.25);
        transition: box-shadow var(--sc-transition) ease;
    }
    
    /* Hide first heading on mobile */
    #custom-subnav .subnav-heading.subnav-heading-first {
        display: none;
    }
    
    /* Show all text on mobile */
    #custom-subnav .subnav-text {
        display: inline;
    }
    
    /* Toggle button */
    #custom-subnav #toggle-subnav {
        margin-left: 0;
        margin-right: var(--sc-space-15);
        padding: 0;
        background: none;
        border: none;
        order: -1;
    }
    
    #subnav-header .header-heading-display {
        margin-right: auto;
        flex: 1;
    }
    
    /* Hamburger icon */
    #custom-subnav .bb-icon-menu.hamburger-icon {
        width: 16px;
        height: 12px;
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    
    #custom-subnav .bb-icon-menu.hamburger-icon::before,
    #custom-subnav .bb-icon-menu.hamburger-icon::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--bb-sidenav-text-regular);
        transition: all var(--sc-transition) ease;
    }
    
    #custom-subnav .bb-icon-menu.hamburger-icon::before {
        top: 0;
        box-shadow: 0 5px 0 var(--bb-sidenav-text-regular);
    }
    
    #custom-subnav .bb-icon-menu.hamburger-icon::after {
        bottom: 0;
    }
    
    /* Hamburger to X animation */
    #custom-subnav:not(.collapsed) .bb-icon-menu.hamburger-icon::before {
        transform: rotate(45deg);
        top: 5px;
        box-shadow: none;
    }
    
    #custom-subnav:not(.collapsed) .bb-icon-menu.hamburger-icon::after {
        transform: rotate(-45deg);
        bottom: 5px;
    }
    
    /* Menu overlay */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 499;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--sc-transition) ease, visibility var(--sc-transition) ease;
        display: block;
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Body padding adjustment */
    body.buddypress #content .container:first-of-type,
    body #content > .container:first-child {
        margin-top: 44px !important;
    }
    
    /* Disable header shadow */
    .sticky-header #page .site-header.has-scrolled {
        box-shadow: none;
    }
    
    /* Normalize menu item heights */
    #custom-subnav .subnav-menu-item a {
        padding: var(--subnav-item-padding);
        line-height: 14px;
    }
    
    /* Hide tooltips on mobile */
    #custom-subnav [class*=hint--][aria-label]:after, 
    #custom-subnav [class*=hint--][aria-label]:before {
        display: none;
    }
    
    /* Hide dividers on mobile */
    #custom-subnav .tutor-dashboard-menu-divider,
    #custom-subnav .tutor-dashboard-menu-divider-header {
        display: none;
    }
    
    /* Breadcrumb responsive */
    .breadcrumb-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .breadcrumb-actions {
        width: 100%;
    }
    
    .breadcrumb-actions .button {
        width: 100%;
        justify-content: center;
    }
    
    /* ===== MOBILE SUBMENUS ===== */
    
    /* Submenu container setup */
    #custom-subnav .has-submenu {
        flex-direction: column;
    }
    
    /* Submenu animation */
    #custom-subnav .has-submenu .navigation-submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--sc-transition) ease;
        margin: 0 0 0 var(--sc-space-20);
        position: unset !important;
        box-shadow: unset;
    }
    
    #custom-subnav .has-submenu.submenu-open .navigation-submenu {
        max-height: 500px;
    }
    
    /* Submenu caret */
    #custom-subnav .has-submenu:hover .menu-dropdown,
    #custom-subnav .has-submenu.active .menu-dropdown {
        display: inline-block;
    }
    
    #custom-subnav .has-submenu .menu-dropdown {
        transition: transform 0.5s ease;
    }
    
    #custom-subnav .has-submenu.submenu-open .menu-dropdown {
        transform: rotate(90deg);
    }
    
    #custom-subnav .has-submenu:not(.submenu-open) .menu-dropdown:before,
    #custom-subnav .has-submenu.submenu-open .menu-dropdown:before {
        padding-left: var(--sc-space-5);
    }
    
    /* Collapsed state specific */
    #custom-subnav.collapsed {
        width: 100vw;
    }
    
    #custom-subnav.collapsed .subnav-menu li {
        display: none;
    }
    
    /* Ensure full width links */
    #custom-subnav .subnav-menu-item a {
        width: 100%;
    }
}
/* #endregion MOBILE STYLES (≤1050px) */

/* #region MOBILE-SPECIFIC (≤799px)         */
/* ======================================== */

@media (max-width: 799px) {
    #page #content {
        padding-left: var(--sc-space-10);
        position: relative;
    }
    
    #content #custom-subnav {
        width: 100vw;
        left: 0;
        position: absolute;
        top: 0;
    }
    
    #custom-subnav #subnav-header {
        border-top: none;
    }
    
    #content #main {
        position: static;
    }
}
/* #endregion MOBILE-SPECIFIC (≤799px) */

/* #region PAGE CONTENT STYLES              */
/* ======================================== */

.wc-MyAccount-sub-heading {
    display: none;
}

#content .woocommerce-MyAccount-content {
    padding: var(--sc-space-30);
}

#content .wc-MyAccount-inner-content {
    padding: 0;
}

/* Hide duplicate headers */
header.entry-header {
    display: none;
}

/* Vendor dashboard content */
#content .dokan-dashboard-content {
    padding: 0;
}
/* #endregion PAGE CONTENT STYLES */

/* #region DOKAN SPECIFIC STYLES            */

   header.entry-header {
    display: none;
}
.entry-header .entry-title {
    margin-bottom: var(--sc-space-30);
    margin-top: 35px;
    font-size: 2rem;
}

#content .woocommerce-layout__header {
    z-index: 0;
}
#content .dokan-dashboard-content {
    padding: 0;
}

/* Checkbox and radio button sizes */
input[type=checkbox], input[type=radio] {
    width: 16px;
    height: 16px;
}
.product-edit-container label {
    display: flex;
    align-items: center;
}

/* Unset dokan styles for fields */
#content .select2-container--default.select2-container--focus .select2-selection--multiple, #content .select2-container--default .select2-selection--multiple .select2-selection__rendered, #content .select2-container--default .select2-selection--multiple, #content .product-edit-container .wp-editor-wrap {
    border: unset;
    min-height: unset;
    padding: 0;
    background-color: unset;
    border-radius: unset;
}
/* "Visual" and "Code" buttons for text editor */
#content .switch-html, #content .switch-tmce {
    border-radius: var(--sc-radius-5) var(--sc-radius-5) 0 0 ;
    border: 1px solid var(--sc-color-border);
    border-bottom: unset;
    padding: 0 var(--sc-space-10);
}
#content .switch-tmce:not([aria-pressed="true"]), #content .switch-html:not([aria-pressed="true"]) {
    border-bottom: 1px solid var(--sc-color-border);
}

/* Product Category field and Orders filter field*/
#content .dokan-select-product-category-container .dokan-select-product-category, #content .select2-container--default .select2-selection--single {
    background-color: var(--sc-color-white);
}
/* "X" close button */
.dokan-select-product-category-container .dokan-select-product-category-remove-container .dokan-select-product-category-remove {
    background-color: var(--sc-color-bg-section);
}
.dokan-select-product-category-container .dokan-select-product-category-remove-container .dokan-select-product-category-remove:hover {
    background-color: var(--bb-secondary-button-background-hover);
    color: inherit;
}

.dokan-dashboard-content span.count {
    background-color: unset;
    padding: unset;
    margin-left: 0;
    font-size: inherit;
    color: inherit;
    border-radius: unset;
    box-shadow: unset;
    font-weight: 400;
    letter-spacing: unset;
}

/* Media > Filter > Date dropdown arrow fix */
#media-attachment-date-filters {
    background-size: 0.75em;
}

.dokan-store-settign-header-wrap {
    display: none;
}

/* BuddyBoss icons in Dokan menu */
#custom-subnav .dokan-dashboard-menu i[class*="bb-icon-"] {
    font-family: 'bb-icons' !important;
    speak-as: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure BuddyBoss icons are same size as Font Awesome was */
#custom-subnav .dokan-dashboard-menu i[class*="bb-icon-"]:before {
    font-size: 16px;
    width: var(--sc-space-20);
    display: inline-block;
    text-align: center;
}

/* Fix dropdown arrow icon */
#custom-subnav .has-submenu .bb-icon-angle-right {
    margin-left: auto;
}

/* #endregion DOKAN SPECIFIC STYLES */

/* #region Tutor LMS Specific Styles        */
/* ======================================== */

.tutor-dashboard .tutor-frontend-dashboard-maincontent #custom-subnav.tutor-dashboard-left-menu {
    padding:0;
}

/* Hide instructor items from student dashboard */
.tutor-dashboard-menu-item.tutor-dashboard-menu-announcements,
.tutor-dashboard-menu-item.tutor-dashboard-menu-quiz-attempts,
.tutor-dashboard-menu-item.tutor-dashboard-menu-assignments,
.tutor-dashboard-menu-item.tutor-dashboard-menu-analytics,
.tutor-dashboard-menu-item.tutor-dashboard-menu-settings,
.tutor-dashboard-menu-divider:has(+ .tutor-dashboard-menu-item.tutor-dashboard-menu-announcements),
.tutor-dashboard-menu-divider-header:has(+ .tutor-dashboard-menu-item.tutor-dashboard-menu-announcements) {
    display: none !important;
}

.instructor-page-wrap {
    padding-left: var(--sc-space-10);
    padding-right: var(--sc-space-10);
    padding-top: 1.875rem;
    padding-bottom: 2.1875rem;
}

@media screen and (max-width: 800px) {
    .instructor-page-wrap {
        padding-bottom: 1.25rem;
    }
}

/* #endregion Tutor LMS Specific Styles */