/* ============================================
   BrowsePlus Enhanced Sidebar & Filters - PROPER LAYOUT
   ============================================ */

/* Filter Toggle Button (main page) */
/*.browse-plus-filter-toggle {*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*gap: 8px;*/
    /*padding: 10px 20px;*/
    /*padding: 10px 15px;*/
    /*background: #5865F2;*/
    /*color: white;*/
    /*border: none;*/
    /*border-radius: 6px;*/
    /*font-size: 14px;*/
    /*font-weight: 600;*/
    /*cursor: pointer;*/
    /*transition: all 0.3s ease;*/
    /*margin-right: 15px;*/
    /*box-shadow: 0 2px 4px rgba(88, 101, 242, 0.3);*/
    /*position: relative;*/
/*}*/

/*.browse-plus-filter-toggle:hover {*/
/*    background: #4752C4;*/
/*    box-shadow: 0 4px 8px rgba(88, 101, 242, 0.4);*/
/*    transform: translateY(-1px);*/
/*}*/

/*.browse-plus-filter-toggle.active {*/
/*    background: #4752C4;*/
/*}*/

/*.browse-plus-filter-toggle i {*/
/*    font-size: 16px;*/
/*}*/

/* Active filter indicator badge */
/*.browse-plus-filter-toggle.has-active-filters::after {*/
/*    content: attr(data-active-count);*/
/*    position: absolute;*/
/*    top: -5px;*/
/*    right: -5px;*/
/*    background: #ff6b35;*/
/*    color: white;*/
/*    border-radius: 10px;*/
/*    padding: 2px 6px;*/
/*    font-size: 11px;*/
/*    font-weight: bold;*/
/*    min-width: 18px;*/
/*    text-align: center;*/
/*    box-shadow: 0 2px 4px rgba(0,0,0,0.2);*/
/*}*/

/* Layout Wrapper - Contains sidebar + content */
.browse-plus-layout-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 20px;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Sidebar - Now in normal flow, not fixed */
.browse-plus-sidebar {
    flex: 0 0 280px;
    width: 280px;
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    align-self: flex-start;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.browse-plus-sidebar.collapsed {
    display: none;
}

body.browse-plus-active .container,
body.browse-plus-active .main-content,
body.browse-plus-active main,
body.browse-plus-active #content,
body.browse-plus-active #main,
body.browse-plus-active .page {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
}

.browse-plus-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* ===== 2. DISABLE MASONRY & FIX GRID  ===== */

/* Disable Masonry positioning on ALL grids */
.resource-grid,
.resources.resource-grid,
.browse-plus-content > .resource-grid,
body.browse-plus-active .resource-grid {
    /* Kill Masonry */
    position: static !important;
    height: auto !important;
    
    /* Set up CSS Grid */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
    list-style: none !important;
    
    /* Size constraints */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    
    /* Alignment (prevents gaps) */
    align-items: start !important;
    align-content: start !important;
    justify-items: stretch !important;
    justify-content: start !important;
    
    /* Overflow prevention */
    overflow: visible !important;
}

/* Grid items: Kill Masonry positioning */
.resource-grid > .resource,
.resources.resource-grid > .resource,
.browse-plus-content > .resource-grid > .resource,
body.browse-plus-active .resource-grid > .resource {
    /* Override Masonry's absolute positioning */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    transition: box-shadow 0.3s ease !important;
    
    /* Size constraints */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    
    /* Grid behavior */
    align-self: start !important;
    justify-self: stretch !important;
    
    /* Card structure */
    display: flex !important;
    flex-direction: column !important;
    height: 333px !important;
    background: #2c3136 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !important;
}

.resource-grid > .resource:hover,
.resources.resource-grid > .resource:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2) !important;
    border-color: #adb5bd !important;
}

/* ===== 2. DISABLE MASONRY & FIX GRID  ===== */


/* Header */
.browse-plus-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f6f8fa;
    border-bottom: 1px solid #e1e4e8;
    z-index: 10;
    border-radius: 8px 8px 0 0;
}

