/* ===== MENU TOGGLE STYLES ===== */
/* Extracted from style.css for better organization */

/* Toggle Menu specific CSS variables */
:root {
    /* Toggle Menu Colors - Elegant and understated - using colors.css variables */
    --left-menu-primary: var(--secondary-color);
    --left-menu-buttons: var(--secondary-dark);
    --right-menu-primary: var(--primary-color);
    --right-menu-buttons: var(--primary-dark);
    
    /* Toggle Menu specific variables */
    --toggle-button-size: 60px;
    --toggle-menu-gap: 6px;
    --toggle-button-size-mobile: 44px;
    --toggle-menu-gap-mobile: 6px;
}

/* Mobile Variables and Menu Hiding */
@media (max-width: 768px) {
    :root {
        --toggle-button-size: 44px !important;
        --toggle-menu-gap: 6px !important;
    }

    .menu-container, .menu-container-left {
        display: none !important;
    }
}

/* Extra Small Screens - Force Correct Button Size */
@media (max-width: 480px) {
    :root {
        --toggle-button-size: 40px !important;
        --toggle-menu-gap: 8px !important;
    }

    .mobile-vertical-menu .menu-toggle,
    .mobile-vertical-menu .menu-toggle-left,
    .mobile-vertical-menu .menu-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }

    /* Adjust font sizes for smaller buttons */
    .mobile-vertical-menu .menu-btn .icon {
        font-size: 0.9rem !important;
    }

    .mobile-vertical-menu .menu-btn .label {
        font-size: 0.45rem !important;
    }
}

/* Desktop Hide Mobile Menus */
@media (min-width: 769px) {
    .mobile-vertical-menu {
        display: none !important;
    }
}

/* Desktop Focus Styles - Clean Interface */
@media (min-width: 769px) {
    .menu-container .menu-btn:focus,
    .menu-container .menu-btn:focus-visible,
    .menu-container-left .menu-btn:focus,
    .menu-container-left .menu-btn:focus-visible,
    .menu-container .menu-btn-left:focus,
    .menu-container .menu-btn-left:focus-visible,
    .menu-container-left .menu-btn-left:focus,
    .menu-container-left .menu-btn-left:focus-visible,
    .menu-container .menu-toggle:focus,
    .menu-container .menu-toggle:focus-visible,
    .menu-container-left .menu-toggle:focus,
    .menu-container-left .menu-toggle:focus-visible,
    .menu-container .menu-toggle-left:focus,
    .menu-container .menu-toggle-left:focus-visible,
    .menu-container-left .menu-toggle-left:focus,
    .menu-container-left .menu-toggle-left:focus-visible,
    nav.menu-container .menu-btn:focus,
    nav.menu-container .menu-btn:focus-visible,
    nav.menu-container-left .menu-btn:focus,
    nav.menu-container-left .menu-btn:focus-visible,
    nav.menu-container .menu-toggle:focus,
    nav.menu-container .menu-toggle:focus-visible,
    nav.menu-container-left .menu-toggle:focus,
    nav.menu-container-left .menu-toggle:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* === MENU SPECIFIC COLOR FIXES === */
/* Ensure menu text is always white regardless of inheritance */
.menu-btn,
.menu-btn-left,
.menu-container a,
.menu-container-left a {
    color: var(--white) !important;
}

.menu-btn .label,
.menu-btn-left .label {
    color: var(--white) !important;
}

/* ===== DESKTOP MENU STYLES ===== */
.menu-container-left { 
    position: absolute; 
    top: 0.5rem; 
    left: 0.5rem; 
    z-index: 1000; 
    transition: top 0.6s ease, bottom 0.6s ease; 
}

.menu-toggle-left { 
    width: var(--toggle-button-size); 
    height: var(--toggle-button-size); 
    background-color: var(--left-menu-primary); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    position: relative; 
    z-index: 5; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    border: none; 
    outline: none; 
    border-radius: 50%; 
}

.menu-toggle-left:hover { 
    transform: scale(1.1); 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); 
}

