/* ═══════════════════════════════════════════════
   FORMINATOR — SHARED SKIN (every form, every page)
   ═══════════════════════════════════════════════
   The forms are built with Forminator's "basic" design + colour option
   "theme", which means Forminator deliberately ships almost no styling and
   expects the theme to dress the fields. This file IS that dressing — so a
   form the owner builds in Forminator and drops anywhere (page content,
   template part, widget) looks like the rest of the site with no extra work.

   Scope: unscoped on purpose. Do NOT re-declare these rules inside a page
   sheet — page sheets only add what is genuinely different for that spot
   (see .nl-embed in home.css: the newsletter is a pill, not a stacked form).

   !important throughout: Forminator's own stylesheets load after the theme's
   and carry higher-specificity selectors (#forminator-module-{id} …).

   Tokens only (var(--primary) …) so a rebrand stays a one-file change.
   ═══════════════════════════════════════════════ */

/* Forminator prints an empty placeholder <div> with the same class as the real
   <form> before hydrating. Hide it only while it IS empty — never risk hiding a
   wrapper that a future version fills with the form itself. */
div.forminator-custom-form:empty{display:none!important}

/* ── Form shell ── */
form.forminator-custom-form{margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}

/* ── Rows + columns (Forminator's grid → flex, 2-up at desktop) ── */
.forminator-custom-form .forminator-row{display:flex!important;flex-wrap:wrap!important;gap:1.1rem!important;margin:0 0 1.1rem!important}
.forminator-custom-form .forminator-row:last-of-type{margin-bottom:0!important}
.forminator-custom-form .forminator-col{flex:1 1 100%;padding:0!important;margin:0!important;min-width:0}
.forminator-custom-form .forminator-col-6{flex:1 1 calc(50% - .55rem)}
.forminator-custom-form .forminator-col-12{flex:1 1 100%}
.forminator-custom-form .forminator-field{margin:0!important;padding:0!important}

/* ── Labels ── */
.forminator-custom-form .forminator-label{display:block!important;font-family:var(--fh)!important;font-size:.85rem!important;font-weight:700!important;color:var(--text-h)!important;margin:0 0 .35rem!important;text-transform:none!important}
.forminator-custom-form .forminator-required{color:var(--primary)!important}
.forminator-custom-form .forminator-description{font-size:.78rem!important;color:var(--text-m)!important;margin:.3rem 0 0!important;line-height:1.5!important}

/* ── Section titles (multi-part forms) ── */
.forminator-custom-form .forminator-title{font-family:var(--fh)!important;font-size:1.05rem!important;font-weight:800!important;color:var(--text-h)!important;margin:0 0 .25rem!important}
.forminator-custom-form .forminator-subtitle{font-size:.85rem!important;color:var(--text-m)!important;margin:0 0 .6rem!important}

/* ── Text / email / phone / number / url inputs, textarea, plain select ── */
/* :not(.select2-hidden-accessible) — when Select2 takes over a <select> it keeps
   the original one in the DOM, off-screen, for screen readers. Sizing THAT one
   to 100% pushes the document wider than the viewport. Only skin real selects. */
