/* =========================
   GLASS BOTTOM MENU
========================= */
.bottom-menu{
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

    width: calc(100% - 20px);
    max-width: 480px;
    height: 60px;

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

    border-radius: 16px;

    background: rgba(42,19,24,0.11);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);

    z-index: 9999;
}

/* =========================
   ITEM
========================= */
.bm-item{
    flex:1;
    text-align:center;
    text-decoration:none;

    font-size:11px;
    color:#555;

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

    gap:3px;
    position:relative;
}

/* =========================
   ICON (default outline)
========================= */
.bm-icon svg{
    width:22px;
    height:22px;

    stroke: currentColor;
    stroke-width: 1.8;
    fill: transparent;

    transition: all 0.25s ease;
}

/* =========================
   ACTIVE (filled icon)
========================= */
.bm-item.active{
    color:#CC2230;
}

.bm-item.active .bm-icon svg{
    fill: currentColor;   /* 🔥 solid icon */
    stroke: none;
}

/* =========================
   LABEL
========================= */
.bm-label{
    font-size:10px;
    font-weight:500;
}

/* =========================
   CART BADGE
========================= */
.cart-badge{
    position:absolute;
    top:0;
    right:0;
    transform: translate(50%, -50%);

    background:#CC2230;
    color:#fff;

    font-size:9px;
    padding:2px 5px;
    border-radius:999px;

    border:1.5px solid #fff;
}

/* =========================
   SAFE SPACE
========================= */
body{
    padding-bottom:80px;
}

/* =========================
   DESKTOP OFF
========================= */
@media(min-width:992px){
    .bottom-menu{
        display:none;
    }
}