/* ======================================================
   CONTENITORE GENERALE MENU
====================================================== */

.vm-menu-list,
.vm-menu-list > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}


/* ======================================================
   VOCI PRINCIPALI
   DISTANZA UNIFORME E COMPATTA
====================================================== */

.vm-menu-item,
.vm-menu-toggle {
    position: relative;

    display: inline-flex !important;
    align-items: center !important;

    width: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;

    /*
     * Distanza uniforme tra tutte le voci principali.
     * Ridurre questo valore per compattare ulteriormente.
     */
    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    box-sizing: border-box;
}


/* Ultima voce senza margine inferiore */

.vm-menu-list > .vm-menu-item:last-child,
.vm-menu-list > .e-con-inner > .vm-menu-item:last-child {
    margin-bottom: 0 !important;
}


/* Elimina spazi interni applicati da Elementor */

.vm-menu-item > .elementor-widget-container,
.vm-menu-toggle > .elementor-widget-container,
.vm-menu-item .elementor-heading-title,
.vm-menu-toggle .elementor-heading-title,
.vm-menu-item a,
.vm-menu-toggle a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}


/* ======================================================
   VOCI CON SOTTOMENU
====================================================== */

.vm-menu-toggle {
    gap: 8px;

    cursor: pointer;
    user-select: none;
}


/* ======================================================
   COLORI E TRANSIZIONI
====================================================== */

.vm-menu-item,
.vm-menu-item .elementor-heading-title,
.vm-menu-item a,
.vm-menu-toggle,
.vm-menu-toggle .elementor-heading-title,
.vm-menu-toggle a {
    color: #ffffff !important;

    transition:
        color .25s ease,
        transform .25s ease;
}


/* Hover */

.vm-menu-item:hover,
.vm-menu-item:hover .elementor-heading-title,
.vm-menu-item:hover a,
.vm-menu-toggle:hover,
.vm-menu-toggle:hover .elementor-heading-title,
.vm-menu-toggle:hover a {
    color: #ffd100 !important;
}


/* ======================================================
   FRECCIA SOTTOMENU
====================================================== */

.vm-menu-toggle::after {
    content: "";

    flex: 0 0 auto;

    width: 10px;
    height: 10px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    color: #ffffff;

    transform: rotate(45deg) translateY(-2px);
    transform-origin: center;

    transition:
        color .25s ease,
        transform .35s cubic-bezier(.22, 1, .36, 1);
}


.vm-menu-toggle:hover::after {
    color: #ffd100;
}


/* Stato aperto */

.vm-menu-toggle.is-active,
.vm-menu-toggle.is-active .elementor-heading-title,
.vm-menu-toggle.is-active a {
    color: #ffd100 !important;
}


.vm-menu-toggle.is-active::after {
    color: #ffd100;
    transform: rotate(225deg) translate(-1px, -1px);
}


/* ======================================================
   SUBMENU CHIUSO
   NON DEVE OCCUPARE SPAZIO
====================================================== */

.vm-submenu {
    display: none !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0;
    visibility: hidden;
}


/* ======================================================
   SUBMENU APERTO
====================================================== */

.vm-submenu.is-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    /*
     * Distanza fra le singole voci interne.
     */
    gap: 6px !important;
    row-gap: 6px !important;

    /*
     * 8 px fra il titolo principale e il submenu.
     * 8 px fra l'ultima voce del submenu e la voce
     * principale successiva.
     */
    margin: 8px 0 8px 18px !important;
    padding: 0 !important;

    opacity: 1;
    visibility: visible;

    animation: vmSubmenuOpen .28s ease both;
}


/*
 * Quando il submenu è aperto, il margine inferiore
 * della voce principale viene eliminato perché lo
 * spazio è gestito dal submenu.
 */

.vm-menu-toggle.is-active {
    margin-bottom: 0 !important;
}


/* ======================================================
   ANIMAZIONE APERTURA SUBMENU
====================================================== */

@keyframes vmSubmenuOpen {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ======================================================
   ELEMENTI INTERNI DEL SUBMENU
====================================================== */

.vm-submenu .elementor-widget-container,
.vm-submenu .elementor-heading-title,
.vm-submenu p,
.vm-submenu a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}


/* ======================================================
   PULSANTE CHIUSURA POPUP
====================================================== */

.elementor-popup-modal .dialog-close-button {
    position: fixed !important;

    top: 70px !important;
    left: 278px !important;
    right: auto !important;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff !important;
    font-size: 38px !important;
    line-height: 1;

    transition:
        color .25s ease,
        transform .25s ease;

    z-index: 99999;
}


