/* Vacancy Archive Styles */
.vacancy-list {
  .vacancy-list-item {
    &.active {
      border-color: var(--clr-primary-500);
      background-color: var(--clr-neutral-100);
    }
  }
}

.vacancy-list-item {
  /* Vacature categorieen icoontjes */
  /**
   * Styles applied to elements with a data-branche attribute value of "Administratie"
   * 
   * Note: CSS attribute selectors can check for exact matches using [data-branche^="Administratie"]
   * Other matching options available:
   * - [data-branche*="Administratie"] - contains "Administratie" anywhere
   * - [data-branche^="Administratie"] - starts with "Administratie"
   * - [data-branche$="Administratie"] - ends with "Administratie"
   * - [data-branche~="Administratie"] - contains "Administratie" as a complete word
   */
  &[data-branche^="Administratie"] {
    .vacancy-logo {
      background-color: hsl(0, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f07c";
      }
    }
  }
  &[data-branche^="Administratief Secretarieel"] {
    .vacancy-logo {
      background-color: hsl(11, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f67d";
      }
    }
  }
  &[data-branche^="Afvalbeheer"] {
    .vacancy-logo {
      background-color: hsl(22, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f1f8";
      }
    }
  }
  &[data-branche^="Agrarisch"] {
    .vacancy-logo {
      background-color: hsl(33, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f722";
      }
    }
  }
  &[data-branche^="Algemeen-projectmanagement"] {
    .vacancy-logo {
      background-color: hsl(44, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0e8";
      }
    }
  }
  &[data-branche^="Automatisering"] {
    .vacancy-logo {
      background-color: hsl(55, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f2db";
      }
    }
  }
  &[data-branche^="Automotive"] {
    .vacancy-logo {
      background-color: hsl(65, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f1b9";
      }
    }
  }
  &[data-branche^="Bakkerij"] {
    .vacancy-logo {
      background-color: hsl(76, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f7f6";
      }
    }
  }
  &[data-branche^="Banken"] {
    .vacancy-logo {
      background-color: hsl(87, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f4d3";
      }
    }
  }
  &[data-branche^="Beleid- en adviesdiensten"] {
    .vacancy-logo {
      background-color: hsl(98, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0eb";
      }
    }
  }
  &[data-branche^="Beveiliging"] {
    .vacancy-logo {
      background-color: hsl(109, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f8ac";
      }
    }
  }
  &[data-branche^="Biotechnologie"] {
    .vacancy-logo {
      background-color: hsl(120, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f5c3";
      }
    }
  }
  &[data-branche^="Bouw"] {
    .vacancy-logo {
      background-color: hsl(131, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f6e3";
      }
    }
  }
  &[data-branche^="Bouwkunde Civiele techniek"] {
    .vacancy-logo {
      background-color: hsl(142, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f43c";
      }
    }
  }
  &[data-branche^="Buitendienst"] {
    .vacancy-logo {
      background-color: hsl(153, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f3c5";
      }
    }
  }
  &[data-branche^="Burgerzaken en Receptiebalies"] {
    .vacancy-logo {
      background-color: hsl(164, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f2c2";
      }
    }
  }
  &[data-branche^="Callcenter"] {
    .vacancy-logo {
      background-color: hsl(175, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f590";
      }
    }
  }
  &[data-branche^="Catering"] {
    .vacancy-logo {
      background-color: hsl(185, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f562";
      }
    }
  }
  &[data-branche^="Chemie"] {
    .vacancy-logo {
      background-color: hsl(196, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0c3";
      }
    }
  }
  &[data-branche^="Communicatie"] {
    .vacancy-logo {
      background-color: hsl(207, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f086";
      }
    }
  }
  &[data-branche^="Consultancy"] {
    .vacancy-logo {
      background-color: hsl(218, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0c0";
      }
    }
  }
  &[data-branche^="Creatieve industrie"] {
    .vacancy-logo {
      background-color: hsl(229, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f53f";
      }
    }
  }
  &[data-branche^="Detailhandel"] {
    .vacancy-logo {
      background-color: hsl(240, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f54e";
      }
    }
  }
  &[data-branche^="Directie"] {
    .vacancy-logo {
      background-color: hsl(251, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f508";
      }
    }
  }
  &[data-branche^="Duurzaamheid en Milieu"] {
    .vacancy-logo {
      background-color: hsl(262, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f06c";
      }
    }
  }
  &[data-branche^="E-commerce"] {
    .vacancy-logo {
      background-color: hsl(273, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f07a";
      }
    }
  }
  &[data-branche^="Electrotechniek"] {
    .vacancy-logo {
      background-color: hsl(284, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0e7";
      }
    }
  }
  &[data-branche^="Energie"] {
    .vacancy-logo {
      background-color: hsl(295, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f06d";
      }
    }
  }
  &[data-branche^="Engineering"] {
    .vacancy-logo {
      background-color: hsl(305, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f085";
      }
    }
  }
  &[data-branche^="Evenementen"] {
    .vacancy-logo {
      background-color: hsl(316, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f736";
      }
    }
  }
  &[data-branche^="Facilitaire dienstverlening"] {
    .vacancy-logo {
      background-color: hsl(327, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f015";
      }
    }
  }
  &[data-branche^="Farmaceutische industrie"] {
    .vacancy-logo {
      background-color: hsl(338, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\f484";
      }
    }
  }
  &[data-branche^="Finance"] {
    .vacancy-logo {
      background-color: hsl(349, 75%, 88%);
    }
    .vacancy-icon {
      &::after {
        content: "\e529";
      }
    }
  }
  &[data-branche^="Financieel Economisch"] {
    .vacancy-logo {
      background-color: hsl(5, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f201";
      }
    }
  }
  &[data-branche^="Fotografie"] {
    .vacancy-logo {
      background-color: hsl(16, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f030";
      }
    }
  }
  &[data-branche^="Gezondheidszorg"] {
    .vacancy-logo {
      background-color: hsl(27, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0f0";
      }
    }
  }
  &[data-branche^="Grafische industrie"] {
    .vacancy-logo {
      background-color: hsl(38, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f1fc";
      }
    }
  }
  &[data-branche^="Griffie bestuursondersteuning"] {
    .vacancy-logo {
      background-color: hsl(49, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0c5";
      }
    }
  }
  &[data-branche^="Horeca"] {
    .vacancy-logo {
      background-color: hsl(60, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f2e6";
      }
    }
  }
  &[data-branche^="Hotel"] {
    .vacancy-logo {
      background-color: hsl(70, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f594";
      }
    }
  }
  &[data-branche^="HR"] {
    .vacancy-logo {
      background-color: hsl(81, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\e533";
      }
    }
  }
  &[data-branche^="ICT"] {
    .vacancy-logo {
      background-color: hsl(92, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f109";
      }
    }
  }
  &[data-branche^="Industrie & Productie"] {
    .vacancy-logo {
      background-color: hsl(103, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\e4c7";
      }
    }
  }
  &[data-branche^="Inkoop"] {
    .vacancy-logo {
      background-color: hsl(114, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f466";
      }
    }
  }
  &[data-branche^="Interim Management"] {
    .vacancy-logo {
      background-color: hsl(125, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0b1";
      }
    }
  }
  &[data-branche^="Juridisch"] {
    .vacancy-logo {
      background-color: hsl(136, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f24e";
      }
    }
  }
  &[data-branche^="Klantenservice"] {
    .vacancy-logo {
      background-color: hsl(147, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f590";
      }
    }
  }
  &[data-branche^="Kunst & Cultuur"] {
    .vacancy-logo {
      background-color: hsl(158, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f6c0";
      }
    }
  }
  &[data-branche^="Levensmiddelenindustrie"] {
    .vacancy-logo {
      background-color: hsl(169, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f818";
      }
    }
  }
  &[data-branche^="Logistiek"] {
    .vacancy-logo {
      background-color: hsl(180, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f472";
      }
    }
  }
  &[data-branche^="Maatschappelijk werk"] {
    .vacancy-logo {
      background-color: hsl(190, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f004";
      }
    }
  }
  &[data-branche^="Management"] {
    .vacancy-logo {
      background-color: hsl(201, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f508";
      }
    }
  }
  &[data-branche^="Marketing"] {
    .vacancy-logo {
      background-color: hsl(212, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0a1";
      }
    }
  }
  &[data-branche^="Maritiem"] {
    .vacancy-logo {
      background-color: hsl(223, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f21a";
      }
    }
  }
  &[data-branche^="Media"] {
    .vacancy-logo {
      background-color: hsl(234, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f008";
      }
    }
  }
  &[data-branche^="Metaalindustrie"] {
    .vacancy-logo {
      background-color: hsl(245, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0ad";
      }
    }
  }
  &[data-branche^="Militaire en defensie"] {
    .vacancy-logo {
      background-color: hsl(256, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f3ed";
      }
    }
  }
  &[data-branche^="Mode"] {
    .vacancy-logo {
      background-color: hsl(267, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f553";
      }
    }
  }
  &[data-branche^="Non-profit"] {
    .vacancy-logo {
      background-color: hsl(278, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f4be";
      }
    }
  }
  &[data-branche^="Olie en gas"] {
    .vacancy-logo {
      background-color: hsl(289, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f5c0";
      }
    }
  }
  &[data-branche^="Omgevingsdiensten"] {
    .vacancy-logo {
      background-color: hsl(300, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f1bb";
      }
    }
  }
  &[data-branche^="Onderwijs"] {
    .vacancy-logo {
      background-color: hsl(310, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f51c";
      }
    }
  }
  &[data-branche^="Onderwijs Wetenschap Cultuur"] {
    .vacancy-logo {
      background-color: hsl(321, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f5da";
      }
    }
  }
  &[data-branche^="Onderzoek en ontwikkeling (R&D)"] {
    .vacancy-logo {
      background-color: hsl(332, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0c3";
      }
    }
  }
  &[data-branche^="Onroerend goed"] {
    .vacancy-logo {
      background-color: hsl(343, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f015";
      }
    }
  }
  &[data-branche^="Openbare orde en veiligheid"] {
    .vacancy-logo {
      background-color: hsl(354, 65%, 85%);
    }
    .vacancy-icon {
      &::after {
        content: "\f505";
      }
    }
  }
  &[data-branche^="Overheid"] {
    .vacancy-logo {
      background-color: hsl(10, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f19c";
      }
    }
  }
  &[data-branche^="Papier- en verpakkingsindustrie"] {
    .vacancy-logo {
      background-color: hsl(21, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f1c1";
      }
    }
  }
  &[data-branche^="Participatie en Werk"] {
    .vacancy-logo {
      background-color: hsl(32, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f4c0";
      }
    }
  }
  &[data-branche^="Pers & Uitgeverij"] {
    .vacancy-logo {
      background-color: hsl(43, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f1ea";
      }
    }
  }
  &[data-branche^="Personeel en Organisatie"] {
    .vacancy-logo {
      background-color: hsl(54, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0c0";
      }
    }
  }
  &[data-branche^="Recreatie"] {
    .vacancy-logo {
      background-color: hsl(65, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f5ca";
      }
    }
  }
  &[data-branche^="Rechtsbijstand"] {
    .vacancy-logo {
      background-color: hsl(75, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0e3";
      }
    }
  }
  &[data-branche^="Recycling"] {
    .vacancy-logo {
      background-color: hsl(86, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f1b8";
      }
    }
  }
  &[data-branche^="Ruimtelijke ontwikkeling"] {
    .vacancy-logo {
      background-color: hsl(97, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f279";
      }
    }
  }
  &[data-branche^="Sales"] {
    .vacancy-logo {
      background-color: hsl(108, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f652";
      }
    }
  }
  &[data-branche^="Scheepvaart"] {
    .vacancy-logo {
      background-color: hsl(119, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f21a";
      }
    }
  }
  &[data-branche^="Schoonmaak"] {
    .vacancy-logo {
      background-color: hsl(130, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\e04d";
      }
    }
  }
  &[data-branche^="Secretarieel"] {
    .vacancy-logo {
      background-color: hsl(141, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f67d";
      }
    }
  }
  &[data-branche^="Service & Veiligheid"] {
    .vacancy-logo {
      background-color: hsl(152, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f636";
      }
    }
  }
  &[data-branche^="Sociale werkvoorziening"] {
    .vacancy-logo {
      background-color: hsl(163, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f017";
      }
    }
  }
  &[data-branche^="Sport"] {
    .vacancy-logo {
      background-color: hsl(174, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f1e3";
      }
    }
  }
  &[data-branche^="Sport recreatie"] {
    .vacancy-logo {
      background-color: hsl(185, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f44e";
      }
    }
  }
  &[data-branche^="Techniek"] {
    .vacancy-logo {
      background-color: hsl(195, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0ad";
      }
    }
  }
  &[data-branche^="Telecom"] {
    .vacancy-logo {
      background-color: hsl(206, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f690";
      }
    }
  }
  &[data-branche^="Textielindustrie"] {
    .vacancy-logo {
      background-color: hsl(217, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f553";
      }
    }
  }
  &[data-branche^="Toerisme"] {
    .vacancy-logo {
      background-color: hsl(228, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f072";
      }
    }
  }
  &[data-branche^="Training & Coaching"] {
    .vacancy-logo {
      background-color: hsl(239, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f5da";
      }
    }
  }
  &[data-branche^="Transport"] {
    .vacancy-logo {
      background-color: hsl(250, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f4dc";
      }
    }
  }
  &[data-branche^="Uitzendbureau"] {
    .vacancy-logo {
      background-color: hsl(261, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0b1";
      }
    }
  }
  &[data-branche^="Vastgoedbeheer"] {
    .vacancy-logo {
      background-color: hsl(272, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f015";
      }
    }
  }
  &[data-branche^="Veehouderij"] {
    .vacancy-logo {
      background-color: hsl(283, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f6d7";
      }
    }
  }
  &[data-branche^="Verkeer vervoer nautisch"] {
    .vacancy-logo {
      background-color: hsl(294, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f238";
      }
    }
  }
  &[data-branche^="Verzekeringen"] {
    .vacancy-logo {
      background-color: hsl(305, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f6f1";
      }
    }
  }
  &[data-branche^="Voorlichting en Communicatie"] {
    .vacancy-logo {
      background-color: hsl(315, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0a1";
      }
    }
  }
  &[data-branche^="Watermanagement"] {
    .vacancy-logo {
      background-color: hsl(326, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f043";
      }
    }
  }
  &[data-branche^="Zakelijke dienstverlening"] {
    .vacancy-logo {
      background-color: hsl(337, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f2bb";
      }
    }
  }
  &[data-branche^="Zorg"] {
    .vacancy-logo {
      background-color: hsl(348, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f0f0";
      }
    }
  }
  &[data-branche^="Zorg en Welzijn"] {
    .vacancy-logo {
      background-color: hsl(359, 80%, 91%);
    }
    .vacancy-icon {
      &::after {
        content: "\f004";
      }
    }
  }
}

