/* Compact Grid Layout for Filter Modal */
/* Allows 40+ filters in a compact, organized grid */

/* Filter Modal Grid Container - MUST override any other styles */
/* Row 1: 8 columns (category takes 2, rest blank) */
/* Row 2: 6 equal columns for filters */
#headerFilterDrawerContent.filter-drawer-content,
#headerFilterDrawerContent {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 4px !important;
    padding: 4px !important;
    align-items: start !important;
    min-height: auto !important;
}

/* Ensure filter groups are visible */
#headerFilterDrawerContent .filter-group {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Filter Group - SHRUNK height, full width visibility (no cutting off) */
#headerFilterDrawerContent .filter-group {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* Smaller radius */
    padding: 1px 8px !important; /* SHRUNK vertical padding (1px) */
    min-height: auto !important;
    height: auto !important;
    max-width: none !important; /* No width limitation */
    width: 100%;
    box-sizing: border-box;
    overflow: visible !important; /* Allow content to be visible */
    transition: all 0.2s;
}

/* Combined Categories Filter - full width row */
#headerFilterDrawerContent .filter-group[data-group-id="categories"],
#headerFilterDrawerContent #filter-group-categories {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    max-width: none !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Category filter - expanded when active */
#headerFilterDrawerContent .filter-group[data-group-id="categories"].active,
#headerFilterDrawerContent #filter-group-categories.active {
    padding: 1px 15px !important; /* SHRUNK vertical (1px), more horizontal (15px) when open */
}

/* Second row: All other filters - pack into auto grid cells (no fixed 25% width gutters) */
#headerFilterDrawerContent .filter-group:not([data-group-id="categories"]):not(#filter-group-categories) {
    grid-row: auto !important;
    grid-column: auto !important;
    max-width: none !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* When row 2 filter is expanded, add minimal padding */
#headerFilterDrawerContent .filter-group:not([data-group-id="categories"]):not(#filter-group-categories).active {
    padding: 1px 8px !important; /* SHRUNK padding when open (1px vertical) */
}

#headerFilterDrawerContent .filter-group:hover {
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0,123,255,0.1);
}

/* Filter Group Header - SHRUNK height (just title + arrow when closed) */
#headerFilterDrawerContent .filter-group-header {
    padding: 2px 4px !important; /* SHRUNK - just enough for title + arrow (2px vertical) */
    margin-bottom: 0 !important; /* No margin when closed */
    margin-top: 0;
    cursor: pointer;
    user-select: none;
    line-height: 1.1 !important; /* SHRUNK line height */
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* When filter is collapsed, header has small margin-bottom for spacing */
#headerFilterDrawerContent .filter-group:not(.active) .filter-group-header {
    margin-bottom: 0 !important; /* No margin when closed - SHRUNK */
    padding: 2px 6px !important; /* SHRUNK padding, wider horizontal */
}

/* When filter is expanded, add small margin */
#headerFilterDrawerContent .filter-group.active .filter-group-header {
    margin-bottom: 2px !important; /* SHRUNK margin when open */
}

#headerFilterDrawerContent .filter-group-header h4 {
    font-size: 11px !important; /* SHRUNK font */
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 3px; /* SHRUNK gap */
    margin: 0;
    padding: 0;
    line-height: 1.1 !important; /* SHRUNK line height */
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: visible !important; /* Allow text to be visible */
    text-overflow: clip !important; /* Don't clip text */
}

#headerFilterDrawerContent .filter-group-header i.fa {
    font-size: 10px !important; /* SHRUNK icon */
}

/* Category filter header - SHRUNK height (always visible) */
#headerFilterDrawerContent .filter-group[data-group-id="categories"] .filter-group-header,
#headerFilterDrawerContent #filter-group-categories .filter-group-header {
    padding: 2px 8px !important; /* SHRUNK vertical (2px), adequate horizontal */
    margin-bottom: 2px !important; /* SHRUNK margin */
    min-height: auto !important;
}

#headerFilterDrawerContent .filter-group[data-group-id="categories"] .filter-group-header h4,
#headerFilterDrawerContent #filter-group-categories .filter-group-header h4 {
    font-size: 11px !important; /* SHRUNK font */
}

#headerFilterDrawerContent .filter-group[data-group-id="categories"] .filter-group-header i.fa,
#headerFilterDrawerContent #filter-group-categories .filter-group-header i.fa {
    font-size: 11px !important; /* SHRUNK icon */
}

