/* ========== BASE CONTAINER ========== */
.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;
    --icon-color: #000000;
    --icon-size: 30px;
    --image-width: 30px;
    --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;
}

/* Tablet/phone: Divi prints the same --edge-shadow-* names inside media queries on `.dpm-marquee-container`. */

/* ========== 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;
    /* For vertical: 0 [Y-offset] [blur] [spread] [color] */
    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;
}

/*
 * Divi 5: edge-shadow orientation is responsive via container vars. These rules override the
 * desktop-only `.dpm-vertical` class when tablet/phone switches between horizontal and vertical.
 */
.dpm-text-marquee.dpm-marquee-container::before {
    width: var(--dpm-edge-width, 0);
    height: var(--dpm-edge-height, 100%);
    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-text-marquee.dpm-marquee-container::after {
    width: var(--dpm-edge-width, 0);
    height: var(--dpm-edge-height, 100%);
    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);
}

/* Hide shadow when disabled */
.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-marquee-container,
.et-dbp-preview .dpm-vertical.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; 
}

body.et-fb-preview .dpm-marquee-icon::before,
.et-dbp-preview .dpm-marquee-icon::before {
    font-family: 'ETmodules', sans-serif !important;
}

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

/* Vertical marquee specific styles */
.dpm-vertical.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;
    --move-distance: 0px;
    animation-duration: var(--animation-duration, 10s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Divi 4 parity: fallback motion before text-marquee.js measures and injects dpm-{wrapperId} keyframes. */
@keyframes dpm-fallback-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@keyframes dpm-fallback-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
@keyframes dpm-fallback-up {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}
@keyframes dpm-fallback-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/*
 * Theme body often sets line-height in em (e.g. Divi 1.7em). That inherits into the ticker and
 * throws off flex row height / vertical alignment. Reset inside the module only.
 */
.dpm-text-marquee {
    line-height: 1;
}

.dpm-text-marquee.dpm-direction-left .dpm-marquee-content {
    animation-name: dpm-fallback-left;
}
.dpm-text-marquee.dpm-direction-right .dpm-marquee-content {
    animation-name: dpm-fallback-right;
}
.dpm-text-marquee.dpm-direction-top .dpm-marquee-content {
    animation-name: dpm-fallback-left;
}
.dpm-text-marquee.dpm-direction-bottom .dpm-marquee-content {
    animation-name: dpm-fallback-right;
}
.dpm-text-marquee.dpm-vertical.dpm-direction-left .dpm-marquee-content {
    animation-name: dpm-fallback-up;
}
.dpm-text-marquee.dpm-vertical.dpm-direction-right .dpm-marquee-content {
    animation-name: dpm-fallback-down;
}
.dpm-text-marquee.dpm-vertical.dpm-direction-top .dpm-marquee-content {
    animation-name: dpm-fallback-up;
}
.dpm-text-marquee.dpm-vertical.dpm-direction-bottom .dpm-marquee-content {
    animation-name: dpm-fallback-down;
}

/*
 * Divi 5: direction is responsive via --dpm-fallback-animation on the container.
 * When the variable is unset (Divi 4), this rule is invalid and class-based rules above apply.
 */
.dpm-text-marquee.dpm-marquee-container .dpm-marquee-content {
    animation-name: var(--dpm-fallback-animation);
}

.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 ========== */
.dpm-marquee-item {
    display: inline-flex !important;
    align-items: center;
    gap: var(--element-gap, 10px);
    flex-shrink: 0 !important;
    white-space: nowrap;
    box-sizing: border-box;
    border-style: solid;
}

/* Content > Item Background: stacking for Divi video / pattern / mask (Blurb Marquee / Testimonial pattern) */
.dpm-text-marquee .dpm-marquee-item {
    position: relative;
    overflow: hidden;
}

.dpm-text-marquee .dpm-marquee-item > .et_pb_section_video_bg {
    z-index: 0;
}

.dpm-text-marquee .dpm-marquee-item > .et_pb_section_video_bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.dpm-text-marquee .dpm-marquee-item > .et_pb_background_pattern,
.dpm-text-marquee .dpm-marquee-item > .et_pb_background_mask {
    z-index: 1;
    pointer-events: none;
}

.dpm-text-marquee .dpm-marquee-item > .dpm-marquee-icon,
.dpm-text-marquee .dpm-marquee-item > .dpm-marquee-image,
.dpm-text-marquee .dpm-marquee-item > .dpm-marquee-text {
    position: relative;
    z-index: 2;
}

.dpm-marquee-text { 
    display: inline-block; 
    white-space: nowrap; 
    flex-shrink: 0; 
}

/* Child module wrapper: flex so text / icon / image align in a row inside Divi’s inner container (VB + frontend). */
.dpm_text_marquee_item .et_pb_module_inner {
    display: flex;
}

/* ========== IMAGES ========== */
.dpm-marquee-image {
    display: inline-block;
    flex-shrink: 0;
    max-width: none;
    width: var(--image-width, 30px);
    height: auto;
}

/* Ensure border-style applies when Divi sets border width/color (avoids resets) */
.dpm-marquee-image {
    box-sizing: border-box;
    border-style: solid;
}

/* ========== ICONS ========== */
.dpm-marquee-icon {
    display: none !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--icon-color, #000000);
    font-size: var(--icon-size, 30px);
    line-height: 1;
    font-family: 'ETmodules', sans-serif !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dpm-marquee-icon::before { 
    content: attr(data-icon); 
}

/* Ensure border-style applies when Divi sets border width/color (avoids resets) */
.dpm-marquee-icon {
    box-sizing: border-box;
    border-style: solid;
}

.dpm-use-icons .dpm-marquee-icon { 
    display: inline-flex !important; 
}

.dpm-use-icons .dpm-marquee-image { 
    display: none !important; 
}

.dpm-use-images .dpm-marquee-icon { 
    display: none !important; 
}

.dpm-use-images .dpm-marquee-image { 
    display: inline-block !important; 
}

/* ========== TEXT MASKING (background-clip: text + gradient or uploaded image) ========== */
.dpm-text-marquee.dpm-text-masking .dpm-marquee-text {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.dpm-text-marquee.dpm-text-masking:not(.dpm-text-masking-custom) .dpm-marquee-text {
    background-image: linear-gradient(
        90deg,
        #6366f1 0%,
        #a855f7 45%,
        #ec4899 100%
    );
    background-size: 200% auto;
    background-position: 0% 50%;
    background-repeat: no-repeat;
}

.dpm-text-marquee.dpm-text-masking.dpm-vertical:not(.dpm-text-masking-custom) .dpm-marquee-text {
    background-image: linear-gradient(
        180deg,
        #6366f1 0%,
        #a855f7 45%,
        #ec4899 100%
    );
    background-size: auto 200%;
    background-position: 50% 0%;
}

.dpm-text-marquee.dpm-text-masking.dpm-text-masking-custom .dpm-marquee-text {
    background-image: var(--dpm-text-clip-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}