/* 8mkt brand theme overrides */
:root {
  --primary-8mkt: #f15c40;
  /* 8mkt brand color */
}

/* Buttons */
.sv_main .sv_btn {
  background-color: var(--primary-8mkt) !important;
  border: none !important;
  font-size: 1.15rem !important;
  padding: 1rem 1.5rem !important;
}

.sv_main .sv_btn:hover {
  opacity: 0.9;
}

/* Progress bar */
.sv_progress .sv_progress_bar {
  background-color: var(--primary-8mkt) !important;
}

/* Page title and question spacing */
.sv-title {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
  color: inherit !important;
}

.sv-title,
.sv_q_title {
  letter-spacing: -0.4px;
  /* tighter kerning */
  line-height: 1.1;
  /* more compact lines */
}

.sv_q_title {
  color: var(--primary-8mkt) !important;
  font-weight: 600;
}

.sv_main p {
  line-height: 1.3;
}

.sv_qstn {
  margin-bottom: 0.25rem;
}

/* ---------------- Mobile tweaks ---------------- */
@media (max-width: 500px) {

  /* Bigger base font */
  body {
    font-size: 1.15rem;
  }

  /* Larger question and page titles */
  .sv_q_title,
  .sv-title {
    font-size: 1.1rem;
  }

  /* Option labels */
  .sv_radiogroup label,
  .sv_checkbox label,
  .sv_matrix label {
    font-size: 1rem !important;
  }

  /* Bigger buttons */
  .sv_main .sv_btn {
    font-size: 1.3rem;
    padding: 1.2rem 1.8rem;
  }
}

/* -------------------------------------------------
   Layout container: keep form centered on desktop,
   full‑width with side padding on mobile
   -------------------------------------------------*/
.sv_main .sv_container {
  max-width: 720px;
  /* wider but still compact */
  margin: 0 auto;
  /* center horizontally */
  padding: 0 12px;
}

@media (max-width:500px) {
  .sv_main .sv_container {
    max-width: 100%;
    padding: 0 4px;
  }
}

/* -------------------------------------------------
   Choice items (radio / checkbox) — full width cards
   -------------------------------------------------*/
.sv-selectbase .sv-item {
  width: 100% !important;
  padding: 0.8rem 0.9rem !important;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  margin-bottom: 0.25rem;
  background: #fff;
}

.sv-selectbase .sv-item__label {
  font-size: 1.15rem !important;
}

/* Larger radio / checkbox touch targets */
.sv_radiogroup input[type="radio"]+span:before,
.sv_checkbox input[type="checkbox"]+span:before {
  transform: scale(1.4);
}

/* -------------------------------------------------
   Star‑rating size bump
   -------------------------------------------------*/
.sv-rating .sv-star {
  font-size: 28px !important;
  /* default ~20px */
}

/* Ensure candidate images stay aligned & sized */
.sv_q_img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 8px;
}

/* ------------------------------------------------------------------ */
/* Base font size                                                      */
/* ------------------------------------------------------------------ */
html {
  font-size: 16px;
}

/* desktop default */
@media (max-width: 500px) {
  html {
    font-size: 17px;
  }

  /* larger baseline on phones */
}

/* ------------------------------------------------------------------ */
/* Mobile scaling (fonts & buttons)                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 500px) {
  :root {
    --base-scale: 1.25;
  }

  body,
  .sv-title,
  .sv_q_title,
  .sv-selectbase .sv-item__label {
    font-size: calc(1rem * var(--base-scale)) !important;
  }

  /* Bigger buttons */
  .sv_main .sv_btn {
    font-size: 1.3rem;
    padding: 1.2rem 1.8rem;
  }

  .sv_main .sv_btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Avatar-style images inside choice labels                            */
/* ------------------------------------------------------------------ */
.sv_q_img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Align avatar + text horizontally in radiogroup choices */
.sv_radiogroup .sv-item__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Keep label text beside the avatar, not below it */
.sv_radiogroup .sv-item__label span {
  white-space: nowrap;
}

.sv_radiogroup .sv-item__control+.sv-item__label img {
  vertical-align: middle;
  margin-right: 8px;
}

/* ------------------------------------------------------------------ */
/* Larger touch targets for radio/checkbox                             */
/* ------------------------------------------------------------------ */
.sv_radiogroup input[type="radio"]+span:before,
.sv_checkbox input[type="checkbox"]+span:before {
  transform: scale(1.5);
}

/* ------------------------------------------------------------------ */
/* Star‑rating size bump                                               */
/* ------------------------------------------------------------------ */
.sv-rating .sv-star {
  font-size: 32px !important;
  /* default ~20px */
}

/* -------------------------------------------------
   Extra tweaks 2025‑07‑15
   -------------------------------------------------*/

/* Tighter side‑padding on mobile */
@media (max-width: 500px) {
  .sv_main .sv_container {
    padding: 0 4px;
  }
}

/* Force question numbers & required asterisks to black */
.sv-question__number,
.sv_q_title span:not([class]) {
  color: #000 !important;
}

/* Complete/Enviar button */
.sv_complete_btn {
  background-color: var(--primary-8mkt) !important;
  color: #fff !important;
  width: 100%;
  font-size: 1.25rem !important;
  padding: 1.2rem 1.5rem !important;
  margin: 2rem auto !important;
  display: block;
  text-align: center;
}

/* -------------------------------------------------
   Avatar + radio layout for question10
   -------------------------------------------------*/
.sv_q_question10 .sv-item__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* circle avatar injected before label text */
.sv_q_question10 .sv-item__label::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: inline-block;
  margin-right: 10px;
}

/* map candidate and special options to avatars */
.sv_q_question10 [data-value="lula"] .sv-item__label::before {
  background-image: url("/lula.jpg");
}

.sv_q_question10 [data-value="bolsonaro"] .sv-item__label::before {
  background-image: url("/bolsonaro.jpg");
}

.sv_q_question10 [data-value="tebet"] .sv-item__label::before {
  background-image: url("/tebet.jpg");
}

.sv_q_question10 [data-value="ciro"] .sv-item__label::before {
  background-image: url("/ciro.jpg");
}

.sv_q_question10 [data-value="nulo"] .sv-item__label::before {
  background-image: url("/branco.png");
}

.sv_q_question10 [data-value="nao_votei"] .sv-item__label::before {
  background-image: url("/nao.png");
}

