/* ============================================================
   Luxee WidgetKit — WA Button Widget
   Handle : lxwdk-wa-button
   Version: 1.0.0
   ============================================================ */

/* ── Wrapper ───────────────────────────────────────────────── */
.lxwdk-wa-btn-wrap {
    display: block;
    line-height: 1;
}

/* ── Base Button ───────────────────────────────────────────── */
.lxwdk-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}

/* ── Icon ──────────────────────────────────────────────────── */
.lxwdk-wa-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    /* fill inherits from parent color via fill="currentColor" on the SVG */
    fill: currentColor;
}

/* No-icon modifier — removes gap jika icon tidak ditampilkan */
.lxwdk-wa-btn--no-icon {
    gap: 0;
}

/* ── Button Styles (Solid / Outline / Ghost) ───────────────── */

/* Solid — default WA brand green */
.lxwdk-wa-btn--solid {
    background-color: #25d366;
    color: #ffffff;
    border-color: #25d366;
}

.lxwdk-wa-btn--solid:hover,
.lxwdk-wa-btn--solid:focus {
    background-color: #128c7e;
    border-color: #128c7e;
    color: #ffffff;
}

/* Outline */
.lxwdk-wa-btn--outline {
    background-color: transparent;
    color: #25d366;
    border-color: #25d366;
}

.lxwdk-wa-btn--outline:hover,
.lxwdk-wa-btn--outline:focus {
    background-color: #25d366;
    color: #ffffff;
    border-color: #25d366;
}

/* Ghost */
.lxwdk-wa-btn--ghost {
    background-color: transparent;
    color: #25d366;
    border-color: transparent;
}

.lxwdk-wa-btn--ghost:hover,
.lxwdk-wa-btn--ghost:focus {
    background-color: rgba(37, 211, 102, 0.12);
    border-color: #25d366;
    color: #25d366;
}

/* ── Hover Animations ──────────────────────────────────────── */

/* Lift (translateY up) */
.lxwdk-wa-btn--hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

.lxwdk-wa-btn--hover-lift:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Scale */
.lxwdk-wa-btn--hover-scale:hover {
    transform: scale(1.05);
}

.lxwdk-wa-btn--hover-scale:active {
    transform: scale(1);
}

/* Shake */
@keyframes lxwdk-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px) rotate(-1deg);
    }

    40% {
        transform: translateX(4px) rotate(1deg);
    }

    60% {
        transform: translateX(-3px) rotate(-0.5deg);
    }

    80% {
        transform: translateX(3px) rotate(0.5deg);
    }
}

.lxwdk-wa-btn--hover-shake:hover {
    animation: lxwdk-shake 0.45s ease;
}

/* None */
.lxwdk-wa-btn--hover-none:hover {
    transform: none;
    box-shadow: none;
}

/* ── Focus ring (accessibility) ────────────────────────────── */
.lxwdk-wa-btn:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.5);
    outline-offset: 3px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .lxwdk-wa-btn {
        font-size: 0.9375rem;
        padding: 12px 22px;
    }

    .lxwdk-wa-icon {
        width: 18px;
        height: 18px;
    }
}