/* Feature Advisor Styles */

:root {
  --fa-primary-color: #4a6bdf;
  --fa-secondary-color: #f7f9fc;
  --fa-text-color: #333333;
  --fa-border-radius: 4px;
  --fa-font-family: inherit;
  --fa-button-bg: #4a6bdf;
  --fa-button-text: white;
  --fa-border-color: #e1e4e8;
  --fa-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --fa-spacing: 20px;
}

feature-advisor {
  display: block;
  font-family: var(--fa-font-family);
  color: var(--fa-text-color);
  max-width: 800px;
  margin: 0 auto;
}

.feature-advisor {
  border-radius: var(--fa-border-radius);
  border: 1px solid var(--fa-border-color);
  box-shadow: var(--fa-box-shadow);
  padding: var(--fa-spacing);
  background-color: white;
}

/* Loading and Error States */
.fa-loading, 
.fa-error {
  padding: var(--fa-spacing);
  text-align: center;
}

.fa-error {
  color: #d73a49;
}

/* Questionnaire */
.fa-questionnaire h2,
.fa-results h2 {
  margin-top: 0;
  margin-bottom: var(--fa-spacing);
  color: var(--fa-primary-color);
}

.fa-progress {
  text-align: right;
  margin-bottom: var(--fa-spacing);
  font-size: 0.9em;
  color: #666;
}

.fa-question {
  margin-bottom: var(--fa-spacing);
}

.fa-question h3 {
  margin-bottom: 10px;
}

/* Options */
.fa-options {
  margin-bottom: 15px;
}

.fa-option {
  padding: 12px 15px;
  margin-bottom: 8px;
  border: 1px solid var(--fa-border-color);
  border-radius: var(--fa-border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fa-option:hover {
  background-color: var(--fa-secondary-color);
}

.fa-option.selected {
  background-color: var(--fa-primary-color);
  color: white;
  border-color: var(--fa-primary-color);
}

/* Actions */
.fa-actions {
  margin-top: var(--fa-spacing);
  text-align: right;
}

.fa-button {
  background-color: var(--fa-button-bg);
  color: var(--fa-button-text);
  border: none;
  border-radius: var(--fa-border-radius);
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fa-button:hover {
  opacity: 0.9;
}

.fa-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Results */
.fa-recommendations {
  margin-bottom: var(--fa-spacing);
}

.fa-recommendation {
  margin-bottom: 15px;
  padding: 15px;
  background-color: var(--fa-secondary-color);
  border-radius: var(--fa-border-radius);
}

.fa-recommendation h3 {
  margin-top: 0;
  color: var(--fa-primary-color);
}

.fa-no-recommendations {
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: var(--fa-border-radius);
  text-align: center;
}

/* Email Capture */
.fa-email-capture {
  margin-bottom: var(--fa-spacing);
}

.fa-email-capture label {
  display: block;
  margin-bottom: 5px;
}

.fa-email-capture input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--fa-border-color);
  border-radius: var(--fa-border-radius);
  font-size: 1em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .feature-advisor {
    padding: 15px;
  }
  
  .fa-actions {
    text-align: center;
  }
  
  .fa-button {
    width: 100%;
  }
}