.menu-btn-left { 
    width: var(--toggle-button-size); 
    height: var(--toggle-button-size); 
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    border: none; 
    outline: none; 
    opacity: 0; 
    transform: scale(0); 
    color: var(--white); 
    padding: 0.5rem; 
    box-sizing: border-box; 
    background-color: var(--left-menu-buttons); 
    pointer-events: none; 
    border-radius: 50%; 
}

.menu-btn-left:hover { 
    background-color: var(--secondary-dark); 
    transform: scale(1.1); 
}

.menu-container-left.open .menu-btn-left { 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    opacity: 1; 
    transform: scale(1); 
    pointer-events: auto; 
}

.menu-container-left.open .menu-btn-left.vertical-1 { 
    top: calc(var(--toggle-button-size) + var(--toggle-menu-gap)); 
    left: 0; 
    transition-delay: 0.1s; 
}

.menu-container-left.open .menu-btn-left.vertical-2 { 
    top: calc(var(--toggle-button-size) * 2 + var(--toggle-menu-gap) * 2); 
    left: 0; 
    transition-delay: 0.2s; 
}

.menu-container-left.open .menu-btn-left.horizontal-1 { 
    top: 0; 
    left: calc(var(--toggle-button-size) + var(--toggle-menu-gap)); 
    transition-delay: 0.1s; 
}

.menu-container-left.open .menu-btn-left.horizontal-2 { 
    top: 0; 
    left: calc(var(--toggle-button-size) * 2 + var(--toggle-menu-gap) * 2); 
    transition-delay: 0.2s; 
}

.menu-container-left.open .menu-btn-left.horizontal-3 { 
    top: 0; 
    left: calc(var(--toggle-button-size) * 3 + var(--toggle-menu-gap) * 3); 
    transition-delay: 0.3s; 
}

.menu-container-left.open .menu-btn-left.horizontal-4 { 
    top: 0; 
    left: calc(var(--toggle-button-size) * 4 + var(--toggle-menu-gap) * 4); 
    transition-delay: 0.4s; 
}

.menu-container { 
    position: absolute; 
    top: 0.5rem; 
    right: 0.5rem; 
    z-index: 1000; 
    transition: top 0.6s ease, bottom 0.6s ease; 
}

.menu-toggle { 
    width: var(--toggle-button-size); 
    height: var(--toggle-button-size); 
    background-color: var(--right-menu-primary); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    position: relative; 
    z-index: 5; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    border: none; 
    outline: none; 
    border-radius: 50%; 
}

.menu-toggle:hover { 
    transform: scale(1.1); 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); 
}

.menu-btn { 
    width: var(--toggle-button-size); 
    height: var(--toggle-button-size); 
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    border: none; 
    outline: none; 
    opacity: 0; 
    transform: scale(0); 
    color: var(--white); 
    padding: 0.5rem; 
    box-sizing: border-box; 
    background-color: var(--right-menu-buttons); 
    pointer-events: none; 
    border-radius: 50%; 
}

.menu-btn:hover { 
    background-color: var(--primary-dark); 
    transform: scale(1.1); 
}

.menu-container.open .menu-btn { 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    opacity: 1; 
    transform: scale(1); 
    pointer-events: auto; 
}

.menu-container.open .menu-btn.vertical-1 { 
    top: calc(var(--toggle-button-size) + var(--toggle-menu-gap)); 
    right: 0; 
    transition-delay: 0.1s; 
}

.menu-container.open .menu-btn.vertical-2 { 
    top: calc(var(--toggle-button-size) * 2 + var(--toggle-menu-gap) * 2); 
    right: 0; 
    transition-delay: 0.2s; 
}

.menu-container.open .menu-btn.horizontal-1 { 
    top: 0; 
    right: calc(var(--toggle-button-size) + var(--toggle-menu-gap)); 
    transition-delay: 0.1s; 
}

.menu-container.open .menu-btn.horizontal-2 { 
    top: 0; 
    right: calc(var(--toggle-button-size) * 2 + var(--toggle-menu-gap) * 2); 
    transition-delay: 0.2s; 
}

