/* ==========================================================================
   RP IT Solutions — Contact page enquiry form (Forminator)
   wp-content/themes/divi-child/assets/css/forminator-contact.css

   BEFORE YOU USE IT: replace every 1186 with your new form's ID.
   (Forminator → Forms → the shortcode shows it: [forminator_form id="1186"])

   The white panel, 40px padding and 4px corners are set on the DIVI COLUMN,
   so this file only styles what is inside the form.
   ========================================================================== */

#forminator-module-1186.forminator-custom-form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  color: #1C1917;
}

/* --- 18px ↕ vertical between fields --------------------------------------- */
#forminator-module-1186 .forminator-row {
  margin-bottom: 18px !important;
}
#forminator-module-1186 .forminator-row:last-child {
  margin-bottom: 0 !important;
}

/* --- label above input, 6px ↕ vertical ----------------------------------- */
#forminator-module-1186 .forminator-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#forminator-module-1186 .forminator-label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #1C1917 !important;
}
#forminator-module-1186 .forminator-required {
  color: #C2410C !important;
}

/* --- text inputs and textarea ------------------------------------------- */
#forminator-module-1186 input.forminator-input,
#forminator-module-1186 textarea.forminator-textarea {
  width: 100% !important;
  height: 46px !important;
  padding: 0 12px !important;
  border: 1px solid #A8A29E !important;
  border-radius: 2px !important;
  background: #FFFFFF !important;
  color: #1C1917 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
#forminator-module-1186 textarea.forminator-textarea {
  height: auto !important;
  min-height: 140px !important;
  padding: 10px 12px !important;
  resize: vertical;
}
#forminator-module-1186 input.forminator-input:focus,
#forminator-module-1186 textarea.forminator-textarea:focus {
  outline: 2px solid #1C1917 !important;
  outline-offset: 1px;
  border-color: #A8A29E !important;
}

/* ==========================================================================
   "I AM ENQUIRING AS" — radio options as bordered cards
   ========================================================================== */

/* the box holding the two options: side by side, wraps on narrow screens */
#forminator-module-1186 :has(> .forminator-radio) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 8px 12px !important;   /* ↕ 8px label → cards · ↔ 12px between cards */
}
/* the "I am enquiring as" label spans the full width above the cards */
#forminator-module-1186 :has(> .forminator-radio) > .forminator-label {
  grid-column: 1 / -1;
}

/* each option = one card */
#forminator-module-1186 .forminator-radio {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 10px;                    /* ↔ dot to text */
  min-height: 48px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid #A8A29E;
  border-radius: 2px;
  background: #FFFFFF;
  cursor: pointer;
}
/* selected card gets the dark border */
#forminator-module-1186 .forminator-radio:has(input:checked) {
  border-color: #1C1917;
}
/* keyboard focus */
#forminator-module-1186 .forminator-radio:has(input:focus-visible) {
  outline: 2px solid #1C1917;
  outline-offset: 1px;
}

/* keep the real radio input hidden but usable */
#forminator-module-1186 .forminator-radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
}

/* option text */
#forminator-module-1186 .forminator-radio .forminator-radio-label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #1C1917 !important;
}

/* the round dot — 18px ring, 10px orange centre when selected */
#forminator-module-1186 .forminator-radio .forminator-radio-bullet {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: none;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 1px solid #A8A29E !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
#forminator-module-1186 .forminator-radio .forminator-radio-bullet::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  right: auto !important;
  bottom: auto !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}
#forminator-module-1186 .forminator-radio input:checked ~ .forminator-radio-bullet {
  border-color: #C2410C !important;
}
#forminator-module-1186 .forminator-radio input:checked ~ .forminator-radio-bullet::before {
  background: #C2410C !important;
}

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

#forminator-module-1186 .forminator-button-submit {
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: #C2410C !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer;
}
#forminator-module-1186 .forminator-button-submit:hover {
  background: #9A3412 !important;
}

/* --- validation messages ------------------------------------------------- */
#forminator-module-1186 .forminator-error-message {
  margin-top: 4px !important;
  padding: 0 !important;
  background: none !important;
  font-size: 13px !important;
  color: #B91C1C !important;
}