/* Style the SurveyJS page title on orange background */
.sv_main .sv-page-title {
  background: var(--primary-8mkt) !important;
  color: #fff !important;
  padding: 0.8rem 4vw !important;
  margin: 0 0 1rem !important;
  font-family: Arial, sans-serif !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Override SurveyJS page title (JSON-driven) to white on orange */
.sv-title {
  display: block !important;
  background: var(--primary-8mkt) !important;
  color: #fff !important;
  padding: 0.8rem 4vw !important;
  margin: 0 0 1rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Keep question titles in brand orange on white */
.sv_q_title {
  color: var(--primary-8mkt) !important;
  background: none !important;
}

/* Hide progress counter "Respostas 0/25 perguntas" */
.sv_progress,
.sv-progress,
.sv-progress-text,
.sv_progress_bar,
.sv-body__progress {
  display: none !important;
}

/* Question titles in brand orange on white */
.sv_main .sv_q_title {
  background: none !important;
  color: var(--primary-8mkt) !important;
}

/* Hide asterisks for required questions - AGGRESSIVE */
.sv_q_title .sv-string-viewer::after,
.sv-question__title .sv-string-viewer::after,
.sv_q_title::after,
.sv-question__title::after,
.sv-question__title--required::after,
.sv_q_required_text,
.sv-question__required-text,
span[style*="color: red"],
span[style*="color:#f00"],
span[style*="color:red"] {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
}

/* Hide any asterisk character */
.sv-string-viewer:contains("*"),
.sv_q_title:contains("*") {
  text-indent: -9999px !important;
}

/* Remove asterisk from innerHTML */
.sv_q_title *:last-child:after {
  content: none !important;
}

/* Question header: white background, orange text, side padding */
.sv_main .sv-question__header {
  background: #fff !important;
  padding: 0.8rem 16px !important;
  margin: 0 0 0.5rem !important;
  box-sizing: border-box !important;
}

.sv_main .sv-question__header .sv-title {
  color: var(--primary-8mkt) !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* "Enviar" button: match "Aceito" style */
.sv_main .sv_complete_btn {
  width: 100% !important;
  padding: 1.2rem 0 !important;
  margin: 2rem auto !important;
  display: block !important;
  text-align: center !important;
}

/* ---------------- Final overrides ---------------- */

/* Preserve the page title override you confirmed working */
.sv_main .sv-page-title {
  background: var(--primary-8mkt) !important;
  color: #fff !important;
  padding: 0.8rem 4vw !important;
  margin: 0 0 1rem !important;
  font-family: Arial, sans-serif !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Style question headers: white block with orange text and padding */
.sv_main .sv-question__header {
  background: #fff !important;
  padding: 0.8rem 16px !important;
  margin: 0 0 0.5rem !important;
  box-sizing: border-box !important;
}

.sv_main .sv-question__header .sv-question__title {
  color: var(--primary-8mkt) !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* "Enviar" button: full-width, large touch target, centered */
.sv_main .sv_complete_btn {
  background-color: var(--primary-8mkt) !important;
  color: #fff !important;
  width: 100% !important;
  font-size: 1.25rem !important;
  padding: 1.2rem 1.5rem !important;
  margin: 2rem auto !important;
  display: block !important;
  text-align: center !important;
}

/* =======================================================================
   FINAL OVERRIDES – Ensure "Enviar" (Complete) button matches consent CTA
   Applies to different SurveyJS versions (sv_ legacy / sd_ modern classes)
   ======================================================================= */

.sv_main .sv_complete_btn,
.sv_main .sv-footer__complete-btn,
.sv_main .sv-action-bar__button--complete,
.sv_main .sv-navigation__complete-btn,
.sv_main button.sv-btn.sv-footer__complete-btn,
.sv_main .sv-footer button.sv-btn[type=button],
.sv_main .sv-footer button[type=button][class*="complete"],
.sv_main .sv-footer button[title="Complete"],
.sv_main .sv-footer button[title="Enviar"],
/* Modern theme (SurveyJS >= v2) */
.sv-root-modern .sd-navigation__complete-btn,
.sv-root-modern .sd-btn.sd-navigation__complete-btn,
/* Generic fallback inside footer/action bar */
.sv_main .sv-footer .sv-btn,
.sv_main .sv-action-bar .sv-btn {
  background: var(--primary-8mkt) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  width: 100% !important;
  display: block !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  padding: 1.2rem 1.6rem !important;
  margin: 2rem auto 2.5rem !important;
  text-align: center !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Remove any conflicting inline width / float styles SurveyJS might set */
.sv_main .sv-footer,
.sv-root-modern .sd-navigation {
  text-align: center !important;
}

.sv_main .sv-footer .sv-btn+.sv-btn {
  margin-left: 0 !important;
}

/* Hover / active states */
.sv_main .sv_complete_btn:hover,
.sv_main .sv-footer__complete-btn:hover,
.sv-root-modern .sd-navigation__complete-btn:hover {
  filter: brightness(0.92);
}

.sv_main .sv_complete_btn:active,
.sv_main .sv-footer__complete-btn:active,
.sv-root-modern .sd-navigation__complete-btn:active {
  filter: brightness(0.85);
}

/* Ensure no conflicting min-width shrinks the button */
.sv_main .sv_complete_btn,
.sv-root-modern .sd-navigation__complete-btn {
  min-width: 0 !important;
}

/* If SurveyJS wraps buttons in a flex row, force full-width stacking */
.sv_main .sv-footer .sv-btn,
.sv-root-modern .sd-navigation .sd-btn {
  flex: 1 1 100% !important;
}

/* =======================================================================
   ULTRA FINAL OVERRIDES (input variant of Enviar button)
   Target the <input type="button" class="sv-btn sv-btn--navigation sv-footer__complete-btn">
   ======================================================================= */

#sv-nav-complete,
#sv-nav-complete>div {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

.sv_main input.sv-btn.sv-btn--navigation.sv-footer__complete-btn,
#sv-nav-complete input.sv-footer__complete-btn {
  background: var(--primary-8mkt) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  width: 100% !important;
  max-width: 360px !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  padding: 1.2rem 1.6rem !important;
  margin: 2rem auto 2.5rem !important;
  font-weight: 600 !important;
  display: block !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.sv_main input.sv-btn.sv-btn--navigation.sv-footer__complete-btn:hover {
  filter: brightness(0.92);
}

.sv_main input.sv-btn.sv-btn--navigation.sv-footer__complete-btn:active {
  filter: brightness(0.85);
}

/* Ensure no conflicting flex row squeezes it */
.sv_main .sv-footer,
.sv_main .sv-navigation,
.sv_main .sv-action-bar {
  display: block !important;
}

/* === FINAL COLOR/TEXT-ALIGN OVERRIDE FOR "Enviar" BUTTON === */
.sv_main input.sv-btn.sv-btn--navigation.sv-footer__complete-btn,
#sv-nav-complete input.sv-footer__complete-btn {
  background: #28a745 !important;
  /* green CTA */
  text-align: center !important;
  color: #fff !important;
}

/* =======================================================================
   QUESTION 10 AVATAR + RADIO + NAME LAYOUT (robust multi-selector)
   Goal: show radio circle, circular candidate image, then candidate name
   ======================================================================= */

/* Make the whole option row flex so radio + image + text sit on one line */
.sv_q_question10 .sv-item,
.sv-question[data-name="question10"] .sv-item,
.sv-question[data-name="q10"] .sv-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0.55rem 0.65rem !important;
}

/* Space between the radio control block and the avatar */
.sv_q_question10 .sv-item__control,
.sv-question[data-name="question10"] .sv-item__control,
.sv-question[data-name="q10"] .sv-item__control {
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

/* Ensure the label itself does not wrap awkwardly and participates in flex */
.sv_q_question10 .sv-item__label,
.sv-question[data-name="question10"] .sv-item__label,
.sv-question[data-name="q10"] .sv-item__label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* Avatar pseudo-element (fallback approach) */
.sv_q_question10 .sv-item__label::before,
.sv-question[data-name="question10"] .sv-item__label::before,
.sv-question[data-name="q10"] .sv-item__label::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px #ddd;
}

/* Map candidate values to avatar images (support both selector schemes) */
.sv_q_question10 [data-value="lula"] .sv-item__label::before,
.sv-question[data-name="question10"] [data-value="lula"] .sv-item__label::before,
.sv-question[data-name="q10"] [data-value="lula"] .sv-item__label::before {
  background-image: url("/lula.jpg");
}

.sv_q_question10 [data-value="bolsonaro"] .sv-item__label::before,
.sv-question[data-name="question10"] [data-value="bolsonaro"] .sv-item__label::before,
.sv-question[data-name="q10"] [data-value="bolsonaro"] .sv-item__label::before {
  background-image: url("/bolsonaro.jpg");
}

.sv_q_question10 [data-value="tebet"] .sv-item__label::before,
.sv-question[data-name="question10"] [data-value="tebet"] .sv-item__label::before,
.sv-question[data-name="q10"] [data-value="tebet"] .sv-item__label::before {
  background-image: url("/tebet.jpg");
}

.sv_q_question10 [data-value="ciro"] .sv-item__label::before,
.sv-question[data-name="question10"] [data-value="ciro"] .sv-item__label::before,
.sv-question[data-name="q10"] [data-value="ciro"] .sv-item__label::before {
  background-image: url("/ciro.jpg");
}

.sv_q_question10 [data-value="nulo"] .sv-item__label::before,
.sv-question[data-name="question10"] [data-value="nulo"] .sv-item__label::before,
.sv-question[data-name="q10"] [data-value="nulo"] .sv-item__label::before {
  background-image: url("/branco.png");
}

.sv_q_question10 [data-value="nao_votei"] .sv-item__label::before,
.sv-question[data-name="question10"] [data-value="nao_votei"] .sv-item__label::before,
.sv-question[data-name="q10"] [data-value="nao_votei"] .sv-item__label::before {
  background-image: url("/nao.png");
}

/* Adjust the enlarged radio so it still lines up nicely for this question */
.sv_q_question10 input[type="radio"]+span:before,
.sv-question[data-name="question10"] input[type="radio"]+span:before,
.sv-question[data-name="q10"] input[type="radio"]+span:before {
  transform: scale(1.3);
  /* slightly smaller than global 1.5 to balance with 48px avatar */
  margin: 0 !important;
}

/* Give a subtle hover to the whole option row */
.sv_q_question10 .sv-item:hover,
.sv-question[data-name="question10"] .sv-item:hover,
.sv-question[data-name="q10"] .sv-item:hover {
  background: #fafafa !important;
  cursor: pointer;
}

/* Ensure focus outline remains accessible */
.sv_q_question10 input[type="radio"]:focus+span:before,
.sv-question[data-name="question10"] input[type="radio"]:focus+span:before,
.sv-question[data-name="q10"] input[type="radio"]:focus+span:before {
  box-shadow: 0 0 0 3px rgba(241, 92, 64, 0.35) !important;
}

/* Responsive: shrink avatar slightly on very narrow screens */
@media (max-width:380px) {

  .sv_q_question10 .sv-item__label::before,
  .sv-question[data-name="question10"] .sv-item__label::before,
  .sv-question[data-name="q10"] .sv-item__label::before {
    width: 40px;
    height: 40px;
  }

  .sv_q_question10 .sv-item,
  .sv-question[data-name="question10"] .sv-item,
  .sv-question[data-name="q10"] .sv-item {
    gap: 8px !important;
  }
}

/* =======================================================================
   QUESTION 10 AVATARS (revised: real DOM structure)
   Uses: input[value="..."] + span.decorator + span.sv-item__control-label
   We attach the avatar pseudo-element to .sv-item__control-label
   ======================================================================= */

/* Base layout for each option row (question10 scope) */
.sv_q_question10 .sv-item,
.sv-question[data-name="question10"] .sv-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0.55rem 0.65rem !important;
}

/* Ensure the label wrapper gets flex too (SurveyJS modern class .sv-selectbase__label) */
.sv_q_question10 .sv-selectbase__label,
.sv-question[data-name="question10"] .sv-selectbase__label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100%;
}

/* Style the text span that follows the radio decorator */
.sv_q_question10 .sv-item__control-label,
.sv-question[data-name="question10"] .sv-item__control-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Generic avatar placeholder */
.sv_q_question10 .sv-item__control-label::before,
.sv-question[data-name="question10"] .sv-item__control-label::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px #ddd;
}

/* Candidate-specific avatar images
   Pattern: input[value="xxx"] + span (decorator) + span.sv-item__control-label::before */
.sv_q_question10 input[value="lula"]+span+span.sv-item__control-label::before,
.sv-question[data-name="question10"] input[value="lula"]+span+span.sv-item__control-label::before {
  background-image: url("/lula.jpg");
}

.sv_q_question10 input[value="bolsonaro"]+span+span.sv-item__control-label::before,
.sv-question[data-name="question10"] input[value="bolsonaro"]+span+span.sv-item__control-label::before {
  background-image: url("/bolsonaro.jpg");
}

.sv_q_question10 input[value="tebet"]+span+span.sv-item__control-label::before,
.sv-question[data-name="question10"] input[value="tebet"]+span+span.sv-item__control-label::before {
  background-image: url("/tebet.jpg");
}

.sv_q_question10 input[value="ciro"]+span+span.sv-item__control-label::before,
.sv-question[data-name="question10"] input[value="ciro"]+span+span.sv-item__control-label::before {
  background-image: url("/ciro.jpg");
}

.sv_q_question10 input[value="nulo"]+span+span.sv-item__control-label::before,
.sv-question[data-name="question10"] input[value="nulo"]+span+span.sv-item__control-label::before {
  background-image: url("/branco.png");
}

.sv_q_question10 input[value="nao_votei"]+span+span.sv-item__control-label::before,
.sv-question[data-name="question10"] input[value="nao_votei"]+span+span.sv-item__control-label::before {
  background-image: url("/nao.png");
}

/* Hover highlight */
.sv_q_question10 .sv-item:hover,
.sv-question[data-name="question10"] .sv-item:hover {
  background: #fafafa !important;
  cursor: pointer;
}

/* Radio decorator size tweak only for this question */
.sv_q_question10 input[type="radio"]+span.sv-radio__decorator:before,
.sv-question[data-name="question10"] input[type="radio"]+span.sv-radio__decorator:before {
  transform: scale(1.25);
}

/* Responsive avatar shrink */
@media (max-width:380px) {

  .sv_q_question10 .sv-item__control-label::before,
  .sv-question[data-name="question10"] .sv-item__control-label::before {
    width: 40px;
    height: 40px;
  }
}

/* =======================================================================
   AVATARS FOR vote_2022 QUESTION (Lauro survey)
   Same pattern as question10 but for vote_2022
   ======================================================================= */

/* Make the whole option row flex */
.sv_q_vote_2022 .sv-item,
.sv-question[data-name="vote_2022"] .sv-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0.55rem 0.65rem !important;
}

