/* Mobile Menu Widget - Override Elementor Styles */

/* Fix mobile viewport height for address bars */
.mc-mobile-menu__overlay {
    height: 100vh !important;
    height: 100dvh !important;
}

.mc-mobile-menu__content {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
}

/* Remove Elementor focus/hover styles from hamburger button */
.mc-mobile-menu__toggle,
.mc-mobile-menu__toggle:hover,
.mc-mobile-menu__toggle:focus,
.mc-mobile-menu__toggle:active,
.mc-mobile-menu__toggle:focus-visible,
button.mc-mobile-menu__toggle,
button.mc-mobile-menu__toggle:hover,
button.mc-mobile-menu__toggle:focus,
button.mc-mobile-menu__toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Ensure icon doesn't shift during transformation */
.mc-mobile-menu__icon {
    display: block !important;
    width: 27px;
    height: 21px;
    overflow: visible;
}

/* Fix hamburger to X animation */
.mc-mobile-menu__line {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    transform-origin: center center !important;
}

/* X state transformations */
.mc-mobile-menu__toggle[aria-expanded="true"] .mc-mobile-menu__line--top {
    transform: translateX(-7px) translateY(9px) rotate(45deg) !important;
}

.mc-mobile-menu__toggle[aria-expanded="true"] .mc-mobile-menu__line--middle {
    opacity: 0 !important;
    transform: scale(0) !important;
}

.mc-mobile-menu__toggle[aria-expanded="true"] .mc-mobile-menu__line--bottom {
    transform: translateX(-7px) translateY(-4px) rotate(-45deg) !important;
}

/* Mobile Language Switcher Styles */
.mc-mobile-lang-switcher {
    position: relative;
}

/* Hide original TranslatePress dropdown */
.mc-mobile-lang-switcher .trp-shortcode-switcher__wrapper {
    display: none !important;
}

/* Custom language switcher container */
.mc-mobile-lang-switcher .mc-lang-slider {
    display: inline-flex;
    position: relative;
    border-radius: 30px;
    background: #E6E6E6;
    padding: 0;
    overflow: visible;
    height: 24px;
}

/* Slider background (black pill) */
.mc-mobile-lang-switcher .mc-lang-slider::before {
    content: '';
    position: absolute;
    width: 77.851px;
    height: 24px;
    border-radius: 30px;
    background: #000;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* Language items */
.mc-mobile-lang-switcher .mc-lang-item {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 77.851px;
    height: 24px;
    color: #000;
    text-align: center;
    font-family: "articulat-cf", Sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.32px;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: none;
    line-height: 1;
}

/* Active language */
.mc-mobile-lang-switcher .mc-lang-item.active {
    color: #FFF;
}

/* Slider positions based on active index */
.mc-mobile-lang-switcher .mc-lang-slider[data-active="0"]::before {
    transform: translateX(0) translateY(-50%);
}

.mc-mobile-lang-switcher .mc-lang-slider[data-active="1"]::before {
    transform: translateX(77.851px) translateY(-50%);
}
