/* === Integration Tile Carousel (Elementor widget) === */

.synqly-tile-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.synqly-tile-carousel-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    animation-name: synqly-tile-carousel-scroll;
    animation-duration: var(--synqly-carousel-duration, 30s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.synqly-tile-carousel-track.synqly-tile-carousel-reverse {
    animation-direction: reverse;
}

.synqly-tile-carousel:hover .synqly-tile-carousel-track {
    animation-play-state: paused;
}

.synqly-tile-carousel-item {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

.synqly-tile-carousel-item[aria-hidden="true"] a {
    pointer-events: none;
}

/* Logo-only tile (see synqly_render_carousel_logo_tile()). Colors/radius/padding
   /logo size below are fallback defaults — the admin-configured values are
   injected via synqly_render_carousel_dynamic_css(). */
.synqly-carousel-tile {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 1px solid #E9EEFA;
    border-radius: 10px;
    padding: 20px;
}

.synqly-carousel-tile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.synqly-carousel-tile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 60px;
}

.synqly-carousel-tile-logo img,
.synqly-carousel-tile-logo svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@keyframes synqly-tile-carousel-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .synqly-tile-carousel-track {
        animation: none;
    }
}