/* =============================================================
   Vida Educar - Modal de Rematricula 2027
   Estetica herdada do formulario de vidaeducar.com.br/contato,
   com os acrescimos necessarios para o wizard de 4 etapas.
   ============================================================= */

.ve-modal-overlay *{box-sizing:border-box}
.ve-modal-overlay{display:none;position:fixed;inset:0;background:rgba(31,42,99,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:99999;align-items:center;justify-content:center;padding:20px;font-family:'Lora',serif}
.ve-modal-overlay.open{display:flex}
.ve-modal-overlay .ve-modal{position:relative;width:100%;max-width:720px;max-height:92vh;overflow-y:auto;background:#fff;border-radius:24px 24px 0 24px;box-shadow:0 30px 80px rgba(31,42,99,.25)}
.ve-modal-overlay .ve-modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#EFEEE9;border:none;border-radius:50%;cursor:pointer;color:#2f3f83;z-index:4}
.ve-modal-overlay .ve-modal-close:hover{background:#e2e0da}
.ve-modal-overlay .ve-modal-close svg{width:18px;height:18px;stroke:currentColor}
.ve-modal-overlay .ve-modal-body{padding:44px 48px 38px}
.ve-modal-overlay .ve-modal-head{margin-bottom:26px}
.ve-modal-overlay .ve-modal-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#1886FF;margin-bottom:12px}
.ve-modal-overlay .ve-modal-tag svg{width:14px;height:14px}
.ve-modal-overlay .ve-modal-title{font-family:'Lora',serif;font-weight:600;font-size:30px;line-height:1.15;color:#2f3f83}
.ve-modal-overlay .ve-modal-sub{font-size:15px;color:#676c84;margin-top:8px;line-height:1.5}
.ve-modal-overlay .ve-field{margin-bottom:22px}
.ve-modal-overlay .ve-row{display:flex;gap:16px}
.ve-modal-overlay .ve-row>div{flex:1}
.ve-modal-overlay .ve-label{display:block;font-family:'Lora',serif;font-weight:700;font-size:11px;line-height:16.5px;letter-spacing:.6px;text-transform:uppercase;color:#676C84;margin-bottom:10px}
.ve-modal-overlay .ve-input{width:100%;background:#fff;border:1px solid rgba(47,63,131,.14);border-radius:12px;padding:16px 18px;font-family:'Lora',serif;font-weight:500;font-size:16px;line-height:1;color:#2F3F83;transition:border-color .15s,box-shadow .15s}
.ve-modal-overlay .ve-input::placeholder{color:rgba(47,63,131,.5)}
.ve-modal-overlay .ve-input:focus{outline:none;border-color:#1886FF;box-shadow:0 0 0 3px rgba(24,134,255,.12)}
.ve-modal-overlay .ve-pills{display:flex;flex-wrap:wrap;gap:10px}
.ve-modal-overlay .ve-pill{cursor:pointer}
.ve-modal-overlay .ve-pill input{position:absolute;opacity:0;pointer-events:none}
.ve-modal-overlay .ve-pill span{display:inline-block;padding:10px 20px;border-radius:999px;border:1px solid rgba(47,63,131,.14);background:#fff;font-family:'Lora',serif;font-weight:500;font-size:15px;color:#2F3F83;transition:.15s}
.ve-modal-overlay .ve-pill:hover span,.ve-modal-overlay .ve-pill input:checked+span{background:#1886FF;border-color:#1886FF;color:#fff}
.ve-modal-overlay .ve-cards{display:flex;gap:14px}
.ve-modal-overlay .ve-card{cursor:pointer;position:relative;flex:1}
.ve-modal-overlay .ve-card input{position:absolute;opacity:0;pointer-events:none}
.ve-modal-overlay .ve-card .box{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(47,63,131,.14);border-radius:14px;padding:16px 18px;transition:.15s}
.ve-modal-overlay .ve-card .dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #cfcddf;display:grid;place-items:center;transition:.15s}
.ve-modal-overlay .ve-card .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:transparent;transition:.15s}
.ve-modal-overlay .ve-card .box span{font-family:'Lora',serif;font-weight:500;font-size:15px;color:#2F3F83}
.ve-modal-overlay .ve-card:hover .box,.ve-modal-overlay .ve-card input:checked+.box{background:#29AD1F;border-color:#29AD1F}
.ve-modal-overlay .ve-card:hover .box span,.ve-modal-overlay .ve-card input:checked+.box span{color:#fff}
.ve-modal-overlay .ve-card:hover .box .dot,.ve-modal-overlay .ve-card input:checked+.box .dot{border-color:#fff}
.ve-modal-overlay .ve-card input:checked+.box .dot::after{background:#fff}
.ve-modal-overlay .ve-divider{height:1px;background:rgba(47,63,131,.10);margin:28px 0 20px}
.ve-modal-overlay .ve-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ve-modal-overlay .ve-note{font-family:'Lora',serif;font-size:13px;color:#9a9ab0}
.ve-modal-overlay .ve-submit{display:inline-flex;align-items:stretch;gap:6px;border:none;background:none;cursor:pointer;font-family:'Lora',serif}
.ve-modal-overlay .ve-submit .t{display:flex;align-items:center;padding:15px 24px;border-radius:12px 0 12px 12px;background:#FFC536;color:#4a3c0e;font-size:16px;font-weight:600}
.ve-modal-overlay .ve-submit .i{display:flex;align-items:center;justify-content:center;width:54px;border-radius:0 12px 12px 12px;background:#1886FF}
.ve-modal-overlay .ve-submit .i svg{width:18px;height:18px;stroke:#fff}
.ve-modal-overlay .ve-submit:hover .t{background:#f0b71f}
.ve-modal-overlay .ve-submit:disabled{opacity:.5;cursor:default}
.ve-modal-overlay .ve-success{text-align:center;padding:24px 6px}
.ve-modal-overlay .ve-success .ico{width:70px;height:70px;margin:0 auto 20px;border-radius:50%;background:#29AD1F;display:flex;align-items:center;justify-content:center}
.ve-modal-overlay .ve-success .ico svg{width:34px;height:34px;stroke:#fff}
.ve-modal-overlay .ve-success h3{font-family:'Lora',serif;font-weight:600;font-size:26px;color:#2f3f83;margin-bottom:10px}
.ve-modal-overlay .ve-success p{font-family:'Lora',serif;font-size:15px;color:#676c84;line-height:1.6;max-width:360px;margin:0 auto}
@media(max-width:560px){.ve-modal-overlay .ve-modal-body{padding:30px 22px 26px}.ve-modal-overlay .ve-row,.ve-modal-overlay .ve-cards{flex-direction:column}.ve-modal-overlay .ve-foot{flex-direction:column-reverse;align-items:stretch;gap:16px}.ve-modal-overlay .ve-note{text-align:center}.ve-modal-overlay .ve-submit{width:100%}.ve-modal-overlay .ve-submit .t{flex:1;justify-content:center}}

/* ---------- Wizard: passos, navegacao e campos extras ---------- */
/* Acrescimos a linguagem visual do formulario do site (classes ve-*),
   para dar conta das quatro etapas. */

.ve-modal-overlay .ve-steps{display:flex;gap:8px;margin-bottom:24px}
.ve-modal-overlay .ve-step{flex:1;height:4px;border-radius:999px;background:rgba(47,63,131,.12);transition:background .25s}
.ve-modal-overlay .ve-step.done{background:#29AD1F}
.ve-modal-overlay .ve-step.atual{background:#1886FF}
.ve-modal-overlay .ve-step-conta{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#1886FF;margin-bottom:10px}

.ve-modal-overlay .ve-etapa{display:none}
.ve-modal-overlay .ve-etapa.ativa{display:block}

/* select com a mesma caixa do input, seta desenhada em background */
.ve-modal-overlay .ve-select{width:100%;background:#fff;border:1px solid rgba(47,63,131,.14);border-radius:12px;padding:16px 44px 16px 18px;font-family:'Lora',serif;font-weight:500;font-size:16px;line-height:1.2;color:#2F3F83;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F3F83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.ve-modal-overlay .ve-select:focus{outline:none;border-color:#1886FF;box-shadow:0 0 0 3px rgba(24,134,255,.12)}
.ve-modal-overlay .ve-select.vazio{color:rgba(47,63,131,.5)}

/* cartoes empilhados, para listas de opcoes longas */
.ve-modal-overlay .ve-cards.coluna{flex-direction:column;gap:10px}
.ve-modal-overlay .ve-cards.coluna .ve-card .box{align-items:flex-start}
.ve-modal-overlay .ve-card .box .txt{display:block}
.ve-modal-overlay .ve-card .box .txt b{display:block;font-weight:600;font-size:15px;margin-bottom:3px}
.ve-modal-overlay .ve-card .box .txt small{display:block;font-size:13px;line-height:1.45;opacity:.85}
.ve-modal-overlay .ve-card .box .dot{margin-top:2px}

.ve-modal-overlay .ve-erro{display:none;margin-top:8px;font-size:13px;color:#D93025}
.ve-modal-overlay .ve-erro.visivel{display:block}
.ve-modal-overlay .ve-input.invalido,
.ve-modal-overlay .ve-select.invalido{border-color:#D93025;box-shadow:0 0 0 3px rgba(217,48,37,.10)}

.ve-modal-overlay .ve-voltar{display:inline-flex;align-items:center;gap:7px;border:none;background:none;cursor:pointer;font-family:'Lora',serif;font-size:15px;font-weight:600;color:#676c84;padding:15px 4px}
.ve-modal-overlay .ve-voltar:hover{color:#2f3f83}
.ve-modal-overlay .ve-voltar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ve-modal-overlay .ve-foot.com-voltar{justify-content:space-between}

/* resumo do valor, calculado a partir do periodo escolhido */
.ve-modal-overlay .ve-resumo{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#F6F6F4;border-radius:14px;padding:16px 18px;margin-bottom:22px}
.ve-modal-overlay .ve-resumo .rot{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#676C84}
.ve-modal-overlay .ve-resumo .val{font-size:20px;font-weight:600;color:#2f3f83}

.ve-modal-overlay .ve-condicional{display:none}
.ve-modal-overlay .ve-condicional.visivel{display:block}

@media(max-width:560px){
  .ve-modal-overlay .ve-steps{gap:6px}
  .ve-modal-overlay .ve-foot.com-voltar{flex-direction:column-reverse}
  .ve-modal-overlay .ve-voltar{justify-content:center;width:100%}
}