/* HOLYWATER TECH — Ashby job board custom CSS (13.css, чиста копія) */
/* stylelint-disable block-no-empty */
/* stylelint-disable max-empty-lines */

:root {
  --fontFamily: "Inter", sans-serif;
  --borderRadiusContainer: 3px;
  --borderRadiusControl: 3px;
  --borderRadiusButton: 3px;
  --borderWidthBold: 1px;
  --widthMaxJobBoard: 1024px;

  /*
  * WARNING
  * If you want to add/modify you need to make sure your changes work with the
  * theme colors users can set in our admin section.
  */
  --colorAppBackground: #000;
  --colorPrimary900: #232323 !important;
  --colorPrimary600: #fff;
  --colorNegative200: #fce8e8;
  --colorPositive100: #232323;  /* було зелене — тепер сіра плашка */
  --colorPositive200: #232323;
  --colorPositive300: #303030;
  --colorPositive400: #3a3a3a;
  --colorPositive500: #5c5c5c;
  --colorWarning800: #8c6d1f;
  --colorWarning600: #f4ca64;
  --colorNegative600: #dc3030;
  --colorPositive600: #abafb5;  /* було #29b458 */
  --colorPositive700: #D0D0D0;
  --colorPositive800: #FFFFFF;
  --colorPositive900: #FFFFFF;
  --colorWarning900: #5c4813;
  --colorNeutral800: #fff;
  --colorNeutral600: #abafb5;
  --colorNeutral700: #abafb5;
  --colorNeutral100: transparent;
  --colorNeutral000: #000 !important;
}

/* div[role="option"]:hover {
  background: none !important;
  background-color: transparent !important;
} */

.ashby-application-form-container {
  background-color: var(--colorAppBackground);
  box-shadow: none;
}

.ashby-job-board-filter {
  background-image: linear-gradient(to top, #232323, #232323 100%) !important;
  background-position: 50%;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: scroll;
  border: 1px solid #ffffff26;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
  transition: all 0.2s;
  display: flex;
  color: var(--colorNeutral800) !important;
  width: fit-content;
  margin: 0 auto;
}

.ashby-job-posting-brief {
  background-color: #232323 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-bottom: 16px;
  transition: background-color 0.3s ease !important;
}

.ashby-job-posting-brief:hover {
  background-color: #303030 !important;
}

.ashby-job-posting-right-pane {
  margin-top: 20px;
}

.ashby-job-posting-right-pane-overview-tab {
  color: var(--colorNeutral800);
  background-color: transparent !important;
}

.ashby-job-posting-right-pane-application-tab {
  color: var(--colorNeutral800);
}

.ashby-job-posting-left-pane {
  background-color: var(--colorAppBackground);
}

strong {
  color: #D0D0D0 !important;
}

a {
  color: var(--colorNeutral800);
}

.ashby-job-posting-brief-title {
  color: var(--colorNeutral800);
}

/* svg {
  fill: var(--colorNeutral800) !important;
} */

p {
  color: #D0D0D0 !important;
}

button {
  background-color: black !important;
  color: white !important;
  border-radius: 20px !important;
  border: 1px solid white !important;
  transition: 0.3s all !important;
  padding: 12px !important;
}

button:hover {
  background-color: white !important;
  color: #000 !important;
}

textarea {
  color: #FFFFFF !important;
}

/* Базовий стиль чекбокса */
input[type="checkbox"] {
  background-color: black !important;   /* чорний фон */
  border: 2px solid transparent !important; /* без рамки, поки не вибрано */
  padding: 5px !important;              /* внутрішній відступ */
  appearance: none;                     /* прибираємо системний вигляд */
  width: 20px;
  height: 20px;
  border-radius: 3px;                   /* скруглення кутів */
  position: relative;
}

/* Галочка всередині */
input[type="checkbox"] + label svg {
  fill: transparent !important;         /* галочка прихована */
  transition: fill 0.3s ease;
  position: absolute;
  left: 5px;
  top: 5px;
}

/* Галочка, коли чекбокс вибрано */
input[type="checkbox"]:checked + label svg {
  fill: white !important;               /* біла галочка */
}

/* Підпис чекбокса */
input[type="checkbox"] + label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 14px;
  color: var(--colorNeutral800);        /* колір тексту */
}

/* Кастомний квадрат чекбокса */
input[type="checkbox"] + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: black;              /* чорний фон */
  border: 2px solid transparent;        /* рамка прихована */
  border-radius: 3px;
  transition: all 0.2s ease;
}

/* Квадрат, коли чекбокс вибрано */
input[type="checkbox"]:checked + label::before {
  background-color: black;              /* фон лишається чорним */
  border-color: white;                  /* біла рамка */
}

input[type="checkbox"]:checked + label {
  color: white !important;              /* білий текст вибраного пункту */
}

input[type="checkbox"]:hover + label::before {
  border-color: white !important;       /* біла рамка при наведенні */
}

div > input + button {
  background: none !important;
  border: none !important;
}

div > input + button:hover {
  background: none !important;
  border: none !important;
}

div > span + label {
  color: #fff !important;
}

button > span + svg {
  fill: white !important;
}

button:hover > span + svg {
  fill: black !important;
}

/* NB: в оригіналі тут бракує крапки перед класом, тому правило не спрацьовує.
   Виправлено на .ashby-job-board-back-to-all-jobs-button */
.ashby-job-board-back-to-all-jobs-button {
  background-color: black !important;
  color: white !important;
  border-radius: 20px !important;
  border: 1px solid white !important;
  transition: 0.3s all !important;
  padding: 12px !important;
}

input[type="checkbox"]:checked {
  background-color: white !important;
  color: black !important;
  border: 2px solid transparent !important;
  padding: 5px !important;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  position: relative;
}