/* Страница найма /careers.
   Отдельный файл, а не site.css: правка site.css заставляет пересчитывать
   ?v= на всех 69 страницах и перекачивать стиль всем посетителям сайта.
   Здесь стили нужны ровно одной странице — пусть и грузятся только ей.

   Вид анкеты повторяет опросник на странице брони (bk-step / bk-opt в
   dist/booking.html): номер шага бирюзовым квадратом, вопрос заголовком,
   подпись под ним, варианты — карточками с подсветкой выбранного. Значения
   (радиус 14px, рамка #e5e7eb, кольцо rgba(10,186,181,.12)) взяты оттуда
   один в один, чтобы две формы сайта не выглядели сделанными разными людьми. */

/* --- переключатель языка ---
   Тот же вид, что у переключателя вкладок на странице брони (.bk-tabs):
   светлая подложка, выбранный язык белой «таблеткой». По умолчанию английский —
   русский лежит в разметке рядом, но спрятан. */
.lang-sw{display:inline-flex;gap:4px;background:#eef1f4;border-radius:12px;padding:4px;margin:0 0 18px}
.lang-sw button{border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:#4b5563;
  padding:8px 16px;border-radius:9px;cursor:pointer;transition:.15s}
.lang-sw button:hover{color:#171A20}
.lang-sw button.on{background:#fff;color:#171A20;box-shadow:0 1px 3px rgba(23,26,32,.12)}

/* Скрытие второго языка. !important обязателен: атрибут hidden — это всего лишь
   display:none из настроек браузера, и ЛЮБОЕ наше правило вида display:block его
   перебивает. Так и вышло 17.08.2026: правило .job-perk > div > span{display:block}
   показало в карточках оба языка сразу. Поймано на снимке, не рассуждением. */
.t-en[hidden],.t-ru[hidden]{display:none !important}

/* --- что мы предлагаем --- */
.job-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:var(--space-4)}
.job-perk{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid #E7EBEF;border-radius:16px;background:#fff}
.job-perk .ic{flex:0 0 auto;color:#089E9A;margin-top:2px}
.job-perk > div > b{display:block;font-size:15px;font-weight:700;color:#171A20;letter-spacing:-.2px}
.job-perk > div > span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.5}

/* --- районы --- */
.job-areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-3)}
.job-areas li{list-style:none;padding:7px 14px;border:1px solid #E7EBEF;border-radius:100px;font-size:13.5px;color:#171A20;background:#fff}

/* --- анкета: шаги --- */
.job-form{max-width:880px;margin:var(--space-4) 0 0;text-align:left}
.job-q{border:0;padding:0;margin:0 0 30px;min-width:0}
.job-q legend{padding:0;display:flex;align-items:center;font-size:19px;font-weight:800;
  letter-spacing:-.01em;color:#171A20;margin:0 0 4px}
.job-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;
  border-radius:8px;background:var(--brand,#0ABAB5);color:#fff;font-size:13px;font-weight:700;margin-right:10px}
.job-q .hint{font-size:14px;color:#6b7280;margin:0 0 14px 36px}
.job-q .req{color:#0ABAB5;margin-left:4px}

/* --- поля ввода --- */
.job-q input[type=text],.job-q input[type=tel],.job-q textarea{
  width:100%;font:inherit;font-size:15.5px;padding:13px 15px;border:1.5px solid #e5e7eb;
  border-radius:14px;background:#fff;color:#171A20}
.job-q input:focus,.job-q textarea:focus{outline:none;border-color:var(--brand,#0ABAB5);
  box-shadow:0 0 0 3px rgba(10,186,181,.12)}
.job-q textarea{min-height:110px;resize:vertical}

/* --- варианты карточками --- */
.job-opts{display:grid;gap:10px}
.job-opts.two{grid-template-columns:repeat(2,1fr)}
.job-opts.three{grid-template-columns:repeat(3,1fr)}
.job-opt{position:relative;border:1.5px solid #e5e7eb;border-radius:14px;padding:14px 16px;
  cursor:pointer;background:#fff;transition:border-color .18s,box-shadow .18s}
.job-opt:hover{border-color:#cbd5e1}
.job-opt input{position:absolute;opacity:0;pointer-events:none}
.job-opt__t{font-size:15.5px;font-weight:700;display:block;color:#171A20}
.job-opt__d{font-size:13.5px;color:#6b7280;margin-top:3px;display:block}
.job-opt.on{border-color:var(--brand,#0ABAB5);box-shadow:0 0 0 3px rgba(10,186,181,.12)}
.job-opt--wide{grid-column:1/-1}

/* Поле «Other»: появляется, только когда выбран этот вариант. Скрыто атрибутом
   hidden — если скрипт не выполнится, поле просто не покажется, а анкета
   останется рабочей. */
.job-other{margin-top:10px}

/* ловушка для роботов: человек этого поля не видит и не заполняет */
.job-honey{display:none}

.job-send{margin-top:18px}
.job-send .btn{min-width:260px}
.job-note{font-size:13px;color:#6b7280;margin-top:12px;line-height:1.6}
.job-ok,.job-err{margin-top:14px;padding:14px 16px;border-radius:14px;font-size:14.5px;line-height:1.6}
.job-ok{background:rgba(10,186,181,.10);border:1.5px solid rgba(10,186,181,.35);color:#0A6F6C;font-weight:600}
.job-err{background:rgba(192,57,43,.07);border:1.5px solid rgba(192,57,43,.30);color:#8E2B21;font-weight:600}
.job-err a{color:#8E2B21;text-decoration:underline}

@media(max-width:700px){
  .job-opts.two,.job-opts.three{grid-template-columns:1fr}
  .job-q legend{font-size:17.5px}
  .job-send .btn{min-width:0;width:100%}
}