/*
  Pedido de materiais no visual v5 — /pedido-materiais.
  Paper: "S08 Pedido de materiais — robozin.ai" (desktop 1440). Celular
  seguindo a linguagem da home v5 celular.

  A dobra do Paper é o passo "intro" do wizard; os outros passos (CEP, lista,
  contato, código, sucesso, sem cobertura) ocupam o mesmo lugar como um cartão
  adesivo — o cartão "Etapa 3" do Paper é o modelo de todos. Classes geradas
  pelo pedido-materiais.js (.wz-*, .mat-*) também são estilizadas aqui.
*/

.p5-mat { --mat-creme: #FFF1E6; --mat-tijolo: #9A3412; --mat-laranja-txt: #C2410C; background: var(--color-paper); }
.p5-mat .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Faixa do wizard ---------- */
.p5-mat__wiz {
  background: var(--mat-creme);
  border-bottom: 2.5px solid var(--color-ink);
  padding: 64px 0 96px;
  overflow: hidden;
}
/* Na introdução a faixa é a dobra: o celular encosta na borda de baixo. */
.p5-mat__wiz:has([data-mat-panel="intro"]:not(.hidden)) { padding: 80px 0 0; }
.p5-mat__wiz:has([data-mat-panel="intro"]:not(.hidden)) .p5-mat__steps { display: none; }

.p5-mat__wrap { display: flex; flex-direction: column; gap: 32px; }
.fsp-wz-panel.hidden { display: none; }
.fsp-wz-panel.fsp-wz-anim { animation: p5-mat-in .35s ease; }
@keyframes p5-mat-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Stepper (montado pelo JS: [data-wz-dot] > .wz-num + .wz-label, .wz-bar) */
.p5-mat__steps { display: flex; align-items: center; justify-content: center; min-height: 32px; }
.p5-mat .wz-num {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  border: 2px solid var(--color-ink); background: var(--color-paper);
  font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--color-ink);
}
.p5-mat .wz-label { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--color-graphite); }
.p5-mat .wz-bar { width: 40px; height: 2px; margin: 0 10px; background: var(--color-ink); opacity: .25; }
.p5-mat .wz-bar.is-done { opacity: 1; }
.p5-mat [data-wz-dot].is-active .wz-num { background: var(--color-constru); }
.p5-mat [data-wz-dot].is-active .wz-label { color: var(--color-ink); }
.p5-mat [data-wz-dot].is-done .wz-num { background: var(--color-ink); color: #fff; }
.p5-mat [data-wz-dot].is-done .wz-label { color: var(--color-ink); }

/* ---------- Introdução (dobra) ---------- */
.p5-mat__intro { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 414fr); gap: 80px; }
.p5-mat__intro.hidden { display: none; }
.p5-mat__intro-txt { display: flex; flex-direction: column; gap: 28px; padding-top: 40px; padding-bottom: 80px; min-width: 0; }
.p5-mat__mono {
  margin: 0;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; line-height: 16px; text-transform: uppercase; color: var(--mat-tijolo);
}
.p5-mat__h1 {
  margin: 0;
  font-family: var(--font-display); font-size: 80px; font-weight: 800;
  letter-spacing: -0.05em; line-height: 78px; color: var(--color-ink);
}
.p5-mat__lead { margin: 0; max-width: 540px; font-size: 19px; line-height: 30px; color: var(--color-ink); }
.p5-mat__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.p5-mat__cta-nota { margin: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 18px; color: var(--mat-tijolo); }
/* O celular tem 900px e a dobra termina antes: a margem negativa deixa ele
   passar da borda e o overflow da faixa corta, como no Paper. */
.p5-mat__celular { align-self: start; margin-bottom: -160px; }
.p5-mat__celular img {
  display: block; width: 414px; max-width: 100%; height: auto;
  border-radius: 48px;
  box-shadow: var(--color-constru) 10px 10px 0;
}

/* ---------- Botões ---------- */
.p5-mat__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border: 2.5px solid var(--color-ink); border-radius: 999px;
  background: var(--color-paper);
  font-family: var(--font-display); font-size: 14px; font-weight: 800; line-height: 16px;
  color: var(--color-ink);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.p5-mat__btn--laranja { background: var(--color-constru); box-shadow: var(--color-ink) 3px 3px 0; }
