/* ─── Job Board Search Form ─────────────────────────────────────────────── */

.jb-search-wrap {
  font-family: 'Lato', sans-serif;
  max-width: 1194px;
  margin: 0 auto;
}

/* Search bar row */
.jb-search-bar {
  display: flex;
  gap: 38px;
  margin-bottom: 24px;
}

.jb-search-bar:first-of-type {
  padding: 0 14px
}

.jb-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  background: rgba(128, 168, 227, 0.2);
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
}

.jb-search-icon {
  width: 28px;
  height: 28px;
  color: #0F2677;
  flex-shrink: 0;
  margin-right: 0px;
}

.jb-keyword-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: 'Lato', sans-serif;
  font-size: 26px;
  color: #0F2677;
  padding: 0;
  min-width: 0;
}

.jb-keyword-input::placeholder {
  color: rgba(15, 38, 119, 0.5);
}

.jb-search-btn {
  background: #0F2677;
  color: #80A8E3;
  border: none;
  border-radius: 10px;
  height: 60px;
  padding: 0 32px;
  font-family: 'Lato', sans-serif;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  min-width: 310px;
}

.jb-search-btn:hover {
  background: #0a1d5a;
}

/* Filter bar — no background */
.jb-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: center;
  padding: 4px 0;
}

.jb-filter-group {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 280px;
}

.jb-clear-btn {
  background: transparent;
  border: none;
  color: #80A8E3;
  font-family: 'Lato', sans-serif;
  font-size: 26px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 8px;
  text-decoration: underline;
  white-space: nowrap;
  text-decoration: none;
}

.jb-clear-btn:hover {
  color: #0a1d5a;
  background: transparent;
}

/* ─── Tom Select overrides ──────────────────────────────────────────────── */

.ts-wrapper,
.jb-filter-group .ts-wrapper {
  width: 100%;
}

.jb-filter-group .ts-control {
  background: rgba(128, 168, 227, 0.2) !important;
  background-image: none !important;
  border: 1.5px solid #80A8E3;
  border: none;
  border-radius: 10px !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  padding: 0 24px 0 12px !important;
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  color: #0F2677;
  cursor: pointer;
  min-height: 60px;
  position: relative;
}

/* Collapse the search input once a value is selected (single-select mode) */
.jb-filter-group .ts-wrapper.single.has-items .ts-control > input {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  border: none !important;
}

.jb-filter-group .ts-control input {
  font-size: 26px;
}

/* Placeholder label */
.jb-filter-group .ts-control .placeholder,
.jb-filter-group .ts-control ::placeholder {
  color: rgba(15, 38, 119, 1);
  font-family: 'Lato', sans-serif;
  font-size: 26px;
  opacity: 1;
}

/* Clear (×) button */
.jb-filter-group .ts-control .clear-button {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #0F2677;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  text-decoration: none;
  display: none;
}

.jb-filter-group .ts-wrapper.has-items .ts-control .clear-button {
  display: block;
}

.jb-filter-group .ts-control .clear-button:hover {
  color: #0a1d5a;
}

.jb-filter-group .ts-control:focus-within,
.jb-filter-group .ts-wrapper.focus .ts-control {
  border-color: #0F2677 !important;
  box-shadow: 0 0 0 3px rgba(15, 38, 119, 0.15) !important;
}

.jb-filter-group .ts-dropdown {
  border: 1.5px solid #80A8E3;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(15, 38, 119, 0.15);
  margin-top: 4px;
  overflow: hidden;
}

.jb-filter-group .ts-dropdown .ts-dropdown-content {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.jb-filter-group .ts-dropdown .option {
  padding: 9px 14px;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: #0F2677;
  cursor: pointer;
}

.jb-filter-group .ts-dropdown .option:hover,
.jb-filter-group .ts-dropdown .option.active {
  background: #80A8E3;
  color: #0F2677;
}

.jb-filter-group .ts-dropdown .option.selected {
  background: #0F2677;
  color: #80A8E3;
}

.jb-filter-group .ts-dropdown .no-results,
.jb-filter-group .ts-dropdown .ts-loading {
  padding: 10px 14px;
  color: #0F2677;
  font-size: 14px;
}

/* Caret — SVG chevron replaces the default border-triangle.
   Must match TomSelect's .single .ts-control::after specificity. */
.jb-filter-group .ts-wrapper.single .ts-control::after,
.jb-filter-group .ts-control::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2677' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .jb-search-bar {
    flex-direction: column;
  }

  .jb-search-btn {
    width: 100%;
    text-align: center;
  }

  .jb-filter-group {
    flex: 1 1 calc(50% - 5px);
    max-width: none;
  }
}

@media (max-width: 420px) {
  .jb-filter-group {
    flex: 1 1 100%;
  }
}