/* static/css/mobile_nav.css - Edge-to-Edge Bottom Navigation */



/* Default: Hide bottom nav on all browsers (Mobile & Desktop) */

.mobile-nav-bar {

    display: none !important;

}



/* App Mode Only (Triggered by JS after detecting standalone mode) */

.is-standalone .mobile-nav-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100vw;  /* Use viewport width instead of percentage */

    background: #ffffff;

    display: flex !important;

    justify-content: space-around;

    align-items: center;

    padding: 6px 0 2px 0;

    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);

    z-index: 9999;

    border-top: 1px solid #e0e0e0;

    margin: 0;

    box-sizing: border-box;

}



/* Remove footer and add padding ONLY in App Mode */

.is-standalone .footer {

    display: none !important;

}



.is-standalone body {

    padding-bottom: 65px !important;

    margin: 0;

    width: 100%;

    overflow-x: hidden;

}



/* Ensure regular mobile browser shows footer and hides app bar */

@media (max-width: 768px) {

    body:not(.is-standalone) .footer {

        display: block !important;

        margin-bottom: 0;

    }

    

    body:not(.is-standalone) .mobile-nav-bar {

        display: none !important;

    }

}



/* Mobile Navigation Items - Equal width for 5 buttons */

.mobile-nav-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #4a6fa5;  /* Your primary blue color */

    text-decoration: none;

    font-size: 10px;  /* Smaller text */

    font-weight: 500;

    transition: all 0.2s ease;

    flex: 1 0 0;

    padding: 4px 0;

    margin: 0;

    max-width: 75px;

    text-transform: capitalize;  /* First letter capital, rest small */

}



.mobile-nav-item i {

    font-size: 22px;

    margin-bottom: 2px;

    color: #4a6fa5;  /* Blue icons */

}



.mobile-nav-item span {

    font-size: 9px;  /* Even smaller text */

    line-height: 1.2;

    white-space: nowrap;

    color: #4a6fa5;  /* Blue text */

    text-transform: capitalize;  /* Ensure first letter capital */

}



.mobile-nav-item.active {

    color: #166088;  /* Darker blue for active state */

    font-weight: 600;

}



.mobile-nav-item.active i {

    color: #166088;  /* Darker blue for active icons */

}



.mobile-nav-item.active span {

    color: #166088;  /* Darker blue for active text */

}



.mobile-nav-item:active {

    background-color: rgba(74, 111, 165, 0.1);

    transform: scale(0.95);

}



/* Naira sign icon might need special sizing */

.mobile-nav-item .fa-naira-sign {

    font-size: 20px;

    font-weight: 600;

}



/* iPhone safe area support for notched devices */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

    .is-standalone .mobile-nav-bar {

        padding-bottom: calc(2px + env(safe-area-inset-bottom));

        left: 0;

        right: 0;

        width: 100%;

    }

    

    .is-standalone body {

        padding-bottom: calc(65px + env(safe-area-inset-bottom)) !important;

    }

}



/* Ensure HTML and body have no padding/margin */

html, body {

    margin: 0;

    padding: 0;

    width: 100%;

    overflow-x: hidden;

}



/* Small screens (under 360px) */

@media (max-width: 360px) {

    .mobile-nav-item i {

        font-size: 20px;

    }

    

    .mobile-nav-item span {

        font-size: 8px;

    }

    

    .mobile-nav-item {

        padding: 3px 0;

    }

}



/* Landscape mode */

@media (orientation: landscape) and (max-height: 500px) {

    .is-standalone .mobile-nav-bar {

        padding: 4px 0;

    }

    

    .mobile-nav-item {

        flex-direction: row;

        gap: 4px;

    }

    

    .mobile-nav-item i {

        font-size: 18px;

        margin-bottom: 0;

    }

    

    .mobile-nav-item span {

        font-size: 10px;

    }

}