/* ===============================================
   Marketing Slider - Professional CSS Framework
   Using CSS Variables for Dynamic Customization
   =============================================== */

/* CSS Reset & Base Styles */
.marketing-slider,
.marketing-slider *,
.marketing-slider *::before,
.marketing-slider *::after {
    box-sizing: border-box !important;
    border: 0 !important;
    vertical-align: baseline !important;
    text-decoration: none !important;
    list-style: none !important;
    outline: none !important;
}

/* Main Container */
.marketing-slider {
    width: var(--slider-width, 100%) !important;
    height: var(--slider-height, var(--slider-fixed-height, 600px)) !important;
    margin: 0 auto !important;
    border-radius: var(--slider-border-radius, 16px) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-value, #ffffff) !important;
}

/* Background Image Layer with Effects */
.marketing-slider::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--bg-image-value, transparent) !important;
    filter: var(--bg-filter, none) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: var(--slider-border-radius, 16px) !important;
    overflow: hidden !important;
}

/* Content Layer */
.marketing-slider .slider-wrapper {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.marketing-slider .slider-wrapper.fade-out {
    opacity: 0.3 !important;
}

.marketing-slider .slider-wrapper.fade-in {
    opacity: 1 !important;
}

/* Individual Slides */
.marketing-slider .slide,
.marketing-slider .slide.active {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 40px 7% 40px 3% !important;
    gap: 40px !important;
}

.marketing-slider .slide.active {
    opacity: 1 !important;
}

/* Text Column */
.marketing-slider .text-column {
    flex: 0 0 35% !important;
    padding-right: 30px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
}

/* Slide Content Container */
.marketing-slider .slide-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: 100% !important;
}

