/* ======================================================
 * Dynamic Form – Frontend Styles
 * CSS Variable Driven (Theme / Elementor / Popup Safe)
 * ====================================================== */

/* ======================================================
 * FORM WRAPPER
 * ====================================================== */

.df-form {
  /* Form variables */
  --df-form-bg: #ffffff;
  --df-form-padding: 24px;
  --df-form-margin: 4px;
  --df-form-radius: 6px;
  --df-form-border: none;
  --df-form-border-type: solid;
  --df-form-border-width: 0px;

  --df-form-shadow-x: 0px;
  --df-form-shadow-y: 0px;
  --df-form-shadow-blur: 0px;
  --df-form-shadow-color: transparent;

  --df-field-gap: 16px;
  --df-form-max-width: 100%;

  background: var(--df-form-bg);
  padding: var(--df-form-padding);
  margin: var(--df-form-margin);
  border-radius: var(--df-form-radius);

  border: var(--df-form-border);
  border-style: var(--df-form-border-type);
  border-width: var(--df-form-border-width);

  box-shadow:
    var(--df-form-shadow-x) var(--df-form-shadow-y) var(--df-form-shadow-blur) var(--df-form-shadow-color);

  display: flex;
  flex-wrap: wrap;
  gap: var(--df-field-gap);

  max-width: var(--df-form-max-width);
}

/* ======================================================
 * GLOBAL BOX SIZING
 * ====================================================== */

.df-form,
.df-form * {
  box-sizing: border-box;
}

/* ======================================================
 * FIELD WRAPPER (COMMON)
 * ====================================================== */

.df-form .df-field:not(.df-field-submit) {
  --df-field-bg: transparent;
  --df-field-color: inherit;
  --df-field-padding: 0;
  --df-field-margin: 0;
  --df-field-radius: 4px;

  --df-field-border-color: transparent;
  --df-field-border-width: 0px;

  --df-field-shadow-x: 0px;
  --df-field-shadow-y: 0px;
  --df-field-shadow-blur: 0px;
  --df-field-shadow-color: transparent;

  --df-field-width: 100%;

  background: var(--df-field-bg);
  color: var(--df-field-color);

  padding: var(--df-field-padding);
  margin: var(--df-field-margin);

  border-radius: var(--df-field-radius);

  border-style: solid;
  border-width: var(--df-field-border-width);
  border-color: var(--df-field-border-color);

  box-shadow:
    var(--df-field-shadow-x) var(--df-field-shadow-y) var(--df-field-shadow-blur) var(--df-field-shadow-color);

  width: var(--df-field-width);

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

/* ======================================================
 * LABELS & LEGENDS
 * ====================================================== */

.df-form .df-field label,
.df-form .df-field legend {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--df-label-color, inherit);
}

.df-form .df-required {
  color: var(--df-required-color, #d63638);
  margin-left: 4px;
}

/* ======================================================
 * INPUT BASE
 * ====================================================== */

.df-form .df-input {
  --df-input-bg: #ffffff;
  --df-input-color: #000000;
  --df-input-border-color: #ccd0d4;
  --df-input-focus-border: #b122a3;
  --df-input-error-border: #d63638;
  --df-input-border-radius: 4px;
  --df-input-border-width: 0px;
  --df-input-border-type: solid;
  --df-input-padding: 10px;
  --df-input-font-size: 14px;
  --df-input-margin: 0px;

  width: 100%;
  padding: var(--df-input-padding);
  margin: var(--df-input-margin);
  font-size: var(--df-input-font-size);

  color: var(--df-input-color);
  background: var(--df-input-bg);

  border-radius: var(--df-input-border-radius);
  border-width: var(--df-input-border-width);
  border-style: var(--df-input-border-type);
  border-color: var(--df-input-border-color);

  font-family: inherit;
}

/* Focus */
.df-form .df-input:focus {
  outline: none;
  border-color: var(--df-input-focus-border);
}

/* Focus visible (accessibility) */
.df-form .df-input:focus-visible {
  outline: 2px solid var(--df-input-focus-border);
  outline-offset: 2px;
}

/* Error state */
.df-form .df-field.has-error .df-input {
  border-color: var(--df-input-error-border);
}

/* ======================================================
 * TEXTAREA
 * ====================================================== */

.df-form textarea.df-input {
  resize: vertical;
  min-height: 100px;
}

/* ======================================================
 * SELECT
 * ====================================================== */

.df-form select.df-input {
  appearance: none;
  -webkit-appearance: none;
}

/* ======================================================
 * RADIO & CHECKBOX
 * ====================================================== */

.df-form .df-options {
  border: 1px solid var(--df-input-border-color);
  border-radius: var(--df-input-border-radius);
  padding: 10px;
}

.df-form .df-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
  margin-right: 12px;
  margin-bottom: 6px;
}

