/* ============================================================
   NEO& — Fluent Forms, in the site's own form design
   ------------------------------------------------------------
   The pages were designed with a plain <form class="form"> (neo-global.css,
   "CMP: form"). Fluent Forms renders its own markup instead:

     <div class="fluentform">
       <form class="frm-fluent-form neo-form neo-form--enquiry">
         <div class="ff-t-container">                 ← a two-column row
           <div class="ff-t-cell"><div class="ff-el-group">…</div></div>
         </div>
         <div class="ff-el-group">
           <div class="ff-el-input--label"><label>Country</label></div>
           <div class="ff-el-input--content">
             <select class="ff-el-form-control">…</select>
           </div>
         </div>
         <div class="ff-el-group"><div class="ff-el-form-check">…</div></div>
         <div class="ff_submit_btn_wrapper"><button class="ff-btn-submit">…</button></div>
       </form>
     </div>

   This file gives that markup the same values the design gives .form, so a
   Fluent form on a page is not told apart from the form it was designed as.
   Every value is a token from neo-tokens.css or a number copied from the
   .form rules; nothing is invented here.

   Specificity: every rule doubles the class (.neo-form.neo-form) and the
   properties Fluent also sets — control background, border, radius, height,
   and the submit button's colours — carry !important. Fluent's own stylesheet
   is scoped per form (.fluent_form_6 .ff-el-form-control), the same weight as
   a single .neo-form rule, and it loads after the theme, so a tie goes to
   Fluent; its submit button colours come from the form editor and render
   inline, which only !important can outrank.

   Two settings in Fluent Forms make it hold:
     · the form's CSS class is  neo-form neo-form--enquiry  (or --notify)
     · Form Layout → Form Style: "Inherit Theme Style" (no Fluent styling)
   ============================================================ */

