/**
 * TostiShop Algolia Search Styles
 * Custom styles for Algolia InstantSearch widgets
 */

/* Search Container */
.algolia-search-container {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Search Box Styles */
.ais-SearchBox {
    @apply mb-6;
}

.ais-SearchBox-form {
    @apply relative;
}

.ais-SearchBox-input {
    @apply w-full px-4 py-3 pr-20 text-gray-900 border border-gray-300 rounded-lg;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    @apply placeholder-gray-500;
}

.ais-SearchBox-submit,
.ais-SearchBox-reset {
    @apply absolute top-1/2 transform -translate-y-1/2;
    @apply text-gray-400 hover:text-gray-600;
    @apply p-2 rounded;
    @apply transition-colors duration-200;
}

.ais-SearchBox-submit {
    @apply right-12;
}

.ais-SearchBox-reset {
    @apply right-2;
}

.ais-SearchBox-submitIcon,
.ais-SearchBox-resetIcon {
    @apply w-5 h-5;
}

/* Hits (Results) Styles */
.ais-Hits {
    @apply w-full;
}

.ais-Hits-list {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}

.ais-Hits-item {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
    @apply hover:shadow-md transition-shadow duration-200;
    @apply overflow-hidden;
}

/* Stats Styles */
.ais-Stats {
    @apply text-sm text-gray-600 mb-4;
}

.ais-Stats-text {
    @apply font-medium;
}

/* Pagination Styles */
.ais-Pagination {
    @apply flex justify-center items-center mt-8;
}

.ais-Pagination-list {
    @apply flex items-center space-x-1;
}

.ais-Pagination-item {
    @apply px-3 py-2 text-sm font-medium;
    @apply text-gray-500 bg-white border border-gray-300 rounded-md;
    @apply hover:bg-gray-50 transition-colors duration-200;
}

.ais-Pagination-item--selected {
    @apply text-white bg-blue-600 border-blue-600;
    @apply hover:bg-blue-700;
}

.ais-Pagination-item--disabled {
    @apply text-gray-300 bg-gray-100 border-gray-200;
    @apply cursor-not-allowed hover:bg-gray-100;
}

.ais-Pagination-link {
    @apply block w-full h-full;
    @apply no-underline;
}

/* Refinement List (Categories) Styles */
.ais-RefinementList {
    @apply mb-6;
}

.ais-RefinementList-list {
    @apply space-y-2 max-h-60 overflow-y-auto;
}

.ais-RefinementList-item {
    @apply flex items-center;
}

.ais-RefinementList-checkbox {
    @apply mr-2 h-4 w-4 text-blue-600 border-gray-300 rounded;
    @apply focus:ring-blue-500 focus:ring-2;
}

.ais-RefinementList-label {
    @apply text-sm text-gray-700 cursor-pointer flex-1;
    @apply flex items-center justify-between;
}

.ais-RefinementList-labelText {
    @apply truncate;
}

.ais-RefinementList-count {
    @apply text-xs text-gray-500 ml-2;
    @apply bg-gray-100 px-2 py-1 rounded-full;
}

.ais-RefinementList-showMore {
    @apply mt-2 text-sm text-blue-600 hover:text-blue-800;
    @apply font-medium cursor-pointer;
}

/* Range Input (Price) Styles */
.ais-RangeInput {
    @apply mb-6;
}

.ais-RangeInput-form {
    @apply flex items-center space-x-2;
}

.ais-RangeInput-input {
    @apply w-20 px-2 py-1 text-sm border border-gray-300 rounded;
    @apply focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
}

.ais-RangeInput-separator {
    @apply text-sm text-gray-500;
}

/* Toggle Refinement Styles */
.ais-ToggleRefinement {
    @apply mb-4;
}

.ais-ToggleRefinement-label {
    @apply flex items-center cursor-pointer;
}

.ais-ToggleRefinement-checkbox {
    @apply mr-2 h-4 w-4 text-blue-600 border-gray-300 rounded;
    @apply focus:ring-blue-500 focus:ring-2;
}

.ais-ToggleRefinement-labelText {
    @apply text-sm text-gray-700;
}

/* Sort By Styles */
.ais-SortBy {
    @apply mb-4;
}

.ais-SortBy-select {
    @apply w-full px-3 py-2 text-sm border border-gray-300 rounded-md;
    @apply focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
    @apply bg-white;
}

/* Clear Refinements Styles */
.ais-ClearRefinements {
    @apply mb-4;
}

.ais-ClearRefinements-button {
    @apply w-full px-4 py-2 text-sm font-medium;
    @apply text-gray-700 bg-gray-100 border border-gray-300 rounded-md;
    @apply hover:bg-gray-200 focus:ring-2 focus:ring-blue-500;
    @apply transition-colors duration-200;
}

.ais-ClearRefinements-button--disabled {
    @apply text-gray-400 bg-gray-50 cursor-not-allowed;
    @apply hover:bg-gray-50;
}

/* Product Item Styles */
.product-item {
    @apply h-full flex flex-col p-4;
}

.product-item img {
    @apply transition-transform duration-200;
}

.product-item:hover img {
    @apply scale-105;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Search Overlay */
.algolia-search-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40;
    @apply transition-opacity duration-300;
}

.algolia-search-modal {
    @apply fixed top-4 left-4 right-4 bottom-4 md:top-8 md:left-8 md:right-8 md:bottom-8;
    @apply bg-white rounded-lg shadow-2xl z-50;
    @apply flex flex-col overflow-hidden;
}

.algolia-search-header {
    @apply p-4 border-b border-gray-200;
    @apply flex items-center justify-between;
}

.algolia-search-content {
    @apply flex-1 overflow-hidden;
    @apply flex flex-col lg:flex-row;
}

.algolia-search-filters {
    @apply w-full lg:w-64 xl:w-72;
    @apply p-4 border-r border-gray-200;
    @apply overflow-y-auto;
}

.algolia-search-results {
    @apply flex-1 p-4 overflow-y-auto;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .algolia-search-content {
        @apply flex-col;
    }
    
    .algolia-search-filters {
        @apply w-full border-r-0 border-b border-gray-200;
        @apply max-h-40 overflow-y-auto;
    }
    
    .ais-Hits-list {
        @apply grid-cols-2;
    }
    
    .product-item {
        @apply p-3;
    }
}

/* Loading States */
.ais-SearchBox--loading .ais-SearchBox-input {
    @apply bg-gray-50;
}

.ais-Hits--loading {
    @apply opacity-60;
}

/* Highlight Styles */
.ais-Highlight-highlighted {
    @apply bg-yellow-200 font-semibold;
}

/* Autocomplete Styles */
.aa-DetachedFormContainer {
    @apply relative;
}

.aa-Form {
    @apply relative;
}

.aa-InputWrapper {
    @apply relative;
}

.aa-Input {
    @apply w-full px-4 py-3 pr-12 text-gray-900 border border-gray-300 rounded-lg;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    @apply placeholder-gray-500;
}

.aa-Panel {
    @apply absolute top-full left-0 right-0 mt-1;
    @apply bg-white border border-gray-300 rounded-lg shadow-lg;
    @apply max-h-80 overflow-y-auto;
    @apply z-50;
}

.aa-Source {
    @apply border-b border-gray-100 last:border-b-0;
}

.aa-List {
    @apply py-2;
}

.aa-Item {
    @apply px-4 py-2 cursor-pointer;
    @apply hover:bg-gray-50;
}

.aa-ItemWrapper {
    @apply block;
}

/* Error States */
.algolia-error {
    @apply text-center py-12;
}

.algolia-error-icon {
    @apply mx-auto h-12 w-12 text-red-400 mb-4;
}

.algolia-error-title {
    @apply text-lg font-medium text-gray-900 mb-2;
}

.algolia-error-message {
    @apply text-sm text-gray-500;
}

/* Responsive Utilities */
@screen sm {
    .algolia-search-container {
        @apply px-6;
    }
}

@screen lg {
    .algolia-search-container {
        @apply px-8;
    }
}

@screen xl {
    .ais-Hits-list {
        @apply grid-cols-5;
    }
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
    .ais-SearchBox-input {
        @apply bg-gray-800 border-gray-600 text-white;
        @apply placeholder-gray-400;
    }
    
    .ais-Hits-item {
        @apply bg-gray-800 border-gray-700;
    }
    
    .product-item h3 a {
        @apply text-white hover:text-blue-400;
    }
}