/* ==========================================================================
   Staytec - Theme Custom Styles
   ==========================================================================

   INDEX
   -----
   1.  Job Listings (cards)
   2.  Home - Search Form (Zoeken)
   3.  Application - Show
   4.  Layout - Containers
   5.  Vacatures - Page Banner
   6.  Vacatures - Filters
   7.  Vacatures - Listings
   8.  Vacatures - Listing Box (vlb)
   9.  Pagination
   10. Single Vacancy - Banner
   11. Single Vacancy - Data (svd)
   12. Single Vacancy - Content (svc)
   13. Get Started Section (gss)
   14. Vacatures - Application Form
   15. Responsive - max-width 1024px
   16. Responsive - max-width 767px
   ========================================================================== */

:root {
  --Alert-Light: #ffc9ad;
}


/* ==========================================================================
   1. Job Listings (cards)
   ========================================================================== */

.job_listings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==========================================================================
   2. Home - Search Form (Zoeken)
   ========================================================================== */

.home-zoeken-input input {
  height: 74px;
  border-color: #cdcdcd;
  border-radius: 0;
  color: #3b4251;
  transition: padding-inline 0s;
}

.home-zoeken-button button {
  background-color: #008bc8;
  align-items: center;
  border-radius: 0;
  border-style: none;
  border-width: 0px;
  color: #ffffff;
  padding: 24px;
}

/* [staytec_job_search] shortcode: title + keyword input + button in a row. */
.vacatures-zoeken-title {
  color: #fff;
  text-align: center;
  margin: 0 0 20px;
}

