/* Custom CSS for Quiz Bons DIAS Mini-Site */

/* CSS Variables from Figma */
:root {
  --disponibilidade: #c8d400;
  --iniciativa: #127045;
  --atencao: #76b82a;
  --simpatia: #ef5854;
  --cinza-texto: #424045;
  --verde-texto: #81d742;
  --white: #ffffff;
  --light-gray: #f8f9fa;
  --border-color: #ececec;
}

/* Global Styles */
body {
  font-family: 'Inter', sans-serif;
  color: var(--cinza-texto);
  line-height: 1.6;
  background-color: #f8f9fa;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

strong, b {
  font-weight: 600;
}

.hero-title {
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.hero-title b {
    font-weight: 700;
}

.hero-subtitle {
    font-family: "Bricolage Grotesque";
    font-size: 160px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

/* Navigation */
.navbar {
  position: static;
  background: transparent !important; /* no full-width white bar */
  box-shadow: none;
  padding: 0; /* pill will handle its own padding */
  margin-bottom: 100px;
  z-index: 10;
}

/* Navigation for index page - positioned over hero */
.navbar-hero {
  position: absolute !important;
  width: 90% !important;
  margin: 0 auto !important;
  left: 5% !important;
  top: 100px !important;
  margin-bottom: 0 !important;
}

/* Navigation for quiz page - reduced bottom margin */
.quiz-main .navbar {
  margin-bottom: 50px !important;
}

/* Static navbar for quiz pages */
.navbar-static {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  background: #f8f9fa !important;
  box-shadow: none !important;
  padding: 1rem 0 !important;
}

/* Mobile positioning for static navbar */
@media (max-width: 768px) {
  .navbar-static {
    margin-top: 75px;
  }
}

/* Create the white rounded pill inside the nav */
.navbar .container {
  background: var(--white);
  border-radius: 50px;
  padding: 12px 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  height: 70px;
}

.navbar-brand {
  font-family: 'Inter', sans-serif;
}

.navbar-brand img {
  height: 21px;
  width: auto;
}

.quiz-title {
  font-family: "Bricolage Grotesque";
  font-size: 1.25rem;
  line-height: 1.2;
}

/* Hero Section */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-background {
  position: relative;
  min-height: 100vh;
  display: flex;
  padding-top: 230px;
  padding-bottom: 0;
}

/* Per-slide hero background variants */
.bg-disponibilidade {
  background: linear-gradient(-86.23deg, #929B00 0%, #C8D400 100%);
}

.bg-iniciativa {
  background: linear-gradient(-86.23deg, #0B5332 0%, #127045 100%);
}

.bg-atencao {
  background: linear-gradient(-86.23deg, #5E9223 0%, #76B82A 100%);
}

.bg-simpatia {
  background: linear-gradient(-86.23deg, #A73F3D 0%, #EF5854 100%);
}

.hero-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Hero Characters Container */
.hero-characters-container {
  position: absolute;
  left: 53%;
  transform: translateX(-25%);
  bottom: -180px;
  width: 100%;
  max-width: 1100px;
  z-index: 3; /* above hero text, below main content */
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 0; /* allow controlled overlap */
  padding: 0 24px;
  pointer-events: none; /* Prevent characters from blocking clicks */
}

/* Individual Character Positioning */
/* Each character needs individual sizing to ensure consistency */
.left-character {
  position: relative;
  z-index: 3;
}

.right-character {
  position: relative;
  z-index: 4;
  margin-left: -200px; /* subtle overlap */
}

.combined-character {
  position: relative;
  z-index: 4;
}

.walter-character {
  bottom: -60px;
}

/* Individual character sizing to ensure all characters have the same visual size */
.maria-character .character-image {
  transform: scale(0.87);
  transform-origin: bottom center;
}

.walter-character .character-image {
  transform-origin: bottom center;
}

.bg-iniciativa .hero-characters-container {
  bottom: -160px;
  left: 48%;
}

.pedro-character .character-image {
  transform: scale(0.87);
  transform-origin: bottom center;
}

.solange-character .character-image {
  transform: scale(0.87);
  transform-origin: bottom center;
}

.bg-atencao .hero-characters-container {
  bottom: -90px;
  left: 45%;
}

.bg-atencao .antonio-character {
  bottom: -130px;
  z-index: 2;
  margin-left: -160px;
}

.rute-character .character-image {
  transform: scale(0.80);
  transform-origin: bottom center;
}

.antonio-character .character-image {
  transform-origin: bottom center;
}

.bg-simpatia .hero-characters-container {
  bottom: -190px;
  left: 47%;
}

.andre-adele-character .character-image {
  transform-origin: bottom center;
}

.maria-walter-character .character-image {
  transform-origin: bottom center;
}

.pedro-solange-character .character-image {
  transform-origin: bottom center;
}

.rute-antonio-character .character-image {
  transform-origin: bottom center;
}

.character-image {
  height: 85vh;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

/* Pictogram Positioning */
.pictogram {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: none;
  z-index: 1;
}

.pictogram-image {
  width: 670px; /* large corner pictogram */
  height: auto;
  opacity: 0.28;
  filter: none; /* keep original color */
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  animation: bounce 2s infinite;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
  opacity: 0.8;
}

.scroll-indicator:active {
  opacity: 0.6;
}

.scroll-arrow {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1); /* Make arrow white */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* Progress Indicators */
  .progress-indicators {
    margin-top: 2rem;
    position: relative;
    z-index: 10; /* Ensure progress indicators are above characters */
    pointer-events: auto; /* Ensure clicks are captured */
  }

.progress-dot {
  width: 45px;
  height: 10px;
  border-radius: 10px;
  border: 1px solid var(--white);
  transition: all 0.3s ease;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 15; /* Ensure individual dots are above everything */
}

.progress-dot.active {
  background-color: var(--white);
}

/* Main Content */
.main-content {
  background-color: var(--white);
  padding-top: 50px;
  position: relative;
  z-index: 5; /* ensure it overlays characters at the bottom edge */
}

/* Quiz Introduction */
.verde-texto {
  color: var(--verde-texto);
}

.quiz-intro h2 {
  color: var(--verde-texto);
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.quiz-intro h3 {
  color: var(--cinza-texto);
  font-family: Inter;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
}

.quiz-description p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.quiz-description strong {
  font-weight: 600;
}

/* Accordion Styles */
.accordion-item {
  border-radius: 20px !important;
  margin-bottom: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--light-gray) !important;
}

.accordion-item:hover {
  border: 1px solid var(--verde-texto) !important;
}

.accordion-button {
  border-radius: 20px !important;
  padding: 1.5rem 2rem !important;
  font-weight: 600;
  color: var(--cinza-texto) !important;
  background-color: var(--light-gray) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
  background-color: var(--light-gray) !important;
  border-radius: 20px 20px 0px 0px !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Custom Chevron Icons */
.accordion-button::after {
  background-image: url("images/arrow-down.svg") !important;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
  width: 20px;
  height: 20px;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("images/arrow-up.svg") !important;
  transform: none; /* Remove rotation since we're using different icons */
}

/* Hide chevrons on home page - accordions without buttons */
#quizAccordion .accordion-header::after,
#quizAccordion .accordion-header::before {
  display: none !important;
}

/* Remove interactive styling from home page accordion headers */
#quizAccordion .accordion-header {
  cursor: default;
  padding: 1.5rem 3rem;
  background-color: var(--light-gray) !important;
  border-radius: 20px 20px 0 0;
}

#quizAccordion .accordion-header h4 {
  margin: 0;
}

/* Remove green hover effect on home page accordions */
#quizAccordion .accordion-item:hover {
  border: 1px solid var(--light-gray) !important;
}

.accordion-body {
  border-radius: 0 0 20px 20px;
  background-color: var(--light-gray) !important;
}

/* Rating Scale Container */
.rating-scale-container {
  position: relative;
  padding: 2rem 0;
}

/* Rating Slider Track - Desktop */
.rating-slider-track {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  height: 15px;
  background-color: var(--border-color);
  border-radius: 50px;
  z-index: 1;
}

.rating-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--verde-texto);
  border-radius: 50px;
  width: 0%;
  transition: width 0.3s ease;
  z-index: 2;
}

/* Rating Scale */
.rating-scale {
  position: relative;
  z-index: 3;
  margin: 2rem 0;
  align-items: flex-start !important;
}

.rating-option {
  flex: 1;
  max-width: 120px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rating-option:hover .rating-circle {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(129, 215, 66, 0.3);
}

.rating-option.active .rating-circle {
  background-color: var(--verde-texto);
  color: var(--white);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(129, 215, 66, 0.4);
}

.rating-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--white);
  border: 2px solid var(--verde-texto);
  color: var(--verde-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 auto 0.5rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 4;
}

.rating-option small {
  font-size: 0.75rem;
  line-height: 1.2;
  transition: color 0.3s ease;
  text-align: center;
}

.rating-option:hover small {
  color: var(--verde-texto) !important;
}

.rating-option.active small {
  color: var(--verde-texto) !important;
  font-weight: 500;
}

/* Start Quiz Section */
.start-quiz-section {
  background-color: transparent;
  border-radius: 30px;
  margin: 2rem 0;
}

.quiz-form .form-control {
  border-radius: 50px;
  border: 1px solid var(--verde-texto);
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.quiz-form .form-control:focus {
  border-color: var(--verde-texto);
  box-shadow: 0 0 0 0.2rem rgba(129, 215, 66, 0.25);
}

.quiz-form .form-control.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.email-error {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-form .btn {
  border-radius: 50px;
  padding: 1rem 2rem;
  font-weight: 600;
  font-size: 1.1rem;
  background-color: var(--verde-texto);
  border: none;
  transition: all 0.3s ease;
}

.quiz-form .btn:hover {
  background-color: #6bc031;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(129, 215, 66, 0.3);
}

/* Footer */
.footer {
  background-color: var(--white);
  border-top: 1px solid var(--border-color);
}

.footer img {
  height: 30px;
  width: auto;
}

/* Responsive Design */

/* Optimization for 1920px width screens */
@media (max-width: 1920px) and (min-width: 1537px) {
  /* Container width optimization - avoid nested container issues */
  .hero-section > .container,
  .hero-section .container,
  .navbar .container,
  .main-content > .container,
  .quiz-main > .container,
  .result-main > .container {
    max-width: 66% !important;
    margin: 0 auto;
  }
  
  /* Final main container should use full width since parent is already constrained */
  .final-main > .container {
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  /* Final page navbar container should also use full width */
  .final-main .navbar .container {
    max-width: 100% !important;
    height: 70px;
  }
  
  /* Keep navbar at full width */
  .navbar {
    width: 100%;
  }
  
  /* Navbar hero specific positioning */
  .navbar-hero {
    position: absolute !important;
    top: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
  }
  
  /* Hero section should span full width */
  .hero-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
  /* Hero background should span full width */
  .hero-background {
    width: 100%;
    max-width: 100%;
    padding-top: 180px;
  }
  
  /* Ensure white background everywhere */
  body {
    background-color: white;
  }
  
  /* Hero section optimizations */
  .hero-subtitle {
    font-size: 140px;
  }
  
  .hero-title {
    font-size: 18px;
  }
  
  .character-image {
    height: 100vh;
  }
  
  /* Maria and Walter specific positioning */
  .hero-characters-container {
    bottom: -260px;
    left: 46%;
  }
  
  /* Initiative background specific positioning */
  .bg-iniciativa .hero-characters-container {
    bottom: -252px;
    left: 45%;
  }
  
  /* Attention background specific positioning */
  .bg-atencao .hero-characters-container {
    bottom: -180px;
    left: 43%;
  }
  
  /* Sympathy background specific positioning */
  .bg-simpatia .hero-characters-container {
    bottom: -250px;
    left: 44%;
  }
  
  .pictogram-image {
    width: 580px;
  }
  
  /* Quiz page optimizations */
  .quiz-card {
    padding: 2.5rem;
  }
  
  /* Override col-lg-8 to use full width */
  .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Override col-lg-10 to use full width */
  .col-lg-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .quiz-header {
    margin-bottom: 2.5rem;
    padding: 0 50px;
  }
  
  .quiz-header .quiz-title {
    font-size: 1.8rem;
  }
  
  .question-item {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
  }
  
  .question-header {
    gap: 1.2rem;
    margin-bottom: 1.5rem;
  }
  
  .question-number {
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }
  
  .question-text {
    font-size: 1rem;
  }
  
  .question-slider {
    margin-left: 3.5rem;
  }
  
  /* Result page optimizations */
  .result-hero {
    padding: 50px 25px 25px;
    gap: 35px;
  }
  
  .result-subtitle {
    font-size: 2.5rem;
  }
  
  .result-title {
    font-size: 4rem;
  }
  
  .result-description {
    font-size: 1.2rem;
  }
  
  .main-icon {
    width: 380px;
    height: 380px;
  }
  
  /* Reduce main-icon size by 100px when inside white card */
  .result-hero.white-card .main-icon {
    width: 210px !important;
    height: 210px !important;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
  
  .section-description {
    font-size: 1.2rem;
  }
  
  .growth-cards {
    gap: 25px;
    margin-top: 60px;
  }
  
  .growth-card {
    padding: 240px 25px 35px;
  }
  
  .growth-icon {
    height: 250px;
    top: -45px;
  }
  
  .card-description {
    font-size: 1.1rem;
  }
  
  /* Navigation optimizations */  
  .navbar .container {
    padding: 10px 20px;
    height: 70px;
  }
  
  .quiz-title {
    font-size: 1.1rem;
  }
  
  /* Accordion optimizations */
  .accordion-button {
    padding: 1.2rem 1.8rem !important;
  }
  
  .accordion-body {
    padding: 1.8rem !important;
  }
  
  /* Rating scale optimizations */
  .rating-circle {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  
  .rating-option {
    max-width: 110px;
  }
  
  /* Button optimizations */
  .quiz-form .btn {
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
  }
  
  .btn-continue {
    padding: 16px 45px;
    font-size: 1rem;
  }
  
  /* Final page optimizations */
  .intro-title {
    font-size: 2.5em;
  }
  
  .statement-title {
    font-size: 2.8em;
  }
  
  .intro-description {
    font-size: 1.3em;
    line-height: 32px;
  }
  
  .profile-card {
    padding: 18px 90px;
  }
  
  .profile-text {
    font-size: 1.4rem;
  }
  
  .profile-text .profile-name {
    font-size: 2.2rem;
  }
  
  .capital-letter {
    font-size: 3.5rem;
  }
  
  .ambassador-card {
    padding: 35px;
  }
  
  .ambassador-invitation {
    font-size: 1.6rem;
  }
  
  .ambassador-call {
    font-size: 2rem;
  }
  
  .ambassador-description {
    font-size: 1.1rem;
  }
  
  .thank-you-title {
    font-size: 2.5rem;
  }
}

/* Optimization for 1536px width screens (1920px with 125% zoom) */
@media (max-width: 1536px) and (min-width: 1401px) {
  /* Container width optimization - avoid nested container issues */
  .hero-section > .container,
  .hero-section .container,
  .navbar .container,
  .main-content > .container,
  .quiz-main > .container,
  .result-main > .container {
    max-width: 66% !important;
    margin: 0 auto;
  }
  
  /* Final main container should use full width since parent is already constrained */
  .final-main > .container {
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  /* Final page navbar container should also use full width */
  .final-main .navbar .container {
    max-width: 100% !important;
    height: 70px;
  }
  
  /* Keep navbar at full width */
  .navbar {
    width: 100%;
  }
  
  /* Navbar hero specific positioning */
  .navbar-hero {
    position: absolute !important;
    top: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
  }
  
  /* Hero section should span full width */
  .hero-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
  /* Hero background should span full width */
  .hero-background {
    width: 100%;
    max-width: 100%;
    padding-top: 180px;
  }
  
  /* Ensure white background everywhere */
  body {
    background-color: white;
  }
  
  /* Hero section optimizations */
  .hero-subtitle {
    font-size: 120px;
  }
  
  .hero-title {
    font-size: 16px;
  }
  
  .character-image {
    height: 100vh;
  }
  
  /* Maria and Walter specific positioning */
  .hero-characters-container {
    bottom: -260px;
    left: 46%;
  }
  
  /* Initiative background specific positioning */
  .bg-iniciativa .hero-characters-container {
    bottom: -252px;
    left: 45%;
  }
  
  /* Attention background specific positioning */
  .bg-atencao .hero-characters-container {
    bottom: -180px;
    left: 43%;
  }
  
  /* Sympathy background specific positioning */
  .bg-simpatia .hero-characters-container {
    bottom: -250px;
    left: 44%;
  }
  
  .pictogram-image {
    width: 500px;
  }
  
  /* Quiz page optimizations */
  .quiz-card {
    padding: 2rem;
  }
  
  /* Override col-lg-8 to use full width */
  .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Override col-lg-10 to use full width */
  .col-lg-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .quiz-header {
    margin-bottom: 2rem;
  }
  
  .quiz-header .quiz-title {
    font-size: 1.6rem;
  }
  
  .question-item {
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
  }
  
  .question-header {
    gap: 1rem;
    margin-bottom: 1.2rem;
  }
  
  .question-number {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }
  
  .question-text {
    font-size: 0.95rem;
  }
  
  .question-slider {
    margin-left: 3rem;
  }
  
  /* Result page optimizations */
  .result-hero {
    padding: 40px 20px 20px;
    gap: 30px;
  }
  
  .result-subtitle {
    font-size: 2.2rem;
  }
  
  .result-title {
    font-size: 3.5rem;
  }
  
  .result-description {
    font-size: 1.1rem;
  }
  
  .main-icon {
    width: 330px;
    height: 330px;
  }
  
  /* Reduce main-icon size by 100px when inside white card */
  .result-hero.white-card .main-icon {
    width: 230px !important;
    height: 230px !important;
  }
  
  .section-title {
    font-size: 2.2rem;
  }
  
  .section-description {
    font-size: 1.1rem;
  }
  
  .growth-cards {
    gap: 20px;
    margin-top: 50px;
  }
  
  .growth-card {
    padding: 220px 20px 30px;
  }
  
  .growth-icon {
    height: 220px;
    top: -40px;
  }
  
  .card-description {
    font-size: 1rem;
  }
  
  /* Navigation optimizations */  
  .navbar .container {
    padding: 8px 18px;
    height: 70px;
  }
  
  .quiz-title {
    font-size: 1rem;
  }
  
  /* Accordion optimizations */
  .accordion-button {
    padding: 1rem 1.6rem !important;
  }
  
  .accordion-body {
    padding: 1.6rem !important;
  }
  
  /* Rating scale optimizations */
  .rating-circle {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .rating-option {
    max-width: 100px;
  }
  
  /* Button optimizations */
  .quiz-form .btn {
    padding: 0.8rem 1.6rem;
    font-size: 0.95rem;
  }
  
  .btn-continue {
    padding: 14px 40px;
    font-size: 0.95rem;
  }
  
  /* Final page optimizations */
  .intro-title {
    font-size: 2.2em;
  }
  
  .statement-title {
    font-size: 2.5em;
  }
  
  .intro-description {
    font-size: 1.2em;
    line-height: 30px;
  }
  
  .profile-card {
    padding: 16px 80px;
  }
  
  .profile-text {
    font-size: 1.3rem;
  }
  
  .profile-text .profile-name {
    font-size: 2rem;
  }
  
  .capital-letter {
    font-size: 3rem;
  }
  
  .ambassador-card {
    padding: 30px;
  }
  
  .ambassador-invitation {
    font-size: 1.5rem;
  }
  
  .ambassador-call {
    font-size: 1.8rem;
  }
  
  .ambassador-description {
    font-size: 1rem;
  }
  
  .thank-you-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 1400px) {
  /* Adjust hero characters positioning for screens smaller than 1320px */
  .hero-characters-container {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Optimization for 1280px width screens (1920px with 150% zoom) */
@media (max-width: 1280px) and (min-width: 1201px) {
  /* Container width optimization - avoid nested container issues */
  .hero-section > .container,
  .hero-section .container,
  .navbar .container,
  .main-content > .container,
  .quiz-main > .container,
  .result-main > .container {
    max-width: 66% !important;
    margin: 0 auto;
  }
  
  /* Final main container should use full width since parent is already constrained */
  .final-main > .container {
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  /* Final page navbar container should also use full width */
  .final-main .navbar .container {
    max-width: 100% !important;
    height: 70px;
  }
  
  /* Keep navbar at full width */
  .navbar {
    width: 100%;
  }
  
  /* Navbar hero specific positioning - set top to 30px as requested */
  .navbar-hero {
    position: absolute !important;
    top: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
  }
  
  /* Result main padding to match home page */
  .result-main {
    padding-top: 30px;
  }
  
  /* Hero section should span full width */
  .hero-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
  /* Hero background should span full width */
  .hero-background {
    width: 100%;
    max-width: 100%;
    padding-top: 180px;
  }
  
  /* Ensure white background everywhere */
  body {
    background-color: white;
  }
  
  /* Hero section optimizations */
  .hero-subtitle {
    font-size: 100px;
  }
  
  .hero-title {
    font-size: 14px;
  }
  
  .character-image {
    height: 100vh;
  }
  
  /* Maria and Walter specific positioning */
  .hero-characters-container {
    bottom: -260px;
    left: 70%;
  }
  
  /* Initiative background specific positioning */
  .bg-iniciativa .hero-characters-container {
    bottom: -252px;
    left: 60%;
  }
  
  /* Attention background specific positioning */
  .bg-atencao .hero-characters-container {
    bottom: -180px;
    left: 61%;
  }
  
  /* Sympathy background specific positioning */
  .bg-simpatia .hero-characters-container {
    bottom: -250px;
    left: 62%;
  }
  
  .pictogram-image {
    width: 420px;
  }
  
  /* Quiz page optimizations */
  .quiz-card {
    padding: 1.5rem;
  }
  
  /* Override col-lg-8 to use full width */
  .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Override col-lg-10 to use full width */
  .col-lg-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .quiz-header {
    margin-bottom: 1.5rem;
  }
  
  .quiz-header .quiz-title {
    font-size: 1.4rem;
  }
  
  .question-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }
  
  .question-header {
    gap: 0.8rem;
    margin-bottom: 1rem;
  }
  
  .question-number {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .question-text {
    font-size: 0.9rem;
  }
  
  .question-slider {
    margin-left: 2.5rem;
  }
  
  /* Result page optimizations */
  .result-hero {
    padding: 30px 15px 15px;
    gap: 25px;
  }
  
  .result-subtitle {
    font-size: 1.6rem;
  }
  
  .result-title {
    font-size: 2.6rem !important;
  }
  
  .result-description {
    font-size: 0.875rem;
  }
  
  .main-icon {
    width: 300px;
    height: 300px;
  }
  
  /* Reduce main-icon size by 100px when inside white card */
  .result-hero.white-card .main-icon {
    width: 200px !important;
    height: 200px !important;
  }
  
  .section-title {
    font-size: 1.6rem;
  }
  
  .section-description {
    font-size: 0.875rem;
  }
  
  .growth-cards {
    gap: 60px;
    margin-top: 40px;
  }
  
  .growth-card {
    padding: 210px 15px 25px !important;
  }
  
  .growth-icon {
    height: 240px !important;
    top: -35px !important;
  }
  
  .card-description {
    font-size: 0.8rem;
  }
  
  /* Navigation optimizations */  
  .navbar .container {
    padding: 6px 16px;
    height: 70px;
  }
  
  .quiz-title {
    font-size: 0.9rem;
  }
  
  /* Accordion optimizations */
  .accordion-button {
    padding: 0.8rem 1.4rem !important;
  }
  
  .accordion-body {
    padding: 1.4rem !important;
  }
  
  /* Rating scale optimizations */
  .rating-circle {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .rating-option {
    max-width: 90px;
  }
  
  /* Button optimizations */
  .quiz-form .btn {
    padding: 0.7rem 1.4rem;
    font-size: 0.9rem;
  }
  
  .btn-continue {
    padding: 12px 35px;
    font-size: 0.9rem;
  }
  
  /* Final page optimizations */
  .intro-title {
    font-size: 1.8em;
  }
  
  .statement-title {
    font-size: 2em;
  }
  
  .intro-description {
    font-size: 1.1em;
    line-height: 28px;
  }
  
  .profile-card {
    padding: 14px 70px;
  }
  
  .profile-text {
    font-size: 1.2rem;
  }
  
  .profile-text .profile-name {
    font-size: 1.8rem;
  }
  
  .capital-letter {
    font-size: 2.5rem;
  }
  
  .ambassador-card {
    padding: 25px;
  }
  
  .ambassador-invitation {
    font-size: 1.4rem;
  }
  
  .ambassador-call {
    font-size: 1.6rem;
  }
  
  .ambassador-description {
    font-size: 0.9rem;
  }
  
  .thank-you-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .navbar { 
    top: 75px; 
  }
  
  .navbar .container { 
    border-radius: 50px; 
    padding: 12px 20px; 
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    height: 70px;
  }
  
  .navbar-brand img {
    height: 18px;
    width: auto;
  }
  
  .quiz-title {
    font-size: 1rem;
    line-height: 1.2;
  }
  
  .hero-content {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  .hero-title {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.3;
    padding-left: 30px;
    padding-right: 30px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .hero-subtitle {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    padding-left: 30px;
    padding-right: 30px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .progress-indicators {
    padding-left: 30px;
    padding-right: 30px;
    justify-content: flex-start !important;
    display: flex !important;
  }
  
  .main-content {
    margin-top: 0;
    border-radius: 0;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .accordion-body {
    padding: 2rem 30px !important;
  }
  
  #quizAccordion .accordion-header {
    padding: 1.5rem !important;
  }
  
  /* Mobile Hero Characters - Better positioning for mobile */
  .hero-characters-container {
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
    justify-content: center;
    align-items: flex-end;
  }
  
  /* Ensure all character containers are at bottom 0 on mobile */
  .bg-disponibilidade .hero-characters-container,
  .bg-iniciativa .hero-characters-container,
  .bg-atencao .hero-characters-container,
  .bg-simpatia .hero-characters-container {
    bottom: 0;
  }
  
  .maria-character {
    bottom: 0;
    z-index: 2;
  }
  
  .walter-character {
    bottom: 0;
    margin-left: -30px; /* More overlap for better mobile layout */
    z-index: 1;
  }
  
  .character-image {
    height: 52vh;
    width: auto;
  }
  
  .pictogram {
    bottom: 20px;
    right: 20px;
  }
  
  .pictogram-image {
    width: 60px;
    height: auto;
  }
  
  
  /* Additional mobile navbar improvements */
  .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 70px;
  }
  
  .navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  
  .quiz-title {
    display: flex;
    align-items: start;
    flex-shrink: 0;
  }
  
  /* Mobile character positioning improvements */
  .bg-disponibilidade .hero-characters-container {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .bg-disponibilidade .maria-character {
    position: relative;
    bottom: 0;
    left: 0;
  }
  
  .bg-disponibilidade .maria-walter-character {
    position: relative;
    bottom: 0;
    left: 0;
  }
  
  .bg-disponibilidade .maria-walter-character .character-image {
    transform: scale(1.2);
    transform-origin: bottom center;
  }
  
  .bg-iniciativa .pedro-solange-character .character-image {
    height: 60vh;
    transform-origin: bottom center;
  }
  
  .bg-iniciativa .hero-characters-container {
    left: calc(50% + 10px);
  }
  
  .bg-atencao .rute-antonio-character .character-image {
    height: 65vh;
    transform-origin: bottom center;
  }
  
  .bg-atencao .hero-characters-container {
    left: calc(50% + 20px);
  }
  
  .bg-simpatia .andre-adele-character .character-image {
    height: 75vh;
    transform-origin: bottom center;
  }
  
  .bg-simpatia .hero-characters-container {
    bottom: -150px;
    left: calc(50% + 10px);
  }
  
  /* Mobile Rating Scale - Keep horizontal but make smaller */
  .rating-scale {
    flex-direction: row !important; /* Force horizontal layout */
    gap: 0.5rem; /* Reduce gap for mobile */
    justify-content: space-between;
    align-items: flex-start !important;
  }
  
  .rating-option {
    max-width: 80px; /* Smaller max-width for mobile */
    min-width: 60px; /* Ensure minimum width */
    flex: 1;
  }
  
  /* Adjust slider track for mobile - keep 38% positioning */
  .rating-slider-track {
    top: 38%; /* Maintain same positioning as desktop */
    height: 12px; /* Smaller height for mobile */
  }
  
  /* Adjust rating circles for mobile */
  .rating-circle {
    width: 40px; /* Smaller circles for mobile */
    height: 40px;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .rating-option small {
    font-size: 0.7rem;
    line-height: 1.2;
  }
  
  .quiz-form .row {
    flex-direction: column;
  }
  
  .quiz-form .col-md-6,
  .quiz-form .col-md-4 {
    width: 100%;
  }
  
  /* Exaggerated scroll indicator animation for mobile */
  .scroll-indicator {
    animation: bounce-mobile 1.5s infinite;
  }
  
  @keyframes bounce-mobile {
    0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0);
    }
    40% {
      transform: translateX(-50%) translateY(-20px);
    }
    60% {
      transform: translateX(-50%) translateY(-10px);
    }
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .accordion-body {
    padding: 1.5rem !important;
  }
  
  .accordion-button {
    padding: 1rem 1.5rem !important;
  }
  
  .navbar-brand {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  .quiz-title {
    font-size: 1rem;
  }
  
  /* Even smaller mobile adjustments */
  .rating-scale {
    gap: 0.25rem; /* Minimal gap for very small screens */
  }
  
  .rating-option {
    max-width: 70px;
    min-width: 50px;
  }
  
  .rating-circle {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .rating-option small {
    font-size: 0.65rem;
  }
  
  /* Adjust slider for very small screens - maintain 38% positioning */
  .rating-slider-track {
    height: 10px;
    top: 38%; /* Keep consistent 38% positioning */
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accordion-item {
  animation: fadeInUp 0.6s ease-out;
}

.accordion-item:nth-child(2) {
  animation-delay: 0.1s;
}

.accordion-item:nth-child(3) {
  animation-delay: 0.2s;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
  background: var(--verde-texto);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6bc031;
}

/* Verification Modal Styles */
#verificationModal .modal-content {
  border-radius: 20px;
  border: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

#verificationModal .modal-header {
  background: linear-gradient(135deg, #81d742, #6bc031);
  color: white;
  border-radius: 20px 20px 0 0;
}

#verificationModal .modal-title {
  font-weight: 600;
  font-size: 1.25rem;
}

#verificationModal .btn-close {
  filter: brightness(0) invert(1);
}

#verificationModal .form-control {
  border-radius: 15px;
  border: 2px solid #e9ecef;
  padding: 1rem;
  font-size: 1.25rem;
  text-align: center;
  letter-spacing: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

#verificationModal .form-control:focus {
  border-color: var(--verde-texto);
  box-shadow: 0 0 0 0.2rem rgba(129, 215, 66, 0.25);
}

#verificationModal .btn {
  border-radius: 15px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

#verificationModal .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(129, 215, 66, 0.3);
}

.verification-error,
.verification-success {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  animation: fadeIn 0.3s ease;
}

/* Loading spinner styles */
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Verified User Message */
.verified-user-message {
  background: var(--light-gray);
  border-radius: 20px;
  padding: 2rem;
  margin: 2rem 0;
  animation: fadeInUp 0.6s ease;
}

.verified-user-message i,
.verified-user-message h4,
.verified-user-message a {
  color: var(--verde-texto);
}

.verified-user-message .btn,
.continue-section .btn,
.final-section .btn-finalizar,
.ambassador-action .btn-participar {
  border-radius: 50px;
  padding: 0.6rem 3rem;
  font-weight: 600;
  font-size: 1.3rem;
  background-color: var(--verde-texto);
  border: none;
  transition: all 0.3s ease;
}

.verified-user-message .btn:hover {
  background-color: #6bc031;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(129, 215, 66, 0.3);
}

/* Quiz Page Styles */
.quiz-main {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-top: 50px;
  padding-bottom: 60px;
}

.quiz-card {
  background: white;
  border-radius: 30px;
  padding: 3rem;
}

.quiz-navigation {
  margin-bottom: 30px;
}

.quiz-header {
  margin-bottom: 3rem;
  padding-left: 50px;
}

.quiz-header .quiz-title {
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--cinza-texto);
  margin: 0;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.motivational-sentence {
  color: var(--verde-texto);
  text-align: left;
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 1.4em;
  font-weight: 600;
  position: relative;
  padding-left: 55px;
}

.motivational-sentence::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 30px;
  background-image: url('data:image/svg+xml,<svg width="45" height="30" viewBox="0 0 45 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5089 20.8489L14.3482 19.3886L14.4824 19.3171L41.5849 5.39799C42.6482 4.85675 44.549 2.83653 44.9318 1.72497C45.2007 0.929531 44.6444 0.0940598 43.7982 0.054032C41.9509 -0.0360872 38.9994 -0.0742708 38.0393 0.446479L27.4047 5.89981L26.4962 6.36956L19.954 5.64132C19.2833 5.52975 18.6021 5.65268 18.0238 5.97944L14.1108 7.99122L19.7232 9.84172L18.0299 10.72L15.3145 12.119L13.5386 13.0381C12.0828 13.7836 10.3593 13.8769 8.84287 13.2563L2.52932 10.7336C2.35394 10.6624 2.14754 10.6626 1.97202 10.7545L0 11.7655L7.30935 20.0678C8.35059 21.2596 10.0737 21.5741 11.4882 20.8489H11.5089Z" fill="%2381D742"/><path d="M42.801 28.3484H2.36719V29.7599H42.801V28.3484Z" fill="%23424045"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Quiz Carousel */
.quiz-carousel {
  overflow: hidden;
}

.carousel-container {
  position: relative;
  display: flex;
  transition: transform 0.6s ease;
}

.quiz-page {
  min-width: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.quiz-page.active {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.quiz-page.prev {
  opacity: 0;
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}


.question-item {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e9ecef;
}

.question-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.question-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.question-number {
  background: var(--verde-texto);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.question-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--cinza-texto);
  flex: 1;
  font-weight: 600;
}

.question-slider {
  margin-left: 4rem;
}

.slider-container {
  position: relative;
  width: 100%;
}

.slider {
  width: 100%;
  height: 12px;
  border-radius: 12px;
  background: linear-gradient(to right, #9BA042 0%, #C8D400 33.33%, #76B82A 66.67%, #127045 100%);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0 12px;
  box-sizing: border-box;
  background-clip: content-box;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--verde-texto);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.slider::-webkit-slider-thumb:hover {
  box-shadow: 0 4px 12px rgba(129, 215, 66, 0.4);
}

.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--verde-texto);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.slider::-moz-range-thumb:hover {
  box-shadow: 0 4px 12px rgba(129, 215, 66, 0.4);
}

/* Dynamic slider handle colors based on value */
.slider.value-1::-webkit-slider-thumb {
  background: radial-gradient(circle, #9BA042 0%, #9BA042 40%, white 40%, white 100%);
  border-color: white;
}

.slider.value-1::-moz-range-thumb {
  background: radial-gradient(circle, #9BA042 0%, #9BA042 40%, white 40%, white 100%);
  border-color: white;
}

.slider.value-2::-webkit-slider-thumb {
  background: radial-gradient(circle, #C8D400 0%, #C8D400 40%, white 40%, white 100%);
  border-color: white;
}

.slider.value-2::-moz-range-thumb {
  background: radial-gradient(circle, #C8D400 0%, #C8D400 40%, white 40%, white 100%);
  border-color: white;
}

.slider.value-3::-webkit-slider-thumb {
  background: radial-gradient(circle, #76B82A 0%, #76B82A 40%, white 40%, white 100%);
  border-color: white;
}

.slider.value-3::-moz-range-thumb {
  background: radial-gradient(circle, #76B82A 0%, #76B82A 40%, white 40%, white 100%);
  border-color: white;
}

.slider.value-4::-webkit-slider-thumb {
  background: radial-gradient(circle, #127045 0%, #127045 40%, white 40%, white 100%);
  border-color: white;
}

.slider.value-4::-moz-range-thumb {
  background: radial-gradient(circle, #127045 0%, #127045 40%, white 40%, white 100%);
  border-color: white;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0 12px;
}

.slider-labels .label {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cinza-texto);
  width: 24px;
  text-align: center;
}

.quiz-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
}

.progress-line {
  position: relative;
  flex: 1;
  height: 4px;
  min-height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  margin: 0 2rem;
  overflow: visible;
}

.progress-fill {
  height: 100%;
  background: #424045;
  border-radius: 2px;
  width: 0%; /* Start at 0% for page 1 */
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.progress-sections {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.progress-section {
  flex: 1;
  position: relative;
  height: 100%;
}

/* Section dividers - always light grey between sections */
.section-divider {
  position: absolute;
  right: 0;
  top: -6px;
  width: 3px;
  height: 15px;
  background: #e9ecef;
  z-index: 2;
}

/* All dividers should be visible, including the last one */
.progress-section:last-child .section-divider {
  display: block;
}

.section-label {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  color: #424045;
  white-space: nowrap;
  z-index: 2;
}

.progress-plane {
  position: absolute;
  left: 0;
  top: -20px;
  transform: translateY(-50%) translateX(-50%);
  width: 72px;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.footer-right {
  width: 250px;
  text-align: end;
}

.footer-right .btn {
  border-radius: 50px;
  padding: 1rem 3rem;
  font-weight: 600;
  font-size: 1.1rem;
  background-color: var(--verde-texto);
  border: none;
  transition: all 0.3s ease;
}

.footer-right .btn:hover {
  background-color: #6bc031;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(129, 215, 66, 0.3);
}

.footer-right .btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive Design for Quiz */
@media (max-width: 768px) {
  .quiz-main {
    padding-top: 20px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .quiz-card {
    padding: 2rem 1.5rem;
    margin: 1rem 0;
  }
  
  .quiz-navigation {
    margin-bottom: 1rem;
  }
  
  .quiz-navigation .back-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .quiz-header {
    padding-left: 0;
  }
  
  .quiz-header .quiz-title {
    font-size: 1.25rem;
    line-height: 1.3;
    text-align: center;
    margin: 0;
  }
  
  .motivational-sentence {
    padding-left: 0;
    padding-top: 50px;
    text-align: center;
  }
  
  .motivational-sentence::before {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  
  .question-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .question-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .question-text {
    font-size: 1rem;
  }
  
  .question-slider {
    margin-left: 0;
  }
  
  .slider-container {
    max-width: 100%;
  }
  
  .quiz-footer {
    flex-direction: row;
    gap: 1rem;
    text-align: center;
    align-items: center;
  }
  
  .footer-left {
    width: 0; /* No space needed on the left */
  }
  
  .footer-right {
    width: auto;
    min-width: 100px;
  }
  
  .footer-right .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
  
  /* Mobile Progress Bar Styles */
  .progress-line {
    margin: 0 0.5rem 0 0;
    height: 6px;
    min-height: 6px;
    flex: 1;
  }
  
  .progress-plane {
    width: 45px;
    top: -16px;
  }
  
  /* On mobile, hide all dividers */
  .section-divider {
    display: none;
  }
  
  /* On mobile, hide all section labels except the current one */
  .progress-section:not(.current) .section-label {
    display: none;
  }
  
  /* On mobile, center the current section label below the line */
  .progress-section.current .section-label {
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    top: 10px;
  }
}

/* Extra small mobile devices */
@media (max-width: 576px) {
  .footer-left {
    width: 0; /* No space needed on the left */
  }
  
  .footer-right {
    min-width: 90px;
  }
  
  .footer-right .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
  }
  
  .quiz-navigation .back-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  
  .progress-line {
    margin: 0 0.25rem 0 0;
    height: 5px;
    min-height: 5px;
    flex: 1;
  }
  
  .progress-plane {
    width: 40px;
    top: -14px;
  }
  
  /* On mobile, hide all dividers */
  .section-divider {
    display: none;
  }
  
  /* On mobile, hide all section labels except the current one */
  .progress-section:not(.current) .section-label {
    display: none;
  }
  
  /* On mobile, center the current section label below the line */
  .progress-section.current .section-label {
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    top: 8px;
  }
}

/* ========================================
   RESULT PAGE STYLES
   ======================================== */

.result-main {
  padding-top: 50px;
  padding-bottom: 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Container for the layered effect */
.result-hero-container {
  position: relative;
  margin-bottom: 60px;
}

/* White rectangle effect behind the main card */
.result-hero-container::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 160px;
  right: -80px;
  bottom: 0px;
  background: white;
  border-radius: 40px;
  z-index: 1; /* Put behind content instead of in front */
  transform: rotate(6.8deg);
}

/* Result hero card structure */
.result-hero {
  border-radius: 40px;
  padding: 60px 30px 30px;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Three-column layout when 4 icons are present */
.result-hero.has-four-icons {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: start;
}

.result-hero.has-four-icons .result-content {
  grid-column: 2;
}

/* Green title for 4-profile pages */
.result-hero.has-four-icons .result-title {
  color: #81d742 !important;
}

/* Card color variants */
.result-hero.red-card {
  background: #ef5854;
  color: white;
}

.result-hero.white-card {
  background: white;
  color: #424045;
}

.result-hero.grey-card {
  background: #A7A9AC;
  color: white;
  padding: 60px;
}

.result-hero.green-card {
  background: #c8d400;
  color: white;
}

.result-hero.dark-green-card {
  background: #127045;
  color: white;
}

.result-hero.light-green-card {
  background: #76b82a;
  color: white;
}

/* Ensure subtitle and description are dark grey on white cards, white on grey cards */
.result-hero.white-card .result-subtitle,
.result-hero.white-card .result-description {
  color: #424045;
}
.result-hero.grey-card .result-subtitle,
.result-hero.grey-card .result-description {
  color: white;
}

/* Make "um/a" and "e um/a" connectors same format as subtitle */
.result-hero .result-title .connector {
  font-family: "Inter", sans-serif;
  font-size: 3rem;
  font-weight: 200;
  color: #fff;
  line-height: 1.2;
}

/* Connector color on white cards should match subtitle, white on grey cards */
.result-hero.white-card .result-title .connector {
  color: #424045;
}
.result-hero.grey-card .result-title .connector {
  color: white;
}

/* Card description should be dark grey */
.card-description {
  color: #424045;
}

/* Profile title colors */
.result-hero .result-title {
  color: white; /* Default for colored backgrounds */
}

/* Only color titles on white/grey backgrounds */
.result-hero.white-card .result-title {
  color: #424045;
}

.result-hero.grey-card .result-title {
  color: white;
}

/* Specific personality type colors for titles - only on white/grey backgrounds */
.result-hero.white-card .result-title[data-personality="simpatia"] {
  color: #ef5854;
}

.result-hero.white-card .result-title[data-personality="disponibilidade"] {
  color: #c8d400;
}

.result-hero.white-card .result-title[data-personality="iniciativa"] {
  color: #127045;
}

.result-hero.white-card .result-title[data-personality="atencao"] {
  color: #76b82a;
}

/* Icon container structure */
.result-icon-container {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Four icons in 2x2 grid layout */
.result-icon-container.four-icons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  width: auto;
}

.personality-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Small icons for 4-icon layout */
.main-icon.small-icon {
  width: 120px !important;
  height: 120px !important;
}


.hero-profile-percentage {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: white;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
  z-index: 3;
  position: relative;
}

/* Hide percentage on white cards */
.result-hero.white-card .hero-profile-percentage {
  display: none;
}

/* For four-icons-grid, position percentage at the bottom */
.result-icon-container.four-icons-grid .hero-profile-percentage {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 1.5rem;
}

/* Initiative Result Hero - Green background */
.result-hero.initiative-hero {
  background: #127045;
}

/* Attention Result Hero - Light green background */
.result-hero.attention-hero {
  background: #76b82a;
}

/* Sympathy Result Hero - Red background */
.result-hero.sympathy-hero {
  background: #ef5854;
}

/* Disponibilidade Result Hero - Yellow-green background */
.result-hero.disponibilidade-hero {
  background: #c8d400;
  color: white;
}

/* Final Page Styles */
.final-main {
  padding-top: 50px;
  padding-bottom: 80px;
  min-height: 100vh;
  max-width: 70%;
  margin: 0 auto;
}

.intro-section {
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 3em;
  text-align: start;
  font-weight: 200;
  color: #424045;
  margin-bottom: 20px;
  line-height: normal;
  width: 100%;
}

.intro-title strong {
  font-weight: 800;
  color: #424045;
}

.intro-description {
  font-family: "Inter", sans-serif;
  font-size: 1.4em;
  font-weight: 300;
  color: #424045;
  margin: 0 auto;
  line-height: 35px; /* 140% */
  text-align: start;
  width: 100%;
}

.intro-description strong {
  font-weight: 700;
  color: #424045;
}

.tap-statement {
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}

.statement-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 3.2em;
  font-weight: 200;
  color: #424045;
  line-height: normal;
  margin: 0 auto;
  text-align: start;
  width: 100%;
}

.statement-title .highlight {
  font-weight: 700;
  color: #81D742;
}

.all-profiles-section {
  margin-bottom: 80px;
}

.profile-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.profile-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 100px;
  border-radius: 50px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.profile-content {
  flex: 1;
}

.profile-text {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: white;
  line-height: 1.4;
}

.profile-text .profile-name {
  font-weight: 700;
  font-size: 2.4rem;
  position: relative;
  display: inline-block;
  line-height: 1;
}

.profile-text .prefix {
  font-weight: 400;
  font-size: 1.5rem;
}

.profile-text .suffix {
  font-weight: 400;
  font-size: 1.5rem;
}

.capital-letter {
  position: relative;
  display: inline-block;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
  margin-left: 10px;
  margin-right: -7px;
}

.simpatia-card {
  padding-left: 80px;
}

.letter-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: auto;
  z-index: 1;
  opacity: 0.6;
  transform: translate(-10px, 0px);
}

.profile-icon {
  opacity: 0.8;
  flex-shrink: 0;
}

.profile-icon img {
  width: 22%;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  right: 0;
}

.disponibilidade-card {
  background: linear-gradient(135deg, #c8d400 0%, #adba00 100%);
}

.iniciativa-card {
  background: linear-gradient(135deg, #127045 0%, #0d5a38 100%);
}

.atencao-card {
  background: linear-gradient(135deg, #76b82a 0%, #5a8f1f 100%);
}

.simpatia-card {
  background: linear-gradient(135deg, #ef5854 0%, #d63031 100%);
}

.iniciativa-card .profile-icon img {
  bottom: -20px;
  width: 20%;
}

.thank-you-section {
  text-align: left;
  margin-bottom: 60px;
}

.thank-you-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.thank-you-description {
  font-family: "Inter", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
}

.ambassador-card {
  background: white;
  border-radius: 25px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  margin-bottom: 60px;
}

.ambassador-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-direction: column;
}

.ambassador-text {
  flex: 1;
}

.ambassador-two-column {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
}

.ambassador-left {
  flex: 1;
}

.ambassador-right {
  flex: 1;
}

.ambassador-invitation {
  font-family: "Inter", sans-serif;
  font-size: 1.8rem;
  font-weight: 200;
  color: #6c757d;
  margin: 0;
  line-height: 1.5;
}

.ambassador-call {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.ambassador-description {
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #6c757d;
  line-height: 1.5;
  margin: 0;
}

.ambassador-action {
  flex-shrink: 0;
  text-align: center;
}

.btn-participar {
  border: none;
  border-radius: 50px;
  padding: 15px 35px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.btn-participar:hover {
  transform: translateY(-2px);
  color: white;
}

.final-section {
  text-align: center;
}

.final-invitation {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 30px;
  line-height: 1.5;
}

.btn-finalizar {
  border: none;
  border-radius: 50px;
  padding: 15px 40px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-finalizar:hover {
  transform: translateY(-2px);
  color: white;
}

.btn-outline-primary {
  border: 2px solid #81d742;
  color: #81d742;
  background: transparent;
  border-radius: 50px;
  padding: 12px 25px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background: #81d742;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(129, 215, 66, 0.3);
}

.btn-outline-danger {
  border: 2px solid #dc3545;
  color: #dc3545;
  background: transparent;
  border-radius: 50px;
  padding: 12px 25px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn-outline-danger:hover {
  background: #dc3545;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

/* Responsive Design for Final Page */
@media (max-width: 1200px) {
  .intro-title {
    font-size: 48px;
  }
  
  .statement-title {
    font-size: 48px;
  }
  
  .intro-description {
    font-size: 22px;
    line-height: 32px;
    max-width: 900px;
  }
}

@media (max-width: 768px) {
  .final-main {
    padding-top: 50px;
        padding-bottom: 230px;
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        margin: 0;
        min-height: auto;
  }
  
  /* Final page navbar should use same mobile styling as other pages */
  .final-main .navbar .container {
    max-width: 90%;
    margin-left: 30px;
    margin-right: 30px;
    height: 70px;
  }
  
  .intro-title {
    font-size: 36px;
  }
  
  .intro-title br {
    display: none;
  }
  
  .statement-title {
    font-size: 36px;
    max-width: 100%;
  }
  
  .intro-description {
    font-size: 18px;
    line-height: 28px;
    max-width: 100%;
    padding: 0;
  }
  
  /* Ensure all final page content has 30px horizontal padding */
  .intro-section,
  .tap-statement,
  .thank-you-section,
  .ambassador-card,
  .final-section {
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .profile-cards {
    gap: 15px;
  }
  
  .profile-card {
    padding: 15px 25px 15px 45px;
  }
  
  .profile-text .profile-name {
    font-size: 1.7rem;
  }
  
  .capital-letter {
    font-size: 3rem;
  }
  
  /* Add more left margin to capital letters, except for simpatia */
  .profile-card:not(.simpatia-card) .capital-letter {
    margin-left: 15px;
  }
  
  /* Specific margin for simpatia capital letters */
  .simpatia-card .capital-letter {
    margin-left: 0px;
  }
  
  /* Position and size letter decoration on mobile */
  .profile-card .letter-decoration {
    left: 10px;
    width: 60px;
  }
  
  /* Specific positioning for simpatia letter decoration */
  .simpatia-card .letter-decoration {
    left: -5px;
  }
  
  /* Profile content z-index */
  .profile-content {
    z-index: 1;
  }
  
  .profile-text .suffix {
    font-size: 1.1rem;
    display: block;
    margin-left: 30px;
  }
  
  .profile-icon {
    font-size: 1.5rem;
  }
  
  .ambassador-two-column {
    flex-direction: column;
    gap: 20px;
  }
  
  /* Stack calendar buttons vertically on mobile */
  .d-flex.gap-3.justify-content-center {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .ambassador-card {
    padding: 30px 25px;
  }
  
  .ambassador-content {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }
  
  .ambassador-call {
    font-size: 1.5rem;
  }
  
  .thank-you-title {
    font-size: 1.8rem;
  }
  
  /* Increase pictogram images by 10% on mobile */
  .profile-icon img {
    width: 35%;
  }
  
  .iniciativa-card .profile-icon img {
    width: 30%;
    bottom: 0px;
  }
}

@media (max-width: 480px) {
  .intro-title {
    font-size: 28px;
  }
  
  .statement-title {
    font-size: 28px;
  }
  
  .intro-description {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Result page specific highlight colors - all use TAP green for consistency */
.section-title .highlight.disponibilidade-highlight {
  color: #76b82a;
}

.section-title .highlight.initiative-highlight {
  color: #76b82a;
}

.section-title .highlight.attention-highlight {
  color: #76b82a;
}

.section-title .highlight.sympathy-highlight {
  color: #76b82a;
}

.section-title .highlight.neutral-highlight,
.section-title .highlight.balanced-highlight,
.section-title .highlight.excellent-highlight {
  color: #76b82a;
}

.result-icon {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.main-icon {
  width: 430px;
  height: 430px;
  object-fit: contain;
}

/* Reduce main-icon size by 100px when inside white card */
.result-hero.white-card .main-icon {
  width: 240px;
  height: 240px;
}

.result-content {
  flex: 1;
}

.result-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 3rem;
  font-weight: 200;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.2;
}

.result-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 20px;
  line-height: 1.2;
}

.result-description {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  color: white;
  margin: 0;
  line-height: 1.6;
  opacity: 0.95;
}

/* Section Styles */
.strong-point-section,
.growth-section {
  margin-bottom: 60px;
}

.section-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 3rem;
  font-weight: 200;
  color: #495057;
  margin-bottom: 20px;
}

.section-title .highlight {
  color: #76b82a;
  font-weight: 700;
}

.section-description {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  color: #6c757d;
  line-height: 1.7;
  margin: 0;
}

/* Growth Cards */
.growth-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 80px;
}

/* Grid layout for 3 growth areas - equal size */
.growth-cards.grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid layout for 1 growth area - limit width to match 3-card size */
/* Calculation: (1200px max-width - 60px for 2 gaps) / 3 cards = 380px per card */
.growth-cards.grid-1 {
  grid-template-columns: 1fr;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid layout for 4 growth areas */
.growth-cards.grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 70px 30px;
  max-width: 800px;
  margin: 80px auto 0;
}

.growth-card {
  border-radius: 20px;
  padding: 260px 30px 40px; /* Extra top padding for the offset icon */
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: visible; /* Allow the icon to extend beyond the card */
}


.initiative-card {
  background: linear-gradient(135deg, #127045 0%, #0d5a38 100%);
}

.attention-card {
  background: linear-gradient(135deg, #76b82a 0%, #5a8f1f 100%);
}

.sympathy-card {
  background: linear-gradient(135deg, #ef5854 0%, #d63031 100%);
}

.availability-card {
  background: linear-gradient(135deg, #c8d400 0%, #adba00 100%);

}

.growth-icon {
  height: 280px;
  object-fit: contain;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  /* No background - transparent */
}


.profile-percentage {
  font-family: "Inter", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: 10px;
  margin-top: -25px;
  z-index: 3;
  position: relative;
}

.card-description {
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: white;
  line-height: 1.6;
  margin: 0;
}

/* Continue Button */
.continue-section {
  text-align: center;
  margin-top: 60px;
}

.btn-continue {
  border: none;
  border-radius: 50px;
  padding: 18px 50px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: white;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
}

#continueBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

#continueBtn .spinner-border {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 8px;
}

.btn-continue:hover {
  transform: translateY(-2px);
  color: white;
}

.btn-continue:active {
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar-hero {
    top: 75px !important;
  }
  
  .hero-background {
    padding-top: 210px;
  }
  
  .result-main {
    min-height: auto;
    padding-bottom: 230px;
  }
  
  .result-hero {
    flex-direction: column;
    text-align: center;
    padding: 40px 30px;
    gap: 0px;
    /* No rotation on mobile */
  }
  
  .result-hero-container::before {
    display: none; /* Hide the white rectangle behind the intro on mobile */
  }
  
  /* Format main card to match other cards on mobile */
  .result-hero {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    padding-top: 40px !important;
    align-items: center;
  }
  
  .main-icon {
    width: 230px;
    height: auto;
    z-index: 10;
  }
  
  /* Override grid layout for has-four-icons on mobile */
  .result-hero.has-four-icons {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
  }
  
  .result-hero.has-four-icons .result-content {
    grid-column: auto;
  }
  
  /* Add gap for white-card on mobile */
  .result-hero.white-card {
    gap: 20px;
  }
  
  /* Reduce main-icon size by 100px when inside white card */
  .result-hero.white-card .main-icon {
    width: 130px !important;
    height: auto !important;
  }
  
  .result-icon {
    position: relative;
    margin-bottom: 20px;
    margin-top: -200px;
  }
  
  .result-title {
    font-size: 2.25rem;
  }
  
  .result-description {
    font-size: 1.125rem;
  }
  
  .growth-cards {
    grid-template-columns: 1fr;
    gap: 100px;
  }
  
  .growth-cards.grid-2x2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 100px;
  }
  
  .growth-cards.grid-3 {
    grid-template-columns: 1fr;
    gap: 100px;
  }
  
  .growth-card {
    padding: 230px 20px 30px;
  }
  
  .growth-icon {
    width: 230px;
    height: auto;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 576px) {
  .result-main {
    padding-top: 50px;
    padding-bottom: 230px;
    padding-left: 30px;
    padding-right: 30px;
    min-height: auto;
  }
  
  /* Extra small mobile adjustments */
  .navbar .container {
    padding: 10px 16px;
    max-width: 95%;
    height: 70px;
  }
  
  /* Final page navbar should use same mobile styling as other pages */
  .final-main .navbar .container {
    max-width: 95%;
    height: 70px;
  }
  
  .navbar-brand img {
    height: 18px;
  }
  
  .quiz-title {
    font-size: 0.9rem;
  }
  
  .hero-title {
    font-size: 16px;
  }
  
  .hero-subtitle {
    font-size: 36px;
  }
  
  .character-image {
    height: 52vh;
  }
  
  .bg-disponibilidade .walter-character {
    left: -20px;
  }
  
  .pictogram-image {
    width: 50px;
  }
  
  .result-hero {
    padding: 30px 20px;
    margin-bottom: 40px;
  }
  
  .result-title {
    font-size: 1.875rem;
  }
  
  .icon-container {
    width: 100px;
    height: 100px;
  }
  
  .icon-shield i {
    font-size: 40px;
  }
}

/* Admin Report Styles */
.admin-header {
  background: linear-gradient(135deg, var(--verde-texto) 0%, var(--iniciativa) 100%);
  color: white;
  padding: 3rem 2rem;
  border-radius: 20px;
  margin-bottom: 2rem;
  text-align: center;
}

.admin-header h1 {
  margin-bottom: 1rem;
}

.admin-header .verde-texto {
  color: var(--disponibilidade) !important;
}

.card {
  border: none;
  border-radius: 15px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.card-header {
  border-radius: 15px 15px 0 0 !important;
  border-bottom: 1px solid var(--border-color);
  background: var(--light-gray) !important;
}

.table {
  border-radius: 0 0 15px 15px;
}

.table th {
  border-top: none;
  font-weight: 600;
  color: var(--cinza-texto);
  background: var(--light-gray);
  padding: 1rem 0.75rem;
}

.table td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
  border-color: var(--border-color);
}

.table-hover tbody tr:hover {
  background-color: rgba(129, 215, 66, 0.05);
}

.progress {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

.progress-bar {
  border-radius: 10px;
}

.badge {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 20px;
}

.pagination {
  margin-top: 2rem;
}

.page-link {
  border: none;
  color: var(--cinza-texto);
  padding: 0.75rem 1rem;
  margin: 0 0.25rem;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

.page-link:hover {
  background-color: var(--verde-texto);
  color: white;
  transform: translateY(-1px);
}

.page-item.active .page-link {
  background-color: var(--verde-texto);
  border-color: var(--verde-texto);
  color: white;
}

.page-item.disabled .page-link {
  color: #6c757d;
  background-color: transparent;
}

.form-control, .form-select {
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control:focus, .form-select:focus {
  border-color: var(--verde-texto);
  box-shadow: 0 0 0 0.2rem rgba(129, 215, 66, 0.25);
}

.btn {
  border-radius: 40px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn-primary {
  background-color: var(--verde-texto);
  border-color: var(--verde-texto);
}

.btn-primary:hover {
  background-color: var(--iniciativa);
  border-color: var(--iniciativa);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--verde-texto);
  border-color: var(--verde-texto);
}

.btn-outline-primary:hover {
  background-color: var(--verde-texto);
  border-color: var(--verde-texto);
  color: white;
}

.btn-outline-secondary {
  color: var(--cinza-texto);
  border-color: var(--border-color);
}

.btn-outline-secondary:hover {
  background-color: var(--cinza-texto);
  border-color: var(--cinza-texto);
  color: white;
}

.modal-content {
  border: none;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-header {
  border-bottom: 1px solid var(--border-color);
  border-radius: 20px 20px 0 0;
  background: var(--light-gray);
}

.modal-footer {
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 20px 20px;
  background: var(--light-gray);
}

.spinner-border {
  width: 1rem;
  height: 1rem;
}

/* Statistics Cards */
.card.bg-disponibilidade {
  background: linear-gradient(135deg, var(--disponibilidade) 0%, #a8b800 100%) !important;
}

.card.bg-iniciativa {
  background: linear-gradient(135deg, var(--iniciativa) 0%, #0d5a3a 100%) !important;
}

.card.bg-atencao {
  background: linear-gradient(135deg, var(--atencao) 0%, #5a9a1f 100%) !important;
}

.card.bg-simpatia {
  background: linear-gradient(135deg, var(--simpatia) 0%, #d63e3a 100%) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .admin-header {
    padding: 2rem 1rem;
    margin-bottom: 1rem;
  }
  
  .admin-header h1 {
    font-size: 2rem;
  }
  
  .table-responsive {
    font-size: 0.875rem;
  }
  
  .table td, .table th {
    padding: 0.5rem 0.25rem;
  }
  
  .progress {
    width: 40px !important;
  }
  
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}