.menu-container.open .menu-btn.horizontal-3 { 
    top: 0; 
    right: calc(var(--toggle-button-size) * 3 + var(--toggle-menu-gap) * 3); 
    transition-delay: 0.3s; 
}

.menu-container.open .menu-btn.horizontal-4 { 
    top: 0; 
    right: calc(var(--toggle-button-size) * 4 + var(--toggle-menu-gap) * 4); 
    transition-delay: 0.4s; 
}

.menu-btn .icon, .menu-btn-left .icon { 
    font-size: 1.5rem; 
    line-height: 1; 
}

.menu-btn .label, .menu-btn-left .label { 
    font-size: 0.65rem; 
    font-family: var(--font-body); 
    font-weight: 600; 
    margin-top: 0.25rem; 
    line-height: 1; 
}

/* Menu Navigation Styling */
.menu-btn, .menu-btn-left {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.menu-btn:hover, .menu-btn-left:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    color: inherit;
}

/* Cross Icon Styling */
.cross-icon { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.cross-line { 
    position: absolute; 
    background-color: var(--white); 
    border-radius: 2px; 
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
    width: 28px; 
    height: 3px; 
}

.cross-line-1 { 
    transform: rotate(0deg); 
}

.cross-line-2 { 
    transform: rotate(90deg); 
}

.menu-container-left.open .cross-line-1 { 
    transform: rotate(45deg); 
}

.menu-container-left.open .cross-line-2 { 
    transform: rotate(135deg); 
}

.menu-toggle-left:hover .cross-line {
    background-color: var(--accent-light);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Cross icon centering for left menu toggle */
.menu-toggle-left .cross-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle-left .cross-line {
    position: absolute;
    background-color: var(--white);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    width: 28px;
    height: 3px;
}

.menu-toggle-left .cross-line-1 {
    transform: rotate(0deg);
}

.menu-toggle-left .cross-line-2 {
    transform: rotate(90deg);
}

/* Dots container and animation for right menu */
.menu-toggle .dots-container {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-out;
    position: relative;
    animation: gentleRotate 4s linear infinite;
}

.menu-container.open .menu-toggle .dots-container { 
    animation-play-state: paused; 
    transform: rotate(180deg); 
}

.menu-toggle .dot { 
    position: absolute; 
    border-radius: 50%; 
    background-color: var(--white); 
    left: 50%; 
    top: 50%; 
    transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); 
    width: 8px; 
    height: 8px; 
    margin: -4px 0 0 -4px; 
}

.dot-1 { 
    transform: translateY(-14px); 
}

.dot-2 { 
    transform: translateX(-12.12px) translateY(7px); 
}

.dot-3 { 
    transform: translateX(12.12px) translateY(7px); 
}

.menu-container.open .dots-container { 
    opacity: 0; 
    pointer-events: none; 
}

.menu-container.open .cross-icon { 
    opacity: 1; 
    pointer-events: auto; 
}

/* Cross icon for right menu when open */
.menu-toggle .cross-icon { 
    opacity: 0; 
    pointer-events: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.menu-toggle .cross-line { 
    position: absolute; 
    background-color: var(--white); 
    border-radius: 2px; 
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
    width: 28px; 
    height: 3px; 
}

.menu-toggle .cross-line-1 { 
    transform: rotate(0deg); 
}

.menu-toggle .cross-line-2 { 
    transform: rotate(90deg); 
}

.menu-container.open .cross-line-1 { 
    transform: rotate(45deg); 
}

.menu-container.open .cross-line-2 { 
    transform: rotate(135deg); 
}

.menu-toggle:hover .cross-line { 
    background-color: var(--accent-light); 
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); 
}

/* Duplicate styles for consistency (from style.css) */
.menu-toggle .dots-container { 
    width: 100%; 
    height: 100%;  
    transition: transform 0.5s ease-out; 
    position: relative; 
}

.menu-container.open .menu-toggle .dots-container { 
    animation-play-state: paused; 
    transform: rotate(180deg); 
}

.menu-toggle .dot { 
    position: absolute; 
    border-radius: 50%; 
    background-color: var(--white); 
    left: 50%; 
    top: 50%; 
    transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); 
    width: 8px; 
    height: 8px; 
    margin: -4px 0 0 -4px; 
}

