/**
 * Universal Slider Utility - Base Styles
 * 
 * Core slider functionality styles that can be extended
 * by individual components for their specific needs.
 */

/* ===== CORE SLIDER STRUCTURE ===== */

.universal-slider {
    position: relative;
    width: 100%;
    overflow: hidden; /* Changed back to hidden for cleaner appearance */
}

/* Remove the ::before pseudo-element - not needed with JS height management */

.universal-slider .slider-item {
    width: 100%;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.universal-slider .slider-item:not(.active) {
    display: none;
}

.universal-slider .slider-item.active {
    display: flex; /* Allow slider items to use flex by default */
}

/* ===== SCALE ANIMATION (News Posts Style) ===== */

.universal-slider[data-animation="scale"] .slider-item {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: scale(0.95);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    display: flex !important; /* Force flex to maintain layout */
}

.universal-slider[data-animation="scale"] .slider-item.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* Changed to relative so container respects height */
    transform: scale(1);
    z-index: 2;
    display: flex !important;
}

.universal-slider[data-animation="scale"] .slider-item.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1;
}

/* ===== FADE ANIMATION ===== */

.universal-slider[data-animation="fade"] .slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex !important;
}

.universal-slider[data-animation="fade"] .slider-item.active {
    opacity: 1;
    position: relative; /* Changed to relative */
    z-index: 2;
    display: flex !important;
}

/* ===== SLIDE ANIMATION ===== */

.universal-slider[data-animation="slide"] {
    overflow: hidden;
}

.universal-slider[data-animation="slide"] .slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important;
}

.universal-slider[data-animation="slide"] .slider-item.active {
    transform: translateX(0);
    position: relative; /* Changed to relative */
    z-index: 2;
    display: flex !important;
}

.universal-slider[data-animation="slide"] .slider-item.slide-out-left {
    transform: translateX(-100%);
}

.universal-slider[data-animation="slide"] .slider-item.slide-out-right {
    transform: translateX(100%);
}

.universal-slider[data-animation="slide"] .slider-item.slide-in-left {
    transform: translateX(-100%);
}

.universal-slider[data-animation="slide"] .slider-item.slide-in-right {
    transform: translateX(100%);
}

/* ===== CONTROL ELEMENTS ===== */

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4, 1rem);
    position: absolute;
    bottom: var(--spacing-14, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

/* Alternative: Controls below slider content */
.universal-slider.controls-below {
    margin-bottom: 60px; /* Space for controls */
}

.universal-slider.controls-below .slider-controls {
    position: absolute;
    top: 100%;
    bottom: auto;
    margin-top: var(--spacing-4, 1rem);
}

/* ===== SWIPE FEEDBACK STYLES ===== */

/* Touch cursor feedback */
.universal-slider {
    cursor: grab;
}

.universal-slider:active {
    cursor: grabbing;
}

/* Dragging state */
.universal-slider.is-dragging .slider-item.active {
    transition: none !important; /* Remove transition during drag */
    cursor: grabbing !important;
}

/* Swipe indicators */
.universal-slider .swipe-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    color: var(--secondary-300, #3b82f6);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.universal-slider .swipe-indicator.left {
    left: var(--spacing-6, 1.5rem);
}

.universal-slider .swipe-indicator.right {
    right: var(--spacing-6, 1.5rem);
}

/* Show indicators during drag */
.universal-slider.is-dragging .swipe-indicator {
    opacity: 0.3;
}

.universal-slider.is-dragging.swipe-left .swipe-indicator.right {
    opacity: 0.8;
    transform: translateY(-50%) scale(1.2);
}

.universal-slider.is-dragging.swipe-right .swipe-indicator.left {
    opacity: 0.8;
    transform: translateY(-50%) scale(1.2);
}

/* ===== MOBILE ADJUSTMENTS ===== */

@media (max-width: 768px) {
    /* All mobile sliders use relative positioning for proper height */
    .universal-slider {
        overflow: hidden;
        /* Enable touch gestures */
        touch-action: pan-y pinch-zoom;
    }
    
    /* Override scale animation on mobile to prevent offset issues */
    .universal-slider[data-animation="scale"] .slider-item {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: scale(1) !important; /* Remove scale transform on mobile */
    }
    
    .universal-slider[data-animation="scale"] .slider-item:not(.active) {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .universal-slider[data-animation="scale"] .slider-item.active {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* REMOVED transform: none !important - this was blocking drag visualization */
    }
    
    /* CRITICAL: Allow transforms during dragging */
    .universal-slider.is-dragging[data-animation="scale"] .slider-item.active {
        /* Allow inline transform styles during drag */
        transform: initial !important;
    }
    
    /* Ensure active slides are relative positioned for proper height calculation */
    .universal-slider .slider-item.active {
        position: relative !important;
    }
    
    /* Hide non-active slides */
    .universal-slider .slider-item:not(.active) {
        position: absolute !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Mobile slider controls positioning */
    .universal-slider .slider-controls {
        position: relative;
        margin-top: var(--spacing-4);
        transform: none;
        left: auto;
        bottom: auto;
    }
    
    /* Mobile specific swipe feedback */
    .universal-slider .swipe-indicator {
        font-size: 40px;
    }
    
    .universal-slider .swipe-indicator.left {
        left: var(--spacing-4, 1rem);
    }
    
    .universal-slider .swipe-indicator.right {
        right: var(--spacing-4, 1rem);
    }
}

/* ===== REST OF YOUR EXISTING STYLES ===== */

/* Dots */
.slider-dots {
    display: flex;
    gap: var(--spacing-2, 0.5rem);
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: var(--color-gray-300, #d1d5db);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.slider-dot:hover {
    background: var(--secondary-400, #9ca3af);
}

.slider-dot.active {
    background: var(--secondary-300, #3b82f6);
}

/* Arrows - Default styling based on news posts original */
.slider-arrow {
    background: none;
    border: none;
    color: var(--secondary-300, #4b5563);
    text-decoration: none;
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.slider-arrow:hover {
    color: var(--secondary-200, #2563eb);
    transform: scale(1.1);
}

.slider-arrow:active {
    transform: scale(0.95);
}

.slider-arrow i {
    pointer-events: none;
}