/* ================================================================= */
/* MCS HERO SLIDER - STILI FRONTEND (v1.8.6)                         */
/* ================================================================= */

/* Reset Full-Width Storefront e Contenitori Home Page */
body.home #content,
body.home #primary,
body.home .site-content,
body.home .entry-content,
body.home .site-main,
body.home .col-full,
.entry-content:has(.mcs-hero-wrapper),
.site-main:has(.mcs-hero-wrapper),
.col-full:has(.mcs-hero-wrapper),
#content:has(.mcs-hero-wrapper),
#primary:has(.mcs-hero-wrapper),
.site-content:has(.mcs-hero-wrapper) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.mcs-hero-wrapper,
.mcs-hero-wrapper * {
    box-sizing: border-box !important;
}

html, body, #page, #content, .site-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ELIMINAZIONE SFONDO BIANCO */
.mcs-hero-wrapper,
.mcs-hero-swiper,
.swiper-slide {
    background-color: #000000 !important;
}

/* FIX SLITTAMENTO LATERALE E FORZATURA FULL-WIDTH (DESKTOP) */
.mcs-hero-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* CONFIGURAZIONE SWIPER BASE (DESKTOP) */
.mcs-hero-swiper {
    width: 100% !important;
    height: calc(100vw * (1080 / 1920));
    max-height: 1080px;
    min-height: 400px;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}

.mcs-hero-swiper.swiper-initialized,
.mcs-hero-swiper.mcs-ready {
    opacity: 1 !important;
    visibility: visible !important;
}

.mcs-hero-swiper .swiper-wrapper {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .mcs-hero-wrapper .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
}

/* IMMAGINE DI SFONDO (DESKTOP) */
.slide-bg-zoom {
    width: calc(100% + 2px) !important;
    height: 100% !important;
    margin-left: -1px !important;
    background-image: var(--bg-desktop);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
}

/* HOTSPOT DESKTOP */
body .mcs-hero-wrapper .mcs-hotspot {
    position: absolute !important;
    top: var(--hs-top);
    left: var(--hs-left);
    width: var(--hs-w);
    height: var(--hs-h);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box !important;
    padding: 5px;
    background-color: var(--hs-bg, rgba(0, 0, 0, 0.8));
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease, filter 0.2s ease;
    z-index: 10 !important;
}

body .mcs-hero-wrapper .mcs-hotspot:hover {
    background-color: var(--hs-bg-hover, rgba(0, 0, 0, 1)) !important;
    transform: scale(1.03);
    filter: brightness(1.15);
}

/* PULSAZIONE DESKTOP CON VELOCITÀ DINAMICA */
body .mcs-hero-wrapper .mcs-hotspot.mcs-pulse-desktop {
    animation: mcsPulsePing var(--hs-pulse-speed, 1.8s) infinite;
}

/* BALLOON DESKTOP */
body .mcs-hero-wrapper .mcs-balloon {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box !important;
    padding: 10px 15px;
    background-color: var(--balloon-bg, rgba(0, 0, 0, 0.8));
    color: var(--balloon-color, #ffffff);
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease, filter 0.2s ease;
    z-index: 12 !important;
}

/* CONTROLLI SWIPER */
.mcs-hero-swiper .swiper-pagination { bottom: 20px !important; }
.mcs-hero-swiper .swiper-pagination-bullet { width: 14px !important; height: 14px !important; background-color: #ffffff !important; opacity: 0.6 !important; margin: 0 8px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important; }
.mcs-hero-swiper .swiper-pagination-bullet-active { opacity: 1 !important; transform: scale(1.2); }
.mcs-hero-swiper .swiper-button-prev, .mcs-hero-swiper .swiper-button-next { color: #ffffff !important; font-weight: bold; font-family: monospace; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); width: 50px !important; height: 50px !important; }
.mcs-hero-swiper .swiper-button-prev::after, .mcs-hero-swiper .swiper-button-next::after { display: none !important; }

@keyframes mcsPulsePing {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* ================================================================= */
/* REGOLE MOBILE (<768px)                                            */
/* ================================================================= */
@media screen and (max-width: 767px) {
    
    /* Reset totale contenitore wrapper per evitare uscite dal layout e tagli */
    html body .mcs-hero-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Contenitore Swiper: height: 100vw forza Firefox a calcolare l'altezza 1:1 */
    html body .mcs-hero-swiper {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vw !important; /* FIX FIREFOX: forza la dimensione concreta 1:1 */
        max-height: 100vw !important;
        min-height: unset !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Forzatura altezza 100% sui contenitori interni per Firefox */
    html body .mcs-hero-swiper .swiper-wrapper,
    html body .mcs-hero-wrapper .swiper-slide {
        height: 100% !important;
    }

    /* Immagine 1:1 perfettamente centrata senza tagli */
    html body .mcs-hero-wrapper .slide-bg-zoom {
        width: 100% !important;
        height: 100% !important;
        margin-left: 0 !important;
        background-image: var(--bg-mobile) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        
        animation: none !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        will-change: auto !important;
        perspective: none !important;
    }

    /* TRASFORMAZIONE HOTSPOT IN PALLINO CON "+" CON VELOCITÀ PING MOBILE DEDICATA */
    html body div.mcs-hero-wrapper .mcs-hotspot {
        top: var(--hs-m-top) !important;
        left: var(--hs-m-left) !important;
        width: var(--hs-m-w, 36px) !important;
        height: var(--hs-m-w, 36px) !important;
        min-height: unset !important;
        max-height: unset !important;
        background-color: var(--hs-m-bg, rgba(221, 77, 77, 0.60)) !important;
        border-radius: 50% !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        animation: mcsPulsePing var(--hs-m-pulse-speed, 1.8s) infinite !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body div.mcs-hero-wrapper .mcs-hotspot * {
        display: none !important;
        visibility: hidden !important;
    }

    html body div.mcs-hero-wrapper .mcs-hotspot::after {
        content: '+' !important;
        font-size: 22px !important;
        font-weight: bold !important;
        color: #ffffff !important;
        line-height: 1 !important;
        display: block !important;
        visibility: visible !important;
    }

    /* NASCONDE BALLOON */
    html body div.mcs-hero-wrapper .mcs-balloon {
        display: none !important;
    }

    /* Paginazione ridotta */
    .mcs-hero-swiper .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        margin: 0 4px !important;
    }
}