/**
 * Fluent Forms Override Stylesheet for Opening Young Minds.
 * Matches the visual design system of the contact form.
 */

/* Label Styling */
.fluentform .ff-el-form-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--quiet) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}

/* Form Controls Base Style */
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform select,
.fluentform textarea {
  font-family: 'Inter', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  color: var(--body) !important;
  background: var(--page) !important;
  border: 1.5px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  transition: border-color .18s, box-shadow .18s, background .18s !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  height: auto !important;
}

/* Placeholder Styling */
.fluentform ::placeholder {
  color: var(--faint) !important;
  opacity: 1 !important;
}

/* Focus States */
.fluentform .ff-el-form-control:focus,
.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(26,122,110,.10) !important;
  background: var(--white) !important;
}

/* Hover States (not focused) */
.fluentform .ff-el-form-control:hover:not(:focus),
.fluentform input[type="text"]:hover:not(:focus),
.fluentform input[type="email"]:hover:not(:focus),
.fluentform select:hover:not(:focus),
.fluentform textarea:hover:not(:focus) {
  border-color: #B8CEDF !important;
}

/* Select Field Custom Dropdown Arrow */
.fluentform select {
  padding-right: 40px !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234D6170' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
}

/* Textarea Comfort Height */
.fluentform textarea {
  resize: vertical !important;
  min-height: 148px !important;
  line-height: 1.72 !important;
}

/* Form Submit Button (Teal fill, Inter bold) */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform .ff_btn_submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 14px 34px !important;
  border-radius: 6px !important;
  letter-spacing: .01em !important;
  border: none !important;
  background: var(--teal) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background .18s, color .18s, border-color .18s !important;
  width: auto !important;
  box-shadow: none !important;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover,
.fluentform .ff_btn_submit:hover {
  background: var(--teal-dk) !important;
  color: #fff !important;
}

/* Layout spacing */
.fluentform .ff-el-group {
  margin-bottom: 22px !important;
}

/* Validation Errors styling */
.fluentform .text-danger,
.fluentform .error,
.fluentform .ff-errors-in-stack {
  color: #D32F2F !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}

.fluentform .ff-el-form-control.error,
.fluentform input.error,
.fluentform textarea.error {
  border-color: #D32F2F !important;
}

/* Success Message styling */
.fluentform_wrapper .ff-message-success {
  background: var(--teal-lt) !important;
  border: 1px solid rgba(26,122,110,.20) !important;
  color: var(--teal-dk) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

/* Form Container padding adjustment */
.fluentform_wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Grid layout overrides to match cf-grid */
.fluentform .ff-t-container {
  padding: 0 !important;
}
.fluentform .ff-t-row {
  margin: 0 !important;
}
.fluentform .ff-t-cell {
  padding: 0 !important;
}

@media (max-width: 640px) {
  .fluentform .ff-btn-submit,
  .fluentform button[type="submit"],
  .fluentform .ff_btn_submit {
    width: 100% !important;
  }
}