/* =========================================================
   TUDOQUIZ — Fluent Forms (SAFE / PUBLICÁVEL)
   Escopo: funciona com classe no FORM ou no WRAPPER
   Padrão: selected DARK (premium)
   Tema CLEAN: adicionar "tq-theme-clean" no form ou wrapper
========================================================= */

/* -------------------------
   0) TOKENS
------------------------- */
form.tudoquiz-shell,
.tudoquiz-shell,
.tudoquiz-shell form {
  --tq-primary: #9FDD03;
  --tq-primary-contrast: #002f51;
  --tq-dark: #002f51;

  --tq-card-bg: #fff;
  --tq-card-border: rgba(15, 23, 42, 0.12);
  --tq-card-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);

  --tq-progress-track: rgba(71, 167, 255, 0.18);
  --tq-progress-fill: #47a7ff;

  --tq-maxw: 760px;
  --tq-pad-x: 16px;

  --tq-footer-gap: 16px;
  --tq-footer-height: 64px;

  --tq-header-row-h: 44px;
  --tq-header-gap: 10px;
  --tq-header-bg: #fff;
  --tq-header-icon: rgba(15, 23, 42, .65);

  --tq-header-logo: url("https://quiz.tudocrm.com/wp-content/uploads/2025/08/logo-tudoquiz.png");
  --tq-header-logo-w: 96px;
  --tq-header-logo-h: 28px;

  /* Chevron em BASE64 (evita erro “marcação” no CSS) */
  --tq-chevron: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48cGF0aCBkPSJtMTcuOSAzLjUtOC43IDguNSA4LjcgOC42Yy42LjYuNiAxLjUgMCAyLS42LjYtMS41LjYtMiAwbC05LjgtOS42Yy0uNi0uNi0uNi0xLjUgMC0yLjFsOS44LTkuNWMuNi0uNiAxLjUtLjUgMiAwIC42LjYuNiAxLjUgMCAyLjF6Ii8+PC9nPjwvc3ZnPg==");

  /* Icones Globais (Yes/No e outros em Base64 para cross-browser compatibility) */
  --tq-icon-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J25vbmUnIHZpZXdCb3g9JzAgMCAyNCAyNCcgc3Ryb2tlPSdjdXJyZW50Q29sb3InPjxwYXRoIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSczJyBkPSdNNSAxM2w0IDRMMTkgNycgLz48L3N2Zz4=");
  --tq-icon-x: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J25vbmUnIHZpZXdCb3g9JzAgMCAyNCAyNCcgc3Ryb2tlPSdjdXJyZW50Q29sb3InPjxwYXRoIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSczJyBkPSdNNiAxOEwxOCA2TTYgNmwxMiAxMicgLz48L3N2Zz4=");
  --tq-yn-yes: #66d20f;
  --tq-yn-no: #c72b00;

  --tq-adminbar: 0px;

  /* progress max width */
  --tq-progress-maxw: 1200px;

  /* PHOTO size */
  --tq-photo-w: 220px;
  --tq-photo-h: 220px;

  /* Selected padrão (Premium DARK) */
  --tq-selected-bg: var(--tq-dark);
  --tq-selected-fg: #fff;
  --tq-selected-border: var(--tq-dark);
  /* cor da sombra controlada pelo UI Builder via --tq-selected-shadow-color */
  --tq-selected-shadow-color: #9FDD03;
  --tq-selected-shadow: 0 0 0 3px color-mix(in srgb, var(--tq-selected-shadow-color) 28%, transparent), var(--tq-card-shadow);
}

/* Tema CLEAN */
form.tudoquiz-shell.tq-theme-clean,
.tudoquiz-shell.tq-theme-clean,
.tudoquiz-shell.tq-theme-clean form {
  --tq-selected-bg: #fff;
  --tq-selected-fg: #002340;
  --tq-selected-border: color-mix(in srgb, var(--tq-selected-shadow-color) 55%, transparent);
  --tq-selected-shadow: 0 0 0 3px color-mix(in srgb, var(--tq-selected-shadow-color) 28%, transparent), var(--tq-card-shadow);
}

/* Admin bar WP */
body.admin-bar form.tudoquiz-shell,
body.admin-bar .tudoquiz-shell,
body.admin-bar .tudoquiz-shell form {
  --tq-adminbar: 32px;
}

@media (max-width: 782px) {

  body.admin-bar form.tudoquiz-shell,
  body.admin-bar .tudoquiz-shell,
  body.admin-bar .tudoquiz-shell form {
    --tq-adminbar: 46px;
  }
}

/* Mobile ajustes do PHOTO */
@media (max-width: 640px) {

  form.tudoquiz-shell,
  .tudoquiz-shell,
  .tudoquiz-shell form {
    --tq-photo-w: 160px;
    --tq-photo-h: 160px;
  }
}

/* Offsets */
form.tudoquiz-shell,
.tudoquiz-shell,
.tudoquiz-shell form {
  --tq-top: calc(12px + var(--tq-adminbar));
  --tq-bottom: calc(var(--tq-footer-gap));
}

/* -------------------------
   5.3 Tipografia (Global Defaults)
------------------------- */
form.tudoquiz-shell,
.tudoquiz-shell,
.tudoquiz-shell form {
  /* Título */
  --tq-title-size: 24px;
  --tq-title-weight: 700;
  --tq-title-color: #002f51;

  /* Help Text */
  --tq-help-size: 14px;
  --tq-help-weight: 600;
  --tq-help-color: #002f51;
}

/* Box sizing no escopo */
form.tudoquiz-shell *,
.tudoquiz-shell *,
.tudoquiz-shell form * {
  box-sizing: border-box;
}

/* -------------------------
   1) HEADER FIXO (faixa + logo)
------------------------- */
form.tudoquiz-shell::before,
.tudoquiz-shell::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--tq-top) + var(--tq-header-row-h) + var(--tq-header-gap) + 12px);
  background: var(--tq-header-bg);
  border-bottom: 0 !important;
  z-index: 9997;
  pointer-events: none;
}