/* ── the form itself: the design's two-column grid ──────────────────── */
.fluentform{max-width:640px}
.neo-form{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.neo-form.neo-form .ff-el-group,
.neo-form.neo-form .ff-t-container,
.neo-form.neo-form .ff_submit_btn_wrapper,
.neo-form.neo-form .ff-custom_html{grid-column:1/-1;margin:0}
/* a Fluent "container" row with two cells is one grid row of two columns */
.neo-form.neo-form .ff-t-container{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.neo-form.neo-form .ff-t-cell{min-width:0}
.neo-form.neo-form .ff-t-cell .ff-el-group{margin:0}

/* ── labels ────────────────────────────────────────────────────────── */
.neo-form.neo-form .ff-el-input--label{margin:0;padding:0}
.neo-form.neo-form .ff-el-input--label label{font-size:var(--type-support);color:var(--text-heading);display:block;font-weight:400;margin:0;line-height:var(--neo-leading-body)}
/* the design marks optional fields, not required ones */
.neo-form.neo-form .ff-el-is-required label::after,
.neo-form.neo-form .ff-el-is-required label::before,
.neo-form.neo-form .ff-el-is-required .ff-required{content:none;display:none}
.neo-form.neo-form .ff-el-input--label .optional{color:var(--text-secondary);font-weight:400}

/* ── text controls: the same rule as .form input / select / textarea ── */
.neo-form.neo-form .ff-el-form-control,
.neo-form.neo-form input[type="text"],
.neo-form.neo-form input[type="email"],
.neo-form.neo-form input[type="tel"],
.neo-form.neo-form textarea{display:block;background:var(--surface-raised)!important;border:var(--neo-border-hair) solid var(--border-subtle)!important;color:var(--text-primary)!important;
  border-radius:4px!important;min-height:46px!important;width:100%;padding:10px 12px!important;margin-top:6px;font-size:15px!important;font-family:inherit;line-height:var(--neo-leading-body)!important;
  box-shadow:none!important;appearance:auto;-webkit-appearance:auto}
.neo-form.neo-form .ff-el-form-control::placeholder{color:var(--text-secondary);opacity:1}
.neo-form.neo-form textarea.ff-el-form-control{min-height:7.5rem!important;resize:vertical;font:inherit!important;line-height:var(--neo-leading-body)!important}
.neo-form.neo-form .ff-el-form-control:focus{border-color:var(--border-subtle);box-shadow:none}
.neo-form.neo-form .ff-el-form-control:focus-visible{outline:3px solid var(--accent-focus-ring);outline-offset:4px}
.neo-form.neo-form .ff-el-form-control:disabled{color:var(--text-secondary);cursor:not-allowed;opacity:1}
.neo-form.neo-form .ff-el-input--content{position:relative}

/* Selects, and why these selectors are so long.
   Fluent's own rule is  select.ff-el-form-control:not([size]):not([multiple])
   — the two :not([attr]) parts are specificity padding, giving it 0,3,1, the
   exact weight of .neo-form.neo-form select.ff-el-form-control. A tie goes to
   whichever file loads last, and Fluent's always does. Prefixing with body
   (and .pg, for the page context) lifts these above that tie. Fluent also
   sets height via --fluentform-input-select-height, which is why height is
   released here and min-height does the sizing. */
body .neo-form.neo-form select,
body .neo-form.neo-form select.ff-el-form-control,
.pg .neo-form.neo-form select,
.pg .neo-form.neo-form select.ff-el-form-control,
.pg .neo-form.neo-form .ff-el-input--content select{
  display:block!important;height:auto!important;min-height:48px!important;
  width:100%!important;padding:10px 12px!important;margin-top:6px!important;
  font-size:15px!important;font-family:inherit!important;line-height:var(--neo-leading-body)!important;
  background:var(--surface-raised)!important;border:var(--neo-border-hair) solid var(--border-subtle)!important;
  color:var(--text-primary)!important;border-radius:4px!important;box-shadow:none!important}
body .on-dark .neo-form.neo-form select,
body .on-dark .neo-form.neo-form select.ff-el-form-control,
.pg .on-dark .neo-form.neo-form select,
.on-dark .pg .neo-form.neo-form select{
  background:var(--surface-inverse-2)!important;border-color:var(--border-strong)!important;color:var(--text-inverse)!important}

/* The same tie exists on text inputs and the textarea, so they are lifted too. */
body .neo-form.neo-form .ff-el-form-control:not(textarea):not(select):not([type="checkbox"]){
  height:auto!important;min-height:46px!important;padding:10px 12px!important}
body .neo-form.neo-form textarea.ff-el-form-control{min-height:7.5rem!important;padding:10px 12px!important}

/* The enquiry panel's two columns are sized 1fr 1fr, which means "at least as
   wide as the content needs". The designed form resists collapsing; Fluent's
   flex cells do not, so the heading in the left column was taking the width
   and squeezing the form to ~220px. Pinned to true halves. */
@media(min-width:851px){
  .pg .enquiry:has(.fluentform){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pg .enquiry .fluentform{max-width:none;width:100%}
}

/* The gap between fields is the grid's, not Fluent's own margin. */
.neo-form.neo-form .ff-el-group{margin-bottom:0!important}
/* the textarea takes the body font, as .form textarea does */
.neo-form.neo-form textarea.ff-el-form-control{font-size:var(--type-support)!important}

/* ── the consent checkbox ───────────────────────────────────────────── */
.neo-form.neo-form .ff-el-form-check{margin:0;padding:0}
.neo-form.neo-form .ff-el-form-check-label{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-secondary);line-height:1.6;cursor:pointer;margin:0;padding:0}
.neo-form.neo-form .ff-el-form-check-input{width:18px;height:18px;min-height:0;min-width:0;margin:2px 0 0;flex:0 0 18px;accent-color:var(--action-primary);position:static;opacity:1;appearance:auto;-webkit-appearance:auto}
.neo-form.neo-form .ff-el-form-check-label a{color:inherit}

/* ── the privacy line: a Fluent "Custom HTML" field, designed as .enq-privacy */
.neo-form.neo-form .ff-custom_html,
.neo-form.neo-form .ff-custom_html p{margin:0;font-size:var(--type-support);line-height:1.6;color:var(--text-secondary)}
.neo-form.neo-form .ff-custom_html a{color:inherit}

/* ── the button: .btn, full width, as the design's submit ─────────────── */
.neo-form.neo-form .ff_submit_btn_wrapper{text-align:start}
.neo-form.neo-form .ff-btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--neo-target-action)!important;
  padding:11px 22px!important;border:1px solid var(--action-primary)!important;border-radius:4px!important;background:var(--action-primary)!important;
  color:var(--action-on-primary)!important;font-weight:600;font-size:14px!important;line-height:1.5;text-align:center;width:100%!important;
  font-family:inherit;cursor:pointer;transition:background var(--neo-duration);box-shadow:none!important;text-transform:none!important;letter-spacing:0!important}
.neo-form.neo-form .ff-btn-submit:hover{background:var(--action-primary-hover)}
.neo-form.neo-form .ff-btn-submit:focus-visible{outline:3px solid var(--accent-focus-ring);outline-offset:4px}
.neo-form.neo-form .ff-btn-submit:disabled{opacity:.6;cursor:not-allowed}
.neo-form.neo-form .ff-btn-submit .ff-btn-loading{display:none}