.df-form input[type="radio"],
.df-form input[type="checkbox"] {
  accent-color: var(--df-choice-accent, #2271b1);
}

/* ======================================================
 * SUBHEADING
 * ====================================================== */

.df-form .df-subheading {
  --df-subheading-color: inherit;
  --df-subheading-bg: transparent;
  --df-subheading-font-size: 18px;
  --df-subheading-font-weight: 600;
  --df-subheading-line-height: 1.4;
  --df-subheading-padding: 0;
  --df-subheading-margin: 12px 0 6px;
  --df-subheading-align: left;
  --df-subheading-radius: 0;
  --df-subheading-border: none;

  color: var(--df-subheading-color);
  background: var(--df-subheading-bg);
  font-size: var(--df-subheading-font-size);
  font-weight: var(--df-subheading-font-weight);
  line-height: var(--df-subheading-line-height);
  padding: var(--df-subheading-padding);
  margin: var(--df-subheading-margin);
  text-align: var(--df-subheading-align);
  border-radius: var(--df-subheading-radius);
  border: var(--df-subheading-border);
}

/* ======================================================
 * SUBMIT BUTTON
 * ====================================================== */

.df-form .df-field-submit {
  width: 100%;
  display: flex;
  justify-content: var(--df-button-align, center);
}

.df-form .df-submit-btn {
  --df-button-bg: #2271b1;
  --df-button-color: #ffffff;
  --df-button-hover-bg: #135e96;
  --df-button-hover-color: #ffffff;

  --df-button-font-size: 16px;
  --df-button-padding: 10px 22px;
  --df-button-margin: 10px 0;
  --df-button-radius: 4px;
  --df-button-width: 50%;

  --df-button-border-color: transparent;
  --df-button-border-width: 0px;
  --df-button-border-type: solid;

  --df-button-shadow-x: 0px;
  --df-button-shadow-y: 0px;
  --df-button-shadow-blur: 0px;
  --df-button-shadow-color: transparent;

  background: var(--df-button-bg);
  color: var(--df-button-color);
  font-size: var(--df-button-font-size);
  padding: var(--df-button-padding);
  margin: var(--df-button-margin);
  border-radius: var(--df-button-radius);
  width: var(--df-button-width);

  border-width: var(--df-button-border-width);
  border-style: var(--df-button-border-type);
  border-color: var(--df-button-border-color);

  box-shadow:
    var(--df-button-shadow-x) var(--df-button-shadow-y) var(--df-button-shadow-blur) var(--df-button-shadow-color);

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

/* Hover / Focus */
.df-form .df-submit-btn:hover,
.df-form .df-submit-btn:focus {
  background: var(--df-button-hover-bg);
  color: var(--df-button-hover-color);
}

/* ======================================================
 * SUCCESS / ERROR MESSAGES
 * ====================================================== */

.df-form .df-form-message {
  margin-top: 15px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
}

.df-form .df-form-message.success {
  background: var(--df-success-bg, #ecf7ed);
  color: var(--df-success-color, #0a4b14);
}

.df-form .df-form-message.error {
  background: var(--df-error-bg, #fbeaea);
  color: var(--df-error-color, #8a1f11);
}

/* ======================================================
 * PREVIEW / EDITOR STATES (Admin / Elementor)
 * ====================================================== */

.df-preview-form .df-field:hover {
  outline: 2px dashed #2271b1;
}

.df-preview-form .df-field.is-active {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

/* ======================================================
 * RESPONSIVE SAFETY
 * ====================================================== */

@media (max-width: 768px) {
  .df-form .df-field {
    --df-field-width: 100%;
  }
}