/* style/mobile.css */



/* --- 1. COLOR VARIABLES ---
    Define semantic color variables here so theme can be adjusted easily.
    Use descriptive names (accent vs main vs navy) to know intended usage.
*/



/* 1. CONTAINER: The Floating Pill */
/* style/mobile.css */
.mobile-bottom-nav {
    position: fixed !important;
    /* Force it to stay on top */
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90%;
    max-width: 420px;
    background: #1a202c !important;
    /* solid color for testing */
    display: flex !important;
    /* ensure it's not display: none */
    justify-content: space-around;
    padding: 15px;
    border-radius: 40px;
    z-index: 99999 !important;
    /* extremely high to stay above everything */
    border: 2px solid red;
    /* TEST BORDER - Remove this once you see it */
}



/* 2. ITEMS: Individual Buttons */
/* style/mobile.css */
.mobile-bottom-nav {
    position: fixed !important;
    bottom: 30px !important;
    /* Higher up for a floating look */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90%;
    max-width: 400px;

    /* Dark Glass Effect */
    background: rgba(26, 32, 44, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display: flex !important;
    justify-content: space-around;
    align-items: center;
    padding: 12px 5px;
    border-radius: 50px;
    /* Perfect Pill Shape */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

.mobile-bottom-nav .nav-item {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    /* Slightly faded white */
    transition: 0.3s ease;
    flex: 1;
}

.mobile-bottom-nav .nav-item i {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.mobile-bottom-nav .nav-item span {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Active State: Highlight current page in Orange to match your "Bienvenidos" */
.mobile-bottom-nav .nav-item.active {
    color: #ff9f43 !important;
}

.mobile-bottom-nav .nav-item:hover {
    color: #ffffff;
}

/* FORCE HIDE ON DESKTOP */
@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* 1. Only apply padding on SMALL screens */
@media (max-width: 767px) {
    body {
        /* This creates space for the menu ONLY on phones */
        padding-bottom: 10px !important;
    }
}

/* 2. Reset padding on DESKTOP screens */
@media (min-width: 768px) {
    body {
        padding-bottom: 0 !important;
    }

    .mobile-bottom-nav {
        display: none !important;
    }
}