/**
 * ChatFloat WP — Estilos do CTA shortcode
 * Versão: 1.6.0
 *
 * Independente do widget flutuante.
 * Funciona em qualquer lugar da página onde o shortcode for inserido.
 */

/* ─── Token de cor (herda do plugin ou usa personalizado) ─────────────────── */
.chatfloat-cta {
    --cf-cta-cor:       #25D366;  /* sobrescrito inline se atributo cor= definido */
    --cf-cta-cor-hover: color-mix(in srgb, var(--cf-cta-cor) 82%, #000);
    --cf-cta-raio:      8px;
    --cf-cta-dur:       220ms;
    --cf-cta-ease:      cubic-bezier(.4, 0, .2, 1);
    --cf-cta-spring:    cubic-bezier(.34, 1.56, .64, 1);
}

/* ─── Reset compartilhado ─────────────────────────────────────────────────── */
.chatfloat-cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    cursor:          pointer;
    border:          none;
    font-family:     inherit;
    font-weight:     600;
    text-decoration: none;
    position:        relative;
    overflow:        hidden;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--cf-cta-dur) var(--cf-cta-ease),
        transform        var(--cf-cta-dur) var(--cf-cta-spring),
        box-shadow       var(--cf-cta-dur) var(--cf-cta-ease),
        opacity          var(--cf-cta-dur) var(--cf-cta-ease);
}

.chatfloat-cta:focus-visible {
    outline:        3px solid var(--cf-cta-cor);
    outline-offset: 3px;
}

.chatfloat-cta:active {
    transform: scale(.96) !important;
}

/* ─── Estilo: botão (padrão) ──────────────────────────────────────────────── */
.chatfloat-cta--botao {
    background-color: var(--cf-cta-cor);
    color:            #ffffff !important;
    padding:          12px 24px;
    border-radius:    var(--cf-cta-raio);
    font-size:        15px;
    box-shadow:       0 2px 12px color-mix(in srgb, var(--cf-cta-cor) 40%, transparent);
}

.chatfloat-cta--botao:hover,
.chatfloat-cta--botao:focus {
    background-color: var(--cf-cta-cor-hover) !important;
    color:            #ffffff !important;
    transform:        translateY(-2px);
    box-shadow:       0 6px 20px color-mix(in srgb, var(--cf-cta-cor) 45%, transparent);
}

/* ─── Estilo: link ────────────────────────────────────────────────────────── */
.chatfloat-cta--link {
    background: transparent;
    color:      var(--cf-cta-cor) !important;
    padding:    4px 0;
    font-size:  15px;
    border-bottom: 2px solid color-mix(in srgb, var(--cf-cta-cor) 35%, transparent);
    border-radius: 0;
}

.chatfloat-cta--link:hover,
.chatfloat-cta--link:focus {
    background:   transparent !important;
    color:        var(--cf-cta-cor-hover) !important;
    border-color: var(--cf-cta-cor);
}

/* ─── Estilo: apenas-texto ────────────────────────────────────────────────── */
.chatfloat-cta--apenas-texto {
    background: transparent;
    color:      var(--cf-cta-cor) !important;
    padding:    4px 0;
    font-size:  15px;
}

.chatfloat-cta--apenas-texto:hover,
.chatfloat-cta--apenas-texto:focus {
    background: transparent !important;
    color:      var(--cf-cta-cor-hover) !important;
    text-decoration: underline;
}

/* ─── Ícone do WhatsApp ───────────────────────────────────────────────────── */
.chatfloat-cta__icone {
    width:       22px;
    height:      22px;
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    transition:  transform var(--cf-cta-dur) var(--cf-cta-spring);
}

.chatfloat-cta__icone svg {
    width:  100%;
    height: 100%;
    display: block;
}

/* Força branco no ícone dentro do botão */
.chatfloat-cta--botao .chatfloat-cta__icone svg path {
    fill: #ffffff !important;
}

/* Usa a cor do canal nos estilos transparentes */
.chatfloat-cta--link .chatfloat-cta__icone svg path,
.chatfloat-cta--apenas-texto .chatfloat-cta__icone svg path {
    fill: var(--cf-cta-cor) !important;
}

.chatfloat-cta:hover .chatfloat-cta__icone {
    transform: scale(1.15) rotate(8deg);
}

/* ─── Spinner ─────────────────────────────────────────────────────────────── */
.chatfloat-cta__spinner {
    width:    18px;
    height:   18px;
    display:  none;
    flex-shrink: 0;
}

.chatfloat-cta__spinner svg {
    width:  100%;
    height: 100%;
}

/* Estado carregando */
.chatfloat-cta.cf-cta-carregando .chatfloat-cta__icone  { display: none; }
.chatfloat-cta.cf-cta-carregando .chatfloat-cta__texto  { opacity: .7; }
.chatfloat-cta.cf-cta-carregando .chatfloat-cta__spinner {
    display: flex;
    animation: cf-cta-spin .8s linear infinite;
}

@keyframes cf-cta-spin {
    to { transform: rotate(360deg); }
}

/* Estado erro: tremida */
@keyframes cf-cta-erro {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-4px); }
    40%,80% { transform: translateX(4px); }
}

.chatfloat-cta.cf-cta-erro {
    animation: cf-cta-erro .4s ease-out forwards !important;
}

/* ─── Ripple ──────────────────────────────────────────────────────────────── */
.chatfloat-cta__ripple {
    position:      absolute;
    border-radius: 50%;
    background:    rgba(255, 255, 255, .35);
    transform:     scale(0);
    animation:     cf-cta-ripple 500ms ease-out forwards;
    pointer-events: none;
}

@keyframes cf-cta-ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ─── Acessibilidade ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .chatfloat-cta,
    .chatfloat-cta__icone,
    .chatfloat-cta__spinner {
        animation:  none !important;
        transition: none !important;
    }
}