/* Menu Responsive Transform - Trasforma il menu esistente in responsive */
/* Elementi aggiunti che sono nascosti su desktop */
.desktop-hidden {
    display: none !important;
}

/* Classi per mostrare/nascondere contenuto basato su viewport */
.desktop-only {
    display: inline;
}

.mobile-only {
    display: none;
}

/* Navigation wrapper per contenere tutto */
.navigation-wrapper {
    position: relative;
    z-index: 100;
    padding-top: ;
}

/* Sottotitoli delle serie - nascosti su desktop */
.nav-link .rm-series-subtitle,
.nav-link-pink .rm-series-subtitle {
    display: none;
}

/* Assicuriamoci che il menu mantenga gli stili originali su desktop */
@media (min-width: 800px) {
    .main-nav {
        /* Mantieni stili originali */
        color: #ffffff;
        display: block;
    }

    .main-nav .nav-link,
    .main-nav .nav-link-pink {
        /* Mantieni stili originali */
        display: inline-block;

        /* color viene gestito in menu.css con hover funzionante */
        /* margin-right viene gestito in menu.css */
    }
}

/* Sezioni aggiuntive BAG/PROFILE - nascoste su desktop */
.additional-menu-sections {
    display: none;
}

/* Media query per trasformazione a 800px */
@media (max-width: 799px) {
    /* Stato iniziale mobile - menu nascosto */
    .navigation-wrapper {
        position: relative;
        background: transparent;
        padding: 0;
    }

    /* Header mobile - solo logo e icone */
    .main-header-layout {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;

        /* Solo padding verticale */
        margin: 0;

        /* Reset margini */
        background-color: transparent;
    }

    /* Logo visibile e cliccabile */
    .logo-container {
        display: block;
    }

    .logo-container .logo-img {
        cursor: pointer;
        height: 27px;

        /* Stessa dimensione del desktop */
    }

    /* Nascondi menu categorie (Man, Woman, etc) */
    .main_menu {
        display: none !important;
    }

    /* Mostra solo icone user e cart */
    .right-menu-container {
        display: flex !important;
        gap: 12px;
    }

    /* Nascondi icona search */
    .right-menu-container .icon:first-child {
        display: none;
    }

    /* Nascondi completamente main-nav */
    .main-nav {
        display: none !important;
    }

    /* Nascondi sezioni aggiuntive */
    .additional-menu-sections {
        display: none !important;
    }

    /* Nascondi bottone chiusura inizialmente */
    .noova-el-rm {
        display: none !important;
    }

    /* Classe per menu aperto */
    .navigation-wrapper.menu-open {
        position: fixed;
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100vh - 20px);
        background-color: white;

        /* Background image for mobile menu - commented out for now
        background-image: url(../images/batik_white.jpg);
        background-size: 220%;
        background-position: -140px bottom;
        background-repeat: no-repeat; */
        overflow-y: auto;
        padding: 45px;

        /* Aumentato da 35px */
        box-sizing: border-box;
        z-index: 1000;
        border-radius: 15px;

        /* Bordi arrotondati */
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);

        /* Ombra per eleganza */
    }

    /* Quando il menu è aperto */
    .navigation-wrapper.menu-open .desktop-hidden {
        display: block !important;
    }

    .navigation-wrapper.menu-open .desktop-only {
        display: none;
    }

    .navigation-wrapper.menu-open .mobile-only {
        display: inline;
    }

    .navigation-wrapper.menu-open .noova-el-rm {
        display: block !important;
    }

    .navigation-wrapper.menu-open .main-nav {
        display: flex !important;
        flex-direction: column;
        margin: 0;
        padding: 0;
        color: black;
        word-spacing: 0;
    }

    .navigation-wrapper.menu-open .additional-menu-sections {
        display: block !important;
        margin-top: 0;
    }

    .navigation-wrapper.menu-open .main_menu {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* Nascondi le icone quando il menu è aperto */
    .navigation-wrapper.menu-open .right-menu-container {
        display: none !important;
    }

    /* Stili per quando il menu è aperto */
    .navigation-wrapper.menu-open .noova-el-rm {
        position: absolute;
        top: 20px;
        right: 20px;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        font-family: 'Lato', sans-serif;
        font-size: 24px;
        font-weight: 300;
        line-height: 1.15;
        color: #444343;
        cursor: pointer;
    }

    .navigation-wrapper.menu-open .main-header-layout {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 0;
    }

    .navigation-wrapper.menu-open .logo-container {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .navigation-wrapper.menu-open .logo-container .logo-img {
        height: 27px;

        /* Mantieni stessa dimensione del desktop */
        margin-bottom: 20px;
    }

    /* Nascondi Books, NCulture, Get-10% su mobile */
    .navigation-wrapper.menu-open .main_menu a:nth-child(3),
    .navigation-wrapper.menu-open .main_menu a:nth-child(4),
    .navigation-wrapper.menu-open .main_menu a:nth-child(5),
    .navigation-wrapper.menu-open .main_menu .spacer-15 {
        display: none !important;
    }

    /* Stili per Man/Woman nel menu aperto */
    .navigation-wrapper.menu-open .main_menu .menu-category {
        margin: 0;
        background-color: #efefef !important;
        color: black !important;
    }

    .navigation-wrapper.menu-open .main_menu .menu-category-active {
        background-color: var(--nav-color) !important;
        color: #171717 !important;
    }

    /* Stili per i link quando il menu è aperto */
    .navigation-wrapper.menu-open .main-nav a[href="#new"],
    .navigation-wrapper.menu-open .main-nav a[href="#bestsellers"],
    .navigation-wrapper.menu-open .main-nav a[href="#sale"],
    .navigation-wrapper.menu-open .main-nav a[href="#all-shoes"] {
        display: block;
        padding: 6px 0;
        margin: 0;
        color: #131313;
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
        font-family: 'Lato', sans-serif;
    }

    .navigation-wrapper.menu-open .main-nav a[href="#all-shoes"] {
        text-decoration: none !important;
    }

    .navigation-wrapper.menu-open .main-nav .nav-spacer {
        display: none;
    }

    /* Link serie nel menu aperto */
    .navigation-wrapper.menu-open .main-nav a[href="#stratos"],
    .navigation-wrapper.menu-open .main-nav a[href="#bast"],
    .navigation-wrapper.menu-open .main-nav a[href="#batik"],
    .navigation-wrapper.menu-open .main-nav a[href="#magic"],
    .navigation-wrapper.menu-open .main-nav a[href="#tron"],
    .navigation-wrapper.menu-open .main-nav a[href="#lith"] {
        display: block;
        padding: 12px 0;
        position: relative;
        color: #131313;
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
        font-family: 'Lato', sans-serif;
    }

    /* Sottotitoli nel menu aperto */
    .navigation-wrapper.menu-open .nav-link .rm-series-subtitle,
    .navigation-wrapper.menu-open .nav-link-pink .rm-series-subtitle {
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: #666;
        margin-top: 4px;
    }

    /* Hover effects nel menu aperto */
    .navigation-wrapper.menu-open .main-nav a:hover {
        color: var(--nav-color);
    }

    .navigation-wrapper.menu-open .main-nav a:hover .rm-series-subtitle {
        color: #666;
    }

    /* BAG/PROFILE nel menu aperto */
    .navigation-wrapper.menu-open .additional-menu-sections a {
        display: block;
        padding: 12px 0;
        color: #131313;
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
    }

    .navigation-wrapper.menu-open .additional-menu-sections .rm-series-title {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: inherit;
        font-family: 'Lato', sans-serif;
    }

    /* Hover per BAG/PROFILE - DEVE essere DOPO le regole base */
    .navigation-wrapper.menu-open .additional-menu-sections a:hover {
        color: var(--nav-color) !important;
    }

    .navigation-wrapper.menu-open .additional-menu-sections a:hover .rm-series-title,
    .navigation-wrapper.menu-open .additional-menu-sections a:hover .rm-series-subtitle {
        color: inherit !important;
    }

    .navigation-wrapper.menu-open .additional-menu-sections a:hover .rm-series-subtitle {
        color: #666 !important;
    }

    .navigation-wrapper.menu-open .additional-menu-sections .rm-series-subtitle {
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: #666;
        margin-top: 4px;
    }

    .navigation-wrapper.menu-open .additional-menu-sections a:hover .rm-series-title {
        color: var(--accent-color);
    }
}