/* Gabs Custom Slider Widget Styles */

/* Slider Wrapper */
.elementor-widget-custom_slider .gabs-slider-wrapper,
.gabs-slider-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 50px 0 40px; /* Added extra top padding for hover effect */
    position: relative;
    overflow: hidden;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .elementor-widget-custom_slider .gabs-slider-wrapper,
    .gabs-slider-wrapper {
        padding: 30px 0px;
    }
}

/* Gradient Overlays - Left and Right */
.elementor-widget-custom_slider .gabs-slider-wrapper::before,
.elementor-widget-custom_slider .gabs-slider-wrapper::after,
.gabs-slider-wrapper::before,
.gabs-slider-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 80px; /* Stop before navigation buttons */
    width: 150px;
    z-index: 100;
    pointer-events: none; /* Allow clicks through the gradient */
}

.elementor-widget-custom_slider .gabs-slider-wrapper::before,
.gabs-slider-wrapper::before {
    left: 0;
    background: #000000;
    background: linear-gradient(270deg,rgba(0, 0, 0, 0) 37%, rgba(245, 245, 246, 0.93) 90%);
}


.elementor-widget-custom_slider .gabs-slider-wrapper::after,
.gabs-slider-wrapper::after {
    right: 0;
    background: #000000;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 37%, rgba(245, 245, 246, 0.93) 90%);
}

@media (max-width: 768px) {
    .elementor-widget-custom_slider .gabs-slider-wrapper::before,
    .elementor-widget-custom_slider .gabs-slider-wrapper::after,
    .gabs-slider-wrapper::before,
    .gabs-slider-wrapper::after {
        display: none;
    }
}

/* Swiper Container */
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper,
.gabs-slider-wrapper .swiper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 30px 0 120px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
}

/* Swiper Wrapper */
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-wrapper,
.gabs-slider-wrapper .swiper-wrapper {
    display: flex !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    /* Ensure Firefox respects spacing */
    -moz-box-align: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
}

/* Individual Slide */
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide,
.gabs-slider-wrapper .swiper-slide {
    height: auto !important;
    width: 401px !important;
    max-width: 401px !important;
    min-width: 401px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    /* margin-right is controlled by Swiper's spaceBetween - don't override it */
}

/* Prevent Swiper from overriding slide width */
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide[style*="width"],
.gabs-slider-wrapper .swiper-slide[style*="width"] {
    width: 401px !important;
    min-width: 401px !important;
    max-width: 401px !important;
}

/* CRITICAL: Ensure margin-right works for spacing - must override any margin: 0 rules */
/* This rule comes AFTER the initial slide rules to ensure proper specificity */
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide:not(:last-child),
.gabs-slider-wrapper .swiper-slide:not(:last-child) {
    margin-right: 30px !important; /* Default spacing - Swiper's inline style will override this */
}

/* Swiper sets margin-right via inline styles, which have higher specificity than !important */
/* So Swiper's inline margin-right will naturally override the above rule */
/* But we need the above rule to prevent margin: 0 from overriding Swiper's inline style */

/* On mobile, remove margin-right (we use margin-bottom instead) */
@media (max-width: 768px) {
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide,
    .gabs-slider-wrapper .swiper-slide {
        margin-right: 0 !important;
    }
}

/* Hide duplicate slides on mobile as a fallback */
@media (max-width: 768px) {
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide-duplicate,
    .gabs-slider-wrapper .swiper-slide-duplicate,
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide-duplicate-prev,
    .gabs-slider-wrapper .swiper-slide-duplicate-prev,
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide-duplicate-next,
    .gabs-slider-wrapper .swiper-slide-duplicate-next,
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide-duplicate-active,
    .gabs-slider-wrapper .swiper-slide-duplicate-active {
        display: none !important;
    }
}

.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide:hover,
.gabs-slider-wrapper .swiper-slide:hover {
    transform: translateY(-5px) !important;
}

/* Full Slide Link */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-link-full,
.gabs-slider-wrapper .gabs-slide-link-full {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
    height: 100% !important;
}

