/* =============================
   CONTAINER
============================= */
.ca-ml-container {
    max-width: 1200px;
    padding: 0;
}

/* =============================
   WRAPPER (FIXED HEIGHT + SCROLL CONTROL)
============================= */
.ca-ml-wrapper {
    display: flex;
    height: 500px; /* ✅ MAIN FIX */
    overflow: hidden;
    position: relative;
}

/* =============================
   LEVEL PANELS
============================= */
.ca-ml-level {
    width: 280px;
    height: 100%; /* ✅ REQUIRED */
    border-right: 1px solid #f0f0f0;
    background: #fafafa;
    display: none;
    flex-shrink: 0;
    overflow-y: auto; /* ✅ SCROLL ENABLE */
    scroll-behavior: smooth;
    position: relative;
    transition: all 0.3s ease;
}

/* First level always visible */
.ca-ml-level[data-level="1"] {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

/* Active levels */
.ca-ml-level.active {
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* =============================
   ITEMS
============================= */
.ca-ml-item {
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

/* LEFT BORDER ANIMATION */
.ca-ml-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #ff0068;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.ca-ml-item:hover::before,
.ca-ml-item.active::before {
    transform: translateX(0);
}

/* =============================
   TITLE
============================= */
.ca-ml-title {
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 600;
}

/* LINK */
.ca-ml-title a {
    padding: 0 !important;
    font-weight: 400 !important;
    text-decoration: none;
    color: inherit;
    font-family: inherit !important;
}

/* HOVER */
.ca-ml-title:hover {
    background: #f8f9fb;
    color: #1f2937;
}

/* ACTIVE */
.ca-ml-item.active > .ca-ml-title {
    background: #fff5f9;
    color: #111827;
    font-weight: 600;
    box-shadow: inset 4px 0 0 #ff0068;
}

/* =============================
   ARROW - classic compact style
============================= */
.ca-ml-arrow {
    font-size: 18px;
    line-height: 1;
    color: #aaa;
    transition: color .2s ease, transform .2s ease;
    margin-left: 10px;
    flex: 0 0 auto;
}

.ca-ml-item:hover > .ca-ml-title .ca-ml-arrow,
.ca-ml-item.active > .ca-ml-title .ca-ml-arrow {
    color: #ff0068;
    transform: translateX(3px);
}

/* The arrow is rendered only when children exist; keep this as a safe guard. */
.ca-ml-item[data-has-children="0"] .ca-ml-arrow {
    display: none;
}

.ca-ml-link:focus-visible {
    outline: 2px solid #ff0068;
    outline-offset: 3px;
    border-radius: 3px;
}

.ca-ml-item.active > .ca-ml-title .ca-ml-link {
    font-weight: 600 !important;
}

/* =============================
   SCROLLBAR
============================= */
.ca-ml-level::-webkit-scrollbar {
    width: 6px;
}

.ca-ml-level::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.ca-ml-level::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.ca-ml-level::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* =============================
   HOVER EFFECT LINE
============================= */
.ca-ml-title::after {
    content: none;
}

/* =============================
   LEVEL VISUAL INDICATOR
============================= */
.ca-ml-level::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #ff0068;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ca-ml-level.active::before {
    opacity: 1;
}

/* =============================
   ANIMATION
============================= */
.ca-ml-level {
    animation: fadeIn 0.25s ease;
}

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

/* =============================
   TYPOGRAPHY LEVELS
============================= */
.ca-ml-level[data-level="1"] .ca-ml-title {
    font-size: 16px;
}

.ca-ml-level[data-level="2"] .ca-ml-title {
    font-size: 15px;
}

.ca-ml-level[data-level="3"] .ca-ml-title {
    font-size: 14px;
}

/* =============================
   MOBILE
============================= */
@media (max-width: 768px) {
    .ca-ml-wrapper {
        flex-direction: column;
        height: auto;
    }

    .ca-ml-level {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #eee;
        overflow-y: visible;
    }

    .ca-ml-title {
        padding: 16px 20px;
    }
}

/* =============================
   CUSTOM SCROLLBAR (PRO LEVEL)
============================= */

/* Chrome, Edge, Safari */
.ca-ml-level::-webkit-scrollbar {
    width: 4px; 
}

.ca-ml-level::-webkit-scrollbar-track {
    background: transparent;
}

.ca-ml-level::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 88, 0.6);
    border-radius: 10px;
    transition: background 0.3s ease;
}

/* Hover effect */
.ca-ml-level::-webkit-scrollbar-thumb:hover {
    background: #ff0058;
}

.ca-ml-level {
    scrollbar-width: thin;
    scrollbar-color: #ff0058 transparent;
}
/* =============================
   RESPONSIVE MULTI-COLUMN FIX
   Keeps deeper menu levels inside the viewport and lets
   4th/5th level columns scroll horizontally instead of
   overflowing the page.
============================= */
.ca-ml-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.ca-ml-container *,
.ca-ml-container *::before,
.ca-ml-container *::after {
    box-sizing: border-box;
}

.ca-ml-wrapper {
    width: 100%;
    max-width: 100%;
    /* height: min(500px, calc(100vh - 140px));
    min-height: 320px; */
    /* overflow-x: auto;
    overflow-y: hidden; */
    scrollbar-width: thin;
    scrollbar-color: #ff0058 transparent;
    overscroll-behavior-inline: contain;
}

.ca-ml-wrapper {
    display: flex;
    height: 550px;
    min-height: 550px;
    overflow: hidden;
    position: relative;
}

