/* =========================================================
   PLUXDOM MENU CSS ULTRA CLEAN FINAL
   5 BOTONES EXACTOS + MÁS + SUBMENUS FUNCIONALES
   ARCHIVO:
   /wp-content/themes/PLUXDOM-ULTRA/css/style.css
========================================================= */

/* =========================================================
   MENU BASE
========================================================= */
#pluxdom-bottom-menu{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:88px;
    background:#000;
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:stretch;
    border-top:2px solid #d4a017;
    z-index:999999;
    box-shadow:0 -4px 18px rgba(0,0,0,.45);

    transform:translateZ(0);
    -webkit-transform:translateZ(0);

    will-change:transform;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

/* =========================================================
   TODOS LOS BOTONES (5 EXACTOS)
========================================================= */
#pluxdom-bottom-menu > .pluxdom-menu-item{
    flex:1 1 20%;
    width:20%;
    min-width:20%;
    max-width:20%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    position:relative;

    text-decoration:none;
    color:#fff;

    cursor:pointer;

    padding:6px 2px;

    box-sizing:border-box;
    overflow:visible;

    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;

    transition:
        background .18s ease,
        transform .18s ease;
}

/* =========================================================
   BOTÓN TOUCH
========================================================= */
#pluxdom-bottom-menu > .pluxdom-menu-item:active{
    transform:scale(.97);
}

/* =========================================================
   ICONOS
========================================================= */
.pluxdom-menu-icon{
    position:relative;
    bottom:4px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    pointer-events:none;

    transition:
        transform .22s ease,
        opacity .22s ease;
}

.pluxdom-menu-icon svg{
    width:34px;
    height:34px;

    display:block;

    fill:none;
    stroke:#ffffff;

    transition:
        stroke .22s ease,
        transform .22s ease;
}

.pluxdom-menu-icon svg *{
    stroke:inherit;
    fill:none;
}

/* =========================================================
   TEXTO
========================================================= */
.pluxdom-menu-text{
    position:relative;
    bottom:3px;

    margin-top:6px;

    font-size:16px;
    line-height:1.1;
    font-weight:800;

    text-align:center;

    color:#ffffff;

    white-space:normal;
    word-break:keep-all;
    overflow-wrap:break-word;

    max-width:100%;

    pointer-events:none;

    transition:
        color .22s ease,
        transform .22s ease;
}

/* =========================================================
   ACTIVO
========================================================= */
.pluxdom-menu-item.active .pluxdom-menu-text,
.pluxdom-menu-item.submenu-open .pluxdom-menu-text{
    color:#f5c242;
}

.pluxdom-menu-item.active .pluxdom-menu-icon svg,
.pluxdom-menu-item.active .pluxdom-menu-icon svg *,
.pluxdom-menu-item.submenu-open .pluxdom-menu-icon svg,
.pluxdom-menu-item.submenu-open .pluxdom-menu-icon svg *{
    stroke:#f5c242;
}

.pluxdom-menu-item.active .pluxdom-menu-icon,
.pluxdom-menu-item.submenu-open .pluxdom-menu-icon{
    transform:translateY(-1px);
}

/* =========================================================
   COUNTER
========================================================= */
#pluxdom-favorites-counter{
    position:absolute;

    top:-3px;
    right:-12px;

    min-width:18px;
    height:18px;

    padding:0 4px;

    border-radius:50%;

    background:red;
    color:#fff;

    font-size:12px;
    font-weight:800;

    display:flex;
    align-items:center;
    justify-content:center;

    line-height:1;

    border:2px solid #000;

    pointer-events:none;

    box-shadow:0 2px 8px rgba(255,0,0,.35);
}

/* =========================================================
   SUBMENUS BASE
========================================================= */
.pluxdom-submenu{
    position:absolute;
    left:50%;
    bottom:95px;

    min-width:210px;

    display:flex;
    flex-direction:column;

    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,.985) 0%,
            rgba(0,0,0,.995) 100%
        );

    border:1px solid rgba(212,160,23,.88);

    border-radius:18px;

    overflow:hidden;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    z-index:999999;

    box-shadow:
        0 10px 34px rgba(0,0,0,.42),
        0 2px 10px rgba(212,160,23,.08);

    transform:
        translateX(-50%)
        translateY(18px)
        scale(.94);

    transform-origin:center bottom;

    will-change:
        transform,
        opacity;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    transition:
        opacity .22s cubic-bezier(.22,.9,.32,1),
        transform .26s cubic-bezier(.22,.9,.32,1),
        visibility 0s linear .26s;
}