/* Typography Styles */
.marketing-slider .text-column h1 {
    color: var(--title-color, #ffffff) !important;
    font-size: var(--title-font-size, 48px) !important;
    font-weight: var(--title-font-weight, 700) !important;
    line-height: var(--title-line-height, 1.2) !important;
    font-family: var(--font-family, sans-serif) !important;
    margin: 0 0 20px 0 !important;
}

.marketing-slider .text-column h3 {
    color: var(--subtitle-color, #cccccc) !important;
    font-size: var(--subtitle-font-size, 26px) !important;
    font-weight: var(--subtitle-font-weight, 500) !important;
    line-height: var(--subtitle-line-height, 1.3) !important;
    font-family: var(--font-family, sans-serif) !important;
    margin: 0 0 15px 0 !important;
}

.marketing-slider .text-column p {
    color: var(--description-color, #cccccc) !important;
    font-size: var(--description-font-size, 19px) !important;
    font-weight: var(--description-font-weight, 400) !important;
    line-height: var(--description-line-height, 1.6) !important;
    font-family: var(--font-family, sans-serif) !important;
    margin: 0 0 30px 0 !important;
}

/* Media Column */
.marketing-slider .media-column {
    flex: 0 0 65% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    position: relative !important;
    border-radius: var(--media-border-radius-individual, 12px) !important;
    overflow: hidden !important;
}

/* Media elements */
.marketing-slider .media-column iframe,
.marketing-slider .media-column video,
.marketing-slider .media-column img {
    border-radius: var(--media-border-radius-individual, 12px) !important;
    width: 100% !important;
    height: 100% !important;
    max-width: var(--media-width, 100%) !important;
    max-height: var(--media-height, 400px) !important;
    display: block !important;
    object-fit: cover !important;
}

/* Play overlay */
.marketing-slider .play-overlay {
    position: absolute !important;
    width: 100px !important;
    height: 100px !important;
    background: rgba(0,0,0,0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: opacity 0.5s, background 0.3s !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
}

.marketing-slider .play-overlay:hover {
    background: rgba(0,0,0,0.8) !important;
}

.marketing-slider .play-overlay.hide {
    opacity: 0 !important;
    pointer-events: none !important;
}

.marketing-slider .play-overlay i {
    font-size: 2.5rem !important;
    color: white !important;
}

/* CTA Button Styles */
.marketing-slider .slider-cta-btn {
    background: var(--btn-bg-color, var(--primary-color, #1a73e8)) !important;
    color: var(--btn-text-color, #ffffff) !important;
    font-size: var(--btn-font-size, 18px) !important;
    font-weight: var(--btn-bold, normal) !important;
    font-style: var(--btn-italic, normal) !important;
    text-decoration: var(--btn-underline, none) !important;
    font-family: var(--font-family, sans-serif) !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.marketing-slider .slider-cta-btn:hover {
    color: var(--btn-hover-text-color, #1a73e8) !important;
    background: transparent !important;
    border: 2px solid var(--btn-hover-text-color, #1a73e8) !important;
    box-shadow: none !important;
}

/* CTA Buttons Row */
.marketing-slider .cta-buttons {
    margin-top: 20px !important;
    display: flex !important;
    gap: 15px !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
}

/* Navigation Buttons */
.marketing-slider .nav-buttons {
    margin-top: 50px !important;
    display: flex !important;
    gap: 15px !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;
}

.marketing-slider .nav-buttons .prev-btn,
.marketing-slider .nav-buttons .next-btn {
    background: var(--primary-color, #1a73e8) !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: var(--font-family, sans-serif) !important;
    font-weight: 600 !important;
    min-width: 80px !important;
    position: relative !important;
    overflow: hidden !important;
}

.marketing-slider .nav-buttons .prev-btn:hover,
.marketing-slider .nav-buttons .next-btn:hover {
    background: var(--primary-hover-gradient, linear-gradient(135deg, #1a73e8, #1a73e888)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Ensure smooth transition back to original state */
.marketing-slider .nav-buttons .prev-btn:not(:hover),
.marketing-slider .nav-buttons .next-btn:not(:hover) {
    background: var(--primary-color, #1a73e8) !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Bottom navigation - Always at bottom */
.marketing-slider .bottom-nav {
    background: var(--nav-bg-transparent, var(--nav-bg-color, #000000)) !important;
    padding: 22px 3% 15px 3% !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Progress track */
.marketing-slider .progress-track {
    position: relative !important;
    height: 2px !important;
    background: #222 !important;
    width: 100% !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin-bottom: 15px !important;
    z-index: 10 !important;
}

/* Progress fill */
.marketing-slider .progress-track .progress-fill {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    /* width is set by JS, do NOT use !important here */
    background: var(--progress-color, #1a73e8) !important;
    border-radius: 3px !important;
    transition: width 0.4s !important;
    z-index: 11 !important;
    display: block !important;
    opacity: 1 !important;
}

/* Slide steps */
.marketing-slider .slide-steps {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: var(--steps-color, #888888) !important;
}

.marketing-slider .slide-step {
    cursor: pointer !important;
    transition: color 0.3s !important;
    font-family: var(--steps-font-family, var(--font-family, sans-serif)) !important;
    color: var(--steps-color, #888888) !important;
    font-size: var(--steps-font-size, 13px) !important;
}

.marketing-slider .slide-step.active {
    color: #fff !important;
    font-weight: 600 !important;
}

.marketing-slider .slide-step span.badge {
    background: var(--badge-color, #fce83a) !important;
    color: #000 !important;
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
    margin-left: 5px !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
    font-family: var(--font-family, sans-serif) !important;
}

/* New badge - Inline, not full width */
.marketing-slider .new-badge {
    display: inline-block !important;
    background: var(--badge-color, #fce83a) !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 0.85rem !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
    font-family: var(--font-family, sans-serif) !important;
    width: auto !important;
    max-width: fit-content !important;
    white-space: nowrap !important;
}

.marketing-slider .slide-steps .badge {
    background: var(--badge-color, #fce83a) !important;
    color: #000 !important;
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
    margin-left: 5px !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
    font-family: var(--font-family, sans-serif) !important;
    font-weight: bold !important;
}

/* ===============================================
   ADVANCED TRANSITIONS SYSTEM
   =============================================== */

/* Slider wrapper needs 3D context for advanced transitions */
.marketing-slider .slider-wrapper {
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
    overflow: hidden !important;
}

/* Base slide transitions */
.marketing-slider .slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: all var(--transition-duration, 0.5s) var(--transition-easing, ease-in-out) !important;
    transform-origin: center center !important;
    backface-visibility: hidden !important;
    display: flex !important;
}

/* Active slide base */
.marketing-slider .slide.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* FADE TRANSITION (Default) */
.marketing-slider[data-transition="fade"] .slide {
    transform: translateZ(0) !important;
}

.marketing-slider[data-transition="fade"] .slide.active {
    opacity: 1 !important;
    transform: translateZ(0) !important;
}

/* SLIDE TRANSITION */
.marketing-slider[data-transition="slide"] .slide {
    transform: translateX(100%) !important;
    opacity: 1 !important;
}

.marketing-slider[data-transition="slide"] .slide.active {
    transform: translateX(0) !important;
}

.marketing-slider[data-transition="slide"] .slide.prev {
    transform: translateX(-100%) !important;
}

/* ZOOM TRANSITION */
.marketing-slider[data-transition="zoom"] .slide {
    transform: scale(0.8) !important;
    opacity: 0 !important;
}

.marketing-slider[data-transition="zoom"] .slide.active {
    transform: scale(1) !important;
    opacity: 1 !important;
}

.marketing-slider[data-transition="zoom"] .slide.zoom-out {
    transform: scale(1.2) !important;
    opacity: 0 !important;
}

/* FLIP TRANSITION */
.marketing-slider[data-transition="flip"] .slide {
    transform: rotateY(-90deg) !important;
    opacity: 1 !important;
}

.marketing-slider[data-transition="flip"] .slide.active {
    transform: rotateY(0deg) !important;
}

.marketing-slider[data-transition="flip"] .slide.flip-out {
    transform: rotateY(90deg) !important;
}

/* CUBE TRANSITION */
.marketing-slider[data-transition="cube"] .slider-wrapper {
    perspective: 1200px !important;
}

.marketing-slider[data-transition="cube"] .slide {
    transform: translateZ(-50vw) rotateY(-90deg) !important;
    opacity: 1 !important;
}

.marketing-slider[data-transition="cube"] .slide.active {
    transform: translateZ(0) rotateY(0deg) !important;
}

.marketing-slider[data-transition="cube"] .slide.cube-next {
    transform: translateZ(-50vw) rotateY(90deg) !important;
}

.marketing-slider[data-transition="cube"] .slide.cube-prev {
    transform: translateZ(-50vw) rotateY(-90deg) !important;
}

/* ===============================================
   TOUCH/SWIPE SUPPORT STYLES
   =============================================== */

/* Smooth dragging cursor */
.marketing-slider[data-touch-enabled="1"] .slider-wrapper {
    cursor: grab !important;
}

.marketing-slider[data-touch-enabled="1"] .slider-wrapper:active {
    cursor: grabbing !important;
}

/* Prevent text selection during swipe */
.marketing-slider[data-touch-enabled="1"] .slider-wrapper {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Momentum scrolling for touch */
.marketing-slider[data-touch-enabled="1"] .slide {
    will-change: transform !important;
}

/* ===============================================
   LEGACY SLIDE VISIBILITY (Fallback)
   =============================================== */

/* Fallback for browsers that don't support advanced transitions */
@supports not (transform: perspective(1000px)) {
    .marketing-slider .slide {
        display: none !important;
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .marketing-slider .slide.active {
        display: flex !important;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .marketing-slider {
        height: auto !important;
        min-height: 500px !important;
        max-height: 90vh !important;
    }
    
    .marketing-slider .slider-wrapper {
        flex-direction: column !important;
        padding: 20px 15px !important;
        height: auto !important;
        min-height: 480px !important;
    }
    
    .marketing-slider .slide {
        flex-direction: column !important;
        text-align: center !important;
        padding: 0 !important;
        gap: 20px !important;
        position: relative !important;
        opacity: 1 !important;
        height: 100% !important;
        justify-content: space-between !important;
    }
    
    .marketing-slider .text-column {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
        height: auto !important;
        max-height: 280px !important;
        overflow: hidden !important;
        order: 2 !important;
    }
    
    .marketing-slider .slide-content {
        gap: 10px !important;
        align-items: center !important;
    }
    
    .marketing-slider .media-column {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 200px !important;
        min-height: 180px !important;
        max-height: 250px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        order: 1 !important;
    }
    
    .marketing-slider .media-column iframe,
    .marketing-slider .media-column video,
    .marketing-slider .media-column img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
    
    .marketing-slider .text-column h1 {
        font-size: min(8vw, 28px) !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.1 !important;
    }
    
    .marketing-slider .text-column h3 {
        font-size: min(5vw, 18px) !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.2 !important;
    }
    
    .marketing-slider .text-column p {
        font-size: min(4vw, 14px) !important;
        margin: 0 0 15px 0 !important;
        line-height: 1.4 !important;
        max-height: 60px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .marketing-slider .cta-buttons {
        justify-content: center !important;
        margin-top: 10px !important;
        gap: 10px !important;
    }
    
    .marketing-slider .nav-buttons {
        justify-content: center !important;
        margin-top: 15px !important;
        gap: 10px !important;
    }
    
    .marketing-slider .nav-buttons .prev-btn,
    .marketing-slider .nav-buttons .next-btn {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        min-width: 70px !important;
    }
    
    .marketing-slider .slider-cta-btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
        width: auto !important;
        max-width: 200px !important;
    }
    
    .marketing-slider .bottom-nav {
        padding: 15px 15px 12px 15px !important;
    }
    
    .marketing-slider .slide-steps {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        font-size: 11px !important;
    }
    
    .marketing-slider .slide-step {
        font-size: 11px !important;
        padding: 2px 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 120px !important;
    }
    
    .marketing-slider .new-badge {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }
}