.dot-1 { 
    transform: translateY(-14px); 
}

.dot-2 { 
    transform: translateX(-12.12px) translateY(7px); 
}

.dot-3 { 
    transform: translateX(12.12px) translateY(7px); 
}

.menu-container.open .dots-container { 
    opacity: 0; 
    pointer-events: none; 
}

.menu-container.open .cross-icon { 
    opacity: 1; 
    pointer-events: auto; 
}

.menu-toggle .cross-icon { 
    opacity: 0; 
    pointer-events: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.menu-toggle .cross-line { 
    position: absolute; 
    background-color: var(--white); 
    border-radius: 2px; 
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
    width: 28px; 
    height: 3px; 
}

.menu-toggle .cross-line-1 { 
    transform: rotate(0deg); 
}

.menu-toggle .cross-line-2 { 
    transform: rotate(90deg); 
}

.menu-container.open .cross-line-1 { 
    transform: rotate(45deg); 
}

.menu-container.open .cross-line-2 { 
    transform: rotate(135deg); 
}

.menu-toggle:hover .cross-line { 
    background-color: var(--accent-light); 
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); 
}

/* ===== MOBILE TOGGLE MENUS ===== */
/* Universal mobile toggle menu system for all pages */

@media (max-width: 768px) {
    /* Hide desktop menus on mobile */
    .menu-container, .menu-container-left {
        display: none !important;
    }
    
    /* Mobile Menu Positioning System */
    .mobile-vertical-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        z-index: 1000 !important;
        --button-size: 44px;
        --menu-gap: 10px;
        top: 1rem !important;
        bottom: auto !important;
        transform: none !important;
        transition: top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                    bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }
    
    /* Top positions (default) - Higher specificity */
    .mobile-vertical-menu.left.top-left,
    .mobile-vertical-menu.top-left {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        bottom: auto !important;
        right: auto !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 1001 !important;
    }
    .mobile-vertical-menu.right.top-right,
    .mobile-vertical-menu.top-right {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 1001 !important;
    }

    /* Middle positions (scrolled middle) - FIXED TO VIEWPORT - HIGHEST SPECIFICITY */
    nav.mobile-vertical-menu.left.middle-left,
    nav.mobile-vertical-menu.middle-left,
    .mobile-vertical-menu.left.middle-left,
    .mobile-vertical-menu.middle-left {
        position: fixed !important;
        top: 50% !important;
        left: 10px !important;
        bottom: auto !important;
        right: auto !important;
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
        will-change: transform !important;
    }
    nav.mobile-vertical-menu.right.middle-right,
    nav.mobile-vertical-menu.middle-right,
    .mobile-vertical-menu.right.middle-right,
    .mobile-vertical-menu.middle-right {
        position: fixed !important;
        top: 50% !important;
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
        will-change: transform !important;
    }

    /* Bottom positions (scrolled to bottom) - Higher specificity */
    .mobile-vertical-menu.left.bottom-left,
    .mobile-vertical-menu.bottom-left {
        position: fixed !important;
        bottom: 10px !important;
        left: 10px !important;
        top: auto !important;
        right: auto !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 1001 !important;
    }
    .mobile-vertical-menu.right.bottom-right,
    .mobile-vertical-menu.bottom-right {
        position: fixed !important;
        bottom: 10px !important;
        right: 10px !important;
        top: auto !important;
        left: auto !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 1001 !important;
    }

    /* Legacy scroll classes for backwards compatibility */
    .mobile-vertical-menu.scrolled-middle {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        position: fixed !important;
        will-change: transform !important;
    }

    .mobile-vertical-menu.scrolled-bottom {
        top: auto !important;
        bottom: 1rem !important;
        transform: translateY(0) !important;
    }
    
    /* Side positioning */
    .mobile-vertical-menu.left {
        left: 1rem !important;
        right: auto !important;
    }

    .mobile-vertical-menu.right {
        right: 1rem !important;
        left: auto !important;
    }

    /* Middle positioning with sticky behavior - EXACT 50% CENTER */
    .mobile-vertical-menu.left.scrolled-middle {
        left: 1rem !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        position: fixed !important;
        z-index: 1000 !important;
    }

    .mobile-vertical-menu.right.scrolled-middle {
        right: 1rem !important;
        left: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        position: fixed !important;
        z-index: 1000 !important;
    }

    /* Bottom positioning when at bottom of page */
    .mobile-vertical-menu.left.scrolled-bottom {
        left: 1rem !important;
        right: auto !important;
        top: auto !important;
        bottom: 1rem !important;
        transform: none !important;
        position: fixed !important;
        z-index: 1000 !important;
    }

    .mobile-vertical-menu.right.scrolled-bottom {
        right: 1rem !important;
        left: auto !important;
        top: auto !important;
        bottom: 1rem !important;
        transform: none !important;
        position: fixed !important;
        z-index: 1000 !important;
    }
    
    /* Mobile Toggle Button Styling */
    .mobile-vertical-menu .menu-toggle,
    .mobile-vertical-menu .menu-toggle-left {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        background-color: var(--right-menu-primary);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 5;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: none;
        outline: none;
        border-radius: 50%;
    }
    
    .mobile-vertical-menu.left .menu-toggle,
    .mobile-vertical-menu.left .menu-toggle-left { 
        background-color: var(--left-menu-primary); 
    }
    
    /* Mobile menu button styling */
    .mobile-vertical-menu .menu-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: none;
        outline: none;
        opacity: 0;
        transform: scale(0);
        color: var(--white);
        padding: 0.5rem;
        box-sizing: border-box;
        background-color: var(--right-menu-buttons);
        pointer-events: none;
        border-radius: 50%;
    }
    
    .mobile-vertical-menu.left .menu-btn { 
        background-color: var(--left-menu-buttons); 
    }
    
    .mobile-vertical-menu.left .menu-btn:hover { 
        background-color: var(--secondary-dark); 
    }
    
    .mobile-vertical-menu.right .menu-btn:hover { 
        background-color: var(--primary-dark); 
    }
    
    .mobile-vertical-menu.open .menu-btn { 
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
        opacity: 1 !important; 
        transform: scale(1) !important; 
        pointer-events: auto !important; 
    }
    
    .mobile-vertical-menu .menu-btn .icon { 
        font-size: 1rem; 
        line-height: 1; 
    }
    
    .mobile-vertical-menu .menu-btn .label { 
        font-size: 0.5rem; 
        font-family: var(--font-body); 
        font-weight: 600; 
        margin-top: 0.25rem; 
        line-height: 1; 
    }
    
    /* Default Downward Expansion */
    .mobile-vertical-menu.open .menu-btn.vertical-1 { top: 50px !important; transition-delay: 0.1s; }
    .mobile-vertical-menu.open .menu-btn.vertical-2 { top: 100px !important; transition-delay: 0.2s; }
    .mobile-vertical-menu.open .menu-btn.vertical-3 { top: 150px !important; transition-delay: 0.3s; }
    .mobile-vertical-menu.open .menu-btn.vertical-4 { top: 200px !important; transition-delay: 0.4s; }
    .mobile-vertical-menu.open .menu-btn.vertical-5 { top: 250px !important; transition-delay: 0.5s; }
    .mobile-vertical-menu.open .menu-btn.vertical-6 { top: 300px !important; transition-delay: 0.6s; }
    
    /* Upward Expansion for Bottom Position */
    .mobile-vertical-menu.expand-upward.open .menu-btn.vertical-1 { top: -50px !important; transition-delay: 0.1s; }
    .mobile-vertical-menu.expand-upward.open .menu-btn.vertical-2 { top: -100px !important; transition-delay: 0.2s; }
    .mobile-vertical-menu.expand-upward.open .menu-btn.vertical-3 { top: -150px !important; transition-delay: 0.3s; }
    .mobile-vertical-menu.expand-upward.open .menu-btn.vertical-4 { top: -200px !important; transition-delay: 0.4s; }
    .mobile-vertical-menu.expand-upward.open .menu-btn.vertical-5 { top: -250px !important; transition-delay: 0.5s; }
    .mobile-vertical-menu.expand-upward.open .menu-btn.vertical-6 { top: -300px !important; transition-delay: 0.6s; }
    
    /* Cross icon styling */
    .mobile-vertical-menu .cross-line { 
        width: 24px; 
        height: 3px; 
        position: absolute; 
        background-color: #ffffff; 
        border-radius: 2px; 
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
    }
    .mobile-vertical-menu .cross-icon {
        position: relative;
        width: 24px;
        height: 24px;
    }
    .mobile-vertical-menu .cross-line-1 { 
        transform: rotate(0deg); 
        top: 50%;
        left: 50%;
        margin-left: -12px;
        margin-top: -1.5px;
    }
    .mobile-vertical-menu .cross-line-2 {
        transform: rotate(90deg);
        top: 50%;
        left: 50%;
        margin-left: -12px;
        margin-top: -1.5px;
    }

    /* Mobile left menu toggle cross icon centering */
    .mobile-vertical-menu.left .menu-toggle-left .cross-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-vertical-menu.left .menu-toggle-left .cross-line {
        position: absolute;
        background-color: var(--white);
        border-radius: 2px;
        width: 24px;
        height: 3px;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    .mobile-vertical-menu.left .menu-toggle-left .cross-line-1 {
        transform: rotate(0deg);
    }
    .mobile-vertical-menu.left .menu-toggle-left .cross-line-2 {
        transform: rotate(90deg);
    }

    /* Mobile right menu toggle cross icon centering */
    .mobile-vertical-menu.right .menu-toggle .cross-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-vertical-menu.right .menu-toggle .cross-line {
        position: absolute;
        background-color: var(--white);
        border-radius: 2px;
        width: 24px;
        height: 3px;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    .mobile-vertical-menu.right .menu-toggle .cross-line-1 {
        transform: rotate(0deg);
    }
    .mobile-vertical-menu.right .menu-toggle .cross-line-2 {
        transform: rotate(90deg);
    }
    .mobile-vertical-menu.left.open .cross-line-1 { 
        transform: rotate(45deg); 
    }
    .mobile-vertical-menu.left.open .cross-line-2 { 
        transform: rotate(135deg); 
    }
    
    /* Dots styling for right menu - properly centered with higher specificity */
    .mobile-vertical-menu .menu-toggle .dots-container {
        position: relative !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important; /* Prevent flexbox from shrinking this element */
        animation: gentleRotate 4s linear infinite !important;
    }
    .mobile-vertical-menu .menu-toggle .dot {
        width: 6px !important;
        height: 6px !important;
        margin: -3px 0 0 -3px !important;
        background-color: #ffffff !important;
        border-radius: 50% !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) !important;
    }
    .mobile-vertical-menu .dot-1 {
        transform: translateY(-11px) !important;
    }
    .mobile-vertical-menu .dot-2 {
        transform: translateX(-9.5px) translateY(5.5px) !important;
    }
    .mobile-vertical-menu .dot-3 {
        transform: translateX(9.5px) translateY(5.5px) !important;
    }
    .mobile-vertical-menu.right.open .dots-container { 
        opacity: 0; 
        pointer-events: none; 
    }
    .mobile-vertical-menu.right.open .cross-icon { 
        opacity: 1; 
        pointer-events: auto; 
    }
    .mobile-vertical-menu.right.open .cross-line-1 { 
        transform: rotate(45deg); 
    }
    .mobile-vertical-menu.right.open .cross-line-2 { 
        transform: rotate(-45deg); 
    }
    
    /* Mobile focus optimization - no focus rings for touch devices */
    .mobile-vertical-menu .menu-btn:focus,
    .mobile-vertical-menu .menu-btn:focus-visible,
    .mobile-vertical-menu .menu-btn-left:focus,
    .mobile-vertical-menu .menu-btn-left:focus-visible,
    .mobile-vertical-menu .menu-toggle:focus,
    .mobile-vertical-menu .menu-toggle:focus-visible,
    .mobile-vertical-menu .menu-toggle-left:focus,
    .mobile-vertical-menu .menu-toggle-left:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes gentleRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Increase left menu container to accommodate 4 items */
.menu-container-left {
    height: calc(4 * 60px + 60px) !important; /* 4 items + toggle button */
}

/* Increase right menu container to accommodate 7 items */
.menu-container {
    height: calc(7 * 60px + 60px) !important; /* 7 items + toggle button */
}
.menu-container-left.open .menu-btn-left.vertical-3 { 
    top: calc(var(--toggle-button-size) * 3 + var(--toggle-menu-gap) * 3); 
    left: 0; 
    transition-delay: 0.3s; 
}

/* Adjust right menu spacing to fit 7 items */
.menu-container.open .menu-btn.vertical-1 { 
    top: calc(var(--toggle-button-size) + var(--toggle-menu-gap) * 0.8); 
    right: 0; 
    transition-delay: 0.1s; 
}

.menu-container.open .menu-btn.vertical-2 { 
    top: calc(var(--toggle-button-size) * 2 + var(--toggle-menu-gap) * 1.6); 
    right: 0; 
    transition-delay: 0.2s; 
}

.menu-container.open .menu-btn.vertical-3 { 
    top: calc(var(--toggle-button-size) * 3 + var(--toggle-menu-gap) * 2.4); 
    right: 0; 
    transition-delay: 0.3s; 
}

.menu-container.open .menu-btn.vertical-4 { 
    top: calc(var(--toggle-button-size) * 4 + var(--toggle-menu-gap) * 3.2); 
    right: 0; 
    transition-delay: 0.4s; 
}

.menu-container.open .menu-btn.vertical-5 { 
    top: calc(var(--toggle-button-size) * 5 + var(--toggle-menu-gap) * 4.0); 
    right: 0; 
    transition-delay: 0.5s; 
}

.menu-container.open .menu-btn.vertical-6 { 
    top: calc(var(--toggle-button-size) * 6 + var(--toggle-menu-gap) * 4.8); 
    right: 0; 
    transition-delay: 0.6s; 
}

.menu-container.open .menu-btn.vertical-7 { 
    top: calc(var(--toggle-button-size) * 7 + var(--toggle-menu-gap) * 5.6); 
    right: 0; 
    transition-delay: 0.7s; 
}
/* Add missing vertical positioning for items 3-7 in right menu */
.menu-container.open .menu-btn.vertical-3 { 
    top: calc(var(--toggle-button-size) * 3 + var(--toggle-menu-gap) * 2.4); 
    right: 0; 
    transition-delay: 0.3s; 
}

.menu-container.open .menu-btn.vertical-4 { 
    top: calc(var(--toggle-button-size) * 4 + var(--toggle-menu-gap) * 3.2); 
    right: 0; 
    transition-delay: 0.4s; 
}

.menu-container.open .menu-btn.vertical-5 { 
    top: calc(var(--toggle-button-size) * 5 + var(--toggle-menu-gap) * 4.0); 
    right: 0; 
    transition-delay: 0.5s; 
}

.menu-container.open .menu-btn.vertical-6 { 
    top: calc(var(--toggle-button-size) * 6 + var(--toggle-menu-gap) * 4.8); 
    right: 0; 
    transition-delay: 0.6s; 
}

.menu-container.open .menu-btn.vertical-7 { 
    top: calc(var(--toggle-button-size) * 7 + var(--toggle-menu-gap) * 5.6); 
    right: 0; 
    transition-delay: 0.7s; 
}