/* ============================================================
   CathLab — ACF Frontend Form Styles
   Replaces all ACF Pro / Frontend Admin Pro default styles.
   Inherits CSS custom properties from the main theme stylesheet.
   ============================================================ */


/* ============================================================
   1. FORM CONTAINER
   ============================================================ */

/* ── Page-level container width override ──────────────────────────────
   The theme's .container defaults to max-width:780px on standard pages.
   Expand it when this page contains a frontend form so the form cards
   have comfortable horizontal space. Uses :has() which is supported in
   all modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+). */
.container:has(form.frontend-form) {
  max-width: 960px !important;
}

form.frontend-form {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.acf-form-data {
  display: none !important;
}


/* ============================================================
   2. FIELDS LAYOUT
   ============================================================ */

.acf-fields,
.acf-fields.acf-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Individual field */
.acf-field {
  box-sizing: border-box;
  width: 100%;
  padding: 0 !important;
  margin-bottom: 1.5rem !important; /* !important: beat any acf-input.css margin:0 override */
  position: relative;
  display: block !important; /* acf-input.css sets display:table on .-left fields — force block */
}

/* Half-width fields (ACF sets width via inline style="width:50%") */
.acf-field[data-width] {
  padding-right: 0.75rem !important; /* !important: base padding:0 !important would otherwise wipe this */
}
.acf-field[data-width]:last-child {
  padding-right: 0 !important;
}

/* Field group — section heading */
.acf-field.acf-field-group {
  margin-bottom: 0.5rem;
}

.acf-field.acf-field-group > .acf-label {
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1.5px solid var(--color-border);
}

.acf-field.acf-field-group > .acf-label label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}

/* Grouped inner fields container (field groups only, not repeater rows) */
.acf-field-group > .acf-input > .acf-fields.-border,
.acf-field-group > .acf-input > .acf-fields.-left,
.acf-field-group > .acf-input > .acf-fields.-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 1.25rem;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* Repeater inner field rows — no card treatment, let ACF handle layout */
.acf-repeater .acf-fields,
.acf-repeater .acf-fields.-border,
.acf-repeater .acf-fields.-left,
.acf-repeater .acf-fields.-top {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* ACF repeater rows render as <td class="acf-fields -left">.
   The base display:flex rule above would change that <td> to a flex
   container, breaking the table layout and preventing clicks inside
   the repeater. Restore it to table-cell. */
.acf-table td.acf-fields {
  display: table-cell !important;
}

/* Hide the ACF clone/template row.
   acf-input.css normally provides this, but if it temporarily fails
   to load (e.g. during dev) the row becomes visible and non-interactive.
   Belt-and-suspenders: always hide clone rows ourselves. */
.acf-row.acf-clone {
  display: none !important;
}

/* ── Label placement override ──────────────────────────────────────────
   acf-input.css applies float:left + fixed width + left padding +
   background to .acf-label inside .-left placement containers. This
   pushes labels into a narrow grey left column, compressing everything.
   Override globally so ALL frontend form labels stack above their inputs
   (top placement), with no padding or background from acf-input.css. */
form.frontend-form .acf-label {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  vertical-align: top; /* harmless reset */
}
form.frontend-form .acf-input {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* ── Kill the ACF .-left ::before grey column ─────────────────────────
   acf-input.css injects a position:absolute pseudo-element on every
   .acf-field inside .-left containers:
     .acf-fields.-left > .acf-field::before { content:""; background:#f9f9f9;
       width:20%; position:absolute; top:0; bottom:0; left:0; z-index:0; }
   This grey block overlays the left 20% of each field, obscures radio
   pills, and causes the persistent grey column artifact.
   Kill it entirely with content:none — this is the single most impactful
   override needed to restore a clean layout. */
form.frontend-form .acf-fields > .acf-field::before,
form.frontend-form .acf-fields.-left > .acf-field::before,
form.frontend-form .acf-fields.-top > .acf-field::before,
form.frontend-form .acf-fields.-border > .acf-field::before {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  position: static !important;
}

/* ── Remove ACF field separator borders ───────────────────────────────
   acf-input.css adds:
     .acf-fields > .acf-field { border-top: 1px solid #eaecf0 }
     .acf-field[data-width] + .acf-field[data-width] { border-left: 1px solid #eee }
   These lines between fields look wrong in our pill-card design.
   Remove them — our card container borders provide visual separation. */
form.frontend-form .acf-fields > .acf-field {
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}
form.frontend-form .acf-field[data-width] + .acf-field[data-width] {
  border-left: none !important;
}

/* ── Department + Job Category side-by-side layout ────────────────────
   FEA sets these fields to style="width:auto" which overrides our
   .acf-field { width:100% } rule. Force them to a proper 50/50 split
   with a gap, overriding the inline style via !important. */
.acf-field[data-name="department"] {
  width: 50% !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box !important;
}
.acf-field[data-name="job_category"] {
  width: 50% !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
/* Make the job_category select fill its container */
.acf-field[data-name="job_category"] select {
  width: 100% !important;
}

/* Hidden fields */
.acf-field.acf-hidden,
.acf-field[style*="display:none"],
.acf-field[style*="display: none"] {
  display: none !important;
}


/* ============================================================
   3. LABELS
   ============================================================ */

.acf-label {
  margin-bottom: 0.375rem;
}

.acf-label label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: 0.01em;
  line-height: 1.4;
  cursor: default;
}

/* Required asterisk */
.acf-label .acf-required {
  color: var(--color-coral);
  margin-left: 2px;
}

/* Field description / hint */
.acf-label p.description,
.acf-label .description {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0.25rem 0 0;
  line-height: 1.45;
}


/* ============================================================
   4. BASE INPUT STYLES (text, email, url, number, password)
   ============================================================ */

/* Prefix with form.frontend-form to beat acf-input.css specificity */
form.frontend-form .acf-input input[type="text"],
form.frontend-form .acf-input input[type="email"],
form.frontend-form .acf-input input[type="url"],
form.frontend-form .acf-input input[type="number"],
form.frontend-form .acf-input input[type="password"],
form.frontend-form .acf-input input[type="search"],
form.frontend-form .acf-input input[type="tel"],
form.frontend-form .acf-input input.search {
  width: 100%;
  padding: 0.6875rem 0.9375rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-dark);
  background: #fff;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  line-height: 1.5;
  box-shadow: none;
  outline: none;
  height: auto;
}

form.frontend-form .acf-input input[type="text"]:focus,
form.frontend-form .acf-input input[type="email"]:focus,
form.frontend-form .acf-input input[type="url"]:focus,
form.frontend-form .acf-input input[type="number"]:focus,
form.frontend-form .acf-input input[type="password"]:focus,
form.frontend-form .acf-input input[type="tel"]:focus,
form.frontend-form .acf-input input.search:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(23, 122, 111, 0.12);
  background: #fff;
  outline: none;
}

