/**
 * TPF Slider Pro - Frontend Styles
 * 3D Effects and Pro Features
 */

/* ==========================================================================
   3D Coverflow Effect - Proper Implementation
   ========================================================================== */

/* Container setup */
.tpf-slider[data-transition="coverflow"] {
    perspective: 1000px;
    overflow: visible !important;
}

.tpf-slider[data-transition="coverflow"] .tpf-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /* Override carousel flex layout */
    display: block !important;
}

/* All coverflow slides - absolutely positioned, stacked in center */
/* All slides same width - use only transform for size changes (GPU only, no layout) */
.tpf-slider[data-transition="coverflow"] .tpf-slide {
    position: absolute !important;
    top: 0;
    left: 50%;
    width: 45%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.6s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    border-radius: var(--border-radius, 0);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    /* Default hidden state - centered */
    transform: translateX(-50%) scale(0.5);
}

/* Ensure slide image also respects border radius */
.tpf-slider[data-transition="coverflow"] .tpf-slide .tpf-slide-image {
    border-radius: var(--border-radius, 0);
}

/* Slides waiting on the left (will enter from left) */
.tpf-slider[data-transition="coverflow"] .tpf-slide.coverflow-queue-left {
    transform: translateX(-170%) scale(0.65, 1) rotateY(40deg);
    opacity: 0;
    visibility: visible;
}

/* Slides waiting on the right (will enter from right) */
.tpf-slider[data-transition="coverflow"] .tpf-slide.coverflow-queue-right {
    transform: translateX(70%) scale(0.65, 1) rotateY(-40deg);
    opacity: 0;
    visibility: visible;
}

/* Active/center slide */
.tpf-slider[data-transition="coverflow"] .tpf-slide.coverflow-center {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

/* One position to the left - only immediate neighbor shown */
.tpf-slider[data-transition="coverflow"] .tpf-slide.coverflow-left-1 {
    transform: translateX(-125%) scale(0.7, 1) rotateY(35deg);
    opacity: 0.75;
    visibility: visible;
    z-index: 5;
}

/* One position to the right - only immediate neighbor shown */
.tpf-slider[data-transition="coverflow"] .tpf-slide.coverflow-right-1 {
    transform: translateX(25%) scale(0.7, 1) rotateY(-35deg);
    opacity: 0.75;
    visibility: visible;
    z-index: 5;
}

/* Text overlay on coverflow - hidden until info clicked */
.tpf-slider[data-transition="coverflow"] .tpf-slide .tpf-slide-content {
    transform: translateY(0) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s; /* visibility changes after fade completes */
}

/* Show text overlay when info is active */
.tpf-slider[data-transition="coverflow"] .tpf-slide.tpf-info-active .tpf-slide-content {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s; /* visibility changes immediately */
}

/* Show enlarge and info buttons on center slide */
.tpf-slider[data-transition="coverflow"] .tpf-slide.coverflow-center .tpf-enlarge-btn,
.tpf-slider[data-transition="coverflow"] .tpf-slide.coverflow-center .tpf-info-btn {
    opacity: 1;
}

/* Hide buttons on non-center slides */
.tpf-slider[data-transition="coverflow"] .tpf-slide:not(.coverflow-center) .tpf-enlarge-btn,
.tpf-slider[data-transition="coverflow"] .tpf-slide:not(.coverflow-center) .tpf-info-btn {
    opacity: 0 !important;
    pointer-events: none;
}

/* Ensure arrows are visible above slides */
.tpf-slider[data-transition="coverflow"] .tpf-arrow {
    z-index: 20;
}

/* Position dots below the coverflow */
.tpf-slider[data-transition="coverflow"] .tpf-dots {
    z-index: 20;
}

/* Click on side slides to navigate */
.tpf-slider[data-transition="coverflow"] .tpf-slide:not(.coverflow-center) {
    cursor: pointer;
}

/* ==========================================================================
   3D Flip Effect
   ========================================================================== */

.tpf-slider[data-transition="flip"] {
    perspective: 1200px;
}

.tpf-slider[data-transition="flip"] .tpf-slider-wrapper {
    transform-style: preserve-3d;
}

.tpf-slider[data-transition="flip"] .tpf-slide {
    backface-visibility: hidden;
    transform: rotateY(180deg);
    opacity: 0;
}

.tpf-slider[data-transition="flip"] .tpf-slide.active {
    transform: rotateY(0deg);
    opacity: 1;
}

.tpf-slider[data-transition="flip"] .tpf-slide.prev {
    transform: rotateY(-180deg);
}

/* ==========================================================================
   3D Cube Effect
   ========================================================================== */

.tpf-slider[data-transition="cube"] {
    perspective: 1200px;
    overflow: visible;
}

.tpf-slider[data-transition="cube"] .tpf-slider-wrapper {
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.tpf-slider[data-transition="cube"] .tpf-slide {
    backface-visibility: hidden;
    transform: rotateY(90deg) translateZ(var(--slider-height, 250px));
    opacity: 0;
}

.tpf-slider[data-transition="cube"] .tpf-slide.active {
    transform: rotateY(0deg) translateZ(0);
    opacity: 1;
}

.tpf-slider[data-transition="cube"] .tpf-slide.prev {
    transform: rotateY(-90deg) translateZ(var(--slider-height, 250px));
}

/* ==========================================================================
   Pro Badge
   ========================================================================== */

.tpf-pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f0b849, #e09b2d);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    margin-left: 8px;
}

/* ==========================================================================
   Mobile Responsive - 3D effects become standard slide transition
   On mobile, Pro JS changes data-transition to "slide", so base slider
   CSS handles everything. These rules are just for flip/cube.
   ========================================================================== */

@media (max-width: 768px) {
    /* Flip and Cube: disable 3D, use standard slide transition */
    .tpf-slider[data-transition="flip"],
    .tpf-slider[data-transition="cube"] {
        perspective: none !important;
        overflow: hidden !important;
    }

    .tpf-slider[data-transition="flip"] .tpf-slide,
    .tpf-slider[data-transition="cube"] .tpf-slide {
        transform: translateX(100%) !important;
        opacity: 1 !important;
        visibility: hidden !important;
    }

    .tpf-slider[data-transition="flip"] .tpf-slide.active,
    .tpf-slider[data-transition="cube"] .tpf-slide.active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    .tpf-slider[data-transition="flip"] .tpf-slide.prev,
    .tpf-slider[data-transition="cube"] .tpf-slide.prev {
        transform: translateX(-100%) !important;
    }
}