/* =====================================================================
   components.css — as peças da marca que o Bootstrap não tem: situação,
   selo, foto impressa (polaroid), post-it, fundo noite, estado vazio.
   Vem do design-system/design-system.css.
   ===================================================================== */

/* Situação (pílula com bolinha) ---------------------------------------
   Sempre com a palavra escrita. A cor só confirma o que a palavra diz. */

.mp-situacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--mp-raio-pilula);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--mp-cinza);
  background: var(--mp-cinza-fundo);
}

.mp-situacao::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Âmbar pede ação do cliente. Roxo está andando com a gente. Verde chegou
   ou está em dia. Vermelho deu problema. Cinza saiu do jogo. */
.mp-situacao--escolhendo,
.mp-situacao--atrasada { color: var(--mp-ambar); background: var(--mp-ambar-fundo); }
.mp-situacao--revelando,
.mp-situacao--enviado { color: var(--mp-roxo); background: var(--mp-roxo-fundo); }
.mp-situacao--entregue,
.mp-situacao--ativa { color: var(--mp-ok); background: var(--mp-ok-fundo); }
.mp-situacao--recusado { color: var(--mp-vermelho); background: var(--mp-vermelho-fundo); }
.mp-situacao--pausada,
.mp-situacao--cancelada { color: var(--mp-cinza); background: var(--mp-cinza-fundo); }

/* Selo: chama atenção para uma coisa só (o plano mais escolhido, a economia
   do anual). Não é situação, não tem bolinha. */
.mp-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--mp-raio-pilula);
  font-family: var(--mp-fonte-titulo);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mp-tinta);
  background: var(--mp-laranja);
}

.mp-selo--verde { background: var(--mp-verde); }
.mp-selo--claro { color: var(--mp-laranja-escuro); background: var(--mp-laranja-fundo); }

/* Foto impressa (a peça da marca) -------------------------------------
   Borda branca, rodapé mais alto, data carimbada no canto: é o que o
   cliente recebe em casa. Use para mostrar foto de cliente, passo do
   "como funciona", plano. Nunca para ícone ou foto de produto genérica.
   --mp-giro inclina (de -8deg a 8deg, como no site). Mais que isso parece bagunça. */

.mp-foto {
  --mp-giro: 0deg;
  display: block;
  margin: 0;
  padding: 10px 10px 34px;
  background: #fff;
  border-radius: var(--mp-raio-foto);
  box-shadow: var(--mp-sombra-foto);
  transform: rotate(var(--mp-giro));
  position: relative;
}

.mp-foto img,
.mp-foto__imagem {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--mp-borda-suave);
  border-radius: 2px;
}

.mp-foto__data {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-family: var(--mp-fonte-titulo);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
  color: var(--mp-roxo);
}

.mp-foto__data b { display: block; font-size: 13px; color: var(--mp-verde-escuro); }

.mp-foto--esquerda { --mp-giro: -3deg; }
.mp-foto--direita { --mp-giro: 2.5deg; }

/* Legenda escrita à mão no rodapé da foto, no lugar da data.
   É o .legenda das polaroids do site. */
.mp-foto__legenda {
  position: absolute;
  left: 12px;
  bottom: 6px;
  font: 700 19px/1 var(--mp-caneta);
  color: var(--mp-tinta);
}

/* Post-it: um recado colado, um por tela no máximo. No site é o
   "o mais escolhido" em cima do botão de 20 fotos. */
.mp-postit {
  display: inline-block;
  width: 110px;
  padding: 10px 8px 12px;
  background: #a9e4df;
  box-shadow: 0 10px 18px -8px rgba(31, 29, 58, .35);
  font: 700 20px/1 var(--mp-caneta);
  color: var(--mp-tinta);
  transform: rotate(8deg);
}

/* Cantos de visor de câmera, do estudo da marca. Moldura de destaque
   em volta de uma foto ou de um número. Um por tela, no máximo. */
.mp-visor {
  position: relative;
  padding: 18px;
}

.mp-visor::before,
.mp-visor::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border: 4px solid var(--mp-roxo);
  pointer-events: none;
}

.mp-visor::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.mp-visor::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* Alternador (Mensal / Anual) ------------------------------------------ */