.p5-mat__btn--laranja:hover { transform: translate(-1px, -1px); box-shadow: var(--color-ink) 4px 4px 0; }
.p5-mat__btn--grande { padding: 15px 28px; font-size: 17px; line-height: 20px; box-shadow: var(--color-ink) 4px 4px 0; }
.p5-mat__btn--peq { padding: 10px 18px; font-size: 15px; line-height: 18px; }
.p5-mat__btn--linha { border-width: 2px; padding: 11px 18px; }
.p5-mat__btn--linha:hover { background: var(--mat-creme); }
.p5-mat__btn--tinta { background: var(--color-ink); color: #fff; border-width: 2px; padding: 10px 14px; font-size: 13px; }
.p5-mat__btn--cheio { width: 100%; padding: 14px 22px; font-size: 16px; }
.p5-mat__btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.p5-mat__link {
  padding: 6px 0; background: none; border: 0;
  font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.p5-mat__link:hover { color: var(--mat-laranja-txt); }
.p5-mat__link:disabled { color: var(--color-graphite); text-decoration: none; cursor: not-allowed; }
.p5-mat__link--cinza { color: var(--color-graphite); }
.p5-mat__link--laranja { color: var(--color-constru); }

/* ---------- Cartão dos passos ---------- */
.p5-mat__card {
  display: flex; flex-direction: column; gap: 18px;
  width: 100%; max-width: 748px; margin-inline: auto;
  padding: 28px;
  background: var(--color-paper);
  border: 2.5px solid var(--color-ink); border-radius: 24px;
  box-shadow: var(--color-ink) 6px 6px 0;
}
.p5-mat__card--centro { align-items: center; text-align: center; max-width: 520px; }
.p5-mat__card--tracejado { max-width: 520px; border: 2px dashed var(--color-ink); box-shadow: none; gap: 12px; }
.p5-mat__card--tinta {
  max-width: 520px; gap: 12px;
  background: var(--color-ink); box-shadow: var(--color-constru) 6px 6px 0; color: #fff;
}
.p5-mat__card--tinta .p5-mat__h2 { color: #fff; }
.p5-mat__card--tinta .p5-mat__sub { color: #A1A1AA; }
.p5-mat__card--tinta .p5-mat__link { align-self: flex-start; }
.p5-mat__card--tinta [data-el="success-followup"]:not(.hidden) { align-self: flex-start; }
.p5-mat__check {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--color-success); border: 2.5px solid #fff; border-radius: 99px;
  font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--color-ink);
}
.p5-mat__bloco { display: flex; flex-direction: column; gap: 18px; }
.p5-mat__bloco.hidden { display: none; }
.p5-mat__etapa {
  margin: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; line-height: 16px; text-transform: uppercase; color: var(--mat-tijolo);
}
.p5-mat__etapa--cinza { color: var(--color-graphite); }
.p5-mat__h2 {
  margin: 0;
  font-family: var(--font-display); font-size: 28px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 32px; color: var(--color-ink);
}
.p5-mat__sub { margin: -6px 0 0; font-size: 15px; line-height: 22px; color: var(--color-graphite); }
.p5-mat__fone { margin: -10px 0 0; font-size: 16px; font-weight: 700; color: var(--color-ink); }
.p5-mat__erro { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-danger-700); }
.p5-mat__erro.hidden { display: none; }
.p5-mat__dica { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--color-graphite); }
.p5-mat__dica.hidden { display: none; }
.p5-mat__acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.p5-mat__acoes--inicio { justify-content: flex-start; }
.p5-mat__acoes--linha { padding-top: 6px; border-top: 1.5px solid var(--color-hairline); }