/* Filter Group Content - ALL filters are collapsible (including category) */
/* Category filter (row 1) - collapsed by default, open on click */
/* Other filters (row 2) - collapsed by default, open on click */
#headerFilterDrawerContent .filter-group[data-group-id="categories"] .filter-group-content,
#headerFilterDrawerContent #filter-group-categories .filter-group-content {
    padding: 0 !important;
    margin: 0 !important;
    max-height: 0 !important; /* Collapsed by default - same as row 2 filters */
    overflow: hidden !important;
    display: block !important;
    transition: max-height 0.3s ease;
}

/* Category filter - expanded when active */
#headerFilterDrawerContent .filter-group[data-group-id="categories"].active .filter-group-content,
#headerFilterDrawerContent #filter-group-categories.active .filter-group-content {
    max-height: 2000px !important; /* Expanded */
    overflow: visible !important;
    padding: 1px 0 !important; /* SHRUNK vertical padding when open (1px) */
}

/* Row 2 filters - collapsed by default */
#headerFilterDrawerContent .filter-group:not([data-group-id="categories"]):not(#filter-group-categories) .filter-group-content {
    padding: 0 !important;
    margin: 0 !important;
    max-height: 0 !important; /* Collapsed by default */
    overflow: hidden !important;
    display: block !important;
    transition: max-height 0.3s ease;
}

/* Row 2 filters - expanded when active */
#headerFilterDrawerContent .filter-group:not([data-group-id="categories"]):not(#filter-group-categories).active .filter-group-content {
    max-height: 2000px !important; /* Expanded */
    overflow: visible !important;
    padding: 1px 0 !important; /* SHRUNK vertical padding when open (1px) */
}

#headerFilterDrawerContent .filter-group-inner {
    padding: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important; /* No minimum height - compact */
    height: auto !important;
}

/* Ensure ALL content inside filters is visible */
#headerFilterDrawerContent .filter-group-content *,
#headerFilterDrawerContent .filter-group-inner * {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

#headerFilterDrawerContent .filter-group-content select,
#headerFilterDrawerContent .filter-group-content input[type="text"],
#headerFilterDrawerContent .filter-group-content input[type="number"],
#headerFilterDrawerContent .filter-group-content input[type="search"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#headerFilterDrawerContent .filter-group-content label {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#headerFilterDrawerContent .filter-group-content input[type="checkbox"],
#headerFilterDrawerContent .filter-group-content input[type="radio"] {
    display: inline-block !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#headerFilterDrawerContent .filter-group-content label span {
    display: inline !important;
    white-space: nowrap !important;
}

/* Category Dropdown - WIDE to fill category filter width */
#headerFilterDrawerContent .category-dropdown-container {
    width: 100%;
    max-width: none !important; /* No width limitation */
}

#headerFilterDrawerContent .category-dropdown {
    width: 100% !important;
    padding: 2px 10px !important; /* SHRUNK vertical (2px), adequate horizontal (10px) */
    border: 1px solid #ced4da;
    border-radius: 3px; /* SHRUNK radius */
    font-size: 10px !important; /* SHRUNK font */
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
    box-sizing: border-box;
    max-width: none !important; /* No width limitation - show fully visible */
    overflow: visible !important; /* Allow dropdown menu to overflow */
    min-width: 260px !important; /* Wider so option labels stay on one line */
}

#headerFilterDrawerContent .category-dropdown:hover {
    border-color: #007bff;
}

#headerFilterDrawerContent .category-dropdown:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

#headerFilterDrawerContent .category-dropdown:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #e0e0e0;
}

/* Price Inputs - Compact */
#headerFilterDrawerContent .price-inputs {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0;
    padding: 0;
}

#headerFilterDrawerContent .price-inputs > div {
    flex: 1;
}

#headerFilterDrawerContent .price-inputs label {
    font-size: 10px;
    color: #666;
    margin-bottom: 2px;
    display: block;
}

#headerFilterDrawerContent .price-inputs input[type="number"] {
    width: 100%;
    padding: 2px 6px !important; /* SHRUNK vertical padding (2px) */
    border: 1px solid #ced4da;
    border-radius: 3px; /* SHRUNK radius */
    font-size: 10px !important; /* SHRUNK font */
    min-height: auto !important; /* SHRUNK height */
    max-width: none !important; /* No width limitation */
    line-height: 1.1 !important; /* SHRUNK line height */
}

