/* Collapsible Filters for Bull Category Pages */
/* Version: 1.0 - Mobile-first responsive design */

/* Filter Toggle Button - Hidden by default on desktop */
.filter-toggle-button {
    display: none;
    width: 100%;
    padding: 15px 20px;
    background-color: #003c71;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    position: relative;
    text-align: left;
    transition: background-color 0.3s ease;
}

.filter-toggle-button:hover {
    background-color: #1a5090;
}

.filter-toggle-button:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Toggle Arrow Icon */
.filter-toggle-button::after {
    content: '▼';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-size: 14px;
}

.filter-toggle-button.active::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Filter Counter Badge */
.filter-count-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 10px;
    min-width: 20px;
    text-align: center;
}

/* Collapsible Wrapper */
.filters-collapsible-wrapper {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.filters-collapsible-wrapper.collapsed {
    max-height: 0 !important;
}

/* Mobile and Tablet Styles */
@media (max-width: 992px) {
    /* Show toggle button on tablets and mobile */
    .filter-toggle-button {
        display: block;
    }
    
    /* Hide filters by default on mobile/tablet - INCLUDING the h3 title */
    .filters-collapsible-wrapper {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        visibility: hidden; /* Also hide visually to prevent any bleed-through */
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, visibility 0s 0.4s;
    }
    
    /* Explicitly hide the h3 when collapsed */
    .filters-collapsible-wrapper:not(.expanded) h3 {
        display: none !important;
    }
    
    .filters-collapsible-wrapper.expanded {
        max-height: 2000px !important; /* Large enough for all filters */
        visibility: visible;
        opacity: 1;
        transition: max-height 0.4s ease-in, opacity 0.3s ease-in, visibility 0s;
    }
    
    /* Adjust sidebar to full width on mobile */
    .australian-sires-sidebar,
    .angus-sidebar,
    .beef-sires-sidebar {
        width: 100%;
        padding: 0 15px;
        margin-bottom: 20px;
    }
    
    /* Add some spacing when filters are expanded */
    .australian-sires-filters,
    .angus-filters,
    .beef-sires-filters {
        margin-top: 0;
        border-radius: 5px;
        animation: slideDown 0.3s ease-out;
    }
}

/* Animation for smooth appearance */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Small mobile adjustments */
@media (max-width: 576px) {
    .filter-toggle-button {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .filter-toggle-button::after {
        right: 15px;
        font-size: 12px;
    }
    
    /* Reduce filter padding on small screens */
    .australian-sires-filters,
    .angus-filters,
    .beef-sires-filters {
        padding: 15px;
    }
    
    .filter-section h4 {
        font-size: 14px;
    }
}

/* Desktop - Filters always visible */
@media (min-width: 993px) {
    .filters-collapsible-wrapper {
        max-height: none !important;
        overflow: visible !important;
    }
    
    .filter-toggle-button {
        display: none !important;
    }
}

/* Sticky toggle button on scroll (optional enhancement) */
@media (max-width: 992px) {
    .sticky-filter-toggle {
        position: sticky;
        top: 60px; /* Adjust based on header height */
        z-index: 100;
        background-color: white;
        padding: 10px 0;
        margin: -10px -15px 10px -15px;
    }
    
    .sticky-filter-toggle .filter-toggle-button {
        margin-bottom: 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}

/* Accessibility improvements */
.filter-toggle-button:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: 2px;
}

/* Loading state for filters */
.filters-loading {
    opacity: 0.6;
    pointer-events: none;
}

.filters-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid #003c71;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Support for all bull category filter containers */
.angus-filters,              /* All Beef Sires categories use this */
.australian-sires-filters,   /* Australian Sires categories */
.international-sires-filters { /* International Sires categories */
    /* Same collapsible behavior applied via wrapper */
}

/* Filter active indicator */
.filter-section.has-active-filter {
    position: relative;
}

.filter-section.has-active-filter::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    background-color: #003c71;
    border-radius: 2px;
}