.browse-plus-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #24292e;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Active filters count in header */
.browse-plus-header .active-filter-count {
    background: #5865F2;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
}

.browse-plus-close {
    background: none;
    border: none;
    font-size: 1.2em;
    color: #586069;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s;
    display: none; /* Hide close button since we're not overlay anymore */
}

.browse-plus-close:hover {
    background: #e1e4e8;
    color: #24292e;
}

/* Filters Container */
.browse-plus-filters {
    padding: 15px 20px 20px 20px;
}

.browse-plus-filter {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e4e8;
}

.browse-plus-filter:last-child {
    border-bottom: none;
}

.browse-plus-filter.has-active-filters {
    background: linear-gradient(to right, rgba(88, 101, 242, 0.05) 0%, transparent 100%);
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
}

/* Collapseable Filter Headers */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 15px 0;
    padding: 10px 12px;
    font-size: 0.85em;
    color: #24292e;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: all 0.2s;
    background: #f6f8fa;
    position: relative;
}

.filter-header:hover {
    background: #e1e4e8;
}

.filter-header i {
    transition: transform 0.2s;
    color: #586069;
}

.filter-header.collapsed i {
    transform: rotate(-90deg);
}

/* Active filter count badge in header */
.filter-header .filter-active-badge {
    position: absolute;
    right: 35px;
    background: #ff6b35;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.filter-content {
    padding: 5px 0;
}

/* Filter Options */
.filter-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-list label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.15s;
    font-size: 13px;
    color: #24292e;
    position: relative;
}

.filter-list label:hover {
    background: #f6f8fa;
}

