/*
    product.css
    This stylesheet provides custom styles for the product listing and detail pages, including filter buttons,
    catalog download section, product grid, product items, and responsive adjustments for mobile devices.
    It ensures a modern, clean, and interactive UI for product-related views.
*/

/* Filter container and filter button styles */
.filter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Search container spacing */
.search-container {
    margin-bottom: 0;
}

.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 1rem;
}

.filter-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 50px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(242, 244, 247, 0.1);
}

.filter-btn.active {
    background: #BF161C;
    border-color: #e1bc3a;
}

.filter-btn:hover {
    border-color: #BF161C;
}

/* Catalog Download Section Styles */
.catalog-download-section {
    padding: 2rem 0;
    background: linear-gradient(135deg, rgba(191, 22, 28, 0.05) 0%, rgba(191, 22, 28, 0.02) 100%);
    border-radius: 1rem;
    margin-bottom: 3rem;
}

.download-catalog-btn {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

.download-catalog-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(191, 22, 28, 0.3);
}

.download-catalog-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.download-catalog-btn:hover::before {
    left: 100%;
}

.download-catalog-btn svg {
    transition: transform 0.3s ease;
}

.download-catalog-btn:hover svg {
    transform: translateY(2px);
}

/* Loading animation for download */
.download-catalog-btn.downloading {
    pointer-events: none;
    opacity: 0.7;
}

.download-catalog-btn.downloading svg {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0,-5px,0);
    }
    70% {
        transform: translate3d(0,-3px,0);
    }
    90% {
        transform: translate3d(0,-1px,0);
    }
}

/* Product grid and product item styles */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 0 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px #BF161C;
}

.product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-item {
    transform: translateY(0);
    transition: transform 0.3s ease;;
}

.product-title {
    color: white;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.product-category {
    color: #BF161C;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.product-links {
    display: flex;
    gap: 1rem;
}

.product-link {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-link i {
    color: #BF161C;
}

/* Responsive Design */
@media (max-width: 768px) {
    .filter-container {
        padding: 0 1rem;
    }
    
    /* Ensure proper order on mobile: Download button -> Search bar -> Filter buttons */
    .download-catalog-btn {
        order: 1;
        width: 100%;
        text-align: center;
    }
    
    .search-container {
        order: 2;
        width: 100%;
    }
    
    .filter-buttons {
        order: 3;
    }

    .section-title {
        font-size: 2rem;
    }

    .filter-btn {
        padding: 0.5rem 1.5rem;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        padding: 0 1rem;
        gap: 1rem;
    }

    /* Catalog download section responsive */
    .catalog-download-section {
        margin: 0 1rem 2rem 1rem;
        padding: 1.5rem 1rem;
    }

    .catalog-download-section h2 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .catalog-download-section .flex {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}