/* LUMINAPICK CATEGORY OVERRIDE */

.category-scroll {
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:6px 4px 14px !important;
    margin:0 !important;
    scrollbar-width:none !important;
}

.category-scroll::-webkit-scrollbar {
    display:none !important;
}

.category-scroll .category-chip {
    all:unset !important;

    box-sizing:border-box !important;

    flex:0 0 auto !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:max-content !important;
    height:46px !important;

    padding:6px 15px 6px 7px !important;
    gap:8px !important;

    border:1px solid #eadfe3 !important;
    border-radius:999px !important;

    background:#ffffff !important;
    color:#403a3c !important;

    font-family:inherit !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1 !important;

    white-space:nowrap !important;
    text-decoration:none !important;

    cursor:pointer !important;

    box-shadow:0 4px 14px rgba(60,40,45,.06) !important;

    transition:all .2s ease !important;
}

.category-scroll .category-chip:hover {
    border-color:#efa7ba !important;
    transform:translateY(-2px) !important;
    box-shadow:0 8px 20px rgba(201,130,152,.14) !important;
}

.category-scroll .category-chip.active {
    background:linear-gradient(135deg,#efa7ba,#d7839d) !important;
    border-color:#d7839d !important;
    color:#ffffff !important;
    box-shadow:0 8px 20px rgba(217,135,160,.25) !important;
}

.category-scroll .category-icon {
    all:unset !important;

    box-sizing:border-box !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 33px !important;

    width:33px !important;
    height:33px !important;

    border-radius:50% !important;

    background:#fff0f5 !important;
    color:#d47794 !important;
}

.category-scroll .category-icon svg {
    display:block !important;

    width:17px !important;
    height:17px !important;

    color:inherit !important;
    stroke:currentColor !important;

    fill:none !important;

    stroke-width:2 !important;
}

.category-scroll .category-chip:nth-child(1) .category-icon {
    background:#fff0f5 !important;
    color:#d87594 !important;
}

.category-scroll .category-chip:nth-child(2) .category-icon {
    background:#eaf8f5 !important;
    color:#4fa397 !important;
}

.category-scroll .category-chip:nth-child(3) .category-icon {
    background:#fff3e5 !important;
    color:#dc9650 !important;
}

.category-scroll .category-chip:nth-child(4) .category-icon {
    background:#f1edff !important;
    color:#8872c8 !important;
}

.category-scroll .category-chip:nth-child(5) .category-icon {
    background:#fff7d9 !important;
    color:#d09e22 !important;
}

.category-scroll .category-chip:nth-child(6) .category-icon {
    background:#eaf3ff !important;
    color:#628ac5 !important;
}

.category-scroll .category-chip.active .category-icon {
    background:rgba(255,255,255,.25) !important;
    color:#ffffff !important;
}

@media(max-width:767px) {
    .category-scroll {
        gap:8px !important;
        padding:5px 2px 13px !important;
    }

    .category-scroll .category-chip {
        height:44px !important;
        padding:5px 13px 5px 6px !important;
        font-size:12px !important;
    }

    .category-scroll .category-icon {
        flex-basis:31px !important;
        width:31px !important;
        height:31px !important;
    }

    .category-scroll .category-icon svg {
        width:16px !important;
        height:16px !important;
    }
}

/* =========================================================
   CATEGORY BAR — DESKTOP HORIZONTAL SCROLL
   ========================================================= */

.category-scroll,
.category-tabs,
.categories,
.filter-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;

    scrollbar-width: none !important;
    -ms-overflow-style: none !important;

    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch;
}

.category-scroll::-webkit-scrollbar,
.category-tabs::-webkit-scrollbar,
.categories::-webkit-scrollbar,
.filter-tabs::-webkit-scrollbar {
    display: none !important;
}

.category-scroll:active,
.category-tabs:active,
.categories:active,
.filter-tabs:active {
    cursor: grabbing;
}