.elementor-popup-modal .dialog-close-button:hover {
    color: #ffd100 !important;
    transform: rotate(90deg);
}


body:not(.admin-bar) .elementor-popup-modal .dialog-close-button {
    top: 40px !important;
}


/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 767px) {

    /*
     * Su mobile manteniamo le voci compatte,
     * ma leggermente più distanziate per facilitare il tocco.
     */

    .vm-menu-item,
    .vm-menu-toggle {
        margin-bottom: 4px !important;
    }


    .vm-menu-toggle.is-active {
        margin-bottom: 0 !important;
    }


    .vm-submenu.is-open {
        gap: 6px !important;
        row-gap: 6px !important;

        margin: 8px 0 8px 14px !important;
    }


    .vm-menu-toggle {
        gap: 8px;
    }


    .vm-menu-toggle::after {
        width: 9px;
        height: 9px;
    }


    .elementor-popup-modal .dialog-close-button {
        top: 28px !important;
        left: auto !important;
        right: 24px !important;

        width: 46px;
        height: 46px;

        font-size: 34px !important;
    }


    body:not(.admin-bar) .elementor-popup-modal .dialog-close-button {
        top: 28px !important;
    }
}

/* ======================================================
   POPUP FULLSCREEN — BLOCCO SCROLL PAGINA
====================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}


/* Quando Elementor apre il popup:
   la pagina sottostante NON deve muoversi */
body.dialog-prevent-scroll {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    overscroll-behavior: none !important;
}


/* ======================================================
   MODALE ELEMENTOR
====================================================== */

.elementor-popup-modal {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100vh !important;
    height: 100dvh !important;

    margin: 0 !important;

    overflow: hidden !important;

    overscroll-behavior: none !important;

    z-index: 99999 !important;
}


/* ======================================================
   CONTENITORE DEL POPUP
   Deve rimanere SEMPRE fermo
====================================================== */

.elementor-popup-modal .dialog-widget-content {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;

    overscroll-behavior: none !important;
}


/* ======================================================
   SOLO QUESTO ELEMENTO PUÒ SCORRERE SU/GIÙ
====================================================== */

.elementor-popup-modal .dialog-message {
    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    max-height: 100% !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-x: none !important;
    overscroll-behavior-y: contain !important;

    -webkit-overflow-scrolling: touch;

    touch-action: pan-y;
}


/* Elementor: nessun elemento può allargare il popup */

.elementor-popup-modal .e-con,
.elementor-popup-modal .e-con-inner,
.elementor-popup-modal .elementor-element {
    max-width: 100% !important;
}


/* ======================================================
   MOBILE / iPHONE
====================================================== */

@media (max-width: 767px) {

    .elementor-popup-modal {
        width: 100vw !important;
        height: 100dvh !important;

        left: 0 !important;
        right: 0 !important;

        overflow: hidden !important;
    }

    .elementor-popup-modal .dialog-widget-content {
        width: 100vw !important;
        height: 100dvh !important;

        left: 0 !important;
        right: 0 !important;

        overflow: hidden !important;
    }

    .elementor-popup-modal .dialog-message {
        width: 100% !important;
        height: 100% !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* ======================================================
   BLOCCO PAGINA DURANTE POPUP MENU
====================================================== */

html.vm-popup-open,
body.vm-popup-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}


/* Popup sempre inchiodato alla viewport */

.elementor-popup-modal {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    max-width: 100vw !important;
    max-height: 100dvh !important;

    overflow: hidden !important;
}


/* Contenitore Elementor */

.elementor-popup-modal .dialog-widget-content {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;
}


/* Solo il contenuto del menu può scorrere */

.elementor-popup-modal .dialog-message {
    width: 100% !important;
    height: 100% !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain !important;
}

/* ======================================================
   POPUP MENU VILLA MUSONE
   DESKTOP: PANNELLO BLU SX - DESTRA TRASPARENTE
   MOBILE: INVARIATO
   ====================================================== */


/* ======================================================
   DESKTOP
   ====================================================== */

@media (min-width: 1025px) {

    /*
     * Il popup RESTA fullscreen e nella posizione
     * originale. Rendiamo semplicemente trasparente
     * tutto ciò che sta dietro.
     */
    .elementor-popup-modal {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }


    .elementor-popup-modal .dialog-widget-content {
        position: absolute !important;

        inset: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        overflow: hidden !important;
    }


    /*
     * PANNELLO BLU SINISTRO
     *
     * 460px permette alle voci lunghe
     * di rimanere su una sola riga.
     */
    .elementor-popup-modal .dialog-widget-content::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 460px;
        max-width: 100vw;

        background: #0A203B !important;

        border-right: 1px solid rgba(255,255,255,.16);

        pointer-events: none;

        z-index: 0;
    }


    /*
     * NESSUN secondo overlay
     */
    .elementor-popup-modal .dialog-widget-content::after {
        content: none !important;
        display: none !important;
    }


    /*
     * IMPORTANTE:
     * il contenuto Elementor rimane esattamente
     * nella posizione originale.
     */
    .elementor-popup-modal .dialog-message {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

        background: transparent !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 2;
    }


    /*
     * Evita che le voci principali vadano
     * su due righe.
     */
    .vm-menu-item,
    .vm-menu-toggle,
    .vm-menu-item .elementor-heading-title,
    .vm-menu-toggle .elementor-heading-title,
    .vm-menu-item a,
    .vm-menu-toggle a {
        white-space: nowrap !important;
    }
}


