/* =============================================
   CompLogix "What's your challenge?" recommender

   Ported from the Divi Theme Options custom CSS block that styled Gravity
   Forms form 7 (.clx-challenge-form .gfield ...). Those selectors depended on
   Gravity Forms markup, so they die with the plugin. Values here are carried
   over unchanged so the widget is visually identical.

   Lives on a dark section, hence the white labels.

   A few declarations keep !important because Divi's global button and select
   styling is aggressive and would otherwise win on specificity.
   ============================================= */

.clx-quiz {
  max-width: 500px;
}

.clx-quiz-field {
  margin-bottom: 20px;
}

.clx-quiz-label {
  display: block;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.clx-quiz-select {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  color: #333333;
  background-color: #ffffff;
  border: none;
  border-radius: 0;
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
  height: auto;
  line-height: 1.5;
}

.clx-quiz-select:focus {
  outline: 2px solid #0082ca;
  box-shadow: none;
}

/* Set only when a required answer is missing on submit. */
.clx-quiz-select.clx-quiz-invalid {
  outline: 2px solid #ffffff;
}

.clx-quiz-microcopy {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-style: italic;
  margin-top: -8px;
  margin-bottom: 16px;
}

.clx-quiz-btn {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff !important;
  background-color: #0082ca !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 40px !important;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
  margin-top: 10px;
}

.clx-quiz-btn:hover,
.clx-quiz-btn:focus {
  background-color: #77bc1f !important;
}

/* Mirrors the old .gform_validation_errors treatment. */
.clx-quiz-error {
  display: none;
  color: #ffffff;
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px;
  margin-top: 12px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
}

.clx-quiz-error.clx-visible {
  display: block;
}