/**
 * Search Page Styles
 * Enhanced styling for the search results page
 */

/* Search Results Header */
.search-results-header {
    @apply mb-8 border-b border-gray-200 pb-6;
}

.search-results-header h1 {
    @apply mb-4 text-2xl font-bold text-gray-900 md:text-3xl;
}

.search-results-header p {
    @apply text-lg text-gray-600;
}

/* Section Headers */
.products-section h2,
.other-content-section h2 {
    @apply mb-6 flex items-center text-xl font-semibold text-gray-900 md:text-2xl;
}

.products-section h2 svg,
.other-content-section h2 svg {
    @apply text-primary-green mr-3 h-6 w-6;
}

.products-section h2 span,
.other-content-section h2 span {
    @apply bg-primary-green-light text-primary-green ml-3 rounded-full px-3 py-1 text-sm font-medium;
}

/* Product Filters */
.product-filters {
    @apply mb-8 rounded-xl border border-gray-200 bg-gray-50 p-6 shadow-sm;
}

.product-filters .flex {
    @apply flex-wrap items-end gap-4;
}

.filter-group {
    @apply min-w-[200px] flex-1;
}

.filter-group label {
    @apply mb-2 block text-sm font-medium text-gray-700;
}

.filter-group select {
    @apply w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm;
    @apply focus:border-primary-green focus:ring-primary-green/20 focus:ring-2 focus:outline-none;
    @apply transition-all duration-200 ease-in-out;
}

.filter-group select:hover {
    @apply border-gray-400;
}

#clear-filters {
    @apply hover:text-primary-green px-4 py-2 text-sm text-gray-600 underline;
    @apply transition-colors duration-200 ease-in-out;
    @apply cursor-pointer border-0 bg-transparent;
}

#clear-filters:hover {
    @apply text-primary-green-dark no-underline;
}

/* Products Grid Enhancement - Override default WooCommerce styles */
.woocommerce ul.products {
    @apply !m-0 list-none !p-0;
    /* Grid classes are now applied directly in HTML with Tailwind */
}

.woocommerce ul.products li.product {
    @apply relative flex !h-full flex-col items-start overflow-hidden;
    @apply !rounded-[0.9375rem] !border !border-[#E0E0E0] !bg-white !p-4;
    @apply !shadow-[0_4px_8px_-1px_#becec3,0_1px_1px_-1px_#becec3];
    @apply transition-all duration-300 ease-in-out;
}

.woocommerce ul.products li.product:hover {
    @apply -translate-y-1 transform;
    @apply !shadow-[0_8px_16px_-2px_#becec3,0_4px_4px_-2px_#becec3];
}

/* Other Content Section */
.other-content-section {
    @apply mt-12;
}

.other-content-section article {
    @apply rounded-xl border border-gray-200 bg-white p-6 shadow-sm;
    @apply transition-shadow duration-300 ease-in-out hover:shadow-md;
}

.other-content-section article header h3 {
    @apply mb-2 text-lg font-semibold;
}

.other-content-section article header h3 a {
    @apply hover:text-primary-green text-gray-900 transition-colors duration-200;
    @apply no-underline;
}

.other-content-section article header .text-sm {
    @apply flex items-center gap-2 text-gray-500;
}

.other-content-section article .text-gray-600 {
    @apply mb-4 leading-relaxed;
}

.other-content-section article a[href*='Read More'] {
    @apply text-primary-green hover:text-primary-green-dark inline-flex items-center;
    @apply text-sm font-medium no-underline transition-colors duration-200;
}

.other-content-section article a[href*='Read More'] svg {
    @apply ml-1 h-4 w-4 transition-transform duration-200;
}

.other-content-section article a[href*='Read More']:hover svg {
    @apply translate-x-1 transform;
}

/* No Results Section */
.no-results {
    @apply px-6 py-16 text-center;
}

.no-results svg {
    @apply mx-auto mb-6 h-20 w-20 text-gray-300;
}

.no-results h2 {
    @apply mb-3 text-2xl font-semibold text-gray-600;
}

.no-results p {
    @apply mx-auto mb-8 max-w-md leading-relaxed text-gray-500;
}

.no-results h3 {
    @apply mb-4 text-lg font-medium text-gray-700;
}

.no-results ul {
    @apply mb-8 space-y-2 text-sm text-gray-600;
}

.no-results h4 {
    @apply text-md mb-3 font-medium text-gray-700;
}

.no-results .flex.flex-wrap {
    @apply justify-center gap-3;
}

.no-results .flex.flex-wrap a {
    @apply bg-primary-green-light text-primary-green rounded-full px-4 py-2 text-sm;
    @apply hover:bg-primary-green transition-colors duration-200 hover:text-white;
    @apply font-medium no-underline;
}

/* No Products Message */
#no-products-message {
    @apply col-span-full py-16 text-center text-gray-500;
}

#no-products-message svg {
    @apply mx-auto mb-4 h-16 w-16 text-gray-300;
}

#no-products-message p:first-of-type {
    @apply mb-2 text-lg font-medium text-gray-600;
}

#no-products-message p:last-of-type {
    @apply text-sm text-gray-500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .product-filters .flex {
        @apply flex-col gap-4;
    }

    .filter-group {
        @apply min-w-full;
    }

    .search-results-header h1 {
        @apply text-xl;
    }

    .products-section h2,
    .other-content-section h2 {
        @apply flex-col items-start text-lg;
    }

    .products-section h2 span,
    .other-content-section h2 span {
        @apply mt-2 ml-0;
    }

    .woocommerce ul.products {
        @apply grid-cols-1 sm:grid-cols-2;
    }
}

/* Animation for filter changes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.products.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Loading state */
.products-loading {
    @apply pointer-events-none opacity-50;
}

.products-loading::after {
    content: '';
    @apply absolute inset-0 flex items-center justify-center bg-white/50;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 11-6.219-8.56'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}