/* =====================================================================
   Neevalay - Fluent Forms treatment
   The admissions forms (Contact, Register, Enrolment) render with Fluent
   Forms' own markup, which none of neevalay-forms.css reaches - that file
   is scoped to .neevalay-form-premium, the theme's hand-built forms. So
   these three arrived on the site wearing the plugin's default styling.

   This picks up the same design language: identical input treatment, the
   same aqua focus ring, Nunito for anything structural. A parent moving
   from a programme page to the enrolment form should not feel the seam.

   Structure is the real work here. Fluent Forms emits a flat list of
   fields, so the enrolment form was 31 controls in one unbroken column.
   Below, the form becomes a 12-column grid: short answers pair up, long
   ones run full width, and the section breaks the forms already carry
   become proper chapter headings.
   ===================================================================== */

/* Tokens come from neevalay-forms.css (--nv-aqua, --nv-radius, --nv-focus,
   ...), which is enqueued ahead of this file. Only genuinely new values are
   defined here, so the two stylesheets can never drift apart. */
.fluentform {
  --nvf-gap: 20px;
  --nvf-label: #2b3a3f;
  --nvf-rule: rgba(109, 132, 120, .18);
}

/* ---------------------------------------------------------------- shell */
/* The form sits on the page as a single calm card, echoing the panel
   treatment on the programme pages rather than floating unbounded. */
.fluentform {
  position: relative;
  margin: 8px 0 40px;
  padding: 34px 34px 30px;
  border: 1px solid var(--nv-border, rgba(109, 132, 120, .30));
  border-top: 3px solid var(--nv-aqua, #5CCCCC);
  border-radius: calc(var(--nv-radius, 16px) + 4px);
  background: linear-gradient(180deg, rgba(248, 249, 245, .55) 0%, #fff 180px);
  box-shadow: var(--nv-shadow-soft, 0 10px 24px rgba(0, 0, 0, .06));
  font-family: var(--neevalay-body-font, "Nunito Sans", system-ui, sans-serif);
  color: var(--nv-text, #1d2b2f);
}

@media (max-width: 767.98px) {
  .fluentform { padding: 22px 18px 20px; border-radius: var(--nv-radius, 16px); }
}

/* --------------------------------------------------------------- layout */
/* Every field is a grid item. Anything not explicitly paired below stays
   full width, so a field added later is readable by default rather than
   squeezed into half a row by accident. */
.fluentform form > fieldset,
.fluentform form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--nvf-gap);
  border: 0;
  padding: 0;
  margin: 0;
}

/* Fluent Forms wraps the fields in a <fieldset>, which makes it both an item
   of the form's grid and the grid the fields actually sit in. Without this it
   is placed in a single column and every field is squeezed into a sliver.
   Applied to all direct children so anything else the plugin emits at the top
   level spans the full width too. */
.fluentform form > * { grid-column: 1 / -1; }

.fluentform form .ff-el-group,
.fluentform form .ff-el-section-break,
.fluentform form .ff_submit_btn_wrapper { grid-column: 1 / -1; }

.fluentform form .ff-el-group { margin-bottom: 0; }

/* Short answers pair two to a row. :has() is doing the work because Fluent
   Forms puts the field name on the input, not on the group that wraps it.
   Where :has() is unsupported the rule is simply dropped and the field
   stays full width - the layout degrades to the old one, never breaks. */
@supports selector(:has(*)) {
  @media (min-width: 782px) {
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="child_dob"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="child_gender"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="nationality"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="mother_tongue"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="programme"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="preferred_start"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="parent_name"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="relationship"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="parent_mobile"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="parent_email"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="area_locality"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="heard_about"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g1_name"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g1_relation"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g1_occupation"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g1_mobile"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g1_email"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g2_name"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g2_relation"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g2_occupation"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g2_mobile"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="g2_email"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="addr_line1"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="addr_building"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="addr_landmark"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="addr_city"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="addr_district"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="emergency_name"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="emergency_phone"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="pickup1_relation"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="pickup1_phone"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="pickup2_relation"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="pickup2_phone"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="pickup3_relation"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="pickup3_phone"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="addr_state"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="pincode"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="emergency_name"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="emergency_phone"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="blood_group"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="immunisation"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="paediatrician"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="toilet_trained"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="prev_school"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="declaration_name"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="full_name"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="email"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="phone"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="name"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="city"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="locality"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="property"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="space"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="timeline"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="investment"]),
    .fluentform form .ff-el-group:has(> .ff-el-input--content > [data-name="subject"]) {
      grid-column: span 6;
    }
  }
}

/* ------------------------------------------------------------- sections */
/* The forms already declare their own section breaks; they were rendering
   as a bare <h3> and an <hr>. Given as chapter headings they carry the
   long enrolment form, which is why it can stay one page instead of a
   multi-step wizard the parent has to fight. */
.fluentform form .ff-el-section-break {
  margin-top: 18px;
  padding-top: 26px;
  border-top: 1px solid var(--nvf-rule);
}

/* The first section opens the form - no rule above it. */
.fluentform form .ff-el-section-break:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fluentform form .ff-el-section-break hr { display: none; }

.fluentform form .ff-el-section-title {
  margin: 0;
  font-family: var(--neevalay-heading-font, "Nunito", system-ui, sans-serif);
  font-weight: 800;
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--nv-text, #1d2b2f);
  text-wrap: balance;
}

.fluentform form .ff-section_break_desk {
  margin-top: 5px;
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--nv-muted, rgba(29, 43, 47, .72));
}


