/* ==== MOBILE SPECIFIC STYLES FOR BOTTOM NAVIGATION ==== */

@media (max-width: 991.98px) {
    .dashboard-layout {
        height: calc(100vh - 48px);
        overflow: hidden;
    }

    .dashboard-main-content {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 100px;
    }

    /* --- Admin Bottom Navbar (Existing) --- */
    .bottom-navbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        background-color: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        padding: 12px 0.5rem;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 1100;
        transition: transform 0.3s ease;
    }

    .bottom-navbar-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: var(--text-color-secondary);
        font-size: 0.7rem;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }

    .bottom-navbar-link i {
        font-size: 1.4rem;
        margin-bottom: 4px;
        line-height: 1; 
    }

    .bottom-navbar-link span {
        display: block;
    }

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

    .bottom-navbar-link:hover {
        color: var(--link-color);
    }

    .bottom-navbar-link .badge {
        position: absolute;
        top: -2px;
        right: 50%;
        transform: translateX(22px);
        font-size: 10px;
        padding: 0.3em 0.5em;
    }

    /* --- NEW: Consumer Mobile Bottom Navigation (Floating Pill) --- */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 24px; /* Floating height */
        left: 50%;
        transform: translateX(-50%);
        width: 92%;
        max-width: 400px; 
        height: 64px; /* Fixed height for consistent transitions */
        
        /* Default State */
        background-color: rgba(50, 50, 50, 0.85); 
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.12); 
        border-radius: 60px; 
        
        display: flex;
        justify-content: space-between; 
        align-items: center;
        padding: 0 32px; 
        z-index: 1040;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        
        /* Transitions for hiding and search mode */
        transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), 
                    width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                    background-color 0.4s ease,
                    padding 0.4s ease;
        
        overflow: hidden; /* Mask the sliding icons */
    }

    /* Scroll Hide State */
    .mobile-bottom-nav.nav-hidden,
    .bottom-navbar.nav-hidden {
        transform: translate(-50%, 180%); /* Move further down to completely clear shadow */
    }
    .bottom-navbar.nav-hidden {
        transform: translateY(100%);
    }

    /* Search Mode State */
    .mobile-bottom-nav.search-mode {
        width: 96%; /* Almost full width */
        background-image: linear-gradient(135deg, rgba(40, 40, 40, 0.98), rgba(25, 25, 25, 0.98));
        background-color: #111; 
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: 0 12px 40px rgba(0, 113, 227, 0.15); /* Subtle blue glow */
        padding: 0 16px; 
        transform: translate(-50%, 0); 
    }

    /* Nav Items Wrapper Animation */
    .nav-items-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 100%; 
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                    opacity 0.3s ease 0.1s; 
    }
    
    .mobile-bottom-nav.search-mode .nav-items-wrapper {
        transform: translateX(-25%);
        opacity: 0; 
        pointer-events: none;
        position: absolute; 
    }

    .mobile-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.6);
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        flex: 1; 
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 1.3rem;
        margin-bottom: 3px;
        line-height: 1;
    }

    .mobile-bottom-nav .nav-item span {
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .mobile-bottom-nav .nav-item.active {
        color: #ffffff;
        transform: translateY(-2px);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    }

    .mobile-bottom-nav .icon-wrapper {
        position: relative;
        display: inline-block;
    }

    .mobile-bottom-nav .badge {
        position: absolute;
        top: -4px;
        right: -6px;
        background-color: #ff3b30;
        color: white;
        border-radius: 50%;
        min-width: 14px;
        height: 14px;
        font-size: 9px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 3px;
        border: 1px solid rgba(50, 50, 50, 0.8);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* --- Bottom Search Container Styles --- */
    .bottom-search-container {
        width: 100%;
        height: 100%;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.95);
        transition: opacity 0.3s ease 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
    }

    .mobile-bottom-nav.search-mode .bottom-search-container {
        opacity: 1;
        pointer-events: auto;
        display: block !important; 
        transform: scale(1);
    }

    .bottom-search-container form {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 100%;
    }

    .btn-search-submit, .btn-search-close {
        background: none;
        border: none;
        color: #fff;
        font-size: 1.2rem;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    
    /* UPDATED: Removed background color to remove outline effect */
    .btn-search-submit {
        background-color: transparent;
        padding-left: 0;
    }

    .btn-search-close {
        color: rgba(255,255,255,0.5);
        font-size: 1.5rem;
    }

    #bottom-search-input {
        flex-grow: 1;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 1.1rem; 
        font-weight: 500;
        outline: none;
        height: 100%;
    }
    #bottom-search-input::placeholder {
        color: rgba(255,255,255,0.3);
    }

    /* --- Search Overlay Gradient --- */
    .search-overlay-gradient {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 50% 90%, rgba(20, 20, 20, 0.85) 0%, rgba(0,0,0,0.95) 100%);
        z-index: 1030;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        pointer-events: none;
    }

    .search-overlay-gradient.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto; 
        backdrop-filter: blur(8px);
    }

    /* UPDATED: Removed extra padding below footer */
    body {
        padding-bottom: 0; 
    }
    .dashboard-layout body {
        padding-bottom: 0;
    }

    /* --- Mobile Sticky Checkout --- */
    .mobile-checkout-sticky {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        border-top: 1px solid var(--border-color);
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        z-index: 1050;
    }
    
    .checkout-options {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border-top: 1px solid var(--border-color);
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }
    .checkout-options.is-active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    
    #mobile-checkout-btn {
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }
    .mobile-checkout-sticky.is-active #mobile-checkout-btn {
        opacity: 0;
        pointer-events: none;
    }

    .summary-card-desktop #desktop-checkout-buttons {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .site-footer .footer-links {
        display: block;
    }
    .site-footer .footer-column {
        border-bottom: 1px solid var(--border-color);
    }
    .site-footer .footer-column:last-child {
        border-bottom: none;
    }
    .site-footer .accordion-button {
        pointer-events: auto;
        padding: 0.8rem 0;
        position: relative;
    }
    .site-footer .accordion-button::after {
        display: block;
        content: '+';
        font-size: 1.5rem;
        font-weight: 400;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background-image: none;
        color: var(--text-color-secondary);
        transition: transform 0.2s ease-in-out;
    }
    .site-footer .accordion-button:not(.collapsed)::after {
        content: '−';
        transform: translateY(-50%) rotate(360deg);
    }
    .site-footer .accordion-collapse .footer-list {
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

    .legal-page-content h1 {
        font-size: 2.25rem;
    }
}