/* =========================================================
   Elementor Mega Menu Widget — mega-menu.css
   ========================================================= */

/* ── Wrapper ─────────────────────────────────────────────── */
.emm-wrapper {
    position: relative;
}

/* ── Hamburger Trigger ───────────────────────────────────── */
.emm-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: #d94f2e;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: opacity 0.2s ease;
    position: relative;
    z-index: 10;
}

.emm-trigger:hover {
    opacity: 0.88;
}

.emm-trigger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -4px;
}

/* Bars container */
.emm-bars {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    pointer-events: none;
}

.emm-bar {
    display: block;
    width: 36px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 3px;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                opacity   0.25s ease;
    transform-origin: center;
}

/* Animate to X when open */
.emm-trigger.is-open .emm-bar--top {
    transform: translateY(10px) rotate(45deg);
}
.emm-trigger.is-open .emm-bar--mid {
    opacity: 0;
    transform: scaleX(0);
}
.emm-trigger.is-open .emm-bar--bot {
    transform: translateY(-10px) rotate(-45deg);
}

/* ── Overlay Base ────────────────────────────────────────── */
.emm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #ffffff;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
    visibility: hidden;
}

.emm-overlay.is-open {
    pointer-events: all;
    visibility: visible;
}

/* ── Animation: Fade ─────────────────────────────────────── */
.emm-overlay--fade {
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.emm-overlay--fade.is-open {
    opacity: 1;
}

/* ── Animation: Slide Down ───────────────────────────────── */
.emm-overlay--slide-down {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                visibility 0.4s ease;
}
.emm-overlay--slide-down.is-open {
    opacity: 1;
    transform: translateY(0);
}

/* ── Animation: Slide from Left ──────────────────────────── */
.emm-overlay--slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                visibility 0.4s ease;
}
.emm-overlay--slide-left.is-open {
    opacity: 1;
    transform: translateX(0);
}

/* ── Animation: Slide from Right ─────────────────────────── */
.emm-overlay--slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                visibility 0.4s ease;
}
.emm-overlay--slide-right.is-open {
    opacity: 1;
    transform: translateX(0);
}

/* ── Animation: Scale ────────────────────────────────────── */
.emm-overlay--scale {
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top center;
    transition: opacity 0.35s ease,
                transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                visibility 0.35s ease;
}
.emm-overlay--scale.is-open {
    opacity: 1;
    transform: scale(1);
}

/* ── Close Button ────────────────────────────────────────── */
.emm-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    color: #333333;
    padding: 8px;
    z-index: 2;
    transition: transform 0.25s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emm-close:hover {
    transform: rotate(90deg);
    opacity: 0.6;
}
.emm-close:focus-visible {
    outline: 2px solid currentColor;
    border-radius: 4px;
}

/* ── Content area ────────────────────────────────────────── */
.emm-content {
    flex: 1;
    width: 100%;
    /* The template itself controls all layout inside */
}

/* Placeholder (no template selected) */
.emm-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: inherit;
    color: #888;
    font-size: 16px;
    text-align: center;
    padding: 40px;
}

/* ── Body lock when open ─────────────────────────────────── */
body.emm-no-scroll {
    overflow: hidden;
}

/* ── Elementor Editor hint ───────────────────────────────── */
.elementor-editor-active .emm-overlay {
    pointer-events: none !important;
    visibility: hidden !important;
}