.wbw-button-wrap {
    position: fixed;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.wbw-button-wrap.is-visible {
    opacity: 1;
    visibility: visible;
}

.wbw-bottom-right {
    right: var(--wbw-offset-x, 20px);
    bottom: var(--wbw-offset-y, 20px);
}

.wbw-bottom-left {
    left: var(--wbw-offset-x, 20px);
    bottom: var(--wbw-offset-y, 20px);
}

.wbw-middle-right {
    right: var(--wbw-offset-x, 20px);
    top: 50%;
    transform: translateY(-50%);
}

.wbw-middle-left {
    left: var(--wbw-offset-x, 20px);
    top: 50%;
    transform: translateY(-50%);
}

.wbw-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--wbw-text-color, #fff);
    font-size: var(--wbw-font-size, 14px);
    max-width: min(90vw, 420px);
}

.wbw-layout-vertical .wbw-button {
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.wbw-icon-img {
    width: var(--wbw-button-size, 56px);
    height: var(--wbw-button-size, 56px);
    background: var(--wbw-button-color, #25D366);
    border-radius: 50%;
    padding: calc(var(--wbw-button-size, 56px) * 0.23);
    box-sizing: border-box;
    display: block;
}

.wbw-label {
    background: var(--wbw-label-bg, #25D366);
    color: var(--wbw-text-color, #fff);
    padding: 10px 14px;
    border-radius: var(--wbw-radius, 999px);
    line-height: 1.2;
    word-break: break-word;
    text-align: center;
}

.wbw-shape-rounded .wbw-icon-img {
    border-radius: var(--wbw-radius, 12px);
}

.wbw-has-shadow .wbw-icon-img,
.wbw-has-shadow .wbw-label {
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