form.tudoquiz-shell::after,
.tudoquiz-shell::after {
  content: "";
  position: fixed;
  top: calc(var(--tq-top) + (var(--tq-header-row-h) - var(--tq-header-logo-h)) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--tq-header-logo-w);
  height: var(--tq-header-logo-h);
  background-image: var(--tq-header-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 9999;
  pointer-events: none;
}

/* Layout do form */
form.tudoquiz-shell,
.tudoquiz-shell form {
  max-width: var(--tq-maxw) !important;
  margin: 0 auto !important;
  padding-left: var(--tq-pad-x) !important;
  padding-right: var(--tq-pad-x) !important;

  padding-top: calc(var(--tq-top) + var(--tq-header-row-h) + var(--tq-header-gap) + 18px) !important;
  padding-bottom: calc(var(--tq-footer-height) + var(--tq-bottom) + 28px) !important;
}

/* Cursor */
form.tudoquiz-shell button,
form.tudoquiz-shell .ff-btn,
form.tudoquiz-shell .ff-el-form-check-label,
form.tudoquiz-shell label,
.tudoquiz-shell button,
.tudoquiz-shell .ff-btn,
.tudoquiz-shell .ff-el-form-check-label,
.tudoquiz-shell label {
  cursor: pointer;
}

/* -------------------------
   2) HEADER UI (voltar + texto + progress)
------------------------- */

/* Voltar */
form.tudoquiz-shell .ff-btn-prev,
.tudoquiz-shell .ff-btn-prev {
  position: fixed !important;
  top: calc(var(--tq-top) + 2px) !important;
  left: var(--tq-pad-x) !important;

  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: transparent !important;
  font-size: 0 !important;

  z-index: 10000 !important;
  border-radius: 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (min-width: 1024px) {

  form.tudoquiz-shell .ff-btn-prev,
  .tudoquiz-shell .ff-btn-prev {
    width: 48px !important;
    height: 48px !important;
  }
}

form.tudoquiz-shell .ff-btn-prev::before,
.tudoquiz-shell .ff-btn-prev::before {
  content: "";
  width: var(--tq-chevron-size, 26px);
  height: var(--tq-chevron-size, 26px);
  background: var(--tq-chevron-color, var(--tq-header-icon, #0f172a));

  -webkit-mask-image: var(--tq-chevron);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: var(--tq-chevron);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  opacity: .90;
}

form.tudoquiz-shell .ff-btn-prev:hover,
.tudoquiz-shell .ff-btn-prev:hover {
  background: rgba(15, 23, 42, .04) !important;
}

form.tudoquiz-shell .ff-btn-prev:disabled,
.tudoquiz-shell .ff-btn-prev:disabled {
  display: none !important;
}

/* Texto direita */
form.tudoquiz-shell .ff-el-progress-status,
.tudoquiz-shell .ff-el-progress-status {
  display: block !important;
  position: fixed !important;
  top: calc(var(--tq-top) + 12px) !important;
  right: var(--tq-pad-x) !important;
  z-index: 9999 !important;

  font-size: 0 !important;
  color: transparent !important;
  margin: 0 !important;
}

form.tudoquiz-shell .ff-el-progress-status::before,
.tudoquiz-shell .ff-el-progress-status::before {
  content: var(--tq-timer-text-string, "Tempo estimado: 2 min") !important;
  font-size: var(--tq-timer-size, 14px) !important;
  font-weight: 600 !important;
  color: var(--tq-timer-color, rgba(15, 23, 42, .55)) !important;
}

/* Esconder a div do injector para evitar elemento duplicado quebrando no fundo da tela */
form.tudoquiz-shell .tudoquiz-timer-text,
.tudoquiz-shell .tudoquiz-timer-text {
  display: none !important;
}

/* Progress fixo */
form.tudoquiz-shell .ff-el-progress,
.tudoquiz-shell .ff-el-progress {
  position: fixed !important;
  top: calc(var(--tq-top) + var(--tq-header-row-h) + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: calc(100vw - (var(--tq-pad-x) * 2)) !important;
  max-width: var(--tq-progress-maxw) !important;

  height: 8px !important;
  border-radius: 999px !important;
  background: var(--tq-progress-track) !important;
  overflow: hidden !important;
  border: 0 !important;
  margin: 0 !important;

  z-index: 9998 !important;
}

form.tudoquiz-shell .ff-el-progress .ff-el-progress-bar,
.tudoquiz-shell .ff-el-progress .ff-el-progress-bar {
  height: 100% !important;
  border-radius: 999px !important;
  background: var(--tq-progress-fill) !important;
  transition: width .35s ease;
}

form.tudoquiz-shell .ff-el-progress-bar span,
.tudoquiz-shell .ff-el-progress-bar span {
  display: none !important;
}

/* -------------------------
   3) FOOTER NAV + CTA (fixo)
------------------------- */
form.tudoquiz-shell .ff_step_nav,
form.tudoquiz-shell .ff-step-nav,
form.tudoquiz-shell .ff-btn-group,
form.tudoquiz-shell .step-nav,
.tudoquiz-shell .ff_step_nav,
.tudoquiz-shell .ff-step-nav,
.tudoquiz-shell .ff-btn-group,
.tudoquiz-shell .step-nav {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999 !important;

  padding-left: var(--tq-pad-x) !important;
  padding-right: var(--tq-pad-x) !important;
  padding-bottom: var(--tq-bottom) !important;

  background: transparent !important;
  box-shadow: none !important;

  display: flex !important;
  justify-content: center !important;
}

form.tudoquiz-shell .ff_step_nav>*,
form.tudoquiz-shell .ff-step-nav>*,
form.tudoquiz-shell .ff-btn-group>*,
form.tudoquiz-shell .step-nav>*,
.tudoquiz-shell .ff_step_nav>*,
.tudoquiz-shell .ff-step-nav>*,
.tudoquiz-shell .ff-btn-group>*,
.tudoquiz-shell .step-nav>* {
  width: 100% !important;
  max-width: var(--tq-maxw) !important;
  margin: 0 auto !important;

  display: flex !important;
  gap: 12px !important;
  align-items: center !important;

  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* CTA */
form.tudoquiz-shell .ff-btn-next,
form.tudoquiz-shell .ff-btn-submit,
form.tudoquiz-shell button[type="submit"],
.tudoquiz-shell .ff-btn-next,
.tudoquiz-shell .ff-btn-submit,
.tudoquiz-shell button[type="submit"] {
  width: 100% !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;

  background: var(--tq-primary) !important;
  color: var(--tq-primary-contrast) !important;
  font-weight: 800 !important;
  letter-spacing: .2px;

  box-shadow: none !important;

  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
}

/* -------------------------
   4) TITULO DA PERGUNTA (label / select / radio / checkbox)
------------------------- */
form.tudoquiz-shell .ff-el-input--label,
form.tudoquiz-shell .ff-el-input--label>label,
.tudoquiz-shell .ff-el-input--label,
.tudoquiz-shell .ff-el-input--label>label {
  width: 100% !important;
  text-align: center !important;
}

form.tudoquiz-shell .ff-el-input--label>label,
.tudoquiz-shell .ff-el-input--label>label {
  display: block !important;
  margin: 0 auto 26px !important;
  font-size: var(--tq-title-size) !important;
  font-weight: var(--tq-title-weight) !important;
  color: var(--tq-title-color) !important;
}

/* -------------------------
   5) CARDS (tudoquiz-card)
------------------------- */
form.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check,
.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check {
  margin-bottom: 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check-input,
.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check-label,
.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check-label {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;

  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid var(--tq-card-border) !important;
  background: var(--tq-card-bg) !important;
  color: #002340 !important;
  box-shadow: var(--tq-card-shadow) !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check-label::before,
.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check-label::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #CBD5E1;
  background: #fff;
  margin-right: 10px;
}

/* selected */
form.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check.ff_item_selected .ff-el-form-check-label,
.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check.ff_item_selected .ff-el-form-check-label {
  background: var(--tq-selected-bg) !important;
  color: var(--tq-selected-fg) !important;
  border-color: var(--tq-selected-border) !important;
  box-shadow: var(--tq-selected-shadow) !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check.ff_item_selected .ff-el-form-check-label::before,
.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check.ff_item_selected .ff-el-form-check-label::before {
  background: var(--tq-primary) !important;
  border-color: var(--tq-primary) !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check.ff_item_selected .ff-el-form-check-label::after,
.tudoquiz-shell .ff-el-group.tudoquiz-card .ff-el-form-check.ff_item_selected .ff-el-form-check-label::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 50%;
  width: 7px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--tq-dark);
  border-bottom: 2px solid var(--tq-dark);
  transform: rotate(45deg);
}

/* -------------------------
   6) PHOTO (tudoquiz-photo)
   - FF injeta background-image inline no label
   - NUNCA usar shorthand "background:" aqui
------------------------- */
form.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff_el_checkable_photo_holders,
.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff_el_checkable_photo_holders {
  display: grid !important;
  grid-template-columns: repeat(var(--tq-photo-cols, 3), minmax(0, 1fr)) !important;
  gap: var(--tq-photo-gap, 16px) !important;
  justify-content: center !important;
  width: 100% !important;
}

@media (max-width: 460px) {

  form.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff_el_checkable_photo_holders,
  .tudoquiz-shell .ff-el-group.tudoquiz-photo .ff_el_checkable_photo_holders {
    grid-template-columns: repeat(var(--tq-photo-cols-mb, 2), minmax(0, 1fr)) !important;
  }
}

form.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-image-holder,
.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-image-holder {
  width: 100% !important;
  height: 100% !important;

  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;

  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: var(--tq-card-shadow) !important;

  display: flex !important;
  flex-direction: column !important;
}

/* label da imagem (onde está o background-image inline) */
form.tudoquiz-shell .ff-el-group.tudoquiz-photo label.ff-el-image-input-src,
.tudoquiz-shell .ff-el-group.tudoquiz-photo label.ff-el-image-input-src {
  display: block !important;
  width: 100% !important;
  /* aspect-ratio garante proporção fixa sem cortar em qualquer nº de colunas */
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  margin: 0 !important;
  line-height: 0 !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
}

/* fallback se vier <img> */
form.tudoquiz-shell .ff-el-group.tudoquiz-photo label.ff-el-image-input-src img,
.tudoquiz-shell .ff-el-group.tudoquiz-photo label.ff-el-image-input-src img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* legenda */
form.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-form-check-label,
.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-form-check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 16px !important;
  margin: 0 !important;

  background: #fff !important;
  color: rgba(15, 23, 42, .78) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.10) !important;
}

/* remove “pill” azul interno */
form.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-form-check-label>span,
.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-form-check-label>span {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* selected */
form.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-image-holder.ff_item_selected,
.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-image-holder.ff_item_selected {
  border-color: var(--tq-selected-border) !important;
  box-shadow: var(--tq-selected-shadow) !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-image-holder.ff_item_selected .ff-el-form-check-label,
.tudoquiz-shell .ff-el-group.tudoquiz-photo .ff-el-image-holder.ff_item_selected .ff-el-form-check-label {
  background: var(--tq-selected-bg) !important;
  color: var(--tq-selected-fg) !important;
}

/* -------------------------
   7) ICON LIST (tudoquiz-icon-list)
------------------------- */
form.tudoquiz-shell .ff-el-group.tudoquiz-icon-list,
.tudoquiz-shell .ff-el-group.tudoquiz-icon-list {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check,
.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check {
  margin-bottom: 12px !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check-input,
.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check-label,
.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check-label {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;

  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--tq-card-bg) !important;
  border: 1px solid var(--tq-card-border) !important;
  box-shadow: var(--tq-card-shadow) !important;

  color: #002340 !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check-label::after,
.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check-label::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #CBD5E1;
  background: #fff;
  margin-left: 12px;
}

/* selected */
form.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check.ff_item_selected .ff-el-form-check-label,
.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check.ff_item_selected .ff-el-form-check-label {
  background: var(--tq-selected-bg) !important;
  color: var(--tq-selected-fg) !important;
  border-color: var(--tq-selected-border) !important;
  box-shadow: var(--tq-selected-shadow) !important;
}

form.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check.ff_item_selected .ff-el-form-check-label::after,
.tudoquiz-shell .ff-el-group.tudoquiz-icon-list .ff-el-form-check.ff_item_selected .ff-el-form-check-label::after {
  background: var(--tq-primary) !important;
  border-color: var(--tq-primary) !important;
}

/* -------------------------
   8) UTIL
------------------------- */
form.tudoquiz-shell .ff-el-help-message.ff_ahm,
.tudoquiz-shell .ff-el-help-message.ff_ahm {
  color: #fff;
}

form.tudoquiz-shell.tq-last-step .ff-btn-prev,
form.tudoquiz-shell.tq-complete .ff-btn-prev,
.tudoquiz-shell.tq-last-step .ff-btn-prev,
.tudoquiz-shell.tq-complete .ff-btn-prev {
  display: none !important;
}

/* =========================================================
   TUDOQUIZ — Ajustes finos (HEADER alinhado ao container 1200)
   1) Chevron alinhado à ESQUERDA do container da progress (1200px)
   2) "Tempo estimado" alinhado à DIREITA do mesmo container
   3) Remover efeito hover do chevron
========================================================= */

/* garante uma variável com a mesma largura da progress */
form.tudoquiz-shell,
.tudoquiz-shell,
.tudoquiz-shell form {
  --tq-progress-w: min(var(--tq-progress-maxw), calc(100vw - (var(--tq-pad-x) * 2)));
  --tq-progress-edge: calc(50% - (var(--tq-progress-w) / 2));
}

/* progress (só pra garantir que está usando o mesmo "container") */
form.tudoquiz-shell .ff-el-progress,
.tudoquiz-shell .ff-el-progress {
  width: var(--tq-progress-w) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 1) Chevron: alinha exatamente na borda esquerda do container da progress */
form.tudoquiz-shell .ff-btn-prev,
.tudoquiz-shell .ff-btn-prev {
  left: var(--tq-progress-edge) !important;
}

/* 2) "Tempo estimado": alinha exatamente na borda direita do container da progress */
form.tudoquiz-shell .ff-el-progress-status,
.tudoquiz-shell .ff-el-progress-status {
  right: var(--tq-progress-edge) !important;
}

/* 3) Remove hover (sem fundo/sem mudança de opacidade) */
form.tudoquiz-shell .ff-btn-prev:hover,
.tudoquiz-shell .ff-btn-prev:hover {
  background: transparent !important;
}

form.tudoquiz-shell .ff-btn-prev::before,
.tudoquiz-shell .ff-btn-prev::before {
  opacity: .90 !important;
}

form.tudoquiz-shell .ff-btn-prev:hover::before,
.tudoquiz-shell .ff-btn-prev:hover::before {
  opacity: .90 !important;
}

/* =========================================================
   TUDOQUIZ — Último ajuste fino (patch robusto)
   Chevron (ícone) ENCOSTADO à esquerda do botão
========================================================= */

form.tudoquiz-shell .ff-btn-prev,
.tudoquiz-shell .ff-btn-prev {
  padding: 0 !important;
  position: fixed !important;
  /* mantém o fixed */
  /* “âncora” pro pseudo-elemento (melhora consistência) */
  position: fixed !important;
}

/* garante que o ::before tenha caixa (display:block) e cola à esquerda */
form.tudoquiz-shell .ff-btn-prev::before,
.tudoquiz-shell .ff-btn-prev::before {
  content: "" !important;
  display: block !important;

  margin: 0 !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: var(--tq-chevron-size, clamp(24px, 3vw, 26px)) !important;
  height: var(--tq-chevron-size, clamp(24px, 3vw, 26px)) !important;

  background: var(--tq-chevron-color, var(--tq-header-icon, #0f172a)) !important;

  -webkit-mask-image: var(--tq-chevron) !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: left center !important;
  -webkit-mask-size: contain !important;

  mask-image: var(--tq-chevron) !important;
  mask-repeat: no-repeat !important;
  mask-position: left center !important;
  mask-size: contain !important;

  opacity: .90 !important;
}

/* =========================================================
   TUDOQUIZ — PATCH (texto ajuda + auto-advance hide next)
   Cole no FINAL do CSS (Fluent Snippets)
========================================================= */

/* -----------------------------------------
   (1) TEXTO AJUDA do FluentForms (ff_ahm)
   - Preto
   - Centralizado
   - Colado logo abaixo do título/pergunta
----------------------------------------- */
form.tudoquiz-shell .ff-el-help-message.ff_ahm,
.tudoquiz-shell .ff-el-help-message.ff_ahm {
  /* sobrescreve o branco do core */
  color: var(--tq-help-color) !important;
  text-align: center !important;

  display: block !important;
  width: 100% !important;
  max-width: var(--tq-maxw) !important;

  /* “logo abaixo do label” + respiro premium antes das opções */
  margin: -14px auto 18px !important;

  font-size: var(--tq-help-size) !important;
  font-weight: var(--tq-help-weight) !important;
  line-height: 1.35 !important;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Se em algum tema o help message vier com <p> interno */
form.tudoquiz-shell .ff-el-help-message.ff_ahm p,
.tudoquiz-shell .ff-el-help-message.ff_ahm p {
  margin: 0 !important;
  font-size: var(--tq-help-size) !important;
  font-weight: var(--tq-help-weight) !important;
  color: var(--tq-help-color) !important;
}


/* -----------------------------------------
   (2) AUTO-ADVANCE (radio) — esconder “Continuar”
   COMO USAR:
   - No campo radio do step auto-avanço, aplique a classe:
     tq-auto-advance
   Resultado:
   - Esconde o footer (nav/botão)
   - Remove o “espaço reservado” do footer nesse step
----------------------------------------- */

/* Quando o step visível (aria-hidden="false") contém um campo .tq-auto-advance */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance),
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) {
  --tq-footer-height: 0px;
  /* zera a reserva do footer nesse step */
}

/* Opcional: se quiser garantir que NENHUM “next” apareça (redundância) */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) :is(.ff-btn-next, .ff-btn-submit, button[type="submit"]),
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) :is(.ff-btn-next, .ff-btn-submit, button[type="submit"]) {
  display: none !important;
}

/* =========================================================
   PATCH tq-auto-advance — esconder só "Continuar"
   (mantém o botão Voltar funcionando)
========================================================= */

/* mantém o footer sem reserva nesse step */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance),
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) {
  --tq-footer-height: 0px;
}

/* esconde SOMENTE o botão continuar/submit nesse step */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) :is(.ff-btn-next, .ff-btn-submit, button[type="submit"]),
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) :is(.ff-btn-next, .ff-btn-submit, button[type="submit"]) {
  display: none !important;
}

/* garante que o nav não seja removido (caso exista outro CSS antigo) */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) :is(.ff_step_nav, .ff-step-nav, .ff-btn-group, .step-nav),
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) :is(.ff_step_nav, .ff-step-nav, .ff-btn-group, .step-nav) {
  display: flex !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* e o Voltar fica sempre disponível */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) .ff-btn-prev,
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-auto-advance) .ff-btn-prev {
  display: flex !important;
}

