/* Filter Panel Styles */
.filter-form { padding: 0 10px; }
.filter-group { margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.filter-group:last-of-type { border-bottom: none; }
.filter-label { font-weight: 600; font-size: 13px; text-transform: uppercase; color: #fff; margin-bottom: 8px; letter-spacing: 0.5px; }
.filter-checkbox { display: block; padding: 4px 0; cursor: pointer; font-size: 13px; color: #ccc; transition: color 0.2s; }
.filter-checkbox:hover { color: #fff; }
.filter-checkbox input[type=checkbox] { margin-right: 8px; accent-color: #ff3366; }
.filter-btn { display: block; width: 100%; padding: 12px; background: #ff3366; color: #fff; border: none; border-radius: 4px; font-weight: 600; text-transform: uppercase; font-size: 13px; cursor: pointer; margin-top: 10px; margin-bottom: 10px; text-align: center; letter-spacing: 0.5px; }
.filter-btn:hover { background: #e62e5c; }
.filter-clear { display: block; text-align: center; padding: 8px; color: #999; font-size: 12px; text-decoration: underline; margin-top: 8px; }
.filter-clear:hover { color: #fff; }

/* Collapsible section styles */
.collapsible { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.collapsible-sub { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.toggle-icon, .toggle-icon-sub { font-size: 12px; color: #999; transition: color 0.2s; }
.collapsible:hover .toggle-icon, .collapsible-sub:hover .toggle-icon-sub { color: #fff; }
.collapsible-content, .collapsible-content-sub { transition: all 0.2s ease; }

/* Make the inner aside scrollable */
.aside > aside {
    max-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-bottom: 20px;
}

/* WebKit scrollbar for inner aside */
.aside > aside::-webkit-scrollbar {
    width: 8px;
}

.aside > aside::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.aside > aside::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.aside > aside::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Firefox */
.aside > aside {
    scrollbar-width: thin;
    scrollbar-color: #555 #1a1a1a;
}