/* ==========================================================================
   SIMULADOR — painel de afiliado do TikTok Shop num celular (23/09/2026)

   No desktop o resultado sai do cartão genérico e vai para onde o afiliado
   de verdade olha: a tela de comissões no celular. Os números são os da
   simulação (evento mgxsim:resultado, secao-simulador.js). No tablet e no
   celular fica o painel que gruda no topo — ali o celular não caberia.
   A interface do app é clara, como a do TikTok Shop, com o rosa da marca
   só no que é destaque (aba ativa, linha do gráfico).
   ========================================================================== */
.mgxsim .mgxsim-cel { display: none; }

@media (min-width: 64rem) {
  #mgx-simulador .mgxsim__caixa {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "cabeca    cel"
      "controles cel"
      "aviso     cel"
      ".         cel";
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 1rem;
    align-items: start;
  }
  #mgx-simulador .mgxsim__painel { display: none; }
  #mgx-simulador .mgxsim-cel {
    display: block;
    grid-area: cel;
    align-self: center;
    --cel-w: clamp(17rem, 22vw, 20rem);
  }
  #mgx-simulador .mgxsim__aviso { display: grid; gap: 0.5rem; }
}

/* ---- a sanfona (celular e tablet) ----------------------------------------- */
#mgx-simulador .mgxsim-mais { margin-block-start: 0.375rem; }
#mgx-simulador .mgxsim-mais > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #7AD4FF;
}
#mgx-simulador .mgxsim-mais > summary::-webkit-details-marker { display: none; }
#mgx-simulador .mgxsim-mais > summary::after {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
#mgx-simulador .mgxsim-mais[open] > summary::after { transform: rotate(-135deg); }
#mgx-simulador .mgxsim-mais .mgxsim-conta { margin-block: 0.25rem 0.5rem; }
#mgx-simulador .mgxsim__aviso-fraco { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #8FA0B0; }