/* Show exclude toggle on hover */
.filter-list label .exclude-toggle {
    display: none;
    position: absolute;
    right: 1px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-list label:hover .exclude-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-list label .exclude-toggle:hover {
    background: #f6f8fa;
    border-color: #d73a49;
}

.filter-list label .exclude-toggle i {
    color: #d73a49;
    font-size: 12px;
}

/* Checked state */
.filter-list label.is-checked {
    background: linear-gradient(to right, rgba(88, 101, 242, 0.1) 0%, rgba(88, 101, 242, 0.05) 100%);
    border-left: 3px solid #5865F2;
    padding-left: 9px;
}

/* Excluded state */
.filter-list label.is-excluded {
    background: linear-gradient(to right, rgba(215, 58, 73, 0.1) 0%, rgba(215, 58, 73, 0.05) 100%);
    border-left: 3px solid #d73a49;
    padding-left: 9px;
}

.filter-list label.is-excluded .opt-text {
    text-decoration: line-through;
    opacity: 0.7;
}

.filter-list label.is-excluded .exclude-toggle {
    display: flex;
    background: #d73a49;
    border-color: #d73a49;
}

.filter-list label.is-excluded .exclude-toggle i {
    color: white;
}

.filter-list input[type="checkbox"],
.filter-list input[type="radio"] {
    margin-right: 10px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.filter-list input[type="checkbox"]:checked,
.filter-list input[type="radio"]:checked {
    accent-color: #5865F2;
}

.filter-list label.is-excluded input[type="checkbox"]:checked {
    accent-color: #d73a49;
}

.filter-list input[type="checkbox"]:checked + span,
.filter-list input[type="radio"]:checked + span {
    font-weight: 600;
}

.filter-list label.is-checked input[type="checkbox"]:checked + span {
    color: #5865F2;
}

.filter-list label.is-excluded input[type="checkbox"]:checked + span {
    color: #d73a49;
}

/* Filter counts */
.filter-count {
    color: #666;
    font-weight: normal;
    font-size: 12px;
    margin-left: auto;
    padding-left: 10px;
    opacity: 0.8;
    margin-right: 30px; /* Make room for exclude toggle */
}

.filter-list label:hover .filter-count {
    opacity: 1;
    color: #24292e;
}

.filter-list label.is-checked .filter-count {
    color: #5865F2;
    opacity: 1;
    font-weight: 600;
}

.filter-list label.is-excluded .filter-count {
    color: #d73a49;
    opacity: 1;
}

/* Zero count items */
.filter-list label.zero-count {
    opacity: 0.5;
    cursor: not-allowed;
}

.filter-list label.zero-count input {
    pointer-events: none;
}

.filter-list label.zero-count .filter-count {
    color: #999;
}

.filter-list label.zero-count .exclude-toggle {
    display: none !important;
}

/* Show More/Less Controls */
.filter-show-more {
    margin-top: 10px;
    text-align: center;
}

.show-more-btn,
.show-less-btn,
.show-all-btn{
    border: 1px solid #e1e4e8;
    padding: 4px 16px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    width: 45%;
}

.show-less-btn {
    width: 90%;
    padding: 8px 16px;
}

.show-more-btn:hover,
.show-less-btn:hover {
    background: #f6f8fa;
    border-color: #d0d7de;
    color: #24292e;
}

.show-more-btn i,
.show-less-btn i {
    margin-left: 5px;
    font-size: 11px;
}

/* Loading & Empty States */
.filter-loading,
.filter-empty {
    padding: 15px;
    text-align: center;
    color: #586069;
    font-style: italic;
    font-size: 12px;
}

.filter-loading::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}


@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Date Range Filter */
.date-range-filter {
    padding: 10px 12px;
}

.date-range-filter.has-custom-range {
    background: rgba(88, 101, 242, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(88, 101, 242, 0.2);
}

.date-range-inputs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 10px;
    align-items: center;
    margin-bottom: 20px;
}

.date-range-inputs label {
    font-size: 12px;
    font-weight: 600;
    color: #586069;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.date-input {
    padding: 8px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 13px;
    color: #24292e;
    background: white;
    transition: all 0.2s;
    width: 100%;
}

.date-input:hover {
    border-color: #8891aa;
}

.date-input:focus {
    border-color: #5865F2;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.1);
    outline: none;
}

/* Date Range Slider */
.date-range-slider {
    margin: 0 12px;
    height: 6px;
}

.ui-slider {
    position: relative;
    background: #e1e4e8;
    border-radius: 3px;
    height: 6px;
}

.ui-slider-range {
    position: absolute;
    background: #5865F2;
    height: 100%;
    border-radius: 3px;
}

.ui-slider-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border: 2px solid #5865F2;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    cursor: grab;
    transition: all 0.2s;
    outline: none;
}

.ui-slider-handle:hover {
    width: 20px;
    height: 20px;
    border-width: 3px;
}

.ui-slider-handle:active {
    cursor: grabbing;
    box-shadow: 0 0 0 5px rgba(88, 101, 242, 0.2);
}

/* Actions section */
.browse-plus-actions {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    padding: 15px 20px;
    background: #f6f8fa;
    border-top: 1px solid #e1e4e8;
    position: sticky;
    bottom: 0;
    border-radius: 0 0 8px 8px;
    z-index: 4;
}

.browse-plus-actions button {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 55px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

#browse-plus-apply {
    background: #5865F2;
    color: white;
    box-shadow: 0 2px 4px rgba(88, 101, 242, 0.3);
}

#browse-plus-apply:hover {
    background: #4752C4;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(88, 101, 242, 0.4);
}

#browse-plus-apply.has-changes {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    animation: pulse 2s ease-in-out infinite;
}

#browse-plus-apply.has-changes::after {
    content: '•';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    animation: blink 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.5);
    }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

#browse-plus-reset {
    background: white;
    color: #586069;
    border: 1px solid #d0d7de;
}

#browse-plus-reset:hover {
    background: #f6f8fa;
    border-color: #8891aa;
    color: #24292e;
}

/* ============================================
   Accessibility & Focus States
   ============================================ */

/*.browse-plus-filter input:focus,*/
/*.browse-plus-actions button:focus,*/
/*.filter-header:focus,*/
/*.browse-plus-close:focus,*/
/*.browse-plus-filter-toggle:focus,*/
/*.date-input:focus {*/
/*    outline: 2px solid #5865F2;*/
/*    outline-offset: 2px;*/
/*}*/

