:root {
--yayrev-filter-bg: #f7f7f7;
--yayrev-filter-border: #e0e0e0;
--yayrev-filter-text: #333;
--yayrev-filter-text-muted: #666;
--yayrev-filter-accent: #3858e9;
--yayrev-filter-accent-hover: #2145E6;
--yayrev-filter-radius: 4px;
--yayrev-filter-gap: 16px;
--yayrev-filter-transition: 0.2s ease;
} .yayrev-filter-bar {
margin-bottom: 20px;
padding: 16px;
background: var(--yayrev-filter-bg);
border: 1px solid var(--yayrev-filter-border);
border-radius: var(--yayrev-filter-radius);
} .yayrev-filter-toggle {
display: none;
width: 100%;
padding: 12px 16px;
background: white;
border: 1px solid var(--yayrev-filter-border);
border-radius: var(--yayrev-filter-radius);
font-size: 14px;
font-weight: 500;
color: var(--yayrev-filter-text);
cursor: pointer;
position: relative;
text-align: left;
}
.yayrev-filter-toggle:hover,
.yayrev-filter-toggle:focus {
border-color: var(--yayrev-filter-accent);
outline: none;
}
.yayrev-filter-toggle-icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
}
.yayrev-filter-badge {
position: absolute;
top: 8px;
right: 40px;
width: 8px;
height: 8px;
background: var(--yayrev-filter-accent);
border-radius: 50%;
} .yayrev-filter-panel {
display: flex;
flex-direction: column;
gap: var(--yayrev-filter-gap);
align-items: flex-start;
}
.yayrev-filter-selects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--yayrev-filter-gap);
width: 100%;
} .yayrev-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.yayrev-filter-label {
font-size: 12px;
font-weight: 600;
color: var(--yayrev-filter-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
padding: 0;
border: 0;
} .yayrev-filter-select {
padding: 8px 32px 8px 12px;
font-size: 14px;
color: var(--yayrev-filter-text);
background: white url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"%3E%3Cpath fill="%23333" d="M6 8L1 3h10z"/%3E%3C/svg%3E') no-repeat right 12px center;
background-size: 10px;
border: 1px solid var(--yayrev-filter-border);
border-radius: var(--yayrev-filter-radius);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
min-width: 140px;
}
.yayrev-filter-select:hover {
border-color: var(--yayrev-filter-accent);
} .yayrev-filter-checkboxes {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.yayrev-filter-checkbox {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: white;
border: 1px solid var(--yayrev-filter-border);
border-radius: var(--yayrev-filter-radius);
font-size: 13px;
cursor: pointer;
transition: border-color var(--yayrev-filter-transition),
background var(--yayrev-filter-transition);
}
.yayrev-filter-checkbox:hover {
border-color: var(--yayrev-filter-accent);
}
.yayrev-filter-checkbox input {
margin: 0;
cursor: pointer;
}
.yayrev-filter-checkbox input:checked + span,
.yayrev-filter-checkbox input:checked ~ .yayrev-filter-star {
color: var(--yayrev-filter-accent);
} .yayrev-filter-toggles .yayrev-filter-checkboxes {
flex-direction: column;
gap: 4px;
}
.yayrev-filter-toggles .yayrev-filter-checkbox {
padding: 4px 8px;
background: transparent;
border: none;
} .yayrev-clear-all {
padding: 8px 16px;
background: transparent;
border: 1px solid var(--yayrev-filter-accent);
border-radius: var(--yayrev-filter-radius);
color: var(--yayrev-filter-accent);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background var(--yayrev-filter-transition),
color var(--yayrev-filter-transition);
}
.yayrev-clear-all:hover,
.yayrev-clear-all:focus {
background: var(--yayrev-filter-accent);
color: white;
outline: none;
} .yayrev-filter-actions {
margin-left: auto;
align-self: flex-end;
} #reviews {
position: relative;
min-height: 200px;
}
#reviews .commentlist {
transition: opacity 0.3s ease;
} #reviews.yayrev-loading {
position: relative;
}
#reviews.yayrev-loading .commentlist {
opacity: 0.4;
pointer-events: none;
}
#reviews.yayrev-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid var(--yayrev-filter-border);
border-top-color: var(--yayrev-filter-accent);
border-radius: 50%;
animation: yayrev-spin 0.8s linear infinite;
}
@keyframes yayrev-spin {
to { transform: rotate(360deg); }
} .commentlist.yayrev-updated {
animation: yayrev-fade-in 0.3s ease;
}
@keyframes yayrev-fade-in {
from { opacity: 0.5; }
to { opacity: 1; }
} .yayrev-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
background: var(--yayrev-filter-bg);
border: 1px dashed var(--yayrev-filter-border);
border-radius: 8px;
margin: 20px 0;
}
.yayrev-empty-state__icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(0, 102, 192, 0.1) 0%, rgba(0, 102, 192, 0.05) 100%);
border-radius: 50%;
color: var(--yayrev-filter-accent);
}
.yayrev-empty-state__icon svg {
opacity: 0.8;
}
.yayrev-empty-state__title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
color: var(--yayrev-filter-text);
}
.yayrev-empty-state__message {
margin: 0 0 20px;
font-size: 14px;
color: var(--yayrev-filter-text-muted);
max-width: 320px;
line-height: 1.5;
}
.yayrev-empty-state__action {
padding: 10px 24px;
background: var(--yayrev-filter-accent);
border: none;
border-radius: var(--yayrev-filter-radius);
color: white;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background var(--yayrev-filter-transition),
transform var(--yayrev-filter-transition);
}
.yayrev-empty-state__action:hover,
.yayrev-empty-state__action:focus {
background: var(--yayrev-filter-accent-hover);
transform: translateY(-1px);
outline: none;
}
.yayrev-empty-state__action:active {
transform: translateY(0);
} .yayrev-filter-error {
margin: 16px 0;
padding: 16px;
background: #fff8f8;
border: 1px solid #f5c6cb;
border-radius: var(--yayrev-filter-radius);
text-align: center;
}
.yayrev-filter-error p {
margin: 0 0 12px;
color: #721c24;
}
.yayrev-retry {
padding: 8px 16px;
background: #dc3545;
border: none;
border-radius: var(--yayrev-filter-radius);
color: white;
font-size: 13px;
cursor: pointer;
}
.yayrev-retry:hover {
background: #c82333;
color: white;
} .yayrev-rating-bar--active {
background: rgba(0, 102, 192, 0.1) !important;
} .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
} @media (max-width: 768px) {
.yayrev-filter-toggle {
display: flex;
align-items: center;
gap: 8px;
}
.yayrev-filter-panel {
display: none;
flex-direction: column;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--yayrev-filter-border);
}
.yayrev-filter-panel.is-open {
display: flex;
}
.yayrev-filter-toggle[aria-expanded="true"] + .yayrev-filter-panel {
display: flex;
}
.yayrev-filter-group {
width: 100%;
}
.yayrev-filter-select {
width: 100%;
}
.yayrev-filter-actions {
margin-left: 0;
margin-top: 8px;
}
.yayrev-clear-all {
width: 100%;
}
.yayrev-ajax-pagination .page-numbers {
flex-wrap: wrap;
justify-content: center;
}
} .yayrev-filter-bar *:focus-visible {
outline: 2px solid var(--yayrev-filter-accent);
} @media (prefers-contrast: high) {
.yayrev-filter-bar {
border-width: 2px;
}
.yayrev-filter-select,
.yayrev-filter-checkbox,
.yayrev-clear-all {
border-width: 2px;
}
} @media (prefers-reduced-motion: reduce) {
.yayrev-filter-checkbox,
.yayrev-clear-all {
transition: none;
}
#reviews.yayrev-loading::after {
animation: none;
}
.commentlist.yayrev-updated {
animation: none;
}
}