/* ==========================================================
   Aplify – Search Form & Job Cards
   Tokens defined in aplify-tokens.css (scoped to :root)
   ========================================================== */

/* -----------------------------
   SEARCH FORM LAYOUT
--------------------------------*/

.aplify-search-form-container {
  container-type: inline-size;
  container-name: aplify-search-form;
}

.aplify-search-form {
  display: grid;
  gap: var(--form-gap);
  padding: var(--panel-padding-top)
           var(--panel-padding-right)
           var(--panel-padding-bottom)
           var(--panel-padding-left);
  background: var(--bg);
  border-radius: var(--panel-radius);
  margin: 0 auto;
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.aplify-form-group {
  display: grid;
  gap: var(--group-gap);
  min-width: 0;
  margin-bottom: 0;
}

.aplify-form-group label {
  display: var(--label-display);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  color: var(--label-color);
  margin-bottom: 0;
}

/* Active filter chips — sits below the whole search panel, deliberately
   outside .aplify-search-form's own grid (see search_form.php) so it can
   never disrupt that row's layout in either the wide or narrow variant. */
.aplify-active-filters {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.aplify-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--filter-chip-bg, var(--view-toggle-bg, var(--panel-border))) !important;
  color: var(--filter-chip-text, var(--muted)) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 4px 10px !important;
  font-size: var(--filter-chip-size, .9rem) !important;
  font-weight: var(--label-weight);
  font-family: var(--font-family);
  cursor: pointer;
}

.aplify-filter-chip:hover {
  background: var(--filter-chip-bg, var(--view-toggle-bg, var(--panel-border))) !important;
}

.aplify-filter-chip i {
  font-size: 1em;
}

.aplify-clear-all-filters {
  background: none !important;
  border: none !important;
  color: var(--clear-filters-text, var(--muted)) !important;
  font-size: var(--clear-filters-size, .7rem) !important;
  font-family: var(--font-family);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 4px !important;
}

/* Wide layout (full-width page, or a roomy content column): the classic
   horizontal row. This now responds to the actual space this shortcode
   has been given — not the viewport — so the exact same shortcode dropped
   into a narrow sidebar column automatically gets the stacked layout
   below instead, with no attribute or flag needed on either shortcode. */
@container aplify-search-form (min-width: 640px) {
  .aplify-search-form {
    /* auto-fit rather than a fixed repeat(--field-count): a filter now has a
       real minimum width, so instead of every field shrinking together until
       the labels truncate ("All Categ..."), the row wraps onto a second line
       once the container can't fit them all. Handles any combination of
       container width and filter count with one rule — the previous
       repeat(--field-count, minmax(0, 1fr)) let fields shrink to zero, which
       is why six filters in a ~645px container squashed instead of wrapping.
       --search-field-max-width defaults to 1fr, preserving the original
       fill-the-row behaviour unless a site opts into a fixed cap. */
    /* FLEX, not grid. Both wrap; they differ in what happens to the last row.
       Grid puts wrapped items into the SAME fixed tracks, so one leftover
       field sits in a 220px track with 480px of empty tracks beside it — the
       stranded-orphan look. Flex lets the items on a short row grow to fill
       it, so a row that wraps is always a full row. That is the "if one flows
       over, the row shares itself out" behaviour, achieved by the layout
       rather than by counting fields.

       True balancing — 3+3 rather than 5+1 — is not expressible in CSS: it
       needs the item count at layout time, which only JS has. Filling the row
       gets the visual result that matters without that. */
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: center;
  }

  /* Every field and the button share one basis, so they wrap as equals and
     grow together. min-width:0 stops a long <option> from forcing a track
     wider than its share, which is what made fields overflow the panel. */
  @container aplify-search-form (min-width: 640px) {
    .aplify-search-form > *,
    .aplify-search-form .aplify-form-secondary > * {
      flex: 1 1 var(--search-field-min-width, 170px);
      max-width: var(--search-field-max-width, none);
      min-width: 0;
    }
  }

  /* More-filters toggle only exists for the narrow layout — in the wide
     row every field is already visible, so the toggle button is hidden
     and the "secondary" fields wrapper is unwrapped via display:contents
     so its fields sit as normal siblings in the row's grid, ignoring
     whatever Alpine's x-show has set inline. */
  .aplify-search-form .aplify-more-filters-toggle {
    display: none;
  }

  .aplify-form-secondary {
    display: contents !important;
  }
}