.acf-input input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Input wrap — remove any default padding/margin */
.acf-input-wrap {
  position: relative;
  display: block;
}


/* ============================================================
   5. TEXTAREA
   ============================================================ */

form.frontend-form .acf-input textarea,
form.frontend-form .acf-input .wp-editor-area {
  width: 100%;
  padding: 0.6875rem 0.9375rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-dark);
  background: #fff;
  resize: vertical;
  min-height: 120px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  line-height: 1.5;
  outline: none;
  box-shadow: none;
}

form.frontend-form .acf-input textarea:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(23, 122, 111, 0.12);
  outline: none;
}


/* ============================================================
   6. SELECT (native) — also used for taxonomy fields when Select2
   is disabled via the acf/fields/taxonomy/field filter
   ============================================================ */

/* Taxonomy field wrapper — ensure full width */
.acf-taxonomy-field {
  display: block;
  width: 100%;
}

.acf-taxonomy-field select {
  width: 100%;
}

form.frontend-form .acf-input select,
form.frontend-form .acf-taxonomy-field select {
  width: 100%;
  padding: 0.6875rem 2.25rem 0.6875rem 0.9375rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-dark);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23556070' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  box-sizing: border-box;
  outline: none;
}

form.frontend-form .acf-input select:focus,
form.frontend-form .acf-taxonomy-field select:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(23, 122, 111, 0.12);
  outline: none;
}


/* ============================================================
   7. SELECT2 (enhanced select)
   ============================================================ */

.select2-container {
  width: 100% !important;
  box-sizing: border-box;
}

/* Single select trigger */
.select2-container--default .select2-selection--single {
  width: 100%;
  height: auto;
  padding: 0.6875rem 2.25rem 0.6875rem 0.9375rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-dark);
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  outline: none;
  box-shadow: none;
  line-height: 1.5;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(23, 122, 111, 0.12);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: inherit;
  color: var(--color-dark);
  font-size: 0.9375rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-text-muted);
}