.vacatures-zoeken-form {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.vacatures-zoeken-form .home-zoeken-input {
  flex: 1 1 auto;
}

.vacatures-zoeken-form .home-zoeken-input input {
  width: 100%;
}

.vacatures-zoeken-form .home-zoeken-button {
  flex: 0 0 auto;
}

.vacatures-zoeken-form .home-zoeken-button button {
  height: 100%;
  cursor: pointer;
}


/* ==========================================================================
   3. Application - Show
   ========================================================================== */

.application_details {
  display: block !important;
}


/* ==========================================================================
   4. Layout - Containers
   ========================================================================== */

.custom-container {
  max-width: 1174px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

.page-banner-container {
  max-width: 1184px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}


/* ==========================================================================
   5. Vacatures - Page Banner
   ========================================================================== */

.page-banner {
  background-image: url(/wp-content/uploads/2025/04/qcpj_8z9oos.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding: 130px 0;
  background-position: center right;
}

.page-banner:before {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  background-image: url("https://stagingstaytec.mediya.dev/wp-content/uploads/2025/01/slider-content-bg.svg");
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.page-banner-content span {
  font-family: var(--e-global-typography-3de9859-font-family), Sans-serif;
  font-size: var(--e-global-typography-3de9859-font-size);
  font-weight: var(--e-global-typography-3de9859-font-weight);
  color: #FFFFFF;
  display: block;
}

.page-banner-content h1 {
  font-family: "Raleway", Sans-serif;
  font-size: 50px;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
  color: #FFFFFF;
  margin: 15px 0;
}

.page-banner-content a {
  background-color: var(--e-global-color-5c73311);
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight);
  color: #fff;
  border-radius: 3px;
  padding: 9px 20px;
}

.page-banner-content a svg {
  width: 15px;
}

.page-banner-content a svg path {
  fill: #fff;
}


/* ==========================================================================
   6. Vacatures - Filters
   ========================================================================== */

form.vacatures-filters {
  background: var(--e-global-color-5c73311);
  padding: 32px;
}

.vacatures-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.vacatures-filters-col {
  position: relative;
}

.vacatures-filters-col.full-col {
  width: 100%;
}

.vacatures-filters-col.normal-col {
  width: calc(20% - 6px);
}

.vacatures-filters-col.button-col {
  width: calc(16% - 20px);
}

.vacatures-filters-col input[type=text],
.vacatures-filters-col select {
  border: 1px solid #666;
  border-radius: 3px;
  padding: .5rem 1rem;
  transition: all .3s;
  min-height: 42px;
  outline: none !important;
}

.vacatures-filters-col svg {
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 13px;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.vacatures-filters-col svg:hover {
  opacity: 1;
}

.vacatures-filters-col input[type="submit"],
.vacatures-filters-col input[type="submit"]:hover {
  background: rgb(51, 153, 254);
  border: none;
  border-radius: 3px;
  min-height: 42px;
  color: #fff;
  width: 100%;
}

/* Dienstverband multi-select (Select2) — matched to the filter inputs above */
.vacatures-filters-col .select2-container {
  width: 100% !important;
}

.vacatures-filters-col .select2-container--default .select2-selection--multiple {
  border: 1px solid #666;
  border-radius: 3px;
  min-height: 42px;
  padding: 2px 8px;
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.vacatures-filters-col .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #666;
}

.vacatures-filters-col .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  background-color: #eaf3fb;
  border: 1px solid #d6e8f7;
  border-radius: 4px;
  color: #2d6cb3;
  padding: 2px 8px;
  margin: 3px 5px 3px 0;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: relative; /* anchor for the absolutely-centered × below */
  flex: 0 0 auto; /* never shrink, so the cross stays visible on long labels */
  background: #b9c6d1;
  border: none !important;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0; /* hide Select2's default glyph; draw a crisp one below */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before {
  content: "\00d7";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: #9aaab8;
}

.vacatures-filters-col .select2-search--inline .select2-search__field {
  margin: 4px 0 0;
}

.select2-dropdown {
  border-color: #666;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #eaf3fb;
  color: #2d6cb3;
}


/* ==========================================================================
   7. Vacatures - Listings
   ========================================================================== */

.vacatures-listing-section {
  margin-top: -50px;
  padding-bottom: 60px;
}

.vacatures-listings {
  padding-top: 40px;
}

.vacatures-listing-box {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.vacatures-listing-box + .vacatures-listing-box {
  margin-top: 30px;
}


/* ==========================================================================
   8. Vacatures - Listing Box (vlb)
   ========================================================================== */

.vlb-top {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}

.vlb-top-left {
  display: flex;
  align-items: center;
  gap: 36px;
}

.vlb-top-left img {
  width: 78px;
  min-width: 78px;
}

.vlb-top-left a {
  font-family: var(--e-global-typography-3de9859-font-family), Sans-serif;
  font-size: var(--e-global-typography-3de9859-font-size);
  font-weight: var(--e-global-typography-3de9859-font-weight);
  color: var(--e-global-color-f6bf0a6);
}

.bekijk-vacature-btn {
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  fill: #fff;
  font-size: 15px;
  line-height: 1;
  padding: 12px 24px;
  text-align: center;
  transition: all .3s;
  background-color: var(--e-global-color-accent);
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight);
}

.bekijk-vacature-btn:hover {
  background-color: #007BFFB3;
  color: var(--e-global-color-e27d815);
}

.vlb-top-middle {
  margin: 20px 0 0 0;
}

.vlb-top-middle p {
  margin: 0;
}

.vlb-meta-data {
  padding: 20px 0 0 0;
  margin: 20px 0 0 0;
  list-style: none;
  border-top: 1px solid #DEE2E6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.vlb-meta-data svg {
  width: 20px;
  height: 20px;
  color: red;
}

.vlb-meta-data svg path {
  fill: var(--e-global-color-f6bf0a6);
}

.vlb-meta-data li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vlb-meta-data li p {
  margin: 0;
}

.vlb-top-bottom {
  margin-top: 20px;
  display: none;
}

.vlb-top-bottom a {
  width: 100%;
}


/* ==========================================================================
   9. Pagination
   ========================================================================== */

.custom-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 32px;
}

.cp-numbers {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cp-numbers .prev,
.cp-numbers .next {
  line-height: 0;
}

.cp-numbers a.page-numbers {
  font-size: 16px;
  color: rgb(4 28 62 / 50%);
}


/* ==========================================================================
   10. Single Vacancy - Banner
   ========================================================================== */

.single-vacancy-banner {
  background: var(--e-global-color-f6bf0a6);
  padding: 48px 0 148px 0;
}

.single-vacancy-banner-content h1 {
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight);
  color: #fff;
}

.back-to-vancancy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight);
  color: #fff;
}

.back-to-vancancy:hover {
  color: #fff;
}

.back-to-vancancy svg {
  width: 15px;
  height: 15px;
}

.back-to-vancancy svg path {
  fill: #fff;
}


/* ==========================================================================
   11. Single Vacancy - Data (svd)
   ========================================================================== */

.single-vacancy-data {
  margin-top: -100px;
}

.svd-wrap {
  padding: 40px;
  background: #fff;
  display: flex;
}

.svd-column {
  padding: 0 5px;
  width: 20%;
}

.svd-icon-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.svd-icon-title svg {
  width: 24px;
  height: 24px;
}

.svd-icon-title span {
  font-family: "Roboto", Sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.svd-box {
  background-color: #F6F7F9;
  padding: 16px 16px 16px 16px;
  height: 100%;
}

.svd-btn-column {
  display: flex;
  align-items: center;
}

.direct-solliciteren-btn {
  background-color: var(--e-global-color-5c73311);
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight);
  color: #fff;
  border-radius: 3px;
  padding: 9px 20px;
  width: 100%;
  justify-content: center;
}

.direct-solliciteren-btn:hover {
  color: #fff;
}

.direct-solliciteren-btn svg {
  width: 15px;
  height: 15px;
}

.direct-solliciteren-btn svg path {
  fill: #fff;
}


/* ==========================================================================
   12. Single Vacancy - Content (svc)
   ========================================================================== */

.single-vacancy-content {
  padding: 30px 0 80px 0;
}

.svc-box + .svc-box {
  margin-top: 40px;
}

.svc-box h2 {
  font-family: "Lato", Sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #486284;
  margin: 0 0 12px 0;
}

.svc-content p {
  margin: 0;
}

.svc-content p + p {
  margin-top: 12px;
}

.svc-content ul + p {
  margin-top: 20px !important;
}


/* ==========================================================================
   13. Get Started Section (gss)
   ========================================================================== */

.get-started-section {
  padding: 80px 0;
  background: #F6F7F9;
}

.gss-title {
  text-align: center;
}

.gss-title h2 {
  margin: 0 0 30px 0;
  font-family: "Lato", Sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #486284;
}

.gss-row {
  display: flex;
  text-align: center;
}

.gss-box {
  width: 33.33%;
  padding: 0 30px;
}

.gss-box svg {
  width: 50px;
  height: 50px;
}

.gss-box h3 {
  margin: 20px 0 20px 0;
  font-family: "Lato", Sans-serif;
  font-size: 21px;
  font-weight: 600;
}

.gss-button {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}

.gss-button .direct-solliciteren-btn {
  width: auto;
}


/* ==========================================================================
   14. Vacatures - Application Form
   ========================================================================== */

.vacatures-form-section {
  padding: 80px 0;
}

.vacatures-form-section .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.vacatures-form-section .col-lg-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 15px;
  padding-left: 15px;
}

