/* ═══════════════════════════════════════════════════════════════════════════
   DeedGate — Fluent Forms + Static Fallback Form Styling
   Matches the v3 design system: Markazi/Vazirmatn + terracotta accent +
   warm beige bg + 6/10px radii. Loads after main.css and before the
   plugin's own stylesheet, so we use !important on the bits the plugin
   would otherwise overwrite.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.dg-contact-form {
  font-family: var(--font-body);
  color: var(--ink);
}

/* ──────────────────────────────────────────────────────────────────────────
   Fluent Forms — actual plugin output overrides
   ────────────────────────────────────────────────────────────────────────── */

/* Reset FF's inline fieldset styles + spacing between groups */
.dg-contact-form .frm-fluent-form,
.dg-contact-form .fluentform { background: transparent; padding: 0; }
.dg-contact-form .frm-fluent-form fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-inline-size: auto !important;
}
.dg-contact-form .ff-el-group {
  margin: 0 0 16px !important;
}
.dg-contact-form .ff-el-group:last-of-type { margin-bottom: 0 !important; }

/* Form rows use our body font */
.dg-contact-form .ff-el-form-control,
.dg-contact-form .ff-el-input--label label,
.dg-contact-form .ff-t-cell,
.dg-contact-form button[type="submit"] {
  font-family: var(--font-body) !important;
}

/* Labels */
.dg-contact-form .ff-el-input--label label,
.dg-contact-form label.ff-el-input--label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

/* Required asterisk — terracotta */
.dg-contact-form .ff-el-is-required label::after,
.dg-contact-form .asterisk-right label::after {
  color: var(--accent) !important;
  margin-inline-start: 4px;
}

/* Inputs / textareas / selects */
.dg-contact-form .ff-el-form-control,
.dg-contact-form input[type="text"],
.dg-contact-form input[type="email"],
.dg-contact-form input[type="tel"],
.dg-contact-form input[type="number"],
.dg-contact-form input[type="url"],
.dg-contact-form input[type="password"],
.dg-contact-form input[type="search"],
.dg-contact-form select,
.dg-contact-form textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
  box-shadow: none !important;
  height: auto !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.dg-contact-form textarea {
  min-height: 110px !important;
  resize: vertical !important;
}

/* Select caret */
.dg-contact-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(20,20,30,.45)' d='M0 0h10L5 6z'/></svg>") !important;
  background-repeat: no-repeat !important;
  padding-inline-end: 32px !important;
}
[dir="rtl"] .dg-contact-form select { background-position: left 12px center !important; }
[dir="ltr"] .dg-contact-form select { background-position: right 12px center !important; }

/* Placeholders */
.dg-contact-form ::placeholder { color: var(--ink-soft) !important; opacity: 1; }
.dg-contact-form :-ms-input-placeholder { color: var(--ink-soft) !important; }

/* Focus state — terracotta ring */
.dg-contact-form .ff-el-form-control:focus,
.dg-contact-form input:focus,
.dg-contact-form select:focus,
.dg-contact-form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Submit button — terracotta, full-width on mobile/sidebars */
.dg-contact-form .ff-btn,
.dg-contact-form .ff-btn-submit,
.dg-contact-form .ff_btn_style,
.dg-contact-form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 13px 28px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(184, 91, 58, 0.18) !important;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease), box-shadow 0.25s var(--ease) !important;
  text-decoration: none !important;
}

.dg-contact-form .ff-btn:hover,
.dg-contact-form .ff-btn-submit:hover,
.dg-contact-form .ff_btn_style:hover,
.dg-contact-form button[type="submit"]:hover {
  background: var(--accent-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(184, 91, 58, 0.25) !important;
}

.dg-contact-form .ff-btn:focus-visible,
.dg-contact-form .ff-btn-submit:focus-visible,
.dg-contact-form button[type="submit"]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

.dg-contact-form .ff_submit_btn_wrapper {
  margin-top: 8px !important;
  text-align: start !important;
}

/* Validation / errors */
.dg-contact-form .ff-el-is-error .ff-el-form-control,
.dg-contact-form .ff-el-form-control.error {
  border-color: var(--danger) !important;
  background: var(--danger-soft) !important;
}
.dg-contact-form .error_msg,
.dg-contact-form .ff-el-form-check-label.error_msg,
.dg-contact-form .text-danger,
.dg-contact-form .ff-el-input--label .ff-el-message {
  color: var(--danger) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  display: block !important;
}

/* Success message after submission */
.dg-contact-form .ff-message-success,
.ff-message-success {
  background: var(--success-soft) !important;
  border: 1px solid rgba(77, 150, 112, 0.35) !important;
  color: #2c5b3f !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Errors stack */
.dg-contact-form .ff-errors-in-stack,
.ff-errors-in-stack {
  background: var(--danger-soft) !important;
  border: 1px solid rgba(196, 75, 61, 0.35) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  color: var(--danger) !important;
  font-size: 13px !important;
  margin-top: 10px !important;
}
.dg-contact-form .ff-errors-in-stack:empty { display: none !important; }

/* Checkbox / radio groups */
.dg-contact-form .ff-el-form-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
}
.dg-contact-form .ff-el-form-check input[type="checkbox"],
.dg-contact-form .ff-el-form-check input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--accent) !important;
  cursor: pointer !important;
  flex: none !important;
}
.dg-contact-form .ff-el-form-check-label {
  font-size: 13px !important;
  color: var(--ink-mute) !important;
  cursor: pointer !important;
}

/* Help text */
.dg-contact-form .ff-el-help-message,
.dg-contact-form .ff-help-text {
  font-size: 12px !important;
  color: var(--ink-mute) !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

/* Loading state — keep things subtle, don't blank the form */
.dg-contact-form .frm-fluent-form.ff-form-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Multi-column rows (when form uses 2 cols) */
.dg-contact-form .ff-t-cell { padding-inline: 6px !important; }
.dg-contact-form .ff-t-container { margin-inline: -6px !important; }

/* Compact variant (sidebars: inside .inquiry-card on single project / unit / dev) */
.dg-contact-form--compact .ff-el-group { margin: 0 0 12px !important; }
.dg-contact-form--compact .ff-el-form-control,
.dg-contact-form--compact input,
.dg-contact-form--compact select,
.dg-contact-form--compact textarea {
  padding: 9px 12px !important;
  font-size: 13px !important;
}
.dg-contact-form--compact textarea { min-height: 84px !important; }
.dg-contact-form--compact .ff-btn,
.dg-contact-form--compact .ff-btn-submit,
.dg-contact-form--compact button[type="submit"] {
  padding: 11px 20px !important;
  font-size: 14px !important;
}
.dg-contact-form--compact .ff-el-input--label label { font-size: 12px !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Static Fallback Form (when Fluent Forms not active or ID not set)
   ────────────────────────────────────────────────────────────────────────── */

.dg-form-fallback {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dg-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .dg-form-grid { grid-template-columns: 1fr; }
}

.dg-form-field { display: flex; flex-direction: column; }

.dg-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.dg-form-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.dg-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dg-form-textarea { min-height: 110px; resize: vertical; }

.dg-form-submit {
  align-self: stretch;
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}

.dg-contact-form--compact .dg-form-submit {
  width: 100%;
  justify-content: center;
}

.dg-form-note {
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 10px;
}

.dg-form-admin-notice {
  margin-top: 24px;
  padding: 12px 16px;
  background: var(--warn-soft);
  border: 1px solid rgba(201, 160, 75, 0.4);
  border-radius: var(--radius-sm);
  color: #806029;
  font-size: 13px;
  line-height: 1.6;
}

.dg-form-admin-notice code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}