/* ==========================================================
   SUREFORMS × BLOOPIN
========================================================== */

.wp-block-sureforms-form,
.srfm-form,
.sureforms-form,
form[class*="sureforms"],
form[class*="srfm"]{
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif !important;
}

.wp-block-sureforms-form *,
.srfm-form *,
.sureforms-form *,
form[class*="sureforms"] *,
form[class*="srfm"] *{
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif !important;
}

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

.bp-modal__form{
  margin-top: 24px;
}

.bp-modal__form .wp-block-sureforms-form,
.bp-modal__form .srfm-form,
.bp-modal__form .sureforms-form,
.bp-modal__form form[class*="sureforms"],
.bp-modal__form form[class*="srfm"]{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   LABELS
========================================================== */

.srfm-form label,
.srfm-form .srfm-label,
.srfm-form .srfm-field-label,
.wp-block-sureforms-form label,
.wp-block-sureforms-form .srfm-label,
.wp-block-sureforms-form .srfm-field-label{
  margin-bottom: 8px !important;
  color: var(--text, #111827) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* ==========================================================
   FIELDS
========================================================== */

.srfm-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.srfm-form textarea,
.srfm-form select,
.srfm-form .srfm-input,
.srfm-form .srfm-input-common,
.srfm-form .srfm-input-number,
.srfm-form .srfm-textarea,
.srfm-form .srfm-select,
.wp-block-sureforms-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wp-block-sureforms-form textarea,
.wp-block-sureforms-form select,
.wp-block-sureforms-form .srfm-input,
.wp-block-sureforms-form .srfm-input-common,
.wp-block-sureforms-form .srfm-input-number,
.wp-block-sureforms-form .srfm-textarea,
.wp-block-sureforms-form .srfm-select{
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 16px !important;

  color: var(--text, #111827) !important;
  background: var(--surface, #ffffff) !important;

  border: 2px solid var(--border, rgba(17, 24, 39, 0.12)) !important;
  border-radius: var(--radius-sm, 14px) !important;

  box-shadow: none !important;
  outline: none !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease !important;
}

.srfm-form textarea,
.wp-block-sureforms-form textarea{
  min-height: 120px !important;
  resize: vertical;
}

.srfm-form input::placeholder,
.srfm-form textarea::placeholder,
.wp-block-sureforms-form input::placeholder,
.wp-block-sureforms-form textarea::placeholder{
  color: var(--text-soft, #667085) !important;
  opacity: .72 !important;
  font-weight: 400 !important;
}

/* ==========================================================
   FOCUS
========================================================== */

.srfm-form input:focus,
.srfm-form textarea:focus,
.srfm-form select:focus,
.srfm-form .srfm-input-common:focus,
.wp-block-sureforms-form input:focus,
.wp-block-sureforms-form textarea:focus,
.wp-block-sureforms-form select:focus,
.wp-block-sureforms-form .srfm-input-common:focus{
  background: var(--surface, #ffffff) !important;
  border-color: var(--primary, #22a1ee) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #22a1ee) 12%, transparent) !important;
}

/* ==========================================================
   FIELD SPACING
========================================================== */

.srfm-form .srfm-field,
.srfm-form .srfm-form-field,
.srfm-form .sureforms-field,
.srfm-form .wp-block-sureforms-field,
.srfm-form .srfm-block-wrap,
.wp-block-sureforms-form .srfm-field,
.wp-block-sureforms-form .srfm-form-field,
.wp-block-sureforms-form .sureforms-field,
.wp-block-sureforms-form .wp-block-sureforms-field,
.wp-block-sureforms-form .srfm-block-wrap{
  margin-bottom: 16px !important;
}

/* ==========================================================
   ERRORS
========================================================== */

.srfm-form .srfm-error,
.srfm-form .srfm-error-message,
.srfm-form .sureforms-error,
.wp-block-sureforms-form .srfm-error,
.wp-block-sureforms-form .srfm-error-message,
.wp-block-sureforms-form .sureforms-error{
  margin-top: 7px !important;
  padding: 0 !important;
  color: #dc2626 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ==========================================================
   MESSAGES
========================================================== */

.srfm-form .srfm-message,
.srfm-form .srfm-success,
.srfm-form .sureforms-message,
.wp-block-sureforms-form .srfm-message,
.wp-block-sureforms-form .srfm-success,
.wp-block-sureforms-form .sureforms-message{
  margin-bottom: 18px !important;
  padding: 14px 16px !important;

  color: var(--text, #111827) !important;
  background: var(--surface-soft, #f8fafc) !important;

  border: 1px solid var(--border, rgba(17, 24, 39, 0.12)) !important;
  border-radius: var(--radius-md, 18px) !important;
  box-shadow: var(--shadow-sm, 0 8px 20px rgba(15, 23, 42, 0.08)) !important;
}

/* ==========================================================
   BUTTONS
========================================================== */

.srfm-form button,
.srfm-form input[type="submit"],
.srfm-form .srfm-submit-button,
.srfm-form .srfm-button,
.wp-block-sureforms-form button,
.wp-block-sureforms-form input[type="submit"],
.wp-block-sureforms-form .srfm-submit-button,
.wp-block-sureforms-form .srfm-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 50px !important;
  padding: 14px 24px !important;

  color: #fff !important;
  background: var(--text, #111827) !important;
  border: 3px solid var(--text, #111827) !important;
  border-radius: 14px !important;

  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;

  box-shadow: var(--shadow-sm, 0 8px 20px rgba(15, 23, 42, 0.08)) !important;
  cursor: pointer !important;

  transition:
    transform .18s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    color .2s ease !important;
}

.srfm-form button:hover,
.srfm-form input[type="submit"]:hover,
.srfm-form .srfm-submit-button:hover,
.srfm-form .srfm-button:hover,
.wp-block-sureforms-form button:hover,
.wp-block-sureforms-form input[type="submit"]:hover,
.wp-block-sureforms-form .srfm-submit-button:hover,
.wp-block-sureforms-form .srfm-button:hover{
  background: #020617 !important;
  border-color: #020617 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(34, 161, 238, 0.12),
    0 0 0 2px color-mix(in srgb, var(--accent, #22a1ee) 25%, transparent) !important;
}

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

.srfm-form input[type="checkbox"],
.srfm-form input[type="radio"],
.wp-block-sureforms-form input[type="checkbox"],
.wp-block-sureforms-form input[type="radio"]{
  width: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  accent-color: var(--primary, #22a1ee);
}

/* ==========================================================
   VALIDATION STATE
========================================================== */

/* Champ actif = bleu */
.srfm-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.srfm-form textarea:focus,
.srfm-form select:focus,
.wp-block-sureforms-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.wp-block-sureforms-form textarea:focus,
.wp-block-sureforms-form select:focus{
  background: var(--surface, #ffffff) !important;
  border-color: var(--primary, #22a1ee) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #22a1ee) 12%, transparent) !important;
}

/* Champ obligatoire touché puis laissé vide = rouge */
.srfm-form input:user-invalid:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.srfm-form textarea:user-invalid,
.srfm-form select:user-invalid,
.wp-block-sureforms-form input:user-invalid:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wp-block-sureforms-form textarea:user-invalid,
.wp-block-sureforms-form select:user-invalid{
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, .035) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}

/* Si le champ rouge est recliqué, il repasse bleu pendant la saisie */
.srfm-form input:user-invalid:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.srfm-form textarea:user-invalid:focus,
.srfm-form select:user-invalid:focus,
.wp-block-sureforms-form input:user-invalid:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wp-block-sureforms-form textarea:user-invalid:focus,
.wp-block-sureforms-form select:user-invalid:focus{
  border-color: var(--primary, #22a1ee) !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #22a1ee) 12%, transparent) !important;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px){
  .srfm-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .srfm-form textarea,
  .srfm-form select,
  .srfm-form .srfm-input-common,
  .wp-block-sureforms-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .wp-block-sureforms-form textarea,
  .wp-block-sureforms-form select,
  .wp-block-sureforms-form .srfm-input-common{
    min-height: 50px !important;
    font-size: 14px !important;
  }

  .srfm-form button,
  .srfm-form input[type="submit"],
  .srfm-form .srfm-submit-button,
  .srfm-form .srfm-button,
  .wp-block-sureforms-form button,
  .wp-block-sureforms-form input[type="submit"],
  .wp-block-sureforms-form .srfm-submit-button,
  .wp-block-sureforms-form .srfm-button{
    width: 100% !important;
  }
}