/* Down arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0.75rem;
  width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--color-text-secondary) transparent transparent transparent;
  border-width: 5px 4px 0 4px;
  margin-top: -3px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--color-teal) transparent;
  border-width: 0 4px 5px 4px;
}

/* Multiple select */
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 0.4375rem 0.5rem;
  min-height: 46px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(23, 122, 111, 0.12);
  outline: none;
}

/* Selected tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--color-teal-light);
  border: 1px solid var(--color-teal-border);
  border-radius: var(--radius-full);
  color: var(--color-teal);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem 0.1875rem 0.375rem;
  margin: 0.125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--color-teal);
  margin-right: 2px;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  opacity: 1;
  color: var(--color-coral);
}

/* Dropdown panel */
.select2-dropdown {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: #fff;
  overflow: hidden;
  z-index: 9999;
}

.select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -2px;
}

.select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: -2px;
}

/* Search inside dropdown */
.select2-container--default .select2-search--dropdown {
  padding: 0.625rem;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-dark);
  background: #fff;
  outline: none;
  box-shadow: none;
  transition: border-color 180ms ease;
  box-sizing: border-box;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 2px rgba(23, 122, 111, 0.1);
}

/* Results list */
.select2-results__options {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.375rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.select2-results__option {
  padding: 0.5625rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 120ms ease;
  line-height: 1.4;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--color-teal-light);
  color: var(--color-teal);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--color-teal-light);
  color: var(--color-teal);
  font-weight: 600;
}

.select2-container--default .select2-results__option--disabled {
  color: var(--color-text-muted);
  opacity: 0.6;
  cursor: default;
}

.select2-results__message,
.select2-results__option.loading-results {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  padding: 0.75rem 0.875rem;
  text-align: center;
}

/* ── Taxonomy fields: force native <select>, suppress Select2 ──────────
   FEA / ACF Pro init Select2 via JS even after our prepare_field filter.
   Belt-and-suspenders: hide the Select2 widget and un-clip the native
   <select> (which Select2 hides with clip + position:absolute).
   ----------------------------------------------------------------------- */

/* 1. Hide the Select2 trigger widget */
form.frontend-form .acf-taxonomy-field .select2-container {
  display: none !important;
}

/* 2. Restore the native <select> that Select2 clipped/hidden */
form.frontend-form .acf-taxonomy-field select.select2-hidden-accessible {
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  position: static !important;
  display: block !important;
  width: 100% !important;
  padding: 0.6875rem 2.25rem 0.6875rem 0.9375rem !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  color: var(--color-dark) !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23556070' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.875rem center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

form.frontend-form .acf-taxonomy-field select.select2-hidden-accessible:focus {
  border-color: var(--color-teal) !important;
  box-shadow: 0 0 0 3px rgba(23, 122, 111, 0.12) !important;
}


/* ============================================================
   8. RADIO BUTTONS
   ============================================================ */

/* ── All radio rules use !important to beat acf-input.css (loads at priority 200) ──
   Key offenders in acf-input.css:
     ul.acf-radio-list li label { display: inline }        ← kills our pill
     ul.acf-radio-list li { position: relative }           ← interferes with stacking
     ul.acf-radio-list.acf-hl li { margin-right: 20px }   ← adds unwanted margin */
ul.acf-radio-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  border: none !important;
  background: transparent !important;
  position: static !important;
}

/* Horizontal layout */
ul.acf-radio-list.acf-hl {
  flex-direction: row !important;
  align-items: center !important;
}

/* Block layout — override to horizontal wrapping pills */
ul.acf-radio-list.acf-bl {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

ul.acf-radio-list li {
  display: block !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  line-height: normal !important;
}

ul.acf-radio-list li label {
  display: inline-flex !important;  /* acf-input.css sets display:inline — must override */
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.875rem !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-full) !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  background: #fff !important;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  user-select: none !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

ul.acf-radio-list li label:hover {
  border-color: var(--color-teal-border) !important;
  background: var(--color-teal-light) !important;
  color: var(--color-teal) !important;
}

ul.acf-radio-list li input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 1rem !important;
  height: 1rem !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: 50% !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: border-color 180ms ease, background 180ms ease !important;
  position: relative !important;
  outline: none !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

ul.acf-radio-list li input[type="radio"]::after {
  content: '' !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--color-teal) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  transition: transform 160ms ease !important;
}

