/* SLU Button — Draw Border */

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

/* ── Button base ──────────────────────────────────────────────────────── */
.slu-db-btn {
    /* Structural defaults — colours set by Elementor controls */
    --db-border-width:   2px;
    --db-duration:       0.3s;
    --db-easing:         ease;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: visible;
    text-decoration: none;
    cursor: pointer;
    z-index: 0;

    padding: 14px 32px;

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

    color: var(--db-text, inherit) !important;
    background: var(--db-bg, transparent);
    border: none;
    border-radius: var(--db-radius, 0);

    transition:
        color var(--db-duration) var(--db-easing),
        background var(--db-duration) var(--db-easing);
}

/* ── Corner L-shapes via pseudoelements ──────────────────────────────── */
/* ::before = top-left corner
   ::after  = bottom-right corner */

.slu-db-btn::before,
.slu-db-btn::after {
    content: '';
    position: absolute;
    width: var(--db-corner-size, 20px);
    height: var(--db-corner-size, 20px);
    border-color: var(--db-border-color, #6366f1);
    border-style: solid;
    border-width: 0;
    border-radius: 0;
    transition:
        width  var(--db-duration) var(--db-easing),
        height var(--db-duration) var(--db-easing);
}

/* Top-left L: top + left borders grow inward */
.slu-db-btn::before {
    top: 0;
    left: 0;
    border-top-width:  var(--db-border-width);
    border-left-width: var(--db-border-width);
}

/* Bottom-right L: bottom + right borders grow inward */
.slu-db-btn::after {
    bottom: 0;
    right: 0;
    border-bottom-width: var(--db-border-width);
    border-right-width:  var(--db-border-width);
}

/* ── Hover — corners draw to full size ───────────────────────────────── */
.slu-db-btn:hover {
    color: var(--db-text-hover, var(--db-text, inherit)) !important;
    background: var(--db-bg-hover, var(--db-bg, transparent));
    text-decoration: none;
}

.slu-db-btn:hover::before,
.slu-db-btn:hover::after {
    width: 100%;
    height: 100%;
}

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

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

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