/* WCG Elementor Mobile Menu Override */

@media (max-width: 1024px) {
    .wcg-mobile-wrapper-container {
        position: relative;
    }

    /* Hide native Elementor toggle */
    #menu-toggle-113,
    .e-n-menu-toggle {
        display: none !important;
    }

    /* Hide original Mega Menu on Mobile */
    .megamenu .e-n-menu-wrapper {
        display: none !important;
    }

    /* Hamburger Button */
    .wcg-hamburger {
        display: flex;
        cursor: pointer;
        width: 30px;
        height: 24px;
        position: relative;
        z-index: 10000;
        margin-left: 15px;
    }

    .wcg-hamburger span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #fff;
        border-radius: 3px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }

    .wcg-hamburger span:nth-child(1) {
        top: 0px;
    }

    .wcg-hamburger span:nth-child(2) {
        top: 10px;
    }

    .wcg-hamburger span:nth-child(3) {
        top: 20px;
    }

    /* Hamburger to X Animation */
    body.wcg-mobile-menu-open .wcg-hamburger span:nth-child(1) {
        top: 10px;
        transform: rotate(135deg);
    }

    body.wcg-mobile-menu-open .wcg-hamburger span:nth-child(2) {
        opacity: 0;
    }

    body.wcg-mobile-menu-open .wcg-hamburger span:nth-child(3) {
        top: 10px;
        transform: rotate(-135deg);
    }

    /* Background Overlay */
    .wcg-mobile-menu-overlay {
        position: fixed;
        top: 80px;
        /* Will be overridden dynamically by JS */
        height: calc(100vh - 80px);
        left: 0;
        width: 100%;
        background-color: #222831;
        /* Dark background WCG style */
        z-index: 999;
        /* Below hamburger */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.wcg-mobile-menu-open .wcg-mobile-menu-overlay {
        transform: translateX(0);
    }

    /* Panels Container */
    .wcg-mobile-menu-panels {
        flex-grow: 1;
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    /* Individual Panel */
    .wcg-mobile-menu-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 20px;
        overflow-y: auto;
        transition: transform 0.3s ease-in-out, visibility 0.3s;
        background-color: #222831;
    }

    /* Panel States */
    .wcg-mobile-menu-panel.panel-current {
        transform: translateX(0);
        visibility: visible;
    }

    .wcg-mobile-menu-panel.panel-hidden-left {
        transform: translateX(-100%);
        visibility: hidden;
    }

    .wcg-mobile-menu-panel.panel-hidden-right {
        transform: translateX(100%);
        visibility: hidden;
    }

    /* Menu Items */
    .wcg-mobile-menu-panel ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .wcg-mobile-menu-panel li {
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        list-style: none;
    }

    .wcg-mobile-menu-panel a,
    .wcg-mobile-menu-panel .wcg-menu-parent-link,
    .wcg-mobile-menu-panel .wcg-gtranslate-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        font-weight: 400;
        padding: 15px 0;
        cursor: pointer;
        font-family: inherit;
    }

    .wcg-mobile-menu-panel a:focus,
    .wcg-mobile-menu-panel a:hover {
        color: #fff;
        background-size: 0 !important;
    }

    /* GTranslate in mobile menu setup */
    .wcg-mobile-menu-panel span.wcg-menu-parent-link .gtranslate_wrapper {
        display: inline-flex !important;
    }

    /* Custom styling for GTranslate wrapper in mobile menu */
    .wcg-mobile-menu-panel .gtranslate_wrapper {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #fff;
        font-family: inherit;
    }

    /* Default to Italian in case lang tag varies */
    .wcg-mobile-menu-panel .gtranslate_wrapper::before {
        content: "Lingua: ";
        margin-right: 5px;
        font-weight: 400;
    }

    /* Override for English */
    html[lang="en"] .wcg-mobile-menu-panel .gtranslate_wrapper::before,
    html[lang^="en"] .wcg-mobile-menu-panel .gtranslate_wrapper::before {
        content: "Language: ";
    }

    .wcg-mobile-menu-panel .gtranslate_wrapper a {
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        /* Bold */
        display: inline-block;
        padding: 0 5px;
    }

    /* Active language (Bold, No underline) */
    .wcg-mobile-menu-panel .gtranslate_wrapper a.glink.active {
        text-decoration: none;
        cursor: default;
        pointer-events: none;
    }

    /* Add slash between languages */
    .wcg-mobile-menu-panel .gtranslate_wrapper a.glink:first-of-type::after {
        content: " / ";
        text-decoration: none;
        display: inline-block;
        font-weight: 400;
        margin-left: 5px;
        pointer-events: none;
    }

    /* Ensure the wrapper respects our inline layout */
    .wcg-mobile-menu-panel .gtranslate_wrapper>* {
        display: inline-flex !important;
        align-items: center;
    }

    /* Arrow Icon */
    .wcg-menu-arrow {
        width: 13px;
        height: 23px;
        background-image: url("data:image/svg+xml,%3Csvg width='13' height='23' viewBox='0 0 13 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.724609 21.6897L10.7246 11.1897L0.724608 0.689697' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        display: inline-block;
    }

    /* Back Button */
    .wcg-mobile-menu-back {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        cursor: pointer;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .wcg-back-arrow {
        width: 13px;
        height: 23px;
        background-image: url("data:image/svg+xml,%3Csvg width='13' height='23' viewBox='0 0 13 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.724609 21.6897L10.7246 11.1897L0.724608 0.689697' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: rotate(180deg);
        display: inline-block;
        margin-right: 15px;
    }

    /* Bottom Contact Button */
    .wcg-mobile-menu-footer {
        padding: 0;
    }

    .wcg-mobile-menu-contact-btn {
        display: block;
        width: 100%;
        background-color: #BD1D2F;
        /* WCG Red */
        color: #fff;
        text-align: center;
        padding: 20px;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-family: inherit;
    }

    .wcg-mobile-menu-contact-btn:hover {
        background-color: #a31f2a;
        color: #fff;
    }

    .wcg-mobile-menu-contact-btn svg {
        width: 16px;
        height: 16px;
        fill: #fff;
    }
}