@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

#premium-wa-widget-wrap {
    font-family: 'Montserrat', sans-serif !important;
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    margin: 10px 0 25px !important;
}

#premium-wa-widget-wrap .form-group {
    margin-bottom: 18px !important;
    display: block !important;
    clear: both !important;
}

.whatsapp-lead-form .form-control {
    display: block !important;
    width: 100% !important;
    margin-bottom: 5px !important;
    height: auto !important;
    padding: 14px 18px !important;
    border: 1.5px solid #eaeaea !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    color: #333 !important;
    background: #fdfdfd !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.whatsapp-lead-form .form-control:focus {
    border-color: #0088ff !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(0, 136, 255, 0.1) !important;
}

.whatsapp-lead-form .btn-submit {
    width: 100% !important;
    margin-top: 5px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.whatsapp-lead-form .btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 114, 255, 0.4) !important;
    filter: brightness(1.1) !important;
}

.whatsapp-lead-form .btn-submit i {
    font-size: 20px !important;
}

.whatsapp-lead-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483647 !important;
}

.whatsapp-lead-modal[style*="display: block"] {
    display: flex !important;
}

.whatsapp-lead-modal .modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

.whatsapp-lead-modal .modal-content {
    font-family: 'Montserrat', sans-serif !important;
    position: relative !important;
    z-index: 2 !important;
    max-width: 520px;
    width: calc(100% - 32px);
    border-radius: 24px;
    padding: 40px 28px 32px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
    margin: auto;
}

.whatsapp-lead-modal .modal-close {
    position: absolute;
    top: 20px;
    left: 24px;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.whatsapp-lead-modal .modal-close:hover {
    color: #0f172a;
}

.whatsapp-lead-modal .modal-body {
    text-align: center;
}

.whatsapp-lead-modal .success-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #19c37d 0%, #0ea765 100%);
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(25, 195, 125, 0.28);
}

.whatsapp-lead-modal .modal-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.15;
    color: #0f172a;
}

.whatsapp-lead-modal .modal-text {
    margin: 0 auto;
    max-width: 420px;
    color: #475569;
    font-size: 16px;
    line-height: 1.6;
}

.whatsapp-lead-modal .invite-box {
    display: none;
    margin-top: 22px;
    padding: 18px;
    border-radius: 18px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    text-align: left;
}

.whatsapp-lead-modal .invite-box.is-visible {
    display: block;
}

.whatsapp-lead-modal .invite-box strong {
    display: block;
    margin-bottom: 8px;
    color: #166534;
    font-size: 15px;
}

.whatsapp-lead-modal .invite-link {
    display: block;
    word-break: break-word;
    color: #047857;
    font-size: 14px;
    text-decoration: none;
}

.whatsapp-lead-modal .invite-actions {
    display: none;
    margin-top: 18px;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.whatsapp-lead-modal .invite-actions.is-visible {
    display: flex;
}

.whatsapp-lead-modal .invite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 14px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(18, 140, 126, 0.28);
}

.whatsapp-lead-modal .invite-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
}

/* --- DESTAQUE: cartão "recibo de chat" — header navy com ícone, selo e CTA verde WhatsApp --- */
.widget_whatsapp_lead_widget {
    position: relative;
    background: #ffffff !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(8, 20, 40, 0.14), 0 2px 6px rgba(8, 20, 40, 0.06) !important;
    overflow: visible !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.widget_whatsapp_lead_widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(8, 20, 40, 0.18), 0 4px 10px rgba(8, 20, 40, 0.08) !important;
}

/* Selo "grátis" flutuando no canto, como um adesivo colado no cartão */
.widget_whatsapp_lead_widget::after {
    content: "GRÁTIS";
    position: absolute;
    top: -12px;
    right: 18px;
    background: #ffd23f;
    color: #1a1300;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    transform: rotate(6deg);
    z-index: 3;
}

/* Faixa "recibo": header escuro esverdeado com ícone de chat e statusinho pulsando */
.widget_whatsapp_lead_widget .widget-title {
    margin: 0 !important;
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #0c2a1f 0%, #123a24 55%, #0f3d2c 100%);
    color: #ffffff !important;
    padding: 18px 20px 18px 68px !important;
    border-radius: 22px 22px 0 0;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25;
    overflow: hidden;
}

/* Textura discreta de "bolhas de conversa" no fundo da faixa */
.widget_whatsapp_lead_widget .widget-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 85% 20%, rgba(37, 211, 102, 0.22) 0, transparent 45%),
        radial-gradient(circle at 70% 90%, rgba(37, 211, 102, 0.14) 0, transparent 40%);
    pointer-events: none;
}

/* Bolha verde com ícone de chat, ancorada na faixa inteira (não no texto,
   pra não depender da altura da linha). O anel pulsando ao redor dela faz
   as vezes do "statusinho online", sem precisar de um elemento extra. */
.widget_whatsapp_lead_widget .widget-title::after {
    content: "💬";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(74, 222, 128, 0.55);
    animation: deixa-wa-online-pulse 2.2s ease-in-out infinite;
}

/* Vence a regra global do tema (h2.widget-title span, layout "seven") que
   pinta o texto de preto e desenha duas bolinhas decorativas (rosa/roxa)
   coladas no início do texto — aqui o texto é branco puro, sem fundo nem
   bolinha, pra não brigar com a faixa escura nem sobrepor o ícone. */
.widget_whatsapp_lead_widget .widget-title span {
    color: #ffffff !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
}

.widget_whatsapp_lead_widget .widget-title span::before,
.widget_whatsapp_lead_widget .widget-title span::after {
    content: none !important;
}

.widget_whatsapp_lead_widget #premium-wa-widget-wrap {
    border-radius: 0 0 22px 22px !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding-top: 22px !important;
}

/* CTA em verde WhatsApp: coerente com o produto (era azul genérico) */
.widget_whatsapp_lead_widget .btn-submit {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    box-shadow: 0 8px 20px rgba(18, 140, 126, 0.35) !important;
}

.widget_whatsapp_lead_widget .btn-submit:hover {
    box-shadow: 0 12px 26px rgba(18, 140, 126, 0.45) !important;
}

@keyframes deixa-wa-online-pulse {
    0%, 100% { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(74, 222, 128, 0.55); }
    50% { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), 0 0 0 5px rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .widget_whatsapp_lead_widget .widget-title::after {
        animation: none;
    }
}