/* Frontend styles for Esitme Custom Slider */

.esitme-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    background-color: #000;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y; /* Allow vertical scrolling, handle horizontal swipe via JS */
}

/* Slider Wrapper containing slides laid out horizontally */
.esitme-slider-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Single Slide Item */
.esitme-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.esitme-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    outline: none;
}

.esitme-slide-link:focus-visible {
    box-shadow: inset 0 0 0 4px #3b82f6;
}

/* Responsive Image and picture tags */
.esitme-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.esitme-slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Prevents image dragging ghost */
}

/* Left & Right Navigation Arrows - Reset and High Contrast Style */
.esitme-slider-arrow {
    /* Reset WordPress theme styles */
    all: unset !important;
    
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    
    /* White solid background with dark icon to remain visible on all slides */
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1f2937 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transition: background 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.esitme-slider-arrow:hover {
    background: #f9fafb !important;
    color: #000000 !important;
    transform: translateY(-50%) scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

.esitme-slider-arrow:active {
    transform: translateY(-50%) scale(0.95) !important;
}

.esitme-slider-arrow svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

.esitme-arrow-left {
    left: 20px !important;
}

.esitme-arrow-left:hover svg {
    transform: translateX(-2px) !important;
}

.esitme-arrow-right {
    right: 20px !important;
}

.esitme-arrow-right:hover svg {
    transform: translateX(2px) !important;
}

/* Pagination Dots Wrapper */
.esitme-slider-pagination {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
    padding: 6px 12px !important;
    background: rgba(0, 0, 0, 0.5) !important; /* Dark semi-transparent background */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-sizing: border-box !important;
}

/* Pagination Dots - Reset and Custom Style */
.esitme-slider-dot {
    /* Reset theme button styles */
    all: unset !important;
    
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: background 0.3s, width 0.3s, border-radius 0.3s !important;
}

.esitme-slider-dot:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

.esitme-slider-dot.active {
    background: #ffffff !important;
    width: 26px !important;
    border-radius: 5px !important;
}

/* Touch swiping responsive adjust */
@media (max-width: 768px) {
    .esitme-slider-arrow {
        width: 38px !important;
        height: 38px !important;
    }
    
    .esitme-arrow-left {
        left: 12px !important;
    }
    
    .esitme-arrow-right {
        right: 12px !important;
    }

    .esitme-slider-arrow svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .esitme-slider-pagination {
        bottom: 16px !important;
        gap: 8px !important;
        padding: 4px 10px !important;
    }
    
    .esitme-slider-dot {
        width: 8px !important;
        height: 8px !important;
    }
    
    .esitme-slider-dot.active {
        width: 20px !important;
    }
}