/* Base button styles */
.anim-border-btn {
    position: relative;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: visible;
    z-index: 1;
    /* CSS Variables injected by Elementor */
    --border-thickness: 2px;
    --border-color: #333333;
    --border-offset: 0px;
    /* Default styling */
    box-sizing: border-box;
}

.anim-border-btn .elementor-button-text {
    position: relative;
    z-index: 2;
}

/* Ensure native border is transparent for draw animations so it doesn't clash */
.anim-border-btn.anim-border-draw,
.anim-border-btn.anim-border-draw-reverse,
.anim-border-btn.anim-border-draw-side-center,
.anim-border-btn.anim-border-draw-top-center,
.anim-border-btn.anim-border-draw-crisscross,
.anim-border-btn.anim-border-draw-center {
    border-color: transparent !important;
}

/* -----------------------------
   1) DRAW AROUND (Snake)
   ----------------------------- */
.anim-border-btn.anim-border-draw::before,
.anim-border-btn.anim-border-draw::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
    border: 0 solid transparent;
}

/* Reverse transition: height collapses first, then width */
.anim-border-btn.anim-border-draw::before {
    transition: height 0.25s ease-in, width 0.25s ease-in 0.25s, border-color 0s ease-in 0.5s;
}

.anim-border-btn.anim-border-draw::after {
    transition: height 0.25s ease-in, width 0.25s ease-in 0.25s, border-color 0s ease-in 0.5s;
}

/* Start top left */
.anim-border-btn.anim-border-draw::before {
    top: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    left: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-top-width: var(--border-thickness, 2px);
    border-right-width: var(--border-thickness, 2px);
}

/* Start bottom right */
.anim-border-btn.anim-border-draw::after {
    bottom: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    right: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-bottom-width: var(--border-thickness, 2px);
    border-left-width: var(--border-thickness, 2px);
}

.anim-border-btn.anim-border-draw:hover::before,
.anim-border-btn.anim-border-draw:hover::after {
    width: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
    height: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
}

