/* NANO MOBILE MENU - FINAL, WITH ACTION SHEET & SHADOW FIX */

:root {
    --nano-bar-height: 60px;
    --nano-button-width: 50px;
}

/* --- Main Container & Positioning --- */
body .nano-menu-container {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: var(--nano-bar-height) !important;
    z-index: 99998 !important;
    overflow: hidden;
    /* Keep this for the expanded state */
}

body .nano-menu-container.is-more-panel-visible {
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease-in-out;
}

body .nano-menu-container.nano-position-top {
    bottom: auto !important;
    top: 0 !important;
}

/* --- "More" Action Sheet Panel --- */
body .nano-more-panel {
    position: absolute !important;
    bottom: var(--nano-bar-height) !important;
    left: 0 !important;
    right: 0 !important;
    background-color: var(--nano-panel-bg) !important;
    padding: 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    visibility: hidden;
}

body .nano-menu-container.is-more-panel-visible .nano-more-panel {
    transform: translateY(0);
    visibility: visible;
}

body .nano-menu-container.nano-position-top .nano-more-panel {
    bottom: auto !important;
    top: var(--nano-bar-height) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-100%);
}

body .nano-menu-container.nano-position-top.is-more-panel-visible .nano-more-panel {
    transform: translateY(0);
}

.nano-more-menu-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nano-more-menu-nav ul .menu-item a {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 12px 10px !important;
    text-decoration: none !important;
    color: var(--nano-panel-text) !important;
    border-bottom: 1px solid var(--nano-panel-separator) !important;
    font-size: 16px !important;
}

.nano-more-menu-nav ul .menu-item:last-child a {
    border-bottom: none !important;
}

.nano-more-menu-nav .nano-menu-icon {
    font-size: 18px !important;
    margin-bottom: 0 !important;
}


/* --- The Menu Bar --- */
body .nano-menu-bar {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    width: calc(100% - var(--nano-button-width)) !important;
    height: var(--nano-bar-height) !important;
    background-color: var(--nano-bar-bg) !important;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease-in-out !important;
}

body .nano-position-top .nano-menu-bar {
    top: 0 !important;
    bottom: auto !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* --- The Toggle Button --- */
body .nano-menu-toggle {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--nano-button-width) !important;
    height: var(--nano-bar-height) !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease-in-out !important;
    z-index: 1000 !important;
    background-color: var(--nano-toggle-close-bg) !important;
    color: var(--nano-toggle-close-icon) !important;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
}

body .nano-position-top .nano-menu-toggle {
    top: 0 !important;
    bottom: auto !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* --- Minimized State --- */

/* ########## START OF FIX ########## */
/* This new rule allows the button's shadow to render outside the container's bounds when minimized. */
body .nano-menu-container.is-minimized {
    overflow: visible !important;
}

/* ########## END OF FIX ########## */

body .nano-menu-container.is-minimized .nano-menu-bar {
    transform: translateY(100%) !important;
}

body .nano-menu-container.is-minimized.nano-position-top .nano-menu-bar {
    transform: translateY(-100%) !important;
}

body .nano-menu-container.is-minimized .nano-menu-toggle {
    right: 15px !important;
    bottom: 15px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    background-color: var(--nano-toggle-open-bg) !important;
    color: var(--nano-toggle-open-icon) !important;
}

body .nano-menu-container.is-minimized.nano-position-top .nano-menu-toggle {
    top: 15px !important;
    bottom: auto !important;
}

/* --- Menu Items & "More" Button --- */
body .nano-menu-items-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body .nano-menu-items-list .menu-item,
body .nano-more-wrap {
    flex: 1 !important;
    text-align: center !important;
    display: flex !important;
}

body .nano-menu-items-list .menu-item a,
body .nano-more-wrap a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    color: var(--nano-base-color) !important;
    text-decoration: none !important;
    font-size: 12px !important;
}

body .nano-menu-items-list .menu-item a:hover,
body .nano-more-wrap a:hover {
    color: var(--nano-active-color) !important;
}

body .nano-menu-items-list .menu-item.current-menu-item a {
    color: var(--nano-active-color) !important;
}

body .nano-menu-icon {
    font-size: 20px !important;
    margin-bottom: 4px !important;
}

body .nano-display-icon-only .nano-menu-label {
    display: none !important;
}

body .nano-display-text-only .nano-menu-icon {
    display: none !important;
}

body .nano-more-wrap.is-active a {
    color: var(--nano-active-color) !important;
}