/* ============================================
   TELA "COTANDO" (js/cotando.js) — 15/10/2026
   ============================================ */

/* Mesma regra das telas de obrigado: o body não rola (anti rubber-band), então
   a tela rola por dentro. */
#cotando-screen.active { display: flex !important; }
#cotando-screen {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh; height: 100vh; height: 100dvh;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; align-items: flex-start; justify-content: center;
}
#cotando-screen > .container { width: 100%; margin: auto; }

.cotando-card {
    background: #fff; border-radius: 20px; padding: 40px 40px 34px;
    max-width: 620px; margin: 24px auto; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.cotando-card .home-logo { margin-bottom: 18px; display: flex; justify-content: center; }
/* ⚠️ O style.css tem uma regra GLOBAL de li (fundo cinza, space-between) de um
   formulário antigo. Sem zerar aqui, as etapas e as ofertas saem cinza e com o
   texto empurrado para a direita (achado na captura de tela). */
.cotando-card li { background: none; padding: 0; margin: 0; border-radius: 0; display: block; }
.cotando-card .logo-img { height: 54px; width: auto; }
.cotando-produto {
    display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #94a3b8; margin-bottom: 6px;
}
.cotando-card h2 { color: #3d3d8f; font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; line-height: 1.25; }
.cotando-sub { color: #555; font-size: .97rem; line-height: 1.55; margin: 0 auto 22px; max-width: 460px; }

.cotando-barra { height: 8px; background: #eef0fa; border-radius: 99px; overflow: hidden; margin-bottom: 22px; }
.cotando-fill {
    height: 100%; width: 0; border-radius: 99px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width .9s ease;
}

.cotando-etapas { text-align: left; max-width: 320px; margin: 0 auto 18px; }
.cotando-card .cot-etapa { display: flex; justify-content: flex-start; align-items: center; gap: 12px; padding: 7px 0; font-size: .97rem; color: #94a3b8; }
.cot-etapa svg, .cot-etapa .cot-gira { width: 22px; height: 22px; flex: none; }
.cotando-card .cot-etapa--ok { color: #1f2937; }
.cotando-card .cot-etapa--gira { color: #3d3d8f; font-weight: 700; }

.cot-gira {
    display: inline-block; box-sizing: border-box; border-radius: 50%;
    border: 3px solid #dfe2f7; border-top-color: #667eea;
    animation: cot-gira .8s linear infinite;
}
.cot-gira--branco { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.4); border-top-color: #fff; vertical-align: -2px; margin-right: 6px; }
@keyframes cot-gira { to { transform: rotate(360deg); } }

.cotando-agora { color: #475569; font-size: .95rem; margin: 6px 0 4px; min-height: 1.4em; }
.cotando-agora strong { color: #3d3d8f; }
.cotando-fila { color: #b45309; font-size: .9rem; margin: 0 0 4px; min-height: 0; }
.cotando-fila:empty { display: none; }
.cotando-tempo { color: #94a3b8; font-size: .84rem; margin: 0; }

/* Resultado */
.cot-ver { display: inline-block; text-decoration: none; margin-top: 4px; }
.cot-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 20px; }
.cot-whats {
    display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff;
    text-decoration: none; padding: 14px 28px; border-radius: 50px; font-weight: 700; font-size: 1rem;
    box-shadow: 0 4px 14px rgba(37,211,102,.35);
}
.cot-concluir { padding: 13px 28px; font-size: 1rem; }

.cot-ofertas { text-align: left; margin: 4px 0 0; }
.cotando-card .cot-oferta {
    display: flex; background: #fff; justify-content: space-between; align-items: center; gap: 14px;
    border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
}
.cotando-card .cot-oferta--melhor { border-color: #10b981; background: #f0fdf7; }
.cot-oferta div { display: flex; flex-direction: column; min-width: 0; }
.cot-oferta div span { font-size: .82rem; color: #64748b; }
.cot-preco { text-align: right; flex: none; }
.cot-preco strong { color: #1f2937; font-size: 1.1rem; }
.cot-aviso { font-size: .82rem; color: #64748b; margin: 12px 0 0; line-height: 1.5; }

@media (max-width: 560px) {
    .cotando-card { padding: 28px 20px 26px; margin: 14px auto; }
    .cotando-card h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cot-gira { animation-duration: 2.4s; }
    .cotando-fill { transition: none; }
}