/* قائمة الأقسام */
.catsList {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 50;
    margin-top: 0.5rem;
}

/* تنسيق العناصر */
.catsList a {
    text-decoration: none;
    color: #2d3436;
    transition: all 0.2s ease;
}

.catsList a:hover,
.catsList a.isHovered {
    background-color: #f8f9fa;
}

/* أيقونة السهم */
.catsList svg {
    transform: scaleX(-1);
}

/* شريط التمرير */
.catsList div[style*="overflow-y: auto"] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f8f9fa;
}

.catsList div[style*="overflow-y: auto"]::-webkit-scrollbar {
    width: 6px;
}

.catsList div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.catsList div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}

/* الحدود بين الأقسام */
.catsList .border-l {
    border-color: #e9ecef;
}

/* تأثيرات التحويم */
.catsList a.isHovered {
    background-color: #f8f9fa;
}

.catsList a.isHovered svg {
    opacity: 1;
}

/* تنسيق الصور */
.catsList img {
    object-fit: cover;
    border-radius: 4px;
}

.grid-pattern {
    background-image: url('/images/pattern-grid.png');
    background-repeat: repeat;
    background-size: 40px 40px;
    opacity: 0.1;
}