.search-experience {
  bottom: var(--md-4);
  z-index: 100;
  width: auto;
  right: 50%;
  transform: translateX(50%);
    z-index: 999!important
}
.search-experience .form-field__ai-search {
  padding-left: calc(var(--sm-3) + 2.4rem + var(--sm-4))
}
.search-experience .form-field__ai-search + .form-field__search-button {
  top: var(--sm-3)
}
.search-experience .form-field__search-icon {
  top: var(--sm-3);
  left: var(--sm-3)
}
.search-experience .form-field__search-icon .icon {
  font-size: 2.1rem
}
.search-experience .form-field__search-button {
  border-radius: 50%;
  height: 32px;
  width: 32px;
  display: flex;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  top: calc(50% - 1.5rem);
  border: .2rem solid var(--primary-3)
}
.search-experience .form-field .icon-neon-right-arrow {
  color: var(--primary-3);
  transform: rotate(0);
  font-size: 1.2rem
}
.search-experience .form-field__search:focus + .form-field__search-button {
  background-color: var(--primary-3);
  border: .2rem solid var(--primary-3)
}
.search-experience .form-field__search:focus + .form-field__search-button .icon-neon-right-arrow {
  color: var(--primary-6)
}

.search-experience .dropdown__button .icon {
  font-size: .9rem
}
.search-experience .dropdown__button.show {
  color: var(--primary-3)
}
.search-experience .dropdown__button.show .dropdown__button-label {
  color: var(--primary-3)
}
.search-experience .dropdown__button.show .icon {
  color: var(--primary-3)
}
.search-experience .dropdown__button + ul {
  padding: .2rem
}
.search-experience .dropdown__link {
  font-size: var(--body-xs-font-size);
  line-height: var(--body-xs-line-height);
  color:var(--base-4) !important;
}
.search-experience__panel-sort-filter .icon {
  margin-bottom: .2rem
}
.search-experience__panel-sort {
  font-family: var(--tag-font-family);
  font-size: var(--tag-font-size);
  line-height: var(--tag-line-height);
  text-transform: uppercase;
  letter-spacing: var(--tag-alt-letter-spacing);
  font-weight: var(--tag-alt-weight);
  min-width: -moz-fit-content;
  min-width: fit-content;
  margin-right: 1rem
}
.search-experience__panel-header {
  padding-top: var(--sm-2);
  border-top: 1px solid rgba(255,255,255,.5)
}
.search-experience__panel-header .dropdown {
  min-width: -moz-fit-content;
  min-width: fit-content
}
.search-experience__panel-header .dropdown__button {
  text-transform: uppercase
}
.search-experience__panel-header .dropdown button,
.search-experience__panel-header .dropdown__link {
  font-family: var(--tag-font-family);
  font-size: var(--tag-font-size);
  line-height: var(--tag-line-height);
  letter-spacing: var(--tag-letter-spacing);
  font-weight: var(--tag-weight)
}
.search-experience__tabs {
  box-shadow: 0 1.6rem 1.6rem 0 rgba(0,0,0,.1);
  margin: auto;
  min-width: 26.4rem!important;
  max-width: 29.6rem;
  min-width: -moz-fit-content;
  min-width: fit-content;
  width: 100%;
  border-radius: var(--radius-xs)
}
.search-experience__tabs .search-experience__close {
  position: unset;
  font-size: 2.4rem;
  padding: 0
}
.search-experience__tab {
  transition: all .3s;
  gap: 1rem
}
.search-experience__close {
  top: 1.6rem;
  display: flex;
  justify-content: end;
  padding-right: var(--md-4);
  position: relative;
  color: var(--primary-5)!important
}
.search-experience__close:hover {
  color: var(--primary-3)!important
}
.search-experience__panel-wrapper {
  overflow: auto;
  margin-right: calc(-1 * var(--bs-gutter-x) + .7rem);
  margin-left: calc(-.5 * var(--bs-gutter-x))
}
.search-experience__panel-wrapper::-webkit-scrollbar {
  width: .8rem
}
.search-experience__panel-wrapper::-webkit-scrollbar-track {
  background: rgba(190,218,229,.12);
  border-radius: 7rem
}
.search-experience__panel-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--primary-3);
  border-radius: 10rem
}
.search-experience .search-jobs__panels {
  border-radius: var(--radius-xs);
  background: rgba(255,255,255,.05)
}
.search-experience .search-jobs__tabs {
  background: rgba(255,255,255,.1)
}
.search-experience .search-jobs__tab {
  color: rgba(255,255,255,.5)!important
}
.search-experience .search-jobs__tab-active {
  color: var(--primary-3)!important;
  background-color: var(--primary-6)
}
.search-experience .search-jobs .form-field__search {
  color: var(--base-3);
  padding-right: 5rem
}
.search-experience .search-jobs .form-field__search::-moz-placeholder {
  color: var(--base-3)
}
.search-experience .search-jobs .form-field__search::placeholder {
  color: var(--base-3)
}
.search-experience .search-jobs .form-field__search:focus {
  box-shadow: 0 0 0 .25rem inset var(--primary-3)
}
.search-experience .search-jobs__panel-ai-suggestions-header {
  min-width: -moz-fit-content;
  min-width: fit-content
}
.search-experience .search-jobs__panel-ai-suggestions-link {
  border-radius: var(--radius-xs);
  border: 1px solid var(--primary-5);
  color: var(--primary-5);
  display: block
}
.search-experience .search-jobs__panel-ai-suggestions-link.active,
.search-experience .search-jobs__panel-ai-suggestions-link:focus-visible,
.search-experience .search-jobs__panel-ai-suggestions-link:hover {
  color: var(--primary-3)
}
@keyframes chatAnimation {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
.search-experience .search-jobs__ai-chat-user {
  display: flex;
  justify-content: end
}
.search-experience .search-jobs__ai-chat-user .search-jobs__message {
  padding: 4px 8px;
  background: var(--tint-light-10,rgba(255,255,255,.1));
  margin-bottom: var(--sm-3);
  animation: chatAnimation .5s ease-in-out
}
.search-experience .search-jobs__ai-chat-assistant {
  animation: chatAnimation .5s ease-in-out
}
.search-experience--panel-open {
  bottom: 0;
  width: 100%;
  right: 0;
  transform: none
}
.search-experience--panel-open .search-experience__tabs {
  max-width: calc(100% - 5.6rem);
  background-color: var(--primary-6);
  border-radius: 1.6rem 1.6rem 0 0;
  padding-top: calc(var(--sm-3) + var(--sm-1))
}
.search-experience--panel-open .search-experience__tab {
  opacity: .5;
  color: var(--primary-3)
}
.search-experience--panel-open .search-experience__tab-active {
  opacity: 1
}
@media (min-width:768px) {
  .search-experience__content {
    margin-top: var(--sm-3)
  }
  .search-experience__panels {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm)
  }
  .search-experience__tabs {
    max-width: -moz-fit-content!important;
    max-width: fit-content!important;
    padding-top: var(--sm-3);
    min-width: 31.6rem!important
  }
  .search-experience--panel-open .search-experience__tabs {
    padding-top: var(--sm-3);
    border-radius: var(--radius-xs)
  }
  .search-experience--panel-open {
    width: 100%;
    right: 0;
    bottom: 0 !important;
  }
}
@media (max-width:767.98px) {
  .search-experience .form-field__ai-search {
    min-height: 18rem
  }
  .search-experience .search-jobs__panel-ai-suggestions-list {
    overflow: auto
  }
  .search-experience .search-jobs__panel-ai-suggestions-item {
    min-width: -moz-fit-content;
    min-width: fit-content
  }
  .search-experience:not(.search-experience--panel-open) {
    transform: translateX(50%) translateY(-50px);
  } 
}
@media (min-width:1260px) {
  .search-experience__panels {
    min-width: calc(100% + var(--md-4) * 2)
  }
}
body.search-experience--panel-open::before {
  content: "";
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 6;
  background: rgba(114,114,114,.8);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px)
}
body.search-experience--panel-open .mm-page {
  z-index: 9
}
body.search-experience--panel-open .mm-page::before {
  content: "";
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 6;
  background: rgba(114,114,114,.8);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px)
}
[v-cloak] {
  display: none!important
}