/* Keyboard navigation */
.filter-header:focus-visible,
.show-more-btn:focus-visible,
.show-less-btn:focus-visible {
    outline: 2px solid #5865F2;
    outline-offset: 2px;
}

/* Scrollbar styling */
.browse-plus-sidebar::-webkit-scrollbar {
    width: 8px;
}

.browse-plus-sidebar::-webkit-scrollbar-track {
    background: #f6f8fa;
}

.browse-plus-sidebar::-webkit-scrollbar-thumb {
    background: #d0d7de;
    border-radius: 4px;
}

.browse-plus-sidebar::-webkit-scrollbar-thumb:hover {
    background: #8891aa;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .browse-plus-sidebar,
    .browse-plus-filter-toggle {
        display: none !important;
    }
}

/* ============================================
   Custom Checkbox & Radio Styles
   ============================================ */

.filter-list input[type="checkbox"],
.filter-list input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #d0d7de;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.filter-list input[type="radio"] {
    border-radius: 50%;
}

.filter-list input[type="checkbox"]:checked,
.filter-list input[type="radio"]:checked {
    background: #5865F2;
    border-color: #5865F2;
}

.filter-list label.is-excluded input[type="checkbox"]:checked {
    background: #d73a49;
    border-color: #d73a49;
}

.filter-list input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px;
    font-weight: bold;
}

/* Excluded checkbox shows X instead of checkmark */
.filter-list label.is-excluded input[type="checkbox"]:checked::after {
    content: '✗';
    font-size: 12px;
}

.filter-list input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.filter-list input[type="checkbox"]:hover,
.filter-list input[type="radio"]:hover {
    border-color: #8891aa;
}

.filter-list input[type="checkbox"]:focus,
.filter-list input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.2);
}


/* ============================================
   STICKY SIDEBAR FIX - PASTE THIS BELOW YOUR EXISTING CSS
   This extends the sidebar to stay sticky until the footer
   ============================================ */

/* Step 1: Extend the layout wrapper to reach the footer */
body.browse-plus-active .browse-plus-layout-wrapper {
    min-height: calc(100vh - 150px) !important;
}

/* Step 2: Make content area flexible to fill space */
.browse-plus-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 150px) !important;
}

/* Step 3: Let grid expand but keep pagination at bottom */
.browse-plus-content > .resource-grid {
    flex: 1 1 auto !important;
}

.browse-plus-content > .pagination {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 40px !important;
}

/* Step 4: Ensure sidebar sticks properly within extended parent */
.browse-plus-sidebar {
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
}

/* Step 5: Prevent footer overlap */
body.browse-plus-active .main-footer,
body.browse-plus-active footer {
    margin-top: 60px !important;
    clear: both !important;
}

/* ============================================
                browse-controls
   ============================================ */
   
/* Ensure browse-controls is a flex container */
.browse-controls {
    /*display: flex !important;*/
    /*align-items: center !important;*/
    /*flex-wrap: nowrap !important;*/
    gap: 0.5rem !important;  
    justify-content: normal;
    /*margin-bottom: 1.5rem !important;*/
}

.browse-controls label:empty {
  display: none;
}

 /*LEFT GROUP: Keep these snug together */
.browse-plus-filter-toggle {
    order: 1 !important;
    margin-right: 0 !important;
    padding: 10px 15px;
    min-width: 108px;
}

.browse-controls .view-type-toggle,
.browse-controls > div:has(> button[class*="grid"]),
.browse-controls > div:has(> button[class*="list"]),
.browse-controls > .layout-toggle {
    order: 2 !important;
    margin-right: 0 !important;
}

.browse-plus-pagination-wrapper,
.pagination-controls {
    order: 3 !important;
    margin-right: 0 !important;
}

 /*RIGHT GROUP: Push sort controls to the right with space */