.vacancy-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem; /* 60px */
  height: 3.75rem; /* 60px */
  object-fit: contain;
  background-color: var(--clr-neutral-200, #f8f9fa);
  border-radius: var(--border-radius-300);
  overflow: clip;

  &:has(img) {
    background-color: var(--clr-neutral-200, #f8f9fa) !important;
  }

  & img {
    height: 100%;
  }
}

.vacature-card .vacancy-logo {
  width: 5.5rem; /* 88px */
  height: 5.5rem; /* 88px */
}

.vacancy-header-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 20em;
  overflow: hidden;
  border-radius: var(--border-radius-500) var(--border-radius-500) 0 0;
}

.vacancy-header-image picture,
.vacancy-header-image img,
.vacancy-list-item picture,
.vacancy-list-item img {
  display: block;
  width: 100%;
  height: auto;
}

.vacancy-list-item > picture > img {
  transform: translateY(-10%);
}

.vacancy-header-image img {
  object-fit: cover;
  object-position: center;
}

.vacancy-icon {
  &::after {
    color: var(--clr-secondary-800);
    content: "\f0b1"; /* FontAwesome briefcase icon */
    display: block;
    font: var(--fa-font-sharp-regular);
    font-size: 1.66rem;
  }
}

.vacancy-badges .badge {
  color: var(--clr-neutral-600);
}