/* =========================================================
   TUDOQUIZ — Override: tq-show-next (prioridade)
   - Se um step tiver tq-show-next, NÃO esconde o footer
   - Mesmo que exista tq-auto-advance nesse step
========================================================= */

/* 1) Se o step visível tiver tq-show-next, restaura footer height */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-show-next),
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-show-next) {
  --tq-footer-height: 64px;
  /* volta ao padrão do seu token */
}

/* 2) Re-exibe o nav quando tq-show-next estiver presente */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-show-next) :is(.ff_step_nav, .ff-step-nav, .ff-btn-group, .step-nav),
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-show-next) :is(.ff_step_nav, .ff-step-nav, .ff-btn-group, .step-nav) {
  display: flex !important;
}

/* 3) Garante que o botão next/submit apareça */
form.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-show-next) :is(.ff-btn-next, .ff-btn-submit, button[type="submit"]),
.tudoquiz-shell:has(.fluentform-step[aria-hidden="false"] .tq-show-next) :is(.ff-btn-next, .ff-btn-submit, button[type="submit"]) {
  display: flex !important;
}

/* =========================================================
   TUDOQUIZ — COMPONENTE YES/NO (tq-yes-no)
   - UI premium para Radio com 2 opções (Sim/Não | Yes/No)
   - Usa Help Message (ff_ahm) como “caixa da afirmação”
========================================================= */