.mp-alternador {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: var(--mp-raio-pilula);
  background: var(--mp-roxo-fundo);
}

.mp-alternador button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--mp-raio-pilula);
  background: transparent;
  font-family: var(--mp-fonte-titulo);
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-tinta-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mp-alternador button.is-ativo {
  background: var(--mp-superficie);
  color: var(--mp-roxo);
  box-shadow: var(--mp-sombra-1);
}

/* Fundo noite: a única área escura. Dentro dela a ação vira verde-água. */
.mp-noite {
  background: var(--mp-noite);
  color: var(--mp-noite-texto);
}

.mp-noite h1, .mp-noite h2, .mp-noite h3 { color: #fff; }
.mp-noite .mp-olho { color: var(--mp-verde); }

.mp-noite .mp-alternador { background: rgba(255, 255, 255, .08); }
.mp-noite .mp-alternador button { color: var(--mp-noite-texto); }
.mp-noite .mp-alternador button.is-ativo { background: #fff; color: var(--mp-tinta); }

/* Estado vazio e carregando ------------------------------------------- */

.mp-vazio {
  text-align: center;
  padding: 40px 24px;
  color: var(--mp-apagado);
}

.mp-vazio__icone {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: var(--mp-roxo);
  background: var(--mp-roxo-fundo);
}

.mp-vazio h3 { font-size: 18px; margin-bottom: 4px; }
.mp-vazio p { max-width: 32ch; margin: 0 auto 18px; font-size: 14.5px; }

.mp-esqueleto {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--mp-borda-suave) 25%, #f7f4ee 50%, var(--mp-borda-suave) 75%);
  background-size: 200% 100%;
  animation: mp-brilho 1.4s ease-in-out infinite;
}

@keyframes mp-brilho {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Notyf (aviso de "deu certo", no canto) com a letra e a forma da casa. */
.notyf__toast {
  border-radius: var(--mp-raio-btn);
  font-family: var(--mp-fonte);
  font-weight: 700;
  box-shadow: var(--mp-sombra-3);
}

/* SweetAlert2 com a letra e a forma da casa. A cor dos botões vem do
   js/util/swal.js. */
.swal2-popup { border-radius: var(--mp-raio-bloco); font-family: var(--mp-fonte); }
.swal2-title { font-family: var(--mp-fonte-titulo); color: var(--mp-tinta); }
.swal2-styled { border-radius: var(--mp-raio-btn) !important; font-family: var(--mp-fonte-titulo); font-weight: 700; }



/* =====================================================================
   Fotos, Enviar, Ajustar e Revisar (Fase 2). Nasceram nos mockups com o
   prefixo mk-, aqui já com mp-.
   ===================================================================== */

/* Aviso curto no alto da tela: prazo, dica. Âmbar pede ação. */
.mp-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mp-ambar);
  background: var(--mp-ambar-fundo);
}

.mp-aviso i { font-size: 17px; line-height: 1.1; }
.mp-aviso strong { color: var(--mp-tinta); }
.mp-aviso--roxo { color: var(--mp-roxo-escuro); background: var(--mp-roxo-fundo); }
.mp-aviso--verde { color: var(--mp-verde-escuro); background: var(--mp-verde-fundo); }

/* Filtros em pílula. */
.mp-chips { display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }

.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--mp-toque);
  padding: 0 14px;
  border: 1px solid var(--mp-borda);
  border-radius: var(--mp-raio-pilula);
  background: var(--mp-superficie);
  font-family: var(--mp-fonte-titulo);
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-tinta-2);
  white-space: nowrap;
}

.mp-chip b { font-variant-numeric: tabular-nums; color: var(--mp-apagado); font-weight: 700; }
.mp-chip.is-ativo { border-color: var(--mp-roxo); color: var(--mp-roxo); background: var(--mp-roxo-fundo); }
.mp-chip.is-ativo b { color: var(--mp-roxo); }

/* Cada foto da grade: tocar escolhe, o lápis do canto abre o ajuste. */
.mp-escolha__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A moldura do design system é uma sombra por dentro do botão, e a foto cobre
   ela. Aqui a moldura vai numa camada por cima da foto. */
