/* Modal de captura de lead do WhatsApp (Contact Form 7).
 * Compilado de src/scss/whatsapp-modal.scss
 * Cores: $primary #1E3860, $primary-light #EBEDF1, $secondary #007ACF, $text #3B5275, $green #25d366
 */

@keyframes wfs-wpp-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(37,211,102,.55); } 50% { box-shadow:0 0 0 14px rgba(37,211,102,0); } }
@keyframes wfs-wpp-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@keyframes wfs-wpp-spinner-ring { from { transform:translateY(-50%) rotate(0deg); } to { transform:translateY(-50%) rotate(360deg); } }
@keyframes wfs-wpp-modal-fade { from { opacity:0; } to { opacity:1; } }
@keyframes wfs-wpp-modal-zoom { from { opacity:0; transform:translateY(20px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Backdrop fullscreen — escondido por padrão, .is-open revela. */
.wfs-wpp-modal { display:none; position:fixed; inset:0; z-index:99999; background:rgba(24,24,27,.7); padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.wfs-wpp-modal.is-open { display:flex; align-items:flex-start; justify-content:center; animation:wfs-wpp-modal-fade .2s ease-out; }
@media (min-height:520px){ .wfs-wpp-modal.is-open { align-items:center; } }

.wfs-wpp-modal__inner { position:relative; background:#fff; border-radius:34px; padding:72px 28px 28px; max-width:420px; width:100%; margin:auto; box-shadow:0 30px 80px rgba(30,56,96,.25); display:flex; flex-direction:column; gap:20px; animation:wfs-wpp-modal-zoom .25s ease-out; }
@media (max-width:576px){ .wfs-wpp-modal__inner{ padding:60px 20px 24px; border-radius:20px; } }

.wfs-wpp-modal__close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:1px solid #e5e7eb; background:#fff; color:#3B5275; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s ease; z-index:2; }
.wfs-wpp-modal__close:hover { background:#EBEDF1; color:#1E3860; }

/* Badge flutuante (NVO): meio pra fora do topo do card. */
.wfs-wpp-modal__badge--floating { position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:80px; height:80px; border-radius:50%; background:#25d366; border:3px solid #fff; display:flex; align-items:center; justify-content:center; z-index:2; animation:wfs-wpp-pulse 2s ease-in-out infinite; }
@media (max-width:576px){ .wfs-wpp-modal__badge--floating{ top:-34px; width:68px; height:68px; } }
.wfs-wpp-modal__badge-icon { width:36px; height:36px; color:#fff; display:flex; align-items:center; justify-content:center; animation:wfs-wpp-breathe 2s ease-in-out infinite; }
@media (max-width:576px){ .wfs-wpp-modal__badge-icon{ width:30px; height:30px; } }
.wfs-wpp-modal__badge-icon svg { width:100%; height:100%; }
.wfs-wpp-modal__badge-icon svg path, .wfs-wpp-modal__badge-icon svg circle { fill:#fff; }

.wfs-wpp-modal__header { text-align:center; }
.wfs-wpp-modal__header h3 { font-size:1.25rem; font-weight:700; color:#1E3860; margin:0 0 6px; letter-spacing:-0.3px; }
.wfs-wpp-modal__header p { font-size:.875rem; color:#3B5275; margin:0; line-height:1.35; }

/* Layout dos campos do CF7 */
.wfs-wpp-modal .wfs-wpp-row { margin-bottom:12px; }
.wfs-wpp-modal .wfs-wpp-row label { display:block; font-size:.8125rem; font-weight:600; color:#1E3860; margin-bottom:6px; }
.wfs-wpp-modal .wfs-wpp-row input,
.wfs-wpp-modal .wfs-wpp-row select { width:100%; height:44px; background:#EBEDF1; border:1px solid transparent; border-radius:8px; padding:0 14px; font-size:.9375rem; color:#1E3860; transition:border-color .2s ease, background .2s ease; appearance:none; -webkit-appearance:none; }
.wfs-wpp-modal .wfs-wpp-row input::placeholder { color:rgba(59,82,117,.6); font-weight:400; }
.wfs-wpp-modal .wfs-wpp-row input:focus,
.wfs-wpp-modal .wfs-wpp-row input:focus-visible,
.wfs-wpp-modal .wfs-wpp-row select:focus,
.wfs-wpp-modal .wfs-wpp-row select:focus-visible { outline:none; border-color:#007ACF; background:#fff; }
.wfs-wpp-modal .wfs-wpp-row select { background-image:linear-gradient(45deg, transparent 50%, #1E3860 50%), linear-gradient(135deg, #1E3860 50%, transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:36px; }
.wfs-wpp-modal .wfs-wpp-row .wpcf7-form-control-wrap { display:block; }
.wfs-wpp-modal .wfs-wpp-row .wpcf7-not-valid-tip { color:#b91c1c; font-size:.75rem; font-weight:500; margin-top:4px; }
.wfs-wpp-modal .wfs-wpp-row--grid { display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:start; }
@media (max-width:420px){ .wfs-wpp-modal .wfs-wpp-row--grid{ grid-template-columns:1fr; } }

.wfs-wpp-modal .wfs-wpp-submit { margin-top:4px; position:relative; }
.wfs-wpp-modal input.wpcf7-submit { width:100%; height:52px; background:#20a959; color:#fff; border:none; border-radius:10px; font-size:.9375rem; font-weight:700; cursor:pointer; transition:background .2s ease, transform .1s ease; letter-spacing:-0.2px; }
.wfs-wpp-modal input.wpcf7-submit:hover { background:#168e48; }
.wfs-wpp-modal input.wpcf7-submit:active { transform:translateY(1px); }

/* Spinner do CF7 substituído por anel branco rotativo dentro do botão. */
.wfs-wpp-modal .wfs-wpp-submit .wpcf7-spinner { position:absolute; top:50%; right:16px; margin:0; pointer-events:none; width:18px; height:18px; background:transparent !important; opacity:1 !important; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:wfs-wpp-spinner-ring .8s linear infinite; }
.wfs-wpp-modal .wfs-wpp-submit .wpcf7-spinner::before { display:none !important; }

/* Mensagens de resposta do CF7 */
.wfs-wpp-modal .wpcf7-response-output { border:none !important; border-radius:8px; padding:10px 14px !important; margin:12px 0 0 !important; font-size:.8125rem; text-align:center; }
.wfs-wpp-modal .wpcf7 form.sent .wpcf7-response-output { background:#f0fdf4; color:#166534; }
.wfs-wpp-modal .wpcf7 form.invalid .wpcf7-response-output,
.wfs-wpp-modal .wpcf7 form.failed .wpcf7-response-output,
.wfs-wpp-modal .wpcf7 form.spam .wpcf7-response-output { background:#fef2f2; color:#b91c1c; }

/* Step containers */
.wfs-wpp-modal .wfs-wpp-step { display:flex; flex-direction:column; gap:20px; }
.wfs-wpp-modal .wfs-wpp-step[hidden] { display:none; }

/* Step 1 — cliente / não-cliente */
.wfs-wpp-modal .wfs-wpp-choice__intro { font-size:.9375rem; color:#1E3860; margin:0; line-height:1.4; }
.wfs-wpp-modal .wfs-wpp-choice__options { display:flex; flex-direction:column; gap:10px; }

.wfs-wpp-modal .wfs-wpp-choice-card { display:flex; align-items:center; gap:12px; padding:16px 18px; background:#f6f7f9; border:1.5px solid #e5e7eb; border-radius:12px; cursor:pointer; transition:all .2s ease; position:relative; }
.wfs-wpp-modal .wfs-wpp-choice-card input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
.wfs-wpp-modal .wfs-wpp-choice-card__radio { flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1.5px solid #c5c8d2; background:#fff; display:flex; align-items:center; justify-content:center; transition:all .2s ease; color:#fff; }
.wfs-wpp-modal .wfs-wpp-choice-card__radio svg { opacity:0; transform:scale(0.6); transition:all .15s ease; }
.wfs-wpp-modal .wfs-wpp-choice-card__text { display:flex; flex-direction:column; gap:2px; text-align:left; }
.wfs-wpp-modal .wfs-wpp-choice-card__text strong { font-size:.9375rem; font-weight:700; color:#1E3860; line-height:1.2; }
.wfs-wpp-modal .wfs-wpp-choice-card__text small { font-size:.8125rem; color:#3B5275; line-height:1.2; }
.wfs-wpp-modal .wfs-wpp-choice-card:hover { border-color:#b6cdd6; }
.wfs-wpp-modal .wfs-wpp-choice-card.is-selected { background:rgba(37,211,102,.06); border-color:#25d366; }
.wfs-wpp-modal .wfs-wpp-choice-card.is-selected .wfs-wpp-choice-card__radio { background:#25d366; border-color:#25d366; }
.wfs-wpp-modal .wfs-wpp-choice-card.is-selected .wfs-wpp-choice-card__radio svg { opacity:1; transform:scale(1); }

.wfs-wpp-modal .wfs-wpp-choice__cta { width:100%; height:52px; background:#25d366; color:#fff; border:none; border-radius:10px; font-size:.9375rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:background .2s ease, transform .1s ease; letter-spacing:-0.2px; }
.wfs-wpp-modal .wfs-wpp-choice__cta svg { width:20px; height:20px; color:#fff; }
.wfs-wpp-modal .wfs-wpp-choice__cta:hover { background:#168e48; }
.wfs-wpp-modal .wfs-wpp-choice__cta:active { transform:translateY(1px); }

.wfs-wpp-modal .wfs-wpp-choice__hint { display:block; text-align:center; color:#3B5275; font-size:.75rem; margin-top:-4px; }

/* Trava o scroll do body quando o modal abre */
html.wfs-wpp-modal-open, body.wfs-wpp-modal-open { overflow:hidden; }