/* Slide Background Container */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-background,
.gabs-slider-wrapper .gabs-slide-background {
    position: relative !important;
    width: 100% !important;
    height: 360px !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* Background Image Element - Bottom 75% */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-bg-image,
.gabs-slider-wrapper .gabs-slide-bg-image {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 75% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    border-radius: 8px !important;
}

/* Slide Content */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-content,
.gabs-slider-wrapper .gabs-slide-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Slide Icon - Dark box with shadow */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-icon,
.gabs-slider-wrapper .gabs-slide-icon {
    position: absolute !important;
    top: 0 !important;
    left: 12% !important;
    width: 52px !important;
    height: 52px !important;
    background: #4a5568 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 4 !important;
}

.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-icon img,
.gabs-slider-wrapper .gabs-slide-icon img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

/* White Text Box */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-text-box,
.gabs-slider-wrapper .gabs-slide-text-box {
    position: absolute !important;
    top: 10% !important;
    left: 6% !important;
    background: white !important;
    border-radius: 12px !important;
    padding: 35px 25px 30px !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15) !important;
    max-width: 80% !important;
    width: 70% !important;
    z-index: 3 !important;
    font-style: normal!important;
}

/* Slide Number */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-number,
.gabs-slider-wrapper .gabs-slide-number {
    font-family: "Manrope", Sans-serif !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1 !important;
    color: #b91c1c !important;
    margin: 0 0 8px 0 !important;
}

/* Slide Title */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-title,
.gabs-slider-wrapper .gabs-slide-title {
    font-family: "Manrope", Sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    color: #061C3D !important;
    margin: 0 !important;
}

/* Override any theme italics on headings */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-title h2,
.elementor-widget-custom_slider .gabs-slider-wrapper h2.gabs-slide-title,
.gabs-slider-wrapper .gabs-slide-title h2,
.gabs-slider-wrapper h2.gabs-slide-title {
    font-family: "Manrope", Sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

/* Kill all possible italic styles from theme */
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-text-box *,
.gabs-slider-wrapper .gabs-slide-text-box * {
    font-style: normal !important;
}

.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-number,
.elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-title,
.gabs-slider-wrapper .gabs-slide-number,
.gabs-slider-wrapper .gabs-slide-title,
.elementor .elementor-widget-custom_slider .gabs-slide-number,
.elementor .elementor-widget-custom_slider .gabs-slide-title {
    font-style: normal !important;
    -webkit-font-style: normal !important;
    -moz-font-style: normal !important;
}


/* Navigation Buttons - Centered Below */
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next,
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev,
.gabs-slider-wrapper .swiper-button-next,
.gabs-slider-wrapper .swiper-button-prev {
    width: 34px !important;
    height: 34px !important;
    background: #8D2438!important;
    border-radius: 6px !important;
    color: white !important;
    transition: all 0.3s ease !important;
    top: auto !important;
    bottom: 10px !important;
    margin-top: 0 !important;
}

/* Override Swiper's lock class - ensure buttons are visible when not on mobile */
@media (min-width: 769px) {
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next.swiper-button-lock,
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev.swiper-button-lock,
    .gabs-slider-wrapper .swiper-button-next.swiper-button-lock,
    .gabs-slider-wrapper .swiper-button-prev.swiper-button-lock {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}

.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next:after,
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev:after,
.gabs-slider-wrapper .swiper-button-next:after,
.gabs-slider-wrapper .swiper-button-prev:after {
    font-size: 14px !important;
    font-weight: bold !important;
}

.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev,
.gabs-slider-wrapper .swiper-button-prev {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-25px) !important;
}

.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next,
.gabs-slider-wrapper .swiper-button-next {
    right: auto !important;
    left: 50% !important;
    transform: translateX(25px) !important;
}

/* Hover - Keep same position with slight scale */
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev:hover,
.gabs-slider-wrapper .swiper-button-prev:hover,
.elementor .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev:hover {
    background: #8D2438 !important;
    transform: translateX(-25px) scale(1.1) !important;
    -webkit-transform: translateX(-25px) scale(1.1) !important;
}

.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next:hover,
.gabs-slider-wrapper .swiper-button-next:hover,
.elementor .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next:hover {
    background: #8D2438 !important;
    transform: translateX(25px) scale(1.1) !important;
    -webkit-transform: translateX(25px) scale(1.1) !important;
}

/* Force remove any translateX transforms on hover */
/* .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next:hover,
.gabs-slider-wrapper .swiper-button-next:hover,
.elementor .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next:hover {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
} */

/* .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev:hover,
.gabs-slider-wrapper .swiper-button-prev:hover,
.elementor .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev:hover {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
} */

/* Pagination - Hidden by default, navigation takes priority */
.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-pagination,
.gabs-slider-wrapper .swiper-pagination {
    bottom: 15px !important;
    display: none !important;
}

.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-pagination-bullet,
.gabs-slider-wrapper .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: white !important;
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
}