.vacatures-form-section .col-lg-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.form-row-box {
  margin-bottom: 24px;
}

.form-row-box label {
  font-size: 16px;
  font-weight: 600;
  color: #486284;
  margin: 0 0 10px 0;
  display: block;
}

.form-row-box br {
  display: none;
}

.form-row-box input {
  border-radius: 100px;
  border: 1px solid #dedede !important;
}

.form-row-box input:focus {
  outline: none;
}

.form-row-box input.error, .form-row-box textarea.error, .form-row-box select.error {
    background-color: var(--Alert-Light);
}

.custom-upload-box.error {
    background-color: var(--Alert-Light);
}

.custom-checkbox-label input.error+span:before {
    background: var(--Alert-Light);
}

.application-form .form-error-text {
    display: none;
    width: 100%;
    margin: 0 0 16px;
    color: #c0392b;
    font-weight: 600;
}

.custom-upload-box {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  color: #000 !important;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  border: 1px solid #dedede;
}

.custom-upload-box input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-upload-box p {
  margin: 10px 0 8px 0;
  font-weight: normal;
}

.custom-upload-box p .file-upload-box {
  color: #486284;
}

.custom-upload-box > span {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 136%;
  color: rgba(4, 28, 62, 0.50);
  margin-top: 10px;
  display: block;
}