/* ---- a interface do app, dentro do celular (tudo em cqw) ----------------- */
.mgxsim-app {
  --cel-status-cor: #161823;
  --cel-home-cor: rgba(22, 24, 35, 0.85);
  background: #fff !important;
  color: #161823 !important;
}
.mgxsim-app .mgxsim-app__in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14cqw 4.5cqw 5cqw;
  font-size: 3.4cqw;
}
.mgxsim-app p { margin: 0; }
.mgxsim-app .mgxsim-app__topo {
  display: grid;
  grid-template-columns: 7cqw 1fr 7cqw;
  align-items: center;
  text-align: center;
  font-size: 4.3cqw;
  font-weight: 700;
}
.mgxsim-app .mgxsim-app__voltar,
.mgxsim-app .mgxsim-app__mais {
  inline-size: 5cqw;
  block-size: 5cqw;
  background: #161823;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.mgxsim-app .mgxsim-app__voltar { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E"); }
.mgxsim-app .mgxsim-app__mais { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); justify-self: end; }
.mgxsim-app .mgxsim-app__abas {
  display: flex;
  justify-content: space-around;
  margin-block: 4cqw 3.5cqw;
  border-block-end: 1px solid #EBEBEB;
  font-size: 3.6cqw;
  font-weight: 600;
  color: #8A8B91;
}
.mgxsim-app .mgxsim-app__abas span { padding-block: 2.2cqw; }
.mgxsim-app .mgxsim-app__aba--on { color: #161823; box-shadow: inset 0 -0.7cqw 0 #FE2C55; }
.mgxsim-app .mgxsim-app__periodo {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  align-self: flex-start;
  padding: 1.2cqw 3cqw;
  border-radius: 999px;
  background: #F1F1F2;
  font-size: 3.2cqw;
  font-weight: 600;
}
.mgxsim-app .mgxsim-app__periodo i {
  inline-size: 1.6cqw; block-size: 1.6cqw;
  border-inline-end: 0.5cqw solid #161823; border-block-end: 0.5cqw solid #161823;
  transform: rotate(45deg) translateY(-0.4cqw);
}
.mgxsim-app .mgxsim-app__cartao {
  margin-block-start: 3.5cqw;
  padding: 4cqw;
  border-radius: 3.5cqw;
  background: #F8F8F8;
  border: 1px solid #EFEFEF;
}
.mgxsim-app .mgxsim-app__rotulo { font-size: 3.3cqw; color: #57585E; font-weight: 500; }
.mgxsim-app .mgxsim-app__valor {
  display: block;
  margin-block: 1cqw 0.6cqw;
  font-size: 10.5cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.mgxsim-app .mgxsim-app__sub { font-size: 3.1cqw; color: #8A8B91; }
.mgxsim-app .mgxsim-app__grafico { display: block; inline-size: 100%; block-size: 11cqw; margin-block-start: 3cqw; }
.mgxsim-app .mgxsim-app__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5cqw;
  margin-block-start: 2.5cqw;
}
.mgxsim-app .mgxsim-app__duo > div {
  padding: 3cqw 3.5cqw;
  border-radius: 3cqw;
  background: #F8F8F8;
  border: 1px solid #EFEFEF;
}
.mgxsim-app .mgxsim-app__duo p { font-size: 3cqw; color: #57585E; }
.mgxsim-app .mgxsim-app__duo b { font-size: 5.6cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.mgxsim-app .mgxsim-app__titulo { margin-block: 4.5cqw 1.5cqw; font-size: 3.7cqw; font-weight: 700; }
.mgxsim-app .mgxsim-app__pedidos { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mgxsim-app .mgxsim-app__pedidos li {
  display: grid;
  grid-template-columns: 10cqw minmax(0, 1fr) auto;
  gap: 2.8cqw;
  align-items: center;
  padding-block: 2cqw;
  border-block-end: 1px solid #F1F1F2;
  list-style: none;
}
.mgxsim-app .mgxsim-app__pedidos img { inline-size: 10cqw; block-size: 10cqw; border-radius: 2cqw; object-fit: cover; }
.mgxsim-app .mgxsim-app__pedidos span { display: grid; font-size: 3.3cqw; font-weight: 600; line-height: 1.25; }
.mgxsim-app .mgxsim-app__pedidos small { font-size: 2.8cqw; font-weight: 400; color: #8A8B91; }
.mgxsim-app .mgxsim-app__pedidos b { font-size: 3.4cqw; font-weight: 800; color: #161823; font-variant-numeric: tabular-nums; }
.mgxsim-app .cel__exemplo { background: rgba(22, 24, 35, 0.72); border-color: transparent; color: #fff; inset-block-start: auto; inset-block-end: 4.2cqh; inset-inline-end: auto; inset-inline-start: 4.5cqw; }

/* cada conta nova: o valor dá um pulso curto — quem mexe vê que mexeu */
@media (prefers-reduced-motion: no-preference) {
  .mgxsim-cel--pulso .mgxsim-app__valor { animation: mgxsim-app-pulso 520ms cubic-bezier(.2, .9, .2, 1); }
}
@keyframes mgxsim-app-pulso {
  0% { transform: scale(1); color: #161823; }
  35% { transform: scale(1.04); color: #FE2C55; }
  100% { transform: scale(1); color: #161823; }
}
.mgxsim-app .mgxsim-app__valor { transform-origin: 0 60%; }

/* ---- caber na tela (23/09/2026, 20h) --------------------------------------
   A tela do simulador passava 8px a 1440 e 65px a 390. O respiro de baixo
   do contêiner sai, e no celular o botão logo abaixo do simulador também:
   o próximo passo (bônus) já fecha com chamada. */
.elementor-3386 .elementor-element.elementor-element-f3335d5 > .e-con-inner { padding-block-end: 1.5rem !important; }
@media (max-width: 47.99rem) {
  .elementor-3386 .elementor-element.elementor-element-f3335d5 > .e-con-inner { padding-block-end: 0 !important; }
  .elementor-3386 .elementor-element.elementor-element-ef9e10c { display: none !important; }
}
/* celular baixo (até 800px de altura): a linha de apoio sai, o título encolhe */
@media (max-width: 47.99rem) and (max-height: 50rem) {
  #mgx-simulador .mgxsim__linha { display: none; }
  #mgx-simulador .mgxsim__titulo { font-size: 1.5rem !important; }
}
/* o campo de valor é alvo de toque: 44px (tinha 42) */
#mgx-simulador .mgxsim-ctrl__campo { block-size: 2.75rem !important; min-block-size: 2.75rem !important; }