/* ========== BASE CONTAINER (Image Marquee) ========== */
.dpm-image-marquee.dpm-marquee-container {
    max-height: none;
    overflow: hidden;
    position: relative;
    width: 100%;
    --edge-shadow-color: rgba(0,0,0,1);
    --edge-shadow-blur: 80px;
    --edge-shadow-spread: 60px;
    --image-width: 120px;
    --animation-duration: 10s;
}

/* ========== EDGE SHADOWS (Horizontal - Left/Right) ========== */
.dpm-marquee-container::before,
.dpm-marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 var(--edge-shadow-blur, 80px) var(--edge-shadow-spread, 60px) var(--edge-shadow-color, rgba(0,0,0,1));
}

.dpm-marquee-container::before {
    left: 0;
}

.dpm-marquee-container::after {
    right: 0;
}

@media (max-width: 980px) {
    .dpm-marquee-container::before,
    .dpm-marquee-container::after {
        box-shadow: 0 0
            var(--edge-shadow-blur-tablet, var(--edge-shadow-blur, 80px))
            var(--edge-shadow-spread-tablet, var(--edge-shadow-spread, 60px))
            var(--edge-shadow-color-tablet, var(--edge-shadow-color, rgba(0,0,0,1)));
    }
}

@media (max-width: 767px) {
    .dpm-marquee-container::before,
    .dpm-marquee-container::after {
        box-shadow: 0 0
            var(--edge-shadow-blur-phone, var(--edge-shadow-blur-tablet, var(--edge-shadow-blur, 80px)))
            var(--edge-shadow-spread-phone, var(--edge-shadow-spread-tablet, var(--edge-shadow-spread, 60px)))
            var(--edge-shadow-color-phone, var(--edge-shadow-color-tablet, var(--edge-shadow-color, rgba(0,0,0,1))));
    }
}

/* ========== EDGE SHADOWS (Vertical - Top/Bottom) ========== */
.dpm-vertical.dpm-marquee-container::before,
.dpm-vertical.dpm-marquee-container::after {
    width: 100%;
    height: 0;
    left: 0;
    right: auto;
    box-shadow: 0 0 var(--edge-shadow-blur, 80px) var(--edge-shadow-spread, 60px) var(--edge-shadow-color, rgba(0,0,0,1));
}

.dpm-vertical.dpm-marquee-container::before {
    top: 0;
}

.dpm-vertical.dpm-marquee-container::after {
    top: auto;
    bottom: 0;
}

@media (max-width: 980px) {
    .dpm-vertical.dpm-marquee-container::before,
    .dpm-vertical.dpm-marquee-container::after {
        box-shadow: 0 0
            var(--edge-shadow-blur-tablet, var(--edge-shadow-blur, 80px))
            var(--edge-shadow-spread-tablet, var(--edge-shadow-spread, 60px))
            var(--edge-shadow-color-tablet, var(--edge-shadow-color, rgba(0,0,0,1)));
    }
}

@media (max-width: 767px) {
    .dpm-vertical.dpm-marquee-container::before,
    .dpm-vertical.dpm-marquee-container::after {
        box-shadow: 0 0
            var(--edge-shadow-blur-phone, var(--edge-shadow-blur-tablet, var(--edge-shadow-blur, 80px)))
            var(--edge-shadow-spread-phone, var(--edge-shadow-spread-tablet, var(--edge-shadow-spread, 60px)))
            var(--edge-shadow-color-phone, var(--edge-shadow-color-tablet, var(--edge-shadow-color, rgba(0,0,0,1))));
    }
}

.dpm-image-marquee.dpm-marquee-container::before,
.dpm-image-marquee.dpm-marquee-container::after {
    width: var(--dpm-edge-width, 0);
    height: var(--dpm-edge-height, 100%);
}

.dpm-image-marquee.dpm-marquee-container::before {
    left: var(--dpm-edge-before-left, 0);
    right: var(--dpm-edge-before-right, auto);
    top: var(--dpm-edge-before-top, 0);
    bottom: var(--dpm-edge-before-bottom, auto);
}

.dpm-image-marquee.dpm-marquee-container::after {
    left: var(--dpm-edge-after-left, auto);
    right: var(--dpm-edge-after-right, 0);
    top: var(--dpm-edge-after-top, 0);
    bottom: var(--dpm-edge-after-bottom, auto);
}

.dpm-marquee-container.dpm-no-shadow::before,
.dpm-marquee-container.dpm-no-shadow::after {
    display: none !important;
}

/* ========== VISUAL BUILDER ========== */
body.et-fb-preview .dpm-marquee-container,
.et-dbp-preview .dpm-marquee-container {
    overflow: hidden !important;
}

body.et-fb-preview .dpm-marquee-content,
.et-dbp-preview .dpm-marquee-content {
    animation-play-state: paused !important;
    flex-wrap: nowrap !important;
    opacity: 1 !important;
}

body.et-fb-preview .dpm-vertical.dpm-image-marquee.dpm-marquee-container,
.et-dbp-preview .dpm-vertical.dpm-image-marquee.dpm-marquee-container {
    overflow: hidden !important;
}

body.et-fb-preview .dpm-vertical .dpm-marquee-wrapper,
.et-dbp-preview .dpm-vertical .dpm-marquee-wrapper {
    max-height: none !important;
    height: 100% !important;
    overflow: hidden;
}

body.et-fb-preview .dpm-marquee-group,
.et-dbp-preview .dpm-marquee-group {
    flex-shrink: 0;
}

/* ========== STRUCTURE ========== */
.dpm-marquee-wrapper {
    overflow: clip;
    width: 100%;
    position: relative;
}

.dpm-vertical.dpm-image-marquee.dpm-marquee-container {
    height: var(--vertical-height);
    overflow: hidden;
}

.dpm-vertical.dpm-marquee-wrapper {
    height: 100%;
    max-height: inherit;
    overflow: hidden;
}

.dpm-vertical .dpm-marquee-content {
    width: 100% !important;
}

.dpm-marquee-content {
    display: flex !important;
    gap: var(--item-gap, 48px);
    width: max-content;
    will-change: transform;
    animation-duration: var(--animation-duration, 10s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dpm-marquee-content[data-ready] {
    opacity: 1;
}

.dpm-marquee-group {
    display: flex !important;
    flex-shrink: 0 !important;
    gap: var(--item-gap, 48px);
    align-items: center;
}

.dpm-vertical .dpm-marquee-group {
    flex-direction: column !important;
}

.dpm-vertical .dpm-marquee-content {
    flex-direction: column !important;
}

.dpm-marquee-group .et_pb_module {
    margin: 0 !important;
}

.dpm-pause-on-hover:hover .dpm-marquee-content {
    animation-play-state: paused !important;
}

/* ========== ITEM (Image Marquee) ========== */
.dpm-image-marquee .dpm-marquee-item {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0 !important;
}

/* ========== IMAGES ========== */
.dpm-marquee-image {
    display: inline-block;
    flex-shrink: 0;
    max-width: none;
    width: var(--image-width, 120px);
    height: var(--image-height, auto);
    object-fit: cover;
    box-sizing: border-box;
    border-style: solid;
}

.dpm-image-marquee .dpm-marquee-item a {
    display: inline-flex;
    line-height: 0;
}

/* Transform hover target: ensure item doesn’t clip scaled image */
.dpm-image-marquee .dpm-marquee-item {
    overflow: visible;
}