.afcs-simple {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--afcs-height, 100vh);
    overflow: hidden;
    box-sizing: border-box;
    color: #fff;
}

.afcs-simple,
.afcs-simple * {
    box-sizing: border-box;
}

.afcs-simple__viewport {
    position: relative;
    width: 100%;
    min-height: var(--afcs-height, 100vh);
    overflow: hidden;
}

.afcs-simple__slides {
    position: relative;
    width: 100%;
    min-height: var(--afcs-height, 100vh);
}

.afcs-simple__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: var(--afcs-height, 100vh);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--afcs-duration, 700ms) ease, visibility 0s linear var(--afcs-duration, 700ms);
}

.afcs-simple__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
    transition: opacity var(--afcs-duration, 700ms) ease;
}


/* When a single text/button combo is shared by multiple images, render it as
   one persistent layer outside the fading slides. This prevents the left side
   from fading out and back in or shifting when the image changes. */
.afcs-simple__static-content {
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    z-index: 6;
    align-self: auto;
    padding: 20px 3.84%;
    color: #fff;
    opacity: 1;
    transform: translateY(-50%);
    pointer-events: auto;
}

/* When the text is static and the slides contain image-only content, the
   visual must remain in the right-hand grid column. Without this explicit
   placement, the visual becomes the first grid child and moves underneath the
   static left content. */
.afcs-simple__slide--static-content .afcs-simple__visual {
    grid-column: 2;
}

.afcs-simple__content,
.afcs-simple__visual {
    min-width: 0;
    width: 100%;
    position: relative;
    z-index: 5;
}

.afcs-simple__content {
    align-self: center;
    padding: 20px 3.84%;
    color: #fff;
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
    transition: opacity var(--afcs-duration, 700ms) ease, transform var(--afcs-duration, 700ms) ease;
}

.afcs-simple__slide.is-active .afcs-simple__content {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 120ms;
}

/* Force the slider's own text white without changing Avada's global typography. */
.afcs-simple__title,
.afcs-simple__description,
.afcs-simple__description p,
.afcs-simple__description a {
    color: #fff !important;
}

.afcs-simple__title {
    margin: 0 0 20px;
}

.afcs-simple__description {
    margin: 0 0 25px;
}

.afcs-simple__description p:last-child {
    margin-bottom: 0;
}

.afcs-simple__button {
    margin-top: 10px;
}

/* Custom SVGRepo icon: keep Avada's native icon_position hover animation.
   Do not add a competing transform here; Avada moves the two icon instances. */
.afcs-simple__button .icon-arrow-right-svgrepo-com-4:before {
    content: "\e900";
}

.afcs-simple__button .icon-arrow-right-svgrepo-com-4 {
    font-family: inherit;
    display: inline-block;
    flex: 0 0 auto;
}

/* Avada's icon_position transition, scoped to this slider so the custom icon
   behaves exactly like the native button icon. */
.afcs-simple__button .fusion-button[data-hover="icon_position"] i {
    transition:
        color .2s,
        opacity .4s cubic-bezier(.21, .6, .35, 1) .25s,
        transform .4s cubic-bezier(.21, .6, .35, 1) .25s;
    --button-hover-content-transition:
        color .2s,
        opacity .4s cubic-bezier(.21, .6, .35, 1) .25s,
        transform .4s cubic-bezier(.21, .6, .35, 1) .25s;
}

/* Never clip the two-icon transition at our wrapper. */
.afcs-simple__button,
.afcs-simple__button .fusion-button {
    overflow: visible;
}

/* Re-run the image entrance whenever a slide becomes active. */
@keyframes afcs-image-in {
    from {
        opacity: 0;
        transform: scale(.90);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Keep the first profile image completely hidden until JavaScript confirms
   that its position is in the middle zone of the viewport. This prevents the
   image from appearing first, disappearing, and then animating in. */
.afcs-simple:not(.afcs-simple--first-image-ready) .afcs-simple__slide.is-active .afcs-simple__image {
    opacity: 0;
    transform: scale(.90);
    transform-origin: 50% 50%;
}

/* Once the image reaches the middle zone, reveal it with the smooth entrance
   animation. Later slide changes use the same animation normally. */
.afcs-simple.afcs-simple--first-image-ready .afcs-simple__slide.is-active .afcs-simple__image {
    animation: afcs-image-in 950ms cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: 80ms;
    transform-origin: 50% 50%;
}


/* Image is a stable visual unit. Dots are in normal flow, exactly 50px
   below the profile image instead of being positioned against the viewport. */
.afcs-simple__visual {
    position: relative;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 3.84%;
    opacity: 0;
    transform: none;
    transition: opacity var(--afcs-duration, 700ms) ease;
}

.afcs-simple__slide.is-active .afcs-simple__visual {
    opacity: 1;
    transform: none;
    transition-delay: 80ms;
}

.afcs-simple__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(var(--afcs-height, 100vh) - 180px);
    object-fit: contain;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
}

.afcs-simple__dots {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 50px;
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: auto;
    z-index: 10;
    flex: 0 0 auto;
}

.afcs-simple__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    opacity: .45;
    cursor: pointer;
    transition: opacity 180ms ease, transform 180ms ease;
}

.afcs-simple__dot.is-active {
    opacity: 1;
    transform: scale(1.25);
}

.afcs-simple__hit {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    z-index: 1;
    cursor: pointer;
}

.afcs-simple__hit--prev { left: 0; }
.afcs-simple__hit--next { right: 0; }

.afcs-simple__hit:focus-visible,
.afcs-simple__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.afcs-simple-placeholder {
    padding: 30px;
    border: 1px dashed rgba(0,0,0,.2);
}

@media (max-width: 1024px) {
    .afcs-simple__image {
        max-height: calc(var(--afcs-height, 100vh) - 180px);
    }
}

@media (max-width: 640px) {
    .afcs-simple,
    .afcs-simple__viewport,
    .afcs-simple__slides,
    .afcs-simple__slide {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .afcs-simple__slide {
        position: absolute;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        padding: 16px;
    }

    .afcs-simple__slide--static-content .afcs-simple__visual {
        grid-column: 1;
    }

    .afcs-simple__content,
    .afcs-simple__visual,
    .afcs-simple__static-content {
        padding: 8px 0;
        width: 100%;
        max-width: 100%;
    }

    .afcs-simple__static-content {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        z-index: 6;
        padding: 8px 0;
    }

    .afcs-simple__content {
        order: 1;
    }

    .afcs-simple__visual {
        order: 2;
    }

    .afcs-simple__image {
        max-width: min(100%, 360px);
        max-height: 45vh;
    }

    .afcs-simple__dots {
        gap: 7px;
        margin-top: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .afcs-simple__slide,
    .afcs-simple__content,
    .afcs-simple__visual,
    .afcs-simple__dot,
    .afcs-simple__button .icon-arrow-right-svgrepo-com-4 {
        transition: none !important;
    }
    .afcs-simple__slide.is-active .afcs-simple__image {
        animation: none !important;
    }
}

/* Only the dot row belonging to the active slide is visible. Each row stays
   physically attached to its own profile image. */
.afcs-simple__slide:not(.is-active) .afcs-simple__dots {
    visibility: hidden;
    pointer-events: none;
}
.afcs-simple__slide.is-active .afcs-simple__dots {
    visibility: visible;
    pointer-events: auto;
}