.mp-escolha__item.is-escolhida { box-shadow: none; }
.mp-escolha__item.is-escolhida::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 4px var(--mp-roxo);
  pointer-events: none;
}
.mp-escolha__item::after { z-index: 2; }
.mp-celula { position: relative; }
.mp-celula .mp-escolha__item { display: block; width: 100%; }

.mp-celula__abrir {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  background: rgba(31, 29, 58, .6);
}

.mp-celula__legenda {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  pointer-events: none;
  color: var(--mp-tinta);
  background: rgba(255, 255, 255, .9);
}

/* "Pequena" escrito, porque só o triângulo ninguém sabia o que era. */
.mp-celula__aviso {
  position: absolute;
  left: 6px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: var(--mp-raio-pilula);
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  color: var(--mp-ambar);
  background: var(--mp-ambar-fundo);
}

/* Filtros de um lado, Original / No papel do outro. */
.mp-barra-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.mp-barra-filtros .mp-chips { margin: 0; }
.mp-barra-filtros .mp-alternador { flex: 0 0 auto; }

/* Modo Original: a foto inteira, sem cortar, num quadrado cinza. O recorte só
   aparece no modo No papel. */
.mp-escolha__item img { object-fit: contain; }

/* O layout.css carrega depois e também define as colunas de .mp-escolha, por
   isso o modo papel usa dois seletores: para ganhar a briga das colunas. */

/* Modo No papel: cada célula é um polaroid, com a altura dele (em pé é mais
   alto que deitado). O lápis sobe para o canto de cima, para não cobrir a
   legenda, e o aviso de foto pequena fica em cima da foto. */
.mp-escolha.mp-escolha--papel { align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }

@media (min-width: 768px) {
  .mp-escolha.mp-escolha--papel { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 14px; }
}

.mp-escolha--papel .mp-escolha__item {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  border-radius: 0;
}

.mp-escolha--papel .mp-celula__abrir { bottom: auto; top: 6px; width: 30px; height: 30px; font-size: 12px; }

/* A moldura roxa da foto escolhida fica por fora do papel: por dentro ela
   cobria a data da polaroid deitada, que fica rente à borda de baixo. */
.mp-escolha--papel .mp-escolha__item.is-escolhida::before { inset: -6px; border-radius: 8px; }
.mp-escolha--papel .mp-celula__aviso { top: auto; bottom: 22%; left: 10%; }

/* Enviar: caixa de escolher fotos (celular) e faixa de arrastar (computador). */
.mp-soltar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px;
  border: 2px dashed rgba(var(--mp-roxo-rgb), .35);
  border-radius: var(--mp-raio);
  background: var(--mp-superficie);
  text-align: center;
}

.mp-soltar strong { font-family: var(--mp-fonte-titulo); font-size: 16px; }
.mp-soltar span { font-size: 13px; color: var(--mp-apagado); }

.mp-soltar__icone {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--mp-roxo);
  background: var(--mp-roxo-fundo);
}

.mp-arrastar {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 16px 20px;
  border: 2px dashed rgba(var(--mp-roxo-rgb), .35);
  border-radius: var(--mp-raio);
  background: var(--mp-superficie);
}

.mp-arrastar.is-sobre { border-color: var(--mp-roxo); background: var(--mp-roxo-fundo); }
.mp-arrastar__texto { flex: 1; min-width: 200px; }
.mp-arrastar__texto strong { display: block; font-family: var(--mp-fonte-titulo); }
.mp-arrastar__texto > span { font-size: 13.5px; color: var(--mp-apagado); }
.mp-arrastar__status { margin-top: 8px; font-size: 13.5px; }
.mp-arrastar__erros { margin: 4px 0; padding-left: 18px; font-size: 12.5px; color: var(--mp-vermelho); }

/* Fila de envio. */
.mp-fila { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mp-fila__titulo { font-family: var(--mp-fonte-titulo); font-size: 15px; }

.mp-fila__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--mp-borda);
  border-radius: 14px;
  background: var(--mp-superficie);
}

