/* Pesquisa de feedback pós-prova -- pedido do usuário 2026-09-20: "quero
   colocar um formulário discreto... no calor da emoção". Overlay em tela
   cheia (mesmo padrão visual escuro do resto da página de resultados),
   convite inicial em formato de toast discreto no canto da tela. */

.rmg-pesquisa-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.75);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.rmg-pesquisa-overlay[hidden] { display: none; }

@media (min-width: 640px) {
  .rmg-pesquisa-overlay { align-items: center; padding: 1.5rem; }
}

.rmg-pesquisa {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh;
  overflow-y: auto; background: #101010; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
  .rmg-pesquisa { border-radius: var(--radius-md); padding: 1.6rem; }
}

.rmg-pesquisa__fechar {
  position: sticky; top: 0; float: right; margin-left: .6rem;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.3rem;
  line-height: 1; cursor: pointer; z-index: 1;
}

.rmg-pesquisa__titulo {
  color: #fff; font-size: 1.15rem; font-weight: 800; margin: 0 0 .3rem;
}
.rmg-pesquisa__lede {
  color: rgba(255,255,255,.6); font-size: .82rem; margin: 0 0 1.2rem;
}

.rmg-pesquisa__secao {
  color: var(--yellow); font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  margin: 1.6rem 0 .6rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.rmg-pesquisa__campo {
  display: block; margin-bottom: 1.1rem; border: none; padding: 0;
}
/* Mesmo bug de especificidade CSS de sempre nesta sessão -- "display:block"
   acima vence o "[hidden]{display:none}" nativo. Só vira bug de verdade
   agora que o campo de CPF passou a ser escondido por JS (link pessoal
   por e-mail, ver resultados-pesquisa.js). */
.rmg-pesquisa__campo[hidden] { display: none; }
.rmg-pesquisa__label {
  display: block; color: rgba(255,255,255,.85); font-size: .85rem;
  font-weight: 700; margin-bottom: .5rem; padding: 0;
}
.rmg-pesquisa input[type="email"],
.rmg-pesquisa input[type="text"],
.rmg-pesquisa textarea {
  width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm); padding: .65rem .7rem; color: #fff;
  font-family: inherit; font-size: .85rem;
}
.rmg-pesquisa input[type="email"]:focus,
.rmg-pesquisa input[type="text"]:focus,
.rmg-pesquisa textarea:focus { outline: none; border-color: var(--yellow); }
.rmg-pesquisa textarea { resize: vertical; min-height: 4.5em; }

.rmg-pesquisa__opcoes {
  display: flex; flex-direction: column; gap: .5rem;
}
.rmg-pesquisa__opcao {
  display: flex; align-items: flex-start; gap: .55rem; cursor: pointer;
  color: rgba(255,255,255,.75); font-size: .82rem; line-height: 1.35;
}
.rmg-pesquisa__opcao input { flex-shrink: 0; margin-top: .15rem; accent-color: var(--yellow); width: 16px; height: 16px; }
.rmg-pesquisa__opcao--outro { align-items: center; }
.rmg-pesquisa__opcao--outro input[type="text"] { flex: 1 1 auto; }

.rmg-pesquisa__campo--escala { margin-bottom: .85rem; }
.rmg-pesquisa__escala { display: flex; gap: .5rem; }
.rmg-pesquisa__nota {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm);
  color: rgba(255,255,255,.6); font-size: .85rem; font-weight: 700; cursor: pointer;
}
.rmg-pesquisa__nota input { position: absolute; opacity: 0; width: 0; height: 0; }
.rmg-pesquisa__nota:has(input:checked) {
  background: rgba(255,204,0,.15); border-color: var(--yellow); color: var(--yellow);
}

.rmg-pesquisa__feedback {
  font-size: .8rem; color: #8fd6bd; text-align: center; margin: 0 0 .8rem;
}
.rmg-pesquisa__feedback[hidden] { display: none; }
.rmg-pesquisa__feedback--error { color: #ff8a8a; }

.rmg-pesquisa__enviar { width: 100%; }

/* Toast de convite -- some sozinho, não trava a navegação */
.rmg-pesquisa-toast {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); z-index: 1900; max-width: calc(100% - 1.6rem);
  display: flex; align-items: center; gap: .6rem;
  background: #171717; border: 1px solid rgba(255,204,0,.35); border-radius: var(--radius-sm);
  padding: .7rem .8rem; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.rmg-pesquisa-toast.is-visivel { opacity: 1; transform: translate(-50%, 0); }
.rmg-pesquisa-toast.is-saindo { opacity: 0; }
.rmg-pesquisa-toast__texto {
  color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.rmg-pesquisa-toast__btn {
  flex-shrink: 0; background: var(--yellow); color: #0a0a0a; border: none;
  border-radius: var(--radius-sm); padding: .4rem .65rem; font-size: .75rem;
  font-weight: 800; white-space: nowrap; cursor: pointer;
}
.rmg-pesquisa-toast__fechar {
  flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,.4);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .1rem;
}

@media (max-width: 420px) {
  .rmg-pesquisa-toast__texto { display: none; } /* mobile estreito: só o botão + fechar, sem quebrar linha */
}