.browse-plus-sort-controls,
.browse-controls form.sorting {
    order: 10 !important;
    margin-left: auto !important; 
}
.browse-controls .sorting {
    gap: 5px;
}

.pagination-controls {
  display: inline-flex;
  align-items: center;
}

.browse-controls .sorting button
 {
    width: auto;
}

/* ============================================
   FIXES FOR REPORTED ISSUES - Added by update
   ============================================ */

/* Fix blank space after pagination */
/*body.browse-plus-active .browse-plus-layout-wrapper {*/
/*    min-height: auto !important;*/
/*}*/

/*.browse-plus-content {*/
/*    min-height: auto !important;*/
/*}*/

/*.browse-plus-content > .resource-grid {*/
/*    flex: 0 1 auto !important;*/
/*}*/

/* Prevent overflow and blank spaces */
/*body.browse-plus-active {*/
/*    overflow-x: hidden !important;*/
/*}*/

/* Fix sort controls layout */
/*.browse-plus-sort-controls {*/
/*    z-index: 10;*/
/*    position: relative;*/
/*}*/

        /*.browse-plus-pagination-wrapper {*/
        /*  display: inline-block;*/
        /*  margin-right: 1rem;*/
        /*}*/
        
        /*.pagination-controls {*/
        /*  display: inline-flex;*/
        /*  align-items: center;*/
          /*gap: 0.5rem;*/
        /*}*/
        
        /*.pagination-controls label {*/
        /*  margin: 0;*/
        /*  font-weight: normal;*/
        /*}*/
        
        /*.pagination-controls select {*/
        /*  padding: 0.25rem 0.5rem;*/
        /*  border: 1px solid #dfdfdf;*/
        /*  background: white;*/
        /*  font-size: inherit;*/
        /*  line-height: 1.5;*/
        /*  min-width: 120px;*/
        /*}*/

/* ============================================
   TOP CONTROLS LAYOUT FIX - SIMPLIFIED
   Tight left group, sort on right
   ============================================
      ============================================
         ============================================
            ============================================
               ============================================
                  ============================================
                     ============================================
                        ============================================
                           ============================================
   */

/* Ensure browse-controls is a flex container */
/*.browse-controls {*/
/*    display: flex !important;*/
/*    align-items: center !important;*/
/*    flex-wrap: nowrap !important;*/
/*    gap: 0.5rem !important;  */
/*    margin-bottom: 1.5rem !important;*/
/*}*/

/* LEFT GROUP: Keep these snug together */
/*.browse-plus-filter-toggle {*/
/*    order: 1 !important;*/
/*    margin-right: 0 !important;*/
/*}*/

/*.browse-controls .view-type-toggle,*/
/*.browse-controls > div:has(> button[class*="grid"]),*/
/*.browse-controls > div:has(> button[class*="list"]),*/
/*.browse-controls > .layout-toggle {*/
/*    order: 2 !important;*/
/*    margin-right: 0 !important;*/
/*}*/

/*.browse-plus-pagination-wrapper,*/
/*.pagination-controls {*/
/*    order: 3 !important;*/
/*    margin-right: 0 !important;*/
/*}*/

/* RIGHT GROUP: Push sort controls to the right with space */
/*.browse-plus-sort-controls,*/
/*.browse-controls form.sorting {*/
/*    order: 10 !important;*/
    /*margin-left: auto !important; */
/*}*/

/* Ensure internal spacing of controls is consistent */
/*.browse-plus-pagination-wrapper,*/
/*.pagination-controls,*/
/*.browse-plus-sort-controls .sorting {*/
/*    display: inline-flex !important;*/
/*    align-items: center !important;*/
/*    gap: 0.5rem !important;*/
/*}*/

/* View toggle buttons should be connected (no gap) */
/*.browse-controls .view-type-toggle {*/
/*    display: inline-flex !important;*/
/*    gap: 0 !important;*/
/*}*/

/*.browse-controls .view-type-toggle button {*/
/*    margin: 0 !important;*/
/*}*/