/* Tokens do componente (herda o resto dos tokens do TudoQuiz) */
form.tudoquiz-shell,
.tudoquiz-shell,
.tudoquiz-shell form {
  --tq-yn-maxw: 760px;
  --tq-yn-gap: 14px;
  --tq-yn-radius: 18px;
  --tq-yn-minh: 72px;

  --tq-yn-bg: #f8fafc;
  --tq-yn-border: rgba(15, 23, 42, 0.10);

  --tq-yn-yes: #00A698;
  --tq-yn-no: #EA552B;

  --tq-yn-box-bg: #F3F4F6;
  --tq-yn-box-text: #0f172a;
  --tq-yn-box-text-size: 20px;
  --tq-yn-box-text-weight: 700;

  --tq-yn-box-radius: 26px;
  --tq-yn-gap-top: 50px;
  --tq-yn-gap-bottom: 50px;

  --tq-yn-quote-color: #6478ff;

  /* Ícones em base64 (SAFE/PUBLICÁVEL) */
  --tq-icon-check: url("data:image/svg+xml;base64,IDxzdmcKICAgICAgICAgICAgICB3aWR0aD0iMjEiCiAgICAgICAgICAgICAgaGVpZ2h0PSIxNiIKICAgICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjEgMTYiCiAgICAgICAgICAgICAgZmlsbD0ibm9uZSIKICAgICAgICAgICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgICAgICAgID4KICAgICAgICAgICAgICA8cGF0aAogICAgICAgICAgICAgICAgZD0iTTE5LjQ3OSAwLjAwODE4MjA0QzE5LjI3MzEgMC4wMzkyMTM5IDE5LjA4MjggMC4xNTA0OTQgMTguOTM5NiAwLjMyMzEwNkMxOC41ODM0IDAuNzMyMDkzIDE1LjgyNyAzLjk4MzQ0IDEzLjAyNjMgNy4yODU0MUMxMC40OSAxMC4yNzU5IDguMzM4MjQgMTIuODE2MSA3LjY5MDM2IDEzLjU3MzdMMS45NjYyMiA4LjU2NjY2QzEuNzc0NjggOC4zOTU1IDEuNTMxMTkgOC4zMTkzNyAxLjI5MDIyIDguMzU1NzRDMS4wNDk0OCA4LjM5MTg2IDAuODMxMzI1IDguNTM3MzIgMC42ODQ1NjIgOC43NTk2NEMwLjUzNzc5MyA4Ljk4MTk1IDAuNDc0NjQ4IDkuMjYyMjEgMC41MDkyOCA5LjUzODM1QzAuNTQzOTE0IDkuODE0MjQgMC42NzMzNzEgMTAuMDYyNyAwLjg2ODcxIDEwLjIyODZMNy4yMjY0NiAxNS43ODk2VjE1Ljc4OTNDNy40MDE5NSAxNS45NDE0IDcuNjE5MjYgMTYuMDE1MyA3LjgzODQ1IDE1Ljk5NzRDOC4wNTc2NSAxNS45Nzk0IDguMjYzNzcgMTUuODcwOCA4LjQxODU0IDE1LjY5MTZDOC43NzQ4IDE1LjI4MjcgMTEuNTMxMSAxMi4wNDIyIDE0LjMzMTkgOC43NDA1MUMxNy4xMzI0IDUuNDM4NzkgMTkuOTc2NiAyLjA3NTQ5IDIwLjIyNTggMS43ODkzOEMyMC40MDg3IDEuNTg0NzYgMjAuNTA4MSAxLjMwMTExIDIwLjQ5OTUgMS4wMDhDMjAuNDkxIDAuNzE1MTMxIDIwLjM3NTUgMC40Mzk3MjkgMjAuMTgxMiAwLjI0OTM5MkMxOS45ODY5IDAuMDU5MDU1IDE5LjczMTggLTAuMDI4NDQxNiAxOS40Nzg0IDAuMDA4MTY5NzNMMTkuNDc5IDAuMDA4MTgyMDRaIgogICAgICAgICAgICAgICAgZmlsbD0iIzAwQTY5OCIKICAgICAgICAgICAgICAvPgogICAgICAgICAgICA8L3N2Zz4=");
  --tq-icon-x: url("data:image/svg+xml;base64,IDxzdmcKICAgICAgICAgICAgICB3aWR0aD0iMTUiCiAgICAgICAgICAgICAgaGVpZ2h0PSIxNiIKICAgICAgICAgICAgICB2aWV3Qm94PSIwIDAgMTUgMTYiCiAgICAgICAgICAgICAgZmlsbD0ibm9uZSIKICAgICAgICAgICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgICAgICAgID4KICAgICAgICAgICAgICA8cGF0aAogICAgICAgICAgICAgICAgZD0iTTEzLjA4NTggMS4wMDAwNkMxMy40NzYzIDAuNjA5NTQ1IDE0LjEwOTUgMC42MDk1NDYgMTQuNSAxLjAwMDA2QzE0Ljg5MDUgMS4zOTA1OSAxNC44OTA1IDIuMDIzNzYgMTQuNSAyLjQxNDI4TDguOTEzOTEgNy45OTk5N0wxNC41IDEzLjU4NTlDMTQuODkwNSAxMy45NzY0IDE0Ljg5MDUgMTQuNjA5NiAxNC41IDE1LjAwMDFDMTQuMTA5NSAxNS4zOTA2IDEzLjQ3NjMgMTUuMzkwNiAxMy4wODU4IDE1LjAwMDFMNy40OTk5MSA5LjQxMzk3TDEuOTE0MjEgMTVDMS41MjM3IDE1LjM5MDYgMC44OTA1MyAxNS4zOTA2IDAuNTAwMDAzIDE1LjAwMDFDMC4xMDk0ODUgMTQuNjA5NSAwLjEwOTQ4NSAxMy45NzY0IDAuNTAwMDAzIDEzLjU4NTlMNi4wODU5MSA3Ljk5OTk3TDAuNTAwMDI2IDIuNDE0MjhDMC4xMDk0OTcgMi4wMjM3NiAwLjEwOTQ5MiAxLjM5MDYgMC41MDAwMTQgMS4wMDAwOEMwLjg5MDUzNyAwLjYwOTU1MyAxLjUyMzcgMC42MDk1NTkgMS45MTQyMiAxLjAwMDA5TDcuNDk5OTEgNi41ODU5N0wxMy4wODU4IDEuMDAwMDZaIgogICAgICAgICAgICAgICAgZmlsbD0iI0VBNTUyQiIKICAgICAgICAgICAgICAvPgogICAgICAgICAgICA8L3N2Zz4=");
  --tq-yn-quote-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA0OCI+PHBhdGggZD0iTTI3IDVDMTUgOSA4IDE4IDggMzBjMCA4IDUgMTMgMTMgMTMgNiAwIDExLTQgMTEtMTAgMC01LTQtOS05LTloLTNjMS02IDUtMTEgMTItMTRWNXpNNTYgNUM0NCA5IDM3IDE4IDM3IDMwYzAgOCA1IDEzIDEzIDEzIDYgMCAxMS00IDExLTEwIDAtNS00LTktOS05aC0zYzEtNiA1LTExIDEyLTE0VjV6Ii8+PC9zdmc+");
}

