/* DMC Mobile - Overlay Full Screen */

@media (max-width: 980px) {

    /* ==============================
       Container — fullscreen
       ============================== */
    .dmc-mobile-menu.dmc-overlay {
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--dmc-transition, 0.5s) cubic-bezier(0.4, 0, 0.2, 1),
            visibility var(--dmc-transition, 0.5s) ease,
            transform var(--dmc-transition, 0.5s) cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dmc-mobile-menu.dmc-overlay.dmc-menu-open {
        opacity: 1;
        visibility: visible;
    }

    /* No scroll fade for overlay */
    .dmc-mobile-menu.dmc-overlay::after {
        display: none;
    }

    /* ==============================
       Direction transforms
       ============================== */

    /* From Top */
    .dmc-mobile-menu.dmc-overlay.dmc-from-top {
        transform: translateY(-40px);
    }
    .dmc-mobile-menu.dmc-overlay.dmc-from-top.dmc-menu-open {
        transform: translateY(0);
    }

    /* From Bottom */
    .dmc-mobile-menu.dmc-overlay.dmc-from-bottom {
        transform: translateY(40px);
    }
    .dmc-mobile-menu.dmc-overlay.dmc-from-bottom.dmc-menu-open {
        transform: translateY(0);
    }

    /* From Left */
    .dmc-mobile-menu.dmc-overlay.dmc-from-left {
        transform: translateX(-40px);
    }
    .dmc-mobile-menu.dmc-overlay.dmc-from-left.dmc-menu-open {
        transform: translateX(0);
    }

    /* From Right */
    .dmc-mobile-menu.dmc-overlay.dmc-from-right {
        transform: translateX(40px);
    }
    .dmc-mobile-menu.dmc-overlay.dmc-from-right.dmc-menu-open {
        transform: translateX(0);
    }

    /* Fallback: no direction class = simple fade */
    .dmc-mobile-menu.dmc-overlay:not([class*="dmc-from-"]) {
        transform: scale(0.97);
    }
    .dmc-mobile-menu.dmc-overlay:not([class*="dmc-from-"]).dmc-menu-open {
        transform: scale(1);
    }

    /* ==============================
       Close button — top right
       ============================== */
    .dmc-mobile-menu.dmc-overlay .dmc-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    /* ==============================
       Menu items area — centered
       ============================== */
    .dmc-mobile-menu.dmc-overlay .dmc-menu-items {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 30px 60px;
        width: 100%;
        max-width: 500px;
    }

    /* ---- Item styling ---- */
    .dmc-mobile-menu.dmc-overlay .dmc-menu-items > li {
        width: 100%;
        text-align: center;
    }

    .dmc-mobile-menu.dmc-overlay .dmc-menu-items > li > a {
        font-size: 1.4em !important;
        font-weight: 600;
        letter-spacing: 0.03em;
        padding: 18px 20px !important;
        text-align: center;
        border-left: none !important;
    }

    .dmc-mobile-menu.dmc-overlay .dmc-menu-items > li > a:hover {
        padding-left: 20px !important;
        background: transparent !important;
        opacity: 0.6;
    }

    /* Active dot — centered below text */
    .dmc-mobile-menu.dmc-overlay .dmc-menu-items > li.current-menu-item > a {
        padding-left: 20px !important;
    }

    .dmc-mobile-menu.dmc-overlay .dmc-menu-items > li.current-menu-item > a::before {
        left: 50% !important;
        top: auto !important;
        bottom: 6px;
        transform: translateX(-50%) !important;
    }

    /* Separator — centered short line */
    .dmc-mobile-menu.dmc-overlay .dmc-menu-items > li + li::after {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 40px;
        background: var(--dmc-separator, rgba(255, 255, 255, 0.1)) !important;
    }

    /* ---- Staggered fade-in ---- */
    .dmc-mobile-menu.dmc-overlay .dmc-menu-items > li {
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li {
        opacity: 1;
        transform: translateY(0);
    }

    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li:nth-child(1) { transition-delay: 0.08s; }
    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li:nth-child(2) { transition-delay: 0.14s; }
    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li:nth-child(3) { transition-delay: 0.2s; }
    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li:nth-child(4) { transition-delay: 0.26s; }
    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li:nth-child(5) { transition-delay: 0.32s; }
    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li:nth-child(6) { transition-delay: 0.38s; }
    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li:nth-child(7) { transition-delay: 0.44s; }
    .dmc-mobile-menu.dmc-overlay.dmc-menu-open .dmc-menu-items > li:nth-child(8) { transition-delay: 0.5s; }

    /* ---- Submenu toggle — centered ---- */
    .dmc-mobile-menu.dmc-overlay .dmc-submenu-toggle {
        position: static;
        width: 100%;
        height: 48px;
        min-height: 48px;
        padding: 0;
        justify-content: center;
        border-radius: 0;
        background: transparent;
        margin-top: 4px;
    }

    .dmc-mobile-menu.dmc-overlay .dmc-submenu-toggle.open {
        margin-top: 10px;
    }

    .dmc-mobile-menu.dmc-overlay .dmc-submenu-toggle::after {
        width: 10px;
        height: 10px;
        border-right-width: 2px;
        border-bottom-width: 2px;
        opacity: 0.4;
    }

    /* ---- Submenu — centered ---- */
    .dmc-mobile-menu.dmc-overlay .sub-menu {
        margin: 0 auto !important;
        max-width: 320px;
        background: rgba(0, 0, 0, 0.2);
        border: none !important;
        border-radius: 10px;
        text-align: center;
    }

    .dmc-mobile-menu.dmc-overlay .sub-menu a {
        text-align: center !important;
        font-size: 1.05em !important;
        opacity: 0.6;
        padding: 12px 20px !important;
        margin: 0 !important;
    }

    .dmc-mobile-menu.dmc-overlay .sub-menu a:hover {
        opacity: 1;
        padding-left: 20px !important;
    }
}