/* =========================================================
   MAKKY CORE
   MOBILE FLOATING DOCK
========================================================= */

.tc-mobile-dock{

    position:fixed;

    left:50%;

    bottom:24px;

    transform:
        translateX(-50%)
        translateY(120px);

    width:calc(100% - 32px);

    max-width:420px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    border-radius:999px;

    background:rgba(14,79,69,.94);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(215,154,60,.18);

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        transform .35s ease,
        opacity .35s ease,
        visibility .35s ease;

    z-index:9999;

    padding-bottom:
        env(safe-area-inset-bottom);

}

/* =========================================================
   SHOW
========================================================= */

.tc-mobile-dock.is-visible{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

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

}

/* =========================================================
   ITEM
========================================================= */

.tc-mobile-dock__item{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    color:#ffffff;

    text-decoration:none;

    background:none;

    border:none;

    cursor:pointer;

    transition:
        color .25s ease,
        transform .25s ease;

}

.tc-mobile-dock__item:hover{

    color:#D79A3C;

}

.tc-mobile-dock__item:active{

    transform:scale(.94);

}

/* =========================================================
   ICON
========================================================= */

.tc-mobile-dock__icon{

    position:relative;

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.tc-mobile-dock__icon svg{

    width:22px;

    height:22px;

    fill:currentColor;

    stroke:currentColor;

}

/* =========================================================
   LABEL
========================================================= */

.tc-mobile-dock__label{

    font-family:Inter,sans-serif;

    font-size:11px;

    font-weight:600;

    line-height:1;

}

/* =========================================================
   BADGE
========================================================= */

.tc-mobile-dock__badge{

    position:absolute;

    top:-6px;

    right:-8px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    border-radius:999px;

    background:#D79A3C;

    color:#0E4F45;

    font-size:10px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* =========================================================
   ACTIVE
========================================================= */

.tc-mobile-dock__item.is-active{

    color:#D79A3C;

}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:992px){

    .tc-mobile-dock{

        display:none;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:480px){

    .tc-mobile-dock{

        width:calc(100% - 20px);

        bottom:18px;

        height:68px;

        padding:0 14px;

    }

}