/* ===== Multi-select facet dropdowns =====
   Structure matches the jobs listing page (checkboxes, counts, career stage), but the
   styling stays this component's: the accent here is --primary-3 on the dark panel, not
   the listing page's --primary-2. */

/* Selection count beside the button label: "LOCATION (2)". */
.search-experience .dropdown__button-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  margin-left: var(--xs-1);
  padding: 0 .4rem;
  border-radius: 50%;
  background: var(--primary-3);
  color: var(--base-1) !important;
  font-size: var(--body-xs-font-size);
  line-height: 3px
}

/* Result count against each option, kept clear of the label and the submenu chevron. */
.search-experience .dropdown__item-count {
  position: absolute;
  right: 1.2rem;
  top: var(--sm-4);
  color: var(--base-4)
}
.search-experience .dropdown .dropdown__item:has(.submenu) .dropdown__item-count {
  right: 5.2rem;
  color:var(--base-4);
}

/* The label spans the row so the whole option is clickable; the form-field is inset by the
   chevron's width so the submenu toggle stays reachable. The two go together. */
.search-experience .dropdown--multi-select .dropdown__item label {
  width: 100%
}
.search-experience .dropdown--multi-select .form-field {
  max-width: calc(100% - 9rem)
}
.search-experience .dropdown__button .dropdown__button-label {
    line-height: 1.5rem !important;
}

