/* ============================================================
   Marquee Carousel Widget — marquee-carousel.css
   Place in: /wp-content/themes/your-child-theme/elementor-widgets/
   ============================================================ */

/* Wrapper — clips overflow and holds fade overlays */
.mqc-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* The scrolling track */
.mqc-track {
    overflow: hidden;
    width: 100%;
    gap: 48px;
}

/* Inner flex row — will be duplicated by JS for seamless loop */
.mqc-inner {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    /* animation applied via JS */
}

/* Each image item */
.mqc-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mqc-item img {
    display: block;
    max-width: none;         
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Edge fade overlays */
.mqc-fade-left,
.mqc-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;           /* default — overridden by Elementor controls */
    z-index: 2;
    pointer-events: none;
}

.mqc-fade-left {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}

.mqc-fade-right {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}

/* Keyframe — updated dynamically by JS with correct pixel width */
@keyframes mqc-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(var(--mqc-travel)); }
}