ul.acf-radio-list li input[type="radio"]:checked {
  border-color: var(--color-teal) !important;
  background: var(--color-teal-light) !important;
}

ul.acf-radio-list li input[type="radio"]:checked::after {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Selected state: highlight the whole pill */
ul.acf-radio-list li:has(input[type="radio"]:checked) label {
  border-color: var(--color-teal) !important;
  background: var(--color-teal-light) !important;
  color: var(--color-teal) !important;
  font-weight: 600 !important;
}


/* ============================================================
   9. CHECKBOXES
   ============================================================ */

ul.acf-checkbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

ul.acf-checkbox-list.acf-hl {
  flex-direction: row;
}

ul.acf-checkbox-list.acf-bl {
  flex-direction: column;
  gap: 0.375rem;
}

ul.acf-checkbox-list li {
  display: block;
  margin: 0;
  padding: 0;
}

ul.acf-checkbox-list li label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: #fff;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
  user-select: none;
  line-height: 1.4;
}

ul.acf-checkbox-list li label:hover {
  border-color: var(--color-teal-border);
  background: var(--color-teal-light);
  color: var(--color-teal);
}

ul.acf-checkbox-list li input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
  position: relative;
  outline: none;
}

ul.acf-checkbox-list li input[type="checkbox"]::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(45deg) scale(0);
  transition: transform 150ms ease;
}

ul.acf-checkbox-list li input[type="checkbox"]:checked {
  background: var(--color-teal);
  border-color: var(--color-teal);
}

ul.acf-checkbox-list li input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

ul.acf-checkbox-list li:has(input[type="checkbox"]:checked) label {
  border-color: var(--color-teal);
  background: var(--color-teal-light);
  color: var(--color-teal);
  font-weight: 600;
}


/* ============================================================
   10. TRUE/FALSE (Toggle)
   ============================================================ */

.acf-field-true-false .acf-label {
  margin-bottom: 0;
}

.acf-true-false label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.acf-true-false input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 2.5rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 220ms ease;
  flex-shrink: 0;
  outline: none;
}

.acf-true-false input[type="checkbox"]::after {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: left 220ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.acf-true-false input[type="checkbox"]:checked {
  background: var(--color-teal);
}

.acf-true-false input[type="checkbox"]:checked::after {
  left: calc(100% - 19px);
}


/* ============================================================
   11. URL FIELD (with globe icon)
   ============================================================ */

.acf-input-wrap.acf-url {
  position: relative;
  display: flex;
  align-items: center;
}

.acf-input-wrap.acf-url input[type="url"] {
  padding-left: 2.5rem;
}

.acf-input-wrap.acf-url .acf-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

/* Replace ACF's icon font with an SVG globe via CSS */
.acf-input-wrap.acf-url .acf-icon.-globe::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C97A3' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}


/* ============================================================
   12. PREPEND / APPEND (e.g., $ prefix on salary field)
   NOTE: .acf-input-prepend is a SIBLING of .acf-input-wrap,
   both children of .acf-input — so .acf-input must be flex.
   ============================================================ */

/* Make .acf-input a flex row only when it contains a prepend/append.
   Uses form.frontend-form prefix + !important to beat the
   "form.frontend-form .acf-input { display:block !important }" rule above. */
form.frontend-form .acf-input:has(.acf-input-prepend),
form.frontend-form .acf-input:has(.acf-input-append) {
  display: flex !important;
  align-items: stretch !important;
}

/* The input-wrap takes remaining space */
.acf-input:has(.acf-input-prepend) .acf-input-wrap,
.acf-input:has(.acf-input-append) .acf-input-wrap {
  flex: 1;
  min-width: 0;
}

.acf-input-prepend,
.acf-input-append {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.acf-input-prepend {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.acf-input-append {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Round only the right side of a prepended input */
.acf-input-wrap .acf-is-prepended {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  width: 100%;
}

/* Round only the left side of an appended input */
.acf-input-wrap .acf-is-appended {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  width: 100%;
}


/* ============================================================
   13. GOOGLE MAPS FIELD
   ============================================================ */

.acf-google-map {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.acf-google-map .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}

.acf-google-map .search {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-dark);
  background: #fff;
  outline: none;
  transition: border-color 180ms ease;
}

.acf-google-map .search:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 2px rgba(23, 122, 111, 0.1);
}

.acf-google-map .acf-actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
}

.acf-google-map .acf-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 1;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 180ms ease, background 180ms ease;
  font-size: 0;
  color: transparent;
  vertical-align: middle;
}

