/* =========================================================
   Homepage category box RGB MOVING BORDER LINE
   Values are injected from Admin > General Settings.
   - Admin can enable/disable the effect.
   - Admin RGB colors are used by the moving light line.
   - Admin animation speed controls one complete border lap.
   ========================================================= */

/* Chrome/Edge/Safari/modern browsers: lets the conic-gradient angle animate
   smoothly without rotating the rectangular category card itself. */
@property --category-rgb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.category-slider.owl-carousel .owl-stage-outer {
    /* Extra breathing room so the animated glow is never clipped. */
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -10px;
    margin-bottom: -10px;
}

.category-rgb-on {
    --category-rgb-line-width: 2.5px;
}

.category-rgb-on .category-slider .cat_item {
    position: relative !important;
    z-index: 1;
    isolation: isolate;
    box-sizing: border-box;
    overflow: visible !important;

    /* Keep the original white card. The moving light is drawn by ::before. */
    border: 1px solid rgba(72, 23, 126, 0.20) !important;
    border-radius: 15px 0 15px 0 !important;
    background: #ffffff !important;
    background-image: none !important;

    /* Remove the old full-border/background animation so only the moving line runs. */
    animation: none !important;
    -webkit-animation: none !important;

    box-shadow: 0 2px 7px rgba(38, 13, 70, 0.10) !important;
    transition: transform 0.20s ease, box-shadow 0.20s ease !important;
}

/*
 * Moving RGB light line.
 * The middle is masked out, therefore only a thin border-shaped line remains.
 * A transparent section makes the light look like one glowing line travelling
 * continuously around all four sides/corners of the category box.
 */
.category-rgb-on .category-slider .cat_item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px 1px 16px 1px;
    padding: var(--category-rgb-line-width, 2.5px);
    pointer-events: none;
    z-index: 5;

    background: conic-gradient(
        from var(--category-rgb-angle),
        transparent 0deg,
        transparent 205deg,
        color-mix(in srgb, var(--category-rgb-color-1, #ff003c) 35%, transparent) 218deg,
        var(--category-rgb-color-1, #ff003c) 235deg,
        var(--category-rgb-color-2, #00ff6e) 270deg,
        var(--category-rgb-color-3, #00e1ff) 305deg,
        var(--category-rgb-color-4, #ff00cd) 338deg,
        color-mix(in srgb, var(--category-rgb-color-4, #ff00cd) 35%, transparent) 350deg,
        transparent 360deg
    );

    /* Cut out the card centre; keep only the border ring. */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;

    /* The glow belongs to the moving segment, so it travels with the line. */
    filter:
        drop-shadow(0 0 2px var(--category-rgb-color-3, #00e1ff))
        drop-shadow(0 0 4px var(--category-rgb-color-4, #ff00cd));

    animation: categoryRgbBorderLap var(--category-rgb-speed, 6s) linear infinite;
    will-change: --category-rgb-angle;
}


/* Soft animated glow/shadow behind the moving RGB line.
   It follows exactly the same lap as the border line, but stays subtle. */
.category-rgb-on .category-slider .cat_item::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 18px 3px 18px 3px;
    padding: 4px;
    pointer-events: none;
    z-index: 3;
    opacity: .24;

    background: conic-gradient(
        from var(--category-rgb-angle),
        transparent 0deg,
        transparent 202deg,
        color-mix(in srgb, var(--category-rgb-color-1, #ff003c) 28%, transparent) 218deg,
        var(--category-rgb-color-1, #ff003c) 240deg,
        var(--category-rgb-color-2, #00ff6e) 274deg,
        var(--category-rgb-color-3, #00e1ff) 308deg,
        var(--category-rgb-color-4, #ff00cd) 340deg,
        transparent 360deg
    );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;

    filter: blur(5px);
    animation: categoryRgbBorderLap var(--category-rgb-speed, 6s) linear infinite;
    will-change: --category-rgb-angle;
}

.category-rgb-on .category-slider .cat_item:hover,
.category-rgb-on .category-slider .cat_item:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 4px 11px rgba(38, 13, 70, 0.16) !important;
}

.category-rgb-on .category-slider .cat_item:hover::after,
.category-rgb-on .category-slider .cat_item:focus-within::after {
    opacity: .32;
    filter: blur(6px);
}

.category-rgb-on .category-slider .cat_item:hover::before,
.category-rgb-on .category-slider .cat_item:focus-within::before {
    filter:
        drop-shadow(0 0 3px var(--category-rgb-color-2, #00ff6e))
        drop-shadow(0 0 5px var(--category-rgb-color-3, #00e1ff))
        drop-shadow(0 0 7px var(--category-rgb-color-4, #ff00cd));
}

/* One complete 360-degree lap around the card border. */
@keyframes categoryRgbBorderLap {
    from { --category-rgb-angle: 0deg; }
    to   { --category-rgb-angle: 360deg; }
}

/* Fully disable both this effect and the project's older hard-coded RGB rules
   when Admin turns Category Box RGB Lighting OFF. */
.category-rgb-off .category-slider .cat_item,
.category-rgb-off .category-slider .cat_item:hover,
.category-rgb-off .category-slider .cat_item:focus-within {
    border: 1px solid #e8e8e8 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none;
}

.category-rgb-off .category-slider .cat_item::before,
.category-rgb-off .category-slider .cat_item::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 767px) {
    .category-rgb-on {
        --category-rgb-line-width: 2px;
    }

    .category-slider.owl-carousel .owl-stage-outer {
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: -8px;
        margin-bottom: -8px;
    }
}

/* Accessibility: users who explicitly request reduced motion still get the
   RGB border, but it stays still instead of continuously rotating. */
@media (prefers-reduced-motion: reduce) {
    .category-rgb-on .category-slider .cat_item::before,
    .category-rgb-on .category-slider .cat_item::after {
        animation: none !important;
        --category-rgb-angle: 75deg;
    }
}