/**
 * Tablet & mobile filters — compact sticky bar + collapsible drawer.
 * Desktop (1024px+): single horizontal bar (unchanged layout via display:contents).
 */

/* -------------------------------------------------------------------------
   Toggle (hidden on desktop)
   ------------------------------------------------------------------------- */

.filters-toggle{
display:none;
align-items:center;
justify-content:center;
gap:0.4rem;
flex-shrink:0;
min-height:44px;
padding:0 1rem;
border:1px solid var(--oc365-color-border, #ddd);
border-radius:var(--oc365-radius-sm, 8px);
background:var(--oc365-color-card, #fff);
color:var(--oc365-color-text, #111);
font-family:inherit;
font-size:0.875rem;
font-weight:600;
line-height:1;
cursor:pointer;
box-shadow:var(--oc365-shadow-xs);
transition:background 0.15s ease, border-color 0.15s ease;
}

.filters-toggle:hover{
border-color:var(--oc365-color-primary, #111);
}

.filters-toggle__count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:1.25rem;
height:1.25rem;
padding:0 0.35rem;
border-radius:var(--oc365-radius-pill, 999px);
background:var(--oc365-color-primary, #111);
color:var(--oc365-btn-fg, #fff);
font-size:0.6875rem;
font-weight:700;
line-height:1;
}

.filters.is-drawer-open .filters-toggle{
border-color:var(--oc365-color-primary, #111);
background:var(--oc365-color-bg-alt, #f4f4f5);
}

/* -------------------------------------------------------------------------
   Desktop — flat filter bar
   ------------------------------------------------------------------------- */

@media (min-width:1024px){
.filter-bar{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
}

.filter-bar__toolbar,
.filter-bar__drawer,
.filter-bar__drawer-inner{
display:contents;
}

.filters-toggle{
display:none!important;
}

.filter-bar__drawer[hidden]{
display:contents!important;
}

.filter-bar__drawer{
position:static;
max-height:none!important;
overflow:visible!important;
}

.filter-actions{
display:flex;
gap:10px;
}
}

/* -------------------------------------------------------------------------
   Tablet & mobile — compact sticky + drawer
   ------------------------------------------------------------------------- */

@media (max-width:1023px){
.filters-toggle{
display:inline-flex;
}

.filter-bar{
display:block;
}

.filter-bar__toolbar{
display:flex;
align-items:stretch;
gap:8px;
}

.filter-bar__toolbar .search-field{
flex:1;
min-width:0;
}

.filter-bar__toolbar .search-field input{
height:44px;
font-size:16px;
}

.filter-bar__drawer{
max-height:0;
overflow:hidden;
visibility:hidden;
transition:max-height 0.28s ease, visibility 0.28s ease, margin 0.28s ease;
}

.filter-bar__drawer[hidden]{
display:block!important;
}

.filters.is-drawer-open .filter-bar__drawer{
max-height:min(70vh, 32rem);
overflow-y:auto;
visibility:visible;
-webkit-overflow-scrolling:touch;
margin-top:10px;
padding-top:10px;
border-top:1px solid var(--oc365-color-border, #eee);
}

.filter-bar__drawer-inner{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:8px;
}

.filter-bar__drawer select{
width:100%;
min-width:0;
height:44px;
font-size:16px;
}

.filter-actions{
grid-column:1 / -1;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}

.filter-actions button{
width:100%;
height:44px;
}

.filters--sticky{
padding:0.5rem 0 0.75rem;
margin-bottom:1rem;
}

.filters--sticky.is-stuck{
padding:0.5rem 0 0.625rem;
}

.filters-panel{
padding:0.75rem;
}

.filters.is-drawer-open .filters-panel{
box-shadow:var(--oc365-shadow-md);
}
}

/* -------------------------------------------------------------------------
   Mobile — single column drawer
   ------------------------------------------------------------------------- */

@media (max-width:599px){
.filter-bar__drawer-inner{
grid-template-columns:1fr;
}

.filter-actions{
grid-template-columns:1fr;
}

.filters--sticky.is-stuck .filters-panel{
border-radius:0 0 var(--oc365-radius-lg, 16px) var(--oc365-radius-lg, 16px);
}

body.admin-bar .filters--sticky,
body.admin-bar .filters--sticky.is-stuck{
top:46px;
}
}

/* -------------------------------------------------------------------------
   Tablet only — slightly roomier drawer grid
   ------------------------------------------------------------------------- */

@media (min-width:600px) and (max-width:1023px){
.filter-bar__drawer-inner{
gap:10px;
}
}