/* Narrow layout (sidebar column, or a genuinely narrow viewport): fields
   stack vertically, Region/UK Region/Category/Role tuck behind "More
   filters" so the form doesn't turn into a long scroll before the results
   even start. */
@container aplify-search-form (max-width: 639px) {
  .aplify-search-form .aplify-more-filters-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: var(--input-bg) !important;
    border: var(--field-border-w) solid var(--field-border) !important;
    border-radius: var(--radius);
    color: var(--fg) !important;
    font-size: var(--font-size);
    font-family: var(--font-family);
    cursor: pointer;
  }

  .aplify-search-form .aplify-more-filters-toggle.is-active {
    border-color: var(--primary) !important;
  }

  .aplify-search-form .aplify-more-filters-icon {
    margin-left: auto;
    font-size: var(--text-md, 16px);
    font-weight: var(--weight-body, 400);
    color: var(--muted);
  }

  .aplify-search-form .aplify-more-filters-count {
    background: var(--primary);
    color: var(--button-text-color);
    border-radius: 999px;
    font-size: var(--job-chrome-size, .75rem);
    font-weight: var(--weight-strong, 600);
    padding: 1px 8px;
    line-height: 1.5;
  }

  .aplify-form-secondary {
    display: grid;
    gap: var(--form-gap);
  }
}

/* -----------------------------
   INPUTS + SELECTS
--------------------------------*/

.aplify-form-group input,
.aplify-form-group select,
.aplify-search-form input[type="text"],
.aplify-search-form select {
  appearance: none;
  width: 100%;
  height: var(--field-h);
  padding: 0 14px;
  border: var(--field-border-w) solid var(--field-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--fg);
  box-shadow: var(--control-shadow);
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--font-size);
  transition: border-color .2s, box-shadow .2s;
}

.aplify-form-group input:focus,
.aplify-form-group select:focus,
.aplify-search-form input[type="text"]:focus,
.aplify-search-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgb(from var(--primary) r g b / 0.15);
}

/* Placeholder */
.aplify-form-group input::placeholder,
.aplify-search-form input[type="text"]::placeholder {
  color: var(--placeholder-color);
  opacity: var(--placeholder-opacity);
}

/* -----------------------------
   LOCATION AUTOCOMPLETE
--------------------------------*/

.aplify-location-autocomplete .location-input-wrapper {
  position: relative;
}

.location-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--input-bg);
  border: var(--field-border-w) solid var(--field-border);
  border-top: none;
  max-height: var(--menu-max-height);
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--panel-shadow);
  border-radius: min(var(--radius), 16px);
}

.suggestion-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--panel-border);
  color: var(--fg);
  font-family: var(--font-family);
  font-size: var(--font-size);
  transition: background-color .2s;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background-color: var(--dropdown-hover);
}

.suggestion-item:active {
  background-color: var(--bg);
}

.suggestion-loading {
  padding: 15px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-family: var(--font-family);
}

/* -----------------------------
   SEARCH BUTTON
--------------------------------*/

.aplify-search-form button[data-testid="search-button"] {
  height: var(--field-h);
  padding: 0 22px;
  border: none;
  /* Matches --radius directly, not --btn-radius (which is calc(--radius +
     2px), used by standalone buttons elsewhere on the site). This button
     sits in the same row as the keyword/location fields and the roles
     dropdown, all of which use --radius directly — at the default ~999px
     pill radius a 2px offset is invisible, but once --radius is set to a
     normal rectangular value (10px, say), that same 2px becomes a visibly
     mismatched corner against everything beside it. */
  border-radius: var(--radius);
  background: var(--search-btn-bg, var(--highlight)) !important;
  color: var(--search-btn-text, var(--button-text-color)) !important;
  font-weight: var(--button-weight);
  font-family: var(--font-family);
  font-size: var(--font-size);
  text-transform: var(--btn-text-transform);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover */
.aplify-search-form button[data-testid="search-button"]:hover {
  background: var(--search-btn-bg-hover, var(--primary-hover)) !important;
  color: var(--search-btn-text-hover, var(--search-btn-text, var(--button-text-color))) !important;
  box-shadow: var(--button-shadow-hover);
  transform: translateY(-1px);
}

/* Active */
.aplify-search-form button[data-testid="search-button"]:active {
  background: var(--search-btn-bg-hover, var(--primary)) !important;
  color: var(--search-btn-text-hover, var(--search-btn-text, var(--button-text-color))) !important;
  transform: translateY(0);
}

/* -----------------------------
   USE MY LOCATION BUTTON
--------------------------------*/

.location-input-wrapper {
  /* Explicit height + border-box, matching every sibling field in the row —
     without this, the wrapper sizes to fit its 55px-tall input and then
     adds its own border on top of that (border added outside the content
     area is the content-box default), landing 3px taller overall than
     every other field, which include their border inside their own
     height via border-box. */
  height: var(--field-h);
  box-sizing: border-box;
  border-radius: var(--radius);
  overflow: hidden; /* clips the button's corner cleanly to the input's own shape */
  border: var(--field-border-w) solid var(--field-border);
  transition: border-color .2s, box-shadow .2s;
  box-shadow: var(--control-shadow);
}

.location-input-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgb(from var(--primary) r g b / 0.15);
}

