/* Search & Filter Bar Component CSS - Option 1: Minimal & Clean
   Mobile-first design with time-based theming integration
   
   Usage: Include after main gallery CSS
   <link rel="stylesheet" href="/gallery/static/css/search-filter-bar.css">
*/

/* =================================
   CONTAINER - Clean Background
   ================================= */

.search-filter-container {
    background-color: transparent !important;
    padding: 24px 16px !important;
    margin-bottom: 32px !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .search-filter-container {
        padding: 32px 24px !important;
    }
}

/* =================================
   HERO SEARCH BAR - Primary Focus
   ================================= */

.search-input-group {
    margin-bottom: 24px !important;
}

.search-form {
    width: 100% !important;
}

.search-input-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background-color: var(--speech-bg-color, #f9f7f2) !important;
    border: 3px solid var(--panel-border-color, #ddd) !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    min-height: 56px !important;
}

.search-input-container:focus-within {
    border-color: var(--button-color, #d4af37) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

.search-input {
    flex: 1 !important;
    height: 56px !important;
    padding: 0 24px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-color, #5d4777) !important;
    font-family: 'Georgia', serif !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    outline: none !important;
}

.search-input::placeholder {
    color: var(--text-color-secondary, #999) !important;
    font-style: italic !important;
    font-size: 16px !important;
}

@media (max-width: 767px) {
    .search-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0 16px !important;
    }
    
    .search-input::placeholder {
        font-size: 14px !important;
    }
}

.search-clear-btn {
    position: absolute !important;
    right: 64px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    background: var(--text-color-secondary, #999) !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--featured-text, white) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: none !important; /* Show with JavaScript when search has content */
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.search-clear-btn:hover {
    background: var(--header-footer-bg, #5d4777) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.search-submit-btn {
    width: 56px !important;
    height: 56px !important;
    background: var(--header-footer-bg, #5d4777) !important;
    border: none !important;
    color: var(--featured-text, white) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.search-submit-btn:hover {
    background: var(--panel-highlight-border, #4a3660) !important;
    transform: scale(1.05) !important;
}

.search-submit-btn svg {
    width: 20px !important;
    height: 20px !important;
}

/* =================================
   HORIZONTAL CONTROLS ROW
   ================================= */

.search-controls-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    flex-wrap: nowrap !important; /* Changed: prevent wrapping on desktop */
    min-height: 40px !important; /* Ensure consistent height */
}

@media (max-width: 1024px) {
    .search-controls-row {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 767px) {
    .search-controls-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* =================================
   POPULAR TAGS - Left Side
   ================================= */

.popular-tags-section {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    flex: 1 !important; /* Take available space */
    min-width: 0 !important; /* Allow shrinking */
}

.popular-tags-label {
    font-family: 'Georgia', serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-color-secondary, #999) !important;
    white-space: nowrap !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important; /* Don't shrink the label */
}

.popular-tags-container {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.tag-filter-btn {
    padding: 6px 12px !important;
    border: 1px solid currentColor !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: inherit !important;
    font-family: 'Georgia', serif !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    line-height: 1.2 !important;
}

.tag-filter-btn:hover {
    background: var(--header-footer-bg) !important; /* Force dark purple background */
    color: var(--featured-text, white) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.tag-filter-btn.selected {
    background: currentColor !important;
    color: var(--featured-text, white) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

.tag-count {
    opacity: 0.8 !important;
    font-size: 10px !important;
}

/* =================================
   RIGHT SIDE CONTROLS
   ================================= */

.right-controls {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important; /* Don't shrink these controls */
    white-space: nowrap !important; /* Keep controls together */
}

/* Sort Controls */
.sort-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.sort-label {
    font-family: 'Georgia', serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-color, #5d4777) !important;
    white-space: nowrap !important;
}

.sort-select {
    padding: 8px 12px !important;
    border: 2px solid var(--panel-border-color, #ddd) !important;
    border-radius: 20px !important;
    background-color: var(--speech-bg-color, #f9f7f2) !important;
    color: var(--text-color, #5d4777) !important;
    font-family: 'Georgia', serif !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 120px !important;
    flex-shrink: 0 !important;
}

.sort-select:hover {
    border-color: var(--header-footer-bg, #5d4777) !important;
}

.sort-select:focus {
    outline: none !important;
    border-color: var(--button-color, #d4af37) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

/* Filters Button */
.filters-toggle-btn {
    padding: 8px 16px !important;
    background: var(--panel-bg-color, #f5f5f5) !important;
    border: 2px solid var(--panel-border-color, #ddd) !important;
    border-radius: 20px !important;
    color: var(--text-color, #5d4777) !important;
    font-family: 'Georgia', serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important; /* Don't shrink the filters button */
}

.filters-toggle-btn:hover {
    border-color: var(--header-footer-bg, #5d4777) !important;
    background: var(--speech-bg-color, #f9f7f2) !important;
}

.filters-toggle-btn.active {
    background: var(--header-footer-bg, #5d4777) !important;
    color: var(--featured-text, white) !important;
    border-color: var(--header-footer-bg, #5d4777) !important;
}

.filters-toggle-icon {
    transition: transform 0.3s ease !important;
    font-size: 10px !important;
}

.filters-toggle-btn.active .filters-toggle-icon {
    transform: rotate(180deg) !important;
}

/* =================================
   COLLAPSIBLE ADVANCED FILTERS
   ================================= */

.filter-controls-collapsible {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease-out !important;
}

.filter-controls-collapsible.expanded {
    max-height: 400px !important; /* Generous height for content */
}

.filter-controls-row {
    background: var(--panel-bg-color, #f5f5f5) !important;
    border: 2px solid var(--panel-border-color, #ddd) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-top: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

@media (min-width: 768px) {
    .filter-controls-row {
        grid-template-columns: repeat(3, 1fr) auto !important;
        align-items: end !important;
    }
}

.filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.filter-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-color, #5d4777) !important;
    font-family: 'Georgia', serif !important;
}

.filter-select {
    padding: 10px 12px !important;
    border: 2px solid var(--panel-border-color, #ddd) !important;
    border-radius: 12px !important;
    background-color: var(--speech-bg-color, #f9f7f2) !important;
    color: var(--text-color, #5d4777) !important;
    font-family: 'Georgia', serif !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.filter-select:hover {
    border-color: var(--header-footer-bg, #5d4777) !important;
}

.filter-select:focus {
    outline: none !important;
    border-color: var(--button-color, #d4af37) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15) !important;
}

.filter-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

@media (min-width: 768px) {
    .filter-actions {
        justify-content: flex-start !important;
    }
}

/* =================================
   ACTION BUTTONS
   ================================= */

.filter-apply-btn {
    padding: 10px 20px !important;
    background: var(--header-footer-bg, #5d4777) !important;
    color: var(--featured-text, white) !important;
    border: 2px solid var(--header-footer-bg, #5d4777) !important;
    border-radius: 20px !important;
    font-family: 'Georgia', serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}

.filter-apply-btn:hover {
    background: var(--panel-highlight-border, #4a3660) !important;
    border-color: var(--panel-highlight-border, #4a3660) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.filter-clear-btn {
    padding: 10px 20px !important;
    background: transparent !important;
    color: var(--text-color-secondary, #999) !important;
    border: 2px solid var(--panel-border-color, #ddd) !important;
    border-radius: 20px !important;
    font-family: 'Georgia', serif !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}

.filter-clear-btn:hover {
    background: var(--panel-bg-color, #f5f5f5) !important;
    border-color: var(--text-color-secondary, #999) !important;
    color: var(--text-color, #5d4777) !important;
}

/* =================================
   SEARCH RESULTS SUMMARY
   ================================= */

.search-results-summary {
    text-align: center !important;
    padding: 12px 20px !important;
    background: var(--panel-bg-color, #f5f5f5) !important;
    border: 1px solid var(--panel-border-color, #ddd) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    color: var(--text-color, #5d4777) !important;
    font-family: 'Georgia', serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.search-results-summary strong {
    color: var(--header-footer-bg, #5d4777) !important;
}

/* =================================
   ACCESSIBILITY ENHANCEMENTS
   ================================= */

/* Focus styles for keyboard navigation */
.filter-select:focus,
.search-input:focus,
.filter-apply-btn:focus,
.filter-clear-btn:focus,
.tag-filter-btn:focus,
.filters-toggle-btn:focus,
.sort-select:focus {
    outline: 3px solid var(--button-color, #d4af37) !important;
    outline-offset: 2px !important;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}


/* =================================
   MOBILE-SPECIFIC OPTIMIZATIONS
   ================================= */

@media (max-width: 767px) {
    .popular-tags-section {
        justify-content: center !important;
        width: 100% !important;
    }
    
    .popular-tags-container {
        justify-content: center !important;
    }
    
    .right-controls {
        justify-content: center !important;
        width: 100% !important;
    }
    
    .tag-filter-btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
}