:root {
--bf-primary: #111;
--bf-primary-hover: #333;
--bf-border: #ddd;
--bf-bg: #fff;
--bf-text: #333;
--bf-text-muted: #777;
--bf-radius: 8px;
} .blog-filter-wrap {
font-family: "Geist", sans-serif;
}
.blog-filter-form {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
margin-bottom: 24px;
padding: 24px;
background: var(--bf-bg);
}
.blog-filter-field {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 200px;
}
.blog-filter-field label {
font-size: 13px;
font-weight: 600;
color: var(--bf-text);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.blog-filter-field select {
height: 44px;
padding: 0 12px;
border: 1px solid var(--bf-border);
border-radius: 6px;
font-size: 14px;
color: var(--bf-text);
background: var(--bf-bg);
transition: border-color 0.2s;
-webkit-appearance: none;
appearance: none;
}
.blog-filter-field select:focus {
outline: none;
border-color: var(--bf-primary);
} .blog-filter-field--submit {
flex: 0 0 auto;
flex-direction: row;
align-items: flex-end;
gap: 8px;
}
.blog-filter-btn {
height: 44px;
padding: 0 24px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
white-space: nowrap;
}
.blog-filter-btn:not(.blog-filter-btn--reset) {
background: var(--bf-primary);
color: #fff;
}
.blog-filter-btn:not(.blog-filter-btn--reset):hover {
background: var(--bf-primary-hover);
}
.blog-filter-btn--reset {
background: transparent;
color: var(--bf-text-muted);
border: 1px solid var(--bf-border);
}
.blog-filter-btn--reset:hover {
color: var(--bf-text);
border-color: var(--bf-text);
} @media (min-width: 1024px) {
.blog-filter-form {
flex-wrap: nowrap;
width: 80%;
margin: auto;
margin-bottom: 24px;
}
}