/* The border and shadow now live on the wrapper (above), which draws one
   continuous edge around the input AND the button together — the button
   sits on top of the input via position:absolute and would otherwise
   visually cover whatever border the input drew on its own right-hand
   side, disappearing completely if the button's own background happens to
   match the field (e.g. white-on-white). */
.aplify-location-autocomplete .search-location {
  /* !important is required here, not just stylistic: the shared base input
     rule (.aplify-search-form input[type="text"]) has higher specificity
     than this selector (its attribute selector outweighs this rule's second
     class), so without !important its fixed height: var(--field-h) would
     silently win and this override would never actually apply. */
  height: 100% !important;
  border: none !important;
  box-shadow: none !important;
  /* Reserves room for the button, which is now a filled segment rather than
     small floating text — sized generously enough for its longer "Stop
     using my location" state, not just the shorter default label. */
  padding-right: 210px;
}

.aplify-location-autocomplete .use-my-location-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 0 15px;
  background: var(--loc-btn-bg, var(--primary)) !important;
  border: none !important;
  /* Only the right corners round, matching the outer field's own curve —
     this sits flush against the middle of the input, not floating free, so
     rounding all four corners would look like a pill inside a pill. Uses
     --radius directly (the same token the location input itself uses),
     not --field-radius — that token belongs to the apply/event forms and
     was deliberately given a different, non-pill default; the search
     form's fields have always been pill-shaped by design. */
  border-radius: 0 var(--radius) var(--radius) 0;

  color: var(--loc-btn-text, var(--button-text-color)) !important;
  font-size: var(--loc-btn-font-size, 0.95rem);
  font-weight: var(--button-weight);
  font-family: var(--font-family);
  white-space: nowrap;

  cursor: pointer;
  outline: none;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover, active, and active+hover each restate background/colour explicitly
   with !important — not just the default state — for the same reason
   documented elsewhere in this plugin (see the recruiter dashboard tabs):
   Elementor's own global button :hover styles frequently carry !important
   themselves, and on an equal-importance tie the browser falls back to
   source order, which can't be reliably guaranteed against a theme's own
   stylesheet. Every state this button can be in needs its own guard, not
   just the resting one. */
.aplify-location-autocomplete .use-my-location-btn:hover {
  background: var(--loc-btn-bg-hover, var(--primary-hover)) !important;
  color: var(--loc-btn-text-hover, var(--loc-btn-text)) !important;
}

.aplify-location-autocomplete .use-my-location-btn.active {
  background: var(--loc-btn-bg-active, var(--highlight)) !important;
  color: var(--loc-btn-text-active, var(--loc-btn-text)) !important;
}

/* Active+hover isn't its own configurable tier — that would be a fourth
   full set of settings for a fairly small affordance. It reuses the active
   background/colour with a touch of darkening instead. */
.aplify-location-autocomplete .use-my-location-btn.active:hover {
  background: var(--loc-btn-bg-active, var(--highlight)) !important;
  color: var(--loc-btn-text-active, var(--loc-btn-text)) !important;
  filter: brightness(0.94);
}