/* Campos */
.p5-mat__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.p5-mat__campo label,
.p5-mat__rotulo { font-size: 15px; font-weight: 700; line-height: 20px; color: var(--color-ink); }
.p5-mat__campo label { font-size: 13px; font-weight: 600; line-height: 16px; }
.p5-mat__rotulo { display: block; }
.p5-mat__campo input,
.p5-mat__campo textarea,
.p5-mat__espera input,
.p5-mat__compositor input,
.p5-mat [data-el="itens"] input {
  padding: 11px 12px;
  border: 2px solid var(--color-ink); border-radius: 12px;
  background: var(--color-paper);
  font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 20px; color: var(--color-ink);
}
/* As linhas de item vêm do JS com larguras do Tailwind (w-16, w-20, flex-1). */
.p5-mat__campo input, .p5-mat__campo textarea, .p5-mat__espera input, .p5-mat__compositor input { width: 100%; }
.p5-mat__campo textarea { resize: none; }
.p5-mat input::placeholder, .p5-mat textarea::placeholder { color: var(--color-graphite); opacity: 1; }
.p5-mat input:focus, .p5-mat textarea:focus { outline: 3px solid var(--color-constru); outline-offset: 1px; }
.p5-mat__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p5-mat__espera { display: flex; gap: 8px; }
.p5-mat__espera input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px; }
.p5-mat__ok { padding: 14px 16px; border: 2px solid var(--color-success-700); border-radius: 14px; background: var(--color-success-50); color: var(--color-success-700); font-size: 14px; line-height: 20px; }
.p5-mat__ok.hidden { display: none; }
.p5-mat__ok p { margin: 0; }
.p5-mat__aceite { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; line-height: 18px; }
.p5-mat__aceite input { width: 18px; height: 18px; flex: none; accent-color: var(--color-constru); }
.p5-mat__aceite a { text-decoration: underline; text-underline-offset: 2px; }

