/**
 * Horizontal Scroll Extension - Styles
 * Enhanced version with responsive support and better browser compatibility
 * Based on Elementor horizontal scroll functionality
 * This is an EXTENSION that gets injected into Row/Section modules, not a standalone module
 *
 * @package DiviAnimator
 * @since 1.0.0
 */

/* Extension container - applied to Row/Section modules that have horizontal scroll enabled */
.mee-horizontal-scroll-extension {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Main container - should be full width for proper functionality */
.mee-horizontal-scroll-extension__container {
    width: 100%;
    height: var(--horizontal-scroll-height, 500px);
    overflow: hidden;
    position: relative;
}

/* Items wrapper */
.mee-horizontal-scroll-extension__items {
    display: flex;
    flex-direction: row;
    gap: 0; /* No gap for 100% width items */
    width: fit-content;
    height: 100%;
    align-items: stretch;
}

/* All child items should be 100% width/height like Elementor */
.mee-horizontal-scroll-extension__items > * {
    flex-shrink: 0;
    width: 100vw; /* Full viewport width */
    height: 100%;
    box-sizing: border-box;
}

/* Ensure proper positioning for absolute children */
.mee-horizontal-scroll-extension__items > * {
    position: relative;
}

/* Scrollbar styling (optional) */
.mee-horizontal-scroll-extension__container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mee-horizontal-scroll-extension__container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mee-horizontal-scroll-extension__container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.mee-horizontal-scroll-extension__container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar support */
.mee-horizontal-scroll-extension__container {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Disable default scrollbar for horizontal scroll effect */
.mee-horizontal-scroll-enabled .mee-horizontal-scroll-extension__container {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Smooth transitions for items */
.mee-horizontal-scroll-extension__items > * {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ─── Responsive adjustments ──────────────────────────────────────────────── */

/* Mobile devices */
@media (max-width: 767px) {
    .divi_animator_horizontal_scroll_module__container {
        height: var(--horizontal-scroll-height-mobile, var(--horizontal-scroll-height, 400px));
    }
}

/* Tablet devices */
@media (min-width: 768px) and (max-width: 1024px) {
    .divi_animator_horizontal_scroll_module__container {
        height: var(--horizontal-scroll-height-tablet, var(--horizontal-scroll-height, 450px));
    }
}

/* Desktop devices */
@media (min-width: 1025px) {
    .divi_animator_horizontal_scroll_module__container {
        height: var(--horizontal-scroll-height-desktop, var(--horizontal-scroll-height, 500px));
    }
}

/* ─── Performance optimizations ──────────────────────────────────────────────── */

/* GPU acceleration for smooth scrolling */
.divi_animator_horizontal_scroll_enabled .divi_animator_horizontal_scroll_module__items {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .divi_animator_horizontal_scroll_module__items > * {
        transition: none;
    }

    .divi_animator_horizontal_scroll_enabled .divi_animator_horizontal_scroll_module__items {
        will-change: auto;
    }
}

/* ─── Debug/Development helpers ─────────────────────────────────────────────────── */

/* Debug border when markers are enabled */
[data-scroll-debug="true"] .divi_animator_horizontal_scroll_module__container {
    border: 2px dashed #ff6b6b;
    background-color: rgba(255, 107, 107, 0.1);
}

/* Highlight scroll areas */
[data-scroll-debug="true"] .divi_animator_horizontal_scroll_module__items {
    background-color: rgba(107, 255, 107, 0.1);
}