/* Модальное окно формы */

/* Модальное окно формы */
.job-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
}
/* display: flex выше перебивает браузерное [hidden] { display: none } */
.job-modal[hidden] { display: none; }
/* прокручивается всё окно, а не карточка: фон карточки тянется на всю её высоту, затемнение стоит на месте */
.job-modal__backdrop { position: fixed; inset: 0; background-color: rgba(10, 18, 38, .9); }
.job-modal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 68.125rem;              /* 1090 */
  max-width: 100%;
  margin: auto 0;                /* по центру, а выше окна — от верха, без обрезки */
  padding: 2.5rem 6.25rem 6.25rem;
  border-radius: var(--radius);
  background-color: #0b1327;
  color: var(--white);
}
/* В макете фон — фотография с прозрачностью 80 % и поверх чёрная плёнка 20 % */
.job-modal__card::before,
.job-modal__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.job-modal__card::before { background: url('../../../img/card-bg-form.jpg') no-repeat center bottom / cover; opacity: .8; }
.job-modal__card::after { background-color: rgba(0, 0, 0, .2); }
.job-modal__card > * { position: relative; z-index: 1; }
.job-modal__close {
  align-self: flex-end;
  flex: none;
  width: 3.125rem;               /* 50 */
  height: 3.125rem;
  padding: 0;
  border: 0;
  background: none;
  color: #fdfffe;
  cursor: pointer;
  transition: color .2s ease;
}
/* при наведении — оранжевый, как рамка полей формы */
.job-modal__close:hover,
.job-modal__close:focus-visible { color: var(--orange); }
.job-modal__close svg { display: block; width: 100%; height: 100%; }
.job-modal__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: .25rem; }
.job-modal__body { display: flex; flex-direction: column; gap: 1.875rem; }
/* Внутри окна лид идёт с интерлиньяжем 30, а кнопка отправки уже 250 */
.job-modal .job-modal__lead { max-width: none; line-height: 1.875rem; }
.job-modal .job-modal__consent-text { line-height: 1.875rem; }
.job-modal .job-modal__submit { width: 15.625rem; font-weight: 700; }
.job-modal .job-modal__form { display: flex; }
/* ПК (от 1280): заголовок окна мельче заголовка страницы — как H2 (50/1.2 на 1920) */
@media (min-width: 1280px) {
  .job-modal .job-modal__head .job-modal__title { font-size: 3.125rem; line-height: 1.2; }
}

/* Форма «Заказ космического снимка» */
@media (max-width: 767px) {
  .job-modal .job-modal__input.job-modal__select { padding-right: 44px; background-position: right 16px center; }
}

/* Планшет (< 1280): раскладка по образцу прошлых */
@media (max-width: 1279px) {
  .job-modal { padding: 1rem; }
  .job-modal__card { padding: 1.25rem 1.5rem 2rem; }
  .job-modal__close { width: 2.25rem; height: 2.25rem; }
  .job-modal__body { gap: 1.25rem; }
  .job-modal .job-modal__lead { line-height: 1.4; }
  .job-modal .job-modal__consent-text { line-height: 1.35; }
  .job-modal .job-modal__submit { width: 12.5rem; }
}

/* Мобильная (< 768): макет 591:11676 и 641:14865 */
@media (max-width: 767px) {
  .job-modal { align-items: flex-start; padding: 20px; }
  .job-modal__card { width: 320px; gap: 20px; margin: auto 0; padding: 20px; }
  /* В мобильном макете фото не приглушено, но плёнка плотнее */
  .job-modal__card::before { opacity: 1; }
  .job-modal__card::after { background-color: rgba(11, 19, 39, .7); }
  .job-modal__close { width: 30px; height: 30px; }
  .job-modal__body { gap: 20px; }
  .job-modal .job-modal__head { gap: 31px; }
  .job-modal .job-modal__head .job-modal__title { font-size: 30px; line-height: 40px; }
  /* на главной лид в мобильной карточке скрыт, в окне он есть — возвращаем */
  .job-modal .job-modal__lead { display: block; font-size: 14px; line-height: 20px; }
  .job-modal .job-modal__form { gap: 20px; }
  .job-modal .job-modal__label { font-size: 16px; line-height: 24px; }
  .job-modal .job-modal__input,
  .job-modal .job-modal__file { height: 50px; padding: 0 13px 0 30px; font-size: 12px; }
  .job-modal .job-modal__error { font-size: 12px; line-height: 20px; }
  .job-modal .job-modal__consent-text { font-size: 14px; line-height: 20px; }
  .job-modal .job-modal__consent-box { width: 24px; height: 24px; }
  .job-modal .job-modal__submit { width: 100%; height: 48px; font-size: 16px; }
}