.forminator-custom-form .forminator-input,
.forminator-custom-form textarea.forminator-textarea,
.forminator-custom-form select.forminator-select--field:not(.select2-hidden-accessible){
  width:100%!important;border:1px solid var(--border)!important;border-radius:var(--r-btn)!important;
  padding:.7rem .85rem!important;font-family:var(--fb)!important;font-size:.92rem!important;color:var(--text-h)!important;
  background:#fff!important;box-shadow:none!important;height:auto!important;min-height:44px!important;line-height:1.45!important;transition:border-color .2s,box-shadow .2s!important}
.forminator-custom-form .forminator-input::placeholder,
.forminator-custom-form textarea.forminator-textarea::placeholder{color:var(--text-m)!important;opacity:1}
.forminator-custom-form textarea.forminator-textarea{min-height:120px!important;resize:vertical!important;line-height:1.6!important}
.forminator-custom-form .forminator-input:focus,
.forminator-custom-form textarea.forminator-textarea:focus,
.forminator-custom-form select.forminator-select--field:not(.select2-hidden-accessible):focus{outline:none!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(232,82,26,.12)!important}
/* Date / time fields render the input next to an icon button. */
.forminator-custom-form .forminator-input-with-icon{position:relative!important}
.forminator-custom-form .forminator-input-with-icon .forminator-input{padding-right:2.5rem!important}
/* left:auto resets Forminator's own `left:10px` — otherwise the icon sits on top
   of the text, because our input padding leaves the room on the right. */
.forminator-custom-form .forminator-input-with-icon [class*="forminator-icon-"]{position:absolute!important;left:auto!important;right:.85rem!important;top:50%!important;transform:translateY(-50%)!important;color:var(--text-m)!important;pointer-events:none}

/* ── Select2 dropdowns ──
   NOTE: Forminator renders these WITHOUT the `select2-container--default`
   theme class, so selectors must NOT depend on `--default`. */
.forminator-custom-form .select2-container{width:100%!important;height:auto!important}
.forminator-custom-form .select2-container .select2-selection{box-sizing:border-box!important;border:1px solid var(--border)!important;border-radius:var(--r-btn)!important;min-height:48px!important;height:48px!important;background:#fff!important;display:flex!important;align-items:center!important;box-shadow:none!important;outline:none!important}
.forminator-custom-form .select2-container .select2-selection--single{height:48px!important;line-height:normal!important}
.forminator-custom-form .select2-container .select2-selection--single .select2-selection__rendered{padding:0 2rem 0 .85rem!important;color:var(--text-h)!important;line-height:46px!important;font-size:.92rem!important}
.forminator-custom-form .select2-container .select2-selection__placeholder{color:var(--text-m)!important}
.forminator-custom-form .select2-container .select2-selection--single .select2-selection__arrow{height:46px!important;right:.7rem!important;top:0!important}
.forminator-custom-form .select2-container .select2-selection--single .select2-selection__arrow b{border-color:var(--text-m) transparent transparent transparent!important}
.forminator-custom-form .select2-container--open .select2-selection,
.forminator-custom-form .select2-container--focus .select2-selection{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(232,82,26,.12)!important}
/* Open panel is appended to <body>, so it cannot be scoped to the form. */
.select2-container--open .select2-dropdown{border:1px solid var(--border)!important;border-radius:var(--r-btn)!important;box-shadow:var(--sh-card)!important;overflow:hidden;margin-top:4px}
.select2-results__option--highlighted[aria-selected]{background:var(--primary)!important}

/* ── Checkboxes / radios / consent ── */
.forminator-custom-form .forminator-checkbox,
.forminator-custom-form .forminator-radio,
.forminator-custom-form .forminator-field-checkbox label,
.forminator-custom-form .forminator-gdpr label{font-size:.82rem!important;color:var(--text-b)!important;line-height:1.5!important}
.forminator-custom-form .forminator-checkbox a,
.forminator-custom-form .forminator-radio a,
.forminator-custom-form .forminator-gdpr a{color:var(--primary)!important;text-decoration:underline!important}
/* Tint the native control (Forminator's own fake box/bullet, when its design CSS
   is active, is styled by the plugin — accent-color only affects the real one). */
.forminator-custom-form input[type=checkbox],
.forminator-custom-form input[type=radio]{accent-color:var(--primary)}

/* ── File upload ── */
.forminator-custom-form .forminator-button-upload{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:.6rem 1.1rem!important;border:1px solid var(--border)!important;border-radius:var(--r-btn)!important;background:var(--bg-soft)!important;color:var(--text-h)!important;font-family:var(--fh)!important;font-weight:700!important;font-size:.85rem!important;cursor:pointer!important;box-shadow:none!important;transition:border-color .2s,color .2s!important}
.forminator-custom-form .forminator-button-upload:hover{border-color:var(--primary)!important;color:var(--primary)!important}
.forminator-custom-form .forminator-file-upload,
.forminator-custom-form .forminator-multi-upload{border:1px dashed var(--border)!important;border-radius:var(--r-btn)!important;background:#fff!important;padding:.9rem!important}

/* ── Submit + step buttons ── */
/* Single selector on purpose: this shared layer stays at a low, predictable
   specificity (0,2,0) so a page sheet can override it (see .nl-embed pill). */
.forminator-custom-form .forminator-button-submit{
  width:100%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:var(--primary)!important;color:#fff!important;border:0!important;border-radius:var(--r-btn)!important;
  font-family:var(--fh)!important;font-weight:700!important;font-size:1rem!important;padding:.9rem 1.5rem!important;
  min-height:48px!important;cursor:pointer!important;box-shadow:0 4px 14px rgba(232,82,26,.3)!important;
  transition:background .2s,transform .2s!important;margin-top:.4rem!important}
.forminator-custom-form .forminator-button-submit:hover{background:var(--primary-dark)!important;transform:translateY(-2px)}
.forminator-custom-form .forminator-button-next,
.forminator-custom-form .forminator-button-prev{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:.7rem 1.4rem!important;border-radius:var(--r-btn)!important;font-family:var(--fh)!important;font-weight:700!important;font-size:.9rem!important;cursor:pointer!important;transition:background .2s,border-color .2s,color .2s!important}
.forminator-custom-form .forminator-button-next{background:var(--primary)!important;color:#fff!important;border:0!important}
.forminator-custom-form .forminator-button-next:hover{background:var(--primary-dark)!important}
.forminator-custom-form .forminator-button-prev{background:#fff!important;color:var(--text-h)!important;border:1px solid var(--border)!important}
.forminator-custom-form .forminator-button-prev:hover{border-color:var(--primary)!important;color:var(--primary)!important}

/* ── Validation + response ── */
.forminator-custom-form .forminator-error-message{color:#dc2626!important;font-size:.8rem!important;margin-top:.3rem!important}
.forminator-custom-form .forminator-input.forminator-has_error,
.forminator-custom-form textarea.forminator-textarea.forminator-has_error{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.1)!important}
.forminator-custom-form .forminator-response-message{border-radius:var(--r-btn)!important;font-size:.9rem!important;padding:.75rem 1rem!important;margin:0 0 1rem!important}

/* ── jQuery UI datepicker (date fields; appended to <body>) ── */
#ui-datepicker-div{border:1px solid var(--border)!important;border-radius:var(--r-btn)!important;box-shadow:var(--sh-card)!important;font-family:var(--fb)!important;z-index:1002!important}
#ui-datepicker-div .ui-state-active,
#ui-datepicker-div .ui-datepicker-current-day a{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}

/* ── Mobile: stack every Forminator column ── */
@media(max-width:600px){
  .forminator-custom-form .forminator-col-6{flex:1 1 100%}
}