.vacature-card {
  container-type: inline-size;
}

/* Vacancy detail meta list (badge grid) */
.vacancy-meta-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem 0.4rem;
}

@container (min-width: 37.5rem) {
  .vacancy-meta-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 56.25rem) {
  .vacancy-meta-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Loading indicator */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Smooth transitions for htmx swaps */
.vacancy-detail > * {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Filter form */
/* #vacancy-filters {
} */

/* Results count */
#results-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Filter buttons */
/* .vacancy-filter-buttons {
} */

.vacancy-filter-dropdown {
  position: relative;
}

.vacancy-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

.vacancy-filter-btn .filter-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.vacancy-filter-btn[aria-expanded="true"] .filter-arrow {
  transform: rotate(180deg);
}

.vacancy-filter-btn.has-selection {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.vacancy-filter-btn.has-selection:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  opacity: 0.9;
}

/* Filter modal (native dialog) */
dialog.vacancy-filter-modal {
  border: 1px solid var(--bs-border-color, #dee2e6);
  padding: 0;
  min-width: 24rem;
  max-height: 80vh;
  border-radius: var(--border-radius-500);
  overflow: visible;
  /* Ensure centering (override any resets) */
  margin: auto;
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
}

dialog.vacancy-filter-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

dialog.vacancy-filter-modal[open] {
  animation: filterModalFadeIn 0.15s ease-out;
}

@keyframes filterModalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vacancy-filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.vacancy-filter-modal-header .btn-close {
  font-size: 0.75rem;
}

.vacancy-filter-modal-body {
  padding: 0.5rem 0;
  max-height: 19rem;
  overflow-y: auto;
}

.vacancy-filter-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.vacancy-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin: 0;
}

.vacancy-filter-option:hover {
  background-color: var(--bs-light, #f8f9fa);
}

.vacancy-filter-option input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}

.vacancy-filter-option span {
  font-size: 0.875rem;
}

.vacancy-filter-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-light, #f8f9fa);
  border-radius: 0 0 1rem 1rem;
}

.vacancy-filter-clear {
  padding: 0;
  font-size: 0.8125rem;
}

/* Copy URL button & toast */
.vacancy-copy-url {
  anchor-name: --copy-btn;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  font-size: 0.875rem;
  border-radius: var(--border-radius-300, 0.375rem);
  margin-top: 0.25rem;

  &::before {
    padding-left: 0 !important;
  }
}

.vacancy-copy-toast {
  position: fixed;
  position-anchor: --copy-btn;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
  margin-top: 0.25rem;
  background-color: var(--bs-success, #198754);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--border-radius-300, 0.375rem);
  white-space: nowrap;
  animation:
    copyToastIn 0.2s ease-out,
    copyToastOut 0.3s ease-in 1.5s forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes copyToastIn {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes copyToastOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Application form */

.application-form .modal-body {
  margin: 2.5em auto;
  max-width: 60rem;
}

/* Mobile sticky apply CTA (single-vacature-apply.php) */

#apply-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: var(--clr-neutral-100);
  z-index: 200;
  transform: translateY(110%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

#apply-sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}