/* ============================

   MENU LATERALE - BASE

   ============================ */



.menu-container {

    position: fixed;

    left: 0;

    top: calc(84px + 40px);            /* sotto header + banner */

    bottom: 0;                         /* arriva fino al fondo viewport */

    background-color: #fff;

    width: 400px;

    height: auto;                      /* niente 100vh → iPhone/Safari non taglia */

    border-right: 1px solid #ccc;

    border-top: 1px solid #ccc;

    z-index: 9999;

    color: #333;

    display: none;

    flex-direction: column;

    padding: 2rem 1.5rem;

    transition: transform 0.3s ease, opacity 0.3s ease;



    /* importantissimo per iPhone/Safari: menu scrollabile */

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    touch-action: pan-y;

}



/* visibile */

.menu-container.open {

    display: flex;

}



/* Struttura interna */

.menu {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 100%;

}



.menu-group {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



/* ============================

   LISTA LINK PRINCIPALI

   ============================ */



.menu-section-list ol {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 1.2rem;

    margin: 0;

    padding: 0;

}



.menu-section-list ol li a {

    text-decoration: none;

    color: inherit;

    font-size: 20px;

    letter-spacing: 0.5px;

}



.menu-section-list ol li a:hover {

    text-decoration: underline;

}



/* ============================

   LABEL COMUNI (VALUTA + LINGUA)

   ============================ */



.menu-label {

    display: block;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #888;

    margin-bottom: 0.35rem;

}



/* ============================

   VALUTA (SELECT REALE)

   ============================ */



.menu-section-currency {

    margin-bottom: 1.2rem;

}



.menu-section-currency select {

    width: 100%;

    padding: 0.55rem 0.75rem;

    border-radius: 18px;

    border: 1px solid #ddd;

    background: #f9f9f9;

    font-size: 0.95rem;

    color: #333;

    outline: none;

    min-height: 44px;           /* target touch comodo */

    box-sizing: border-box;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;



    background-image:

        linear-gradient(45deg, transparent 50%, #666 50%),

        linear-gradient(135deg, #666 50%, transparent 50%);

    background-position:

        calc(100% - 18px) 50%,

        calc(100% - 12px) 50%;

    background-size: 6px 6px;

    background-repeat: no-repeat;

    cursor: pointer;

}



.menu-section-currency select:hover,

.menu-section-currency select:focus {

    border-color: #000;

    background-color: #fff;

}



/* ============================

   LINK ACCEDI / ACCOUNT

   ============================ */



.menu-section-user {

    display: none;  /* desktop nascosto (mostrato su mobile) */

    flex-direction: row;

    align-items: center;

    gap: 0.5rem;

    text-decoration: none;

    color: inherit;

    font-size: 1.1rem;

    cursor: pointer;

    padding: 0.2rem 0;

}



.menu-section-user ion-icon {

    font-size: 1.5rem;

    transition: transform 0.15s ease;

}



.menu-section-user span {

    font-size: 1rem;

}



.menu-section-user:hover ion-icon {

    transform: scale(1.15);

}



.menu-section-user:hover {

    text-decoration: underline;

}



/* ============================

   SOCIAL

   ============================ */



.menu-section-social ol {

    list-style: none;

    display: flex;

    flex-direction: row;

    gap: 1rem;

    margin: 0;

    padding: 0;

}



.menu-section-social ol li a {

    color: inherit;

    font-size: 1.4rem;

    transition: transform 0.2s ease;

}



.menu-section-social ol li a:hover {

    transform: scale(1.1);

}



/* ============================

   LINGUA

   ============================ */



.menu-section-language {

    margin-bottom: 1.5rem;

}



/* --- 1) SELECT NATIVA (smartphone) --- */

.menu-language-native {

    width: 100%;

    padding: 0.55rem 0.75rem;

    border-radius: 18px;

    border: 1px solid #ddd;

    background: #f9f9f9;

    font-size: 0.95rem;

    color: #333;

    outline: none;

    min-height: 44px;

    box-sizing: border-box;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;



    background-image:

        linear-gradient(45deg, transparent 50%, #666 50%),

        linear-gradient(135deg, #666 50%, transparent 50%);

    background-position:

        calc(100% - 18px) 50%,

        calc(100% - 12px) 50%;

    background-size: 6px 6px;

    background-repeat: no-repeat;

    cursor: pointer;

}



.menu-language-native:hover,

.menu-language-native:focus {

    border-color: #000;

    background-color: #fff;

}



/* --- 2) FINTA SELECT (desktop/tablet) --- */



/* wrapper */

.lang-select {

    position: relative;

    max-width: 100%;

}



/* bottone “select”: bandiera + testo + freccetta */

.lang-select-trigger {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.25rem 0;

    background: transparent;

    border: none;

    color: inherit;

    cursor: pointer;

    width: 100%;

}



.lang-select-trigger:focus-visible {

    outline: 2px solid currentColor;

    outline-offset: 2px;

}



.lang-trigger-left {

    display: flex;

    align-items: center;

    gap: 0.4rem;

}



/* bandiera (solo immagine) */

.lang-select .lang-flag {

    width: 26px;

    height: 18px;

    border-radius: 0;

    overflow: hidden;

    flex-shrink: 0;

}



/* testo lingua */

.lang-select .lang-text {

    font-size: 0.95rem;

}



/* freccetta */

.lang-arrow {

    margin-left: auto;

    width: 8px;

    height: 8px;

    border-right: 2px solid currentColor;

    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    transition: transform 0.2s ease;

    flex-shrink: 0;

}



.lang-select.open .lang-arrow {

    transform: rotate(-135deg);

}



/* dropdown APERTO SOPRA il trigger */

.lang-options {

    position: absolute;

    left: 0;

    bottom: calc(100% + 6px);

    top: auto;

    margin: 0;

    padding: 0.25rem 0;



    background-color: #fff;

    border-radius: 8px;

    border: 1px solid #ddd;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

    max-height: 210px;

    overflow-y: auto;

    display: none;

    z-index: 1100;

    box-sizing: border-box;

}



/* visibile quando .lang-select ha .open */

.lang-select.open .lang-options {

    display: block;

}



/* singola opzione (button, niente bullet) */

.lang-option {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.35rem 0.8rem;

    cursor: pointer;

    font-size: 0.95rem;

    width: 100%;

    text-align: left;

    border: none;

    background: transparent;

    color: inherit;

    white-space: nowrap;

}



.lang-option:hover {

    background-color: #f2f2f2;

}



/* lingua attiva */

.lang-option.is-active {

    font-weight: 600;

    background-color: #000;

    color: #fff;

}



.lang-option.is-active .lang-text {

    font-weight: 700;

}



/* ============================

   RESPONSIVE

   ============================ */



/* Tablet fino a 1200px */

@media screen and (max-width: 1200px) {

    .menu-container {

        width: 300px;

        padding: 1.5rem 1rem;

    }



    .menu-section-list ol li a {

        font-size: 18px;

    }

}



/* Mobile fino a 750px */

@media screen and (max-width: 750px) {

    .menu-container {

        width: 100%;

        left: 0;

        right: 0;

        /* sempre sotto header+banner, fino al fondo, scrollabile */

        top: calc(84px + 40px);

        bottom: 0;

        height: auto;

        padding: 1.5rem 1.5rem 3.5rem; /* spazio extra per toolbar browser */

    }



    .menu-section-list ol li a {

        font-size: 22px;

    }



    .menu-section-currency,

    .menu-section-language,

    .menu-section-social {

        font-size: 1rem;

        margin: 0.75rem 0;

    }



    /* mostra il link Accedi solo su mobile */

    .menu-section-user {

        display: flex !important;

    }



    /* stile più “card” per la select lingua nativa su iPhone */

    .menu-language-native {

        border-radius: 999px;

        background: #f3f4f6;

        border: 1px solid #cbd5e1;

        padding: 0.65rem 1rem;

        font-size: 1rem;

    }

}



/* ========================================

   ADATTAMENTI SPECIFICI PER SAFARI / iOS

   ======================================== */



/* Feature-detect Safari / WebKit mobile */

@supports (-webkit-touch-callout: none) {



    /* Scroll più controllato dentro il menu,

       evitando che il body sotto prenda il “rubber-band” */

    .menu-container {

        overscroll-behavior-y: contain;

    }



    @media screen and (max-width: 750px) {

        .menu-container {

            /* extra spazio sotto per safe-area iPhone (notch, home indicator) */

            padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));

            padding-bottom: calc(3.5rem + constant(safe-area-inset-bottom));

        }

    }

}