/*
 * Fluent Forms — Dark Theme Styles for Speck Creations
 *
 * HOW TO USE:
 * Option A: Paste into Fluent Forms → Global Settings → Custom CSS
 * Option B: Paste into Elementor → Site Settings → Custom CSS
 * Option C: Add to your child theme's style.css
 *
 * These styles target the form when placed inside a container
 * with class .form-card (the dark card wrapper in Elementor).
 * If you're not using .form-card, replace it with your container class.
 */

/* ── BASE FORM RESET ── */
.form-card .fluentform,
.form-card .frm-fluent-form {
  font-family: 'Inter', -apple-system, sans-serif;
}

/* ── LABELS ── */
.form-card .ff-el-input--label label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px !important;
}

/* Required asterisk */
.form-card .ff-el-input--label .ff-el-is-required {
  color: #ef4444 !important;
}

/* ── INPUT FIELDS ── */
.form-card .ff-el-form-control,
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card input[type="url"],
.form-card input[type="number"],
.form-card select,
.form-card textarea {
  background: #09090b !important;
  border: 1px solid #1e1e24 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #f8fafc !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  -webkit-appearance: none;
}

/* Placeholder text */
.form-card .ff-el-form-control::placeholder,
.form-card input::placeholder,
.form-card textarea::placeholder {
  color: #334155 !important;
}

/* Hover state */
.form-card .ff-el-form-control:hover,
.form-card input:hover,
.form-card select:hover,
.form-card textarea:hover {
  border-color: #2a2a32 !important;
}

/* Focus state — blue ring */
.form-card .ff-el-form-control:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.08) !important;
}

/* Select dropdown arrow */
.form-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  cursor: pointer;
}

/* Select option styling (limited browser support) */
.form-card select option {
  background: #16161a;
  color: #f8fafc;
}

/* Textarea */
.form-card textarea {
  resize: vertical;
  min-height: 100px !important;
}

/* ── RADIO BUTTONS AS BUDGET CHIPS ── */
.form-card .ff-el-group.ff-budget-row .ff-el-form-check {
  display: inline-flex;
  margin: 0 !important;
}

.form-card .ff-el-group.ff-budget-row .ff_list_inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.form-card .ff-el-group.ff-budget-row .ff-el-form-check input[type="radio"] {
  display: none !important;
}

.form-card .ff-el-group.ff-budget-row .ff-el-form-check label {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  background: #09090b !important;
  border: 1px solid #1e1e24 !important;
  color: #64748b !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  user-select: none;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.form-card .ff-el-group.ff-budget-row .ff-el-form-check label:hover {
  border-color: rgba(59,130,246,0.2) !important;
  color: #f8fafc !important;
}

.form-card .ff-el-group.ff-budget-row .ff-el-form-check input[type="radio"]:checked + label,
.form-card .ff-el-group.ff-budget-row .ff-el-form-check input[type="radio"]:checked + span {
  background: rgba(59,130,246,0.08) !important;
  border-color: rgba(59,130,246,0.2) !important;
  color: #3b82f6 !important;
  font-weight: 600 !important;
}

/* ── SUBMIT BUTTON ── */
.form-card .ff-btn-submit,
.form-card button[type="submit"] {
  width: 100% !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 28px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  margin-top: 20px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-card .ff-btn-submit:hover,
.form-card button[type="submit"]:hover {
  background: #60a5fa !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(59,130,246,0.3) !important;
}

/* ── VALIDATION ERRORS ── */
.form-card .ff-el-is-error .ff-el-form-control,
.form-card .ff-el-is-error input,
.form-card .ff-el-is-error select,
.form-card .ff-el-is-error textarea {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.08) !important;
}

.form-card .error.text-danger,
.form-card .ff-el-is-error .error {
  color: #ef4444 !important;
  font-size: 12px !important;
  margin-top: 4px;
}

/* ── SUCCESS MESSAGE ── */
.form-card .ff-message-success {
  background: rgba(34,197,94,0.08) !important;
  border: 1px solid rgba(34,197,94,0.2) !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  padding: 24px !important;
  font-size: 15px !important;
  text-align: center;
}

/* ── SPACING & LAYOUT ── */
.form-card .ff-el-group {
  margin-bottom: 12px !important;
}

.form-card .ff-t-container {
  gap: 12px;
}

/* Two-column row gap */
.form-card .ff-t-cell {
  padding: 0 6px !important;
}

/* ── LOADING / SPINNER ── */
.form-card .ff-loading-overlay {
  background: rgba(9,9,11,0.8) !important;
}

.form-card .ff-loading-overlay .ff-loading-text {
  color: #f8fafc !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .form-card .ff-t-container {
    flex-direction: column !important;
  }
  .form-card .ff-t-cell {
    width: 100% !important;
    padding: 0 !important;
  }
  .form-card .ff-el-group.ff-budget-row .ff_list_inline {
    gap: 6px;
  }
  .form-card .ff-el-group.ff-budget-row .ff-el-form-check label {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}