#wawt-widget,
#wawt-widget * {
    box-sizing: border-box;
}

#wawt-widget {
    --wawt-green: #25d366;
    --wawt-green-dark: #1fbd5a;
    --wawt-panel: rgba(25, 31, 42, 0.97);
    --wawt-text: #f8fafc;
    --wawt-badge: #ff3b4d;
    --wawt-size: 60px;
    --wawt-icon-size: 34px;
    --wawt-badge-size: 22px;
    --wawt-badge-font: 12px;
    position: fixed;
    bottom: 24px;
    z-index: 999999;
    width: var(--wawt-size);
    height: var(--wawt-size);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.4;
}

/* Presets administrables desde WordPress. */
#wawt-widget.wawt-size-compact {
    --wawt-size: 52px;
    --wawt-icon-size: 29px;
    --wawt-badge-size: 20px;
    --wawt-badge-font: 11px;
}

#wawt-widget.wawt-size-medium {
    --wawt-size: 60px;
    --wawt-icon-size: 34px;
    --wawt-badge-size: 22px;
    --wawt-badge-font: 12px;
}

#wawt-widget.wawt-size-large {
    --wawt-size: 68px;
    --wawt-icon-size: 38px;
    --wawt-badge-size: 24px;
    --wawt-badge-font: 13px;
}

#wawt-widget.wawt-right {
    right: 24px;
}

#wawt-widget.wawt-left {
    left: 24px;
}

#wawt-widget .wawt-link {
    position: relative;
    display: flex;
    width: var(--wawt-size);
    height: var(--wawt-size);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    outline: 0;
    background: linear-gradient(145deg, #2bdd70 0%, var(--wawt-green) 58%, var(--wawt-green-dark) 100%);
    color: #fff;
    text-decoration: none;
    box-shadow:
        0 10px 26px rgba(16, 185, 88, 0.28),
        0 0 0 0 rgba(37, 211, 102, 0.28);
    transition:
        transform 180ms ease,
        box-shadow 220ms ease,
        filter 220ms ease,
        opacity 220ms ease;
    -webkit-tap-highlight-color: transparent;
}

#wawt-widget .wawt-link:hover,
#wawt-widget .wawt-link:focus-visible {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 14px 30px rgba(16, 185, 88, 0.34),
        0 0 0 7px rgba(37, 211, 102, 0.11);
}

#wawt-widget .wawt-link:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.33);
    outline-offset: 4px;
}

#wawt-widget .wawt-icon-wrap,
#wawt-widget .wawt-icon {
    display: block;
    width: var(--wawt-icon-size);
    height: var(--wawt-icon-size);
}

#wawt-widget .wawt-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    display: inline-flex;
    min-width: var(--wawt-badge-size);
    height: var(--wawt-badge-size);
    padding: 0 5px;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--wawt-badge);
    color: #fff;
    font-size: var(--wawt-badge-font);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 10px rgba(255, 59, 77, 0.35);
    transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

#wawt-widget .wawt-tooltip {
    position: absolute;
    bottom: 2px;
    width: min(356px, calc(100vw - 120px));
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 15px 18px;
    border: 1px solid var(--wawt-green);
    border-radius: 16px;
    background: var(--wawt-panel);
    color: var(--wawt-text);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.20);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 190ms ease,
        transform 220ms cubic-bezier(.2,.8,.2,1),
        visibility 190ms ease;
}

#wawt-widget.wawt-right .wawt-tooltip {
    right: calc(var(--wawt-size) + 16px);
    transform: translateX(12px) scale(0.98);
    transform-origin: right center;
}

#wawt-widget.wawt-left .wawt-tooltip {
    left: calc(var(--wawt-size) + 16px);
    transform: translateX(-12px) scale(0.98);
    transform-origin: left center;
}

#wawt-widget .wawt-tooltip span {
    display: block;
    width: 100%;
    margin: 0;
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

#wawt-widget .wawt-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: var(--wawt-panel);
    transform: translateY(-50%) rotate(45deg);
}

#wawt-widget.wawt-right .wawt-tooltip::after {
    right: -8px;
    border-top: 1px solid var(--wawt-green);
    border-right: 1px solid var(--wawt-green);
}

#wawt-widget.wawt-left .wawt-tooltip::after {
    left: -8px;
    border-left: 1px solid var(--wawt-green);
    border-bottom: 1px solid var(--wawt-green);
}

@media (hover: hover) and (pointer: fine) {
    #wawt-widget:hover .wawt-tooltip,
    #wawt-widget:focus-within .wawt-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) scale(1);
    }
}

/* Estado de parpadeo: el botón sigue visible; se atenúan halo e indicador. */
#wawt-widget.wawt-blink-off .wawt-link {
    filter: saturate(0.94) brightness(0.96);
    box-shadow: 0 7px 19px rgba(16, 185, 88, 0.14);
}

#wawt-widget.wawt-blink-off .wawt-badge {
    opacity: 0.38;
    transform: scale(0.82);
}

#wawt-widget:hover .wawt-link,
#wawt-widget:focus-within .wawt-link {
    filter: none;
    opacity: 1;
}

#wawt-widget:hover .wawt-badge,
#wawt-widget:focus-within .wawt-badge {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 782px) {
    #wawt-widget {
        bottom: 18px;
    }

    #wawt-widget.wawt-right {
        right: 18px;
    }

    #wawt-widget.wawt-left {
        left: 18px;
    }

    /* En móviles cada preset baja ligeramente de tamaño. */
    #wawt-widget.wawt-size-compact {
        --wawt-size: 48px;
        --wawt-icon-size: 27px;
        --wawt-badge-size: 19px;
        --wawt-badge-font: 10px;
    }

    #wawt-widget.wawt-size-medium {
        --wawt-size: 56px;
        --wawt-icon-size: 31px;
        --wawt-badge-size: 21px;
        --wawt-badge-font: 11px;
    }

    #wawt-widget.wawt-size-large {
        --wawt-size: 62px;
        --wawt-icon-size: 35px;
        --wawt-badge-size: 22px;
        --wawt-badge-font: 12px;
    }

    /* En pantallas táctiles el aviso no bloquea el acceso directo a WhatsApp. */
    #wawt-widget .wawt-tooltip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #wawt-widget .wawt-link,
    #wawt-widget .wawt-badge,
    #wawt-widget .wawt-tooltip {
        transition: none;
    }
}