/* Chapter headings. A hairline, a step count, then the title.

   This replaced a set of coloured numbered chips. Across eleven sections four
   colours stopped reading as a grouping and started reading as inconsistency,
   and they carried a maintenance trap with them: Fluent Forms numbers section
   breaks at render time, so inserting one silently re-coloured everything
   after it. The count is the only thing a parent actually needs - how far in
   they are - and it comes from a CSS counter, so it can never drift.

   The total is the one value tied to a specific form. Change it if you add or
   remove a section; nothing else here needs touching. */
.fluentform_wrapper_3 form { counter-reset: nvf-section; --nvf-total: "2"; }
.fluentform_wrapper_6 form { counter-reset: nvf-section; --nvf-total: "3"; }
.fluentform_wrapper_4 form { counter-reset: nvf-section; --nvf-total: "11"; }

.fluentform form .ff-el-section-break .ff-el-section-title { display: block; }

.fluentform_wrapper_3 form .ff-el-section-break .ff-el-section-title::before,
.fluentform_wrapper_4 form .ff-el-section-break .ff-el-section-title::before,
.fluentform_wrapper_6 form .ff-el-section-break .ff-el-section-title::before {
  counter-increment: nvf-section;
  content: "Step " counter(nvf-section) " of " var(--nvf-total);
  display: block;
  margin-bottom: 6px;
  font-family: var(--neevalay-body-font, "Nunito Sans", system-ui, sans-serif);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nv-aqua-dark, #3fb0b0);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- labels */
.fluentform form .ff-el-input--label { margin-bottom: 7px; }

.fluentform form .ff-el-input--label label {
  margin: 0;
  font-family: var(--neevalay-heading-font, "Nunito", system-ui, sans-serif);
  font-weight: 700;
  font-size: .935rem;
  line-height: 1.35;
  color: var(--nvf-label);
  cursor: pointer;
}

/* Required marks read as a quiet cue, not an alarm. */
.fluentform form .ff-el-is-required.asterisk-right label::after {
  content: "*";
  margin-left: 4px;
  color: var(--nv-terracotta, #D77A61);
  font-weight: 700;
}

.fluentform form .ff-el-input--label.ff-el-is-required.asterisk-right label:has(+ *)::after { content: none; }

.fluentform form .ff-el-help-message {
  margin-top: 6px;
  font-size: .855rem;
  line-height: 1.55;
  color: var(--nv-muted, rgba(29, 43, 47, .72));
}

/* --------------------------------------------------------------- inputs */
/* Deliberately identical to the .neevalay-form-premium treatment. */
.fluentform form input[type="text"],
.fluentform form input[type="email"],
.fluentform form input[type="tel"],
.fluentform form input[type="url"],
.fluentform form input[type="number"],
.fluentform form input[type="date"],
.fluentform form input[type="time"],
.fluentform form select,
.fluentform form textarea {
  width: 100%;
  height: auto;
  border-radius: var(--nv-radius-sm, 12px);
  border: 1px solid var(--nv-border, rgba(109, 132, 120, .30));
  background: #fff;
  color: var(--nv-text, #1d2b2f);
  padding: 13px 15px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  transition: border-color .18s ease, box-shadow .18s ease;
  outline: none;
}

.fluentform form textarea { min-height: 132px; resize: vertical; }

.fluentform form input::placeholder,
.fluentform form textarea::placeholder { color: rgba(29, 43, 47, .42); }

.fluentform form input:hover,
.fluentform form select:hover,
.fluentform form textarea:hover { border-color: var(--nv-border-strong, rgba(109, 132, 120, .45)); }

.fluentform form input:focus,
.fluentform form select:focus,
.fluentform form textarea:focus {
  border-color: rgba(92, 204, 204, .95);
  box-shadow: var(--nv-focus, 0 0 0 4px rgba(92, 204, 204, .22));
}

/* Dates carry a calendar affordance; the field is read-only by the
   datepicker, so the cursor has to say "clickable" rather than "text". */
.fluentform form input.ff-el-datepicker {
  cursor: pointer;
  padding-right: 44px;
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 17px 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D8478' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

.fluentform form select {
  appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 15px 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D8478' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------- radios & checkbox */
.fluentform form .ff-el-form-check {
  margin: 0 0 8px;
  padding: 0;
}

.fluentform form .ff-el-form-check:last-child { margin-bottom: 0; }

.fluentform form .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--nv-border, rgba(109, 132, 120, .30));
  border-radius: var(--nv-radius-sm, 12px);
  background: #fff;
  font-size: .95rem;
  line-height: 1.55;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.fluentform form .ff-el-form-check-label:hover {
  border-color: rgba(92, 204, 204, .65);
  background: rgba(92, 204, 204, .045);
}

.fluentform form .ff-el-form-check-label:has(input:checked) {
  border-color: rgba(92, 204, 204, .9);
  background: rgba(92, 204, 204, .075);
}

.fluentform form .ff-el-form-check-label:focus-within {
  border-color: rgba(92, 204, 204, .95);
  box-shadow: var(--nv-focus, 0 0 0 4px rgba(92, 204, 204, .22));
}

.fluentform form .ff-el-form-check-input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--nv-aqua, #5CCCCC);
  cursor: pointer;
}

.fluentform form .ff-el-form-check-label > span { flex: 1 1 auto; }

/* A yes/no answer reads better as two adjacent choices than a stacked list. */
@supports selector(:has(*)) {
  .fluentform form .ff-el-input--content:has(> .ff-el-form-check .ff-el-form-check-radio) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .fluentform form .ff-el-input--content:has(> .ff-el-form-check .ff-el-form-check-radio) .ff-el-form-check {
    flex: 1 1 150px;
    margin-bottom: 0;
  }
  .fluentform form .ff-el-input--content:has(> .ff-el-form-check .ff-el-form-check-radio) .ff-el-form-check-label {
    height: 100%;
    align-items: center;
  }
}

/* --------------------------------------------------- add another person */
/* Fluent Forms' repeater field is a Pro feature and this is the free plugin,
   so "add another" is a checkbox that reveals the next set through the
   plugin's own conditional logic. Dressed as a button here, because that is
   what it does - but it stays a real checkbox underneath, so it keeps its
   keyboard behaviour and the plugin's validation with it. */
.fluentform form .nv-addmore .ff-el-input--label { display: none; }

.fluentform form .nv-addmore .ff-el-form-check-label {
  justify-content: flex-start;
  gap: 10px;
  width: fit-content;
  padding: 10px 18px 10px 14px;
  border: 1px dashed var(--nv-border-strong, rgba(109, 132, 120, .45));
  border-radius: 999px;
  background: transparent;
  font-weight: 700;
  color: var(--nv-sage, #6D8478);
}

.fluentform form .nv-addmore .ff-el-form-check-label:hover {
  border-color: var(--nv-aqua, #5CCCCC);
  border-style: solid;
  background: rgba(92, 204, 204, .06);
  color: var(--nv-text, #1d2b2f);
}

.fluentform form .nv-addmore .ff-el-form-check-label:has(input:checked) {
  border-style: solid;
  border-color: var(--nv-aqua, #5CCCCC);
  background: rgba(92, 204, 204, .09);
  color: var(--nv-text, #1d2b2f);
}

/* The plus is drawn on the label, and turns to a minus once the extra set is
   showing - unticking is how a parent removes it again. */
.fluentform form .nv-addmore .ff-el-form-check-label::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--nvf-plus) center/contain no-repeat;
  mask: var(--nvf-plus) center/contain no-repeat;
}

.fluentform form .nv-addmore .ff-el-form-check-label:has(input:checked)::before {
  -webkit-mask-image: var(--nvf-minus);
  mask-image: var(--nvf-minus);
}

.fluentform {
  --nvf-plus:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --nvf-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* The checkbox itself is redundant once the control reads as a button, but it
   stays in the DOM and focusable - it is what actually holds the state. */
.fluentform form .nv-addmore .ff-el-form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fluentform form .nv-addmore .ff-el-form-check-label:focus-within {
  border-style: solid;
  border-color: var(--nv-aqua, #5CCCCC);
  box-shadow: var(--nv-focus, 0 0 0 4px rgba(92, 204, 204, .22));
}

/* The reveal is done here rather than through the plugin's conditional logic,
   which did not respond to this checkbox: a real click toggled the box but the
   extra fields never appeared. CSS :has() reads the checked state directly, so
   the behaviour cannot drift from what the parent sees. The fields stay in the
   form either way and simply submit empty when unused. */
.fluentform form .ff-el-group:has([data-name^="pickup3_"]) { display: none; }

.fluentform form:has(.nv-addmore input:checked) .ff-el-group:has([data-name^="pickup3_"]) {
  display: block;
}

/* Without :has() the third set is always shown rather than never - a parent can
   still name three people, they just see all the fields up front. */
@supports not selector(:has(*)) {
  .fluentform form .ff-el-group:has([data-name^="pickup3_"]) { display: block; }
  .fluentform form .nv-addmore { display: none; }
}

/* ------------------------------------------------------- consent blocks */
/* The consents are a legal step, not another question. Setting them on the
   off-white ground marks them as something to read before ticking. */
@supports selector(:has(*)) {
  .fluentform form .ff-el-group:has([data-name^="consent_"]) .ff-el-form-check-label,
  .fluentform form .ff-el-group:has([data-name="contact_consent"]) .ff-el-form-check-label {
    background: var(--nv-off, #F8F9F5);
    align-items: flex-start;
    padding: 14px 16px;
  }
}

/* ------------------------------------------------------- rich-text note */
.fluentform form .ff_custom_html {
  padding: 16px 18px;
  border: 1px solid var(--nvf-rule);
  border-left: 3px solid var(--nv-gold, #F9C764);
  border-radius: 0 var(--nv-radius-sm, 12px) var(--nv-radius-sm, 12px) 0;
  background: rgba(249, 199, 100, .07);
  font-size: .93rem;
  line-height: 1.65;
  color: var(--nv-text, #1d2b2f);
}

.fluentform form .ff_custom_html > *:first-child { margin-top: 0; }
.fluentform form .ff_custom_html > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- submit */
.fluentform form .ff_submit_btn_wrapper {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--nvf-rule);
}

/* Fluent Forms writes its own button colours inline from the form settings,
   so these have to win outright. */
.fluentform form .ff-btn-submit,
.fluentform form button[type="submit"] {
  min-width: 230px;
  padding: 15px 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--nv-terracotta, #D77A61) !important;
  color: #fff !important;
  font-family: var(--neevalay-heading-font, "Nunito", system-ui, sans-serif) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(215, 122, 97, .28);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.fluentform form .ff-btn-submit:hover,
.fluentform form button[type="submit"]:hover {
  background: #c15f47 !important;
  box-shadow: 0 12px 26px rgba(215, 122, 97, .34);
  transform: translateY(-1px);
}

.fluentform form .ff-btn-submit:focus-visible,
.fluentform form button[type="submit"]:focus-visible {
  outline: 3px solid rgba(215, 122, 97, .45);
  outline-offset: 3px;
}

.fluentform form .ff-btn-submit:disabled,
.fluentform form button[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 575.98px) {
  .fluentform form .ff-btn-submit,
  .fluentform form button[type="submit"] { width: 100%; min-width: 0; }
}

/* ----------------------------------------------------------- validation */
.fluentform form .ff-el-is-error input,
.fluentform form .ff-el-is-error select,
.fluentform form .ff-el-is-error textarea,
.fluentform form input.ff-el-is-error,
.fluentform form .error input,
.fluentform form .error select,
.fluentform form .error textarea {
  border-color: var(--nv-terracotta, #D77A61) !important;
  background: rgba(215, 122, 97, .04);
}

.fluentform form .error.text-danger,
.fluentform form .ff-el-is-error .text-danger,
.fluentform form label.error {
  display: block;
  margin-top: 6px;
  font-size: .855rem;
  font-weight: 600;
  line-height: 1.5;
  color: #b04e33;
}

/* Errors collected below the form when validation runs server-side. */
.ff-errors-in-stack .error,
.fluentform .ff_submit_btn_wrapper + .error {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--nv-radius-sm, 12px);
  border: 1px solid rgba(215, 122, 97, .35);
  background: rgba(215, 122, 97, .07);
  color: #b04e33;
  font-size: .93rem;
}

/* -------------------------------------------------------------- success */
.fluentform .ff-message-success {
  padding: 22px 24px;
  border: 1px solid rgba(63, 163, 77, .3);
  border-left: 3px solid #3FA34D;
  border-radius: var(--nv-radius-sm, 12px);
  background: rgba(63, 163, 77, .06);
  color: #1f5f2a;
  font-size: 1rem;
  line-height: 1.65;
}

.fluentform .ff-message-success > *:first-child { margin-top: 0; }
.fluentform .ff-message-success > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ mechanics */
.fluentform form .ff-el-group.ff-el-form-hide,
.fluentform form .has-conditional-columns { margin: 0; }

.fluentform .ff-el-progress,
.fluentform .ff_form_instance.ff-form-loading { position: relative; }

/* The plugin's screen-reader legend must stay reachable, not display:none. */
.fluentform .ff_screen_reader_title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fluentform form *,
  .fluentform form *::before { transition: none !important; }
  .fluentform form .ff-btn-submit:hover,
  .fluentform form button[type="submit"]:hover { transform: none; }
}

/* ============================================================ page intro */
/* The registration page opened with three tinted cards numbered 1, 2, 3 -
   which collided with the numbered chips on the form directly below it. Two
   numbering systems, one page, neither meaning much.

   This says the one thing a parent actually wants to know: where they are in
   the process and what happens next. The rail is a progress indicator, so the
   colour marks the step they are on rather than decorating three equal boxes. */
.nv-intro { max-width: 780px; }

.nv-intro__lead {
  margin: 0 0 30px;
  max-width: 62ch;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--nv-text, #1d2b2f);
}

.nv-intro__lead strong { font-weight: 700; }

.nv-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.nv-journey__step {
  position: relative;
  padding: 20px 12px 0 0;
  border-top: 2px solid var(--nvf-rule, rgba(109, 132, 120, .18));
}

/* The marker sits on the rule at the start of its own segment. */
.nv-journey__step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--nv-border-strong, rgba(109, 132, 120, .45));
}

.nv-journey__step.is-now { border-top-color: var(--nv-aqua, #5CCCCC); }

.nv-journey__step.is-now::before {
  background: var(--nv-aqua, #5CCCCC);
  border-color: var(--nv-aqua, #5CCCCC);
}

.nv-journey__here {
  display: block;
  margin-bottom: 3px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nv-aqua-dark, #3fb0b0);
}

.nv-journey__label {
  display: block;
  font-family: var(--neevalay-heading-font, "Nunito", system-ui, sans-serif);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--nv-text, #1d2b2f);
}

.nv-journey__step:not(.is-now) .nv-journey__label { color: var(--nv-sage, #6D8478); }

.nv-journey__note {
  display: block;
  margin-top: 4px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--nv-muted, rgba(29, 43, 47, .72));
}

/* Stacked, the rail turns on its side and runs down the left. */
@media (max-width: 640px) {
  .nv-journey { grid-template-columns: 1fr; gap: 0; }
  .nv-journey__step {
    padding: 0 0 18px 22px;
    border-top: 0;
    border-left: 2px solid var(--nvf-rule, rgba(109, 132, 120, .18));
  }
  .nv-journey__step:last-child { padding-bottom: 0; border-left-color: transparent; }
  .nv-journey__step.is-now { border-left-color: var(--nv-aqua, #5CCCCC); }
  .nv-journey__step::before { top: 1px; left: -6px; }
}

/* An aside, not another card - it should not compete with the form. */
.nv-intro__aside {
  margin: 0 0 6px;
  font-size: .95rem;
  color: var(--nv-muted, rgba(29, 43, 47, .72));
}

.nv-intro__aside a {
  color: var(--nv-aqua-dark, #3fb0b0);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 204, 204, .45);
  padding-bottom: 1px;
  transition: border-color .16s ease, color .16s ease;
}

.nv-intro__aside a::after { content: " \2192"; }

.nv-intro__aside a:hover {
  color: var(--nv-terracotta, #D77A61);
  border-bottom-color: var(--nv-terracotta, #D77A61);
}

/* ================================================================== CTAs */
/* Contact details inside the form are actions, not text to copy out. A parent
   filling this in on a phone should reach WhatsApp or their mail app in one
   tap rather than transcribing a number. Same quiet treatment as the console:
   white surface, hairline border, the colour carried only by the icon. */
.fluentform .nv-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.fluentform .nv-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--nv-border, rgba(109, 132, 120, .30));
  border-radius: 12px;
  background: #fff;
  color: var(--nv-text, #1d2b2f);
  font-family: var(--neevalay-heading-font, "Nunito", system-ui, sans-serif);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.fluentform .nv-cta:hover {
  border-color: var(--c, var(--nv-aqua, #5CCCCC));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 74, 68, .09);
  text-decoration: none;
  color: var(--nv-text, #1d2b2f);
}

.fluentform .nv-cta:focus-visible {
  outline: 3px solid var(--c, var(--nv-aqua, #5CCCCC));
  outline-offset: 2px;
}

.fluentform .nv-cta svg { flex: 0 0 auto; color: var(--c, var(--nv-sage, #6D8478)); }
.fluentform .nv-cta--wa { --c: #25D366; }
.fluentform .nv-cta--mail { --c: var(--nv-terracotta, #D77A61); }

@media (max-width: 575.98px) {
  .fluentform .nv-cta { flex: 1 1 100%; justify-content: center; }
}