/* ============================================================
   Fluent Forms → Shree Ortho design bridge
   ------------------------------------------------------------
   Maps Fluent Forms' markup onto the input, label and button
   styles that already exist in assets/style.css, so the enquiry
   form is indistinguishable from the hand-built form it replaced.

   Everything here reuses the site's own custom properties — no
   new colours, radii or spacing are introduced. If the palette
   changes in style.css, this follows automatically.

   Written to win against Fluent Forms' own stylesheet whether or
   not it is loaded, so no plugin setting is required. Turning off
   "Load Fluent Forms public CSS" in the plugin's settings simply
   makes the page a few kilobytes lighter.
   ============================================================ */

.soc-formhost .fluentform {
  margin: 0;
}

.soc-formhost .frm-fluent-form,
.soc-formhost .fluentform form {
  display: block;
}

/* ---------- field group ≡ .field ---------- */
.soc-formhost .ff-el-group {
  margin: 0 0 16px;
  position: relative;
}

.soc-formhost .ff-el-group:last-of-type {
  margin-bottom: 4px;
}

/* ---------- label ≡ .field label ---------- */
.soc-formhost .ff-el-input--label label,
.soc-formhost .ff-el-input--label > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}

.soc-formhost .ff-el-is-required.asterisk-right label:after,
.soc-formhost .ff-el-input--label.asterisk-right label:after {
  content: " *";
  color: var(--alert);
  font-weight: 700;
}

/* ---------- controls ≡ .field input / select / textarea ---------- */
.soc-formhost .ff-el-form-control,
.soc-formhost input[type="text"].ff-el-form-control,
.soc-formhost input[type="email"].ff-el-form-control,
.soc-formhost input[type="tel"].ff-el-form-control,
.soc-formhost input[type="number"].ff-el-form-control,
.soc-formhost input[type="date"].ff-el-form-control,
.soc-formhost select.ff-el-form-control,
.soc-formhost textarea.ff-el-form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 15px;
  line-height: 1.4;
  background: #fff;
  color: var(--ink);
  transition: .16s;
  outline: none;
  font-family: inherit;
  box-shadow: none;
  height: auto;
  min-height: 0;
  -webkit-appearance: none;
  appearance: none;
}

.soc-formhost select.ff-el-form-control {
  /* Restore the caret that appearance:none removes. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235c6f85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.soc-formhost textarea.ff-el-form-control {
  resize: vertical;
  min-height: 92px;
}

.soc-formhost .ff-el-form-control:focus {
  border-color: var(--blue-500);
  box-shadow: var(--ring);
}

.soc-formhost .ff-el-form-control::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* ---------- help text ≡ .field .hint ---------- */
.soc-formhost .ff-el-help-message {
  font-size: 12px;
  color: var(--muted);
  margin: 5px 0 0;
  line-height: 1.5;
}

/* ---------- error state ≡ .field.bad ---------- */
.soc-formhost .ff-el-is-error .ff-el-form-control,
.soc-formhost .ff-el-form-control.ff-el-is-error {
  border-color: var(--alert);
}

.soc-formhost .error.text-danger,
.soc-formhost .ff-el-is-error .error {
  font-size: 12px;
  color: var(--alert);
  margin-top: 5px;
  font-weight: 600;
  display: block;
  list-style: none;
  padding: 0;
}

.soc-formhost .text-danger ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- submit ≡ .btn.btn-primary.btn-lg.btn-block ---------- */
.soc-formhost .ff-el-group.ff-text-left,
.soc-formhost .ff_submit_btn_wrapper {
  margin-top: 22px;
  text-align: left;
}

.soc-formhost .ff-btn-submit,
.soc-formhost button.ff-btn.ff-btn-submit,
.soc-formhost .ff-btn.ff-btn-submit.ff-btn-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 6px 18px rgba(21, 101, 192, .28);
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
  height: auto;
}

.soc-formhost .ff-btn-submit:hover,
.soc-formhost button.ff-btn.ff-btn-submit:hover {
  background: var(--navy-800);
  color: #fff;
  transform: translateY(-1px);
}

.soc-formhost .ff-btn-submit:focus-visible {
  box-shadow: var(--ring);
}

.soc-formhost .ff_btn_style .ff-btn-submit[disabled],
.soc-formhost .ff-btn-submit[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* ---------- radio / checkbox ≡ .pick ---------- */
.soc-formhost .ff-el-form-check {
  margin-bottom: 8px;
}

.soc-formhost .ff-el-form-check-label {
  font-size: 14.5px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.soc-formhost .ff-el-form-check input[type="radio"],
.soc-formhost .ff-el-form-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--blue-600);
  margin: 0;
}

/* ---------- success / failure messages ---------- */
.soc-formhost .ff-message-success,
.soc-formhost .ff_submit_success {
  background: var(--blue-050);
  border: 1.5px solid var(--blue-300);
  border-radius: var(--r);
  padding: 20px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.soc-formhost .ff-errors-in-stack,
.soc-formhost .ff_form_instance .error-clear {
  background: #fff4f4;
  border: 1.5px solid var(--alert);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--alert);
  font-weight: 600;
  margin-bottom: 14px;
}

/* ---------- loading state ---------- */
.soc-formhost .ff_submitting .ff-btn-submit {
  pointer-events: none;
}

/* ---------- fallback card ---------- */
.soc-form-fallback p {
  color: var(--slate);
}

/* ---------- Fluent Forms grid rows, when a form uses them ---------- */
.soc-formhost .ff-t-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.soc-formhost .ff-t-cell {
  min-width: 0;
  padding: 0;
}

@media (max-width: 760px) {
  .soc-formhost .ff-t-container {
    grid-template-columns: 1fr;
  }
}