/* Default line thickness and speeds */
.line-widget {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: transparent;
    height: var(--line-thickness, 1px);

    /* Define fallback CSS variables */
    --line-thickness: 1px;
    --line-speed: 4s;
    --line-duration: 3.5s;
}

/* Line inside the widget */
.line-widget-line {
    position: relative;
    z-index: 1;
    background-color: transparent;
    border: none;
}

/* Horizontal Line */
.line-widget-line.horizontal {
    width: 100%;
    height: var(--line-thickness, 1px);
}

/* Vertical Line */
.line-widget-line.vertical {
    width: var(--line-thickness, 1px);
    height: 100%;
}

/* Animated glow pseudo-element */
.line-widget-line::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, transparent, transparent, transparent);
    opacity: 1;
    transition: opacity 0.5s ease-in-out var(--line-duration, 3.5s);
    animation: none;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Glow shadow when Elementor Gradient background is active */
.line-widget[data-elementor-gradient_background] .line-widget-line::before {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Direction left to right */
.line-widget[data-direction="left-to-right"] .line-widget-line::before {
    animation: glow-left-to-right var(--line-speed, 4s) linear infinite;
    background: linear-gradient(90deg, transparent, transparent, transparent);
}

/* Direction right to left */
.line-widget[data-direction="right-to-left"] .line-widget-line::before {
    animation: glow-right-to-left var(--line-speed, 4s) linear infinite;
    background: linear-gradient(270deg, transparent, transparent, transparent);
}

/* Animation Keyframes */
@keyframes glow-left-to-right {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes glow-right-to-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}