/* Checkbox/Option Lists - Visible and properly sized */
#headerFilterDrawerContent .condition-options,
#headerFilterDrawerContent .shipping-options,
#headerFilterDrawerContent .rating-options,
#headerFilterDrawerContent .discount-options,
#headerFilterDrawerContent .availability-options,
#headerFilterDrawerContent .time-options,
#headerFilterDrawerContent .duration-options,
#headerFilterDrawerContent .quality-options,
#headerFilterDrawerContent .date-options,
#headerFilterDrawerContent .material-options,
#headerFilterDrawerContent .cert-options,
#headerFilterDrawerContent .jewelry-type-options {
    display: flex !important; /* Ensure visibility */
    flex-direction: column;
    gap: 3px !important; /* Very tight gap */
    max-height: 150px;
    overflow-y: auto;
    min-height: auto !important; /* Very tight height */
}

#headerFilterDrawerContent .condition-options label,
#headerFilterDrawerContent .shipping-options label,
#headerFilterDrawerContent .rating-options label,
#headerFilterDrawerContent .discount-options label,
#headerFilterDrawerContent .availability-options label,
#headerFilterDrawerContent .time-options label,
#headerFilterDrawerContent .duration-options label,
#headerFilterDrawerContent .quality-options label,
#headerFilterDrawerContent .date-options label,
#headerFilterDrawerContent .material-options label,
#headerFilterDrawerContent .cert-options label,
#headerFilterDrawerContent .jewelry-type-options label {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 2px 4px !important; /* Very tight vertical padding */
    font-size: 11px !important; /* Compact font */
    min-height: auto !important; /* Very tight height */
    white-space: nowrap !important;
}

#headerFilterDrawerContent input[type="checkbox"],
#headerFilterDrawerContent input[type="radio"] {
    width: 14px !important; /* Compact size */
    height: 14px !important;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #007bff;
}

/* Ensure categories filter appears first - takes 2 columns */
#headerFilterDrawerContent .filter-group[data-group-id="categories"],
#headerFilterDrawerContent #filter-group-categories {
    order: -1;
    /* grid-column set to span 2 in the rule above - takes 2 columns */
}

/* Active filter group indicator */
#headerFilterDrawerContent .filter-group.active {
    background: #f0f8ff;
    border-color: #007bff;
}

#headerFilterDrawerContent .filter-group.active .filter-group-header {
    color: #007bff;
}

/* Responsive Grid - Adjust columns based on screen size */
@media (max-width: 1200px) {
    #headerFilterDrawerContent {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on smaller screens */
    }
    
    #headerFilterDrawerContent .filter-group[data-group-id="categories"],
    #headerFilterDrawerContent #filter-group-categories {
        grid-column: 1 / span 2 !important; /* Category still takes 2 columns */
    }
}

@media (max-width: 768px) {
    #headerFilterDrawerContent {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
    
    #headerFilterDrawerContent .filter-group[data-group-id="categories"],
    #headerFilterDrawerContent #filter-group-categories {
        grid-column: 1 / span 2 !important; /* Category takes full width */
    }
}

@media (max-width: 480px) {
    #headerFilterDrawerContent {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    
    #headerFilterDrawerContent .filter-group[data-group-id="categories"],
    #headerFilterDrawerContent #filter-group-categories {
        grid-column: 1 !important; /* Category takes full width */
    }
}


#headerFilterDrawerContent .duration-options,
#headerFilterDrawerContent .quality-options,
#headerFilterDrawerContent .date-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
}

#headerFilterDrawerContent .condition-options label,
#headerFilterDrawerContent .shipping-options label,
#headerFilterDrawerContent .rating-options label,
#headerFilterDrawerContent .discount-options label,
#headerFilterDrawerContent .availability-options label,
#headerFilterDrawerContent .time-options label,
#headerFilterDrawerContent .duration-options label,
#headerFilterDrawerContent .quality-options label,
#headerFilterDrawerContent .date-options label,
#headerFilterDrawerContent .material-options label,
#headerFilterDrawerContent .cert-options label,
#headerFilterDrawerContent .jewelry-type-options label {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 2px 4px !important; /* Very tight vertical padding */
    font-size: 11px !important; /* Compact font */
    min-height: auto !important; /* Very tight height */
    white-space: nowrap !important;
}