/* =========================================================
   GLOW TOP LINE
========================================================= */
.pluxdom-submenu::before{
    content:'';

    position:absolute;
    top:0;
    left:10%;

    width:80%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(245,194,66,.9) 50%,
            transparent 100%
        );

    opacity:.9;

    pointer-events:none;
}

/* =========================================================
   SUBMENU ACTIVO
========================================================= */
.pluxdom-submenu.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);

    transition:
        opacity .22s cubic-bezier(.22,.9,.32,1),
        transform .26s cubic-bezier(.22,.9,.32,1),
        visibility 0s;
}

/* =========================================================
   LINKS SUBMENU
========================================================= */
.pluxdom-submenu a{
    position:relative;

    display:block;
    width:100%;

    padding:15px 18px;

    text-align:center;
    text-decoration:none;

    color:#ffffff;

    font-size:15px;
    font-weight:700;
    letter-spacing:.2px;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    box-sizing:border-box;

    overflow:hidden;

    pointer-events:auto;
    z-index:2;

    transition:
        color .18s ease,
        background .18s ease,
        transform .16s ease;
}

.pluxdom-submenu a:last-child{
    border-bottom:none;
}

/* =========================================================
   HOVER LIGHT SWEEP
========================================================= */
.pluxdom-submenu a::before{
    content:'';

    position:absolute;
    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(245,194,66,.14) 50%,
            transparent 100%
        );

    transition:left .34s ease;

    pointer-events:none;
}

.pluxdom-submenu a:hover::before,
.pluxdom-submenu a:active::before{
    left:120%;
}

.pluxdom-submenu a:hover,
.pluxdom-submenu a:active{
    color:#f5c242;

    background:
        linear-gradient(
            90deg,
            rgba(212,160,23,.10) 0%,
            rgba(212,160,23,.18) 50%,
            rgba(212,160,23,.10) 100%
        );

    transform:translateY(-1px);
}

/* =========================================================
   OPEN STAGGER FEEL
========================================================= */
.pluxdom-submenu.active a{
    animation:
        pluxdomSubmenuFade .24s ease both;
}

.pluxdom-submenu.active a:nth-child(1){ animation-delay:.02s; }
.pluxdom-submenu.active a:nth-child(2){ animation-delay:.045s; }
.pluxdom-submenu.active a:nth-child(3){ animation-delay:.07s; }
.pluxdom-submenu.active a:nth-child(4){ animation-delay:.095s; }
.pluxdom-submenu.active a:nth-child(5){ animation-delay:.12s; }
.pluxdom-submenu.active a:nth-child(6){ animation-delay:.145s; }

/* =========================================================
   KEYFRAMES
========================================================= */
@keyframes pluxdomSubmenuFade{
    from{
        opacity:0;
        transform:translateY(6px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================================
   MENU OPEN EFFECT
========================================================= */
.has-submenu.submenu-open{
    background:
        linear-gradient(
            180deg,
            rgba(245,194,66,.08) 0%,
            rgba(245,194,66,0) 100%
        );
}

/* =========================================================
   OVERLAY
========================================================= */
#pluxdom-submenu-overlay{
    position:fixed;
    inset:0;

    display:none;

    z-index:999998;

    background:
        rgba(0,0,0,.001);
}

#pluxdom-submenu-overlay.active{
    display:block;
}

/* =========================================================
   TOUCH FIX
========================================================= */
.has-submenu{
    touch-action:manipulation;
}

.pluxdom-submenu,
.pluxdom-submenu *,
.pluxdom-submenu a{
    touch-action:manipulation;
}

/* =========================================================
   BODY SPACE
========================================================= */
body{
    padding-bottom:95px;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:480px){

    #pluxdom-bottom-menu{
        height:84px;
    }

    #pluxdom-bottom-menu > .pluxdom-menu-item{
        padding:4px 1px;
    }

    .pluxdom-menu-icon,
    .pluxdom-menu-icon svg{
        width:30px;
        height:30px;
    }

    .pluxdom-menu-text{
        font-size:12px;
        line-height:1.05;
    }

    .pluxdom-submenu{
        min-width:190px;
        bottom:90px;
        border-radius:16px;
    }

    .pluxdom-submenu a{
        padding:14px 14px;
        font-size:14px;
    }

    body{
        padding-bottom:90px;
    }
}

    .pluxdom-menu-text{
        font-size:12px;
        line-height:1.05;
    }

    .pluxdom-submenu{
        min-width:190px;
        bottom:90px;
    }

    body{
        padding-bottom:90px;
    }