/*
 * Plugin Name: Image Reveal Slider Styles
 * Description: Stylesheet for the Image Reveal Slider plugin.
 * Version:     1.0.26
 * Author:      Your Name
 */

.image-reveal-slider-wrapper {
    font-family: "Inter", sans-serif;
    display: flex; /* Flexbox for centering content within the wrapper */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* Consistent padding */
    box-sizing: border-box; /* Ensure padding is included in width/height */
}

.irsp-title {
    font-size: 1.875rem; /* Equivalent to text-3xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #1a202c; /* Equivalent to text-gray-800 */
    margin-bottom: 1.5rem; /* Consistent margin */
    text-align: center;
}

.irsp-description {
    color: #4a5568; /* Equivalent to text-gray-600 */
    margin-bottom: 2rem; /* Consistent margin */
    text-align: center;
    max-width: 36rem; /* Equivalent to max-w-lg */
}

.image-container {
    position: relative !important; /* Ensure relative positioning for children */
    width: clamp(300px, 90vw, 600px); /* Responsive width */
    height: 0 !important; /* Set height to 0 for padding-bottom trick */
    padding-bottom: 56.25% !important; /* For a 16:9 aspect ratio (9/16 * 100%) */
    border-radius: 0.75rem; /* Rounded corners */
    overflow: hidden;
   
    background-color: #f5f5f5; /* Subtle visual hint for the container area if images aren't loaded */
    line-height: 0 !important; /* Crucial for preventing extra space */
    transform: translateZ(0); /* Force a new stacking context */
    cursor: ew-resize; /* Cursor indicates draggable area */
}

.image-container img {
    position: absolute !important; /* This is crucial for stacking */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Ensures image covers the area without distortion */
    border-radius: 0.75rem; /* Match container border-radius */
    display: block !important; /* Ensure it behaves as a block element */
}

.irsp-bottom-image {
    z-index: 1 !important; /* Ensure bottom image is below the top image */
}

/* The top image will be manipulated */
.irsp-top-image {
    z-index: 2 !important; /* Ensure top image is on top by default */
    clip-path: inset(0 0 0 0); /* Initial clip-path, will be set by JS */
    will-change: clip-path; /* Hint to browser for performance */
}

/* Visually hide the native slider input */
.irsp-slider-hidden {
    -webkit-appearance: none;
    appearance: none;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: transparent !important;
    opacity: 0 !important; /* Make it completely invisible */
    cursor: ew-resize !important; /* Keep cursor for drag feel */
    z-index: 4 !important; /* Higher z-index to capture events over images */
}

/* Custom draggable handle */
.irsp-custom-handle {
    position: absolute !important;
    top: 0 !important;
    left: 50%; /* REMOVED !important: This allows JS to control its position */
    width: 40px !important; /* Width of the button area */
    height: 100% !important; /* Full height of the image container */
    transform: translateX(-50%) !important; /* Horizontally center the handle */
    cursor: ew-resize !important;
    z-index: 5 !important; /* On top of the hidden slider */
    display: flex !important; /* Use flexbox for internal centering */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.7) !important; */ /* Overall shadow */
}

/* Vertical Line inside the custom handle */
.irsp-handle-line {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 4px !important; /* Width of the white line */
    height: 100% !important;
    background-color: #ffffff !important; /* White line color */
    transform: translateX(-50%) !important; /* Center the line */
    z-index: 1 !important; /* Behind the button */
    pointer-events: none !important; /* Allow drag events to pass through to parent */
}

/* Circular Button inside the custom handle */
.irsp-handle-button {
    position: relative !important; /* For SVG positioning */
    width: 40px !important; /* Width of the button */
    height: 40px !important; /* Height of the button */
    border-radius: 50% !important; /* Make it a perfect circle */
    background-color: #ffffff !important; /* White background for the button */
    border: none !important; /* REMOVED border: 2px solid #333333 !important; */
    display: flex !important; /* Flexbox for centering arrows */
    align-items: center !important;
    justify-content: center !important; /* Center arrows within the button */
    z-index: 2 !important; /* On top of the line */
    pointer-events: none !important; /* Allow drag events to pass through to parent */
}

/* SVG Arrows inside the button */
.irsp-handle-button svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #333333 !important; /* Ensure stroke color for arrows */
}

.irsp-handle-button .irsp-arrow-left {
    margin-right: 8px !important; /* Increased spacing between arrows */
}

.irsp-handle-button .irsp-arrow-right {
    margin-left: 8px !important; /* Increased spacing between arrows */
}