/* Quiz styling */
#quiz-container {
  display: none;
  margin-top: 13vh;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}

body.quiz-body {
  background-color: white;
  color: black;
  font-weight: 200;
  overflow-y: auto !important; /* Force scrolling */
  /* padding: 1rem; */
  height: 100%;
}

.container-quiz-page {
  display: block;
  text-align: left;
  margin-top: 14vh;
  padding: 0 20px;
}

.quiz-title {
  margin-bottom: 10px;
}

.quiz-instruction1, .quiz-instruction2, .quiz-instruction3 {
  margin-bottom: 10px;
  font-size: 1.1rem;
  font-weight: 300;
}

.quiz-instruction1 {
  padding-top: 1rem;
  border-top: 1.5px solid #003cff;
}

.quiz-instruction1 a, .quiz-instruction3 a {
  color: #003cff;
  text-decoration: none;
  font-weight: 400;
}

.skip-link {
  color: #003cff;
  text-decoration: underline;
}

.start-button {
  margin-top: 35vh;
  background-color: #3cff00;
  color: black;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  padding: 1rem 5rem;
  border: none;
  border-radius: 1px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  width: 87vw;
  max-width: 400px;
  text-align: center;
}

/* Question styling */
.question {
  background-color: white;
  /* padding: 20px 15px; */
  padding: 0rem 0rem 0rem 0rem;
  /* margin-bottom: 1rem; */
  border-bottom: 1px solid #003cff;
}

.question h3 {
  color: #003cff;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 1rem; 
  text-align: left;
}

#quiz-container button {
  display: block;
  width: 100%;
  color: black;
  background-color: white;
  border-bottom: 1px solid grey;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 15px;
  /* margin-bottom: 10px; */
  /* margin-top: 10px; */
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
}

#quiz-container button:hover {
  background-color: #e0e0e0;
}

/* Selected option styling */
#quiz-container button.selected {
  background-color: #bfceff;
}

/* Back/Next buttons */
.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 18vh; /* Add space at bottom */
}

.navigation-buttons button {
  padding: 10px 40px;
  background-color: white;
  border: 1px solid #003cff;
  color: #003cff;
  font-weight: 600;
  cursor: pointer;
  width: 48%;
}

.navigation-buttons button.next {
  background-color: #3cff00;
  border: none;
  color: black;
}

/* Results page styling */
#results {
  background-color: #003cff;
  padding: 1rem 0 7rem 0;
  text-align: left;
  margin-top: 10vh;
  display: none;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


#results h2 {
  color: white;
  font-size: 1.5rem;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 400;
  padding-left: 2vh;
}

.nyc-votes{
  border-bottom: 1px solid white;
  padding: 2vh;
  margin-bottom: 2vh;
}

.nyc-votes h3{
  /* margin-top: 20px; */
  /* margin-bottom: 2rem; */
  font-weight: 400;
  color: white;
}

.nyc-votes h3 a{
  color: #3CFF00;
}

.nyc-votes h4{
  /* margin-top: 20px; */
  margin-bottom: 2vh;
  font-weight: 200;
  color: white;
}

#results p{
  padding: 1vh 2vh 1vh 2vh;
  color: white;
} 

.results-title{
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

.candidate-result {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 1vh 2vh 1vh 2vh;
  color: white;
}

.candidate-rank {
  font-weight: 600;
  margin-right: 10px;
}

.candidate-name {
  font-weight: 500;
  margin-right: 10px;
}

.candidate-score {
  color: #3CFF00;
}

.candidate-profile {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.candidate-profile img {
  width: 100%;
  max-width: 41vh;
  /* margin: 0vh 6vh 2vh 6vh; */
}

.candidate-profile h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.candidate-website {
  color: #3cff00;
  text-decoration: underline;
  margin-bottom: 20px;
}

/* .stats-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
} */

.rank-box {
  /* background-color: #3cff00; */
  color: white;
  font-weight: 400;
  font-size: 3.3rem;
  padding: 15px;
  /* margin-right: 20px; */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}

.questions-aligned {
  font-size: 1.2rem;
  font-weight: 500;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .question h3 {
    font-size: 1.1rem;
  }
  
  #quiz-container button {
    padding: 2vh 1vh 2vh 1vh;
    font-size: 0.9rem;
  }
  
  .start-button {
    width: 15rem;
  }
  
  /* Ensure content is scrollable on small screens */
  html, body {
    height: 100%;
    overflow-y: auto;
  }
}



.question-number{
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #003cff;
  font-weight: 300;
  color: #003cff;
}

.navigation-buttons button.next {
  background-color: #3cff00 !important;
  text-align: center !important;
  border: none;
  color: black;
  border-bottom: none !important;
}

.navigation-buttons button.back {
  background-color: white !important;
  border: 1px solid #003cff !important;
  color: black;
  text-align: center !important;
  margin-right: 1rem;
}

.stance {
  margin-top: 2vh;
  font-size: 0.7rem;
  font-weight: 100;
  margin-bottom: 1vh;
  color: #949494;
}

.stance h4{
  font-weight: 100;
}

.stats-container-1{
  color: white;
  margin-left: 3vh;
}

.stats-containers{
  /* padding: 0vh 5vh 1vh 6vh; */
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  margin-top: 2vh;
  /* flex-direction: row; */
}

/* iPhone 14 Pro and similar sizes (376px to 430px) */
@media (max-width: 430px) and (min-width: 376px) {
  #results {
    margin-top: 9.1vh;
  }
}

/* iPhone SE (361px to 375px) */
@media (max-width: 375px) and (min-width: 361px) {
  #results {
    margin-top: 12vh;
  }
  
  .container-quiz-page {
    margin-top: 17vh;
  }
  
  #quiz-container {
    margin-top: 17vh;
  }
}

/* Smallest screens (360px and below) */
@media (max-width: 360px) {
  #results {
    margin-top: 10vh;
  }
}