/* ======================================================
   TABLET
   ====================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .elementor-popup-modal,
    .elementor-popup-modal .dialog-widget-content {
        background: #0D2747 !important;
    }

    .elementor-popup-modal .dialog-widget-content::before,
    .elementor-popup-modal .dialog-widget-content::after {
        content: none !important;
        display: none !important;
    }
}



/* Smartphone: regole originali di OLD_menu.css. */
@media (max-width: 767px) {
/* ------------------------------------------------------
   1. BASE POPUP
   ------------------------------------------------------ */

.elementor-popup-modal,
.elementor-popup-modal .dialog-widget-content {
    background: #08172E !important;
    background-color: #08172E !important;
    background-image: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ------------------------------------------------------
   2. CONTENUTO POPUP
   ------------------------------------------------------ */

.elementor-popup-modal .dialog-message {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    position: relative;
    z-index: 3;
}


/* ------------------------------------------------------
   3. RIMUOVE VECCHI SFONDI ELEMENTOR
   ------------------------------------------------------ */

.elementor-popup-modal .dialog-message > .elementor,
.elementor-popup-modal .dialog-message .elementor-location-popup,
.elementor-popup-modal .dialog-message .e-con,
.elementor-popup-modal .dialog-message .e-con-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


.elementor-popup-modal .elementor-background-overlay,
.elementor-popup-modal .e-con::before,
.elementor-popup-modal .e-con::after {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* ------------------------------------------------------
   4. CONTENITORE PRINCIPALE
   ------------------------------------------------------ */

.elementor-popup-modal .dialog-widget-content {
    position: absolute !important;
    overflow: hidden !important;
}



}

/* ======================================================
   SMARTPHONE
   FINO A 767px
   NON CAMBIA NULLA
   ====================================================== */

@media (max-width: 767px) {

    .elementor-popup-modal .dialog-widget-content::before {
        content: "";

        position: absolute;

        top: 0;
        right: 0;
        left: auto;

        width: 100%;
        height: 100%;

        background-image:
            url('https://dev.villamusone.it/wp-content/uploads/2026/08/hero-home-villa-musone-calcio.jpg') !important;

        background-repeat: no-repeat !important;
        background-position: 60% center !important;
        background-size: cover !important;

        /*
         * Manteniamo esattamente
         * l'opacità precedente
         */
        opacity: 0.14;

        transform: none !important;

        -webkit-mask: none !important;
        mask: none !important;

        -webkit-mask-image: none !important;
        mask-image: none !important;

        filter: none !important;
        -webkit-filter: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        pointer-events: none;

        z-index: 0;
    }


    /*
     * Nessun pannello/overlay aggiuntivo
     * su smartphone
     */
    .elementor-popup-modal .dialog-widget-content::after {
        content: none !important;
        display: none !important;

        background: none !important;
        background-image: none !important;
    }
}

/* Desktop: rimuove il gradiente Elementor sopra il pannello blu.
   Posizione, larghezza, spaziature e smartphone restano invariati. */
@media (min-width: 1025px) {
    #elementor-popup-modal-96 .elementor-96 .elementor-element.elementor-element-d8b4c57 {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Desktop: blocca lo scroll senza cambiare la geometria della pagina.
   Il blocco fixed per iOS resta attivo su smartphone. */
@media (min-width: 1025px) {
    html {
        scrollbar-gutter: stable;
    }
    body.vm-popup-open {
        position: static !important;
        width: auto !important;
    }
}