/* Space between radio and avatar */
.sv_q_vote_2022 .sv-item__control,
.sv-question[data-name="vote_2022"] .sv-item__control {
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

/* Label flex layout */
.sv_q_vote_2022 .sv-item__label,
.sv-question[data-name="vote_2022"] .sv-item__label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* Ensure selectbase label wrapper also flexes */
.sv_q_vote_2022 .sv-selectbase__label,
.sv-question[data-name="vote_2022"] .sv-selectbase__label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100%;
}

/* Style the control label */
.sv_q_vote_2022 .sv-item__control-label,
.sv-question[data-name="vote_2022"] .sv-item__control-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Avatar placeholder for vote_2022 */
.sv_q_vote_2022 .sv-item__control-label::before,
.sv-question[data-name="vote_2022"] .sv-item__control-label::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px #ddd;
}

/* Lula avatar */
.sv_q_vote_2022 input[value="lula"]+span+span.sv-item__control-label::before,
.sv-question[data-name="vote_2022"] input[value="lula"]+span+span.sv-item__control-label::before {
  background-image: url("/lula.jpg");
}

/* Bolsonaro avatar */
.sv_q_vote_2022 input[value="bolsonaro"]+span+span.sv-item__control-label::before,
.sv-question[data-name="vote_2022"] input[value="bolsonaro"]+span+span.sv-item__control-label::before {
  background-image: url("/bolsonaro.jpg");
}