/* Icon before text */
.aplify-location-autocomplete .use-my-location-btn::before {
  content: "";
  flex-shrink: 0;
  width: var(--loc-icon-size, 18px);
  height: var(--loc-icon-size, 18px);

  background-color: var(--loc-btn-icon, var(--button-text-color)) !important;
  transition: background-color .2s ease;

  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='9' r='2.5' fill='none' stroke='black' stroke-width='2'/></svg>") no-repeat center / contain;

          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='9' r='2.5' fill='none' stroke='black' stroke-width='2'/></svg>") no-repeat center / contain;
}

.aplify-location-autocomplete .use-my-location-btn:hover::before {
  background-color: var(--loc-btn-icon-hover, var(--loc-btn-icon)) !important;
}

.aplify-location-autocomplete .use-my-location-btn.active::before {
  background-color: var(--loc-btn-icon-active, var(--loc-btn-icon)) !important;
}

/* =========================================
   APLIFY SELECTIFY STYLING
========================================= */

.aplify-search-form .selectify {
  position: relative;
  width: 100%;
}

/* Hide original select */
.aplify-search-form .selectify > select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Trigger button (styled like input, not CTA) */
.aplify-search-form .selectify__button {
  position: relative;
  width: 100%;
  height: var(--field-h);
  padding: 0 42px 0 14px;
  border: var(--field-border-w) solid var(--field-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--fg);
  font-family: var(--font-family);
  font-size: var(--font-size);
  text-align: left;
  box-shadow: var(--control-shadow);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

/* Kill theme hover/focus overrides */
.aplify-search-form .selectify__button:hover,
.aplify-search-form .selectify__button:focus,
.aplify-search-form .selectify__button:active,
.aplify-search-form .selectify__button:focus-visible {
  outline: none;
  background: var(--input-bg);
  color: var(--fg);
  border-color: var(--field-border);
  box-shadow: var(--control-shadow);
}

/* When dropdown is open */
.aplify-search-form .selectify[aria-expanded="true"] .selectify__button {
  border-color: var(--primary);
}

/* Chevron (uses currentColor so it always matches text) */
.aplify-search-form .selectify__button::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Dropdown panel */
.aplify-search-form .selectify__list {
  position: absolute;
  z-index: 9999;
  left: 0;
  width: 100%;
  margin-top: 6px;
  background: var(--input-bg);
  border: 1px solid var(--field-border);
  border-radius: min(var(--radius), 16px);
  box-shadow: var(--panel-shadow);
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}

/* Open state */
.aplify-search-form .selectify[aria-expanded="true"] .selectify__list {
  display: block;
}

/* Options */
.aplify-search-form .selectify__option {
  padding: 10px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--fg);
  transition: background .15s ease;
}

/* Hover */
.aplify-search-form .selectify__option:hover,
.aplify-search-form .selectify__option[data-highlighted="true"] {
  background: rgb(from var(--primary) r g b / 0.08);
}

/* Selected */
.aplify-search-form .selectify__option[aria-selected="true"] {
  background: rgb(from var(--highlight) r g b / 0.12);
  font-weight: var(--weight-strong, 600);
}
/* ==========================================================
   X-CLOAK (Alpine flash-of-unstyled-content guard)
   ========================================================== */

[x-cloak] { display: none !important; }

/* ==========================================================
   RESULTS HEADER + VIEW TOGGLE
   Deliberately NOT using --primary/--fg design tokens: this is
   interface chrome (page furniture), not client-branded content,
   so it should look the same neutral gray on every client site
   regardless of that client's token config.
   ========================================================== */

.aplify-search-results .aplify-results-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  margin-bottom: 1em;
}

.aplify-results-header .job-count {
  /* Fallback is `inherit`, not a number, on purpose: this element has never
     declared a size, so it currently takes whatever the host theme sets. Any
     literal default would silently resize the count on every existing site.
     inherit preserves that exactly while making the size settable — and a
     client who sets it also stops the count changing size per theme. */
  font-size: var(--job-count-size, inherit);
  font-weight: var(--weight-strong, 600);
  color: var(--fg);
  text-align: right;
  display: inline;
  width: auto;
  margin: 0;
}

.aplify-results-header .aplify-view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--view-toggle-bg, var(--panel-border));
  border-radius: calc(var(--btn-radius) + 2px);
  padding: 2px;
}

.aplify-results-header .aplify-view-toggle .aplify-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: var(--job-chrome-size, 13px);
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
  box-shadow: none !important;
}

