/* ---------------------------------------------------------------------------
   Prescription Drug Request (#4) and Dental Plan Request (#7)
   Scoped to those two form ids only. The contact, consultation and seminar
   forms share the exact same FluentForm markup, so an unscoped rule here would
   restyle them too.

   Layout note: the field groups are direct children of FluentForm's <fieldset>,
   with the "Medication N" heading blocks interleaved between them. Rather than
   count positions with :nth-of-type — which counts every sibling <div>, not
   just the ones we tagged — the fieldset is made a flex container. Everything
   defaults to a full-width row; only the tagged groups shrink. The headings
   stay full width and so naturally break each medication onto its own row.
--------------------------------------------------------------------------- */

:is(.fluent_form_4,.fluent_form_7) {
  --rx-crimson: #910809;
  --rx-navy:    #06114A;
  --rx-body:    #453E3E;
  --rx-line:    rgba(6, 17, 74, .14);
  --rx-gap:     14px;
}

/* --- intro + section headings ------------------------------------------- */

:is(.fluent_form_4,.fluent_form_7) .t65-rx-head {
  border: 1px solid var(--rx-line);
  border-radius: 12px;
  background: #F7F8FC;
  padding: 16px 18px;
  margin-bottom: 6px;
}
:is(.fluent_form_4,.fluent_form_7) .t65-rx-head h3 {
  color: var(--rx-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
:is(.fluent_form_4,.fluent_form_7) .t65-rx-head p { color: var(--rx-body); line-height: 1.55; }

:is(.fluent_form_4,.fluent_form_7) .t65-rx-sec {
  color: var(--rx-navy);
  font-size: 17px;
  font-weight: 700;
  border-bottom: 2px solid var(--rx-line);
  padding-bottom: 7px;
}

:is(.fluent_form_4,.fluent_form_7) .t65-rx-row-label {
  color: var(--rx-crimson);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* These two forms sit on a full-width canvas page rather than inside an
   Elementor container, so unlike the contact and seminar forms they have no
   wrapper giving them a measure. Cap and centre them on desktop, and keep the
   fields off the screen edge on a phone. */
:is(.fluent_form_4,.fluent_form_7) {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 781px) {
  :is(.fluent_form_4,.fluent_form_7) {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- fields -------------------------------------------------------------- */

:is(.fluent_form_4,.fluent_form_7) .ff-el-group { margin-bottom: 12px; }

/* The label inherits the theme's 1.7 body line-height, giving a 13px label a
   27px line box, and the margin is doubled — on the label and again on its
   wrapper. Tighten both so the rows sit closer together. */
:is(.fluent_form_4,.fluent_form_7) .ff-el-input--label {
  margin-bottom: 4px;
  line-height: 1.3;
}
:is(.fluent_form_4,.fluent_form_7) .ff-el-input--label label {
  font-weight: 600;
  color: var(--rx-navy);
  font-size: 13.5px;
  line-height: 1.3;
  margin-bottom: 0;
}

:is(.fluent_form_4,.fluent_form_7) .ff-el-form-control {
  border: 1px solid var(--rx-line);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14.5px;
  height: auto;
  background: #fff;
  color: var(--rx-body);
  width: 100%;
}
:is(.fluent_form_4,.fluent_form_7) .ff-el-form-control:focus {
  border-color: var(--rx-crimson);
  box-shadow: 0 0 0 3px rgba(145, 8, 9, .10);
  outline: none;
}
:is(.fluent_form_4,.fluent_form_7) textarea.ff-el-form-control { min-height: 100px; }

:is(.fluent_form_4,.fluent_form_7) .ff-el-is-error .ff-el-form-control { border-color: var(--rx-crimson); }
:is(.fluent_form_4,.fluent_form_7) .text-danger, :is(.fluent_form_4,.fluent_form_7) .error { color: var(--rx-crimson); }

/* --- submit -------------------------------------------------------------- */

:is(.fluent_form_4,.fluent_form_7) .ff-btn-submit {
  border: 0;
  border-radius: 50px;
  padding: 15px 34px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-color .18s ease;
}

/* --- desktop grid -------------------------------------------------------- */

@media (min-width: 782px) {
  :is(.fluent_form_4,.fluent_form_7) .frm-fluent-form > fieldset,
  :is(.fluent_form_4,.fluent_form_7) > fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--rx-gap);
  }

  /* Everything is a full-width row unless tagged below. */
  :is(.fluent_form_4,.fluent_form_7) fieldset > * { flex: 0 0 100%; min-width: 0; }

  /* 14px gap across 2 columns -> 7px off each. */
  :is(.fluent_form_4,.fluent_form_7) fieldset > .ff-el-group.t65-half {
    flex: 0 0 calc(50% - 7px);
  }

  /* 3 gaps of 14px shared across 4 columns -> 10.5px off each. */
  :is(.fluent_form_4,.fluent_form_7) fieldset > .ff-el-group.t65-quarter {
    flex: 0 0 calc(25% - 10.5px);
  }
}

/* Between tablet and desktop the four medication fields get cramped, so drop
   them to two per row rather than shrinking them further. */
@media (min-width: 782px) and (max-width: 1024px) {
  :is(.fluent_form_4,.fluent_form_7) fieldset > .ff-el-group.t65-quarter {
    flex: 0 0 calc(50% - 7px);
  }
}