/* Hero Slider Widget Styles */

.elementor-slider-container {
    width: 100%;
    height: 100%;
}

/* Background image layer */
.elementor-slides .swiper-slide-bg {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Background video layer – sits above the bg image, below the overlay */
.elementor-slides .swiper-slide-video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.elementor-slides .swiper-slide-video-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* YouTube / Vimeo iframe: stretch beyond the container to hide controls at any viewport size */
.elementor-slides .swiper-slide-video-bg--iframe iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 16:9 aspect ratio — large enough to cover any container */
    width: max(100%, 177.78vh);
    height: max(100%, 56.25vw);
    transform: translate(-50%, -50%);
    border: none;
    pointer-events: none;
}

.elementor-slides .swiper-slide-inner {
    background-position: 50%;
    background-repeat: no-repeat;
    position: absolute;
    inset: 0;
    margin: auto;
    padding: 50px;
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 3;
}

.elementor-slides .swiper-slide-inner,
.elementor-slides .swiper-slide-inner:hover {
    color: #fff;
}

.elementor-slides .swiper-slide .elementor-background-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.elementor-slides .swiper-slide-inner .elementor-slide-badge-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.elementor-slides .swiper-slide-inner .elementor-slide-heading {
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 15px;
}

.elementor-slides .swiper-slide-inner .elementor-slide-subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 15px;
}

.elementor-slides .swiper-slide-inner .elementor-slide-description {
    font-size: 17px;
    line-height: 1.4;
}

.elementor-slides .swiper-slide-inner .elementor-slide-description:not(:last-child),
.elementor-slides .swiper-slide-inner .elementor-slide-heading:not(:last-child),
.elementor-slides .swiper-slide-inner .elementor-slide-subtitle:not(:last-child),
.elementor-slides .swiper-slide-inner .elementor-slide-badge-text:not(:last-child) {
    margin-bottom: 15px;
}

/* Buttons Container */
.elementor-slide-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

/* Individual Buttons */
.elementor-slide-button {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.elementor-slide-button:hover {
    text-decoration: none;
}

/* Primary Button */
.elementor-slide-button-primary {
    /* Inherits base button styles */
}

/* Secondary Button */
.elementor-slide-button-secondary {
    /* Inherits base button styles */
}

/* Vertical Position */
.elementor--v-position-top .swiper-slide-inner {
    align-items: flex-start;
}

.elementor--v-position-bottom .swiper-slide-inner {
    align-items: flex-end;
}

.elementor--v-position-middle .swiper-slide-inner {
    align-items: center;
}

/* Horizontal Position */
.elementor--h-position-left .swiper-slide-inner {
    justify-content: flex-start;
}

.elementor--h-position-right .swiper-slide-inner {
    justify-content: flex-end;
}

.elementor--h-position-center .swiper-slide-inner {
    justify-content: center;
}

/* RTL Support */
/* RTL Support — handled automatically by flex container direction */

/* Hide non-active slides in editor */
.elementor-slides-wrapper div:not(.swiper-slide) > .swiper-slide-inner {
    display: none;
}

/* Responsive */
@media (max-width: 767px) {
    .elementor-slides .swiper-slide-inner {
        padding: 30px;
    }
    
    .elementor-slides .swiper-slide-inner .elementor-slide-heading {
        font-size: 23px;
        line-height: 1;
        margin-bottom: 15px;
    }
    
    .elementor-slides .swiper-slide-inner .elementor-slide-description {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 15px;
    }
    
    /* Buttons stack vertically on mobile */
    .elementor-slide-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

/* Stacked layout */
.elementor-buttons-layout-vertical .elementor-slide-buttons {
    flex-direction: column;
    gap: 10px;
}

/* Editor-specific fixes - Critical for Elementor Editor Panel */
.elementor-edit-mode .elementor-widget-ababil-hero-slider {
    /* Ensure widget has proper dimensions in editor */
}

.elementor-edit-mode .elementor-widget-ababil-hero-slider .elementor-swiper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.elementor-edit-mode .elementor-widget-ababil-hero-slider .elementor-slides-wrapper {
    display: flex !important;
    flex-direction: row !important;
    min-height: 300px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.elementor-edit-mode .elementor-widget-ababil-hero-slider .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    height: 100%;
    position: relative;
}

.elementor-edit-mode .elementor-widget-ababil-hero-slider .swiper-slide {
    min-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure slides display properly in all modes */
.elementor-widget-ababil-hero-slider .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

/* ===== NAVIGATION ARROWS ===== */

/* Arrow Buttons */
.elementor-widget-ababil-hero-slider .elementor-swiper-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: #fff;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.elementor-widget-ababil-hero-slider .elementor-swiper-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.elementor-widget-ababil-hero-slider .elementor-swiper-button-prev {
    left: 15px;
}

.elementor-widget-ababil-hero-slider .elementor-swiper-button-next {
    right: 15px;
}

/* Outside arrows position */
.elementor-arrows-position-outside .elementor-swiper-button-prev {
    left: -44px;
}

.elementor-arrows-position-outside .elementor-swiper-button-next {
    right: -44px;
}

/* RTL arrow swap */
[dir="rtl"] .elementor-widget-ababil-hero-slider .elementor-swiper-button-prev {
    left: auto;
    right: 15px;
}

[dir="rtl"] .elementor-widget-ababil-hero-slider .elementor-swiper-button-next {
    right: auto;
    left: 15px;
}

[dir="rtl"] .elementor-arrows-position-outside .elementor-swiper-button-prev {
    right: -44px;
    left: auto;
}

[dir="rtl"] .elementor-arrows-position-outside .elementor-swiper-button-next {
    left: -44px;
    right: auto;
}

/* ===== PAGINATION ===== */

.elementor-widget-ababil-hero-slider .swiper-pagination {
    position: absolute;
    z-index: 10;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    justify-content: center;
    width: auto;
}

/* Outside pagination position */
.elementor-pagination-position-outside .swiper-pagination {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 15px;
}

.elementor-widget-ababil-hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    opacity: 1;
}

.elementor-widget-ababil-hero-slider .swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.8);
}

.elementor-widget-ababil-hero-slider .swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Ken Burns effect */
.elementor-ken-burns {
    animation-duration: 20s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    will-change: transform;
}

.elementor-ken-burns--in {
    animation-name: ken-burns-in;
}

.elementor-ken-burns--out {
    animation-name: ken-burns-out;
}

/* Paused state for inactive slides */
.elementor-widget-ababil-hero-slider .swiper-slide:not(.swiper-slide-active) .elementor-ken-burns {
    animation-play-state: paused;
}

.elementor-widget-ababil-hero-slider .swiper-slide-active .elementor-ken-burns {
    animation-play-state: running;
}

@keyframes ken-burns-in {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

@keyframes ken-burns-out {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Pre-hide animatable elements to prevent flash before JS initialises.
   Scoped tightly so only hero-slider content is affected.
   The CSS animation's fill-mode overrides this once the animation starts.
   data-anim="" (None) is intentionally excluded so those elements stay visible. */
.elementor-widget-ababil-hero-slider .elementor-slides [data-anim]:not([data-anim=""]) {
    opacity: 0;
}

/* Slide contents wrapper */
.elementor-slides .swiper-slide-contents {
    position: relative;
    z-index: 2;
    max-width: 66%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Ensure proper stacking */
.elementor-widget-ababil-hero-slider {
    position: relative;
}

.elementor-widget-ababil-hero-slider .elementor-slides-wrapper {
    position: relative;
}