/* ========================================= */
/*  MOBILE UI ENHANCEMENTS (Jan 2026)       */
/* ========================================= */

/* --- STICKY BOTTOM NAV --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    /* Stronger border */
    display: flex;
    justify-content: space-around;
    padding: 10px 0 8px 0;
    /* Optimized padding similar to ML */
    z-index: 1050;
    /* Above most things */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
}

.bottom-nav-item {
    flex: 1;
    text-align: center;
}

.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #94a3b8;
    /* Slate 400 */
    font-size: 0.7rem;
    text-decoration: none;
    transition: all 0.2s;
}

.bottom-nav-link i {
    font-size: 1.25rem;
    margin-bottom: 3px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bottom-nav-link.active {
    color: var(--brand-blue);
    font-weight: 600;
}

.bottom-nav-link.active i {
    transform: translateY(-2px);
    color: var(--brand-blue);
}

/* Adjust main content padding so it doesn't get hidden behind bottom nav */
@media (max-width: 767.98px) {
    main {
        padding-bottom: 70px;
    }

    /* Hide footer on mobile if desired, or pad it */
    footer {
        padding-bottom: 70px;
    }
}

/* --- MOBILE ACTION BAR --- */
.mobile-action-bar {
    /* Position Handling moved to Parent Navbar structure (Natural Flow) */
    background: transparent;
    /* Changed to transparent or white depending on glass effect? Let's keep transparent as it's inside glass navbar */
    padding: 0;

    /* Layout */
    width: 100%;
    margin: 0;

    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
}

/* Ensure buttons don't stretch weirdly if centered */
.btn-mobile-action {
    flex: 1;
    /* Standard flex distribution */
    max-width: 120px;
    /* Optional constraint to keep them neat? Or full? User said "Centered", usually implies grouped. But "Full Width" was previous. I'll stick to flex:1 but constrained max-width might help centering aesthetic. Let's start with flex:1 only to be safe. */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 0.35rem 0.25rem;
    border-radius: 8px;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}



.btn-mobile-action:active {
    transform: scale(0.98);
}

/* Fix Contrast on Active/Focus */
.btn-mobile-action:active,
.btn-mobile-action:focus,
.btn-mobile-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    /* Ensure colors stay readable */
    color: inherit;
}

.btn-mobile-primary {
    background-color: #1e70b7;
    /* User specified Blue */
    color: white;
}

.btn-mobile-primary:active,
.btn-mobile-primary:focus {
    background-color: #175a96;
    /* Darker Blue */
    color: white !important;
}

.btn-mobile-secondary {
    background-color: white;
    border: 1px solid #dee2e6;
    color: #333;
    color: #333;
    flex: 1;
    /* Match others */
    width: auto;
    /* Remove fixed 50px */
}

.btn-mobile-danger {
    background-color: #E51147;
    /* User specified Red Pantone E51147 */
    color: white;
}

/* --- OFFCANVAS FILTERS (Mobile) --- */
.offcanvas-filters {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

/* --- MOBILE PROMO SLIDER (Blue Banner) --- */
.mobile-promo-slider {
    border-radius: 0;
    /* Full edge on mobile */
}

@media (min-width: 768px) {
    .mobile-promo-slider {
        border-radius: 1rem;
        /* Rounded on tablet+ */
    }

    .mobile-promo-slider .promo-content {
        height: 300px !important;
    }
}

.promo-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- GRID OVERRIDES FOR HIGH DENSITY --- */
@media (max-width: 575.98px) {
    .row.g-3 {
        --bs-gutter-x: 0.5rem;
        /* Tighter gutter */
        --bs-gutter-y: 0.5rem;
    }

    .product-card {
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: none !important;
    }

    /* Remove padding from container to maximize space */
    .container-fluid.px-lg-5 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .mobile-action-bar {
        margin: -1.5rem -0.5rem 0.5rem -0.5rem;
        /* Re-align with new padding */
    }
}