.ewsf {
--ewsf-bg: #ffffff;
--ewsf-border: #e5e7eb;
--ewsf-text: #1f2937;
--ewsf-muted: #6b7280;
--ewsf-focus: #2563eb;
--ewsf-accent: #E0A13B;
--ewsf-radius: 12px;
--ewsf-gap: 10px;
font-size: 15px;
line-height: 1.35;
color: var(--ewsf-text);
background: var(--ewsf-bg);
border: 1px solid var(--ewsf-border);
border-radius: var(--ewsf-radius);
padding: 14px;
}
.ewsf * { box-sizing: border-box; }
.ewsf__section + .ewsf__section { margin-top: 14px; }
.ewsf h3,
.ewsf__heading { margin: 0 0 10px; font-size: 26px; line-height: 1.15; }
.ewsf__price-ranges { display: flex; flex-direction: column; gap: 6px; }
.ewsf__field { display: flex; flex-direction: column; gap: 6px; }
.ewsf input[type="number"] {
width: 100%;
min-height: 42px;
border: 1px solid var(--ewsf-border);
border-radius: 10px;
padding: 8px 10px;
font: inherit;
} .ewsf__acc-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 40px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--ewsf-border);
border-radius: 0;
padding: 10px 6px;
cursor: pointer;
color: inherit;
font-weight: 600;
font-size: 16px;
text-align: left;
}
.ewsf__acc-toggle--accent {
background: var(--ewsf-accent);
color: #fff;
border: 0;
border-radius: 8px;
padding: 10px;
}
.ewsf__acc-panel,
.ewsf__root-panel { margin-top: 8px; } .ewsf__root + .ewsf__root { margin-top: 8px; }
.ewsf__root-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ewsf__parent-select {
color: inherit;
text-decoration: none;
font-weight: 600;
padding: 8px 4px;
flex: 1;
}
.ewsf__parent-select.is-active {
color: #0f3d9e;
text-decoration: underline;
}
.ewsf__root-toggle {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 8px;
cursor: pointer;
color: inherit;
padding: 0;
flex-shrink: 0;
}
.ewsf__root-panel { padding-left: 8px; } .ewsf__cat-item { display: flex; flex-direction: column; }
.ewsf__cat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.ewsf__cat-row .ewsf__check { flex: 1; } .ewsf__cat-depth-0 { padding-left: 0; }
.ewsf__cat-depth-1 { padding-left: 10px; }
.ewsf__cat-depth-2 { padding-left: 20px; }
.ewsf__cat-depth-3 { padding-left: 30px; }
.ewsf__sub-panel { padding-left: 8px; } .ewsf__check {
display: flex;
align-items: center;
gap: 8px;
min-height: 36px;
cursor: pointer;
}
.ewsf__check input[type="checkbox"],
.ewsf__check input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; }
.ewsf__price-option {
border: 1px solid var(--ewsf-border);
border-radius: 10px;
padding: 8px 10px;
background: #fff;
} .ewsf__empty { margin: 6px 0 0; color: var(--ewsf-muted); font-size: 13px; } .ewsf__no-results {
margin-top: 14px;
padding: 12px 14px;
background: #fef9f0;
border: 1px solid #fcd34d;
border-radius: 10px;
font-size: 14px;
}
.ewsf__no-results p { margin: 0 0 8px; font-weight: 600; }
.ewsf__no-results-reset {
display: inline-block;
padding: 6px 14px;
background: var(--ewsf-accent);
color: #fff;
border-radius: 8px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.ewsf__no-results-reset:hover { opacity: .85; } .ewsf__chips {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ewsf__chip {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--ewsf-border);
border-radius: 999px;
padding: 4px 10px;
text-decoration: none;
color: inherit;
background: #f9fafb;
}
.ewsf__chip:hover { background: #f3f4f6; }
.ewsf__chip-x { font-size: 16px; line-height: 1; } .ewsf__reset-wrap { margin: 12px 0 0; }
.ewsf__reset { color: #374151; text-decoration: underline; }
.ewsf__submit {
margin-top: 12px;
min-height: 40px;
border: 1px solid var(--ewsf-border);
border-radius: 10px;
background: #fff;
padding: 8px 12px;
} .ewsf__chev {
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform 220ms ease;
flex-shrink: 0;
}
.ewsf__acc-toggle[aria-expanded="true"] .ewsf__chev,
.ewsf__root-toggle[aria-expanded="true"] .ewsf__chev {
transform: rotate(45deg);
} .ewsf button:focus-visible,
.ewsf a:focus-visible,
.ewsf input:focus-visible {
outline: 2px solid var(--ewsf-focus);
outline-offset: 2px;
}
@media (max-width: 640px) {
.ewsf { padding: 12px; }
}