.elementor-widget-custom_slider .gabs-slider-wrapper .swiper-pagination-bullet-active,
.gabs-slider-wrapper .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: rgba(185, 28, 28, 1) !important;
    width: 30px !important;
    border-radius: 6px !important;
}

/* Responsive Styles */

/* Tablet */
@media (max-width: 1024px) {
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper,
    .gabs-slider-wrapper .swiper {
        padding: 30px 0 80px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-icon,
    .gabs-slider-wrapper .gabs-slide-icon {
        width: 48px !important;
        height: 48px !important;
        left: 12% !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-icon img,
    .gabs-slider-wrapper .gabs-slide-icon img {
        width: 28px !important;
        height: 28px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-text-box,
    .gabs-slider-wrapper .gabs-slide-text-box {
        padding: 20px 25px !important;
        top: 10% !important;
        max-width: 75% !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-background,
    .gabs-slider-wrapper .gabs-slide-background {
        height: 360px !important;
    }
}

/* Mobile - Stack all slides */
@media (max-width: 768px) {
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper,
    .gabs-slider-wrapper .swiper {
        padding: 30px 0 40px !important;
    }
    
    /* Override Swiper's default behavior to stack slides */
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-wrapper,
    .gabs-slider-wrapper .swiper-wrapper {
        flex-direction: column !important;
        transform: none !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-slide,
    .gabs-slider-wrapper .swiper-slide {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-background,
    .gabs-slider-wrapper .gabs-slide-background {
        height: 320px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-icon,
    .gabs-slider-wrapper .gabs-slide-icon {
        width: 44px !important;
        height: 44px !important;
        top: 0% !important;
        left: 50px !important;
        border-radius: 3px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-icon img,
    .gabs-slider-wrapper .gabs-slide-icon img {
        width: 26px !important;
        height: 26px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-text-box,
    .gabs-slider-wrapper .gabs-slide-text-box {
        padding: 18px 22px !important;
        max-width: 85% !important;
        top: 8% !important;
        left: 30px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-number,
    .gabs-slider-wrapper .gabs-slide-number {
        font-size: 30px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-title,
    .gabs-slider-wrapper .gabs-slide-title {
        font-size: 18px !important;
    }
    
    /* Hide navigation buttons on mobile since we're stacking */
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-next,
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-button-prev,
    .gabs-slider-wrapper .swiper-button-next,
    .gabs-slider-wrapper .swiper-button-prev {
        display: none !important;
    }
    
    /* Hide pagination on mobile */
    .elementor-widget-custom_slider .gabs-slider-wrapper .swiper-pagination,
    .gabs-slider-wrapper .swiper-pagination {
        display: none !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-background,
    .gabs-slider-wrapper .gabs-slide-background {
        height: 280px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-icon,
    .gabs-slider-wrapper .gabs-slide-icon {
        width: 40px !important;
        height: 40px !important;
        top: 0 !important;
        border-radius: 2px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-icon img,
    .gabs-slider-wrapper .gabs-slide-icon img {
        width: 24px !important;
        height: 24px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-text-box,
    .gabs-slider-wrapper .gabs-slide-text-box {
        padding: 25px 20px 30px !important;
        max-width: 50% !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-number,
    .gabs-slider-wrapper .gabs-slide-number {
        font-size: 20px !important;
    }
    
    .elementor-widget-custom_slider .gabs-slider-wrapper .gabs-slide-title,
    .gabs-slider-wrapper .gabs-slide-title {
        font-size: 16px !important;
    }
}

/* Elementor Editor Fixes */
.elementor-editor-active .gabs-slider-wrapper .swiper-wrapper {
    transform: none !important;
}
