/* appt-modal.css — новый стиль модалки записи / вопроса (#apptWrap).
   Всё строго под #apptWrap, чтобы не задеть другие формы сайта
   (.contact_big_form, .green_button, .input__field и т.п. используются и в других местах).

   Десктоп — компактная карточка по центру.
   Мобильные — лист снизу (bottom sheet), как у умной модалки, а не на весь экран. */

#apptWrap {
  padding: 0;
}

/* затемнение + лёгкое размытие + плавное появление */
#apptWrap .apptOverlay {
  background: rgba(15, 23, 30, .55) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s ease;
}
#apptWrap.is-appt-open .apptOverlay { opacity: 1; }

/* ---------- карточка ---------- */
#apptWrap .apptBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(.97);
  width: calc(100% - 32px);
  max-width: 460px;
  height: auto;                 /* перебиваем height:100% из старого правила ≤768px */
  max-height: calc(100vh - 40px);
  margin: 0 !important;
  background: #fff !important;   /* убираем декоративный SVG-фон старого полноэкранного вида */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  opacity: 0;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
#apptWrap.is-appt-open .apptBox {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

#apptWrap .apptInner {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- кнопка закрытия ---------- */
#apptWrap .apptClose {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 6;
  width: 34px;
  height: 34px;
  border: 0;
  background: rgba(255, 255, 255, .85);
  color: #98a1ac;
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background .12s, color .12s;
}
#apptWrap .apptClose:hover { background: #fff; color: #444; }

/* ---------- внутренняя форма ---------- */
#apptWrap .contact_big_form {
  display: block;
  border-radius: 0;
  overflow: visible;
  background: #fff !important;
}

/* картинка-шапка (см. также серверную подстановку картинки по типу страницы) */
#apptWrap .contact_big_form_left {
  width: 100%;
  height: 230px;
  margin: 0;
  overflow: hidden;
}
#apptWrap .contact_big_form_left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* если картинки нет — не оставляем пустую полосу */
#apptWrap .contact_big_form_left:empty,
#apptWrap .contact_big_form_left.is-empty { display: none; }

#apptWrap .contact_big_form_right {
  width: 100%;
  padding: 24px 26px 22px;
}

#apptWrap .contacts-callback-modal-header {
  margin: 0 0 6px;
  padding: 0;
}
#apptWrap .contacts-callback-modal-title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: #17222b;
  font-family: "Montserrat-Bold", "Helvetica Neue", Arial, sans-serif;
}
#apptWrap .sotrudnik_text {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5b6570;
  padding: 0;
}

#apptWrap .call_pop_bottom { padding: 0; margin: 0; }
#apptWrap .call_pop_bottom .input,
#apptWrap .call_pop_bottom label.input { margin-bottom: 10px; }

/* кнопка отправки — тот же градиент, что у умной модалки */
#apptWrap .green_button.js-appt-send {
  display: block;
  width: 100%;
  height: 52px;
  line-height: 52px;
  margin: 4px 0 0;
  padding: 0 16px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgb(220, 69, 80) 0%, rgb(221, 117, 45) 100%);
  transition: filter .15s ease, opacity .15s ease;
}
#apptWrap .green_button.js-appt-send:hover { filter: brightness(1.06); }

#apptWrap .dobrro {
  display: block;
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #9aa4b0;
  text-align: center;
}
#apptWrap .dobrro a { color: #9aa4b0; text-decoration: underline; }

/* экран «спасибо» */
#apptWrap .p_popup_result { padding: 8px 4px 4px; }
#apptWrap .p_popup_result .after_add { text-align: center; }
#apptWrap .p_popup_result .after_add img { max-width: 96px; height: auto; margin: 0 auto 10px; }

/* ---------- мобильные: лист снизу вместо полноэкранного ---------- */
@media (max-width: 560px) {
  #apptWrap .apptBox {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 90vh;
    border-radius: 18px 18px 0 0;
    background: #fff;                /* убираем декоративный SVG-фон на весь экран */
    transform: translateY(100%);
  }
  #apptWrap.is-appt-open .apptBox {
    transform: translateY(0);
  }
  #apptWrap .apptInner {
    max-height: 90vh;
    padding: 0;
  }
  #apptWrap .contact_big_form_left {height: 180px;}
  #apptWrap .contact_big_form_right {
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  #apptWrap .contacts-callback-modal-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #apptWrap .apptOverlay,
  #apptWrap .apptBox { transition: none; }
}