/* =====================================================
   Demo Request Form - Radio/Checkbox/Scale
   ===================================================== */

/* Radio Button Group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.radio-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}

.radio-label:hover {
  background: var(--color-white);
  border-color: var(--color-teal);
}

.radio-label input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-teal);
  cursor: pointer;
}

.radio-label span {
  color: var(--color-deep-teal);
  font-weight: 500;
}

.radio-label:has(input:checked) {
  background: var(--color-white);
  border-color: var(--color-teal);
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}

.checkbox-label:hover {
  background: var(--color-white);
  border-color: var(--color-teal);
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-teal);
  cursor: pointer;
}

.checkbox-label span {
  color: var(--color-deep-teal);
  font-weight: 500;
}

.checkbox-label:has(input:checked) {
  background: var(--color-white);
  border-color: var(--color-teal);
}

/* Scale Group (1-5 rating) */
.scale-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.scale-label {
  font-size: 0.875rem;
  color: var(--color-white);
  opacity: 0.8;
  min-width: 80px;
}

.scale-label:first-child {
  text-align: right;
}

.scale-label:last-child {
  text-align: left;
}

.scale-options {
  display: flex;
  gap: var(--spacing-xs);
}

.scale-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.scale-option input[type="radio"] {
  width: 24px;
  height: 24px;
  accent-color: var(--color-teal);
  cursor: pointer;
}

.scale-option span {
  font-size: 0.875rem;
  color: var(--color-white);
  margin-top: 0.25rem;
}

@media (max-width: 600px) {
  .scale-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .scale-label {
    text-align: left !important;
  }

  .scale-options {
    width: 100%;
    justify-content: space-between;
  }
}