/* ===== Grid / full-width results view (traditional search tab) ===== */
.search-experience .jobs-view-toggle__button {
  padding: var(--xs-2);
  line-height: 0;
  color: var(--base-4)
}
.search-experience .jobs-view-toggle__button.active,.search-experience .jobs-view-toggle__button:hover,.search-experience .jobs-view-toggle__button:focus-visible {
  color: var(--primary-3)
}

/* List view: same card, laid out as a row. Direction and spacing come from the Bootstrap
   utilities the markup swaps in; only the column sizing lives here, so location and job
   type line up down the panel instead of hugging their own text. Below md the utilities do
   not apply and the card stays stacked, as in grid view. */
@media (min-width: 768px) {
  .search-experience .jobs-results--list .job-feed-card__tags-wrapper {
    height: -moz-fit-content;
    height: fit-content
  }
  .search-experience .jobs-results--list .job-feed-card__bottom {
    flex: 0 0 auto;
    justify-content: flex-start
  }
  .search-experience .jobs-results--list .job-feed-card__bottom,
  .search-experience .jobs-results--list .job-feed-card__top {
    width: calc(50% - var(--sm-2))
  }
  .search-experience .jobs-results--list .job-feed-card {
    min-height: auto
  }
  .search-experience .jobs-results--list .job-feed-card__bottom > div {
    width: calc(33.33% - calc(var(--sm-2)*2));
    min-width: auto
  }
}


/* The DS ticks a checkbox with a 5px --primary-2 ring — the brand purple used on the jobs
   listing page. In this component the accent is --primary-3, so the tick is restated to
   match. Specificity beats the DS rule; the fill stays white for contrast. */
.search-experience .form-field--checkbox .form-field__checkbox:checked + .form-field__label::before {
  border-color: var(--primary-3)
}


.search-experience .dropdown--multi-select .dropdown__link{
padding-left:var(--sm-3);
}

.search-experience .blog-list__top-dropdowns{
margin-bottom:var(--sm-3);
}