/**
 * Lukuro Product Carousel - Splide.js Styles
 * Minimal, performant styles for Splide.js based carousel
 * @version 3.0.0 (Splide.js Migration)
 */

/* ==========================================================================
   Component Base
   ========================================================================== */

.product-card__media-wrapper {
    aspect-ratio: 4/5;
    display: block;
    position: relative; /* establish containing block for absolute fill */
}

/* Base carousel wrapper */
.lukuro-splide-carousel-wrapper {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 20; /* Must be higher than Bricks focus-parent pseudo-element (usually z-index 10) */
}

/* Fill media wrapper reserved box when used inside product card */
.product-card__media-wrapper > .lukuro-splide-carousel-wrapper {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
}

/* Splide carousel container */
.lukuro-splide-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Splide track container - let Splide handle positioning */
.lukuro-splide-carousel .splide__track {
    position: relative;
    width: 100%;
    height: 100%;
    /* Remove overflow: hidden - let Splide handle this */
}

/* Splide list container - let Splide handle positioning */
.lukuro-splide-carousel .splide__list {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Remove positioning overrides - let Splide handle this */
}

/* Individual slides */
.lukuro-splide-carousel .splide__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Images within slides */
.lukuro-splide-carousel .splide__slide img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: none;
    max-height: none;
    border: none;
    outline: none;
    user-select: none;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Proper lazy loading states (re-enabled fade-in) */
.lukuro-splide-carousel .splide__slide img[data-splide-lazy] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lukuro-splide-carousel .splide__slide img.is-loaded {
    opacity: 1;
}

/* ==========================================================================
   Navigation Arrows — scoped to carousel, ::before for animated background
   ========================================================================== */

.lukuro-splide-carousel .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    padding: 0;
    transition: opacity 0.3s ease;
}

/* Invisible hit area — expands click surface by 30px, constrained inside carousel */
.lukuro-splide-carousel .splide__arrow::after {
    content: '';
    position: absolute;
    top: -30px;
    bottom: -30px;
}

.lukuro-splide-carousel .splide__arrow--prev::after {
    left: 0;
    right: -30px;
}

.lukuro-splide-carousel .splide__arrow--next::after {
    left: -30px;
    right: 0;
}

/* Hide arrows entirely when carousel has only 1 slide */
.lukuro-splide-carousel.lukuro-single-slide .splide__arrows {
    display: none;
}

/* Inactive state — end of track or single slide */
.lukuro-splide-carousel .splide__arrow:disabled,
.lukuro-splide-carousel .splide__arrow.is-disabled {
    opacity: 0.5;
    cursor: default;
}

/* Background pseudo-element — desktop default: hidden, slides in on card hover */
.lukuro-splide-carousel .splide__arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.3s ease,
                background-color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.lukuro-splide-carousel .splide__arrow--prev {
    left: 0;
}

.lukuro-splide-carousel .splide__arrow--next {
    right: 0px;
}

.lukuro-splide-carousel .splide__arrow--prev::before {
    border-radius: 0 50% 50% 0;
    border-left: none;
    transform: translateX(-200%);
}

.lukuro-splide-carousel .splide__arrow--next::before {
    border-radius: 50% 0 0 50%;
    border-right: none;
    transform: translateX(200%);
}

/* Touch devices / small viewports — background permanently visible, no slide-in */
@media (pointer: coarse), (max-width: 767px) {
    .lukuro-splide-carousel .splide__arrow::before {
        background: rgba(255, 255, 255, 0.45);
        border-color: rgba(255, 255, 255, 0.55);
        opacity: 1;
        transition: none;
    }

    .lukuro-splide-carousel .splide__arrow--prev::before,
    .lukuro-splide-carousel .splide__arrow--next::before {
        transform: none;
    }
}

/* Icon — desktop default: dim, brightens on card hover */
.lukuro-splide-carousel .splide__arrow svg,
.lukuro-splide-carousel .splide__arrow i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: #222;
    fill: currentColor;
    opacity: 0.7;
    transition: opacity 0.25s ease 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.product-card:hover .lukuro-splide-carousel .splide__arrow::before {
    transform: translateX(0);
    opacity: 1;
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.55);
}

.product-card:hover .lukuro-splide-carousel .splide__arrow svg,
.product-card:hover .lukuro-splide-carousel .splide__arrow i {
    opacity: 0.9;
}

/* Touch devices / small viewports — icon always at full brightness */
@media (pointer: coarse), (max-width: 767px) {
    .lukuro-splide-carousel .splide__arrow svg,
    .lukuro-splide-carousel .splide__arrow i {
        opacity: 0.9;
        transition: none;
    }
}

/* Arrow hover — enhanced */
.lukuro-splide-carousel .splide__arrow:hover::before {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateX(0) scale(1.08);
}

.lukuro-splide-carousel .splide__arrow:hover svg,
.lukuro-splide-carousel .splide__arrow:hover i {
    opacity: 1;
    transition-delay: 0s;
}

/* Focus visible */
.lukuro-splide-carousel .splide__arrow:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .lukuro-splide-carousel .splide__arrow {
        width: 32px;
        height: 32px;
    }

    .lukuro-splide-carousel .splide__arrow svg,
    .lukuro-splide-carousel .splide__arrow i {
        width: 14px;
        height: 14px;
        font-size: 14px;
    }
}

/* Touch/drag cursor */
.lukuro-splide-carousel .splide__track {
    cursor: grab;
}

.lukuro-splide-carousel .splide__track:active {
    cursor: grabbing;
}

/* Performance optimizations */
.lukuro-splide-carousel * {
    will-change: auto;
}

.lukuro-splide-carousel .splide__track {
    will-change: transform;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .lukuro-splide-carousel {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .lukuro-splide-carousel .splide__slide {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .lukuro-splide-carousel .splide__slide img {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ==========================================================================
   Un-initialized fallback (Bricks editor / no JS)
   Splide adds .is-initialized on mount — until then, prevent slide stacking.
   Splide CSS sets .splide { visibility: hidden } by default — override here
   so the first image is visible in the builder and before JS loads.
   ========================================================================== */
.lukuro-splide-carousel-wrapper .splide:not(.is-initialized) {
    visibility: visible !important;
}

.lukuro-splide-carousel:not(.is-initialized) .splide__list {
    display: flex;
    overflow: hidden;
}

.lukuro-splide-carousel:not(.is-initialized) .splide__slide {
    min-width: 100%;
}

.lukuro-splide-carousel:not(.is-initialized) .splide__slide ~ .splide__slide {
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

/* Self-contained aspect ratio when not inside a sized parent */
.lukuro-splide-carousel-wrapper {
    aspect-ratio: 4/5;
}

/* Cancel self-ratio when parent already provides one */
.product-card__media-wrapper > .lukuro-splide-carousel-wrapper {
    aspect-ratio: unset;
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .lukuro-splide-carousel .splide__arrow::before {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .lukuro-splide-carousel .splide__slide img[data-splide-lazy] {
        transition: none;
    }

    .lukuro-splide-carousel .splide__arrow,
    .lukuro-splide-carousel .splide__arrow::before,
    .lukuro-splide-carousel .splide__arrow svg {
        transition: none;
    }
}

/* Loading state */
.lukuro-splide-carousel-wrapper[data-loading="true"] {
    background: #f5f5f5;
}

.lukuro-splide-carousel-wrapper[data-loading="true"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #e0e0e0;
    border-top-color: #666;
    border-radius: 50%;
    animation: lukuro-carousel-spin 1s linear infinite;
    z-index: 5;
}

@keyframes lukuro-carousel-spin {
    to { transform: rotate(360deg); }
}