/* Escopo do componente */
form.tudoquiz-shell .tq-yes-no,
.tudoquiz-shell .tq-yes-no {
  max-width: var(--tq-yn-maxw);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Layout: Help Message + 2 colunas */
form.tudoquiz-shell .tq-yes-no .ff-el-input--content,
.tudoquiz-shell .tq-yes-no .ff-el-input--content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tq-yn-gap) !important;
  max-width: var(--tq-yn-maxw);
  margin: 0 auto !important;
}

@media (max-width: 460px) {

  form.tudoquiz-shell .tq-yes-no .ff-el-input--content,
  .tudoquiz-shell .tq-yes-no .ff-el-input--content {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------
   Help Message (Caixa da Afirmação)
--------------------------------------------------------- */
form.tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm,
.tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm {
  grid-column: 1 / -1 !important;
  width: min(920px, 100%) !important;
  margin: var(--tq-yn-gap-top) auto var(--tq-yn-gap-bottom) !important;

  padding: 28px 28px 26px !important;
  border-radius: var(--tq-yn-box-radius) !important;

  background: var(--tq-yn-box-bg) !important;
  color: var(--tq-yn-box-text) !important;

  box-shadow: none !important;
  border: 0 !important;

  text-align: center !important;
  position: relative !important;

  font-style: italic !important;
  font-weight: var(--tq-yn-box-text-weight) !important;
  font-size: var(--tq-yn-box-text-size) !important;
  line-height: 1.35 !important;
}

/* Se em algum tema vier um <p> interno */
form.tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm p,
.tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm p {
  color: var(--tq-yn-box-text) !important;
  font-weight: var(--tq-yn-box-text-weight) !important;
  font-size: var(--tq-yn-box-text-size) !important;
  margin: 0 !important;
}

/* 1) garantir o “respiro” de 50px */
.tq-yes-no .ff-el-input--label>label {
  margin-bottom: 0 !important;
}

/* ícone de aspas no topo */
form.tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm::before,
.tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm::before {
  content: "" !important;
  position: absolute !important;
  top: -26px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 58px !important;
  height: 58px !important;

  background: var(--tq-yn-quote-color) !important;

  -webkit-mask-image: var(--tq-yn-quote-icon) !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: var(--tq-yn-quote-icon) !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;
  opacity: .95 !important;
}

/* ---------------------------------------------------------
   Botões Yes/No (Radio)
--------------------------------------------------------- */
form.tudoquiz-shell .tq-yes-no .ff-el-form-check,
.tudoquiz-shell .tq-yes-no .ff-el-form-check {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
}

/* esconde o radio nativo */
form.tudoquiz-shell .tq-yes-no .ff-el-form-check-input,
.tudoquiz-shell .tq-yes-no .ff-el-form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Reset / Blindagem de pseudos do card */
form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before,
form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::after,
.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before,
.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::after,
form.tudoquiz-shell .ff-el-group.tudoquiz-card.tq-yes-no .ff-el-form-check-label::before,
form.tudoquiz-shell .ff-el-group.tudoquiz-card.tq-yes-no .ff-el-form-check-label::after,
.tudoquiz-shell .ff-el-group.tudoquiz-card.tq-yes-no .ff-el-form-check-label::before,
.tudoquiz-shell .ff-el-group.tudoquiz-card.tq-yes-no .ff-el-form-check-label::after {
  content: none !important;
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Base do “botão” */
form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label,
.tudoquiz-shell .tq-yes-no .ff-el-form-check-label {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  min-height: var(--tq-yn-minh) !important;
  padding: 16px 18px !important;

  background: var(--tq-yn-bg) !important;
  border: 1px solid var(--tq-yn-border) !important;
  border-radius: var(--tq-yn-radius) !important;

  box-shadow: none !important;

  font-weight: 800 !important;
  font-size: 18px !important;
  color: #0f172a !important;

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

/* Hover */
form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label:hover,
.tudoquiz-shell .tq-yes-no .ff-el-form-check-label:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
}

/* Ícone do Label (Recria de forma segura) */
form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before,
.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before,
form.tudoquiz-shell .ff-el-group.tudoquiz-card.tq-yes-no .ff-el-form-check-label::before,
.tudoquiz-shell .ff-el-group.tudoquiz-card.tq-yes-no .ff-el-form-check-label::before {
  content: "" !important;
  display: inline-block !important;

  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;

  background: var(--tq-yn-icon-color, #94A3B8) !important;

  -webkit-mask-image: var(--tq-yn-icon) !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: var(--tq-yn-icon) !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  opacity: .95 !important;
  margin-right: 10px !important;
}

/* Force span text properties inside the button */
form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label>span,
.tudoquiz-shell .tq-yes-no .ff-el-form-check-label>span {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------
   MAPEAMENTO DEFAULT DOS ÍCONES (POR TEXTO E ORDEM)
--------------------------------------------------------- */
/* Default Yes */
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="Sim"]+label,
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="sim"]+label,
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="Yes"]+label,
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="yes"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="Sim"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="sim"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="Yes"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="yes"]+label {
  --tq-yn-icon: var(--tq-icon-check);
}

/* Default No */
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="Não"]+label,
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="Nao"]+label,
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="não"]+label,
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="nao"]+label,
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="No"]+label,
form.tudoquiz-shell .tq-yes-no input[type="radio"][value*="no"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="Não"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="Nao"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="não"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="nao"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="No"]+label,
.tudoquiz-shell .tq-yes-no input[type="radio"][value*="no"]+label {
  --tq-yn-icon: var(--tq-icon-x);
}