.aplify-results-header .aplify-view-toggle .aplify-view-toggle-btn:hover {
  color: var(--fg) !important;
}

.aplify-results-header .aplify-view-toggle .aplify-view-toggle-btn.is-active {
  background: #fff !important;
  color: var(--fg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12) !important;
}

.aplify-results-header .aplify-view-toggle .aplify-view-toggle-btn i {
  font-size: 1.15em;   /* tracks --job-chrome-size rather than pinning at 15px */
}

/* ==========================================================
   JOB LIST (LIST VIEW / COMPACT ROWS)
   Deliberately mirrors the grid card's visual language (badges,
   salary treatment, distance text, entrance animation) so
   switching views doesn't feel like a different product.
   ========================================================== */

.aplify-job-list-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: clamp(16px, 3vw, 24px);
  /* Same fade/slide-in treatment as .aplify-job-list on load. */
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  opacity: 1;
  transform: translateY(0);
}

.aplify-job-list-rows.is-loading {
  opacity: 0;
  transform: translateY(20px);
}

@media (prefers-reduced-motion: reduce) {
  .aplify-job-list-rows.is-loading {
    transition: none;
    transform: none;
  }
}

.aplify-job-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--input-bg);
  padding: 12px 0;
  border-bottom: var(--panel-border-w) solid var(--panel-border);
}

.aplify-job-row:last-child {
  border-bottom: none;
}

.aplify-job-row .job-row-main {
  flex: 1;
  min-width: 0;
}

.aplify-job-row .job-title-link {
  display: block;
  font-weight: var(--display-weight, 550);
}

/* Company name is kept in the DOM (not currently surfaced anywhere in
   search) but visually hidden — same intent as the grid card, which
   never shows it either. */
.aplify-job-row .job-company {
  display: none;
}

.aplify-job-row .job-row-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--job-meta-size, 0.85em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aplify-job-row .job-row-location {
  font-weight: var(--weight-strong, 600);
  color: var(--fg);
}

.aplify-job-row .job-row-category {
  color: var(--placeholder-color, #777);
}

.aplify-job-row .job-row-distance-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-option-clr);
  font-weight: var(--weight-strong, 600);
  font-size: var(--job-meta-size, .85em);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aplify-job-row .job-row-distance-inline i {
  font-size: 1em;
}

