/* Add custom CSS styles below */ 
/* 1. Mobile Nav Container - Floating & Glassmorphism */
.mobile-nav-inner.fixed.bottom-0.left-0.right-0.z-50.w-full {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    height: auto !important;
    background: transparent !important;
}

/* 2. The Inner Bar Styling */
#mobile-nav {
    background: rgba(250, 248, 242, 0.92) !important;
    background-image: linear-gradient(to bottom, rgba(242, 245, 240, 0.2), rgba(242, 245, 240, 0.2)) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(47, 75, 58, 0.10) !important;
    box-shadow: 0 8px 28px rgba(31, 47, 38, 0.10) !important;
    border-radius: 24px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 10px !important;
    margin: 0 !important;
}

/* 3. Inactive Tabs Styling */
#mobile-nav .mob-n-li .mobile-nav--item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8A8A84 !important;
    position: relative !important;
    padding-bottom: 4px !important;
}

#mobile-nav .mob-n-li .mobile-nav--item i,
#mobile-nav .mob-n-li .mobile-nav--item svg {
    color: #8A8A84 !important;
    fill: #8A8A84 !important;
    font-size: 20px !important;
    margin-bottom: 2px !important;
}

/* 4. Active Tab Styling & Gold Indicator */
/* Note: Using :has(.active) or just .active depending on your platform's logic */
#mobile-nav .mob-n-li.active .mobile-nav--item,
#mobile-nav .mob-n-li .mobile-nav--item.active {
    color: #2F4B3A !important;
}

#mobile-nav .mob-n-li.active .mobile-nav--item i,
#mobile-nav .mob-n-li.active .mobile-nav--item svg,
#mobile-nav .mob-n-li .mobile-nav--item.active i,
#mobile-nav .mob-n-li .mobile-nav--item.active svg {
    color: #2F4B3A !important;
    fill: #2F4B3A !important;
}

/* The tiny gold pill indicator */
#mobile-nav .mob-n-li.active .mobile-nav--item::after,
#mobile-nav .mob-n-li .mobile-nav--item.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0px !important; /* Move it slightly up to ensure visibility */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 12px !important;
    height: 3px !important;
    background-color: #B5975A !important;
    border-radius: 2px !important;
}

/* WhatsApp */

/* 1. Shape, Color & Shadow */
div#wa-widget a.wa-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background-color: #FFFDF8 !important; /* Warm ivory */
    border: 1px solid rgba(47, 75, 58, 0.10) !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 24px rgba(31, 47, 38, 0.14) !important;
    transition: transform 0.2s ease-in-out !important;
}

/* 2. Icon Color */
div#wa-widget a.wa-btn i, 
div#wa-widget a.wa-btn svg {
    color: #25D366 !important;
    fill: #25D366 !important;
    font-size: 30px !important;
}

/* 3. Hover State */
div#wa-widget a.wa-btn:hover {
    transform: scale(1.05) !important;
}