/* ============================================================================
   WPForms Override - Dark Theme Integration
   Restyles WPForms Lite default (light) form fields to match the
   Atera Analytics dark navy / cyan-purple gradient design.
   ============================================================================ */

.wpforms-container {
  max-width: 100%;
  margin: 0 0 1rem 0;
}

.wpforms-container .wpforms-form {
  background: transparent;
}

/* Field labels */
.wpforms-container .wpforms-field-label {
  color: var(--text-white, #ffffff);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.wpforms-container .wpforms-field-sublabel {
  color: var(--text-gray, #b0b0b0);
}

.wpforms-container .wpforms-field-required {
  color: var(--primary-cyan, #00d4ff);
}

/* Field wrapper spacing */
.wpforms-container .wpforms-field {
  padding: 0 0 1.25rem 0;
}

/* Inputs, textareas, selects */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=url],
.wpforms-container input[type=number],
.wpforms-container textarea,
.wpforms-container select {
  width: 100%;
  background: var(--bg-navy, #16213e) !important;
  border: 2px solid var(--bg-slate, #2d3561) !important;
  border-radius: 8px !important;
  color: var(--text-white, #ffffff) !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
  color: var(--text-gray, #b0b0b0);
  opacity: 0.7;
}

.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=tel]:focus,
.wpforms-container input[type=url]:focus,
.wpforms-container input[type=number]:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  border-color: var(--primary-cyan, #00d4ff) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
  outline: none;
}

/* Select dropdown arrow visibility on dark background */
.wpforms-container select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px !important;
  padding-right: 40px !important;
}

.wpforms-container select option {
  background: var(--bg-navy, #16213e);
  color: var(--text-white, #ffffff);
}

/* Submit button */
.wpforms-container .wpforms-submit-container {
  margin-top: 0.5rem;
}

.wpforms-container button[type=submit],
.wpforms-container .wpforms-submit {
  display: inline-block;
  width: 100%;
  padding: 15px 35px !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer;
  background: var(--gradient-primary, linear-gradient(135deg, #00d4ff 0%, #7c4dff 100%)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
}

.wpforms-container button[type=submit]:hover,
.wpforms-container .wpforms-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.45);
}

/* Validation errors */
.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error {
  color: var(--accent-red, #ff5252) !important;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field textarea.wpforms-error,
.wpforms-container .wpforms-field select.wpforms-error {
  border-color: var(--accent-red, #ff5252) !important;
}

/* Confirmation / success message */
.wpforms-container .wpforms-confirmation-container,
.wpforms-confirmation-container-full {
  background: var(--bg-navy, #16213e) !important;
  border: 2px solid var(--accent-green, #00ff88) !important;
  border-radius: 12px;
  color: var(--text-white, #ffffff) !important;
  padding: 2rem !important;
}

.wpforms-container .wpforms-confirmation-container a {
  color: var(--primary-cyan, #00d4ff);
}

/* Checkbox / radio items */
.wpforms-container .wpforms-field-checkbox ul li label,
.wpforms-container .wpforms-field-radio ul li label,
.wpforms-container .wpforms-field-gdpr-checkbox ul li label {
  color: var(--text-light, #e0e0e0) !important;
}