.acf-google-map .acf-icon:hover {
  border-color: var(--color-teal-border);
  background: var(--color-teal-light);
}

/* SVG icon replacements — ACF's glyph font is suppressed above (font-size:0)
   so we inject each icon as a ::before background image instead. */
.acf-google-map .acf-icon::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Magnifying-glass: search */
.acf-google-map .acf-icon.-search::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C97A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}

/* X: clear / cancel */
.acf-google-map .acf-icon.-cancel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C97A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Crosshair: find current location */
.acf-google-map .acf-icon.-location::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C97A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
}

/* Override ACF's acf-input.css which forces display:inline-block and
   applies a -4px top margin on the ::before icon — both of which
   prevent proper centering. */
.acf-google-map .title .acf-icon.-location {
  display: flex !important;
}
.acf-google-map .acf-actions .acf-icon.-location::before {
  margin: auto !important;
}

.acf-google-map .canvas {
  border-top: 1px solid var(--color-border-light);
}


/* ============================================================
   14. REPEATER
   ============================================================ */

/* Give the repeater field the same card treatment as field groups.
   Without this the repeater renders "outside" the white containers
   because it is a direct sibling of field groups in acf-form-fields,
   not wrapped by a field-group that gets the card styling. */
form.frontend-form .acf-field.acf-field-repeater {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem !important; /* !important needed: base .acf-field { padding:0 !important } would otherwise win */
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* Repeater label inside the card — section heading style */
form.frontend-form .acf-field.acf-field-repeater > .acf-label {
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1.5px solid var(--color-border);
}
form.frontend-form .acf-field.acf-field-repeater > .acf-label label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}

.acf-repeater {
  margin-top: 0.5rem;
}

/* Table */
.acf-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
}

/* Rows */
.acf-table .acf-row {
  border-bottom: 1px solid var(--color-border-light);
}

.acf-table .acf-row:last-child {
  border-bottom: none;
}

/* All row tds: vertical-align top by default */
.acf-table .acf-row td {
  padding: 1.5rem 1rem 1rem 1.5rem !important;
  vertical-align: top !important;
}

/* Content td — specificity (0,3,1) = 31 beats .acf-repeater .acf-fields.-left (0,3,0) = 30
   which sets padding:0 !important and was wiping out the td padding rule above. */
.acf-table .acf-row td.acf-fields {
  padding: 1.5rem 1rem 1rem 1.5rem !important;
  vertical-align: top !important;
}

/* Row handle (drag + remove) — specificity (0,3,1) so it overrides the generic td rule */
.acf-row-handle {
  width: 36px !important;
  text-align: center !important;
}
.acf-table .acf-row td.acf-row-handle {
  padding: 0.5rem 0.25rem !important;
  vertical-align: middle !important;
}

.acf-row-handle.order {
  cursor: grab;
  color: var(--color-text-muted);
}

/* Remove pseudo drag-dot glyph — it clashes with the collapse icon */
.acf-row-handle.order::before {
  content: none !important;
}

/* Handle cell icons: use flex so the Dashicon glyph is centered both
   horizontally AND vertically inside the circle.
   display:block (our previous value) only centered horizontally via
   text-align:center, leaving the glyph at the top of the circle. */
.acf-row-handle .acf-icon.-collapse,
.acf-row-handle .acf-icon.-plus,
.acf-row-handle .acf-icon.-minus,
.acf-row-handle .acf-icon.-duplicate {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 4px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 1 !important;
  font-size: 14px !important;
}

