/**
 * SUMA Global Slider Navigation - 2025 Edition
 * Konsistente Slider-Navigation für alle Widgets
 * Responsive Design & Glassmorphism
 */

/* ========================================
   GLOBAL SLIDER ARROWS - 2025 MODERN + DRAGABLE
   ======================================== */

/* DRAGABLE/SWIPE Cursor States */
.slick-slider {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.slick-slider:active,
.slick-slider.slick-dragging {
    cursor: grabbing !important;
}

/* Touch-optimierte Slides */
.slick-slide {
    touch-action: pan-y !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Smooth Dragging Animation */
.slick-track {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.slick-slider.slick-dragging .slick-track {
    transition: none !important;
}

/* ========================================
   DRAG VISUAL FEEDBACK - 2025 EDITION
   ======================================== */

/* Drag Start State */
.smg-dragging-start {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
}

/* Active Dragging State */
.smg-dragging,
.smg-mouse-dragging {
    transform: scale(0.95) !important;
    filter: brightness(1.05) !important;
    transition: transform 0.1s ease, filter 0.1s ease !important;
}

/* Drag End Animation */
.slick-slider:not(.smg-dragging):not(.smg-mouse-dragging) {
    transform: scale(1) !important;
    filter: brightness(1) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Slide Drag Feedback */
.slick-slide.slick-current.slick-active {
    transform: scale(1) !important;
    opacity: 1 !important;
}

.slick-slider.smg-dragging .slick-slide:not(.slick-current) {
    opacity: 0.7 !important;
    transform: scale(0.95) !important;
}

/* Touch Ripple Effect */
.smg-dragging-start::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(227, 30, 36, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: touchRipple 0.6s ease-out;
    pointer-events: none;
    z-index: 1000;
}

@keyframes touchRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* Slick Slider Arrows - Global Override - KORREKTE POSITIONIERUNG */
.slick-arrow,
.slider-arrow,
.carousel-arrow,
.swiper-button-next,
.swiper-button-prev {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: clamp(40px, 8vw, 52px) !important;
    height: clamp(40px, 8vw, 52px) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 100 !important;
    color: var(--smg-gray-700) !important;
    font-size: 0 !important; /* Hide default text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
}

/* Verstecke Standard Slick/Swiper Icons */
.slick-arrow:before,
.slider-arrow:before,
.carousel-arrow:before,
.swiper-button-next:after,
.swiper-button-prev:after {
    content: '' !important;
    display: none !important;
}

/* LUCID SVG ICONS für alle Slider */
.slick-arrow::after,
.slider-arrow::after,
.carousel-arrow::after,
.swiper-button-next::before,
.swiper-button-prev::before {
    content: '' !important;
    display: block !important;
    width: clamp(16px, 3vw, 20px) !important;
    height: clamp(16px, 3vw, 20px) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Previous Arrow (Left) - Lucid ChevronLeft SVG */
.slick-prev::after,
.slider-prev::after,
.carousel-prev::after,
.swiper-button-prev::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") !important;
}

/* Next Arrow (Right) - Lucid ChevronRight SVG */
.slick-next::after,
.slider-next::after,
.carousel-next::after,
.swiper-button-next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* Hover State - White Icons */
.slick-arrow:hover::after,
.slider-arrow:hover::after,
.carousel-arrow:hover::after,
.swiper-button-next:hover::before,
.swiper-button-prev:hover::before {
    filter: brightness(0) invert(1) !important;
}

/* Arrow Icons - SVG or Font Icons */
.slick-arrow svg,
.slider-arrow svg,
.carousel-arrow svg {
    width: clamp(16px, 3vw, 20px) !important;
    height: clamp(16px, 3vw, 20px) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    transition: transform 0.3s ease !important;
}

/* Hover States */
.slick-arrow:hover,
.slider-arrow:hover,
.carousel-arrow:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--smg-500) !important;
    color: white !important;
    transform: translateY(-50%) scale(1.15) !important;
    box-shadow:
        0 12px 30px rgba(227, 30, 36, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.slick-arrow:hover svg,
.slider-arrow:hover svg,
.carousel-arrow:hover svg {
    transform: scale(1.1) !important;
}

/* Active/Focus States */
.slick-arrow:active,
.slider-arrow:active,
.carousel-arrow:active {
    transform: translateY(-50%) scale(0.95) !important;
}

/* Disabled States */
.slick-arrow.slick-disabled,
.slider-arrow:disabled,
.carousel-arrow:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    transform: translateY(-50%) !important;
}

/* ========================================
   POSITIONING - RESPONSIVE
   ======================================== */

/* Previous Arrow */
.slick-prev,
.slider-prev,
.carousel-prev,
.swiper-button-prev {
    left: clamp(10px, 2vw, 20px) !important; /* ✅ Innerhalb der Cards */
}

/* Next Arrow */
.slick-next,
.slider-next,
.carousel-next,
.swiper-button-next {
    right: clamp(10px, 2vw, 20px) !important; /* ✅ Innerhalb der Cards */
}

/* ========================================
   GLOBAL SLIDER DOTS/PAGINATION - 2025
   ======================================== */

/* Slick Dots */
.slick-dots,
.slider-dots,
.carousel-dots,
.swiper-pagination {
    bottom: clamp(10px, 3vw, 20px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(6px, 2vw, 10px) !important;
    z-index: 10 !important;
}

.slick-dots li,
.slider-dots li,
.carousel-dots li {
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

.slick-dots li button,
.slider-dots li button,
.carousel-dots li button,
.swiper-pagination-bullet {
    width: clamp(8px, 2vw, 12px) !important;
    height: clamp(8px, 2vw, 12px) !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Active Dots */
.slick-dots li.slick-active button,
.slider-dots li.active button,
.carousel-dots li.active button,
.swiper-pagination-bullet-active {
    background: var(--smg-500) !important;
    transform: scale(1.3) !important;
    box-shadow: 
        0 4px 12px rgba(227, 30, 36, 0.3),
        0 0 0 4px rgba(227, 30, 36, 0.2) !important;
}

/* Hover Dots */
.slick-dots li button:hover,
.slider-dots li button:hover,
.carousel-dots li button:hover,
.swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}

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

/* ========================================
   MOBILE TOUCH OPTIMIZATIONS
   ======================================== */

/* Touch-optimierte Slider auf Mobile */
@media (hover: none) and (pointer: coarse) {
    .slick-slider {
        cursor: default !important;
    }

    .slick-slider:active,
    .slick-slider.slick-dragging {
        cursor: default !important;
    }

    /* Bessere Touch-Targets */
    .slick-slide {
        padding: 2px !important;
    }

    /* Smooth Touch-Scrolling */
    .slick-track {
        -webkit-overflow-scrolling: touch !important;
    }
}

@media (max-width: 768px) {
    /* Enhanced Mobile Drag Experience */
    .slick-slider {
        touch-action: pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Smaller arrows on mobile */
    .slick-arrow,
    .slider-arrow,
    .carousel-arrow,
    .swiper-button-next,
    .swiper-button-prev {
        width: 36px !important;
        height: 36px !important;
        transform: translateY(-50%) !important;
    }

    /* Smaller Lucid SVG icons on mobile */
    .slick-arrow::after,
    .slider-arrow::after,
    .carousel-arrow::after {
        width: 14px !important;
        height: 14px !important;
    }

    /* Closer positioning on mobile */
    .slick-prev,
    .slider-prev,
    .carousel-prev,
    .swiper-button-prev {
        left: clamp(8px, 1.5vw, 15px) !important; /* ✅ Innerhalb auf Mobile */
    }

    .slick-next,
    .slider-next,
    .carousel-next,
    .swiper-button-next {
        right: clamp(8px, 1.5vw, 15px) !important; /* ✅ Innerhalb auf Mobile */
    }

    /* Mobile hover states */
    .slick-arrow:hover,
    .slider-arrow:hover,
    .carousel-arrow:hover {
        transform: translateY(-50%) scale(1.1) !important;
    }

    .slick-arrow:active,
    .slider-arrow:active,
    .carousel-arrow:active {
        transform: translateY(-50%) scale(0.95) !important;
    }
    
    /* Smaller dots on mobile */
    .slick-dots li button,
    .slider-dots li button,
    .carousel-dots li button,
    .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }
    
    .slick-dots,
    .slider-dots,
    .carousel-dots,
    .swiper-pagination {
        bottom: 8px !important;
        gap: 6px !important;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile adjustments */
    .slick-arrow,
    .slider-arrow,
    .carousel-arrow {
        width: 32px !important;
        height: 32px !important;
    }

    .slick-prev,
    .slider-prev,
    .carousel-prev {
        left: clamp(5px, 1vw, 10px) !important; /* ✅ Innerhalb auf Extra Small Mobile */
    }

    .slick-next,
    .slider-next,
    .carousel-next {
        right: clamp(5px, 1vw, 10px) !important; /* ✅ Innerhalb auf Extra Small Mobile */
    }
}

/* ========================================
   WIDGET-SPECIFIC OVERRIDES
   ======================================== */

/* Hero Widget Specific */
.smg-hero-widget .slick-arrow {
    position: absolute !important;
}

/* Services Widget Specific */
.smg-services-widget .slick-arrow {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Social Media Widget Specific */
.smg-social-media-widget .slick-arrow {
    background: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
}

.smg-social-media-widget .slick-arrow:hover {
    background: var(--smg-500) !important;
}

/* Store Directory Widget Specific */
.smg-store-directory .slick-arrow {
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06) !important;
}