.awh-cat-menu-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
    min-height: 400px; /* Default min height */
}

/* --- Menu List Column --- */
.awh-cat-menu-list {
    width: 250px;
    background: #fdfdfd;
    border-left: 1px solid #eee;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    /* Height is controlled by JS/Widget Settings, but we set a default */
    height: 400px; 
    z-index: 1; /* ایجاد Context برای لایه گرادینت */
}

/* --- Scroll Gradients Logic --- */

/* گرادینت بالا */
.awh-cat-menu-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    z-index: 10;
    opacity: 0; /* پیشفرض مخفی */
    transition: opacity 0.3s ease;
    pointer-events: none; /* اجازه کلیک روی آیتم‌های زیرین */
}

/* گرادینت پایین */
.awh-cat-menu-list::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    z-index: 10;
    opacity: 0; /* پیشفرض مخفی */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* کلاس‌های فعال‌ساز گرادینت که توسط JS اضافه می‌شوند */
.awh-cat-menu-list.can-scroll-up::before {
    opacity: 1;
}

.awh-cat-menu-list.can-scroll-down::after {
    opacity: 1;
}

/* --- End Scroll Gradients Logic --- */

.awh-cat-menu-items-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    position: relative;
    z-index: 5;
}
.awh-cat-menu-items-scroll::-webkit-scrollbar { display: none; }

/* --- Menu Item --- */
.awh-cat-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    text-decoration: none;
    color: #555;
    transition: all 0.2s ease;
    position: relative;
    font-size: 14px;
}

.awh-cat-menu-item:hover,
.awh-cat-menu-item.active {
    background: #fff;
    color: #000;
    font-weight: bold;
}

.awh-cat-menu-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awh-cat-menu-icon img { width: 100%; height: 100%; object-fit: contain; }
.awh-cat-menu-icon svg { width: 100%; height: 100%; fill: currentColor; }

.awh-cat-menu-item span {
    flex-grow: 1;
}

.awh-cat-menu-arrow {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --- Moving Border Indicator --- */
.awh-cat-border-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 45px; /* Approximately item height */
    background: #fb743e; /* تغییر رنگ به نارنجی جدید */
    transition: transform 0.2s ease, opacity 0.2s;
    opacity: 0;
    pointer-events: none;
    z-index: 15; /* بالاتر از گرادینت باشد */
}

/* --- Content Area --- */
.awh-cat-content-area {
    flex-grow: 1;
    padding: 10px 20px; 
    overflow-y: auto;
    background: #fff;
    display: none; /* Hidden by default until hover */
}

.awh-cat-content-area.show {
    display: block;
    animation: awhFadeIn 0.3s ease;
}

@keyframes awhFadeIn {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Loading State */
.awh-cat-loading {
    text-align: center;
    padding: 50px;
    color: #999;
}
.awh-cat-loading i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
    animation: awhSpin 1s linear infinite;
}

@keyframes awhSpin { 100% { transform: rotate(360deg); } }

/* Elementor Template Wrapper */
.awh-template-wrapper {
    width: 100%;
}