/**
 * Filters Sidebar Styles
 * Progressive Enhancement Filtering
 *
 * @package WPAgent
 */

/* Sidebar Container */
.filters-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 6rem; /* 96px = top-24 */
    height: fit-content;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.filters-sidebar::-webkit-scrollbar {
    width: 6px;
}

.filters-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.filters-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.filters-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.7);
}

/* Filter Section Toggle */
.filter-section-toggle {
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.filter-section-toggle:hover {
    background-color: rgba(249, 250, 251, 1);
}

/* Filter Section Accordion */
.filter-section-content {
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-section-content[aria-hidden="true"] {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Filter Items */
.filter-item {
    transition: all 0.15s ease;
}

.filter-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.filter-label:hover {
    background-color: rgba(243, 244, 246, 1);
}

/* Filter Checkbox */
.filter-checkbox {
    width: 1rem;
    height: 1rem;
    color: rgb(139, 92, 246);
    border-color: rgb(209, 213, 219);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-checkbox:focus {
    ring: 2px;
    ring-color: rgb(139, 92, 246);
    ring-opacity: 0.5;
}

.filter-checkbox:checked {
    background-color: rgb(139, 92, 246);
    border-color: rgb(139, 92, 246);
}

/* Filter Link */
.filter-link {
    flex: 1;
    margin-left: 0.75rem;
    font-size: 0.875rem;
    color: rgb(55, 65, 81);
    text-decoration: none;
    transition: color 0.15s ease;
}

.filter-label:hover .filter-link {
    color: rgb(139, 92, 246);
}

.filter-link.font-semibold {
    font-weight: 600;
    color: rgb(139, 92, 246);
}

.filter-link .count {
    color: rgb(156, 163, 175);
    margin-left: 0.25rem;
}

/* Clear All Button */
#clear-all-filters {
    font-size: 0.875rem;
    color: rgb(139, 92, 246);
    font-weight: 500;
    transition: color 0.15s ease;
}

#clear-all-filters:hover {
    color: rgb(147, 51, 234);
}

/* Mobile Responsive */
@media (max-width: 1023px) {
    .filters-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 2rem;
    }
}

/* Ensure proper layout */
.archive-theme-profiles .container {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .archive-theme-profiles .flex.lg\:flex-row {
        flex-direction: row;
        gap: 2rem;
    }

    .archive-theme-profiles .lg\:w-80 {
        width: 20rem;
        flex-shrink: 0;
    }

    .archive-theme-profiles .flex-1 {
        flex: 1;
        min-width: 0;
    }
}

/* Pagination Styles */
.page-numbers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.page-numbers li::before {
    content: none !important;
    display: none !important;
}

/* Legacy pagination list class */
.pagination-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pagination-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pagination-list li::before {
    content: none !important;
    display: none !important;
}

/* Pagination links and spans */
.page-numbers a.page-numbers,
.page-numbers span.page-numbers,
a.page-numbers,
span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55, 65, 81);
    background-color: white;
    border: 1px solid rgb(229, 231, 235);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

a.page-numbers:hover {
    background-color: rgb(249, 250, 251);
    border-color: rgb(209, 213, 219);
    color: rgb(139, 92, 246);
}

span.page-numbers.current {
    background-color: rgb(139, 92, 246);
    border-color: rgb(139, 92, 246);
    color: white;
    font-weight: 600;
}

span.page-numbers.dots {
    border: none;
    background: transparent;
    color: rgb(156, 163, 175);
    min-width: auto;
    padding: 0.5rem;
}

a.page-numbers.prev,
a.page-numbers.next {
    font-weight: 600;
    color: rgb(139, 92, 246);
    border-color: rgb(216, 180, 254);
    background-color: rgb(250, 245, 255);
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* More specific selector */
.page-numbers a.prev,
.page-numbers a.next,
nav a.prev,
nav a.next {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

a.page-numbers.prev:hover,
a.page-numbers.next:hover {
    background-color: rgb(243, 232, 255);
    border-color: rgb(139, 92, 246);
}

a.page-numbers.prev svg,
a.page-numbers.next svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Legacy - keep for backward compatibility */
.pagination-list a,
.pagination-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55, 65, 81);
    background-color: white;
    border: 1px solid rgb(229, 231, 235);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.pagination-list a:hover {
    background-color: rgb(249, 250, 251);
    border-color: rgb(209, 213, 219);
    color: rgb(139, 92, 246);
}

.pagination-list .current {
    background-color: rgb(139, 92, 246);
    border-color: rgb(139, 92, 246);
    color: white;
    font-weight: 600;
}

.pagination-list .dots {
    border: none;
    background: transparent;
    color: rgb(156, 163, 175);
    min-width: auto;
    padding: 0.5rem;
}

.pagination-list .prev,
.pagination-list .next {
    font-weight: 600;
    color: rgb(139, 92, 246);
    border-color: rgb(216, 180, 254);
    background-color: rgb(250, 245, 255);
    padding-left: 1rem;
    padding-right: 1rem;
}

.pagination-list .prev:hover,
.pagination-list .next:hover {
    background-color: rgb(243, 232, 255);
    border-color: rgb(139, 92, 246);
}

.pagination-list .prev svg,
.pagination-list .next svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Make sure pagination container is properly styled - more specific selector */
.archive-theme-profiles > div > div > div.flex.justify-center,
.archive-theme-profiles nav[aria-label="Pagination"] {
    margin-top: 3rem;
}
/* ========================================================================================
   FILTER RADIO BUTTONS - NEW TAXONOMY STRUCTURE
   ======================================================================================== */

/* Filter Radio Buttons - Base styling */
.filter-radio {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 50%;
    border: 2px solid rgb(209, 213, 219);
    position: relative;
}

.filter-radio:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.filter-radio:checked {
    border-color: rgb(220, 38, 38);
    background-color: white;
}

.filter-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(220, 38, 38);
}

.filter-section-toggle.bg-purple-600 {
    background-color: rgb(139, 92, 246) !important;
}

.filter-section-toggle.bg-purple-600:hover {
    background-color: rgb(124, 58, 237) !important;
}

.filter-section-toggle .font-medium.text-white {
    color: white !important;
}

.filter-section-toggle.bg-purple-600 svg {
    color: white;
}