﻿/* Base small menu style */
.menu-ul-custom {
    border: 0 !important;
    border-radius: 0px !important;
    margin-top: 10px !important;
    box-shadow: 3px 3px 10px 0 #dee2e6; /* bottom-only shadow */
    /* Slide animation setup */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
    padding-top: 0;
    padding-bottom: 0;
    /* Override Bootstrap's display:none */
    display: block !important;
    visibility: hidden;
}

    .menu-ul-custom.show {
        max-height: 500px; /* enough for submenu items */
        padding-top: 10px;
        padding-bottom: 10px;
        visibility: visible;
    }

    .menu-ul-custom > li {
        margin: 5px 10px;
        border-bottom: 1px solid #dee2e6;

    }

        .menu-ul-custom > li:last-child {
            border-bottom: none;
        }
.menu-items {
    min-width: 55px;
}
.menu-items > * {
    color: rgb(22, 22, 22) !important;

}



/* Optional: tighter line height for Khmer */
.font-khmer .nav-link,
.font-khmer .dropdown-item {
    line-height: 1.2;
}

.menu-container {
    box-shadow: 0 3px 6px -1px #dee2e6;
    padding-bottom: 0.25rem;
    z-index: 10;
}

@media (max-width: 768px) {
    .menu-small .nav-link,
    .menu-small .dropdown-item {
        font-size: 14px;
        margin: 4px 0px 4px 0;
        overflow-x: visible;
        white-space: normal;
        word-break: break-word;
    }

    .menu-ul-custom {
        max-width: 100vw;
        transform: translate3d(0px, 0px, 0px) !important;
        margin-top:0px!important;
    }

        .menu-ul-custom > li {
            max-width: 100vw;
        }
}

.menu-ul-custom > li > a.dropdown-item {
    border-left: 2px solid transparent;
    padding-left: calc(1.25rem - 2px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    color: rgb(22, 22, 22);
    text-decoration: none;
}

    .menu-ul-custom > li > a.dropdown-item:hover,
    .menu-ul-custom > li > a.dropdown-item:focus {
        background-color: #e6f0ff;
        border-left-color: #0055a4;
        color: #0055a4;
        text-decoration: none;
    }