.mp-fila__item img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; display: block; background: var(--mp-borda-suave); }
.mp-fila__texto { min-width: 0; }
.mp-fila__nome { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-fila__detalhe { font-size: 12px; color: var(--mp-apagado); }
.mp-fila__item.is-erro { border-color: #f0c5bf; background: var(--mp-vermelho-fundo); }
.mp-fila__item.is-erro .mp-fila__detalhe { color: var(--mp-vermelho); }

.mp-barra { height: 5px; margin-top: 6px; border-radius: 5px; background: var(--mp-borda-suave); overflow: hidden; }
.mp-barra span { display: block; height: 100%; border-radius: 5px; background: var(--mp-roxo); transition: width .2s ease; }
.mp-icone-ok { font-size: 22px; color: var(--mp-ok); }
.mp-contagem { font-size: 12px; color: var(--mp-apagado); font-variant-numeric: tabular-nums; }

/* Cartão do computador ("Seu pacote", "Legenda e data"). */
.mp-painel {
  padding: 18px 20px;
  border: 1px solid var(--mp-borda);
  border-radius: var(--mp-raio);
  background: var(--mp-superficie);
}

.mp-painel__titulo { font-size: 18px; margin: 0 0 14px; }

.mp-pacote__numero { font-family: var(--mp-fonte-titulo); font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-pacote__numero small { font-size: 18px; color: var(--mp-apagado); }
.mp-pacote__slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 14px 0; }
.mp-pacote__slots img,
.mp-pacote__slots span { display: block; width: 100%; aspect-ratio: 1; border-radius: 4px; object-fit: cover; background: var(--mp-borda-suave); }
.mp-pacote__slots span { background: none; border: 2px dashed var(--mp-borda); }

/* Ajustar: a mesa onde o papel fica apoiado. */
.mp-mesa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px 20px;
  border-radius: var(--mp-raio-bloco);
  background: var(--mp-borda-suave);
}

/* A foto no papel, na proporção da impressão. Vertical: papel 7,5 x 10 cm e
   foto 6,5 x 8 cm. Deitada: papel 10 x 7,5 cm e foto 9 x 6 cm. Margem de 0,5 cm.
   Tudo em porcentagem do papel, então vale em qualquer tamanho de tela. O
   container-type deixa a legenda e a data crescerem junto (unidade cqw). */
.mp-polaroid {
  --mp-pol: 300px;
  container-type: inline-size;
  position: relative;
  width: min(var(--mp-pol), 100%);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--mp-raio-foto);
  box-shadow: var(--mp-sombra-foto);
}

.mp-polaroid--horizontal { --mp-pol: 340px; aspect-ratio: 4 / 3; }

@media (min-width: 768px) {
  .mp-polaroid { --mp-pol: 420px; }
  .mp-polaroid--horizontal { --mp-pol: 560px; }
}

.mp-polaroid__foto {
  position: absolute;
  top: 5%;
  left: 6.667%;
  width: 86.667%;
  height: 80%;
  overflow: hidden;
  background: var(--mp-borda-suave);
}

.mp-polaroid--horizontal .mp-polaroid__foto { top: 6.667%; left: 5%; width: 90%; height: 80%; }
.mp-polaroid__foto img { display: block; max-width: 100%; }

/* A faixa branca de baixo do papel (1,5 cm em pé, 1 cm deitada) é onde moram a
   legenda e a data. As duas ficam centralizadas na altura da faixa. */
.mp-polaroid { --mp-banda-topo: 85%; --mp-banda-alta: 20cqw; }
.mp-polaroid--horizontal { --mp-banda-topo: 86.667%; --mp-banda-alta: 10cqw; }

/* text-align: left de propósito: na grade o polaroid fica dentro de um botão, e
   botão centraliza o texto sozinho, o que deixava a segunda linha da legenda
   no meio ali e à esquerda no Ajustar. */
.mp-polaroid__legenda {
  position: absolute;
  text-align: left;
  left: 6.667cqw;
  right: 28cqw;
  top: var(--mp-banda-topo);
  height: var(--mp-banda-alta);
  display: flex;
  align-items: center;
  font-family: var(--mp-caneta);
  font-weight: 700;
  font-size: 6.6cqw;
  line-height: 1.05;
  color: var(--mp-verde-escuro);
}