/* fallback visual by order if values do not match */
.tq-yes-no.tq-yes-left .ff-el-input--content:not(:has(> .ff-el-help-message))>.ff-el-form-check:nth-child(1) .ff-el-form-check-label::before,
.tq-yes-no.tq-yes-left .ff-el-input--content:has(> .ff-el-help-message)>.ff-el-form-check:nth-child(2) .ff-el-form-check-label::before,
.tq-yes-no .ff-el-input--content:not(:has(> .ff-el-help-message))>.ff-el-form-check:nth-child(1) .ff-el-form-check-label::before,
.tq-yes-no .ff-el-input--content:has(> .ff-el-help-message)>.ff-el-form-check:nth-child(2) .ff-el-form-check-label::before {
  background: var(--tq-yn-icon-color, var(--tq-yn-yes)) !important;
  -webkit-mask-image: var(--tq-icon-check) !important;
  mask-image: var(--tq-icon-check) !important;
}

.tq-yes-no.tq-yes-left .ff-el-input--content:not(:has(> .ff-el-help-message))>.ff-el-form-check:nth-child(2) .ff-el-form-check-label::before,
.tq-yes-no.tq-yes-left .ff-el-input--content:has(> .ff-el-help-message)>.ff-el-form-check:nth-child(3) .ff-el-form-check-label::before,
.tq-yes-no .ff-el-input--content:not(:has(> .ff-el-help-message))>.ff-el-form-check:nth-child(2) .ff-el-form-check-label::before,
.tq-yes-no .ff-el-input--content:has(> .ff-el-help-message)>.ff-el-form-check:nth-child(3) .ff-el-form-check-label::before {
  background: var(--tq-yn-icon-color, var(--tq-yn-no)) !important;
  -webkit-mask-image: var(--tq-icon-x) !important;
  mask-image: var(--tq-icon-x) !important;
}