.ca-ml-level {
    flex: 0 0 clamp(210px, 23vw, 280px);
    width: clamp(210px, 23vw, 280px);
    max-width: clamp(210px, 23vw, 280px);
    min-width: 210px;
}

.ca-ml-title {
    min-height: 42px;
    gap: 10px;
}

.ca-ml-link {
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.ca-ml-arrow {
    flex: 0 0 auto;
}

.ca-ml-wrapper::-webkit-scrollbar {
    height: 6px;
}

.ca-ml-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.ca-ml-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 88, 0.65);
    border-radius: 999px;
}

.ca-ml-wrapper::-webkit-scrollbar-thumb:hover {
    background: #ff0058;
}

@media (min-width: 769px) and (max-width: 1180px) {
    .ca-ml-level {
        flex-basis: 235px;
        width: 235px;
        max-width: 235px;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .ca-ml-level {
        flex-basis: 220px;
        width: 220px;
        max-width: 220px;
    }
}

@media (max-width: 768px) {
    .ca-ml-container {
        overflow: visible;
    }

    .ca-ml-wrapper {
        min-height: 0;
        height: auto;
        overflow: visible;
    }

    .ca-ml-level {
        flex-basis: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* ==========================================================
   DESKTOP SCROLL DISCOVERY
   Makes it obvious when a menu column contains more items.
   The controls sit outside the native scroll area, so normal
   wheel/trackpad scrolling keeps its full native speed.
========================================================== */
@media (min-width: 769px) {
    .ca-ml-level-shell {
        flex: 0 0 clamp(210px, 23vw, 280px);
        width: clamp(210px, 23vw, 280px);
        max-width: clamp(210px, 23vw, 280px);
        min-width: 210px;
        height: 100%;
        position: relative;
        display: none;
        overflow: hidden;
        background: #fff;
        border-right: 1px solid #f0f0f0;
    }

    .ca-ml-level-shell[data-level-shell="1"],
    .ca-ml-level-shell.active {
        display: block;
    }

    .ca-ml-level-shell > .ca-ml-level {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-right: 0;
    }

    .ca-ml-level-shell[data-level-shell="1"] > .ca-ml-level {
        background: #f8f9fa;
    }

    .ca-ml-level-shell.active > .ca-ml-level {
        background: #fff;
    }

    /* Soft edge fades reinforce that content continues. */
    .ca-ml-level-shell::before,
    .ca-ml-level-shell::after {
        content: "";
        position: absolute;
        left: 0;
        right: 8px;
        height: 54px;
        z-index: 7;
        pointer-events: none;
        opacity: 0;
        transition: opacity .16s ease;
    }

    .ca-ml-level-shell::before {
        top: 0;
        background: linear-gradient(to bottom, rgba(255,255,255,.98) 0%, rgba(255,255,255,.78) 46%, rgba(255,255,255,0) 100%);
    }

    .ca-ml-level-shell::after {
        bottom: 0;
        background: linear-gradient(to top, rgba(255,255,255,.98) 0%, rgba(255,255,255,.82) 46%, rgba(255,255,255,0) 100%);
    }

    .ca-ml-level-shell.can-scroll-up::before,
    .ca-ml-level-shell.can-scroll-down::after {
        opacity: 1;
    }

    .ca-ml-scroll-indicator {
        position: absolute;
        left: 50%;
        z-index: 9;
        min-width: 106px;
        height: 31px;
        padding: 0 11px;
        border: 1px solid rgba(255, 0, 104, .2);
        border-radius: 999px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 4px 14px rgba(17, 24, 39, .12);
        color: #e90058;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font: inherit;
        font-size: 11px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: .01em;
        cursor: pointer;
        transform: translateX(-50%);
        transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .ca-ml-scroll-indicator[hidden] {
        display: none !important;
    }

    .ca-ml-scroll-up {
        top: 8px;
    }

    .ca-ml-scroll-down {
        bottom: 8px;
    }

    .ca-ml-scroll-indicator:hover,
    .ca-ml-scroll-indicator:focus-visible {
        background: #ff0068;
        color: #fff;
        box-shadow: 0 6px 18px rgba(255, 0, 104, .24);
        outline: none;
    }

    .ca-ml-scroll-up:hover,
    .ca-ml-scroll-up:focus-visible {
        transform: translateX(-50%) translateY(-1px);
    }

    .ca-ml-scroll-down:hover,
    .ca-ml-scroll-down:focus-visible {
        transform: translateX(-50%) translateY(1px);
    }

    .ca-ml-scroll-icon {
        width: 13px;
        height: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 13px;
    }

    .ca-ml-scroll-icon svg {
        width: 13px;
        height: 13px;
        display: block;
    }

    /* Make the native scrollbar visible enough to reinforce scrollability. */
    .ca-ml-level::-webkit-scrollbar {
        width: 7px;
    }

    .ca-ml-level::-webkit-scrollbar-track {
        background: #f7f7f8;
    }

    .ca-ml-level::-webkit-scrollbar-thumb {
        background: #ff0068;
        border-radius: 999px;
        border: 2px solid #f7f7f8;
    }

    .ca-ml-level {
        scrollbar-width: thin;
        scrollbar-color: #ff0068 #f7f7f8;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .ca-ml-level-shell {
        flex-basis: 235px;
        width: 235px;
        max-width: 235px;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .ca-ml-level-shell {
        flex-basis: 220px;
        width: 220px;
        max-width: 220px;
    }
}

@media (max-width: 768px) {
    .ca-ml-level-shell {
        display: contents;
    }

    .ca-ml-scroll-indicator {
        display: none !important;
    }
}