.mp-polaroid__legenda span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.mp-polaroid--horizontal .mp-polaroid__legenda { left: 5cqw; right: 22cqw; font-size: 5.2cqw; }
.mp-polaroid--horizontal .mp-polaroid__legenda span { -webkit-line-clamp: 1; }

/* A data é a mesma em pé e deitada: três linhas (dia, mês, ano). Só encolhe. */
.mp-polaroid__data {
  position: absolute;
  right: 6.667cqw;
  top: var(--mp-banda-topo);
  height: var(--mp-banda-alta);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  font-family: var(--mp-fonte-titulo);
  font-weight: 800;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
}

.mp-polaroid__data span { font-size: 4.4cqw; color: var(--mp-tinta-2); }
.mp-polaroid__data b { font-size: 4.4cqw; color: var(--mp-roxo); text-transform: uppercase; }
.mp-polaroid__data small { font-size: 3.6cqw; color: var(--mp-tinta-2); font-weight: 800; }

.mp-polaroid--horizontal .mp-polaroid__data { right: 5cqw; }
.mp-polaroid--horizontal .mp-polaroid__data span,
.mp-polaroid--horizontal .mp-polaroid__data b { font-size: 2.9cqw; }
.mp-polaroid--horizontal .mp-polaroid__data small { font-size: 2.4cqw; }

/* O polaroid em miniatura (grade "No papel" e revisão do pacote): ocupa a
   largura da célula e a foto é posicionada por estilo, não pelo Cropper. O
   quadro da foto vira container para a foto usar cqw (ver MPPacote). */
.mp-polaroid--mini { width: 100%; }
.mp-polaroid--mini .mp-polaroid__foto { container-type: size; }
.mp-polaroid--mini .mp-polaroid__foto img { position: absolute; max-width: none; }

/* O Cropper.js vem com alças e linhas de recorte. Aqui o quadro é fixo (é o
   papel), então some tudo menos as linhas de terço que ajudam a enquadrar. */
.mp-polaroid .cropper-line,
.mp-polaroid .cropper-point,
.mp-polaroid .cropper-center { display: none; }
.mp-polaroid .cropper-view-box { outline: 0; }
.mp-polaroid .cropper-face { background: transparent; }
.mp-polaroid .cropper-dashed { border-color: rgba(255, 255, 255, .75); opacity: .55; }

/* Escolha da letra da legenda: cada botão escrito na própria letra. */
.mp-fontes { display: flex; flex-wrap: wrap; gap: 8px; }

.mp-fonte {
  min-height: var(--mp-toque);
  padding: 0 14px;
  border: 1px solid var(--mp-borda);
  border-radius: 12px;
  background: var(--mp-superficie);
  font-size: 20px;
  line-height: 1;
  color: var(--mp-tinta);
}

.mp-fonte.is-ativa { border-color: var(--mp-roxo); background: var(--mp-roxo-fundo); color: var(--mp-roxo-escuro); box-shadow: 0 0 0 3px rgba(var(--mp-roxo-rgb), .15); }

/* Girar, aproximar, afastar, voltar ao original. */
.mp-ferramentas { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }

.mp-ferramenta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 70px;
  min-height: var(--mp-toque);
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: var(--mp-superficie);
  box-shadow: var(--mp-sombra-1);
  font-family: var(--mp-fonte-titulo);
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-tinta-2);
}

.mp-ferramenta i { font-size: 18px; color: var(--mp-roxo); }

/* Revisar: o pacote como sai no papel. Três por linha no celular, para dar para
   ler a legenda. align-items: start porque o polaroid deitado é mais baixo. */
.mp-revisar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; align-items: start; }

@media (min-width: 768px) {
  .mp-revisar { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
}

.mp-revisar__foto { display: block; color: inherit; text-decoration: none; }

.mp-revisar__vazio {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border: 2px dashed var(--mp-borda);
  border-radius: 4px;
  color: var(--mp-apagado);
  font-size: 18px;
  text-decoration: none;
}

/* Assinatura e conta --------------------------------------------------- */

/* O plano da tela de assinar: um botão grande que o cliente toca. */
.mp-plano {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border: 2px solid var(--mp-borda);
  border-radius: var(--mp-raio);
  background: var(--mp-superficie);
}

.mp-plano.is-escolhido {
  border-color: var(--mp-roxo);
  box-shadow: 0 0 0 4px rgba(var(--mp-roxo-rgb), .12);
}

.mp-plano__fotos {
  flex: 0 0 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--mp-roxo-fundo);
  color: var(--mp-roxo);
  font-family: var(--mp-fonte-titulo);
  font-weight: 800;
  line-height: 1;
}

