/* SLU Button — Laser Border */

@property --slu-laser-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes slu-laser-spin {
    to { --slu-laser-angle: 360deg; }
}

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.slu-laser-wrap {
    display: flex;
    width: 100%;
}
.slu-laser-wrap.is-stretch .slu-laser-outer {
    width: 100%;
}

/* ── Outer container ──────────────────────────────────────────────────── */
.slu-laser-outer {
    position: relative;
    display: inline-flex;
    border-radius: 6px;
    --laser-speed:       2s;
    --laser-speed-hover: 1s;
}
.slu-laser-outer.is-stretch {
    width: 100%;
}

/* ── Laser arc ────────────────────────────────────────────────────────── */
.slu-laser-arc {
    /* Structural defaults — colours set by Elementor controls */
    --laser-glow-spread:  8px;
    --laser-glow-opacity: 1;

    --laser-arc-tail-start: 62%;
    --laser-arc-tail-mid:   75%;
    --laser-arc-tip-start:  87%;
    --laser-arc-tip-peak:   88%;
    --laser-arc-tip-end:    89%;
    --laser-arc-fade-end:   97%;

    position: absolute;
    inset: -1px;
    border-radius: 7px;
    pointer-events: none;
    z-index: 0;

    /* rgba(0,0,0,0) at both ends prevents the browser interpolating
       through colour space and creating a visible dot at 0deg */
    background: conic-gradient(
        from var(--slu-laser-angle),
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) var(--laser-arc-tail-start),
        var(--laser-color, #6366f1) var(--laser-arc-tail-mid),
        var(--laser-tip, #a5b4fc) var(--laser-arc-tip-start),
        var(--laser-tip, #a5b4fc) var(--laser-arc-tip-peak),
        var(--laser-tip, #a5b4fc) var(--laser-arc-tip-end),
        var(--laser-color, #6366f1) var(--laser-arc-fade-end),
        rgba(0,0,0,0) 100%
    );

    animation: slu-laser-spin var(--laser-speed) linear infinite;

    filter:
        drop-shadow(0 0 calc(var(--laser-glow-spread) * 0.4) var(--laser-color, #6366f1))
        drop-shadow(0 0 var(--laser-glow-spread) var(--laser-tip, #a5b4fc))
        drop-shadow(0 0 calc(var(--laser-glow-spread) * 1.75) var(--laser-color, #6366f1));

    opacity: var(--laser-glow-opacity);
}

/* ── Button ───────────────────────────────────────────────────────────── */
.slu-laser-btn {
    /* Structural defaults — colours set by Elementor controls */
    --laser-bg-hover:       var(--laser-bg);
    --laser-text-hover:     var(--laser-text);
    --laser-hover-duration: 0.25s;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 1px;
    padding: 14px 32px;
    z-index: 1;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;

    color: var(--laser-text, #ffffff) !important;
    background: var(--laser-bg, #1c1d3a);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;

    transition:
        color var(--laser-hover-duration) ease,
        background var(--laser-hover-duration) ease;
}

/* ── Hover ────────────────────────────────────────────────────────────── */
.slu-laser-btn:hover {
    color: var(--laser-text-hover, var(--laser-text, #ffffff)) !important;
    background: var(--laser-bg-hover, var(--laser-bg, #1c1d3a));
    text-decoration: none;
}

.slu-laser-outer:hover .slu-laser-arc {
    animation-duration: var(--laser-speed-hover);
}

/* ── Content ──────────────────────────────────────────────────────────── */
.slu-laser-text,
.slu-laser-icon {
    position: relative;
    z-index: 2;
}

.slu-laser-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.slu-laser-icon i,
.slu-laser-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}