.tq-yes-no.tq-yes-right .ff-el-input--content:not(:has(> .ff-el-help-message))>.ff-el-form-check:nth-child(1) .ff-el-form-check-label::before,
.tq-yes-no.tq-yes-right .ff-el-input--content:has(> .ff-el-help-message)>.ff-el-form-check:nth-child(2) .ff-el-form-check-label::before {
  background: var(--tq-yn-icon-color, var(--tq-yn-no)) !important;
  -webkit-mask-image: var(--tq-icon-x) !important;
  mask-image: var(--tq-icon-x) !important;
}

.tq-yes-no.tq-yes-right .ff-el-input--content:not(:has(> .ff-el-help-message))>.ff-el-form-check:nth-child(2) .ff-el-form-check-label::before,
.tq-yes-no.tq-yes-right .ff-el-input--content:has(> .ff-el-help-message)>.ff-el-form-check:nth-child(3) .ff-el-form-check-label::before {
  background: var(--tq-yn-icon-color, var(--tq-yn-yes)) !important;
  -webkit-mask-image: var(--tq-icon-check) !important;
  mask-image: var(--tq-icon-check) !important;
}

/* ---------------------------------------------------------
   SELECTED (premium)
--------------------------------------------------------- */
form.tudoquiz-shell .tq-yes-no .ff-el-form-check.ff_item_selected .ff-el-form-check-label,
.tudoquiz-shell .tq-yes-no .ff-el-form-check.ff_item_selected .ff-el-form-check-label {
  background: var(--tq-selected-bg) !important;
  color: var(--tq-selected-fg) !important;
  border-color: var(--tq-selected-border) !important;
  box-shadow: var(--tq-selected-shadow) !important;
  transform: none !important;
}

form.tudoquiz-shell .tq-yes-no .ff-el-form-check.ff_item_selected .ff-el-form-check-label::before,
.tudoquiz-shell .tq-yes-no .ff-el-form-check.ff_item_selected .ff-el-form-check-label::before,
form.tudoquiz-shell .tq-yes-no .ff-el-form-check-input:checked+.ff-el-form-check-label::before,
.tudoquiz-shell .tq-yes-no .ff-el-form-check-input:checked+.ff-el-form-check-label::before {
  background: currentColor !important;
}

/* =========================================================
/* =========================================================
   TUDOQUIZ — COMPONENTE RATING (tq-rating)
   - Layout Horizontal (linha única)
   - Numeração 1 a 5 (suporta radio group (.ff-el-form-check-group) ou rating field (.ff-el-ratings))
   - Selected high-contrast
========================================================= */

/* Tokens do Rating */
form.tudoquiz-shell,
.tudoquiz-shell,
.tudoquiz-shell form {
  /* Box Text (Help Message) Defaults */
  --tq-rating-box-bg: #F3F4F6;
  --tq-rating-box-text: #0f172a;
  --tq-rating-box-text-size: 20px;
  --tq-rating-box-text-weight: 700;
  --tq-rating-quote-color: #6478ff;
  --tq-rating-box-radius: 26px;
  --tq-rating-gap-top: 50px;
  --tq-rating-gap-bottom: 50px;
  --tq-yn-quote-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA0OCI+PHBhdGggZD0iTTI3IDVDMTUgOSA4IDE4IDggMzBjMCA4IDUgMTMgMTMgMTMgNiAwIDExLTQgMTEtMTAgMC01LTQtOS05LTloLTNjMS02IDUtMTEgMTItMTRWNXpNNTYgNUM0NCA5IDM3IDE4IDM3IDMwYzAgOCA1IDEzIDEzIDEzIDYgMCAxMS00IDExLTEwIDAtNS00LTktOS05aC0zYzEtNiA1LTExIDEyLTE0VjV6Ii8+PC9zdmc+");
}

