/* Look Up WhatsApp — Widget Frontend */

:root {
    --luw-btn-color:  #25D366;
    --luw-text-color: #ffffff;
    --luw-shadow:     0 4px 20px rgba(0,0,0,.25);
    --luw-ease:       cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ─────────────────────────────────────────────────────────── */
#luw-widget {
    position: fixed;
    bottom: 1.75rem;
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: .75rem;
}
#luw-widget.luw-btn--right { right: 1.75rem; flex-direction: row-reverse; }
#luw-widget.luw-btn--left  { left:  1.75rem; flex-direction: row; }

/* ── Contenedor del botón + pulse (posición relativa aquí) ───────────── */
.luw-btn__wrap {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

/* ── Botón burbuja ───────────────────────────────────────────────────── */
.luw-btn__bubble {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--luw-btn-color);
    color: var(--luw-text-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--luw-shadow);
    transition: transform .25s var(--luw-ease), box-shadow .25s var(--luw-ease);
    z-index: 1;
    animation: luw-pop-in .4s var(--luw-ease) both;
}
.luw-btn__bubble:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0,0,0,.3);
}
.luw-btn__bubble:disabled {
    filter: grayscale(.6);
    opacity: .75;
    cursor: not-allowed;
    transform: none !important;
}

.luw-btn__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* ── Pulse ring — fuera del button, en .luw-btn__wrap ────────────────── */
.luw-btn__pulse {
    position: absolute;
    inset: -5px;           /* sobresale del botón de 58px */
    border-radius: 50%;
    border: 2.5px solid var(--luw-btn-color);
    animation: luw-pulse 2.2s ease-out infinite;
    pointer-events: none;
    z-index: 0;
}
.luw-btn--offline .luw-btn__pulse { display: none; }

/* ── Label expandido al hover ────────────────────────────────────────── */
.luw-btn__label {
    background: var(--luw-btn-color);
    color: var(--luw-text-color);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .5rem .9rem;
    border-radius: 2rem;
    white-space: nowrap;
    box-shadow: var(--luw-shadow);
    opacity: 0;
    transform: translateX(8px) scale(.95);
    transition: opacity .2s var(--luw-ease), transform .2s var(--luw-ease);
    pointer-events: none;
    cursor: pointer;
}
#luw-widget.luw-btn--left .luw-btn__label {
    transform: translateX(-8px) scale(.95);
}
#luw-widget:hover .luw-btn__label {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: all;
}

/* ── Tooltip offline — solo cuando está desactivado ─────────────────── */
.luw-tooltip {
    position: absolute;
    bottom: calc(100% + .75rem);
    right: 0;
    background: #222;
    color: #fff;
    font-size: .75rem;
    line-height: 1.4;
    padding: .6rem .85rem;
    border-radius: .5rem;
    max-width: 220px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    white-space: normal;
    display: none;
    z-index: 2;
}
/* Solo mostrar tooltip si el botón está offline/disabled */
.luw-btn--offline:hover .luw-tooltip { display: block; }

/* ── Animaciones ─────────────────────────────────────────────────────── */
@keyframes luw-pop-in {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes luw-pulse {
    0%   { transform: scale(1);   opacity: .65; }
    70%  { transform: scale(1.6); opacity: 0;   }
    100% { transform: scale(1.6); opacity: 0;   }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #luw-widget { bottom: 1.25rem; }
    #luw-widget.luw-btn--right { right: 1.25rem; }
    #luw-widget.luw-btn--left  { left:  1.25rem; }
    .luw-btn__label { display: none; }
}