/* ================================================
   UreTech SVG Draw Widget
   Blueprint / Sketch path-drawing animation
   ================================================ */

.ut-svgdraw {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0;
}

/* --- Dot Grid Background --- */
.ut-svgdraw__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.ut-svgdraw.is-active .ut-svgdraw__dots,
.ut-svgdraw.construction-ready .ut-svgdraw__dots {
    opacity: 1;
}

/* ─── Shared containment: both layers use same absolute inset
   so SVG and construction lines overlap perfectly.
   SVG viewBox + preserveAspectRatio="xMidYMid meet" (default)
   handles proper scaling within this shared box. ─── */

/* --- Construction Lines Layer --- */
.ut-svgdraw__construction {
    position: absolute;
    inset: 8%;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ut-svgdraw__construction svg {
    width: 100%;
    height: 100%;
}
.ut-svgdraw__construction path,
.ut-svgdraw__construction line,
.ut-svgdraw__construction rect,
.ut-svgdraw__construction circle {
    stroke-dasharray: var(--cl-len, 2000);
    stroke-dashoffset: var(--cl-len, 2000);
    transition: none;
}
.ut-svgdraw.is-active .ut-svgdraw__construction path,
.ut-svgdraw.is-active .ut-svgdraw__construction line,
.ut-svgdraw.is-active .ut-svgdraw__construction rect,
.ut-svgdraw.is-active .ut-svgdraw__construction circle,
.ut-svgdraw.construction-ready .ut-svgdraw__construction path,
.ut-svgdraw.construction-ready .ut-svgdraw__construction line,
.ut-svgdraw.construction-ready .ut-svgdraw__construction rect,
.ut-svgdraw.construction-ready .ut-svgdraw__construction circle {
    animation: ut-draw-line var(--cl-dur, 1.5s) var(--cl-ease, ease) var(--cl-delay, 0s) forwards;
}

/* In hover mode, keep construction lines drawn after animation */
.ut-svgdraw.construction-ready .ut-svgdraw__construction path,
.ut-svgdraw.construction-ready .ut-svgdraw__construction line,
.ut-svgdraw.construction-ready .ut-svgdraw__construction rect,
.ut-svgdraw.construction-ready .ut-svgdraw__construction circle {
    animation-fill-mode: forwards;
}

/* --- Main SVG Canvas --- */
.ut-svgdraw__canvas {
    position: absolute;
    inset: 8%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ut-svgdraw__svg-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ut-svgdraw__svg-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* All drawable elements start hidden */
.ut-svgdraw__svg-wrap svg path,
.ut-svgdraw__svg-wrap svg line,
.ut-svgdraw__svg-wrap svg polyline,
.ut-svgdraw__svg-wrap svg polygon,
.ut-svgdraw__svg-wrap svg rect,
.ut-svgdraw__svg-wrap svg circle,
.ut-svgdraw__svg-wrap svg ellipse {
    stroke-dasharray: var(--path-len, 2000);
    stroke-dashoffset: var(--path-len, 2000);
    fill: transparent !important;
    transition: none;
}

/* When active, animate drawing */
.ut-svgdraw.is-active .ut-svgdraw__svg-wrap svg path,
.ut-svgdraw.is-active .ut-svgdraw__svg-wrap svg line,
.ut-svgdraw.is-active .ut-svgdraw__svg-wrap svg polyline,
.ut-svgdraw.is-active .ut-svgdraw__svg-wrap svg polygon,
.ut-svgdraw.is-active .ut-svgdraw__svg-wrap svg rect,
.ut-svgdraw.is-active .ut-svgdraw__svg-wrap svg circle,
.ut-svgdraw.is-active .ut-svgdraw__svg-wrap svg ellipse {
    animation: ut-draw-line var(--path-dur, 3s) var(--path-ease, cubic-bezier(0.4,0,0.2,1)) var(--path-delay, 0s) forwards;
}

/* Fill reveal after draw */
.ut-svgdraw.is-drawn.fill-fade .ut-svgdraw__svg-wrap svg path,
.ut-svgdraw.is-drawn.fill-fade .ut-svgdraw__svg-wrap svg line,
.ut-svgdraw.is-drawn.fill-fade .ut-svgdraw__svg-wrap svg polyline,
.ut-svgdraw.is-drawn.fill-fade .ut-svgdraw__svg-wrap svg polygon,
.ut-svgdraw.is-drawn.fill-fade .ut-svgdraw__svg-wrap svg rect,
.ut-svgdraw.is-drawn.fill-fade .ut-svgdraw__svg-wrap svg circle,
.ut-svgdraw.is-drawn.fill-fade .ut-svgdraw__svg-wrap svg ellipse {
    fill: var(--path-fill, transparent) !important;
    transition: fill 0.8s ease 0.2s;
}

.ut-svgdraw.is-drawn.fill-instant .ut-svgdraw__svg-wrap svg path,
.ut-svgdraw.is-drawn.fill-instant .ut-svgdraw__svg-wrap svg line,
.ut-svgdraw.is-drawn.fill-instant .ut-svgdraw__svg-wrap svg polyline,
.ut-svgdraw.is-drawn.fill-instant .ut-svgdraw__svg-wrap svg polygon,
.ut-svgdraw.is-drawn.fill-instant .ut-svgdraw__svg-wrap svg rect,
.ut-svgdraw.is-drawn.fill-instant .ut-svgdraw__svg-wrap svg circle,
.ut-svgdraw.is-drawn.fill-instant .ut-svgdraw__svg-wrap svg ellipse {
    fill: var(--path-fill, transparent) !important;
}

/* Glow active */
.ut-svgdraw.has-glow.is-active .ut-svgdraw__svg-wrap svg {
    filter: var(--glow-filter);
}

/* --- Keyframes --- */
@keyframes ut-draw-line {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes ut-undraw-line {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: var(--path-len, 2000);
    }
}

/* --- Placeholder --- */
.ut-svgdraw__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(234,136,222,0.4);
    width: 200px;
}
.ut-svgdraw__placeholder svg {
    width: 120px;
    height: 120px;
}
.ut-svgdraw__placeholder span {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    opacity: 0.6;
}

/* --- Filters SVG (hidden) --- */
.ut-svgdraw__filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Cursor / Pen tip indicator --- */
.ut-svgdraw__pen {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stroke-color, #EA88DE);
    box-shadow: 0 0 8px var(--stroke-color, #EA88DE), 0 0 16px var(--stroke-color, #EA88DE);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: translate(-50%, -50%);
}
.ut-svgdraw.is-active .ut-svgdraw__pen {
    opacity: 1;
}
.ut-svgdraw.is-drawn .ut-svgdraw__pen {
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .ut-svgdraw {
        height: 350px !important;
    }
}