#headerFilterDrawerContent input[type="checkbox"],
#headerFilterDrawerContent input[type="radio"] {
    width: 14px !important; /* Compact size */
    height: 14px !important;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #007bff;
}

/* Ensure categories filter appears first - takes 2 columns */
#headerFilterDrawerContent .filter-group[data-group-id="categories"],
#headerFilterDrawerContent #filter-group-categories {
    order: -1;
    /* grid-column set to span 2 in the rule above - takes 2 columns */
}

/* Active filter group indicator */
#headerFilterDrawerContent .filter-group.active {
    background: #f0f8ff;
    border-color: #007bff;
}

#headerFilterDrawerContent .filter-group.active .filter-group-header {
    color: #007bff;
}

/* Responsive Grid - Adjust columns based on screen size */
@media (max-width: 1200px) {
    #headerFilterDrawerContent {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on smaller screens */
    }
    
    #headerFilterDrawerContent .filter-group[data-group-id="categories"],
    #headerFilterDrawerContent #filter-group-categories {
        grid-column: 1 / span 2 !important; /* Category still takes 2 columns */
    }
}

@media (max-width: 768px) {
    #headerFilterDrawerContent {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
    
    #headerFilterDrawerContent .filter-group[data-group-id="categories"],
    #headerFilterDrawerContent #filter-group-categories {
        grid-column: 1 / span 2 !important; /* Category takes full width */
    }
}

@media (max-width: 480px) {
    #headerFilterDrawerContent {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    
    #headerFilterDrawerContent .filter-group[data-group-id="categories"],
    #headerFilterDrawerContent #filter-group-categories {
        grid-column: 1 !important; /* Category takes full width */
    }
}


/* Compact filter copy ? keep option/field labels on one line */
#filterModalOverlay.active .filter-drawer-header h3,
#filterModalOverlay .filter-drawer-header h3 {
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
}
#headerFilterDrawerContent .filter-group-header h4 {
    font-size: 10px !important;
}
#headerFilterDrawerContent .filter-group-header i.fa {
    font-size: 9px !important;
}
#headerFilterDrawerContent .filter-group-content label,
#headerFilterDrawerContent .filter-group-inner label,
#headerFilterDrawerContent .condition-options label,
#headerFilterDrawerContent .time-options label,
#headerFilterDrawerContent .material-options label,
#headerFilterDrawerContent .cert-options label,
#headerFilterDrawerContent .jewelry-type-options label,
#headerFilterDrawerContent .shipping-options label,
#headerFilterDrawerContent .rating-options label,
#headerFilterDrawerContent .duration-options label,
#headerFilterDrawerContent .quality-options label {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 2px 0 !important;
    gap: 5px !important;
    white-space: nowrap !important;
    align-items: center !important;
}
#headerFilterDrawerContent .filter-group-content label span,
#headerFilterDrawerContent .filter-group-inner label span {
    display: inline !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}
#headerFilterDrawerContent .price-inputs label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
}
#headerFilterDrawerContent .price-inputs {
    gap: 6px !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
}
#headerFilterDrawerContent .price-inputs > span {
    font-size: 10px !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
#headerFilterDrawerContent select,
#headerFilterDrawerContent .category-dropdown,
#headerFilterDrawerContent input[type="number"],
#headerFilterDrawerContent input[type="text"] {
    font-size: 11px !important;
    padding: 4px 6px !important;
    line-height: 1.2 !important;
    min-height: 28px !important;
    height: auto !important;
}
#headerFilterDrawerContent input[type="checkbox"],
#headerFilterDrawerContent input[type="radio"] {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    flex-shrink: 0 !important;
}
#headerFilterDrawerContent .category-dropdown-container > label,
#headerFilterDrawerContent [style*="font-size:11px"],
#headerFilterDrawerContent [style*="font-size:12px"],
#headerFilterDrawerContent [style*="font-size:14px"] {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
#headerFilterDrawerContent .filter-group-inner {
    font-size: 11px !important;
}
#headerFilterDrawerContent .filter-group-inner p,
#headerFilterDrawerContent .filter-group-inner .error {
    font-size: 10px !important;
    line-height: 1.25 !important;
}