/* ---------------------------------------------------------
   Help Message (Caixa da Afirmação) igual ao Yes/No
--------------------------------------------------------- */
form.tudoquiz-shell :is(.tq-rating, .tq-rating-1-5, .ff-el-group[data-name^="tq_rating"]) .ff-el-help-message.ff_ahm,
.tudoquiz-shell :is(.tq-rating, .tq-rating-1-5, .ff-el-group[data-name^="tq_rating"]) .ff-el-help-message.ff_ahm {
  width: min(920px, 100%) !important;
  margin: var(--tq-rating-gap-top) auto var(--tq-rating-gap-bottom) !important;

  padding: 28px 28px 26px !important;
  border-radius: var(--tq-rating-box-radius) !important;

  background: var(--tq-rating-box-bg) !important;
  color: var(--tq-rating-box-text) !important;

  box-shadow: none !important;
  border: 0 !important;

  text-align: center !important;
  position: relative !important;

  font-style: italic !important;
  font-weight: var(--tq-rating-box-text-weight) !important;
  font-size: var(--tq-rating-box-text-size) !important;
  line-height: 1.35 !important;
  display: block !important;
}

form.tudoquiz-shell :is(.tq-rating, .tq-rating-1-5, .ff-el-group[data-name^="tq_rating"]) .ff-el-help-message.ff_ahm p,
.tudoquiz-shell :is(.tq-rating, .tq-rating-1-5, .ff-el-group[data-name^="tq_rating"]) .ff-el-help-message.ff_ahm p {
  color: var(--tq-rating-box-text) !important;
  font-weight: var(--tq-rating-box-text-weight) !important;
  font-size: var(--tq-rating-box-text-size) !important;
  margin: 0 !important;
}

/* ícone de aspas no topo */
form.tudoquiz-shell :is(.tq-rating, .tq-rating-1-5, .ff-el-group[data-name^="tq_rating"]) .ff-el-help-message.ff_ahm::before,
.tudoquiz-shell :is(.tq-rating, .tq-rating-1-5, .ff-el-group[data-name^="tq_rating"]) .ff-el-help-message.ff_ahm::before {
  content: "" !important;
  position: absolute !important;
  top: -26px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 58px !important;
  height: 58px !important;

  background: var(--tq-rating-quote-color) !important;

  -webkit-mask-image: var(--tq-yn-quote-icon) !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: var(--tq-yn-quote-icon) !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;
  opacity: .95 !important;
  margin-bottom: 0 !important;
  /* reset from generic css */
}

/* ---------------------------------------------------------
   RATING — Seletores baseados na estrutura HTML real do Fluent Forms:
   .ff-el-ratings > label > input[type=radio][data-name^="tq_rating"] + svg
   Usa :has() para identificar o container pelo data-name do input filho.
--------------------------------------------------------- */

/* 1. Container flex */
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]),
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--tq-rating-gap, 10px) !important;
  flex-wrap: nowrap !important;
  counter-reset: tqrate;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 640px) {

  .tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]),
  form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) {
    gap: calc(var(--tq-rating-gap, 10px) * 0.8) !important;
  }
}

/* 2. Esconder input radio nativo */
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) input[type="radio"],
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* 3. Esconder SVG da estrela nativa e qualquer filho visual */
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label svg,
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label svg,
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label i,
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label i {
  display: none !important;
}

/* 4. Estilo do botão (label) */
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label,
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label {
  counter-increment: tqrate;

  width: var(--tq-rating-btn-size, 50px) !important;
  height: var(--tq-rating-btn-size, 50px) !important;
  min-width: var(--tq-rating-btn-size, 50px) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: var(--tq-rating-btn-radius, 12px) !important;
  border: 1px solid var(--tq-card-border, #e2e8f0) !important;
  background: var(--tq-card-bg, #ffffff) !important;
  box-shadow: var(--tq-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.08)) !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;

  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;

  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

@media (max-width: 640px) {

  .tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label,
  form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label {
    width: calc(var(--tq-rating-btn-size, 50px) * 0.88) !important;
    height: calc(var(--tq-rating-btn-size, 50px) * 0.88) !important;
    min-width: calc(var(--tq-rating-btn-size, 50px) * 0.88) !important;
  }
}

/* 5. Número via CSS counter */
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label::after,
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label::after {
  content: counter(tqrate) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--tq-card-text, #002340) !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Neutralizar ::before */
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label::before,
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label::before {
  content: none !important;
  display: none !important;
}

/* 6. Esconder texto "X/5" */
.tudoquiz-shell .ff-el-rating-text,
form.tudoquiz-shell .ff-el-rating-text {
  display: none !important;
}

/* 7. Hover */
@media (hover: hover) {

  .tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label:hover,
  form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09) !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
  }
}

/* 8. Estado selecionado (input:checked está ANTES do label no DOM) */
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) input[type="radio"]:checked+label,
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) input[type="radio"]:checked+label,
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label.active,
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label.selected,
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label[aria-checked="true"] {
  background: var(--tq-selected-bg) !important;
  border-color: var(--tq-selected-border, transparent) !important;
  box-shadow: var(--tq-selected-shadow) !important;
  transform: none !important;
}

/* número no estado selecionado */
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) input[type="radio"]:checked+label::after,
form.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) input[type="radio"]:checked+label::after,
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label.active::after,
.tudoquiz-shell .ff-el-ratings:has(input[data-name^="tq_rating"]) label.selected::after {
  color: var(--tq-selected-fg, #fff) !important;
}

/* =========================================================
   TUDOQUIZ — INPUTS (tq-input)
   - Telefone, Nome, Email etc
========================================================= */

form.tudoquiz-shell .ff-el-group.tq-input,
.tudoquiz-shell .ff-el-group.tq-input {
  margin-bottom: 12px !important;
}

form.tudoquiz-shell .tq-input input.ff-el-form-control,
.tudoquiz-shell .tq-input input.ff-el-form-control {
  height: 52px !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  padding: 0 16px !important;
  font-size: 16px !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

form.tudoquiz-shell .tq-input input.ff-el-form-control:focus,
.tudoquiz-shell .tq-input input.ff-el-form-control:focus {
  border-color: var(--tq-primary) !important;
  box-shadow: 0 0 0 3px rgba(159, 221, 3, 0.2) !important;
  outline: none !important;
}

/* Ajuste mobile footer se teclado abrir (opcional, mas bom pra UX) */
@media (max-width: 480px) {

  form.tudoquiz-shell:has(input:focus),
  .tudoquiz-shell:has(input:focus) {
    padding-bottom: 20px !important;
  }
}