/* ── validation and messages ───────────────────────────────────────── */
.neo-form.neo-form .ff-el-is-error .ff-el-form-control{border-color:var(--accent-focus-ring)}
.neo-form.neo-form .ff-el-is-error .error,
.neo-form.neo-form .text-danger{display:block;margin-top:6px;font-size:var(--type-support);line-height:1.5;color:var(--accent-eyebrow)}
.neo-form.neo-form .ff-errors-in-stack{grid-column:1/-1;margin:0;padding:12px 14px;border:var(--neo-border-hair) solid var(--accent-focus-ring);border-radius:4px;font-size:var(--type-support);color:var(--text-primary);background:var(--surface-raised)}
.neo-form.neo-form .ff-errors-in-stack:empty{display:none}
.fluentform .ff-message-success{max-width:640px;margin:0;padding:18px 20px;border:var(--neo-border-hair) solid var(--border-subtle);border-radius:var(--card-radius);background:var(--surface-raised);color:var(--text-primary);font-size:var(--type-body);line-height:var(--neo-leading-body);box-shadow:none}

/* ── on the dark enquiry panel: the .on-dark .form values ─────────────── */
.on-dark .neo-form.neo-form .ff-el-input--label label{color:var(--text-inverse-2)}
.on-dark .neo-form.neo-form .ff-el-form-control,
.on-dark .neo-form.neo-form select,
.on-dark .neo-form.neo-form textarea{background:var(--surface-inverse-2)!important;border-color:var(--border-strong)!important;color:var(--text-inverse)!important}
.on-dark .neo-form.neo-form .ff-el-form-control::placeholder{color:var(--text-inverse-2)}
.on-dark .neo-form.neo-form textarea.ff-el-form-control::placeholder{color:var(--text-secondary)}   /* as .pg textarea::placeholder in the design */
.on-dark .neo-form.neo-form select option{background:var(--surface-inverse);color:var(--text-inverse)}
.on-dark .neo-form.neo-form .ff-el-form-check-label,
.on-dark .neo-form.neo-form .ff-custom_html,
.on-dark .neo-form.neo-form .ff-custom_html p{color:var(--text-inverse-2)}
.on-dark .neo-form.neo-form .ff-el-form-check-label a,
.on-dark .neo-form.neo-form .ff-custom_html a{color:var(--text-inverse)}
/* the design's submit on the dark panel is .btn.light */
.on-dark .neo-form.neo-form .ff-btn-submit{background:var(--neo-white)!important;border-color:var(--neo-white)!important;color:var(--neo-plum-900)!important}
.on-dark .neo-form.neo-form .ff-btn-submit:hover{background:var(--neo-white);filter:brightness(.92)}
.on-dark .neo-form.neo-form .ff-el-is-error .error,
.on-dark .neo-form.neo-form .text-danger{color:#d2b691}
.on-dark .fluentform .ff-message-success{background:var(--surface-inverse-2);border-color:var(--border-strong);color:var(--text-inverse)}

/* ── the notify form: one field and a button on one line (.notify form) ─ */
.notify .fluentform{max-width:none;width:100%}
.neo-form--notify{display:flex;flex-wrap:wrap;gap:var(--neo-space-sm);justify-content:center;align-items:flex-start}
.neo-form--notify .ff-el-group,
.neo-form--notify .ff_submit_btn_wrapper{margin:0;width:auto}
/* the designed field is width:100% of the line, so the button sits on the next line, centred */
.neo-form--notify .ff-el-group:not(.ff_submit_btn_wrapper){flex:1 1 100%}
.neo-form--notify .ff-el-input--label{display:none}
.neo-form--notify .ff-el-form-control{margin-top:6px;min-width:min(22rem,80vw);min-height:var(--neo-target-action);font-size:var(--type-body)}
.neo-form--notify .ff-btn-submit{width:auto}
.neo-form--notify .ff-errors-in-stack{flex-basis:100%}

/* ── phones ─────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .neo-form.neo-form,.neo-form.neo-form .ff-t-container{grid-template-columns:1fr}
  .neo-form.neo-form .ff-el-form-control{min-height:48px;font-size:16px}   /* 16px stops iOS zooming into the field */
  .neo-form.neo-form .ff-btn-submit{min-height:48px}
  .neo-form--notify .ff-el-group{width:100%}
  .neo-form--notify .ff-el-form-control{min-width:0}
  .neo-form--notify .ff-btn-submit{width:100%}
}
@media(forced-colors:active){.neo-form.neo-form .ff-el-form-control,.neo-form.neo-form .ff-btn-submit{border:1px solid}}