/* ==========================================================
   GamerCore / CyberTech — Category Carousel FINAL
   Load AFTER css_code.css and css_design.css.
   ========================================================== */

.categories-carousel-wrapper {
    position: relative !important;
    overflow: visible !important;
    padding-inline: 56px !important;
}

#categoriesCarousel.categories-carousel {
    display: flex !important;
    align-items: stretch !important;
    gap: 16px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 10px 5px 16px !important;

    scroll-behavior: smooth !important;

    /* Critical: do not let old snap rules pull the carousel back. */
    scroll-snap-type: none !important;
    scroll-padding: 0 !important;

    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin !important;
    scrollbar-color: #3b82f6 rgba(148, 163, 184, .18) !important;
}

#categoriesCarousel .category-carousel-item {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;

    /*
     * The card itself stays physically fixed.
     * This removes the "right-left wobble" illusion.
     */
    transform: none !important;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        opacity .22s ease !important;
}

#categoriesCarousel .category-carousel-item:hover,
#categoriesCarousel .category-carousel-item:focus,
#categoriesCarousel .category-carousel-item:active {
    transform: none !important;
}

/* Pause the old 360 hover animation only while the track is moving. */
#categoriesCarousel.is-carousel-scrolling .category-flip-inner,
#categoriesCarousel.is-carousel-scrolling .category-image img {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Smooth visible scrollbar */
#categoriesCarousel::-webkit-scrollbar {
    display: block !important;
    height: 7px !important;
}

#categoriesCarousel::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, .16) !important;
    border-radius: 999px !important;
    margin-inline: 10px !important;
}

#categoriesCarousel::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #60a5fa, #2563eb) !important;
    border-radius: 999px !important;
}

#categoriesCarousel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
}

/* ==========================================================
   Arrows: absolutely stable — no translate/scale animation
   ========================================================== */

.categories-carousel-wrapper > .carousel-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 80 !important;

    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;

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

    transform: translateY(-58%) !important;

    border: 1px solid rgba(37, 99, 235, .28) !important;
    border-radius: 14px !important;

    background: rgba(255,255,255,.97) !important;
    color: #1d4ed8 !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 22px rgba(37,99,235,.16),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

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

/* Prevent old pseudo-element chevrons from doubling the SVG. */
.categories-carousel-wrapper > .carousel-arrow::before {
    content: none !important;
    display: none !important;
}

.categories-carousel-wrapper > .carousel-arrow-left {
    left: 6px !important;
}

.categories-carousel-wrapper > .carousel-arrow-right {
    right: 6px !important;
}

.categories-carousel-wrapper > .carousel-arrow .ct-carousel-chevron {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* EXACT SAME transform in every state = no arrow wobble */
.categories-carousel-wrapper > .carousel-arrow:hover,
.categories-carousel-wrapper > .carousel-arrow:active,
.categories-carousel-wrapper > .carousel-arrow:focus,
.categories-carousel-wrapper > .carousel-arrow.is-arrow-active {
    transform: translateY(-58%) !important;
}

.categories-carousel-wrapper > .carousel-arrow:not(:disabled):hover {
    background: #fff !important;
    border-color: rgba(37,99,235,.52) !important;
    box-shadow:
        0 10px 26px rgba(37,99,235,.22),
        inset 0 1px 0 #fff !important;
}

.categories-carousel-wrapper > .carousel-arrow:disabled,
.categories-carousel-wrapper > .carousel-arrow[aria-disabled="true"] {
    opacity: .28 !important;
    cursor: default !important;
    box-shadow: none !important;
}

[data-theme="dark"] .categories-carousel-wrapper > .carousel-arrow {
    background: rgba(30,41,59,.97) !important;
    color: #93c5fd !important;
    border-color: rgba(96,165,250,.34) !important;
}

@media (max-width: 992px) {
    .categories-carousel-wrapper {
        padding-inline: 44px !important;
    }

    .categories-carousel-wrapper > .carousel-arrow {
        display: flex !important;
        width: 36px !important;
        height: 42px !important;
        border-radius: 11px !important;
    }
}

@media (max-width: 600px) {
    .categories-carousel-wrapper {
        padding-inline: 35px !important;
    }

    #categoriesCarousel.categories-carousel {
        gap: 9px !important;
        padding: 8px 3px 13px !important;
    }

    #categoriesCarousel .category-carousel-item {
        flex: 0 0 calc((100% - 9px) / 2) !important;
    }

    .categories-carousel-wrapper > .carousel-arrow {
        display: flex !important;
        width: 29px !important;
        height: 38px !important;
        border-radius: 10px !important;
    }

    .categories-carousel-wrapper > .carousel-arrow .ct-carousel-chevron {
        width: 17px !important;
        height: 17px !important;
    }

    #categoriesCarousel::-webkit-scrollbar {
        height: 5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #categoriesCarousel.categories-carousel {
        scroll-behavior: auto !important;
    }
}