.aplify-job-row .job-row-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Salary as a pill, following the same token structure as the grid's
   category/hours badges — colour comes from --highlight (the same
   variable the grid card's plain-text salary already uses), so it
   still inherits whatever a client's token config sets it to. */
.aplify-job-row .job-row-salary {
  background: rgb(from var(--highlight) r g b / 0.08);
  color: var(--highlight);
  border-radius: var(--radius);
  padding: 3px 12px;
  font-size: var(--job-body-size, .75rem);
  font-weight: var(--weight-strong, 600);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aplify-job-row .job-row-hours {
  background: #e6e9f0;
  color: var(--fg);
  border-radius: var(--radius);
  padding: 3px 10px;
  font-size: var(--job-badge-size, .7rem);
  font-weight: var(--label-weight);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.aplify-job-row .job-row-hours i {
  font-size: 1em;
}


.aplify-job-row .job-row-closing {
  flex-shrink: 0;
  font-size: var(--job-meta-size, 0.85em);
  color: var(--placeholder-color, #777);
  white-space: nowrap;
}

@container aplify-search-results (max-width: 700px) {
  .aplify-job-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title  title"
      "meta   meta"
      "badges view";
    align-items: start;
    row-gap: 8px;
    column-gap: 10px;
    padding: 16px 0;
  }

  .aplify-job-row .job-row-main {
    grid-area: title;
    min-width: 0;
  }

  /* Full width, wraps naturally — no truncation. */
  .aplify-job-row .job-title-link {
    white-space: normal;
  }

  .aplify-job-row .job-row-meta {
    grid-area: meta;
  }

  /* Category dropped on mobile — location alone is enough context here,
     and it was truncating awkwardly mid-word in the space available. */
  .aplify-job-row .job-row-category {
    display: none;
  }

  .aplify-job-row .job-row-badges {
    grid-area: badges;
    align-self: center;
    flex-wrap: wrap;
    row-gap: 4px;
    min-width: 0;
  }

  /* Desktop's caps (220px/140px) are sized for a full-width row — on
     mobile, badges share a row with the View button in a much narrower
     column, so an unusually long ATS salary string could still overflow
     past it even while respecting the desktop cap. Smaller caps here,
     plus flex-wrap above, so a genuinely extreme string wraps onto its
     own line rather than pushing the View button out or overflowing. */
  .aplify-job-row .job-row-salary {
    max-width: 130px;
  }

  .aplify-job-row .job-row-hours {
    max-width: 90px;
  }

  .aplify-job-row .job-apply-btn {
    grid-area: view;
    align-self: center;
    justify-self: end;
    padding: 8px 20px;
    font-size: var(--view-details-font-size, .85rem);
    white-space: nowrap;
  }

  /* Closing date dropped on mobile to keep the row to four compact lines. */
  .aplify-job-row .job-row-closing {
    display: none;
  }
}

/* ==========================================================
   JOB LIST GRID
   ========================================================== */

.aplify-search-results {
  container-type: inline-size;
  container-name: aplify-search-results;
}

.aplify-job-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tiles-gap);
  margin-top: clamp(16px, 3vw, 24px);
}

.aplify-job-list {
    transition: opacity 250ms ease-out, transform 250ms ease-out;
    opacity: 1;
    transform: translateY(0);
}

.aplify-job-list.is-loading {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}


@media (prefers-reduced-motion: reduce) {
    .aplify-job-list,
    .aplify-job-list.is-loading {
        transition: none;
        transform: none;
    }
}

@container aplify-search-results (max-width: 1099px) {
  .aplify-job-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container aplify-search-results (max-width: 699px) {
  .aplify-job-list {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* ==========================================================
   JOB CARD
   ========================================================== */

.aplify-job-card {
  display: flex;
  flex-direction: column;
  border: var(--panel-border-w) solid var(--panel-border);
  border-radius: min(var(--panel-radius), 20px);
  background: var(--job-card-bg, var(--input-bg));
  padding: clamp(16px, 1.6vw, 24px) clamp(20px, 2vw, 32px);
  box-shadow: var(--panel-shadow);
  position: relative;
  transition: box-shadow .2s, transform .2s;
}

.aplify-job-card:hover {
  box-shadow: 0 12px 32px rgba(2, 6, 23, .10);
  transform: translateY(-1px);
}

.job-card-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.job-title-link {
  color: var(--job-title-color, var(--primary)) !important;
  font-size: var(--job-title-size, clamp(1rem, 0.95rem + .2vw, 1.2rem))!important;
  font-weight: var(--display-weight, 550);
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-family)!important;
}

.job-title-link:hover {
  color: var(--job-title-color-hover, var(--job-title-color, var(--primary))) !important;
  text-decoration: underline;
}

.job-company-location {
  color: var(--fg);
  font-size: var(--job-body-size, 1rem);
  margin-top: 2px;
  font-family: var(--font-family);
}

.job-company {
  font-weight: var(--weight-strong, 600);
  display: none;
}

.job-location,
.job-region,
.job-normalised-region {
  color: var(--fg);
  font-weight: var(--weight-strong, 600);
	font-size: var(--job-body-size, 1rem);
}

.job-distance-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-option-clr);
  font-weight: var(--weight-strong, 600);
  font-size: var(--job-meta-size, .85em);
  white-space: nowrap;
}

.job-distance-inline i {
  font-size: 1em;
}

.job-salary-cta {
  min-width: 220px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.job-salary {
  color: var(--highlight);
  font-size: var(--job-body-size, 1rem);
  font-weight: var(--weight-strong, 600);
  font-family: var(--font-family);
	line-height: 1.2em;
	margin-top: 3px;
}

.job-card-meta {
  margin: 8px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.job-category-badge {
  background: rgb(from var(--primary) r g b / 0.08);
  color: var(--primary);
  border-radius: var(--radius);
  padding: 3px 12px;
  font-size: var(--job-badge-size, .7rem);
  font-weight: var(--label-weight);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family);
  white-space: nowrap;
}

.job-category-badge i,
.job-hours-badge i {
  font-size: 1em;
}

.job-hours-badge {
  background: var(--view-toggle-bg, #e6e9f0);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 3px 10px;
  font-size: var(--job-badge-size, .7rem);
  font-weight: var(--label-weight);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family);
  white-space: nowrap;
}

.job-card-desc {
  color: var(--fg);
  font-size: var(--job-meta-size, 0.8rem);
	font-weight: var(--weight-body, 400);
  margin-bottom: 16px;
  margin-top: 15px;
  line-height: 1.5;
  width: 100%;
  text-overflow: ellipsis;
  font-family: var(--font-family);
}

.job-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
}

.job-closing-date {
  color: var(--muted);
  font-size: var(--job-meta-size, 0.8rem);
  font-family: var(--font-family);
}

.job-apply-btn {
  color: var(--view-details-text, var(--button-text-color)) !important;
  border: none;
  background: var(--view-details-bg, var(--primary)) !important;
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: var(--view-details-font-size, 0.9rem);
  font-weight: var(--button-weight);
  font-family: var(--font-family)!important;
  text-decoration: none;
  box-shadow: var(--button-shadow);
  transition: background .15s, box-shadow .15s;
  cursor: pointer;
  display: inline-block;
}

.job-apply-btn:hover {
  background: var(--view-details-bg-hover, var(--primary-hover)) !important;
  box-shadow: var(--button-shadow-hover);
  color: var(--view-details-text-hover, var(--view-details-text, var(--button-text-color))) !important;
}

/* ==========================================================
   PAGINATION
   ========================================================== */

.aplify-pagination {
  display: flex;
  /* One gap governs both sides of the page indicator. The indicator used to
     add its own margin-left: 1em on top of this, which is why "Page 2 of 24"
     sat 27px from Prev and 12px from Next — off-centre by half a pill. 20px is
     the average of what those two gaps used to be, so the row keeps the width
     and the breathing room it had, and only loses the lopsidedness. */
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}

.aplify-pagination button {
  border: 1px solid var(--panel-border)!important;
  background: #fff!important;
  color: var(--primary)!important;
  border-radius: var(--btn-radius)!important;
  padding: 10px 18px!important;
  font-size: var(--pagination-size, .95rem)!important;
  font-weight: var(--label-weight)!important;
  font-family: var(--font-family)!important;
  cursor: pointer!important;
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}

.aplify-pagination button:hover:not(:disabled),
.aplify-pagination button.active {
  background: var(--primary);
  color: var(--button-text-color);
  border-color: var(--primary);
  /* Was rgba(0, 89, 148, .25) — the old client blue, hardcoded in a shadow
     where the palette sweep could not see it. Uses the shared button shadow
     token so it follows whatever the buttons elsewhere are doing. */
  box-shadow: var(--button-shadow-hover);
}

.aplify-pagination .pagination-indicator {
  font-size: var(--pagination-size, .95rem);
  color: var(--muted);
  font-family: var(--font-family);
}

.aplify-pagination button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ==========================================================
   JOB COUNT / STATUS STATES
   ========================================================== */

.job-count,
.aplify-no-results {
  display: block;
  width: 100%;
  margin: 30px auto 0;
  text-align: center;
  color: var(--fg);
  /* Declared, not inherited. This rule never set a size, so the message took
     whatever the host theme's body size was — 20px+ on some, which is why it
     read as an announcement rather than a note. */
  font-size: var(--no-results-size, var(--text-md, 16px));
  /* Body weight, not label weight. This is a passive note explaining an empty
     state — it is not a heading and it is not labelling anything, so the extra
     weight only made it insist. */
  font-weight: var(--weight-body, 400);
  font-family: var(--font-family);
}

/* -----------------------------
   LOADING — twin orbit

   Replaces the "Loading jobs..." line. Text at label weight and full ink read
   as a RESULT — the same visual register as the job count right above it —
   so a transient state announced itself as loudly as the content it was
   waiting for. A mark occupies the space without claiming to be information.

   Three dots of one size: a fixed centre and two orbiting it at a 155% radius,
   the second half a cycle behind. Two pseudo-elements rather than child spans,
   so the template stays a single element.
--------------------------------*/

.aplify-loading {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 30px auto 0;
}

/* On the results header row: a flex child among the toggle and the count, so
   it centres between them and sits on their line. Drops the full width and the
   top margin the standalone version needs, and aligns to the row's centre so
   it reads level with the count rather than to its cap height. */
.aplify-results-header .aplify-loading--inline {
  width: auto;
  margin: 0;
  align-items: center;
}

.aplify-loading__orbit {
  position: relative;
  display: inline-block;
  width: var(--loading-dot-size, 8px);
  aspect-ratio: 1;
  border-radius: 999px;
  /* --primary rather than --fg: this is plugin chrome, not page content, and
     it should read as the product's own colour while it waits. */
  background: var(--loading-color, var(--primary));
}

.aplify-loading__orbit::before,
.aplify-loading__orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: inherit;
  transform: rotate(0deg) translate(155%);
  animation: aplify-twin-orbit var(--loading-duration, 1s) ease infinite;
}