/* Chat de triagem */
.p5-mat__fala {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  background: var(--color-mist); border-radius: 4px 18px 18px 18px;
}
.p5-mat__fala svg { flex: none; margin-top: 4px; }
.p5-mat__fala p { margin: 0; font-size: 15px; line-height: 22px; color: var(--color-ink); }
.p5-mat__compositor {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 4px;
  border: 2px solid var(--color-ink); border-radius: 20px;
  box-shadow: var(--color-constru) 4px 4px 0;
}
.p5-mat__compositor input { border: 0; flex: 1; min-width: 0; font-size: 16px; }
.p5-mat__compositor input:focus { outline: 0; }
.p5-mat__compositor:focus-within { box-shadow: var(--color-constru) 5px 5px 0; }
.p5-mat .mat-chat-log { max-height: 42vh; overflow-y: auto; }
.p5-mat .mat-chat-log.hidden { display: none; }
.p5-mat .mat-msg { max-width: 82%; border-radius: 16px; padding: 9px 13px; font-size: 14px; font-weight: 500; line-height: 20px; white-space: pre-wrap; }
.p5-mat .mat-msg-user { background: var(--color-ink); color: #fff; margin-left: auto; }
.p5-mat .mat-msg-ia { background: var(--color-mist); color: var(--color-ink); }
.p5-mat .mat-chip {
  padding: 7px 14px; border: 2px solid var(--color-ink); border-radius: 999px; background: var(--color-paper);
  font-size: 13px; font-weight: 600; color: var(--color-ink); cursor: pointer;
}
.p5-mat .mat-chip:hover { background: var(--mat-creme); }

/* Lista */
.p5-mat__grupo { display: flex; flex-direction: column; gap: 10px; }
.p5-mat__grupo.hidden { display: none; }
.p5-mat__itens {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border: 2px solid var(--color-ink); border-radius: 16px;
}
.p5-mat [data-el="itens"] input { padding: 9px 10px; border-width: 1.5px; border-color: var(--color-hairline); font-size: 14px; }
.p5-mat__add { align-self: flex-start; padding: 4px 0; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--mat-laranja-txt); }
.p5-mat .mat-cat {
  padding: 7px 14px; border: 2px solid var(--color-ink); border-radius: 999px; background: var(--color-paper);
  font-size: 13px; font-weight: 600; color: var(--color-ink); cursor: pointer; transition: background-color .2s ease;
}
.p5-mat .mat-cat.is-active { background: var(--color-ink); color: #fff; }
.p5-mat__opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p5-mat__opcoes--3 { grid-template-columns: repeat(3, 1fr); }
.p5-mat .mat-opt {
  display: flex; flex-direction: column; width: 100%;
  padding: 12px; text-align: left;
  border: 2px solid var(--color-hairline); border-radius: 14px; background: var(--color-paper);
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.p5-mat .mat-opt.is-active { border: 2.5px solid var(--color-ink); background: var(--mat-creme); padding: 11.5px; }
.p5-mat .mat-opt[disabled] { opacity: .45; cursor: not-allowed; }
.p5-mat .mat-opt__tit { font-family: var(--font-display); font-size: 15px; font-weight: 800; line-height: 20px; color: var(--color-ink); }
.p5-mat .mat-opt__sub { font-size: 13px; line-height: 18px; color: var(--color-graphite); }
.p5-mat__cep-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 2px solid var(--color-hairline); border-radius: 14px;
}
.p5-mat__cep-valor { display: block; font-size: 14px; font-weight: 600; color: var(--color-graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Cinco passos ---------- */
.p5-mat__passos { padding: 112px 0 120px; }
.p5-mat__h2--grande { max-width: 760px; font-size: 52px; letter-spacing: -0.045em; line-height: 54px; }
.p5-mat__passos-lista {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
  margin: 40px 0 0; padding: 0; list-style: none;
}
.p5-mat__passos-lista li {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 16px; border-top: 3px solid var(--color-ink);
}
.p5-mat__passos-lista li.is-fim { border-top-color: var(--color-constru); }
.p5-mat__passo-n { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 32px; color: var(--color-constru); }
.p5-mat__passos-lista strong { font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 22px; }
.p5-mat__passos-lista li > span:last-child { font-size: 14px; line-height: 20px; color: var(--color-graphite); }

/* ---------- Telas intermediárias ---------- */
@media (max-width: 1199.98px) {
  .p5-mat__h1 { font-size: 62px; line-height: 62px; }
  .p5-mat__intro { gap: 48px; }
  .p5-mat__h2--grande { font-size: 44px; line-height: 46px; }
  .p5-mat__passos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}

/* ---------- Celular ---------- */
@media (max-width: 899.98px) {
  .p5-mat__wiz { padding: 28px 0 56px; }
  .p5-mat__wiz:has([data-mat-panel="intro"]:not(.hidden)) { padding: 40px 0 0; }
  .p5-mat__wrap { gap: 20px; }
  .p5-mat .wz-label { display: none; }
  .p5-mat .wz-bar { width: 22px; margin: 0 8px; }
  .p5-mat__intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .p5-mat__intro-txt { gap: 18px; padding: 0; }
  .p5-mat__h1 { font-size: 40px; line-height: 42px; letter-spacing: -0.045em; }
  .p5-mat__lead { font-size: 16px; line-height: 24px; }
  .p5-mat__cta .p5-mat__btn { width: 100%; }
  /* No celular o desenho do app aparece só pela metade de cima. */
  .p5-mat__celular { justify-self: center; width: 300px; margin-bottom: -300px; }
  .p5-mat__celular img { border-radius: 36px; box-shadow: var(--color-constru) 7px 7px 0; }
  .p5-mat__card { padding: 20px 16px; border-radius: 20px; box-shadow: var(--color-ink) 5px 5px 0; gap: 16px; }
  .p5-mat__card--tracejado { box-shadow: none; }
  .p5-mat__card--tinta { box-shadow: var(--color-constru) 5px 5px 0; }
  .p5-mat__h2 { font-size: 24px; line-height: 28px; }
  .p5-mat__dupla { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .p5-mat__opcoes, .p5-mat__opcoes--3 { grid-template-columns: minmax(0, 1fr); }
  .p5-mat__espera { flex-direction: column; }
  /* 16px: abaixo disso o Safari do iPhone dá zoom ao focar. */
  .p5-mat input, .p5-mat textarea { font-size: 16px !important; }
  .p5-mat__acoes .p5-mat__btn--laranja { flex: 1; }

  .p5-mat__passos { padding: 56px 0 64px; }
  .p5-mat__h2--grande { font-size: 32px; line-height: 34px; }
  .p5-mat__passos-lista { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
  .p5-mat__passos-lista li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 4px; }
  .p5-mat__passo-n { grid-row: span 2; font-size: 24px; }
}