/**
 * SVG Animator Module Styles
 * 
 * Provides base styling for the SVG Animator module
 * Ensures proper display and responsive behavior of SVG animations
 */

/* Main module container */
.svg_animator {
    position: relative;
    display: block;
    width: 100%;
}

/* Inner container */
.svg_animator__inner {
    position: relative;
    display: block;
    width: 100%;
}

/* SVG container */
.svg_animator__svg-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 0; /* Remove any line-height issues */
}

/* SVG element styling */
.svg_animator__svg-container svg {
    max-width: 100%;
    height: auto;
    display: block;
    /* Ensure SVG maintains aspect ratio */
}

/* Responsive handling */
.svg_animator__svg-container svg {
    width: 100%;
}

/* Ensure paths are visible during animation */
.svg_animator__svg-container svg path,
.svg_animator__svg-container svg line,
.svg_animator__svg-container svg polyline,
.svg_animator__svg-container svg polygon,
.svg_animator__svg-container svg circle,
.svg_animator__svg-container svg ellipse,
.svg_animator__svg-container svg rect {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Animation states */
.svg_animator[data-trigger="on"][data-trigger-type="hover"] .svg_animator__svg-container {
    cursor: pointer;
}

.svg_animator[data-trigger="on"][data-trigger-type="click"] .svg_animator__svg-container {
    cursor: pointer;
}

/* Loading state (optional) */
.svg_animator.is-loading .svg_animator__svg-container {
    opacity: 0.7;
}

.svg_animator.is-animating .svg_animator__svg-container {
    opacity: 1;
}

/* SVG overflow - allow strokes to render fully */
.svg_animator__svg-container svg {
    overflow: visible;
}

/* Ensure proper rendering on different devices */
@media (max-width: 767px) {
    .svg_animator__svg-container svg {
        max-width: 100%;
    }
}

/* Print styles */
@media print {
    .svg_animator__svg-container svg path,
    .svg_animator__svg-container svg line, 
    .svg_animator__svg-container svg polyline,
    .svg_animator__svg-container svg polygon,
    .svg_animator__svg-container svg circle,
    .svg_animator__svg-container svg ellipse,
    .svg_animator__svg-container svg rect {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* Visual Builder specific styles */
.et-fb .svg_animator .svg_animator__svg-container {
    /* Ensure animations work properly in VB */
    pointer-events: auto;
}

/* Performance optimization */
.svg_animator__svg-container svg {
    will-change: auto;
}

.svg_animator.is-animating .svg_animator__svg-container svg {
    will-change: stroke-dasharray, stroke-dashoffset;
}

.svg_animator.animation-complete .svg_animator__svg-container svg {
    will-change: auto;
}