.aplify-loading__orbit::after {
  animation-delay: calc(var(--loading-duration, 1s) / 2);
}

@keyframes aplify-twin-orbit {
  100% { transform: rotate(360deg) translate(155%); }
}

/* The words stay in the DOM for screen readers, hidden visually. */
.aplify-loading__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion gets the words back rather than three frozen dots, which
   would read as broken rather than as waiting. */
@media (prefers-reduced-motion: reduce) {
  .aplify-loading__orbit { display: none; }
  .aplify-loading__text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: var(--muted);
    font-family: var(--font-family);
    font-size: var(--text-sm, 13px);
    font-weight: var(--weight-body, 400);
  }
}
.aplify-no-results {
     background: rgb(from var(--primary) r g b / 0.08);
    padding: 20px;
    border-radius: min(var(--panel-radius), 20px);
	max-width: 500px;
    margin-top: 10px;
}

/* -----------------------------
   JOB TITLE / COMPANY WRAPPER
--------------------------------*/

.job-title-company {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 600px) {
  .aplify-search-form {
    padding: 20px 20px;
  }

  .aplify-form-group input,
  .aplify-form-group select {
    font-size: var(--text-md, 16px); /* Prevent zoom on iOS */
  }

}

/* The "Use my location" button collapses to icon-only when the FIELD is too
   narrow to carry both. This was gated on @media (max-width: 600px) — the
   browser window — but the button overlaps the input it sits in, so what
   matters is how wide that field is, not how wide the window is. At a 702px
   container the field is 217px and the labelled button ate 146px of it,
   leaving 71px of usable input on a full-size desktop screen.

   Same correction the form layout already made deliberately: respond to the
   space the shortcode was given, not the viewport. */