.anim-border-btn.anim-border-draw:hover::before {
    border-top-color: var(--border-color);
    border-right-color: var(--border-color);
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.anim-border-btn.anim-border-draw:hover::after {
    border-bottom-color: var(--border-color);
    border-left-color: var(--border-color);
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

/* -----------------------------
   1.1) DRAW REVERSE (Top Right to Bottom Left)
   ----------------------------- */
.anim-border-btn.anim-border-draw-reverse::before,
.anim-border-btn.anim-border-draw-reverse::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
    border: 0 solid transparent;
}

/* Reverse transition: height collapses first, then width */
.anim-border-btn.anim-border-draw-reverse::before {
    transition: height 0.25s ease-in, width 0.25s ease-in 0.25s, border-color 0s ease-in 0.5s;
}

.anim-border-btn.anim-border-draw-reverse::after {
    transition: height 0.25s ease-in, width 0.25s ease-in 0.25s, border-color 0s ease-in 0.5s;
}

/* Start top right */
.anim-border-btn.anim-border-draw-reverse::before {
    top: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    right: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-top-width: var(--border-thickness, 2px);
    border-left-width: var(--border-thickness, 2px);
}

/* Start bottom left */
.anim-border-btn.anim-border-draw-reverse::after {
    bottom: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    left: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-bottom-width: var(--border-thickness, 2px);
    border-right-width: var(--border-thickness, 2px);
}

.anim-border-btn.anim-border-draw-reverse:hover::before,
.anim-border-btn.anim-border-draw-reverse:hover::after {
    width: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
    height: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
}

.anim-border-btn.anim-border-draw-reverse:hover::before {
    border-top-color: var(--border-color);
    border-left-color: var(--border-color);
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.anim-border-btn.anim-border-draw-reverse:hover::after {
    border-bottom-color: var(--border-color);
    border-right-color: var(--border-color);
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

/* -----------------------------
   2) DRAW FROM CENTER
   ----------------------------- */
.anim-border-btn.anim-border-draw-center::before,
.anim-border-btn.anim-border-draw-center::after {
    content: "";
    position: absolute;
    top: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    left: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    width: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
    height: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
    z-index: 10;
    box-sizing: border-box;
    transition: transform 0.4s ease-out;
    pointer-events: none;
    border-radius: inherit;
}

.anim-border-btn.anim-border-draw-center::before {
    border-top: var(--border-thickness, 2px) solid var(--border-color);
    border-bottom: var(--border-thickness, 2px) solid var(--border-color);
    transform: scaleX(0);
}

.anim-border-btn.anim-border-draw-center::after {
    border-left: var(--border-thickness, 2px) solid var(--border-color);
    border-right: var(--border-thickness, 2px) solid var(--border-color);
    transform: scaleY(0);
}

.anim-border-btn.anim-border-draw-center:hover::before {
    transform: scaleX(1);
}

.anim-border-btn.anim-border-draw-center:hover::after {
    transform: scaleY(1);
}

/* -----------------------------
   3) DRAW SIDES TO CENTER
   ----------------------------- */
.anim-border-btn.anim-border-draw-side-center::before,
.anim-border-btn.anim-border-draw-side-center::after {
    content: '';
    position: absolute;
    width: 0;
    height: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
    top: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
    border-top: var(--border-thickness, 2px) solid transparent;
    border-bottom: var(--border-thickness, 2px) solid transparent;
}

/* Reverse transition: width collapses back */
.anim-border-btn.anim-border-draw-side-center::before {
    transition: width 0.3s ease-in, border-color 0s ease-in 0.3s;
}

.anim-border-btn.anim-border-draw-side-center::after {
    transition: width 0.3s ease-in, border-color 0s ease-in 0.3s;
}

/* Start left side */
.anim-border-btn.anim-border-draw-side-center::before {
    left: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-left: var(--border-thickness, 2px) solid transparent;
}

/* Start right side */
.anim-border-btn.anim-border-draw-side-center::after {
    right: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-right: var(--border-thickness, 2px) solid transparent;
}

.anim-border-btn.anim-border-draw-side-center:hover::before,
.anim-border-btn.anim-border-draw-side-center:hover::after {
    width: calc(50% + var(--border-thickness, 0px) - var(--border-offset, 0px));
}

.anim-border-btn.anim-border-draw-side-center:hover::before {
    border-left-color: var(--border-color);
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
    transition: width 0.3s ease-out;
}

.anim-border-btn.anim-border-draw-side-center:hover::after {
    border-right-color: var(--border-color);
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
    transition: width 0.3s ease-out;
}

/* -----------------------------
   4) DRAW TOP/BOTTOM TO CENTER
   ----------------------------- */
.anim-border-btn.anim-border-draw-top-center::before,
.anim-border-btn.anim-border-draw-top-center::after {
    content: '';
    position: absolute;
    height: 0;
    width: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
    left: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
    border-left: var(--border-thickness, 2px) solid transparent;
    border-right: var(--border-thickness, 2px) solid transparent;
}

/* Reverse transition: height collapses back */
.anim-border-btn.anim-border-draw-top-center::before {
    transition: height 0.3s ease-in, border-color 0s ease-in 0.3s;
}

.anim-border-btn.anim-border-draw-top-center::after {
    transition: height 0.3s ease-in, border-color 0s ease-in 0.3s;
}

/* Start top side */
.anim-border-btn.anim-border-draw-top-center::before {
    top: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-top: var(--border-thickness, 2px) solid transparent;
}

/* Start bottom side */
.anim-border-btn.anim-border-draw-top-center::after {
    bottom: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-bottom: var(--border-thickness, 2px) solid transparent;
}

.anim-border-btn.anim-border-draw-top-center:hover::before,
.anim-border-btn.anim-border-draw-top-center:hover::after {
    height: calc(50% + var(--border-thickness, 0px) - var(--border-offset, 0px));
}

.anim-border-btn.anim-border-draw-top-center:hover::before {
    border-top-color: var(--border-color);
    border-left-color: var(--border-color);
    border-right-color: var(--border-color);
    transition: height 0.3s ease-out;
}

.anim-border-btn.anim-border-draw-top-center:hover::after {
    border-bottom-color: var(--border-color);
    border-left-color: var(--border-color);
    border-right-color: var(--border-color);
    transition: height 0.3s ease-out;
}

/* -----------------------------
   5) DRAW CRISS-CROSS
   ----------------------------- */
.anim-border-btn.anim-border-draw-crisscross::before,
.anim-border-btn.anim-border-draw-crisscross::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
    border: 0 solid transparent;
}

/* Reverse transition: height collapses first, then width */
.anim-border-btn.anim-border-draw-crisscross::before {
    transition: height 0.25s ease-in, width 0.25s ease-in 0.25s, border-color 0s ease-in 0.5s;
}

.anim-border-btn.anim-border-draw-crisscross::after {
    transition: height 0.25s ease-in, width 0.25s ease-in 0.25s, border-color 0s ease-in 0.5s;
}

/* Trace 1: Top Right -> Top Left -> Bottom Left */
.anim-border-btn.anim-border-draw-crisscross::before {
    top: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    right: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-top-width: var(--border-thickness, 2px);
    border-left-width: var(--border-thickness, 2px);
}

/* Trace 2: Bottom Left -> Bottom Right -> Top Right */
.anim-border-btn.anim-border-draw-crisscross::after {
    bottom: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    left: calc(var(--border-thickness, 0px) * -1 + var(--border-offset, 0px));
    border-bottom-width: var(--border-thickness, 2px);
    border-right-width: var(--border-thickness, 2px);
}

.anim-border-btn.anim-border-draw-crisscross:hover::before,
.anim-border-btn.anim-border-draw-crisscross:hover::after {
    width: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
    height: calc(100% + (var(--border-thickness, 0px) * 2) - (var(--border-offset, 0px) * 2));
}

.anim-border-btn.anim-border-draw-crisscross:hover::before {
    border-top-color: var(--border-color);
    border-left-color: var(--border-color);
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.anim-border-btn.anim-border-draw-crisscross:hover::after {
    border-bottom-color: var(--border-color);
    border-right-color: var(--border-color);
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

/* -----------------------------
   6) EXPAND BORDER WIDTH
   ----------------------------- */
/* Remove default transparent trick for expand and fade */
.anim-border-btn.anim-border-expand,
.anim-border-btn.anim-border-color-fade {
    border: var(--border-thickness, 2px) solid var(--border-color);
}

/* For expand, we just use a pseudo element overlaid behind to animate the 'border' visually */
.anim-border-btn.anim-border-expand {
    border-color: transparent !important;
}

.anim-border-btn.anim-border-expand::before {
    content: "";
    position: absolute;
    top: calc(var(--border-thickness, 2px) * -1 + var(--border-offset, 0px));
    left: calc(var(--border-thickness, 2px) * -1 + var(--border-offset, 0px));
    width: calc(100% + (var(--border-thickness, 2px) * 2) - (var(--border-offset, 0px) * 2));
    height: calc(100% + (var(--border-thickness, 2px) * 2) - (var(--border-offset, 0px) * 2));
    border: var(--border-thickness, 2px) solid var(--border-color);
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
    transition: all 0.3s ease;
}

.anim-border-btn.anim-border-expand:hover::before {
    /* Get the expanded thickness from Elementor styles, or fallback */
    border-width: var(--expand-width, 6px);
    top: calc(var(--expand-width, 6px) * -1 + var(--border-offset, 0px));
    left: calc(var(--expand-width, 6px) * -1 + var(--border-offset, 0px));
    width: calc(100% + (var(--expand-width, 6px) * 2) - (var(--border-offset, 0px) * 2));
    height: calc(100% + (var(--expand-width, 6px) * 2) - (var(--border-offset, 0px) * 2));
}

/* -----------------------------
   4) FADE BORDER COLOR
   ----------------------------- */
.anim-border-btn.anim-border-color-fade {
    transition: border-color 0.3s ease;
    border-color: var(--border-color-normal, transparent);
}

.anim-border-btn.anim-border-color-fade:hover {
    border-color: var(--border-color) !important;
}


/* Alignment Settings */
.elementor-align-left .elementor-button-wrapper {
    text-align: left;
}

.elementor-align-center .elementor-button-wrapper {
    text-align: center;
}

.elementor-align-right .elementor-button-wrapper {
    text-align: right;
}

.elementor-align-justify .elementor-button-wrapper .anim-border-btn {
    width: 100%;
}