h2.vacatures-zoeken-title {
    font-family: var(--e-global-typography-959d338-font-family), Sans-serif;
    font-size: var(--e-global-typography-959d338-font-size);
    font-weight: var(--e-global-typography-959d338-font-weight);
    line-height: var(--e-global-typography-959d338-line-height);
    letter-spacing: var(--e-global-typography-959d338-letter-spacing);
    word-spacing: var(--e-global-typography-959d338-word-spacing);
    color: #FFFFFF;
}

.vacatures-zoeken-form .home-zoeken-input input {
    padding: 10px 15px;
    height: auto;
    border: none;
    outline: none !important;
}

.vacatures-zoeken-form .home-zoeken-button input[type="submit"] {
    border: none;
    background: #2f8bc7;
    color: #fff;
    border-radius: 0;
    padding: 9px 30px;
    height: 100%;
}

.custom-checkbox-label {
  position: relative;
  display: block;
  margin-bottom: 25px;
}

.custom-checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-checkbox-label a {
  color: var(--e-global-color-5c73311);
}

.custom-checkbox-label span {
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 146%;
  position: relative;
  padding-left: 30px;
}

.custom-checkbox-label span:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid #dedede !important;
  left: 0;
  top: 0px;
  border-radius: 4px;
}

.custom-checkbox-label input:checked + span:before {
  background: var(--e-global-color-5c73311);
  border-color: var(--e-global-color-5c73311);
}

.custom-checkbox-label input:checked + span:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 8px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.application-form button#form-submit {
  background-color: var(--e-global-color-5c73311);
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight);
  color: #fff;
  border-radius: 3px;
  border: none;
  padding: 9px 20px;
}


/* ==========================================================================
   15. Responsive - max-width 1024px
   ========================================================================== */

@media only screen and (max-width: 1024px) {
  .page-banner {
    padding: 100px 0 120px 0;
  }

  .page-banner:before {
    background-size: cover;
  }

  .page-banner-content h1 {
    font-size: 30px;
  }

  form.vacatures-filters {
    padding: 20px;
  }

  .vacatures-filters-col.normal-col {
    width: 100%;
  }

  .vacatures-filters-col.button-col {
    width: 100%;
  }

  .vlb-top .bekijk-vacature-btn {
    display: none;
  }

  .vlb-top-left {
    gap: 15px;
  }

  .vlb-top-left img {
    width: 40px;
    min-width: 40px;
  }

  .vlb-top-middle {
    margin-top: 15px;
  }

  .vlb-top-bottom {
    display: block;
  }

  .single-vacancy-banner-content h1 {
    font-size: 36px;
  }

  .svd-wrap {
    padding: 20px;
    flex-wrap: wrap;
  }

  .svd-column {
    width: 25%;
  }

  .svd-column.svd-btn-column {
    width: 100%;
    margin-top: 15px;
  }

  .single-vacancy-content {
    padding: 30px 0 50px 0;
  }

  .get-started-section {
    padding: 50px 0;
  }

  .vacatures-form-section {
    padding: 50px 0;
  }
}


/* ==========================================================================
   16. Responsive - max-width 767px
   ========================================================================== */

@media only screen and (max-width: 767px) {
  .single-vacancy-banner-content h1 {
    font-size: 28px;
  }

  .svd-column {
    width: 100%;
    margin: 0 0 5px 0;
  }

  .gss-row {
    flex-wrap: wrap;
  }

  .gss-box {
    width: 100%;
    padding: 0 0;
  }

  .gss-box + .gss-box {
    margin-top: 30px;
  }

  .gss-box h3 {
    margin: 10px 0 10px 0;
  }

  .vacatures-form-section .col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
}