/**
 * WooCommerce Category Sidebar Widget Styles
 */

/* Container */
.wcs-category-container {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}

/* Custom scrollbar for webkit browsers */
.wcs-category-container::-webkit-scrollbar {
    width: 6px;
}

.wcs-category-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.wcs-category-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.wcs-category-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Category List */
.wcs-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Category Item */
.wcs-category-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.wcs-category-item:last-child {
    border-bottom: none;
}

.wcs-category-item:hover {
    background-color: #f9f9f9;
}

/* Category Link */
.wcs-category-item a {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    text-decoration: none;
    color: #333;
    transition: color 0.2s ease;
}

.wcs-category-item a:hover {
    color: #0073aa;
}

/* Thumbnail */
.wcs-category-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.wcs-category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hide thumbnails by default, show only when enabled */
.wcs-hide-thumbnails .wcs-category-thumb {
    display: none;
}

.wcs-show-thumbnails .wcs-category-thumb {
    display: block;
}

/* Category Name */
.wcs-category-name {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* Category Count */
.wcs-category-count {
    flex-shrink: 0;
    font-size: 12px;
    color: #888;
    margin-left: 8px;
}

/* No Categories Message */
.wcs-no-categories {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* Loader */
.wcs-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    gap: 10px;
}

/* Spinner */
.wcs-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: wcs-spin 0.8s linear infinite;
}

@keyframes wcs-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Loading Text */
.wcs-loading-text {
    font-size: 13px;
    color: #666;
}

/* End Message */
.wcs-end-message {
    padding: 15px;
    text-align: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #eee;
    background: #fafafa;
}

/* Error Message */
.wcs-error-message {
    padding: 15px;
    text-align: center;
    font-size: 12px;
    color: #d63638;
    background: #fef7f7;
    border-top: 1px solid #f5c6cb;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .wcs-category-item a {
        padding: 10px 8px;
    }

    .wcs-category-thumb {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }

    .wcs-category-name {
        font-size: 13px;
    }
}

/* Animation for new items */
.wcs-category-item {
    animation: wcs-fadeIn 0.3s ease-in-out;
}

@keyframes wcs-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Active/Current Category */
.wcs-category-item.current-cat a,
.wcs-category-item.current-cat a:hover {
    background-color: #f0f7fc;
    color: #0073aa;
    font-weight: 600;
}

/* Widget Title Styling (optional - can be overridden by theme) */
.widget_wcs_category_widget .widget-title,
.widget_wcs_category_widget h2,
.widget_wcs_category_widget h3 {
    margin-bottom: 15px;
}

/* Smooth scrolling */
.wcs-category-container {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
.wcs-category-item a:focus {
    outline: 2px solid #0073aa;
    outline-offset: -2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wcs-category-item {
        border-bottom: 2px solid #000;
    }

    .wcs-category-item a {
        color: #000;
    }

    .wcs-category-item a:hover,
    .wcs-category-item a:focus {
        background-color: #ff0;
        color: #000;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .wcs-spinner {
        animation: none;
    }

    .wcs-category-item {
        animation: none;
    }

    .wcs-category-container {
        scroll-behavior: auto;
    }
}