/**
 * Custom Account Menu Mobile - CSS
 * Horizontal, responsive menu for mobile devices
 */

/* Mobile Menu Container - Horizontal, wraps responsively */
.custom-account-menu-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.custom-account-menu-mobile a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: fit-content;
    text-align: center;
}

.custom-account-menu-mobile a:hover {
    opacity: 0.8;
}

.custom-account-menu-mobile a.is-active {
    font-weight: bold;
text-decoration: underline;
}

/* Hide on desktop, show on mobile */
@media (min-width: 769px) {
    .custom-account-menu-mobile {
        display: none !important;
    }
}

/* Mobile styles - horizontal layout */
@media (max-width: 768px) {
    .custom-account-menu-mobile {
        display: flex !important;
        flex-direction: row !important; /* Horizontal layout */
        flex-wrap: wrap !important; /* Allow wrapping to new lines */
    }
    
    /* Allow items to wrap to new lines but stay horizontal */
    .custom-account-menu-mobile a {
        flex: 0 1 auto;
        min-width: fit-content;
        white-space: nowrap;
    }
}

/* Ensure menu doesn't break layout */
.custom-account-menu-mobile {
    clear: both;
    overflow: hidden;
}