interno */ form.tudoquiz-shell .ff-el-help-message.ff_ahm p, .tudoquiz-shell .ff-el-help-message.ff_ahm p{ margin: 0 !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” Cole no FINAL do seu CSS atual ========================================================= */ /* 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: #10b981; --tq-yn-no: #ef4444; --tq-quote-bg: rgba(71,167,255,0.12); --tq-quote-fg: #0f172a; --tq-quote-accent: #4f46e5; /* Ícones em base64 (SAFE/PUBLICÁVEL) */ --tq-icon-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTkgMTYuMiA0LjggMTJsLTEuNCAxLjRMOSAxOSAyMSA3bC0xLjQtMS40eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+"); --tq-icon-x: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4LjMgNS43IDEyIDEybDYuMyA2LjMtMS40IDEuNEwxMC42IDEzLjQgNC4zIDE5LjcgMi45IDE4LjMgOS4yIDEyIDIuOSA1LjcgNC4zIDQuM2w2LjMgNi4zIDYuMy02LjN6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4="); --tq-icon-quote: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA0OCI+PHBhdGggZD0iTTI4IDBIMTJDNS40IDAgMCA1LjQgMCAxMnYxOGMwIDYuNiA1LjQgMTIgMTIgMTJoNmMwIDMuMy0yLjcgNi02IDZIOHY2aDYgYzkuOSAwIDE4LTguMSAxOC0xOFYxMkMzMiA1LjQgMjYuNiAwIDIwIDB6bTM2IDBINThjLTYuNiAwLTEyIDUuNC0xMiAxMnYxOGMwIDYuNiA1LjQgMTIgMTIgMTJoNmMwIDMuMy0yLjcgNi02IDZoLTR2Nmg2YzkuOSAwIDE4LTguMSAxOC0xOFYxMkM2OCA1LjQgNjIuNiAwIDU2IDB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4="); } /* Escopo do componente: basta existir .tq-yes-no no container do campo */ 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 ocupa a linha toda + 2 colunas para os botões */ 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; } /* Mobile: empilha se ficar muito apertado */ @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 como “caixa da afirmação” (Wisey style) --------------------------------------------------------- */ 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; position: relative !important; padding: 28px 22px 22px !important; margin: 0 0 6px 0 !important; background: var(--tq-quote-bg) !important; color: var(--tq-quote-fg) !important; border-radius: 22px !important; text-align: center !important; font-style: italic !important; font-weight: 700 !important; font-size: clamp(18px, 2vw, 22px) !important; line-height: 1.35 !important; box-shadow: 0 10px 26px rgba(15,23,42,0.06) !important; } /* 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: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 56px; height: 40px; background: var(--tq-quote-accent); -webkit-mask-image: var(--tq-icon-quote); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: var(--tq-icon-quote); mask-repeat: no-repeat; mask-position: center; mask-size: contain; opacity: .95; } /* --------------------------------------------------------- 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; } /* 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 de pseudo antigos em labels (blindagem) */ form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::after, .tudoquiz-shell .tq-yes-no .ff-el-form-check-label::after{ content: 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{ 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; } /* hover sutil (premium) */ 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); box-shadow: 0 10px 24px rgba(15,23,42,0.07) !important; border-color: rgba(15,23,42,0.16) !important; } /* Ícone (define via vars por opção) */ form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before, .tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before{ content: ""; width: 20px; height: 20px; background: var(--tq-yn-icon-color, rgba(15,23,42,0.35)); -webkit-mask-image: var(--tq-yn-icon); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: var(--tq-yn-icon); mask-repeat: no-repeat; mask-position: center; mask-size: contain; opacity: .95; } /* Mapeia ícones automaticamente pelos valores (PT/EN) */ form.tudoquiz-shell .tq-yes-no input[type="radio"][value="Sim"] + 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="Yes"] + label{ --tq-yn-icon: var(--tq-icon-check); --tq-yn-icon-color: var(--tq-yn-yes); } 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, .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{ --tq-yn-icon: var(--tq-icon-x); --tq-yn-icon-color: var(--tq-yn-no); } /* selected (usa seus tokens já estáveis) */ 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; } /* garante que o texto interno não herde backgrounds/pills do FF */ 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; } /* ========================================================= TUDOQUIZ — PATCH YES/NO (ajuste fino) 1) Remove o quadradinho antigo (::before do card) 2) Define o ícone correto (X/Check) no ::before do YES/NO 3) Ajusta aspas: tamanho, posição e “leveza” ========================================================= */ /* 1) Mata QUALQUER ::before antigo do FluentForms/tudoquiz-card dentro do yes/no */ form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before, .tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before{ /* vamos “resetar” e reconstruir abaixo */ content: "" !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } /* 2) Ícone premium (X/Check) — garantindo que é esse o único ::before */ form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before, .tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before{ width: 18px !important; height: 18px !important; flex: 0 0 18px !important; /* a cor vem de --tq-yn-icon-color */ background: var(--tq-yn-icon-color, rgba(15,23,42,0.45)) !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; } /* Garante o mapeamento por texto (Sim/Não) via SPAN também (mais robusto) */ form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label span, .tudoquiz-shell .tq-yes-no .ff-el-form-check-label span{ font-weight: 800 !important; } /* Sim / Yes */ 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="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="SIM"] + label{ --tq-yn-icon: var(--tq-icon-check) !important; --tq-yn-icon-color: var(--tq-yn-yes) !important; } /* Não / 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="No"] + label, form.tudoquiz-shell .tq-yes-no input[type="radio"][value="NÃO"] + 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="NÃO"] + label{ --tq-yn-icon: var(--tq-icon-x) !important; --tq-yn-icon-color: var(--tq-yn-no) !important; } /* 3) Aspas — menor, mais “premium” e alinhadas */ 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{ width: 44px !important; height: 32px !important; top: -14px !important; /* desce um pouco */ opacity: .85 !important; /* menos “pesado” */ } /* Opcional: se quiser as aspas um pouco mais “pra dentro” do card */ form.tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm, .tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm{ padding-top: 26px !important; /* acompanha o novo tamanho */ } /* ========================================================= TUDOQUIZ — YES/NO (PATCH FUNCIONAL / BLINDADO) - Mata o ::before/::after do tudoquiz-card dentro do tq-yes-no - Cria ícones (X / Check) via mask base64 (publicável) - No selected: ícone fica branco (usa currentColor) ========================================================= */ /* 0) Tokens do componente (seguro/publicável) */ form.tudoquiz-shell, .tudoquiz-shell, .tudoquiz-shell form{ --tq-yn-yes: #16a34a; /* verde */ --tq-yn-no: #ef4444; /* vermelho */ /* check */ --tq-icon-check: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkuMDAgMTYuMTdsLTQuMTctNC4xN2ExIDEgMCAxIDEgMS40MS0xLjQxbDIuNzYgMi43NiA3LjU5LTcuNTlhMSAxIDAgMSAxIDEuNDEgMS40MWwtOS4wMCA5LjAwYTEgMSAwIDAgMS0xLjQxIDB6Ii8+PC9zdmc+"); /* X */ --tq-icon-x: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE4LjMgNS43YTEgMSAwIDAgMC0xLjQtMS40TDEyIDEwLjZsLTQuOS00LjlBMSAxIDAgMSAwIDUuNyA3LjFsNC45IDQuOS00LjkgNC45YTEgMSAwIDEgMCAxLjQgMS40bDQuOS00LjkgNC45IDQuOWExIDEgMCAwIDAgMS40LTEuNGwtNC45LTQuOXoiLz48L3N2Zz4="); } /* 1) Blindagem: dentro do YES/NO, desliga COMPLETAMENTE o ::after do card */ 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::after, form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::after, .tudoquiz-shell .tq-yes-no .ff-el-form-check-label::after{ content: none !important; } /* 2) Substitui o ::before do card pelo ícone do YES/NO (ganha do card) */ 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, form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before, .tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before{ content: "" !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; /* remove qualquer “quadrado” herdado */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* cor do ícone (no normal usa var; no selected vira branco via currentColor) */ background: var(--tq-yn-icon-color, rgba(15,23,42,.45)) !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; } /* 3) Mapeamento por ORDEM (blindado) — pq CSS não seleciona por texto */ /* Se o container tiver tq-yes-left: 1º = SIM, 2º = NÃO */ form.tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-form-check:nth-of-type(1), .tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-form-check:nth-of-type(1){ --tq-yn-icon: var(--tq-icon-check); --tq-yn-icon-color: var(--tq-yn-yes); } form.tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-form-check:nth-of-type(2), .tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-form-check:nth-of-type(2){ --tq-yn-icon: var(--tq-icon-x); --tq-yn-icon-color: var(--tq-yn-no); } /* Se o container tiver tq-yes-right (ou não tiver nada): 1º = NÃO, 2º = SIM */ form.tudoquiz-shell .tq-yes-no:not(.tq-yes-left) .ff-el-form-check:nth-of-type(1), .tudoquiz-shell .tq-yes-no:not(.tq-yes-left) .ff-el-form-check:nth-of-type(1){ --tq-yn-icon: var(--tq-icon-x); --tq-yn-icon-color: var(--tq-yn-no); } form.tudoquiz-shell .tq-yes-no:not(.tq-yes-left) .ff-el-form-check:nth-of-type(2), .tudoquiz-shell .tq-yes-no:not(.tq-yes-left) .ff-el-form-check:nth-of-type(2){ --tq-yn-icon: var(--tq-icon-check); --tq-yn-icon-color: var(--tq-yn-yes); } /* 4) Micro-ajuste premium: quando selecionado, o ícone vira branco (currentColor) - No teu tema premium: selected-fg = #fff, então fica branco. - No tema clean: selected-fg é escuro, então fica escuro (mantém legível). */ 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{ background: currentColor !important; }/* ========================================================= TQ YES/NO — ÍCONES (CHECK / X) — PATCH ✅ - SVG em BASE64 (compatível com validadores) - Remove o “quadradinho” do ::before - Ícone vira BRANCO quando selecionado (premium dark) Cole ESTE BLOCO NO FINAL do seu CSS. ========================================================= */ /* 1) SVGs (base64) + cores */ form.tudoquiz-shell, .tudoquiz-shell, .tudoquiz-shell form{ --tq-icon-check: url("data:image/svg+xml;base64,IDxzdmcKICAgICAgICAgICAgICB3aWR0aD0iMjEiCiAgICAgICAgICAgICAgaGVpZ2h0PSIxNiIKICAgICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjEgMTYiCiAgICAgICAgICAgICAgZmlsbD0ibm9uZSIKICAgICAgICAgICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgICAgICAgID4KICAgICAgICAgICAgICA8cGF0aAogICAgICAgICAgICAgICAgZD0iTTE5LjQ3OSAwLjAwODE4MjA0QzE5LjI3MzEgMC4wMzkyMTM5IDE5LjA4MjggMC4xNTA0OTQgMTguOTM5NiAwLjMyMzEwNkMxOC41ODM0IDAuNzMyMDkzIDE1LjgyNyAzLjk4MzQ0IDEzLjAyNjMgNy4yODU0MUMxMC40OSAxMC4yNzU5IDguMzM4MjQgMTIuODE2MSA3LjY5MDM2IDEzLjU3MzdMMS45NjYyMiA4LjU2NjY2QzEuNzc0NjggOC4zOTU1IDEuNTMxMTkgOC4zMTkzNyAxLjI5MDIyIDguMzU1NzRDMS4wNDk0OCA4LjM5MTg2IDAuODMxMzI1IDguNTM3MzIgMC42ODQ1NjIgOC43NTk2NEMwLjUzNzc5MyA4Ljk4MTk1IDAuNDc0NjQ4IDkuMjYyMjEgMC41MDkyOCA5LjUzODM1QzAuNTQzOTE0IDkuODE0MjQgMC42NzMzNzEgMTAuMDYyNyAwLjg2ODcxIDEwLjIyODZMNy4yMjY0NiAxNS43ODk2VjE1Ljc4OTNDNy40MDE5NSAxNS45NDE0IDcuNjE5MjYgMTYuMDE1MyA3LjgzODQ1IDE1Ljk5NzRDOC4wNTc2NSAxNS45Nzk0IDguMjYzNzcgMTUuODcwOCA4LjQxODU0IDE1LjY5MTZDOC43NzQ4IDE1LjI4MjcgMTEuNTMxMSAxMi4wNDIyIDE0LjMzMTkgOC43NDA1MUMxNy4xMzI0IDUuNDM4NzkgMTkuOTc2NiAyLjA3NTQ5IDIwLjIyNTggMS43ODkzOEMyMC40MDg3IDEuNTg0NzYgMjAuNTA4MSAxLjMwMTExIDIwLjQ5OTUgMS4wMDhDMjAuNDkxIDAuNzE1MTMxIDIwLjM3NTUgMC40Mzk3MjkgMjAuMTgxMiAwLjI0OTM5MkMxOS45ODY5IDAuMDU5MDU1IDE5LjczMTggLTAuMDI4NDQxNiAxOS40Nzg0IDAuMDA4MTY5NzNMMTkuNDc5IDAuMDA4MTgyMDRaIgogICAgICAgICAgICAgICAgZmlsbD0iIzAwQTY5OCIKICAgICAgICAgICAgICAvPgogICAgICAgICAgICA8L3N2Zz4="); --tq-icon-x: url("data:image/svg+xml;base64,IDxzdmcKICAgICAgICAgICAgICB3aWR0aD0iMTUiCiAgICAgICAgICAgICAgaGVpZ2h0PSIxNiIKICAgICAgICAgICAgICB2aWV3Qm94PSIwIDAgMTUgMTYiCiAgICAgICAgICAgICAgZmlsbD0ibm9uZSIKICAgICAgICAgICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgICAgICAgID4KICAgICAgICAgICAgICA8cGF0aAogICAgICAgICAgICAgICAgZD0iTTEzLjA4NTggMS4wMDAwNkMxMy40NzYzIDAuNjA5NTQ1IDE0LjEwOTUgMC42MDk1NDYgMTQuNSAxLjAwMDA2QzE0Ljg5MDUgMS4zOTA1OSAxNC44OTA1IDIuMDIzNzYgMTQuNSAyLjQxNDI4TDguOTEzOTEgNy45OTk5N0wxNC41IDEzLjU4NTlDMTQuODkwNSAxMy45NzY0IDE0Ljg5MDUgMTQuNjA5NiAxNC41IDE1LjAwMDFDMTQuMTA5NSAxNS4zOTA2IDEzLjQ3NjMgMTUuMzkwNiAxMy4wODU4IDE1LjAwMDFMNy40OTk5MSA5LjQxMzk3TDEuOTE0MjEgMTVDMS41MjM3IDE1LjM5MDYgMC44OTA1MyAxNS4zOTA2IDAuNTAwMDAzIDE1LjAwMDFDMC4xMDk0ODUgMTQuNjA5NSAwLjEwOTQ4NSAxMy45NzY0IDAuNTAwMDAzIDEzLjU4NTlMNi4wODU5MSA3Ljk5OTk3TDAuNTAwMDI2IDIuNDE0MjhDMC4xMDk0OTcgMi4wMjM3NiAwLjEwOTQ5MiAxLjM5MDYgMC41MDAwMTQgMS4wMDAwOEMwLjg5MDUzNyAwLjYwOTU1MyAxLjUyMzcgMC42MDk1NTkgMS45MTQyMiAxLjAwMDA5TDcuNDk5OTEgNi41ODU5N0wxMy4wODU4IDEuMDAwMDZaIgogICAgICAgICAgICAgICAgZmlsbD0iI0VBNTUyQiIKICAgICAgICAgICAgICAvPgogICAgICAgICAgICA8L3N2Zz4="); /* cores dos ícones (não selecionado) */ --tq-yn-yes: #00A698; /* verde */ --tq-yn-no: #EA552B; /* vermelho */ } /* 2) Reset do ícone do YES/NO (mata o quadradinho herdado do card) */ form.tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before, .tudoquiz-shell .tq-yes-no .ff-el-form-check-label::before{ content: "" !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important; /* remove qualquer estilo anterior que vira “quadrado” */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--tq-yn-icon-color, #8a8f98) !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; margin-right: 10px !important; } /* 3) Mapeamento padrão por VALUE (funciona mesmo sem tq-yes-left/right) */ 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); --tq-yn-icon-color: var(--tq-yn-yes); } 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); --tq-yn-icon-color: var(--tq-yn-no); } /* 4) Override opcional por lado (quando você usa tq-yes-left ou tq-yes-right) Usa :has() para não depender de existir (ou não) help-message. */ /* YES na ESQUERDA (1ª opção é YES) */ form.tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-input--content:not(:has(> .ff-el-help-message)) > .ff-el-form-check:nth-child(1), form.tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-input--content:has(> .ff-el-help-message) > .ff-el-form-check:nth-child(2), .tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-input--content:not(:has(> .ff-el-help-message)) > .ff-el-form-check:nth-child(1), .tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-input--content:has(> .ff-el-help-message) > .ff-el-form-check:nth-child(2){ --tq-yn-icon: var(--tq-icon-check); --tq-yn-icon-color: var(--tq-yn-yes); } form.tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-input--content:not(:has(> .ff-el-help-message)) > .ff-el-form-check:nth-child(2), form.tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-input--content:has(> .ff-el-help-message) > .ff-el-form-check:nth-child(3), .tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-input--content:not(:has(> .ff-el-help-message)) > .ff-el-form-check:nth-child(2), .tudoquiz-shell .tq-yes-no.tq-yes-left .ff-el-input--content:has(> .ff-el-help-message) > .ff-el-form-check:nth-child(3){ --tq-yn-icon: var(--tq-icon-x); --tq-yn-icon-color: var(--tq-yn-no); } /* YES na DIREITA (2ª opção é YES) */ form.tudoquiz-shell .tq-yes-no.tq-yes-right .ff-el-input--content:not(:has(> .ff-el-help-message)) > .ff-el-form-check:nth-child(1), form.tudoquiz-shell .tq-yes-no.tq-yes-right .ff-el-input--content:has(> .ff-el-help-message) > .ff-el-form-check:nth-child(2), .tudoquiz-shell .tq-yes-no.tq-yes-right .ff-el-input--content:not(:has(> .ff-el-help-message)) > .ff-el-form-check:nth-child(1), .tudoquiz-shell .tq-yes-no.tq-yes-right .ff-el-input--content:has(> .ff-el-help-message) > .ff-el-form-check:nth-child(2){ --tq-yn-icon: var(--tq-icon-x); --tq-yn-icon-color: var(--tq-yn-no); } form.tudoquiz-shell .tq-yes-no.tq-yes-right .ff-el-input--content:not(:has(> .ff-el-help-message)) > .ff-el-form-check:nth-child(2), form.tudoquiz-shell .tq-yes-no.tq-yes-right .ff-el-input--content:has(> .ff-el-help-message) > .ff-el-form-check:nth-child(3), .tudoquiz-shell .tq-yes-no.tq-yes-right .ff-el-input--content:not(:has(> .ff-el-help-message)) > .ff-el-form-check:nth-child(2), .tudoquiz-shell .tq-yes-no.tq-yes-right .ff-el-input--content:has(> .ff-el-help-message) > .ff-el-form-check:nth-child(3){ --tq-yn-icon: var(--tq-icon-check); --tq-yn-icon-color: var(--tq-yn-yes); } /* 5) Premium micro-ajuste: selecionado => ícone vira a cor do texto selecionado (no tema premium dark, isso dá ícone branco) */ form.tudoquiz-shell .tq-yes-no .ff-el-form-check.ff_item_selected, .tudoquiz-shell .tq-yes-no .ff-el-form-check.ff_item_selected{ --tq-yn-icon-color: var(--tq-selected-fg) !important; } /* ========================================================= TUDOQUIZ — YES/NO ICONS (FIX FINAL) - Aplica ícones (check / X) via mask (base64) - Funciona com ou sem Help Message (ff-el-help-message) - Respeita tq-yes-left / tq-yes-right - Quando selecionado, ícone fica branco ========================================================= */ .tq-yes-no .ff-el-form-check-label::before{ background: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Base (tamanho e alinhamento do ícone) */ .tq-yes-no .ff-el-form-check-label::before{ content:"" !important; display:inline-block !important; width: 18px !important; height: 18px !important; border-radius: 4px !important; flex: 0 0 18px !important; /* defaults */ background-color: #94A3B8 !important; -webkit-mask-repeat: no-repeat !important; -webkit-mask-position: center !important; -webkit-mask-size: contain !important; mask-repeat: no-repeat !important; mask-position: center !important; mask-size: contain !important; } /* DATA URIs (base64) */ .tq-yes-no{ --tq-yn-check: url("data:image/svg+xml;base64,IDxzdmcKICAgICAgICAgICAgICB3aWR0aD0iMjEiCiAgICAgICAgICAgICAgaGVpZ2h0PSIxNiIKICAgICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjEgMTYiCiAgICAgICAgICAgICAgZmlsbD0ibm9uZSIKICAgICAgICAgICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgICAgICAgID4KICAgICAgICAgICAgICA8cGF0aAogICAgICAgICAgICAgICAgZD0iTTE5LjQ3OSAwLjAwODE4MjA0QzE5LjI3MzEgMC4wMzkyMTM5IDE5LjA4MjggMC4xNTA0OTQgMTguOTM5NiAwLjMyMzEwNkMxOC41ODM0IDAuNzMyMDkzIDE1LjgyNyAzLjk4MzQ0IDEzLjAyNjMgNy4yODU0MUMxMC40OSAxMC4yNzU5IDguMzM4MjQgMTIuODE2MSA3LjY5MDM2IDEzLjU3MzdMMS45NjYyMiA4LjU2NjY2QzEuNzc0NjggOC4zOTU1IDEuNTMxMTkgOC4zMTkzNyAxLjI5MDIyIDguMzU1NzRDMS4wNDk0OCA4LjM5MTg2IDAuODMxMzI1IDguNTM3MzIgMC42ODQ1NjIgOC43NTk2NEMwLjUzNzc5MyA4Ljk4MTk1IDAuNDc0NjQ4IDkuMjYyMjEgMC41MDkyOCA5LjUzODM1QzAuNTQzOTE0IDkuODE0MjQgMC42NzMzNzEgMTAuMDYyNyAwLjg2ODcxIDEwLjIyODZMNy4yMjY0NiAxNS43ODk2VjE1Ljc4OTNDNy40MDE5NSAxNS45NDE0IDcuNjE5MjYgMTYuMDE1MyA3LjgzODQ1IDE1Ljk5NzRDOC4wNTc2NSAxNS45Nzk0IDguMjYzNzcgMTUuODcwOCA4LjQxODU0IDE1LjY5MTZDOC43NzQ4IDE1LjI4MjcgMTEuNTMxMSAxMi4wNDIyIDE0LjMzMTkgOC43NDA1MUMxNy4xMzI0IDUuNDM4NzkgMTkuOTc2NiAyLjA3NTQ5IDIwLjIyNTggMS43ODkzOEMyMC40MDg3IDEuNTg0NzYgMjAuNTA4MSAxLjMwMTExIDIwLjQ5OTUgMS4wMDhDMjAuNDkxIDAuNzE1MTMxIDIwLjM3NTUgMC40Mzk3MjkgMjAuMTgxMiAwLjI0OTM5MkMxOS45ODY5IDAuMDU5MDU1IDE5LjczMTggLTAuMDI4NDQxNiAxOS40Nzg0IDAuMDA4MTY5NzNMMTkuNDc5IDAuMDA4MTgyMDRaIgogICAgICAgICAgICAgICAgZmlsbD0iIzAwQTY5OCIKICAgICAgICAgICAgICAvPgogICAgICAgICAgICA8L3N2Zz4="); --tq-yn-cross: url("data:image/svg+xml;base64,IDxzdmcKICAgICAgICAgICAgICB3aWR0aD0iMTUiCiAgICAgICAgICAgICAgaGVpZ2h0PSIxNiIKICAgICAgICAgICAgICB2aWV3Qm94PSIwIDAgMTUgMTYiCiAgICAgICAgICAgICAgZmlsbD0ibm9uZSIKICAgICAgICAgICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgICAgICAgID4KICAgICAgICAgICAgICA8cGF0aAogICAgICAgICAgICAgICAgZD0iTTEzLjA4NTggMS4wMDAwNkMxMy40NzYzIDAuNjA5NTQ1IDE0LjEwOTUgMC42MDk1NDYgMTQuNSAxLjAwMDA2QzE0Ljg5MDUgMS4zOTA1OSAxNC44OTA1IDIuMDIzNzYgMTQuNSAyLjQxNDI4TDguOTEzOTEgNy45OTk5N0wxNC41IDEzLjU4NTlDMTQuODkwNSAxMy45NzY0IDE0Ljg5MDUgMTQuNjA5NiAxNC41IDE1LjAwMDFDMTQuMTA5NSAxNS4zOTA2IDEzLjQ3NjMgMTUuMzkwNiAxMy4wODU4IDE1LjAwMDFMNy40OTk5MSA5LjQxMzk3TDEuOTE0MjEgMTVDMS41MjM3IDE1LjM5MDYgMC44OTA1MyAxNS4zOTA2IDAuNTAwMDAzIDE1LjAwMDFDMC4xMDk0ODUgMTQuNjA5NSAwLjEwOTQ4NSAxMy45NzY0IDAuNTAwMDAzIDEzLjU4NTlMNi4wODU5MSA3Ljk5OTk3TDAuNTAwMDI2IDIuNDE0MjhDMC4xMDk0OTcgMi4wMjM3NiAwLjEwOTQ5MiAxLjM5MDYgMC41MDAwMTQgMS4wMDAwOEMwLjg5MDUzNyAwLjYwOTU1MyAxLjUyMzcgMC42MDk1NTkgMS45MTQyMiAxLjAwMDA5TDcuNDk5OTEgNi41ODU5N0wxMy4wODU4IDEuMDAwMDZaIgogICAgICAgICAgICAgICAgZmlsbD0iI0VBNTUyQiIKICAgICAgICAgICAgICAvPgogICAgICAgICAgICA8L3N2Zz4="); --tq-yn-green: #00A698; --tq-yn-red: #F04438; } /* --------------------------------------------------------- MAPEAMENTO: tq-yes-left (1º = SIM, 2º = NÃO) — com/sem help message --------------------------------------------------------- */ /* sem help message */ .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{ background-color: var(--tq-yn-green) !important; -webkit-mask-image: var(--tq-yn-check) !important; mask-image: var(--tq-yn-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{ background-color: var(--tq-yn-red) !important; -webkit-mask-image: var(--tq-yn-cross) !important; mask-image: var(--tq-yn-cross) !important; } /* com help message (help ocupa o 1º child) */ .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{ background-color: var(--tq-yn-green) !important; -webkit-mask-image: var(--tq-yn-check) !important; mask-image: var(--tq-yn-check) !important; } .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{ background-color: var(--tq-yn-red) !important; -webkit-mask-image: var(--tq-yn-cross) !important; mask-image: var(--tq-yn-cross) !important; } /* --------------------------------------------------------- MAPEAMENTO: tq-yes-right (1º = NÃO, 2º = SIM) — com/sem help message --------------------------------------------------------- */ /* sem help message */ .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{ background-color: var(--tq-yn-red) !important; -webkit-mask-image: var(--tq-yn-cross) !important; mask-image: var(--tq-yn-cross) !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{ background-color: var(--tq-yn-green) !important; -webkit-mask-image: var(--tq-yn-check) !important; mask-image: var(--tq-yn-check) !important; } /* com help message */ .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-color: var(--tq-yn-red) !important; -webkit-mask-image: var(--tq-yn-cross) !important; mask-image: var(--tq-yn-cross) !important; } .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-color: var(--tq-yn-green) !important; -webkit-mask-image: var(--tq-yn-check) !important; mask-image: var(--tq-yn-check) !important; } /* Se por algum motivo não setar left/right, assume YES-LEFT como padrão */ .tq-yes-no:not(.tq-yes-left):not(.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{ background-color: var(--tq-yn-green) !important; -webkit-mask-image: var(--tq-yn-check) !important; mask-image: var(--tq-yn-check) !important; } .tq-yes-no:not(.tq-yes-left):not(.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{ background-color: var(--tq-yn-red) !important; -webkit-mask-image: var(--tq-yn-cross) !important; mask-image: var(--tq-yn-cross) !important; } .tq-yes-no:not(.tq-yes-left):not(.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-color: var(--tq-yn-green) !important; -webkit-mask-image: var(--tq-yn-check) !important; mask-image: var(--tq-yn-check) !important; } .tq-yes-no:not(.tq-yes-left):not(.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-color: var(--tq-yn-red) !important; -webkit-mask-image: var(--tq-yn-cross) !important; mask-image: var(--tq-yn-cross) !important; } /* Quando selecionado: ícone branco (premium) */ .tq-yes-no .ff-el-form-check.ff_item_selected .ff-el-form-check-label::before{ background-color: #fff !important; } /* ========================================================= TUDOQUIZ — YES/NO (tq-yes-no) — Polish Premium ✅ Ajustes solicitados: - Espaço de 50px entre pergunta e “caixa da afirmação” (help message) - Fundo da caixa em cinza claro - Remover sombra da caixa - Espaço de 50px entre a caixa e os botões Sim/Não - Atualizar ícone de aspas (SVG em base64) ========================================================= */ /* tokens locais do componente */ .tq-yes-no{ --tq-yn-box-bg: #F3F4F6; /* cinza claro */ --tq-yn-box-text: #0f172a; --tq-yn-box-radius: 26px; --tq-yn-gap-top: 50px; --tq-yn-gap-bottom: 50px; /* ícone de aspas (mask) — base64 (seguro para publicar) */ --tq-yn-quote-color: #6478ff; --tq-yn-quote-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA0OCI+PHBhdGggZD0iTTI3IDVDMTUgOSA4IDE4IDggMzBjMCA4IDUgMTMgMTMgMTMgNiAwIDExLTQgMTEtMTAgMC01LTQtOS05LTloLTNjMS02IDUtMTEgMTItMTRWNXpNNTYgNUM0NCA5IDM3IDE4IDM3IDMwYzAgOCA1IDEzIDEzIDEzIDYgMCAxMS00IDExLTEwIDAtNS00LTktOS05aC0zYzEtNiA1LTExIDEyLTE0VjV6Ii8+PC9zdmc+"); } /* 1) garantir o “respiro” de 50px entre pergunta e caixa: (remove o margin padrão do label só nesse componente) */ .tq-yes-no .ff-el-input--label > label{ margin-bottom: 0 !important; } /* 2) caixa da afirmação (Help Message) */ form.tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm, .tudoquiz-shell .tq-yes-no .ff-el-help-message.ff_ahm{ 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; /* remove sombra total */ box-shadow: none !important; border: 0 !important; text-align: center !important; position: relative !important; } /* 3) ícone de aspas (centralizado, “flutuando” 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; } /* 4) tipografia do texto dentro da caixa */ .tq-yes-no .ff-el-help-message.ff_ahm{ font-style: italic !important; font-weight: 700 !important; font-size: clamp(16px, 1.15vw, 20px) !important; line-height: 1.35 !important; } /* ========================================================= TUDOQUIZ — COMPONENTE A: RATING 1–5 (estilo BOTÕES) Uso: no campo Rating do FluentForms, em "Classe de contêiner" adicione: tq-rating-1-5 ========================================================= */ /* tokens locais (tamanho e espaçamento) */ form.tudoquiz-shell, .tudoquiz-shell, .tudoquiz-shell form{ --tq-rating-size: clamp(52px, 10vw, 60px); --tq-rating-gap: 12px; } /* wrapper do rating (cobrindo variações comuns do FF) */ .tq-rating-1-5 :is( .ff-el-input--content, .ff-el-rating, .ff-el-rating-wrapper, .ff_rating_list, ul, .ratings ){ display: flex !important; justify-content: center !important; align-items: center !important; gap: var(--tq-rating-gap) !important; flex-wrap: nowrap !important; } /* itens (labels) viram “botões” quadrados */ .tq-rating-1-5 :is(label, .ff-el-form-check-label){ width: var(--tq-rating-size) !important; height: var(--tq-rating-size) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; border: 1px solid var(--tq-card-border) !important; background: var(--tq-card-bg) !important; box-shadow: var(--tq-card-shadow) !important; /* some com estrelas/texto interno e deixa só o número */ font-size: 0 !important; line-height: 0 !important; color: transparent !important; position: relative !important; cursor: pointer !important; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } /* numeração automática 1..5 (pela ordem dos itens no DOM) */ .tq-rating-1-5 :is(.ff-el-input--content, .ff-el-rating, .ff_rating_list, ul, .ratings){ counter-reset: tqrate; } .tq-rating-1-5 :is(label, .ff-el-form-check-label){ counter-increment: tqrate; } .tq-rating-1-5 :is(label, .ff-el-form-check-label)::before{ content: counter(tqrate); font-size: 18px !important; font-weight: 800 !important; line-height: 1 !important; color: #002340 !important; } /* inputs escondidos (sem quebrar seleção) */ .tq-rating-1-5 input[type="radio"], .tq-rating-1-5 input[type="checkbox"]{ position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } /* hover premium */ .tq-rating-1-5 :is(label, .ff-el-form-check-label):hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15,23,42,0.07) !important; border-color: rgba(15,23,42,0.18) !important; } /* selected (cobre 3 padrões comuns do FF) */ .tq-rating-1-5 :is( input:checked + label, .ff_item_selected label, label.ff_item_selected ){ background: var(--tq-selected-bg) !important; border-color: var(--tq-selected-border) !important; box-shadow: var(--tq-selected-shadow) !important; transform: none !important; } .tq-rating-1-5 :is( input:checked + label, .ff_item_selected label, label.ff_item_selected )::before{ color: var(--tq-selected-fg) !important; } /* foco visível */ .tq-rating-1-5 :is(input:focus + label, input:focus-visible + label){ outline: none !important; box-shadow: 0 0 0 3px rgba(159,221,3,.22), var(--tq-card-shadow) !important; } /* mobile muito estreito */ @media (max-width: 380px){ form.tudoquiz-shell, .tudoquiz-shell, .tudoquiz-shell form{ --tq-rating-gap: 8px; } } /* ========================================================= TQ RATING (1 a 5) — UI de BOTÕES (sem estrelas) Ativa pelo "Atributo de nome" do campo: tq_rating_* Ex.: tq_rating_energia, tq_rating_satisfacao, etc. ========================================================= */ /* tamanho dos botões */ form.tudoquiz-shell, .tudoquiz-shell, .tudoquiz-shell form{ --tq-rating-size: 60px; --tq-rating-gap: 12px; } @media (max-width: 640px){ form.tudoquiz-shell, .tudoquiz-shell, .tudoquiz-shell form{ --tq-rating-size: 54px; --tq-rating-gap: 10px; } } /* alvo robusto: qualquer grupo que contenha input do rating tq_rating_* */ @supports(selector(.x:has(.y))){ .tudoquiz-shell .ff-el-group:has(input[type="radio"][name^="tq_rating_"]), form.tudoquiz-shell .ff-el-group:has(input[type="radio"][name^="tq_rating_"]){ /* nada aqui — só “marca” o alvo */ } } /* layout: tenta cobrir as variações comuns do FF */ .tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] .ff-el-input--content, form.tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] .ff-el-input--content{ display: flex !important; justify-content: center !important; } @supports(selector(.x:has(.y))){ .tudoquiz-shell .ff-el-group:has(input[type="radio"][name^="tq_rating_"]) .ff-el-input--content, form.tudoquiz-shell .ff-el-group:has(input[type="radio"][name^="tq_rating_"]) .ff-el-input--content{ display: flex !important; justify-content: center !important; } } /* “container” interno do rating (várias versões possíveis) */ .tudoquiz-shell :is(.ff-el-ratings, .ff-rating, .ff-el-rating, .ff_ratings, ul.ff-rating, ul.ff_ratings, ul.ff-el-ratings), form.tudoquiz-shell :is(.ff-el-ratings, .ff-rating, .ff-el-rating, .ff_ratings, ul.ff-rating, ul.ff_ratings, ul.ff-el-ratings){ gap: var(--tq-rating-gap) !important; justify-content: center !important; } /* se for lista (muito comum), garante flex e remove estilos */ .tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(ul, ol), form.tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(ul, ol){ list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; gap: var(--tq-rating-gap) !important; justify-content: center !important; align-items: center !important; } @supports(selector(.x:has(.y))){ .tudoquiz-shell .ff-el-group:has(input[type="radio"][name^="tq_rating_"]) :is(ul, ol), form.tudoquiz-shell .ff-el-group:has(input[type="radio"][name^="tq_rating_"]) :is(ul, ol){ list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; gap: var(--tq-rating-gap) !important; justify-content: center !important; align-items: center !important; } } /* esconde input */ .tudoquiz-shell input[type="radio"][name^="tq_rating_"], form.tudoquiz-shell input[type="radio"][name^="tq_rating_"]{ position: absolute !important; opacity: 0 !important; pointer-events: none !important; } /* estilo do “botão” no label (padrão) */ .tudoquiz-shell input[type="radio"][name^="tq_rating_"] + label, form.tudoquiz-shell input[type="radio"][name^="tq_rating_"] + label{ width: var(--tq-rating-size) !important; height: var(--tq-rating-size) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !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; font-weight: 900 !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer !important; user-select: none !important; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, filter .12s ease; } /* remove ícones de estrela internos (caso existam) */ .tudoquiz-shell input[type="radio"][name^="tq_rating_"] + label :is(i, svg, span), form.tudoquiz-shell input[type="radio"][name^="tq_rating_"] + label :is(i, svg, span){ display: none !important; } /* coloca o número via CSS (quando o label não tem texto visível) */ .tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(1), span:nth-child(1)) input[type="radio"][name^="tq_rating_"] + label::after, form.tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(1), span:nth-child(1)) input[type="radio"][name^="tq_rating_"] + label::after{ content:"1"; } .tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(2), span:nth-child(2)) input[type="radio"][name^="tq_rating_"] + label::after, form.tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(2), span:nth-child(2)) input[type="radio"][name^="tq_rating_"] + label::after{ content:"2"; } .tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(3), span:nth-child(3)) input[type="radio"][name^="tq_rating_"] + label::after, form.tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(3), span:nth-child(3)) input[type="radio"][name^="tq_rating_"] + label::after{ content:"3"; } .tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(4), span:nth-child(4)) input[type="radio"][name^="tq_rating_"] + label::after, form.tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(4), span:nth-child(4)) input[type="radio"][name^="tq_rating_"] + label::after{ content:"4"; } .tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(5), span:nth-child(5)) input[type="radio"][name^="tq_rating_"] + label::after, form.tudoquiz-shell .ff-el-group[data-name^="tq_rating_"] :is(li:nth-child(5), span:nth-child(5)) input[type="radio"][name^="tq_rating_"] + label::after{ content:"5"; } /* hover */ @media (hover:hover){ .tudoquiz-shell input[type="radio"][name^="tq_rating_"] + label:hover, form.tudoquiz-shell input[type="radio"][name^="tq_rating_"] + label:hover{ transform: translateY(-1px); border-color: rgba(15,23,42,0.18) !important; box-shadow: 0 10px 24px rgba(15,23,42,0.07) !important; } } /* selecionado (premium dark via tokens) */ .tudoquiz-shell input[type="radio"][name^="tq_rating_"]:checked + label, form.tudoquiz-shell input[type="radio"][name^="tq_rating_"]:checked + 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; } /* ========================================================= TUDOQUIZ — COMPONENTE A: RATING 1–5 (BOTÕES 60px) Ativa automaticamente para Rating cujo "Atributo de nome" comece com: tq_rating_ (Ex.: tq_rating_energia) ========================================================= */ form.tudoquiz-shell, .tudoquiz-shell, .tudoquiz-shell form{ --tq-rating-size: 60px; --tq-rating-gap: 12px; } @media (max-width: 640px){ form.tudoquiz-shell, .tudoquiz-shell, .tudoquiz-shell form{ --tq-rating-size: 54px; --tq-rating-gap: 10px; } } /* container do rating (no seu print é: div.ff-el-ratings.js-ff-el-ratings) */ .tudoquiz-shell .ff-el-ratings:has(label[for^="tq_rating_"]), form.tudoquiz-shell .ff-el-ratings:has(label[for^="tq_rating_"]){ display: flex !important; justify-content: center !important; align-items: center !important; gap: var(--tq-rating-gap) !important; } /* fallback caso o :has não esteja disponível (a maioria dos Chromes modernos tem) */ .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"], form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]{ width: var(--tq-rating-size) !important; height: var(--tq-rating-size) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; border: 1px solid var(--tq-card-border) !important; background: var(--tq-card-bg) !important; box-shadow: var(--tq-card-shadow) !important; /* mata qualquer "estrela" nativa */ background-image: none !important; -webkit-mask: none !important; mask: none !important; /* esconde qualquer texto/ícone interno do FF */ 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; } /* numeração 1..5 (labels são filhos diretos do .ff-el-ratings no seu DOM) */ .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(1)::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(1)::after{ content:"1"; } .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(2)::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(2)::after{ content:"2"; } .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(3)::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(3)::after{ content:"3"; } .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(4)::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(4)::after{ content:"4"; } .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(5)::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:nth-of-type(5)::after{ content:"5"; } .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]::after{ font-size: 18px !important; font-weight: 900 !important; line-height: 1 !important; color: #002340 !important; } /* hover */ @media (hover:hover){ .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:hover, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15,23,42,0.07) !important; border-color: rgba(15,23,42,0.18) !important; } } /* esconde o texto do FF (ex.: “3/5”) se aparecer */ .tudoquiz-shell .ff-el-rating-text[data-id^="tq_rating_"], form.tudoquiz-shell .ff-el-rating-text[data-id^="tq_rating_"]{ display: none !important; } /* ========================================================= SELECTED STATE (cobre variações comuns do Fluent Forms) Se na sua versão o FF usar outra classe, a gente ajusta ========================================================= */ .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].selected, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].active, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].is-active, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].is-selected, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"][aria-checked="true"], form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].selected, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].active, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].is-active, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].is-selected, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"][aria-checked="true"]{ background: var(--tq-selected-bg) !important; border-color: var(--tq-selected-border) !important; box-shadow: var(--tq-selected-shadow) !important; transform: none !important; } .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].selected::after, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].active::after, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].is-active::after, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].is-selected::after, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"][aria-checked="true"]::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].selected::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].active::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].is-active::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"].is-selected::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"][aria-checked="true"]::after{ color: var(--tq-selected-fg) !important; } /* ========================================================= TQ RATING 1–5 — esconder estrela e deixar só número (complemento do patch do Rating) ========================================================= */ /* remove QUALQUER estrela (background / máscara / svg / i) no label */ .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"], form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]{ background-image: none !important; -webkit-mask-image: none !important; mask-image: none !important; } /* alguns temas do FF aplicam a estrela em pseudo-elementos */ .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]::before, .tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]::after, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]::before, form.tudoquiz-shell .ff-el-ratings label[for^="tq_rating_"]::after{ background-image: none !important; -webkit-mask-image: none !important; mask-image: none !important; } /* se a estrela vier como