/* ======================================================================
   Daman MegaMenu – AliExpress-style two-level mega menu
   ====================================================================== */

/* ---- Favored Category Nav Item ---- */
.daman-mm-favored > .nav-link {
    font-weight: 700 !important;
}

/* ---- Container width fix ---- */
.megamenu-dropdown-container {
    width: 100%;
}

/* ---- A CLOSED dropdown must not lengthen the page ----
   The server renders every category dropdown up front, and a closed one is hidden with
   `visibility: hidden; opacity: 0` — but it keeps `display: block`, so it is still LAID OUT.
   Absolutely positioned boxes contribute to their scroll container's overflow even when
   invisible, and the biggest dropdown here is 419 items ≈ 14,930px tall. Every page on the
   site therefore scrolled to ~15,000px regardless of its content: the vendor storefront is
   2,400px of shop followed by 12,600px of nothing. Clamping the closed state costs nothing
   (it is invisible anyway) and the menu JS only ever measures it after adding .show. */
.megamenu-dropdown-container .dropdown-menu:not(.show) {
    max-height: 0;
    overflow: hidden;
}

/* ---- Full-width override for enhanced dropdowns ---- */
.megamenu-dropdown-container .dropdown-menu.megamenu-dropdown {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

/* ==================================================
   AliExpress-style Panel Layout
   ================================================== */

.ali-mm-panel {
    display: flex;
    flex-direction: row;
    min-height: 420px;
    max-height: 70vh;
    background: #fff;
}

/* ---- L1 Sidebar ---- */
.ali-mm-sidebar {
    flex: 0 0 260px;
    width: 260px;
    background: #f5f5f5;
    border-inline-end: 1px solid #e5e5e5;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0;
}

/* L1 category item */
.ali-mm-l1-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.ali-mm-l1-item:hover {
    background-color: #fff;
    color: #111;
}

/* Active L1 item — white background, bold, with accent border */
.ali-mm-l1-item.active {
    background-color: #fff;
    color: #e4393c;
    font-weight: 600;
}

/* Active indicator bar on the inline-start side */
.ali-mm-l1-item.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: #e4393c;
    border-radius: 0 2px 2px 0;
}

[dir="rtl"] .ali-mm-l1-item.active::before {
    border-radius: 2px 0 0 2px;
}

/* L1 category image */
.ali-mm-l1-img {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}

/* L1 placeholder icon (when no image) */
.ali-mm-l1-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: #ddd;
    border-radius: 4px;
}

/* L1 name */
.ali-mm-l1-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* L1 arrow */
.ali-mm-l1-arrow {
    flex: 0 0 auto;
    font-size: 16px;
    color: #999;
    transition: color 0.15s ease;
}

.ali-mm-l1-item.active .ali-mm-l1-arrow {
    color: #e4393c;
}

/* ---- L2 Content Panel ---- */
.ali-mm-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 24px;
    background: #fff;
}

/* L2 grid — multi-column flow */
.ali-mm-l2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 24px;
    align-content: start;
}

/* "View all" link for the L1 parent */
.ali-mm-l1-viewall {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #e4393c;
    text-decoration: none;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.ali-mm-l1-viewall:hover {
    color: #c7202d;
    text-decoration: underline;
}

/* L2 group (one subcategory with its L3 children) */
.ali-mm-l2-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 16px;
    break-inside: avoid;
}

/* L2 category header — bold, clickable */
.ali-mm-l2-header {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    padding: 4px 0;
    margin-bottom: 2px;
    line-height: 1.4;
}

.ali-mm-l2-header:hover {
    color: #e4393c;
    text-decoration: none;
}

/* L3 link — lighter, smaller */
.ali-mm-l3-link {
    display: block;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    padding: 2px 0;
    line-height: 1.5;
    transition: color 0.1s ease;
}

.ali-mm-l3-link:hover {
    color: #e4393c;
    text-decoration: none;
}

/* "View all" when no children */
.ali-mm-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    padding: 16px 0;
}

.ali-mm-view-all:hover {
    color: #e4393c;
}

/* ==================================================
   Featured Categories Strip (AliExpress-style image row)
   ================================================== */

.ali-mm-featured {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.ali-mm-featured-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.ali-mm-featured-card:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.ali-mm-featured-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 4px;
    border: 1px solid #eee;
    transition: border-color 0.15s ease;
}

.ali-mm-featured-card:hover .ali-mm-featured-img {
    border-color: #e4393c;
}

.ali-mm-featured-name {
    font-size: 12px;
    color: #333;
    text-align: center;
    line-height: 1.3;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ali-mm-featured-card:hover .ali-mm-featured-name {
    color: #e4393c;
}

/* ---- Scrollbar styling ---- */
.ali-mm-sidebar::-webkit-scrollbar,
.ali-mm-content::-webkit-scrollbar {
    width: 5px;
}

.ali-mm-sidebar::-webkit-scrollbar-track,
.ali-mm-content::-webkit-scrollbar-track {
    background: transparent;
}

.ali-mm-sidebar::-webkit-scrollbar-thumb,
.ali-mm-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.ali-mm-sidebar::-webkit-scrollbar-thumb:hover,
.ali-mm-content::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* ---- Responsive: smaller screens ---- */
@media (max-width: 991px) {
    .ali-mm-sidebar {
        flex: 0 0 200px;
        width: 200px;
    }

    .ali-mm-l2-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}