/* The field is its own container. Querying the FORM was still the wrong box:
   how much room the button leaves depends on the field, and the field's width
   is the container width divided by however many filters are showing. At a
   1340px container with seven items each field is ~170px — every bit as tight
   as it was at 702px with three. Same field width, same problem, different
   form width, so no form-level threshold can catch both.

   Threshold is 300px of CONTENT box (container queries measure the content box,
   not the border box — the field's 1.5px borders are outside it). The labelled
   button is 146px, so 300px leaves ~150px of readable input at the switch: the
   label survives exactly as long as it is affordable, and goes the moment it
   is not. */
.aplify-location-autocomplete .location-input-wrapper {
  container-type: inline-size;
  container-name: aplify-location-field;
}

/* Selectors keep the .aplify-location-autocomplete ancestor. A container query
   gates WHEN a rule applies, it does not raise its specificity — dropping the
   ancestor took these from (0,2,0) to (0,1,0) and the base rules simply won. */
@container aplify-location-field (max-width: 300px) {
  .aplify-location-autocomplete .search-location {
    padding-right: 46px;
  }

  .aplify-location-autocomplete .use-my-location-btn {
    padding: 0 12px;
    font-size: 0; /* label hidden — icon-only at this width */
  }

  .aplify-location-autocomplete .use-my-location-btn::before {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================
   RADIUS CAP — NARROW / SIDEBAR / TOUCH LAYOUT
   Appended at the end of the file deliberately: several of these
   selectors also have base (uncapped) rules earlier in this same
   stylesheet, and with equal specificity, CSS gives the win to whichever
   rule comes later in source order. Placing the cap last guarantees it
   wins regardless of how the earlier rules get reordered over time.

   Radius tokens are tuned for a roomy desktop panel — on a narrow
   sidebar/mobile width the same radius looks disproportionately large
   against a much smaller box. This caps rather than overrides: if a
   client's configured --panel-radius/--radius is already smaller than
   the cap, that smaller value still wins.
   ========================================================== */
@container aplify-search-form (max-width: 639px) {
  .aplify-search-form {
    border-radius: min(var(--panel-radius), 16px);
  }
}