/* Jangan sampai tombol/category ikut mengecil */
.category-scroll > *,
.category-tabs > *,
.categories > *,
.filter-tabs > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Desktop tetap bisa digeser */
@media (min-width: 768px) {
    .category-scroll,
    .category-tabs,
    .categories,
    .filter-tabs {
        max-width: 100%;
        overflow-x: auto !important;
        padding-bottom: 4px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .category-scroll,
    .category-tabs,
    .categories,
    .filter-tabs {
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
}


/* =========================================================
   CATEGORY DESKTOP DRAG FIX
   ========================================================= */

@media (min-width: 768px) {

    /* Container category yang overflow */
    body .category-scroll,
    body .category-tabs,
    body .categories,
    body .filter-tabs,
    body .category-row {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;
        -ms-overflow-style: none !important;

        cursor: grab !important;

        user-select: none !important;

        -webkit-overflow-scrolling: touch !important;
    }

    body .category-scroll::-webkit-scrollbar,
    body .category-tabs::-webkit-scrollbar,
    body .categories::-webkit-scrollbar,
    body .filter-tabs::-webkit-scrollbar,
    body .category-row::-webkit-scrollbar {
        display: none !important;
    }

    body .category-scroll > *,
    body .category-tabs > *,
    body .categories > *,
    body .filter-tabs > *,
    body .category-row > * {
        flex-shrink: 0 !important;
    }

}


/* =========================================================
   LUMINAPICK CATEGORY — FLOATING PINK OUTLINE
   ========================================================= */

.category-scroll,
.category-tabs,
.categories,
.filter-tabs,
.category-row {
    padding-top: 6px !important;
    padding-bottom: 10px !important;
}

/* Semua category chip */
.category-scroll > *,
.category-tabs > *,
.categories > *,
.filter-tabs > *,
.category-row > * {
    position: relative !important;

    border: 1px solid #eadde2 !important;

    background: rgba(255,255,255,.96) !important;

    border-radius: 999px !important;

    box-shadow:
        0 4px 10px rgba(105,70,80,.07),
        0 1px 2px rgba(105,70,80,.04) !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}

/* Sedikit mengambang */
.category-scroll > *:hover,
.category-tabs > *:hover,
.categories > *:hover,
.filter-tabs > *:hover,
.category-row > *:hover {
    transform: translateY(-2px) !important;

    border-color: #f2a0ba !important;

    box-shadow:
        0 8px 18px rgba(225,110,145,.14),
        0 2px 5px rgba(105,70,80,.06) !important;
}

/* Active category */
.category-scroll > .active,
.category-tabs > .active,
.categories > .active,
.filter-tabs > .active,
.category-row > .active,

.category-scroll > [aria-selected="true"],
.category-tabs > [aria-selected="true"],
.categories > [aria-selected="true"],
.filter-tabs > [aria-selected="true"],
.category-row > [aria-selected="true"] {
    border: 1.5px solid #ed86a8 !important;

    background:
        linear-gradient(
            145deg,
            #fff5f8,
            #ffe9f0
        ) !important;

    color: #c95578 !important;

    box-shadow:
        0 7px 18px rgba(232,121,160,.18),
        0 0 0 3px rgba(237,134,168,.07) !important;
}

/* Kalau active menggunakan class selected */
.category-scroll > .selected,
.category-tabs > .selected,
.categories > .selected,
.filter-tabs > .selected,
.category-row > .selected {
    border-color: #ed86a8 !important;

    background: #fff0f5 !important;

    color: #c95578 !important;

    box-shadow:
        0 7px 18px rgba(232,121,160,.18),
        0 0 0 3px rgba(237,134,168,.07) !important;
}

/* Efek ketika disentuh */
.category-scroll > *:active,
.category-tabs > *:active,
.categories > *:active,
.filter-tabs > *:active,
.category-row > *:active {
    transform: translateY(0) scale(.97) !important;

    box-shadow:
        0 3px 8px rgba(105,70,80,.08) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .category-scroll,
    .category-tabs,
    .categories,
    .filter-tabs,
    .category-row {
        padding-top: 7px !important;
        padding-bottom: 11px !important;
    }

    .category-scroll > *,
    .category-tabs > *,
    .categories > *,
    .filter-tabs > *,
    .category-row > * {
        box-shadow:
            0 4px 10px rgba(105,70,80,.08) !important;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .category-scroll,
    .category-tabs,
    .categories,
    .filter-tabs,
    .category-row {
        padding-top: 7px !important;
        padding-bottom: 12px !important;
    }

}