/* Skanda Vale — make Ninja Forms match the Gravity Forms house style.
   Authored 2026-07-07 at the site owner's request (the only authored CSS
   in this project; everything else is mirrored from the live site).
   Values copied from the site's own Elementor typography set 50cc72e and
   karolo theme rules: labels 12px / weight 900 / letter-spacing 1.1px /
   uppercase / line-height 20px; text in ff-meta-serif-web-pro; underline
   inputs; brand colours --e-global-color-primary/text.
   Linked only on: visit-skanda-vale/accommodation, visit-skanda-vale/
   stay-in-the-ashram, about/food-aid. */

/* ---- field labels (including radio/checkbox option labels) ---- */
.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-field-label .nf-label-span,
.nf-form-cont .listradio-wrap .nf-field-element label,
.nf-form-cont .listcheckbox-wrap .nf-field-element label {
  font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.1px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--e-global-color-text, #263238);
}

/* required asterisk in the brand red */
.nf-form-cont .ninja-forms-req-symbol {
  color: var(--e-global-color-primary, #CA4D2A);
}

/* ---- helper text under labels: the serif body style ---- */
.nf-form-cont .nf-field-description,
.nf-form-cont .nf-field-description p {
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-weight: var(--e-global-typography-text-font-weight, 500);
  font-size: var(--e-global-typography-text-font-size, 18px);
  color: var(--e-global-color-text, #263238);
}

/* ---- inputs: remove grey boxes, use the underline style ---- */
.nf-form-cont input.ninja-forms-field:not([type=button]):not([type=submit]),
.nf-form-cont textarea.ninja-forms-field,
.nf-form-cont select.ninja-forms-field {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(38, 50, 56, 0.55);
  border-radius: 0;
  padding: 10px 0;
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-size: var(--e-global-typography-text-font-size, 18px);
  color: var(--e-global-color-text, #263238);
}

.nf-form-cont input.ninja-forms-field:focus,
.nf-form-cont textarea.ninja-forms-field:focus,
.nf-form-cont select.ninja-forms-field:focus {
  outline: 0;
  border-bottom-color: var(--e-global-color-primary, #CA4D2A);
}

/* dropdowns: Ninja paints an overlay panel over the real select —
   make it transparent so the underline shows, and match the text style */
body .nf-form-content .list-select-wrap > div div,
body .nf-form-content .listselect-wrap .nf-field-element div {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(38, 50, 56, 0.55);
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-size: var(--e-global-typography-text-font-size, 18px);
  color: var(--e-global-color-text, #263238);
  padding: 13px 0;
}

/* keep the submit button exactly as the theme styles it (excluded above) */