/* Nulo option - use ballot box icon */
.sv_q_vote_2022 input[value="nulo"]+span+span.sv-item__control-label::before,
.sv-question[data-name="vote_2022"] input[value="nulo"]+span+span.sv-item__control-label::before {
  background-image: url("/branco.png");
}

/* Didn't vote option */
.sv_q_vote_2022 input[value="nao_fui"]+span+span.sv-item__control-label::before,
.sv-question[data-name="vote_2022"] input[value="nao_fui"]+span+span.sv-item__control-label::before {
  background-image: url("/nao.png");
}

/* Prefer not to answer - no specific icon, generic placeholder */
.sv_q_vote_2022 input[value="prefiro"]+span+span.sv-item__control-label::before,
.sv-question[data-name="vote_2022"] input[value="prefiro"]+span+span.sv-item__control-label::before {
  background-color: #e0e0e0;
  /* grey placeholder for "prefer not to answer" */
}

/* Hover effect */
.sv_q_vote_2022 .sv-item:hover,
.sv-question[data-name="vote_2022"] .sv-item:hover {
  background: #fafafa !important;
  cursor: pointer;
}

/* Radio size adjustment */
.sv_q_vote_2022 input[type="radio"]+span.sv-radio__decorator:before,
.sv-question[data-name="vote_2022"] input[type="radio"]+span.sv-radio__decorator:before {
  transform: scale(1.25);
}

/* Focus outline */
.sv_q_vote_2022 input[type="radio"]:focus+span:before,
.sv-question[data-name="vote_2022"] input[type="radio"]:focus+span:before {
  box-shadow: 0 0 0 3px rgba(241, 92, 64, 0.35) !important;
}

/* Responsive avatar shrink */
@media (max-width:380px) {

  .sv_q_vote_2022 .sv-item__control-label::before,
  .sv-question[data-name="vote_2022"] .sv-item__control-label::before {
    width: 40px;
    height: 40px;
  }
}

/* =======================================================================
   NEW: MATRIX QUESTIONS (rotina_local)
   Desktop: Table layout with borders
   Mobile: Stack each row as card with clear labels, NO DUPLICATES
   ======================================================================= */

/* Desktop matrix styling - target actual SurveyJS classes */
.sv_q_rotina_local .sv-table,
.sv-question[data-name="rotina_local"] .sv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  margin: 1rem 0 2rem;
}

/* Table header styling */
.sv_q_rotina_local .sv-table thead th,
.sv-question[data-name="rotina_local"] .sv-table thead th {
  background-color: #f8f8f8;
  color: #333;
  font-weight: 600;
  padding: 0.8rem 0.5rem;
  text-align: center;
  border-bottom: 2px solid #d9d9d9;
  font-size: 0.9rem;
}

/* Table body rows */
.sv_q_rotina_local .sv-table tbody tr,
.sv-question[data-name="rotina_local"] .sv-table tbody tr {
  border-bottom: 1px solid #e8e8e8;
}

.sv_q_rotina_local .sv-table tbody tr:last-child,
.sv-question[data-name="rotina_local"] .sv-table tbody tr:last-child {
  border-bottom: none;
}