.acf-row-handle .acf-row-number {
  display: block !important;
  text-align: center !important;
  font-size: 0.6875rem !important;
  color: var(--color-text-muted) !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

/* Repeater action icons — base styles.
   ACF renders these using Dashicons (font glyphs) via acf-global.css
   ::before { font-family: dashicons; content: "\f543" } which loads
   after our CSS. We let Dashicons render and just fix the container
   to perfectly center the glyph using flex. */
.acf-icon.-plus,
.acf-icon.-minus,
.acf-icon.-duplicate,
.acf-icon.-collapse {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 150ms ease, border-color 150ms ease !important;
  border: 1.5px solid var(--color-border) !important;
  background: #fff !important;
  position: relative !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  font-size: 14px !important;  /* matches Dashicon glyph size */
  color: var(--color-text-secondary) !important;
  vertical-align: middle !important;
}

.acf-icon.-plus:hover  { background: var(--color-teal-light) !important; border-color: var(--color-teal) !important; color: var(--color-teal) !important; }
.acf-icon.-minus:hover { background: var(--color-coral-light) !important; border-color: var(--color-coral) !important; color: var(--color-coral) !important; }

/* ── Icon SVG approach ────────────────────────────────────────────────
   Dashicons (font-family:dashicons) is NOT enqueued on the frontend,
   so acf-global.css' ::before { content:"\f543" } renders as a blank
   glyph — producing empty circles. Replace ALL four icons with inline
   SVG data URIs. Use content:''!important to override Dashicons content.
   Also kill any ::after CSS-shape remnants from acf-global.css. */
.acf-icon.-plus::before,
.acf-icon.-minus::before,
.acf-icon.-collapse::before,
.acf-icon.-duplicate::before {
  content: '' !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  font-family: inherit !important; /* stop Dashicons from hijacking the font */
  line-height: 1 !important;
}

/* Plus icon */
.acf-icon.-plus::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z' fill='%23667085'/%3E%3C/svg%3E") !important;
}
.acf-icon.-plus:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z' fill='%2314a89d'/%3E%3C/svg%3E") !important;
}

/* Minus icon */
.acf-icon.-minus::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11H5v2h14z' fill='%23667085'/%3E%3C/svg%3E") !important;
}
.acf-icon.-minus:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11H5v2h14z' fill='%23e05252'/%3E%3C/svg%3E") !important;
}

/* Collapse / sort handle icon (hamburger lines) */
.acf-icon.-collapse::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' fill='%23667085'/%3E%3C/svg%3E") !important;
}

/* Duplicate / copy icon */
.acf-icon.-duplicate::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z' fill='%23667085'/%3E%3C/svg%3E") !important;
}

/* Kill any CSS-shape ::after pseudo-elements that acf-global.css adds */
.acf-icon.-duplicate::after,
.acf-icon.-collapse::after,
.acf-icon.-trash::after {
  content: none !important;
  display: none !important;
}

/* Ensure repeater inputs are always interactive.
   FEA's fea-public-pro-css or acf-input.css can sometimes set
   pointer-events / z-index in ways that make inputs unclickable. */
form.frontend-form .acf-repeater .acf-field input,
form.frontend-form .acf-repeater .acf-field textarea,
form.frontend-form .acf-repeater .acf-field select,
form.frontend-form .acf-repeater .wp-editor-wrap,
form.frontend-form .acf-repeater .wp-editor-area {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Make sure the row itself doesn't clip its content */
form.frontend-form .acf-table .acf-row,
form.frontend-form .acf-table .acf-fields {
  overflow: visible !important;
}

/* Add Row button */
.acf-button.acf-repeater-add-row,
.acf-repeater .acf-button.button-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.125rem;
  background: transparent;
  border: 1.5px solid var(--color-teal);
  border-radius: var(--radius-sm);
  color: var(--color-teal);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
  line-height: 1.4;
}

.acf-button.acf-repeater-add-row:hover,
.acf-repeater .acf-button.button-primary:hover {
  background: var(--color-teal);
  color: #fff;
}

.acf-repeater .acf-actions {
  padding: 0.75rem 0 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.clear { clear: both; }


/* ============================================================
   15. WYSIWYG (TinyMCE) EDITOR
   ============================================================ */

.wp-editor-container {
  border: 1.5px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

.wp-editor-tabs {
  display: flex;
  background: var(--color-bg);
  border-bottom: 1.5px solid var(--color-border);
  padding: 0 0.5rem;
  gap: 0;
}

.wp-switch-editor {
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
  line-height: 1.4;
  margin-bottom: -1.5px;
}

.wp-switch-editor:hover,
.wp-switch-editor.active,
.wp-switch-editor[aria-pressed="true"] {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
}

.mce-toolbar-grp,
.mce-container,
.mce-panel {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
}

.wp-editor-area {
  border-top: 1.5px solid var(--color-border);
}


/* ============================================================
   16. DATE / TIME PICKER (jQuery UI)
   ============================================================ */

.ui-datepicker,
.ui-timepicker-div {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-dark);
  padding: 0.75rem;
  z-index: 9999 !important;
}

.ui-datepicker-header {
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ui-datepicker-title {
  font-weight: 600;
  color: var(--color-dark);
}

.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 150ms ease;
  font-size: 0;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: var(--color-teal-light);
  color: var(--color-teal);
}

.ui-datepicker table {
  width: 100%;
  border-collapse: collapse;
}

.ui-datepicker th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.25rem;
  text-align: center;
}