.mp-plano__fotos b { font-size: 24px; font-variant-numeric: tabular-nums; }
.mp-plano__fotos small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.mp-plano__texto { flex: 1; min-width: 0; }
.mp-plano__nome { display: block; font-family: var(--mp-fonte-titulo); font-weight: 800; font-size: 16px; }
.mp-plano__preco { font-family: var(--mp-fonte-titulo); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-plano__preco small { font-size: 12px; font-weight: 600; color: var(--mp-apagado); }
.mp-plano .mp-selo { position: absolute; top: -11px; right: 14px; }

/* Linha "nome ........ valor" dos cartões da Conta. */
.mp-dado {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--mp-borda-suave);
  font-size: 14px;
}

.mp-dado:last-child { border-bottom: 0; }
.mp-dado span { color: var(--mp-apagado); }
.mp-dado strong { text-align: right; }

/* Lista de passos das Boas-vindas. */
.mp-checklist { display: flex; flex-direction: column; }

.mp-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--mp-borda-suave);
}

.mp-check:last-child { border-bottom: 0; }

.mp-check__icone {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #fff;
  background: var(--mp-ok);
}

.mp-check.is-pendente .mp-check__icone {
  color: var(--mp-roxo);
  background: var(--mp-roxo-fundo);
  box-shadow: inset 0 0 0 2px var(--mp-roxo);
}

.mp-check strong { display: block; font-family: var(--mp-fonte-titulo); font-size: 15px; }
/* Só o texto de apoio. Sem o `div >`, o span do ícone herdava o cinza e sumia. */
.mp-check div > span { font-size: 13px; color: var(--mp-apagado); }

/* Espera do pagamento: um aviso parado com o botão de conferir. */
.mp-espera { text-align: center; padding: 48px 8px; }
.mp-espera .spinner-border { width: 2.5rem; height: 2.5rem; color: var(--mp-roxo); }
.mp-espera h2 { margin: 18px 0 6px; }

/* Telas de leitura (assinar, conta, boas-vindas): uma coluna só, também no computador. */
.mp-estreita { max-width: 640px; margin: 0 auto; }

/* Cartão que é um link inteiro (Falar com a gente, na Conta). */
.mp-painel--link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.mp-painel--link strong { display: block; font-family: var(--mp-fonte-titulo); font-size: 16px; }
.mp-painel--link small { font-size: 13px; color: var(--mp-apagado); }
.mp-painel--link i { font-size: 26px; line-height: 1; color: var(--mp-ok); }

/* Pedidos: cada mês, do pacote até a casa do cliente --------------------- */

/* Etapas do pedido: escolhido, revelado, enviado, entregue. O mesmo desenho
   das etapas do Pedido no adm. */
.mp-etapas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 16px 0 4px; }

.mp-etapa { position: relative; text-align: center; font-size: 12px; font-weight: 700; color: var(--mp-apagado); }

.mp-etapa::before {
  content: '';
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--mp-borda);
}

.mp-etapa:first-child::before { display: none; }

.mp-etapa__bolinha {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  margin: 0 auto 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--mp-apagado);
  background: var(--mp-superficie);
  border: 3px solid var(--mp-borda);
}

.mp-etapa.is-feita { color: var(--mp-tinta); }
.mp-etapa.is-feita::before { background: var(--mp-roxo); }
.mp-etapa.is-feita .mp-etapa__bolinha { color: #fff; background: var(--mp-roxo); border-color: var(--mp-roxo); }

/* O código de rastreio com o botão de copiar. */
.mp-rastreio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--mp-raio-btn);
  background: var(--mp-papel);
}

.mp-rastreio code { font-size: 15px; font-weight: 700; color: var(--mp-tinta); letter-spacing: .04em; }