/* =========================================================
 * Custom Testimonial Image Slider — Styles
 * ========================================================= */

.ctis-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* ---------- Carousel container ---------- */
.ctis-carousel {
    position: relative;
    width: 100%;
}

.ctis-track-viewport {
    overflow: hidden;
    width: 100%;
    cursor: grab;
    user-select: none;
}

.ctis-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

/* ---------- Slide ---------- */
.ctis-slide {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
}

/* ---------- Image card ---------- */
.ctis-card {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.06);
    transition:
        transform   0.4s cubic-bezier(0.34, 1.26, 0.64, 1),
        box-shadow  0.4s cubic-bezier(0.34, 1.26, 0.64, 1);
    will-change: transform;
}

.ctis-slide:hover .ctis-card {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 20px 48px rgba(26, 171, 95, 0.22),
        0 8px 20px rgba(0, 0, 0, 0.10);
}

/* Shine sweep on hover */
.ctis-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-position: -200% center;
    pointer-events: none;
    z-index: 2;
    transition: background-position 0.65s ease;
}

.ctis-slide:hover .ctis-card::after {
    background-position: 200% center;
}

/* ---------- Image ---------- */
.ctis-card img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: inherit;
    pointer-events: none;
    /* Guarantee the image element itself is never visually suppressed by an
       inherited rule from the theme or Elementor's defaults. */
    opacity: 1;
    visibility: visible;
}

/* ---------- Pagination dots ---------- */
.ctis-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.ctis-dot {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background-color: #bbf7d0;
    border: none;
    cursor: pointer;
    padding: 0;
    transition:
        background-color 0.3s ease,
        width            0.35s cubic-bezier(0.34, 1.26, 0.64, 1),
        transform        0.3s ease;
}

.ctis-dot.is-active {
    background-color: #1aab5f;
    width: 24px;
}

.ctis-dot:hover:not(.is-active) {
    background-color: #4ade80;
    transform: scale(1.3);
}

/* ---------- Entrance animation ---------- */
.ctis-wrapper.ctis-entrance-ready {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctis-wrapper.ctis-entrance-visible {
    opacity: 1;
    transform: translateY(0);
}

.ctis-slide.ctis-slide-hidden {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition:
        opacity   0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctis-slide.ctis-slide-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---------- Responsive ---------- */
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ctis-card,
    .ctis-card::after,
    .ctis-dot,
    .ctis-arrow,
    .ctis-slide {
        transition: none !important;
        animation: none !important;
    }
    .ctis-wrapper.ctis-entrance-ready,
    .ctis-slide.ctis-slide-hidden {
        opacity: 1;
        transform: none !important;
        transition: none !important;
    }
}