/* =========================================================
   COMPONENT — CATEGORY CAROUSEL (STICKY NAVIGATION)
   ========================================================= */

.category-carousel {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: block;
    justify-content: flex-start;

    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;

    overflow-x: auto;
    white-space: nowrap;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.category-carousel {
    cursor: grab;
}

.category-carousel.dragging {
    cursor: grabbing;
    user-select: none;
}


/* =========================================================
   CAROUSEL STRUCTURE
   ========================================================= */

.carousel-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    scroll-snap-type: x mandatory;

    margin: 0 auto;       /* Center when content fits */
    width: max-content;   /* Keep links grouped by content width */
}


/* =========================================================
   COMPONENT — CATEGORY ITEMS (LINK BUTTONS)
   ========================================================= */

.carousel-inner a {
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 120px;
    padding: 10px 15px;

    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    color: #333;
    background-color: #fff;

    border: 1px solid #ddd;
    border-radius: 4px;

    transition: background-color 0.25s ease, color 0.25s ease;

    /* Remove mobile tap highlight */
    -webkit-tap-highlight-color: transparent;

    /* Improve mobile tap handling */
    touch-action: manipulation;
}


/* =========================================================
   STATES
   ========================================================= */

/* Remove sticky mobile interaction states */
.carousel-inner a:focus,
.carousel-inner a:focus-visible,
.carousel-inner a:active {
    outline: none;
    background-color: inherit;
    color: inherit;
}

/* Single source for active state */
.carousel-inner a.active {
    background-color: #e0d8d8;
    color: #10100f;
}

.carousel-inner a.ai-menu-carousel-link {
    background-color: orange;
    color: #fff;
    font-weight: 700;
}

.carousel-inner a.ai-menu-carousel-link.active {
    background-color: orange;
    color: #fff;
    opacity: 0.45;
}


/* Hover styles only for pointer devices */
@media (hover: hover) {
    .carousel-inner a:hover {
        background-color: #e7e7e7;
        color: #333;
    }

    .carousel-inner a.ai-menu-carousel-link:hover {
        background-color: orange;
        color: #fff;
    }
}


/* =========================================================
   CUSTOM SCROLLBAR — WEBKIT
   ========================================================= */

.category-carousel::-webkit-scrollbar {
    height: 4px;
}

.category-carousel::-webkit-scrollbar-thumb {
    background-color: #b2b0b0;
    border-radius: 4px;
}

.category-carousel::-webkit-scrollbar-thumb:hover {
    background-color: #e1dede;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .category-carousel {
        justify-content: flex-start;
        padding-left: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-inner a {
        min-width: 80px;
    }
}