/*
 * Confirmação — o resumo do horário no modal do lead e a tela de reunião
 * agendada. Cópia fiel do bloco "Tela 4 · Confirmação" de
 * /mockup/agendador-cardapio-web.html. A moldura do modal mora em modal.css,
 * porque a administração também usa.
 */

.resumo-slot{
  margin:20px 24px 0;background:linear-gradient(135deg,var(--roxo),var(--lilas));
  color:#fff;border-radius:var(--r-md);padding:16px 18px;display:flex;gap:14px;align-items:center;
}
.resumo-slot .ico{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.resumo-slot b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.2px}
.resumo-slot span{font-size:12.5px;opacity:.88}

/* ───────────────────────── Tela 4 · Confirmação ───────────────────────── */
.sucesso{max-width:560px;margin:clamp(4px,3vw,32px) auto 0;padding:clamp(30px,5vw,44px);text-align:center}
.selo-check{
  width:82px;height:82px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--lilas),var(--roxo));color:#fff;
  box-shadow:0 10px 30px rgba(89,50,122,.34);animation:pula 620ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes pula{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.sucesso h2{font-size:clamp(23px,3.6vw,30px);font-weight:800;letter-spacing:-.7px;margin-bottom:8px}
.sucesso > p{color:var(--tinta-media);font-size:15px;margin-bottom:26px}
.meet{
  display:flex;align-items:center;gap:11px;background:var(--lilas-suave);border:1px dashed var(--lilas);
  border-radius:var(--r-md);padding:13px 16px;text-align:left;margin-bottom:24px;
}
.meet .ico{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center;flex:none;color:var(--roxo)}
.meet b{display:block;font-size:13px;font-weight:700;color:var(--roxo)}
.meet span{font-size:12.5px;color:var(--tinta-media);word-break:break-all}
.acoes-sucesso{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}