/*
   ============================================
      ============================================
         ============================================
            ============================================
               ============================================
                  ============================================
                     ============================================
                        ============================================
                           ============================================
   */

/* Ensure consistent sizing */
/*.browse-controls select {*/
/*    min-width: 120px !important;*/
/*}*/

/*.browse-controls button[type="button"],*/
/*.browse-controls button.submit {*/
    /*padding: 0.5rem 1.25rem !important;*/
/*    white-space: nowrap !important;*/
/*}*/

/* Reset any conflicting margins */
/*.browse-controls > * {*/
/*    margin: 0 !important;*/
/*}*/

/* But keep the sort control's auto margin */
/*.browse-plus-sort-controls,*/
/*.browse-controls form.sorting {*/
/*    margin-left: auto !important;*/
/*}*/

/* ============================================
   TOP CONTROLS LAYOUT FIX - V3
   Tight left group above 1023px
   Full stack below 1023px
   ============================================ */

/* Base layout for desktop (above 1023px) */
/*.browse-controls {*/
/*    display: flex !important;*/
/*    align-items: center !important;*/
/*    flex-wrap: wrap !important;*/
/*    gap: 0.5rem !important;*/
/*    margin-bottom: 1.5rem !important;*/
/*}*/

/* LEFT GROUP: Keep these snug together */
/*.browse-plus-filter-toggle {*/
/*    order: 1 !important;*/
/*    margin-right: 0 !important;*/
/*}*/

/*.browse-controls .view-type-toggle,*/
/*.browse-controls > div:has(> button[class*="grid"]),*/
/*.browse-controls > div:has(> button[class*="list"]),*/
/*.browse-controls > .layout-toggle {*/
/*    order: 2 !important;*/
/*    margin-right: 0 !important;*/
/*}*/

/*.browse-plus-pagination-wrapper,*/
/*.pagination-controls {*/
/*    order: 3 !important;*/
/*    margin-right: 0 !important;*/
/*}*/

/* RIGHT GROUP: Push sort controls to the right */
/*.browse-plus-sort-controls,*/
/*.browse-controls form.sorting {*/
/*    order: 10 !important;*/
/*    margin-left: auto !important;*/
/*}*/

/* Ensure internal spacing is consistent */
/*.browse-plus-pagination-wrapper,*/
/*.pagination-controls,*/
/*.browse-plus-sort-controls .sorting {*/
/*    display: inline-flex !important;*/
/*    align-items: center !important;*/
/*    gap: 0.5rem !important;*/
/*}*/

/* View toggle buttons connected */
/*.browse-controls .view-type-toggle {*/
/*    display: inline-flex !important;*/
/*    gap: 0 !important;*/
/*}*/

/*.browse-controls .view-type-toggle button {*/
/*    margin: 0 !important;*/
/*}*/

/* Ensure consistent sizing */
/*.browse-controls select {*/
/*    min-width: 120px !important;*/
/*}*/

/*.browse-controls button[type="button"],*/
/*.browse-controls button.submit {*/
/*    padding: 0.5rem 1.25rem !important;*/
/*    white-space: nowrap !important;*/
/*}*/

/* Reset margins */
/*.browse-controls > * {*/
/*    margin: 0 !important;*/
/*}*/

/*.browse-plus-sort-controls,*/
/*.browse-controls form.sorting {*/
/*    margin-left: auto !important;*/
/*}*/

/* ============================================
   RESPONSIVE: BELOW 1023px - FULL STACK
   ============================================ */