/* Table cells */
.sv_q_rotina_local .sv-matrix__cell,
.sv-question[data-name="rotina_local"] .sv-matrix__cell {
  padding: 0.7rem 0.5rem;
  text-align: center;
  vertical-align: middle;
}

/* First column - row labels (activity names) */
.sv_q_rotina_local .sv-table tbody .sv-matrix__cell:first-child,
.sv-question[data-name="rotina_local"] .sv-table tbody .sv-matrix__cell:first-child {
  text-align: left;
  font-weight: 600;
  color: #333;
  padding-left: 1rem;
  font-size: 1rem;
}

/* Radio button styling in matrix */
.sv_q_rotina_local .sv-matrix__cell .sv-radio,
.sv-question[data-name="rotina_local"] .sv-matrix__cell .sv-radio {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hide the default radio decorator SVG for cleaner look */
.sv_q_rotina_local .sv-radio__decorator,
.sv-question[data-name="rotina_local"] .sv-radio__decorator {
  width: 24px;
  height: 24px;
}

/* =======================================================================
   MOBILE MATRIX LAYOUT - Radio button first, then label
   ======================================================================= */

@media (max-width: 600px) {

  /* Hide table structure */
  .sv_q_rotina_local .sv-table,
  .sv-question[data-name="rotina_local"] .sv-table {
    display: block;
    border: none;
  }

  .sv_q_rotina_local .sv-table thead,
  .sv-question[data-name="rotina_local"] .sv-table thead {
    display: none;
  }

  .sv_q_rotina_local .sv-table tbody,
  .sv-question[data-name="rotina_local"] .sv-table tbody {
    display: block;
  }

  /* Each row becomes a card */
  .sv_q_rotina_local .sv-table tbody tr,
  .sv-question[data-name="rotina_local"] .sv-table tbody tr {
    display: block;
    margin-bottom: 0.25rem;
    padding: 1rem;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
  }

  /* Make all cells block */
  .sv_q_rotina_local .sv-matrix__cell,
  .sv-question[data-name="rotina_local"] .sv-matrix__cell {
    display: block;
    text-align: left;
    padding: 0;
  }

  /* First cell - the activity name - BOLD at top */
  .sv_q_rotina_local .sv-table tbody .sv-matrix__cell:first-child,
  .sv-question[data-name="rotina_local"] .sv-table tbody .sv-matrix__cell:first-child {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
    padding: 0 0 0.8rem 0;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
  }

  /* Option cells - RADIO BUTTON FIRST, then label */
  .sv_q_rotina_local .sv-matrix__cell:not(:first-child),
  .sv-question[data-name="rotina_local"] .sv-matrix__cell:not(:first-child) {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.7rem 0;
    border-top: 1px solid #f5f5f5;
    gap: 0.75rem;
  }

  /* Radio button comes first */
  .sv_q_rotina_local .sv-matrix__cell .sv-radio,
  .sv-question[data-name="rotina_local"] .sv-matrix__cell .sv-radio {
    order: 1;
    margin: 0;
    flex-shrink: 0;
  }

  /* Label comes after radio button */
  .sv_q_rotina_local .sv-matrix__cell .sv-radio,
  .sv-question[data-name="rotina_local"] .sv-matrix__cell .sv-radio {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Hide the duplicate responsive title that SurveyJS adds */
  .sv_q_rotina_local .sv-matrix__label .sv-hidden,
  .sv-question[data-name="rotina_local"] .sv-matrix__label .sv-hidden,
  .sv_q_rotina_local .sv-matrix__cell .sv-item__control-label,
  .sv-question[data-name="rotina_local"] .sv-matrix__cell .sv-item__control-label {
    display: none !important;
  }

  /* Show label using data-responsive-title attribute */
  .sv_q_rotina_local .sv-matrix__cell:not(:first-child)::after,
  .sv-question[data-name="rotina_local"] .sv-matrix__cell:not(:first-child)::after {
    content: attr(data-responsive-title);
    order: 2;
    font-weight: 400;
    color: #555;
    font-size: 1rem;
    text-align: left;
    flex: 1;
  }

  /* Make mobile radio buttons larger for touch */
  .sv_q_rotina_local .sv-radio__decorator,
  .sv-question[data-name="rotina_local"] .sv-radio__decorator {
    width: 28px;
    height: 28px;
  }
}

/* =======================================================================
   NEW: STAR RATING (1-5 scale) - nota_adm
   Orange filled stars using CSS pseudo-elements + JavaScript
   ======================================================================= */

/* Rating container styling */
.sv_q_nota_adm .sv-rating,
.sv-question[data-name="nota_adm"] .sv-rating {
  margin: 1rem 0 0.25rem;
}

/* Fieldset inside rating */
.sv_q_nota_adm .sv-rating fieldset,
.sv-question[data-name="nota_adm"] .sv-rating fieldset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  padding: 0;
  margin: 0;
}

/* Min/Max labels styling */
.sv_q_nota_adm .sv-rating__min-text,
.sv_q_nota_adm .sv-rating__max-text,
.sv-question[data-name="nota_adm"] .sv-rating__min-text,
.sv-question[data-name="nota_adm"] .sv-rating__max-text {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

/* Individual rating item (label wrapper) */
.sv_q_nota_adm .sv-rating__item,
.sv-question[data-name="nota_adm"] .sv-rating__item {
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* Hide the number text */
.sv_q_nota_adm .sv-rating__item-text,
.sv-question[data-name="nota_adm"] .sv-rating__item-text {
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Create star icon using ::before pseudo-element */
.sv_q_nota_adm .sv-rating__item::before,
.sv-question[data-name="nota_adm"] .sv-rating__item::before {
  content: "★";
  font-size: 36px;
  color: #ddd;
  display: inline-block;
  transition: color 0.2s ease, transform 0.1s ease;
  line-height: 1;
}

/* Hover effect on star */
.sv_q_nota_adm .sv-rating__item:hover::before,
.sv-question[data-name="nota_adm"] .sv-rating__item:hover::before {
  transform: scale(1.1);
}

/* Filled stars (set by JavaScript) - cumulative orange fill */
.sv_q_nota_adm .sv-rating__item.star-filled::before,
.sv-question[data-name="nota_adm"] .sv-rating__item.star-filled::before {
  color: var(--primary-8mkt) !important;
}

/* Preview stars (hover effect) */
.sv_q_nota_adm .sv-rating__item.star-preview::before,
.sv-question[data-name="nota_adm"] .sv-rating__item.star-preview::before {
  color: var(--primary-8mkt) !important;
  opacity: 0.7;
}

/* Mobile adjustments */
@media (max-width: 500px) {

  .sv_q_nota_adm .sv-rating__item::before,
  .sv-question[data-name="nota_adm"] .sv-rating__item::before {
    font-size: 32px;
  }

  .sv_q_nota_adm .sv-rating fieldset,
  .sv-question[data-name="nota_adm"] .sv-rating fieldset {
    gap: 4px;
  }
}

/* =======================================================================
   STAR RATINGS FOR CITY AREAS (individual questions)
   Same styling as nota_adm
   ======================================================================= */

.sv_q_saude .sv-rating,
.sv_q_educacao .sv-rating,
.sv_q_asfalto .sv-rating,
.sv_q_transito .sv-rating,
.sv_q_pracas .sv-rating,
.sv_q_limpeza .sv-rating,
.sv_q_iluminacao .sv-rating,
.sv_q_drenagem .sv-rating,
.sv_q_assistencia_social .sv-rating,
.sv_q_seguranca .sv-rating,
.sv_q_emprego .sv-rating {
  margin: 0.25rem 0 0;
}

.sv_q_saude .sv-rating fieldset,
.sv_q_educacao .sv-rating fieldset,
.sv_q_asfalto .sv-rating fieldset,
.sv_q_transito .sv-rating fieldset,
.sv_q_pracas .sv-rating fieldset,
.sv_q_limpeza .sv-rating fieldset,
.sv_q_iluminacao .sv-rating fieldset,
.sv_q_drenagem .sv-rating fieldset,
.sv_q_assistencia_social .sv-rating fieldset,
.sv_q_seguranca .sv-rating fieldset,
.sv_q_emprego .sv-rating fieldset {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  padding: 0;
  margin: 0;
}

.sv_q_saude .sv-rating__item::before,
.sv_q_educacao .sv-rating__item::before,
.sv_q_asfalto .sv-rating__item::before,
.sv_q_transito .sv-rating__item::before,
.sv_q_pracas .sv-rating__item::before,
.sv_q_limpeza .sv-rating__item::before,
.sv_q_iluminacao .sv-rating__item::before,
.sv_q_drenagem .sv-rating__item::before,
.sv_q_assistencia_social .sv-rating__item::before,
.sv_q_seguranca .sv-rating__item::before,
.sv_q_emprego .sv-rating__item::before {
  content: "★";
  font-size: 32px;
  color: #ddd;
  display: inline-block;
  transition: color 0.2s ease;
  line-height: 1;
}

.sv_q_saude .sv-rating__item-text,
.sv_q_educacao .sv-rating__item-text,
.sv_q_asfalto .sv-rating__item-text,
.sv_q_transito .sv-rating__item-text,
.sv_q_pracas .sv-rating__item-text,
.sv_q_limpeza .sv-rating__item-text,
.sv_q_iluminacao .sv-rating__item-text,
.sv_q_drenagem .sv-rating__item-text,
.sv_q_assistencia_social .sv-rating__item-text,
.sv_q_seguranca .sv-rating__item-text,
.sv_q_emprego .sv-rating__item-text {
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.sv_q_saude .sv-rating__item,
.sv_q_educacao .sv-rating__item,
.sv_q_asfalto .sv-rating__item,
.sv_q_transito .sv-rating__item,
.sv_q_pracas .sv-rating__item,
.sv_q_limpeza .sv-rating__item,
.sv_q_iluminacao .sv-rating__item,
.sv_q_drenagem .sv-rating__item,
.sv_q_assistencia_social .sv-rating__item,
.sv_q_seguranca .sv-rating__item,
.sv_q_emprego .sv-rating__item {
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* Cumulative fill for area ratings */
.sv_q_saude .sv-rating__item.star-filled::before,
.sv_q_educacao .sv-rating__item.star-filled::before,
.sv_q_asfalto .sv-rating__item.star-filled::before,
.sv_q_transito .sv-rating__item.star-filled::before,
.sv_q_pracas .sv-rating__item.star-filled::before,
.sv_q_limpeza .sv-rating__item.star-filled::before,
.sv_q_iluminacao .sv-rating__item.star-filled::before,
.sv_q_drenagem .sv-rating__item.star-filled::before,
.sv_q_assistencia_social .sv-rating__item.star-filled::before,
.sv_q_seguranca .sv-rating__item.star-filled::before,
.sv_q_emprego .sv-rating__item.star-filled::before {
  color: var(--primary-8mkt) !important;
}

/* Preview for area ratings */
.sv_q_saude .sv-rating__item.star-preview::before,
.sv_q_educacao .sv-rating__item.star-preview::before,
.sv_q_asfalto .sv-rating__item.star-preview::before,
.sv_q_transito .sv-rating__item.star-preview::before,
.sv_q_pracas .sv-rating__item.star-preview::before,
.sv_q_limpeza .sv-rating__item.star-preview::before,
.sv_q_iluminacao .sv-rating__item.star-preview::before,
.sv_q_drenagem .sv-rating__item.star-preview::before,
.sv_q_assistencia_social .sv-rating__item.star-preview::before,
.sv_q_seguranca .sv-rating__item.star-preview::before,
.sv_q_emprego .sv-rating__item.star-preview::before {
  color: var(--primary-8mkt) !important;
  opacity: 0.7;
}

/* Question spacing for area ratings */
.sv_q_saude,
.sv_q_educacao,
.sv_q_asfalto,
.sv_q_transito,
.sv_q_pracas,
.sv_q_limpeza,
.sv_q_iluminacao,
.sv_q_drenagem,
.sv_q_assistencia_social,
.sv_q_seguranca,
.sv_q_emprego {
  margin-bottom: 0.25rem;

}

.sv_q_emprego {
  border-bottom: none;
}

/* Mobile - smaller stars for area ratings */
@media (max-width: 500px) {

  .sv_q_saude .sv-rating__item::before,
  .sv_q_educacao .sv-rating__item::before,
  .sv_q_asfalto .sv-rating__item::before,
  .sv_q_transito .sv-rating__item::before,
  .sv_q_pracas .sv-rating__item::before,
  .sv_q_limpeza .sv-rating__item::before,
  .sv_q_iluminacao .sv-rating__item::before,
  .sv_q_drenagem .sv-rating__item::before,
  .sv_q_assistencia_social .sv-rating__item::before,
  .sv_q_seguranca .sv-rating__item::before,
  .sv_q_emprego .sv-rating__item::before {
    font-size: 28px;
  }
}

/* =======================================================================
   NEW: NPS RATING (1-10 scale) - nps_cidade
   Two rows: 1-5 top, 6-10 bottom
   ======================================================================= */

/* NPS container */
.sv_q_nps_cidade .sv-rating,
.sv-question[data-name="nps_cidade"] .sv-rating {
  margin: 1rem 0 2rem;
}

/* NPS fieldset - wrap into two rows */
.sv_q_nps_cidade .sv-rating fieldset,
.sv-question[data-name="nps_cidade"] .sv-rating fieldset {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  border: none;
  padding: 0;
  margin: 0.5rem 0;
  max-width: 280px;
  /* Forces wrapping after 5 boxes */
}

/* Min/Max labels */
.sv_q_nps_cidade .sv-rating__min-text,
.sv_q_nps_cidade .sv-rating__max-text,
.sv-question[data-name="nps_cidade"] .sv-rating__min-text,
.sv-question[data-name="nps_cidade"] .sv-rating__max-text {
  width: 100%;
  text-align: left;
  font-size: 0.85rem;
  color: #666;
  margin: 0.5rem 0;
}

/* Individual NPS box (label) */
.sv_q_nps_cidade .sv-rating__item,
.sv-question[data-name="nps_cidade"] .sv-rating__item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* NPS number display - boxes with borders */
.sv_q_nps_cidade .sv-rating__item-text,
.sv-question[data-name="nps_cidade"] .sv-rating__item-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid #d9d9d9;
  border-radius: 6px;
  font-size: 1.1rem !important;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
  opacity: 1 !important;
  position: relative !important;
  color: #333 !important;
}

/* Hover effect on NPS box */
.sv_q_nps_cidade .sv-rating__item:hover .sv-rating__item-text,
.sv-question[data-name="nps_cidade"] .sv-rating__item:hover .sv-rating__item-text {
  border-color: var(--primary-8mkt);
  background-color: rgba(241, 92, 64, 0.1);
}

/* Selected NPS box */
.sv_q_nps_cidade .sv-rating__item:has(input:checked) .sv-rating__item-text,
.sv-question[data-name="nps_cidade"] .sv-rating__item:has(input:checked) .sv-rating__item-text {
  background-color: var(--primary-8mkt) !important;
  border-color: var(--primary-8mkt) !important;
  color: #fff !important;
}

/* Fallback for browsers without :has() support */
.sv_q_nps_cidade .sv-rating__item input:checked+.sv-rating__item-text,
.sv-question[data-name="nps_cidade"] .sv-rating__item input:checked+.sv-rating__item-text {
  background-color: var(--primary-8mkt) !important;
  border-color: var(--primary-8mkt) !important;
  color: #fff !important;
}

/* Mobile: slightly smaller boxes */
@media (max-width: 500px) {

  .sv_q_nps_cidade .sv-rating fieldset,
  .sv-question[data-name="nps_cidade"] .sv-rating fieldset {
    max-width: 240px;
  }

  .sv_q_nps_cidade .sv-rating__item-text,
  .sv-question[data-name="nps_cidade"] .sv-rating__item-text {
    width: 42px;
    height: 42px;
    font-size: 1rem !important;
  }

  .sv_q_nps_cidade .sv-rating fieldset,
  .sv-question[data-name="nps_cidade"] .sv-rating fieldset {
    gap: 4px;
  }
}

/* Very small screens */
@media (max-width: 380px) {

  .sv_q_nps_cidade .sv-rating fieldset,
  .sv-question[data-name="nps_cidade"] .sv-rating fieldset {
    max-width: 200px;
  }

  .sv_q_nps_cidade .sv-rating__item-text,
  .sv-question[data-name="nps_cidade"] .sv-rating__item-text {
    width: 36px;
    height: 36px;
    font-size: 0.95rem !important;
  }

  .sv_q_nps_cidade .sv-rating fieldset,
  .sv-question[data-name="nps_cidade"] .sv-rating fieldset {
    gap: 3px;
  }
}

/* Matrix: Bold activity names on mobile */
@media (max-width: 600px) {

  /* Target the first cell in each matrix row (the activity name) */
  .sv_q_rotina_local tbody tr>td:first-child .sv-string-viewer,
  .sv-question[data-name="rotina_local"] tbody tr>td:first-child .sv-string-viewer {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #333 !important;
  }

  /* Keep options regular weight */
  .sv_q_rotina_local .sv-matrix__cell .sv-string-viewer,
  .sv-question[data-name="rotina_local"] .sv-matrix__cell .sv-string-viewer {
    font-weight: 400 !important;
    font-size: 1rem !important;
  }
}


/* ============================================================
   STAR RATINGS - Convert numbers to stars for ALL ratings
   ============================================================ */

/* HIDE the number text completely */
.sv-rating__item-text {
  font-size: 0 !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* CREATE stars with ::before on the label */
.sv-rating__item::before {
  content: "★";
  font-size: 36px;
  color: #ddd;
  display: inline-block;
  transition: color 0.2s ease;
  line-height: 1;
  cursor: pointer;
}

/* Orange when filled (JavaScript adds this class) */
.sv-rating__item.star-filled::before {
  color: #f15c40 !important;
}

/* Preview on hover */
.sv-rating__item.star-preview::before {
  color: #f15c40 !important;
  opacity: 0.7;
}

/* Make sure all rating questions align left */
.sv-rating fieldset {
  justify-content: flex-start !important;
}

/* ============================================================
   AREA QUESTIONS - EXACT MATCH with matrix card styling
   ============================================================ */

/* Grey card borders - EXACT padding match with matrix */
.sv-question[data-name="saude"],
.sv-question[data-name="educacao"],
.sv-question[data-name="asfalto"],
.sv-question[data-name="transito"],
.sv-question[data-name="pracas"],
.sv-question[data-name="limpeza"],
.sv-question[data-name="iluminacao"],
.sv-question[data-name="drenagem"],
.sv-question[data-name="assistencia_social"],
.sv-question[data-name="seguranca"],
.sv-question[data-name="emprego"] {
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  margin-bottom: 0.25rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: #fff !important;
}

/* Area question header - remove extra padding */
.sv-question[data-name="saude"] .sv-question__header,
.sv-question[data-name="educacao"] .sv-question__header,
.sv-question[data-name="asfalto"] .sv-question__header,
.sv-question[data-name="transito"] .sv-question__header,
.sv-question[data-name="pracas"] .sv-question__header,
.sv-question[data-name="limpeza"] .sv-question__header,
.sv-question[data-name="iluminacao"] .sv-question__header,
.sv-question[data-name="drenagem"] .sv-question__header,
.sv-question[data-name="assistencia_social"] .sv-question__header,
.sv-question[data-name="seguranca"] .sv-question__header,
.sv-question[data-name="emprego"] .sv-question__header {
  padding: 0 !important;
  margin: 0 0 0.8rem 0 !important;
  background: transparent !important;
}

/* Area titles: BLACK, EXACT size match with matrix activity names */
.sv-question[data-name="saude"] .sv-question__title,
.sv-question[data-name="educacao"] .sv-question__title,
.sv-question[data-name="asfalto"] .sv-question__title,
.sv-question[data-name="transito"] .sv-question__title,
.sv-question[data-name="pracas"] .sv-question__title,
.sv-question[data-name="limpeza"] .sv-question__title,
.sv-question[data-name="iluminacao"] .sv-question__title,
.sv-question[data-name="drenagem"] .sv-question__title,
.sv-question[data-name="assistencia_social"] .sv-question__title,
.sv-question[data-name="seguranca"] .sv-question__title,
.sv-question[data-name="emprego"] .sv-question__title,
.sv-question[data-name="saude"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="educacao"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="asfalto"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="transito"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="pracas"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="limpeza"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="iluminacao"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="drenagem"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="assistencia_social"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="seguranca"] .sv-question__title .sv-string-viewer,
.sv-question[data-name="emprego"] .sv-question__title .sv-string-viewer {
  color: #333 !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Rating content wrapper - remove padding */
.sv-question[data-name="saude"] .sv-question__content,
.sv-question[data-name="educacao"] .sv-question__content,
.sv-question[data-name="asfalto"] .sv-question__content,
.sv-question[data-name="transito"] .sv-question__content,
.sv-question[data-name="pracas"] .sv-question__content,
.sv-question[data-name="limpeza"] .sv-question__content,
.sv-question[data-name="iluminacao"] .sv-question__content,
.sv-question[data-name="drenagem"] .sv-question__content,
.sv-question[data-name="assistencia_social"] .sv-question__content,
.sv-question[data-name="seguranca"] .sv-question__content,
.sv-question[data-name="emprego"] .sv-question__content {
  padding: 0 !important;
}

/* Min/max labels - match size with first question */
.sv-question[data-name="saude"] .sv-rating__min-text,
.sv-question[data-name="educacao"] .sv-rating__min-text,
.sv-question[data-name="asfalto"] .sv-rating__min-text,
.sv-question[data-name="transito"] .sv-rating__min-text,
.sv-question[data-name="pracas"] .sv-rating__min-text,
.sv-question[data-name="limpeza"] .sv-rating__min-text,
.sv-question[data-name="iluminacao"] .sv-rating__min-text,
.sv-question[data-name="drenagem"] .sv-rating__min-text,
.sv-question[data-name="assistencia_social"] .sv-rating__min-text,
.sv-question[data-name="seguranca"] .sv-rating__min-text,
.sv-question[data-name="emprego"] .sv-rating__min-text,
.sv-question[data-name="saude"] .sv-rating__max-text,
.sv-question[data-name="educacao"] .sv-rating__max-text,
.sv-question[data-name="asfalto"] .sv-rating__max-text,
.sv-question[data-name="transito"] .sv-rating__max-text,
.sv-question[data-name="pracas"] .sv-rating__max-text,
.sv-question[data-name="limpeza"] .sv-rating__max-text,
.sv-question[data-name="iluminacao"] .sv-rating__max-text,
.sv-question[data-name="drenagem"] .sv-rating__max-text,
.sv-question[data-name="assistencia_social"] .sv-rating__max-text,
.sv-question[data-name="seguranca"] .sv-rating__max-text,
.sv-question[data-name="emprego"] .sv-rating__max-text {
  font-size: 0.85rem !important;
  color: #666 !important;
}

/* Stars size - match first question */
.sv-question[data-name="saude"] .sv-rating__item::before,
.sv-question[data-name="educacao"] .sv-rating__item::before,
.sv-question[data-name="asfalto"] .sv-rating__item::before,
.sv-question[data-name="transito"] .sv-rating__item::before,
.sv-question[data-name="pracas"] .sv-rating__item::before,
.sv-question[data-name="limpeza"] .sv-rating__item::before,
.sv-question[data-name="iluminacao"] .sv-rating__item::before,
.sv-question[data-name="drenagem"] .sv-rating__item::before,
.sv-question[data-name="assistencia_social"] .sv-rating__item::before,
.sv-question[data-name="seguranca"] .sv-rating__item::before,
.sv-question[data-name="emprego"] .sv-rating__item::before {
  font-size: 36px !important;
}

/* ============================================================
   NPS QUESTION - Show NUMBERS in boxes, not stars
   ============================================================ */

/* NPS: Remove stars completely */
.sv-question[data-name="nps_cidade"] .sv-rating__item::before {
  content: none !important;
  display: none !important;
}

/* NPS: Show the number text */
.sv-question[data-name="nps_cidade"] .sv-rating__item-text {
  font-size: 1.1rem !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  position: relative !important;
  display: flex !important;
  pointer-events: auto !important;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border: 2px solid #d9d9d9;
  border-radius: 6px;
  font-weight: 600;
  color: #333;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* NPS: Hover effect */
.sv-question[data-name="nps_cidade"] .sv-rating__item:hover .sv-rating__item-text {
  border-color: #f15c40;
  background-color: rgba(241, 92, 64, 0.1);
}

/* NPS: Selected state */
.sv-question[data-name="nps_cidade"] .sv-rating__item:has(input:checked) .sv-rating__item-text {
  background-color: #f15c40 !important;
  border-color: #f15c40 !important;
  color: #fff !important;
}

/* NPS: Layout in two rows */
.sv-question[data-name="nps_cidade"] .sv-rating fieldset {
  max-width: 294px;
  gap: 6px;
}

/* Remove extra padding from SurveyJS rows for area questions */
.sv-question[data-name="saude"] .sv-row,
.sv-question[data-name="educacao"] .sv-row,
.sv-question[data-name="asfalto"] .sv-row,
.sv-question[data-name="transito"] .sv-row,
.sv-question[data-name="pracas"] .sv-row,
.sv-question[data-name="limpeza"] .sv-row,
.sv-question[data-name="iluminacao"] .sv-row,
.sv-question[data-name="drenagem"] .sv-row,
.sv-question[data-name="assistencia_social"] .sv-row,
.sv-question[data-name="seguranca"] .sv-row,
.sv-question[data-name="emprego"] .sv-row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}