.ww-jobs-portal{width:min(100% - 40px,1280px);margin:0 auto;padding:28px 0 72px;color:#17324d}.ww-jobs-searchbar{padding:30px;border:1px solid #e0e7ed;border-radius:14px;background:linear-gradient(135deg,#f5fbfa,#fff);box-shadow:0 10px 30px rgba(23,50,77,.06)}.ww-jobs-eyebrow{color:#167c74;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.ww-jobs-searchbar h1{margin:6px 0 22px;font-size:clamp(28px,4vw,44px);line-height:1.08}.ww-jobs-searchbar__form{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.8fr) auto;gap:9px}.ww-jobs-searchbar__form input{width:100%;min-height:50px;padding:0 15px;border:1px solid #cedae3;border-radius:7px;background:#fff;box-sizing:border-box}.ww-jobs-searchbar__form button,.ww-jobs-filters button{min-height:50px;padding:0 22px;border:0;border-radius:7px;background:#176f9f;color:#fff;cursor:pointer;font-weight:800}.ww-jobs-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 250px;align-items:start;gap:22px;margin-top:24px}.ww-jobs-sidebar,.ww-jobs-rail section,.ww-job-result,.ww-job-search__empty{border:1px solid #e0e7ed;border-radius:10px;background:#fff}.ww-jobs-sidebar{position:sticky;top:18px;padding:18px}.ww-jobs-sidebar__heading{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid #e7edf1}.ww-jobs-sidebar__heading a{font-size:12px}.ww-jobs-filters{display:grid;gap:20px;margin-top:18px}.ww-jobs-filters fieldset{display:grid;gap:9px;margin:0;padding:0 0 18px;border:0;border-bottom:1px solid #e7edf1}.ww-jobs-filters legend,.ww-jobs-filter-select>span{display:block;margin-bottom:10px;color:#263f55;font-size:13px;font-weight:800}.ww-jobs-filters fieldset label{color:#5d7082;font-size:13px}.ww-jobs-filter-select select{width:100%;min-height:42px;padding:7px 9px;border:1px solid #cedae3;border-radius:6px;background:#fff}.ww-jobs-filters button{min-height:44px}.ww-jobs-feed{min-width:0}.ww-jobs-summary{display:flex;justify-content:space-between;min-height:38px;color:#667b8d;font-size:13px}.ww-jobs-summary strong{display:block;color:#17324d;font-size:15px}.ww-jobs-summary span{display:block;margin-top:3px}.ww-job-results{display:grid;gap:12px}.ww-job-result{display:grid;grid-template-columns:48px minmax(0,1fr);gap:15px;padding:20px;transition:border-color .15s,box-shadow .15s,transform .15s}.ww-job-result:hover{border-color:#bdd4dd;box-shadow:0 9px 24px rgba(23,50,77,.07);transform:translateY(-1px)}.ww-job-result__logo{display:grid;width:48px;height:48px;place-items:center;border-radius:9px;background:#edf8f6;color:#167c74;font-size:20px;font-weight:850}.ww-job-result__meta{display:flex;justify-content:space-between;gap:12px;color:#718397;font-size:11px}.ww-job-result__meta span{color:#167c74;font-weight:800;text-transform:uppercase}.ww-job-result h2{margin:7px 0 3px;font-size:18px;line-height:1.3}.ww-job-result h2 a{color:#17324d;text-decoration:none}.ww-job-result__company{margin:0 0 10px;color:#425b70;font-size:13px;font-weight:750}.ww-job-result__company a{color:inherit}.ww-job-result__facts,.ww-job-result__skills{display:flex;flex-wrap:wrap;gap:6px}.ww-job-result__facts span,.ww-job-result__skills span{padding:4px 7px;border-radius:4px;background:#f2f6f8;color:#5a7082;font-size:11px}.ww-job-result__description{display:-webkit-box;margin:11px 0;color:#536b7e;font-size:13px;line-height:1.55;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ww-job-result__actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:14px}.ww-job-view,.ww-job-apply,.ww-job-result__applied{display:inline-flex;min-height:38px;align-items:center;padding:0 12px;border-radius:6px;font-size:12px;font-weight:800;text-decoration:none}.ww-job-view{border:1px solid #cbd9e1;color:#176f9f}.ww-job-apply{background:#176f9f;color:#fff}.ww-job-result__applied{border:1px solid #b9e1dc;background:#e9f8f5;color:#15756d}.ww-job-result mark{padding:0 2px;background:#fff1a8;color:#17324d}.ww-jobs-rail{display:grid;gap:14px;position:sticky;top:18px}.ww-jobs-rail section{padding:20px}.ww-jobs-rail section>span{color:#167c74;font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.ww-jobs-rail h2{margin:7px 0;font-size:18px}.ww-jobs-rail p{color:#64798a;font-size:13px;line-height:1.55}.ww-jobs-rail a{color:#176f9f;font-size:13px;font-weight:800;text-decoration:none}.ww-job-search__empty{padding:52px 24px;text-align:center}.ww-job-search__empty a{font-weight:800}@media(max-width:1050px){.ww-jobs-layout{grid-template-columns:220px minmax(0,1fr)}.ww-jobs-rail{display:none}}@media(max-width:760px){.ww-jobs-portal{width:min(100% - 24px,1280px);padding-top:14px}.ww-jobs-searchbar{padding:22px 18px}.ww-jobs-searchbar__form{grid-template-columns:1fr}.ww-jobs-layout{grid-template-columns:1fr}.ww-jobs-sidebar{position:static}.ww-jobs-filters{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.ww-jobs-filters fieldset{grid-column:1/-1}.ww-jobs-summary{margin-top:6px}}@media(max-width:520px){.ww-jobs-filters{grid-template-columns:1fr}.ww-job-result{grid-template-columns:38px minmax(0,1fr);padding:16px}.ww-job-result__logo{width:38px;height:38px;font-size:16px}.ww-job-result__meta time{display:none}.ww-job-result__actions{justify-content:flex-start;flex-wrap:wrap}}
/* Enhanced primary opportunity search. */
.ww-jobs-searchbar {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-color: #d8e5eb;
  background:
    radial-gradient(circle at 92% 10%, rgba(22, 124, 116, 0.12), transparent 30%),
    linear-gradient(135deg, #f1faf8 0%, #ffffff 65%);
}

.ww-jobs-searchbar__intro {
  max-width: 760px;
  margin-bottom: 24px;
}

.ww-jobs-searchbar__intro h1 {
  margin: 6px 0 8px;
}

.ww-jobs-searchbar__intro p {
  max-width: 680px;
  margin: 0;
  color: #607589;
  font-size: 15px;
  line-height: 1.6;
}

.ww-jobs-searchbar__form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.ww-search-field {
  display: grid;
  grid-column: span 4;
  gap: 7px;
  min-width: 0;
}

.ww-search-field--keyword {
  grid-column: 1 / 6;
}

.ww-search-field--location {
  grid-column: 6 / 10;
}

.ww-search-field > span {
  color: #29465f;
  font-size: 12px;
  font-weight: 800;
}

.ww-search-field input,
.ww-search-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid #c9d8e1;
  border-radius: 8px;
  background: #fff;
  color: #17324d;
  box-sizing: border-box;
}

.ww-search-field input:focus,
.ww-search-field select:focus {
  border-color: #176f9f;
  outline: 3px solid rgba(23, 111, 159, 0.13);
}

.ww-search-submit {
  grid-column: 10 / 13;
  grid-row: 1;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #176f9f;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(23, 111, 159, 0.2);
}

.ww-search-submit:hover {
  background: #125c86;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .ww-jobs-searchbar__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ww-search-field,
  .ww-search-field--keyword,
  .ww-search-field--location,
  .ww-search-submit {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 600px) {
  .ww-jobs-searchbar {
    padding: 24px 18px;
  }

  .ww-jobs-searchbar__form {
    grid-template-columns: 1fr;
  }
}
/* Match the homepage and opportunity-detail content width. */
.ww-jobs-portal {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
/* Match opportunity-detail three-column proportions. */
.ww-jobs-layout {
  grid-template-columns: 300px minmax(0, 1fr) 360px;
  gap: 24px;
}
/* Primary search experience — final visual layer. */
.ww-jobs-searchbar {
  padding: clamp(34px, 4vw, 58px);
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(30, 185, 170, 0.3),
      transparent 28%
    ),
    linear-gradient(135deg, #102f47 0%, #135c69 100%);
  box-shadow: 0 20px 46px rgba(16, 47, 71, 0.2);
}

.ww-jobs-searchbar__intro {
  width: 100%;
  max-width: none;
  margin: 0 0 28px;
  text-align: center;
}

.ww-jobs-eyebrow {
  color: #8de4da;
}

.ww-jobs-searchbar__intro h1 {
  margin: 8px 0 10px;
  color: #fff;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.06;
}

.ww-jobs-searchbar__intro p {
  max-width: 760px;
  margin: 0 auto;
  color: #d8e8ef;
  font-size: 16px;
}

.ww-jobs-searchbar__form {
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  backdrop-filter: blur(8px);
}

.ww-search-field > span {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.ww-search-field input,
.ww-search-field select {
  min-height: 56px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(9, 39, 58, 0.12);
}

.ww-search-field input:hover,
.ww-search-field select:hover {
  border-color: #8ed9d1;
}

.ww-search-submit {
  min-height: 56px;
  border-radius: 9px;
  background: #ff6508;
  box-shadow: 0 9px 20px rgba(255, 101, 8, 0.3);
  font-size: 15px;
}

.ww-search-submit:hover {
  background: #e95700;
  box-shadow: 0 12px 24px rgba(255, 101, 8, 0.35);
}

@media (max-width: 900px) {
  .ww-jobs-searchbar__intro {
    text-align: left;
  }

  .ww-jobs-searchbar__intro p {
    margin-inline: 0;
  }
}

@media (max-width: 600px) {
  .ww-jobs-searchbar {
    padding: 28px 18px;
    border-radius: 12px;
  }

  .ww-jobs-searchbar__form {
    padding: 16px;
  }
}
/* Compact, square professional search design. */
.ww-jobs-searchbar {
  padding: 30px 34px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(110deg, #12334b 0%, #126b70 100%);
  box-shadow: none;
}

.ww-jobs-searchbar__intro {
  margin-bottom: 20px;
  text-align: left;
}

.ww-jobs-searchbar__intro h1,
.ww-jobs-searchbar h1 {
  margin: 4px 0 7px;
  color: #fff !important;
  font-size: clamp(30px, 3vw, 42px);
}

.ww-jobs-searchbar__intro p {
  margin: 0;
  color: #d9e8ed;
  font-size: 15px;
}

.ww-jobs-searchbar__form {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}

.ww-search-field input,
.ww-search-field select {
  min-height: 50px;
  border-radius: 0;
  box-shadow: none;
}

.ww-jobs-searchbar__form .ww-search-submit {
  min-height: 50px;
  border-radius: 0;
  background: #ff6508;
  box-shadow: none;
}

.ww-jobs-searchbar__form .ww-search-submit:hover {
  background: #e95700;
  box-shadow: none;
}

.ww-jobs-searchbar *,
.ww-jobs-searchbar *::before,
.ww-jobs-searchbar *::after {
  border-radius: 0;
}

@media (max-width: 600px) {
  .ww-jobs-searchbar {
    padding: 24px 18px;
  }

  .ww-jobs-searchbar__form {
    padding: 14px;
  }
}
/* Balance spacing around the primary search area. */
.ww-jobs-portal {
  padding-top: 0;
}

.ww-jobs-layout {
  margin-top: 32px;
}
/* Align the primary search action with the first input row. */
.ww-jobs-searchbar__form .ww-search-submit {
  align-self: end;
  margin: 0;
  transform: translateY(-9px);
}

.ww-jobs-searchbar__form .ww-search-submit:hover {
  transform: translateY(-9px);
}

@media (max-width: 900px) {
  .ww-jobs-searchbar__form .ww-search-submit,
  .ww-jobs-searchbar__form .ww-search-submit:hover {
    transform: none;
  }
}
.ww-jobs-searchbar {
  background: var(--ww-search-background, #123d53);
}
.ww-search-action {
  display: grid;
  grid-column: 10 / 13;
  grid-row: 1;
  gap: 7px;
  min-width: 0;
}

.ww-search-action > span {
  font-size: 12px;
  line-height: normal;
}

.ww-jobs-searchbar__form .ww-search-action .ww-search-submit {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  min-height: 50px;
  margin: 0;
  position: static;
  transform: none !important;
}

@media (max-width: 900px) {
  .ww-search-action {
    grid-column: auto;
    grid-row: auto;
  }

  .ww-search-action > span {
    display: none;
  }
}
/* Readable, scannable job-result cards. */
.ww-jobs-summary {
  min-height: 44px;
  font-size: 14px;
}

.ww-jobs-summary strong {
  font-size: 17px;
  font-weight: 400;
}
.ww-job-results {
  gap: 18px;
}

.ww-job-result {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  border: 1px solid #dce5eb;
  border-left: 4px solid transparent;
  background: #fff;
}

.ww-job-result:hover {
  border-color: #b9d6d2;
  border-left-color: #15968c;
  box-shadow: 0 8px 20px rgba(23, 50, 77, 0.08);
  transform: none;
}

.ww-job-result__logo {
  width: 54px;
  height: 54px;
  font-size: 20px;
}

.ww-job-result__meta {
  align-items: center;
  color: #65798b;
  font-size: 12px;
  line-height: 1.4;
}

.ww-job-result__meta span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.ww-job-result h2 {
  margin: 8px 0 5px;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.ww-job-result h2 a {
  color: #12344f;
}

.ww-job-result__company {
  margin: 0 0 13px;
  font-size: 14px;
  line-height: 1.4;
}

.ww-job-result__facts,
.ww-job-result__skills {
  gap: 7px;
}

.ww-job-result__facts span,
.ww-job-result__skills span {
  padding: 5px 8px;
  border: 1px solid #e1e8ed;
  background: #f5f8fa;
  color: #4e6679;
  font-size: 12px;
  line-height: 1.35;
}

.ww-job-result__description {
  margin: 14px 0;
  color: #455f74;
  font-size: 15px;
  line-height: 1.65;
  -webkit-line-clamp: 2;
}

.ww-job-result__actions {
  gap: 10px;
  margin-top: 17px;
}

.ww-job-view,
.ww-job-apply,
.ww-job-result__applied {
  min-height: 42px;
  padding: 0 15px;
  font-size: 13px;
}

/* Improve supporting side-column readability. */
.ww-jobs-filters legend,
.ww-jobs-filter-select > span {
  font-size: 14px;
}

.ww-jobs-filters fieldset label {
  font-size: 14px;
  line-height: 1.5;
}

.ww-jobs-rail h2 {
  font-size: 20px;
  line-height: 1.3;
}

.ww-jobs-rail p {
  font-size: 14px;
  line-height: 1.65;
}

.ww-jobs-rail a {
  font-size: 14px;
}

@media (max-width: 600px) {
  .ww-job-result {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    padding: 18px;
  }

  .ww-job-result__logo {
    width: 44px;
    height: 44px;
  }

  .ww-job-result h2 {
    font-size: 19px;
  }

  .ww-job-result__description {
    font-size: 14px;
  }
}
/* Expand results when the promotional rail is hidden. */
.ww-jobs-layout.ww-jobs-layout--jobseeker {
  grid-template-columns: 300px minmax(0, 1fr);
}

@media (max-width: 1050px) {
  .ww-jobs-layout.ww-jobs-layout--jobseeker {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .ww-jobs-layout.ww-jobs-layout--jobseeker {
    grid-template-columns: 1fr;
  }
}
/* Search-results workspace. */
.ww-jobs-workspace {
  margin-top: 24px;
}

.ww-jobs-filterbar {
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid #dce5eb;
  background: #f5f7f8;
}

.ww-jobs-filterbar form {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(150px, 1fr))
    auto
    auto;
  gap: 12px;
  align-items: end;
}

.ww-jobs-filterbar label {
  display: grid;
  gap: 6px;
}

.ww-jobs-filterbar label > span {
  color: #29465f;
  font-size: 12px;
  font-weight: 800;
}

.ww-jobs-filterbar select,
.ww-jobs-filterbar button {
  min-height: 46px;
}

.ww-jobs-filterbar select {
  width: 100%;
  padding: 0 11px;
  border: 1px solid #cbd8e1;
  background: #fff;
}

.ww-jobs-filterbar button {
  padding: 0 18px;
  border: 1px solid #17324d;
  background: #17324d;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.ww-jobs-filterbar__clear {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  color: #536b7e;
  font-size: 13px;
  font-weight: 700;
}

.ww-jobs-split {
  display: grid;
  grid-template-columns:
    minmax(360px, 0.78fr)
    minmax(0, 1.22fr);
  gap: 22px;
  align-items: start;
}

.ww-jobs-feed {
  min-width: 0;
}

.ww-job-results {
  gap: 12px;
}

.ww-job-result {
  position: relative;
  padding: 20px;
  border: 1px solid #dce5eb;
  border-left: 4px solid transparent;
  background: #fff;
  cursor: pointer;
}

.ww-job-result.is-selected {
  border-color: #9bcfc8;
  border-left-color: #15968c;
  background: #f5fbfa;
}

.ww-job-result h2 {
  font-size: 19px;
}

.ww-job-result__description {
  font-size: 14px;
  -webkit-line-clamp: 2;
}

.ww-job-preview {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  border: 1px solid #dce5eb;
  background: #fff;
}

.ww-job-preview__header,
.ww-job-preview__section {
  padding: 26px;
}

.ww-job-preview__header {
  border-bottom: 1px solid #dce5eb;
}

.ww-job-preview__type {
  display: block;
  margin-bottom: 8px;
  color: #15756d;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ww-job-preview__header time {
  float: right;
  color: #718397;
  font-size: 12px;
}

.ww-job-preview h2 {
  margin: 0 0 7px;
  color: #17324d;
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.2;
}

.ww-job-preview__company {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 800;
}

.ww-job-preview__facts,
.ww-job-preview__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ww-job-preview__facts span,
.ww-job-preview__skills span {
  padding: 6px 9px;
  border: 1px solid #dce5eb;
  background: #f5f7f8;
  color: #536b7e;
  font-size: 12px;
}

.ww-job-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.ww-job-preview__apply,
.ww-job-preview__open {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.ww-job-preview__apply {
  border: 1px solid #17324d;
  background: #17324d;
  color: #fff;
}

.ww-job-preview__open {
  border: 1px solid #9eb1bf;
  background: #fff;
  color: #17324d;
}

.ww-job-preview__section + .ww-job-preview__section {
  border-top: 1px solid #e4eaee;
}

.ww-job-preview__section h3 {
  margin: 0 0 14px;
  color: #17324d;
  font-size: 18px;
}

.ww-job-preview__description {
  color: #455f74;
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .ww-jobs-filterbar form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ww-jobs-split {
    grid-template-columns: 1fr;
  }

  .ww-job-preview {
    display: none;
  }

  .ww-job-result {
    cursor: default;
  }
}

@media (max-width: 600px) {
  .ww-jobs-filterbar form {
    grid-template-columns: 1fr;
  }

  .ww-job-preview__header,
  .ww-job-preview__section {
    padding: 20px;
  }
}
/* Final desktop split: 40% results and 60% job details. */
.ww-jobs-workspace .ww-jobs-split {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 55px;
}

@media (max-width: 900px) {
  .ww-jobs-workspace .ww-jobs-split {
    grid-template-columns: 1fr;
  }
}
/* Strong selected-job feedback. */
.ww-job-result {
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.ww-job-result:hover {
  border-color: #9fcac5;
  border-left-color: #15968c;
  background: #f8fbfb;
}

.ww-job-result.is-selected {
  border: 2px solid #15968c;
  border-left: 7px solid #15968c;
  background: #edf8f6;
  box-shadow: 0 6px 16px rgba(21, 150, 140, 0.12);
}

.ww-job-result.is-selected::before {
  content: "Selected";
  position: absolute;
  top: 14px;
  right: 14px;
  color: #15756d;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ww-job-result.is-selected h2 {
  padding-right: 62px;
}

.ww-job-result.is-selected h2 a {
  color: #0f5f5a;
}

.ww-job-result h2 a:focus-visible {
  outline: 3px solid rgba(21, 150, 140, 0.25);
  outline-offset: 3px;
}

/* Make the changing preview panel visually clear. */
.ww-job-preview {
  border: 1px solid #cbd8df;
  border-top: 5px solid #15968c;
  background: #fff;
  box-shadow: 0 8px 22px rgba(23, 50, 77, 0.08);
}

.ww-job-preview__content {
  animation: ww-job-preview-enter 220ms ease-out;
}

.ww-job-preview__header {
  background: #f7fafb;
}

@keyframes ww-job-preview-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ww-job-preview__content {
    animation: none;
  }

  .ww-job-result {
    transition: none;
  }
}
/* Collapsible complete job details. */
.ww-job-preview__details {
  border-top: 1px solid #dce5eb;
}

.ww-job-preview__details summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 26px;
  color: #17324d;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}

.ww-job-preview__details summary::-webkit-details-marker {
  display: none;
}

.ww-job-preview__details summary:hover {
  background: #f5f8f9;
  color: #15756d;
}

.ww-job-preview__details-icon {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.ww-job-preview__details[open]
.ww-job-preview__details-icon {
  transform: rotate(225deg);
}

.ww-job-preview__details-body {
  border-top: 1px solid #e4eaee;
  background: #fff;
}

@media (max-width: 600px) {
  .ww-job-preview__details summary {
    padding-inline: 20px;
  }
}
.ww-job-preview__show-less {
  display: none;
}

.ww-job-preview__details[open]
.ww-job-preview__show-more {
  display: none;
}

.ww-job-preview__details[open]
.ww-job-preview__show-less {
  display: inline;
}
.ww-job-preview-mobile {
  display: none;
}

@media (max-width: 900px) {
  .ww-job-preview-mobile {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 16px;
    border-top: 2px solid #15968c;
    background: #fff;
  }

  .ww-job-preview-mobile .ww-job-preview__header,
  .ww-job-preview-mobile .ww-job-preview__section {
    padding: 20px 0;
  }

  .ww-job-preview-mobile .ww-job-preview__header {
    border-bottom: 1px solid #dce5eb;
  }

  .ww-job-preview-mobile .ww-job-preview__header time {
    float: none;
    display: block;
    margin-bottom: 8px;
  }

  .ww-job-preview-mobile h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  .ww-job-preview-mobile .ww-job-preview__description {
    font-size: 15px;
    line-height: 1.65;
  }
}
.ww-job-preview-mobile {
  display: none;
}

@media (max-width: 900px) {
  body.ww-mobile-job-open .ww-jobs-searchbar,
  body.ww-mobile-job-open .ww-jobs-filterbar,
  body.ww-mobile-job-open .ww-jobs-split {
    display: none;
  }

  body.ww-mobile-job-open .ww-job-preview-mobile {
    display: block;
    width: 100%;
    border: 1px solid #dce5eb;
    background: #fff;
  }

  .ww-mobile-preview__back {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid #dce5eb;
    background: #f5f7f8;
    color: #17324d;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  .ww-mobile-preview__content {
    padding: 0 18px 24px;
  }

  .ww-mobile-preview__content
  .ww-job-preview__header,
  .ww-mobile-preview__content
  .ww-job-preview__section {
    padding: 20px 0;
  }

  .ww-mobile-preview__content h2 {
    font-size: 25px;
    line-height: 1.25;
  }

  .ww-mobile-preview__content
  .ww-job-preview__description {
    font-size: 15px;
    line-height: 1.7;
  }
}
/* Final exposed-filter alignment. */
.ww-jobs-filterbar form {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(150px, 1fr))
    minmax(150px, auto)
    auto;
  gap: 14px;
  align-items: end;
}

.ww-jobs-filterbar label {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.ww-jobs-filterbar label > span {
  display: block;
  margin: 0;
  line-height: 1.2;
}

.ww-jobs-filterbar select {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  box-sizing: border-box;
}

.ww-jobs-filterbar button {
  width: auto;
  min-width: 150px;
  height: 52px;
  padding: 0 20px;
  white-space: nowrap;
}

.ww-jobs-filterbar__clear {
  display: inline-flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Tablet: two filters per row. */
@media (max-width: 1100px) {
  .ww-jobs-filterbar form {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .ww-jobs-filterbar button,
  .ww-jobs-filterbar__clear {
    width: 100%;
  }
}

/* Mobile: one control per row. */
@media (max-width: 600px) {
  .ww-jobs-filterbar form {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ww-jobs-filterbar button {
    width: 100%;
  }

  .ww-jobs-filterbar__clear {
    width: 100%;
    height: 44px;
  }
}
/* Compact search bar without introductory heading. */
.ww-jobs-searchbar {
  padding: 24px;
}

.ww-jobs-searchbar__form {
  margin: 0;
}

@media (max-width: 600px) {
  .ww-jobs-searchbar {
    padding: 16px;
  }
}
/* ==========================================================
   FINAL JOB SEARCH TOOLBAR
   ========================================================== */

.ww-jobs-searchbar {
  margin: 0;
  padding: 20px;
  border: 0;
  background: #17324d;
  box-shadow: none;
}

.ww-jobs-searchbar__form {
  display: grid;
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(230px, 0.8fr)
    180px;
  gap: 12px;
  align-items: end;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ww-search-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.ww-search-field > span {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.ww-jobs-searchbar__form input {
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid #cbd7df;
  border-radius: 0;
  background: #fff;
  box-sizing: border-box;
  color: #17324d;
  font-size: 14px;
}

.ww-jobs-searchbar__form input:focus {
  border-color: #15968c;
  outline: 3px solid rgba(21, 150, 140, 0.25);
}

.ww-search-action {
  display: block;
}

.ww-search-action > span {
  display: none;
}

.ww-search-submit {
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid #15968c;
  border-radius: 0;
  background: #15968c;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

/* Desktop exposed filters. */
.ww-jobs-filterbar {
  margin: 14px 0 24px;
  padding: 0;
  border: 1px solid #dce5eb;
  border-radius: 0;
  background: #f7f9fa;
}

/* Never show the details heading on desktop. */
.ww-jobs-filterbar > summary {
  display: none !important;
}

.ww-jobs-filterbar form {
  display: grid !important;
  grid-template-columns:
    repeat(6, minmax(115px, 1fr))
    minmax(165px, 1.2fr)
    minmax(130px, 0.9fr) !important;
  gap: 12px !important;
  align-items: end;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
}

.ww-jobs-filterbar label {
  display: grid;
  min-width: 0;
  gap: 7px;
  margin: 0;
}

.ww-jobs-filterbar label > span {
  margin: 0;
  color: #29465f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.ww-jobs-filterbar select {
  display: block;
  width: 100%;
  height: 46px;
  min-width: 0;
  padding: 0 11px;
  border: 1px solid #cbd7df;
  border-radius: 0;
  background-color: #fff;
  box-sizing: border-box;
  color: #17324d;
  font-size: 13px;
}

.ww-jobs-filterbar button {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #17324d;
  border-radius: 0;
  background: #17324d;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.ww-jobs-filterbar__clear {
  display: inline-flex;
  width: 100%;
  height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #526b7d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Tablet. */
@media (max-width: 1000px) {
  .ww-jobs-searchbar__form {
    grid-template-columns: 1fr 1fr;
  }

  .ww-search-action {
    grid-column: 1 / -1;
  }

  .ww-jobs-filterbar form {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .ww-jobs-filterbar button,
  .ww-jobs-filterbar__clear {
    width: 100%;
  }
}

/* Mobile. */
@media (max-width: 600px) {
  .ww-jobs-portal {
    width: min(100% - 20px, 1280px);
  }

  .ww-jobs-searchbar {
    padding: 16px;
  }

  .ww-jobs-searchbar__form {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ww-search-action {
    grid-column: auto;
  }

  .ww-jobs-filterbar {
    margin-top: 10px;
    background: #fff;
  }

  .ww-jobs-filterbar > summary {
    display: flex !important;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 15px;
    color: #17324d;
    cursor: pointer;
    list-style: none;
  }

  .ww-jobs-filterbar > summary::-webkit-details-marker {
    display: none;
  }

  .ww-jobs-filterbar > summary span {
    color: #64798a;
    font-size: 11px;
    font-weight: 500;
  }

  .ww-jobs-filterbar > summary::after {
    content: "+";
    margin-left: auto;
    color: #15968c;
    font-size: 21px;
    font-weight: 700;
  }

  .ww-jobs-filterbar[open] > summary::after {
    content: "−";
  }

  .ww-jobs-filterbar[open] > summary {
    border-bottom: 1px solid #dce5eb;
  }

  .ww-jobs-filterbar form {
    grid-template-columns: 1fr !important;
    gap: 13px !important;
    padding: 15px;
  }

  .ww-jobs-filterbar button {
    height: 50px;
  }

  .ww-jobs-filterbar__clear {
    height: 40px;
  }
}
/* Softer selected-job preview card. */
.ww-job-preview {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 0;
  background: #fff;
  box-shadow:
    0 12px 32px rgba(23, 50, 77, 0.10),
    0 2px 8px rgba(23, 50, 77, 0.06);
}

.ww-job-preview__header {
  border-bottom: 0;
  background: #f8fbfc;
}

.ww-job-preview__section,
.ww-job-preview__section + .ww-job-preview__section {
  border-top: 0;
  border-bottom: 0;
}

/* Remove lines surrounding View full job details. */
.ww-job-preview details,
.ww-job-preview details[open],
.ww-job-preview details > summary {
  border: 0;
}

.ww-job-preview details {
  margin: 0 26px 26px;
  background: #f7f9fa;
  box-shadow: none;
}

.ww-job-preview details > summary {
  min-height: 54px;
  padding: 0 16px;
  background: #f7f9fa;
}

.ww-job-preview details[open] > summary {
  border-bottom: 0;
  background: #f1f5f7;
}

/* Apply the same soft treatment to mobile details. */
.ww-job-preview-mobile {
  border: 0;
  background: #fff;
  box-shadow:
    0 10px 26px rgba(23, 50, 77, 0.10),
    0 2px 7px rgba(23, 50, 77, 0.05);
}

.ww-job-preview-mobile
.ww-job-preview__header {
  border-bottom: 0;
}

.ww-job-preview-mobile details {
  margin-right: 0;
  margin-left: 0;
}
/* ==========================================================
   CLEAN JOB RESULT CARDS
   ========================================================== */

.ww-job-results {
  gap: 16px;
}

.ww-job-result {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 0 !important;
  border-radius: 0;
  background: #fff;
  box-shadow:
    0 3px 12px rgba(23, 50, 77, 0.08),
    0 1px 3px rgba(23, 50, 77, 0.05);
  cursor: pointer;
  transition:
    box-shadow 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}

/* Remove older selected bars and labels. */
.ww-job-result::before,
.ww-job-result::after {
  display: none !important;
  content: none !important;
}

.ww-job-result:hover {
  border: 0 !important;
  background: #fff;
  box-shadow:
    0 10px 24px rgba(23, 50, 77, 0.13),
    0 2px 6px rgba(23, 50, 77, 0.07);
  transform: translateY(-2px);
}

/* Clearly active without making the card heavy. */
/* Clearly active without making the card heavy. */
.ww-job-result.is-selected {
  border: 0 !important;
  background: #f8fcfb;
  box-shadow:
    0 0 0 1px #75bbb4,
    0 5px 14px rgba(23, 50, 77, 0.08);
  transform: none;
}

.ww-job-result.is-selected:hover {
  box-shadow:
    0 0 0 1px #75bbb4,
    0 7px 18px rgba(23, 50, 77, 0.1);
}

.ww-job-result__logo {
  border-radius: 0;
  background: #edf8f6;
  box-shadow: none;
}

.ww-job-result h2 {
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.3;
}

.ww-job-result h2 a {
  color: #17324d;
  text-decoration: none;
}

.ww-job-result h2 a:hover {
  color: #157f78;
}

.ww-job-result__company {
  margin-bottom: 11px;
}

.ww-job-result__facts span,
.ww-job-result__skills span {
  border: 0;
  border-radius: 0;
  background: #f1f5f7;
}

/* Avoid exaggerated movement on touchscreens. */
@media (max-width: 900px) {
  .ww-job-result,
  .ww-job-result:hover,
  .ww-job-result.is-selected {
    transform: none;
  }

  .ww-job-result {
    padding: 17px;
  }

  .ww-job-results {
    gap: 14px;
  }
}
/* ==========================================================
   FINAL PREMIUM JOB SEARCH FORM
   ========================================================== */

.ww-jobs-searchbar {
  position: relative;
  overflow: visible;
  margin: 0;
  padding: 24px;
  border: 1px solid #dce6e8;
  border-radius: 0;
  background:
    linear-gradient(
      135deg,
      #f4faf9 0%,
      #ffffff 72%
    );
  box-shadow:
    0 12px 32px rgba(23, 50, 77, 0.08),
    0 2px 7px rgba(23, 50, 77, 0.04);
}

.ww-jobs-searchbar::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    #17324d 0%,
    #15968c 100%
  );
  content: "";
}

.ww-jobs-searchbar__form {
  display: grid !important;
  grid-template-columns:
    minmax(300px, 1.35fr)
    minmax(230px, 0.75fr)
    190px !important;
  gap: 14px !important;
  align-items: end !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ww-search-field,
.ww-search-action {
  display: grid !important;
  min-width: 0;
  grid-template-rows: 18px 54px;
  gap: 7px;
  align-items: stretch;
}

.ww-search-field > span,
.ww-search-action__label {
  display: block !important;
  margin: 0;
  color: #29465f;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.ww-search-action__label {
  visibility: hidden;
}

.ww-jobs-searchbar__form input {
  display: block;
  width: 100%;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0;
  padding: 0 17px;
  border: 1px solid #bdccd4;
  border-radius: 0;
  background: #fff;
  box-shadow:
    inset 0 1px 2px rgba(23, 50, 77, 0.03);
  box-sizing: border-box;
  color: #17324d;
  font-size: 15px;
  font-weight: 500;
  line-height: 54px;
}

.ww-jobs-searchbar__form input::placeholder {
  color: #657989;
  opacity: 1;
  font-size: 15px;
  font-weight: 500;
}

.ww-jobs-searchbar__form input:hover {
  border-color: #8da4b1;
}

.ww-jobs-searchbar__form input:focus {
  border-color: #15968c;
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(21, 150, 140, 0.14);
}

.ww-search-submit {
  display: inline-flex;
  width: 100%;
  height: 54px !important;
  min-height: 54px !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 22px;
  border: 1px solid #157f78;
  border-radius: 0;
  background: #157f78;
  box-shadow:
    0 6px 14px rgba(21, 127, 120, 0.18);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.ww-search-submit:hover,
.ww-search-submit:focus {
  border-color: #116d68;
  background: #116d68;
  box-shadow:
    0 9px 19px rgba(21, 127, 120, 0.24);
  transform: translateY(-1px);
}

.ww-search-submit:active {
  box-shadow:
    0 3px 8px rgba(21, 127, 120, 0.18);
  transform: translateY(0);
}

/* Tablet. */
@media (max-width: 900px) {
  .ww-jobs-searchbar__form {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }

  .ww-search-action {
    grid-column: 1 / -1;
  }

  .ww-search-action__label {
    display: none !important;
  }

  .ww-search-action {
    grid-template-rows: 54px;
  }
}

/* Mobile. */
@media (max-width: 600px) {
  .ww-jobs-searchbar {
    padding: 18px 16px;
  }

  .ww-jobs-searchbar__form {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .ww-search-action {
    grid-column: auto;
  }

  .ww-search-field,
  .ww-search-action {
    grid-template-rows: auto 52px;
  }

  .ww-search-action {
    grid-template-rows: 52px;
  }

  .ww-jobs-searchbar__form input,
  .ww-search-submit {
    height: 52px !important;
    min-height: 52px !important;
  }

  .ww-search-submit:hover {
    transform: none;
  }
}
/* Final search sizing and exact control alignment. */
.ww-jobs-searchbar__form {
  grid-template-columns:
    minmax(260px, 0.9fr)
    minmax(320px, 1.1fr)
    180px !important;
  align-items: start !important;
}

.ww-search-field,
.ww-search-action {
  display: grid !important;
  grid-template-rows: 18px 54px !important;
  gap: 7px !important;
  align-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ww-search-field > span,
.ww-search-action__label {
  display: block !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 18px !important;
}

.ww-search-action__label {
  visibility: hidden;
}

.ww-jobs-searchbar__form input,
.ww-search-submit {
  grid-row: 2;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: start !important;
  box-sizing: border-box !important;
}

.ww-search-submit {
  border-color: #157f78 !important;
  background: #157f78 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.ww-search-submit:hover,
.ww-search-submit:focus {
  border-color: #116d68 !important;
  background: #116d68 !important;
}

/* Tablet and mobile remain stacked cleanly. */
@media (max-width: 900px) {
  .ww-jobs-searchbar__form {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .ww-search-action {
    grid-column: 1 / -1;
    grid-template-rows: 54px !important;
  }

  .ww-search-submit {
    grid-row: 1;
  }
}

@media (max-width: 600px) {
  .ww-jobs-searchbar__form {
    grid-template-columns: 1fr !important;
  }

  .ww-search-field {
    grid-template-rows: 18px 52px !important;
  }

  .ww-search-action {
    grid-column: auto;
    grid-template-rows: 52px !important;
  }

  .ww-jobs-searchbar__form input,
  .ww-search-submit {
    height: 52px !important;
    min-height: 52px !important;
  }
}
/* Force balanced desktop search columns. */
@media (min-width: 901px) {
  .ww-jobs-searchbar__form {
    grid-template-columns:
      minmax(0, 42%)
      minmax(0, 1fr)
      180px !important;
  }

  .ww-search-field--keyword {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .ww-search-field--location {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .ww-search-action {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}
/* Make desktop filters occupy the complete available width. */
@media (min-width: 1001px) {
  .ww-jobs-filterbar form {
    width: 100% !important;
    max-width: none !important;
        grid-template-columns:
      repeat(6, minmax(115px, 1fr))
      minmax(175px, 1.2fr)
      minmax(130px, 0.9fr) !important;
  }

  .ww-jobs-filterbar label,
  .ww-jobs-filterbar select {
    width: 100% !important;
    max-width: none !important;
  }

  .ww-jobs-filterbar button {
    width: 100% !important;
    min-width: 175px;
  }

  .ww-jobs-filterbar__clear {
    width: 100% !important;
    justify-content: center;
  }
}
/* Secondary filter action — distinct from application buttons. */
.ww-jobs-filterbar button {
  border: 1px solid #15968c !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #157f78 !important;
}

.ww-jobs-filterbar button:hover,
.ww-jobs-filterbar button:focus {
  border-color: #157f78 !important;
  background: #edf8f6 !important;
  color: #116d68 !important;
}

/* Keep the button compact while filters fill the row. */
@media (min-width: 1001px) {
  .ww-jobs-filterbar form {
    grid-template-columns:
      repeat(4, minmax(150px, 1fr))
      180px
      60px !important;
  }

  .ww-jobs-filterbar button {
    width: 180px !important;
    min-width: 180px !important;
  }
}
/* Active keyword displayed below the filters. */
.ww-active-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: -6px 0 22px;
}

.ww-active-search__label {
  color: #5b7082;
  font-size: 13px;
  font-weight: 400;
}

.ww-active-search__chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  padding: 5px 11px;
  border: 1px solid #9fcac5;
  background: #f5fbfa;
  color: #155f59;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
}

.ww-active-search__chip:hover {
  border-color: #15968c;
  background: #edf8f6;
}

.ww-active-search__remove {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
/* Center the empty-results state across the full workspace. */
.ww-jobs-workspace .ww-jobs-split.is-empty {
  grid-template-columns: 1fr;
}

.ww-jobs-split.is-empty .ww-jobs-feed {
  width: 100%;
}

.ww-jobs-split.is-empty .ww-jobs-summary {
  justify-content: center;
  text-align: center;
}

.ww-jobs-split.is-empty .ww-job-search__empty {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.ww-jobs-split.is-empty .ww-job-search__empty h2,
.ww-jobs-split.is-empty .ww-job-search__empty p {
  max-width: 520px;
  margin-inline: auto;
}

.ww-jobs-split.is-empty .ww-job-search__empty a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 0 18px;
}
.ww-active-search__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
/* Clear-filters secondary action. */
.ww-jobs-filterbar__clear {
  display: inline-flex;
  width: 130px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #7895a8;
  background: #fff;
  color: #294d66;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.ww-jobs-filterbar__clear:hover {
  border-color: #157f77;
  background: #f2faf8;
  color: #116c65;
}

.ww-jobs-filterbar__clear:focus-visible {
  outline: 3px solid rgba(21, 150, 140, 0.22);
  outline-offset: 2px;
}

@media (min-width: 1001px) {
  .ww-jobs-filterbar form {
    grid-template-columns:
      repeat(4, minmax(150px, 1fr))
      180px
      130px !important;
  }
}

@media (max-width: 1000px) {
  .ww-jobs-filterbar__clear {
    width: auto;
  }
}
.ww-jobs-filterbar__clear {
  display: inline-flex;
  width: 130px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #8fc8c2;
  background: #e7f5f3;
  color: #126d66;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.ww-jobs-filterbar__clear:hover {
  border-color: #15968c;
  background: #d7eeeb;
  color: #0f5f59;
}
/* Keep filter controls visually uniform. */
.ww-jobs-filterbar select,
.ww-jobs-filterbar select option {
  font-weight: 400 !important;
}

.ww-jobs-filterbar button,
.ww-jobs-filterbar__clear {
  font-weight: 400 !important;
}
/* Anonymous application choices. */
.ww-job-preview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ww-job-preview__register {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #17324d;
  background: #fff;
  color: #17324d;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.ww-job-preview__register:hover,
.ww-job-preview__register:focus {
  border-color: #167c74;
  background: #f3faf8;
  color: #126d66;
}
/* Desktop layout with listing-date filter. */
@media (min-width: 1001px) {
  .ww-jobs-filterbar form {
    grid-template-columns:
      repeat(5, minmax(130px, 1fr))
      180px
      130px !important;
  }
}
/* Lighter typography for the anonymous job-search page. */
.ww-public-main .ww-jobs-portal {
  font-weight: 400;
}

.ww-public-main .ww-job-result h2,
.ww-public-main .ww-job-preview h2 {
  font-weight: 600;
}

.ww-public-main .ww-job-result__company,
.ww-public-main .ww-job-preview__company {
  font-weight: 500;
}

.ww-public-main .ww-job-result__meta,
.ww-public-main .ww-job-result__description,
.ww-public-main .ww-job-preview__description,
.ww-public-main .ww-job-preview__facts,
.ww-public-main .ww-jobs-summary {
  font-weight: 400;
}

.ww-public-main .ww-jobs-filterbar label,
.ww-public-main .ww-jobs-filterbar select,
.ww-public-main .ww-jobs-filterbar button,
.ww-public-main .ww-jobs-filterbar__clear {
  font-weight: 400 !important;
}

.ww-public-main .ww-job-preview__section h3 {
  font-weight: 600;
}

.ww-public-main .ww-job-preview__apply,
.ww-public-main .ww-job-preview__register {
  font-weight: 500;
}
Pasted text(20260903-013710).txt
Document
Pasted text(20260903-023029).txt
Document
Pasted text(20260903-023326).txt
Document

We can add native browser autosuggest without another library.

First update the Twig field in:

web/modules/custom/willworks_core/templates/willworks-jobseeker-job-search.html.twig

Replace the current Where block:

<label class="ww-search-field ww-search-field--location">
  <span>{{ 'Where'|t }}</span>
  <input
    type="search"
    name="location"
    value="{{ filters.location }}"
    placeholder="{{ 'City or province'|t }}"
  >
</label>

with:

<label class="ww-search-field ww-search-field--location">
  <span>{{ 'Where'|t }}</span>
  <input
    type="search"
    name="location"
    value="{{ filters.location }}"
    placeholder="{{ 'City or province'|t }}"
    list="ww-location-suggestions"
    data-ww-location-autocomplete="/willworks/location-autocomplete"
    autocomplete="off"
  >
  <datalist id="ww-location-suggestions"></datalist>
</label>

Next, open:

code web/modules/custom/willworks_core/js/job-search-split.js

Insert this function immediately before:

if (document.readyState === 'loading') {
function configureLocationAutocomplete() {
  const inputs = document.querySelectorAll(
    '[data-ww-location-autocomplete]',
  );

  inputs.forEach(function (input) {
    const listId = input.getAttribute('list');
    const list = listId
      ? document.getElementById(listId)
      : null;
    const endpoint = input.dataset.wwLocationAutocomplete;

    if (!list || !endpoint) {
      return;
    }

    let timer = null;
    let requestController = null;

    input.addEventListener('input', function () {
      const query = input.value.trim();

      window.clearTimeout(timer);

      if (requestController) {
        requestController.abort();
        requestController = null;
      }

      if (query.length < 2) {
        list.replaceChildren();
        return;
      }

      timer = window.setTimeout(function () {
        requestController = new AbortController();

        fetch(
          endpoint + '?q=' + encodeURIComponent(query),
          {
            headers: {
              Accept: 'application/json',
            },
            signal: requestController.signal,
          },
        )
          .then(function (response) {
            if (!response.ok) {
              throw new Error(
                'Location autocomplete request failed.',
              );
            }

            return response.json();
          })
          .then(function (locations) {
            if (input.value.trim() !== query) {
              return;
            }

            list.replaceChildren();

            locations.forEach(function (location) {
              const option = document.createElement('option');

              option.value = location.value;
              option.label = location.label;

              list.appendChild(option);
            });
          })
          .catch(function (error) {
            if (error.name !== 'AbortError') {
              list.replaceChildren();
            }
          });
      }, 200);
    });
  });
}

Then add this line in both initialization sections, directly after configureKeywordHistory();:

configureLocationAutocomplete();

The bottom should become:

if (document.readyState === 'loading') {
  document.addEventListener(
    'DOMContentLoaded',
    function () {
      configureFilterDrawer();
      configureKeywordHistory();
      configureLocationAutocomplete();
    },
  );
}
else {
  configureFilterDrawer();
  configureKeywordHistory();
  configureLocationAutocomplete();
}

Keep the existing final IIFE closing line if present:

})();

Save both files, then run:

ddev drush cr

Hard-refresh with Ctrl+F5, type at least two letters such as ma into Where, and wait briefly. Locations from published jobs and employer profiles should appear.

the magnifying flass or circle is not showing

Correct—the native datalist does not automatically show a magnifying-glass indicator. We need add it visually.

Open:

code web/modules/custom/willworks_core/css/jobseeker-job-search.css

Add this at the bottom:

/* Location autocomplete indicator. */
.ww-search-field--location {
  position: relative;
}

.ww-search-field--location input {
  padding-right: 52px;
}

.ww-search-field--location::before {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 25px;
  width: 14px;
  height: 14px;
  border: 2px solid #567084;
  border-radius: 50%;
  pointer-events: none;
}

.ww-search-field--location::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 21px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: #567084;
  transform: rotate(45deg);
  transform-origin: center;
  pointer-events: none;
}

.ww-search-field--location:focus-within::before {
  border-color: #168d83;
}

.ww-search-field--location:focus-within::after {
  background: #168d83;
}

/* Location autocomplete indicator. */
.ww-search-field--location input {
  padding-right: 52px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23567084' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 22px 22px;
}

.ww-search-field--location input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23168d83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
}
.ww-search-field--location input {
  padding-right: 52px;
}
.ww-search-field--location input::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}