@media (max-width: 930px) {
.browse-plus-pagination-wrapper,
.browse-plus-sort-controls{
/*width: 100% !important;*/
flex: 1 1 auto;
}
    .pagination-controls,
    .browse-controls select{
        width: 100% !important;
    }
    
    /*.browse-controls {*/
    /*    flex-direction: column !important;*/
    /*    align-items: stretch !important;*/
    /*    gap: 0.75rem !important;*/
    /*}*/
    
    /* Reset all orders for vertical stack */
    /*.browse-plus-filter-toggle,*/
    /*.browse-controls .view-type-toggle,*/
    /*.browse-controls > div:has(> button[class*="grid"]),*/
    /*.browse-controls > div:has(> button[class*="list"]),*/
    /*.browse-controls > .layout-toggle,*/
    /*.browse-plus-pagination-wrapper,*/
    /*.pagination-controls,*/
    /*.browse-plus-sort-controls,*/
    /*.browse-controls form.sorting {*/
    /*    order: 0 !important;*/
    /*    margin-left: 0 !important;*/
    /*    margin-right: 0 !important;*/
    /*    width: 100% !important;*/
    /*}*/
    
    /* Filter button full width */
    /*.browse-plus-filter-toggle {*/
    /*    width: 100% !important;*/
    /*    justify-content: center !important;*/
    /*}*/
    
    /* View toggles centered */
    /*.browse-controls .view-type-toggle,*/
    /*.browse-controls > div:has(> button[class*="grid"]),*/
    /*.browse-controls > div:has(> button[class*="list"]),*/
    /*.browse-controls > .layout-toggle {*/
    /*    display: flex !important;*/
    /*    justify-content: center !important;*/
    /*    width: 100% !important;*/
    /*}*/
    
    /* Pagination full width */
    /*.browse-plus-pagination-wrapper,*/
    /*.pagination-controls {*/
    /*    display: flex !important;*/
    /*    flex-direction: column !important;*/
    /*    align-items: stretch !important;*/
    /*    width: 100% !important;*/
    /*    gap: 0.5rem !important;*/
    /*}*/
    
    /*.pagination-controls label {*/
    /*    text-align: left !important;*/
    /*    display: block !important;*/
    /*}*/
    
    /*.pagination-controls select {*/
    /*    width: 100% !important;*/
    /*}*/
    
    /* SORT CONTROLS: Break into individual full-width elements */
    /*.browse-plus-sort-controls,*/
    /*.browse-controls form.sorting {*/
        /*display: flex !important;*/
        /*flex-direction: column !important;*/
    /*    align-items: stretch !important;*/
    /*    width: 100% !important;*/
    /*    gap: 0.75rem !important;*/
    /*}*/
    
    /*.browse-plus-sort-controls .sorting {*/
        /*display: flex !important;*/
        /*flex-direction: column !important;*/
    /*    align-items: stretch !important;*/
        /*gap: 0.75rem !important;*/
    /*}*/
    
    /* Each sort element full width */
    /*.browse-plus-sort-controls label,*/
    /*.browse-plus-sort-controls select,*/
    /*.browse-plus-sort-controls button {*/
    /*    width: 100% !important;*/
    /*    display: block !important;*/
    /*}*/
    
    /*.browse-controls form.sorting label,*/
    /*.browse-controls form.sorting select,*/
    /*.browse-controls form.sorting button {*/
    /*    width: 100% !important;*/
    /*    display: block !important;*/
    /*}*/
    
    /* Labels above dropdowns */
    /*.browse-plus-sort-controls label,*/
    /*.browse-controls form.sorting label {*/
    /*    margin-bottom: 0.25rem !important;*/
    /*    text-align: left !important;*/
    /*}*/
    
    /* Full width selects */
    /*.browse-controls select {*/
    /*    width: 100% !important;*/
    /*    min-width: 100% !important;*/
    /*    max-width: 100% !important;*/
    /*}*/
    
    /* Full width buttons */
    /*.browse-controls button[type="button"],*/
    /*.browse-controls button.submit {*/
    /*    width: 100% !important;*/
    /*    justify-content: center !important;*/
    /*    text-align: center !important;*/
    /*}*/
}

@media (max-width: 490px) {
    
    
.browse-controls {
        justify-content: space-between;
}
    
    .browse-controls .sorting {
    flex-wrap: wrap;
}
.browse-controls .sorting button {
    width: 100%;
}
    .browse-controls .sorting button
 {
    width: 100%;
}
    
}