.ui-datepicker td {
  padding: 2px;
  text-align: center;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: block;
  padding: 0.25rem 0.375rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-dark);
  font-size: 0.8125rem;
  transition: background 120ms ease;
}

.ui-datepicker td a:hover,
.ui-datepicker .ui-state-hover {
  background: var(--color-teal-light);
  color: var(--color-teal);
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
  background: var(--color-teal) !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
}


/* ============================================================
   17. VALIDATION ERRORS
   ============================================================ */

/* Invalid field */
.acf-field.-invalid .acf-input input,
.acf-field.-invalid .acf-input textarea,
.acf-field.-invalid .acf-input select,
.acf-field.-invalid .select2-selection {
  border-color: var(--color-coral) !important;
  box-shadow: 0 0 0 3px rgba(201, 75, 56, 0.1) !important;
}

.acf-field.-invalid .acf-label label {
  color: var(--color-coral);
}

/* Error message under a field */
.acf-field .acf-error-message,
.acf-field .-error {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-coral);
  font-weight: 500;
}

/* Form-level notice banner */
.acf-notice,
.fea-notice {
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1.5px solid;
  text-align: center;
}

.acf-notice.-error,
.fea-notice.-error,
.fea-notice.error {
  background: var(--color-coral-light);
  border-color: rgba(201, 75, 56, 0.3);
  color: var(--color-coral);
}

.acf-notice.-success,
.fea-notice.-success,
.fea-notice.success {
  background: var(--color-teal-light);
  border-color: var(--color-teal-border);
  color: var(--color-teal);
}

.acf-notice.-warning,
.fea-notice.-warning {
  background: #FFF8E6;
  border-color: rgba(200, 145, 0, 0.3);
  color: #7a5800;
}


/* ============================================================
   18. SUBMIT BUTTON
   ============================================================ */

form.frontend-form [type="submit"],
form.frontend-form button[type="submit"],
.fea-form-submit,
.acf-form-submit input[type="submit"],
.frontend-form .button.button-primary:not(.acf-repeater-add-row) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 2rem;
  background: var(--color-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: 0 2px 8px rgba(23, 122, 111, 0.2);
  min-width: 160px;
}

form.frontend-form [type="submit"]:hover,
form.frontend-form button[type="submit"]:hover,
.fea-form-submit:hover,
.frontend-form .button.button-primary:not(.acf-repeater-add-row):hover {
  background: var(--color-teal-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(23, 122, 111, 0.3);
}

form.frontend-form [type="submit"]:active,
form.frontend-form button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Loading state */
form.frontend-form [type="submit"]:disabled,
form.frontend-form button[type="submit"]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Submit wrapper */
.acf-form-submit,
.fea-submit-wrapper {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Submit button field — centered.
   Needs !important on both rules to beat:
     .acf-field           { display: block !important }       ← kills flex on the field
     form.frontend-form .acf-input { display: block !important } ← kills flex on the input */
.acf-field[data-type="submit_button"],
.acf-field.acf-field-submit-button {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}

.acf-field[data-type="submit_button"] .acf-input,
.acf-field.acf-field-submit-button .acf-input {
  display: flex !important;
  justify-content: center !important;
}


/* ============================================================
   19. LOADING INDICATOR
   ============================================================ */

.acf-loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-teal);
  border-radius: 50%;
  animation: cathlab-spin 0.7s linear infinite;
}

@keyframes cathlab-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   20. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  /* Stack all half-width fields */
  .acf-field[data-width] {
    width: 100% !important;
    padding-right: 0 !important;
  }

  .acf-fields.-border,
  .acf-fields.-left,
  .acf-fields.-top {
    padding: 1rem;
  }

  /* Stack radio/checkbox pills */
  ul.acf-radio-list.acf-hl,
  ul.acf-checkbox-list.acf-hl {
    flex-direction: column;
  }

  /* Full-width submit button */
  form.frontend-form [type="submit"],
  form.frontend-form button[type="submit"] {
    width: 100%;
  }
}