/* Core layout */
.ems-slider {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    --ems-fade-duration: 300ms;
    --ems-fade-ease: ease;
}

.ems-slides {
    position: relative;
    display: block;
    width: 100%;
}

.ems-slide {
    display: none;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    will-change: opacity;
}

.ems-slide.active,
.ems-slide.leaving {
    display: block;
}

.ems-slide.pre-active {
    display: block;
    opacity: 0;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.ems-slide.active {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--ems-fade-duration, 300ms) var(--ems-fade-ease, ease);
    width: 100%;
    position: relative; /* ensure it can layer above leaving */
    z-index: 2;
}

.ems-slide.leaving {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    transition: opacity var(--ems-fade-duration, 300ms) var(--ems-fade-ease, ease);
    z-index: 1;
}

.elementor-widget-horse-carousel {
    width: 100%;
}

/* Editor placeholder visuals */
.ems-slide__placeholder,
.ems-slider__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    color: #666;
    background: repeating-linear-gradient(45deg, #f6f8fa, #f6f8fa 10px, #eef1f4 10px, #eef1f4 20px);
    text-align: center;
}

/* Arrows */
button.ems-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    width: var(--ems-arrow-size, 40px);
    height: var(--ems-arrow-size, 40px);
    background: var(--ems-arrow-bg, transparent);
    color: var(--ems-arrow-color, #fff);
    transition: background 140ms ease, color 140ms ease;
}

.ems-prev {
    left: var(--ems-arrow-offset-x, 12px);
}

.ems-next {
    right: var(--ems-arrow-offset-x, 12px);
}

.ems-nav svg {
    width: calc(var(--ems-arrow-size, 40px) * 0.55);
    height: calc(var(--ems-arrow-size, 40px) * 0.55);
    padding: 0 !important;
    color: var(--ems-arrow-color, #fff);
    fill: var(--ems-arrow-color, #fff);
}

button.ems-nav:hover {
    background: var(--ems-arrow-bg-hover, var(--ems-arrow-bg, transparent));
    color: var(--ems-arrow-color-hover, var(--ems-arrow-color, #fff));
}

button.ems-nav:hover svg {
    color: var(--ems-arrow-color-hover, var(--ems-arrow-color, #fff));
    fill: var(--ems-arrow-color-hover, var(--ems-arrow-color, #fff));
}

/* Dots */
.ems-dots {
    position: absolute;
    left: 50%;
    bottom: var(--ems-dots-bottom, 16px);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: var(--ems-dots-gap, 8px);
    align-items: center;
}

button.ems-dot {
    cursor: pointer;
    border: 0;
    width: var(--ems-dot-size, 10px);
    height: var(--ems-dot-size, 10px);
    border-radius: var(--ems-dot-radius, 50%);
    background: var(--ems-dot-color, #ccc);
    padding: 0 !important;
    transition: background 140ms ease, transform 140ms ease;
}

button.ems-dot.active {
    background: var(--ems-dot-active-color, #333);
}

button.ems-dot:hover {
    background: var(--ems-dot-hover-color, var(--ems-dot-color, #ccc));
    transform: var(--ems-dot-hover-transform, none);
}

button.ems-dot.active:hover {
    background: var(--ems-dot-active-hover-color, var(--ems-dot-active-color, #333));
}

/* Focus visible */
button.ems-dot:focus-visible,
button.ems-nav:focus-visible {
    outline: 2px solid var(--ems-focus-outline, #000);
    outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ems-slide.active {
        transition: none;
    }
}