/* Mobile Search Expansion Styles */
@media (max-width: 768px) {

    /* 1. Scroll Appearance Animation (Pop-in Effect) */
    .header .search-bar {
        /* Hidden State */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px) scale(0.8);
        /* Slide up and shrink */
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        /* Bouncy Back */
    }

    /* Visible State (when scrolled) */
    .header.scrolled .search-bar {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    /* 2. Expansion Animation (Smooth Expand) */
    .search-bar {
        /* Base transition for expansion properties */
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .search-bar input {
        width: 0;
        opacity: 0;
        transition: all 0.3s ease;
    }

    /* Expanded state for mobile search */
    .search-bar.mobile-expanded {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10000 !important;
        background: var(--bg-secondary) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        padding: 10px 15px !important;
        border: none !important;
        border-radius: 0 !important;
        /* Full width looks better squared or slightly rounded */
        display: flex !important;
        align-items: center !important;

        /* Ensure visibility when expanded */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;

        /* Animation from top */
        animation: slideDownSearch 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    @keyframes slideDownSearch {
        from {
            transform: translateY(-100%);
            border-radius: 0 0 50% 50%;
            /* Fun shape effect */
        }

        to {
            transform: translateY(0);
            border-radius: 0;
        }
    }

    .search-bar.mobile-expanded input {
        display: block !important;
        width: 100% !important;
        padding: 10px 15px !important;
        opacity: 1 !important;
        font-size: 1.1rem !important;
        animation: fadeInInput 0.5s ease 0.2s forwards;
        /* Delay input appearance */
        opacity: 0;
        /* Start hidden for animation */
    }

    @keyframes fadeInInput {
        to {
            opacity: 1;
        }
    }

    /* Hide other header elements when search is expanded */
    .header-container.search-active .logo-container,
    .header-container.search-active .nav-menu,
    .header-container.search-active .icon-btn:not(.search-bar button),
    .header-container.search-active .cart-icon-container,
    .header-container.search-active .burger-menu {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    /* Make header-container relative for absolute positioning */
    .header-container {
        position: relative;
    }
}