/* Optimized options styling for the 16 Personalities Test */

/* Options container */
.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 25px 0;
}

/* Individual option label - styled as clickable card */
.option-label {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Hover effect */
.option-label:hover {
  background: #f1f3f5;
  border-color: #ced4da;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}

/* Selected state */
.option-label input[type="radio"]:checked + *,
.option-label:has(input[type="radio"]:checked) {
  background: #e7f5ff;
  border-color: #339af0;
  box-shadow: 0 0 0 3px rgba(51, 154, 240, 0.15);
}

/* Hide default radio button */
.option-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid #ced4da;
  border-radius: 50%;
  margin-right: 14px;
  position: relative;
  transition: all 0.2s ease;
  background: white;
  cursor: pointer;
}

/* Custom radio - checked state */
.option-label input[type="radio"]:checked {
  border-color: #339af0;
  background: #339af0;
  box-shadow: 0 0 0 3px rgba(51, 154, 240, 0.2);
}

/* Custom radio - inner dot */
.option-label input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

/* Radio focus state */
.option-label input[type="radio"]:focus-visible {
  outline: 2px solid #339af0;
  outline-offset: 2px;
}

/* Text next to radio button */
.option-label .option-text {
  flex: 1;
  color: #212529;
  font-weight: 500;
}

/* Alternative styling - if text is directly inside label */
.option-label:not(:has(.option-text)) {
  /* The option text is directly in the label */
}

/* Make the label text more readable */
.option-label {
  color: #212529;
  font-weight: 500;
}

/* Hover state for the radio itself */
.option-label input[type="radio"]:hover {
  border-color: #339af0;
}

/* Selected option text color */
.option-label:has(input[type="radio"]:checked) {
  color: #1c7ed6;
}

/* Question container spacing */
.question-item {
  background: white;
  padding: 20px 0;
}

.question-item p {
  margin-bottom: 8px;
}

.question-item p strong {
  color: #495057;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 8px;
}

.question-item > p:last-of-type {
  font-size: 1.15rem;
  font-weight: 500;
  color: #212529;
  margin-bottom: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .option-label {
    padding: 14px 16px;
    font-size: 0.95rem;
  }
  
  .option-label input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-right: 12px;
  }
  
  .question-item > p:last-of-type {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .option-label {
    padding: 12px 14px;
    font-size: 0.9rem;
    border-radius: 10px;
  }
  
  .option-label input[type="radio"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-right: 10px;
  }
}

/* Animation for option selection */
.option-label {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-label:active {
  transform: scale(0.98);
}

/* Disabled state (if needed) */
.option-label input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Accessibility: high contrast focus */
.option-label input[type="radio"]:focus-visible {
  outline: 3px solid #1c7ed6;
  outline-offset: 2px;
}

/* Ensure text wraps properly */
.option-label {
  word-break: break-word;
}

/* Optional: Add a subtle indicator for selected state */
.option-label:has(input[type="radio"]:checked)::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 10%;
  height: 80%;
  width: 4px;
  background: #339af0;
  border-radius: 0 4px 4px 0;
}

/* Question container padding */
#question-container {
  padding: 10px 0;
}

/* Progress bar styling to match */
.progress-container {
  margin-bottom: 25px;
}

.progress-bar {
  height: 6px;
  background: #339af0;
  border-radius: 3px;
  transition: width 0.4s ease;
}