/* =====================================================
   Lottie Button Widget — Style
   ===================================================== */

.lbw-wrapper {
    line-height: 1;
}

.lbw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease;
    border: 2px solid transparent;
    line-height: 1;
    position: relative;
    z-index: 0;
    overflow: hidden;
    vertical-align: middle;
}

.lbw-btn:hover {
    text-decoration: none;
}

.lbw-lottie-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.lbw-lottie-wrap lottie-player {
    display: block;
}

.lbw-text {
    display: inline-block;
    position: relative;
    z-index: 1;
    line-height: 1;
}

/* Elementor built-in hover animations */
.lbw-btn.elementor-animation-grow:hover    { transform: scale(1.05); }
.lbw-btn.elementor-animation-shrink:hover  { transform: scale(0.95); }
.lbw-btn.elementor-animation-pulse:hover   { animation: lbw-pulse .3s ease-in-out infinite alternate; }
.lbw-btn.elementor-animation-float:hover   { transform: translateY(-4px); }
.lbw-btn.elementor-animation-sink:hover    { transform: translateY(4px); }

@keyframes lbw-pulse {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

/* =====================================================
   CUSTOM ANIMATION BASE
   ===================================================== */

[class*="lbw-anim-"]::before,
[class*="lbw-anim-"]::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

/* hover এ text ও icon color বদলানো */
[class*="lbw-anim-"]:not(.lbw-anim-neon-glow):not(.lbw-anim-magnetic-push):not(.lbw-anim-border-draw):not(.lbw-anim-spotlight):not(.lbw-anim-underline-spread):hover .lbw-text,
[class*="lbw-anim-"]:not(.lbw-anim-neon-glow):not(.lbw-anim-magnetic-push):not(.lbw-anim-border-draw):not(.lbw-anim-spotlight):not(.lbw-anim-underline-spread):hover .lbw-lottie-wrap {
    color: var(--lbw-anim-text, #fff);
    transition: color .3s ease;
}

/* =====================================================
   1. SWEEP ROTATE — Reference Effect
   ===================================================== */
.lbw-anim-sweep-rotate::before {
    top: -1px; left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: inherit;
    background: var(--lbw-anim-color, #1c1c1c);
    transform: rotate(-90deg);
    transform-origin: bottom left;
    transition: transform .35s ease;
}
.lbw-anim-sweep-rotate:hover::before {
    transform: rotate(0deg);
}

/* =====================================================
   2. SWEEP LEFT TO RIGHT
   ===================================================== */
.lbw-anim-sweep-left::before {
    top: 0; left: 0;
    width: 0; height: 100%;
    background: var(--lbw-anim-color, #1c1c1c);
    transition: width .35s ease;
}
.lbw-anim-sweep-left:hover::before { width: 100%; }

/* =====================================================
   3. SWEEP RIGHT TO LEFT
   ===================================================== */
.lbw-anim-sweep-right::before {
    top: 0; right: 0; left: auto;
    width: 0; height: 100%;
    background: var(--lbw-anim-color, #1c1c1c);
    transition: width .35s ease;
}
.lbw-anim-sweep-right:hover::before { width: 100%; }

/* =====================================================
   4. SWEEP TOP TO BOTTOM
   ===================================================== */
.lbw-anim-sweep-top::before {
    top: 0; left: 0;
    width: 100%; height: 0;
    background: var(--lbw-anim-color, #1c1c1c);
    transition: height .35s ease;
}
.lbw-anim-sweep-top:hover::before { height: 100%; }

/* =====================================================
   5. SWEEP BOTTOM TO TOP
   ===================================================== */
.lbw-anim-sweep-bottom::before {
    bottom: 0; left: 0; top: auto;
    width: 100%; height: 0;
    background: var(--lbw-anim-color, #1c1c1c);
    transition: height .35s ease;
}
.lbw-anim-sweep-bottom:hover::before { height: 100%; }

/* =====================================================
   6. RADIAL BURST
   ===================================================== */
.lbw-anim-radial-burst::before {
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: var(--lbw-anim-color, #1c1c1c);
    transform: translate(-50%, -50%);
    transition: width .45s ease, height .45s ease;
}
.lbw-anim-radial-burst:hover::before {
    width: 300%; height: 300%;
}

/* =====================================================
   7. SHUTTER IN
   ===================================================== */
.lbw-anim-shutter-in::before,
.lbw-anim-shutter-in::after {
    top: 0;
    width: 0; height: 100%;
    background: var(--lbw-anim-color, #1c1c1c);
    transition: width .35s ease;
}
.lbw-anim-shutter-in::before { left: 0; }
.lbw-anim-shutter-in::after  { right: 0; left: auto; }
.lbw-anim-shutter-in:hover::before,
.lbw-anim-shutter-in:hover::after { width: 51%; }

/* =====================================================
   8. BORDER DRAW
   ===================================================== */
.lbw-anim-border-draw {
    border-color: transparent !important;
}
.lbw-anim-border-draw::before,
.lbw-anim-border-draw::after {
    border-radius: inherit;
    background: transparent !important;
    transition: all .4s ease;
}
.lbw-anim-border-draw::before {
    top: 0; left: 0;
    width: 0; height: 0;
    border-top: 2px solid var(--lbw-anim-color, #1c1c1c);
    border-right: 2px solid transparent;
}
.lbw-anim-border-draw::after {
    bottom: 0; right: 0; top: auto; left: auto;
    width: 0; height: 0;
    border-bottom: 2px solid var(--lbw-anim-color, #1c1c1c);
    border-left: 2px solid transparent;
}
.lbw-anim-border-draw:hover::before {
    width: 100%; height: 100%;
    border-right-color: var(--lbw-anim-color, #1c1c1c);
}
.lbw-anim-border-draw:hover::after {
    width: 100%; height: 100%;
    border-left-color: var(--lbw-anim-color, #1c1c1c);
}

/* =====================================================
   9. SKEW SLIDE
   ===================================================== */
.lbw-anim-skew-slide::before {
    top: 0; left: -10%;
    width: 0; height: 100%;
    background: var(--lbw-anim-color, #1c1c1c);
    transform: skewX(-15deg);
    transform-origin: top left;
    transition: width .4s ease;
}
.lbw-anim-skew-slide:hover::before { width: 120%; }

/* =====================================================
   10. NEON GLOW PULSE
   ===================================================== */
.lbw-anim-neon-glow {
    transition: box-shadow .35s ease, transform .2s ease !important;
}
.lbw-anim-neon-glow::before { display: none; }
.lbw-anim-neon-glow:hover {
    box-shadow:
        0 0 8px  var(--lbw-glow-color, #c19977),
        0 0 20px var(--lbw-glow-color, #c19977),
        0 0 45px var(--lbw-glow-color, #c19977),
        inset 0 0 12px rgba(255,255,255,.07);
    animation: lbw-neon-flicker .12s ease-in-out 2;
}
@keyframes lbw-neon-flicker {
    0%, 100% { opacity: 1; }
    50%       { opacity: .82; }
}

/* =====================================================
   11. LIQUID FILL
   ===================================================== */
.lbw-anim-liquid-fill::before {
    bottom: 0; left: -5%; top: auto;
    width: 110%; height: 0;
    background: var(--lbw-anim-color, #1c1c1c);
    border-radius: 40% 40% 0 0 / 20px 20px 0 0;
    transition: height .45s cubic-bezier(.4,0,.2,1);
}
.lbw-anim-liquid-fill:hover::before { height: 110%; }

/* =====================================================
   12. SPOTLIGHT
   ===================================================== */
.lbw-anim-spotlight::before {
    top: -60%; left: -60%;
    width: 50%; height: 200%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,.22) 50%,
        transparent 80%
    );
    transform: skewX(-20deg) translateX(-100%);
    transition: transform .55s ease;
}
.lbw-anim-spotlight:hover::before {
    transform: skewX(-20deg) translateX(400%);
}

/* =====================================================
   13. MAGNETIC PUSH
   ===================================================== */
.lbw-anim-magnetic-push {
    transition: transform .15s ease, box-shadow .15s ease !important;
    box-shadow: 0 6px 0 rgba(0,0,0,.3), 0 8px 14px rgba(0,0,0,.2);
}
.lbw-anim-magnetic-push::before,
.lbw-anim-magnetic-push::after { display: none; }
.lbw-anim-magnetic-push:hover {
    transform: translateY(5px) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.15) !important;
}

/* =====================================================
   14. UNDERLINE SPREAD
   ===================================================== */
.lbw-anim-underline-spread::before {
    bottom: 0; left: 50%; top: auto;
    width: 0; height: 3px;
    background: var(--lbw-anim-color, #1c1c1c);
    transform: translateX(-50%);
    border-radius: 2px;
    transition: width .35s ease;
}
.lbw-anim-underline-spread:hover::before { width: 80%; }