/* ============================================================
   My Mobile Nav v2.2.1 — Mobile only
   ============================================================ */

/* ------------------------------------------------------------
   Inline SVG icon base (used when Font Awesome is not loaded)
   ------------------------------------------------------------ */
.mmn-svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Font Awesome font-weight fix — only relevant when the
   self-hosted FA stylesheet is loaded.
   ------------------------------------------------------------ */
.fa-solid,
.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.fa-regular,
.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}
.fa-brands,
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.fa-solid::before,
.fa-regular::before,
.fa-brands::before,
.fas::before,
.far::before,
.fab::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Hide on desktop
   ============================================================ */
@media screen and (min-width: 768px) {
    #mmn-hamburger,
    #mmn-drawer,
    #mmn-overlay,
    #mmn-bottom-bar {
        display: none !important;
    }
}

/* ============================================================
   Mobile
   ============================================================ */
@media screen and (max-width: 767px) {

    body.mmn-drawer-open { overflow: hidden; }
    body.mmn-has-bottom-bar { padding-bottom: 80px !important; }

    /* ---------- Hamburger ---------- */
    .mmn-hamburger {
        position: fixed;
        z-index: 99999;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: none;
        transition: all .3s;
        padding: 0;
        background: #111;
        -webkit-tap-highlight-color: transparent;
    }
    .mmn-hamburger.pos-top-right    { top: 15px;    right: 15px; }
    .mmn-hamburger.pos-top-left     { top: 15px;    left: 15px; }
    .mmn-hamburger.pos-bottom-right { bottom: 85px; right: 15px; }

    .mmn-hamburger.style-dark-round   { background: #111; }
    .mmn-hamburger.style-light-round  { background: #fff; border: 1px solid #eee; }
    .mmn-hamburger.style-light-round .mmn-bar { background: #111; }
    .mmn-hamburger.style-accent-round { background: var(--mmn-accent, #25D366); }

    .mmn-hamburger .mmn-bar {
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: all .3s;
        display: block;
    }
    .mmn-hamburger.active .mmn-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mmn-hamburger.active .mmn-bar:nth-child(2) { opacity: 0; }
    .mmn-hamburger.active .mmn-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* ---------- Overlay ---------- */
    .mmn-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .mmn-overlay.active { opacity: 1; visibility: visible; }

    /* ---------- Drawer ---------- */
    .mmn-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 85%;
        max-width: 340px;
        background: var(--mmn-bg, #fff);
        color: var(--mmn-text, #111);
        z-index: 99999;
        transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        visibility: hidden;
    }
    .mmn-drawer.anim-slide-left  { left: 0; right: auto; transform: translateX(-100%); }
    .mmn-drawer.anim-slide-right { right: 0; left: auto; transform: translateX(100%); }
    .mmn-drawer.active { transform: translateX(0); visibility: visible; }

    .mmn-drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .mmn-drawer-title { font-size: 18px; font-weight: 700; }
    .mmn-close {
        background: rgba(0, 0, 0, 0.06);
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }
    .mmn-menu-list { list-style: none; margin: 0; padding: 10px 0; }
    .mmn-menu-list li { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
    .mmn-menu-list li a {
        display: block;
        padding: 16px 20px;
        color: inherit;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
    }
    .mmn-menu-list li a:hover {
        background: rgba(0, 0, 0, 0.04);
        color: var(--mmn-accent, #25D366);
    }
    .mmn-menu-list .sub-menu {
        list-style: none;
        padding-left: 20px;
        background: rgba(0, 0, 0, 0.02);
    }

    .mmn-drawer-footer {
        margin-top: auto;
        padding: 15px;
        display: flex;
        gap: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    .mmn-drawer-btn {
        flex: 1;
        padding: 12px;
        border-radius: 10px;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        -webkit-tap-highlight-color: transparent;
    }
    .mmn-drawer-btn.call     { background: #111; color: #fff; }
    .mmn-drawer-btn.whatsapp { background: #25D366; color: #fff; }
    .mmn-drawer-btn .mmn-svg { width: 16px; height: 16px; }

    /* ---------- Bottom bar ---------- */
    .mmn-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 72px;
        background: var(--mmn-bottom-bg, #fff);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 99990;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding: 0 5px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mmn-bottom-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        color: var(--mmn-bottom-text, #666);
        font-size: 10px;
        font-weight: 600;
        position: relative;
        padding: 6px 0;
        transition: all .2s;
        -webkit-tap-highlight-color: transparent;
    }
    .mmn-bottom-item i,
    .mmn-bottom-item .mmn-svg {
        font-size: 20px;
        width: 20px;
        height: 20px;
        transition: transform .2s;
        display: inline-block;
        line-height: 1;
    }
    .mmn-bottom-item:hover,
    .mmn-bottom-item.active { color: var(--mmn-bottom-accent, #000); }

    .mmn-bottom-item.type-whatsapp { color: #25D366; }
    .mmn-bottom-item.type-whatsapp i,
    .mmn-bottom-item.type-whatsapp .mmn-svg {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }
    .mmn-bottom-item.type-call { color: #111; }

    .mmn-bottom-item:hover i,
    .mmn-bottom-item:hover .mmn-svg { transform: scale(1.1); }

    /* ---------- Reduced motion ---------- */
    @media (prefers-reduced-motion: reduce) {
        .mmn-hamburger,
        .mmn-hamburger .mmn-bar,
        .mmn-overlay,
        .mmn-drawer,
        .mmn-bottom-item,
        .mmn-bottom-item i,
        .mmn-bottom-item .mmn-svg {
            transition: none !important;
        }
    }
}