:root{
  --roxo:#f5365c;--roxo-escuro:#d61f45;--fundo:#fff6f7;--texto:#1f1830;
  --cinza:#6b6580;--borda:#f6dde3;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--fundo);color:var(--texto);min-height:100vh}

/* progresso (passos numerados em círculos) */
.mt-top{padding:24px 6vw 0}
.mt-steps{display:flex;align-items:center;justify-content:center;max-width:560px;margin:0 auto}
.mt-dot{
  position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:#ece7f7;color:#9a93b3;display:grid;place-items:center;
  font-weight:700;font-size:.9rem;transition:all .3s;z-index:1;
}
.mt-dot:not(:last-child){margin-right:52px}
.mt-dot:not(:last-child)::after{
  content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);
  width:52px;height:2px;background:#f6dde3;z-index:-1;
}
.mt-dot.on{background:#fff;color:var(--roxo);box-shadow:inset 0 0 0 2px var(--roxo)}
.mt-dot.on:not(:last-child)::after{background:var(--roxo)}
@media(max-width:600px){
  .mt-dot:not(:last-child){margin-right:6vw}
  .mt-dot:not(:last-child)::after{width:6vw}
}

/* layout */
.mt{max-width:1200px;margin:0 auto;padding:30px 6vw 60px;display:grid;grid-template-columns:1fr 440px;gap:50px;align-items:start}
/* passos iniciais (nomes, data): sem celular, formulário centralizado */
.mt.solo{grid-template-columns:1fr;max-width:760px}
.mt.solo .mt-preview{display:none}

/* balão do mascote (nos primeiros passos) */
.mt-mascote{display:flex;align-items:center;gap:16px;margin:8px 0 34px}
.mt-mascote img{width:84px;height:84px;background:#ffe4e9;border-radius:50%;padding:8px;flex:0 0 auto;animation:mt-pop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes mt-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.mt-bubble{background:#fff;border:1px solid var(--borda);border-radius:16px;padding:16px 20px;font-size:1.05rem;font-weight:500;line-height:1.35;box-shadow:0 8px 22px rgba(150,28,64,.06)}

/* contador ao vivo no passo da data */
.mt-counter{margin-top:30px;background:#fff;border:1px solid var(--borda);border-radius:16px;padding:22px}
.mt-counter-title{text-align:center;color:var(--cinza);font-weight:600;margin-bottom:16px}
.mt-counter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.mc{min-width:0;background:#fff6f7;border:1px solid var(--borda);border-radius:12px;padding:14px 4px;text-align:center}
.mc span{display:block;font-size:1.5rem;font-weight:800;color:var(--texto)}
.mc small{display:block;color:var(--cinza);font-size:.72rem}
@media(max-width:600px){.mt-counter-grid{grid-template-columns:repeat(3,1fr)}}

/* formulário */
.mt-form{min-height:420px;display:flex;flex-direction:column}
.step h2{font-size:1.7rem;font-weight:800;margin-bottom:6px}
.step-sub{color:var(--cinza);margin-bottom:24px}
.step label{display:block;font-weight:600;font-size:.85rem;color:var(--cinza);margin:16px 0 6px}
.step input,.step textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--texto);
  background:#fff;border:1.5px solid var(--borda);border-radius:12px;padding:13px 16px;
}
.step input:focus,.step textarea:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 4px rgba(245,54,92,.12)}
.step textarea{resize:vertical}

/* selo "pode editar depois" */
.mt-editbadge{display:inline-flex;align-items:center;gap:6px;background:#ffe4e9;color:var(--roxo-escuro);font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:999px;margin-bottom:18px}

/* caixa do título estilo cartão */
.mt-textbox{border:1.5px solid var(--borda);border-radius:16px;overflow:hidden;background:#fff;transition:border-color .15s}
.mt-textbox:focus-within{border-color:var(--roxo);box-shadow:0 0 0 4px rgba(245,54,92,.1)}
.mt-textbox textarea{width:100%;border:none;background:transparent;font-family:inherit;font-size:1.05rem;color:var(--texto);padding:18px 18px 10px;resize:none;min-height:90px}
.mt-textbox textarea.expandido{min-height:220px}
.mt-textbox textarea:focus{outline:none;box-shadow:none}
.mt-textbox-foot{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--borda);background:#fff7f8}
.mt-tools{display:flex;gap:16px}
.mt-tools button{background:none;border:none;cursor:pointer;color:var(--cinza);font-family:inherit;font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.mt-tools button:hover{color:var(--roxo-escuro)}
.mt-count{color:var(--cinza);font-size:.82rem}

/* busca de música */
.mt-search{display:flex;align-items:center;gap:12px;border:2px solid var(--borda);border-radius:16px;padding:8px 14px 8px 8px;background:#fff;transition:border-color .15s,box-shadow .15s}
.mt-search:focus-within{border-color:var(--roxo);box-shadow:0 0 0 4px rgba(245,54,92,.1)}
.mt-search-ico{width:42px;height:42px;border-radius:10px;background:#ffe4e9;display:grid;place-items:center;font-size:1.05rem;flex:0 0 auto}
.mt-search input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:1.05rem;color:var(--texto);padding:8px 0}
.mt-results{margin-top:14px;display:flex;flex-direction:column;gap:6px;max-height:380px;overflow-y:auto}
.mt-result{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s}
.mt-result:hover{background:#fff6f7;border-color:var(--borda)}
.mt-result img{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#eee}
.mt-result-info{display:flex;flex-direction:column;min-width:0}
.mt-result-info strong{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-result-info span{font-size:.82rem;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-noresult{color:var(--cinza);font-size:.9rem;padding:10px 4px}
#mtYtWrap{position:fixed;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.done-text{color:var(--cinza);margin:10px 0 24px}

/* dropzone de fotos */
.mt-dropzone{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  border:2px dashed var(--borda);border-radius:18px;padding:40px 24px;cursor:pointer;
  background:#fff;transition:border-color .15s,background .15s;
}
.mt-dropzone:hover,.mt-dropzone.drag{border-color:var(--roxo);background:#fff7f8}
.mt-dz-ico{width:54px;height:54px;border-radius:14px;background:#ffe4e9;color:var(--roxo);display:grid;place-items:center}
.mt-dropzone strong{font-size:1.05rem;color:var(--texto)}
.mt-dz-formats{color:var(--cinza);font-size:.85rem}
.mt-dz-limit{display:inline-block;background:#ffe4e9;color:var(--roxo-escuro);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;margin-left:6px}

/* thumbs (miniaturas das fotos) */
.thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.thumb{position:relative;width:88px;height:88px;border-radius:12px;overflow:hidden;border:1px solid var(--borda)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.is-capa{outline:2px solid var(--roxo);outline-offset:1px}
.thumb-tag{position:absolute;left:0;right:0;bottom:0;background:rgba(214,31,69,.9);color:#fff;font-size:.62rem;font-weight:700;text-align:center;padding:2px}
.thumb-rm{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.thumb-rm:hover{background:#e11d2a}

/* navegação */
.mt-nav{display:flex;gap:14px;margin-top:34px}
.btn-primary,.btn-ghost{
  font-family:inherit;font-weight:600;font-size:1rem;padding:14px 24px;border-radius:12px;
  cursor:pointer;border:none;transition:transform .15s,background .15s,box-shadow .15s;flex:1;text-align:center;
}
.btn-primary{background:var(--roxo);color:#fff;box-shadow:0 10px 24px rgba(245,54,92,.3);text-decoration:none;display:inline-block}
.btn-primary:hover{background:var(--roxo-escuro)}
.btn-primary:active,.btn-ghost:active{transform:scale(.98)}
.btn-ghost{background:#fff;color:var(--roxo);border:2px solid var(--borda)}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed}

/* prévia */
.mt-preview{position:sticky;top:24px;text-align:center}
.preview-label{font-size:.72rem;font-weight:700;letter-spacing:1px;color:var(--cinza)}
.preview-phone{
  margin-top:12px;width:400px;max-width:100%;height:800px;margin-inline:auto;
  border-radius:44px;border:12px solid #15151c;overflow:hidden;background:#2f6fa8;
  box-shadow:0 30px 60px rgba(150,28,64,.25);
}
.preview-phone iframe{position:relative;z-index:2;width:100%;height:100%;border:0;display:block;background:#2f6fa8}

/* trava: nenhuma camada escura pode cobrir a tela do preview */
.preview-phone::before,
.preview-phone::after,
.phone-screen::before,
.phone-screen::after {
  background: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

/* ============ Seletor estilo "roda" (data / horário) ============ */
.wp{position:relative;margin-top:6px}
.wp + .wp{margin-top:14px}

/* gatilho (a "caixinha" que abre a roda) */
.wp-trigger{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--borda);border-radius:14px;padding:12px 16px;
  font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
.wp.open .wp-trigger{border-color:var(--roxo);box-shadow:0 0 0 4px rgba(245,54,92,.12)}
.wp-ico{
  flex:none;width:46px;height:46px;border-radius:12px;background:#ffe4e9;
  display:grid;place-items:center;font-size:1.25rem;
}
.wp-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.wp-text small{
  text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700;color:var(--roxo);
}
.wp-val{font-size:1.15rem;font-weight:600;color:var(--cinza)}
.wp-val.has-val{color:var(--texto)}

/* popup com as colunas */
.wp-pop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:50;
  min-width:290px;background:#fff;border:1px solid var(--borda);border-radius:18px;
  padding:8px 14px 14px;box-shadow:0 20px 48px rgba(150,28,64,.18);
}
.wp-pop[hidden]{display:none}
.wp-cols{display:flex;align-items:center;justify-content:center;gap:6px}

.wp-col{flex:1;display:flex;flex-direction:column;align-items:stretch;min-width:0}
.wp-sep{font-size:1.4rem;font-weight:700;color:var(--cinza);padding:0 2px;align-self:center}

/* setas (chevrons desenhados) */
.wp-arrow{
  height:26px;border:none;background:none;cursor:pointer;display:grid;place-items:center;
}
.wp-arrow::before{
  content:"";width:11px;height:11px;border-right:2px solid var(--cinza);border-bottom:2px solid var(--cinza);
  transition:border-color .15s;
}
.wp-arrow.wp-up::before{transform:rotate(-135deg);margin-top:4px}
.wp-arrow.wp-down::before{transform:rotate(45deg);margin-bottom:4px}
.wp-arrow:hover::before{border-color:var(--roxo)}

/* coluna que rola (a "roda") */
.wp-scroll{
  height:200px;overflow-y:auto;scroll-snap-type:y mandatory;
  padding:80px 0;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.wp-scroll::-webkit-scrollbar{display:none}
.wp-item{
  height:40px;display:grid;place-items:center;scroll-snap-align:center;cursor:pointer;
  font-size:1.05rem;font-weight:600;color:var(--cinza);border-radius:10px;
  transition:color .12s;white-space:nowrap;
}
.wp-item.is-sel{
  color:var(--roxo-escuro);font-weight:700;
  background:#ffeef1;box-shadow:inset 0 0 0 1.5px rgba(245,54,92,.35);
}

/* rodapé */
.wp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.wp-now{
  background:none;border:none;cursor:pointer;font-family:inherit;font-weight:600;
  font-size:.95rem;color:var(--roxo);padding:8px 6px;
}
.wp-now:hover{color:var(--roxo-escuro)}
.wp-ok{
  background:var(--roxo);color:#fff;border:none;border-radius:12px;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.95rem;padding:10px 22px;
  box-shadow:0 8px 18px rgba(245,54,92,.28);transition:background .15s,transform .12s;
}
.wp-ok:hover{background:var(--roxo-escuro)}
.wp-ok:active{transform:scale(.97)}

.preview-phone,
.phone-screen {
  filter: none !important;
  opacity: 1 !important;
}

.phone-screen > * {
  position: relative;
  z-index: 2;
}

@media(max-width:880px){
  .mt{grid-template-columns:1fr;gap:30px}
  .mt-preview{order:-1;position:static}
  .preview-phone{height:560px}
}