/*!
 * akrmed-overrides.css
 * Перебивает NMO-стили из nmo-local-quiz.css на брендовые цвета акрмед (#191880).
 * Подключается ПОСЛЕ nmo-local-quiz.css.
 */

/* На устройствах <360px (iPhone 4/5/SE1) — body растягиваем до 360px,
   чтобы Крафтум-стили правильно отрисовали свои абсолютно-позиционированные
   блоки. Без этого на 320 обрезается заголовок и другие элементы.
   Двойной media-query для стабильности при переключении ширины в DevTools. */
@media (max-width: 359px) {
  body { min-width: 360px !important; }
}
@media (min-width: 360px) {
  body { min-width: 0 !important; }
}

/* Селектор страны в поле телефона: «RU +7 Россия ▼» слева,
   справа собственно поле ввода номера. */
.nmo-local-quiz__phone-shell:not(.is-plain) {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 1px solid #d5d5dd !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}
.nmo-local-quiz__phone-shell .nmo-local-quiz__country-select {
  flex: 0 0 154px !important;
  width: 154px !important;
  max-width: 154px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border: 0 !important;
  border-right: 1px solid #e6e6ee !important;
  background: #f7f7fa url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23191880' d='M5 6L0 0h10z'/></svg>") no-repeat right 8px center !important;
  padding: 0 22px 0 12px !important;
  font: inherit !important;
  font-weight: 600 !important;
  color: #191880 !important;
  cursor: pointer !important;
  min-width: 96px !important;
  height: auto !important;
  outline: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.nmo-local-quiz__phone-shell .nmo-local-quiz__country-select:focus {
  background-color: #eeeef8 !important;
}
.nmo-local-quiz__phone-shell input[name="phone"],
.nmo-local-quiz__phone-shell [data-nmo-phone-mask] {
  flex: 1 1 auto !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: none !important;
  min-width: 0 !important;
}
.nmo-local-quiz__phone-shell:focus-within {
  border-color: #191880 !important;
  box-shadow: 0 0 0 3px rgba(25, 24, 128, .14) !important;
}
/* зелёная рамка валидного номера — на shell целиком */
.nmo-local-quiz__phone-shell:has(.is-valid) {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18) !important;
}
@media (max-width: 480px) {
  .nmo-local-quiz__phone-shell .nmo-local-quiz__country-select {
    flex-basis: 112px !important;
    width: 112px !important;
    max-width: 112px !important;
    min-width: 84px !important;
    padding: 0 18px 0 8px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 360px) {
  .nmo-local-quiz__phone-shell .nmo-local-quiz__country-select {
    flex-basis: 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    min-width: 76px !important;
    padding: 0 16px 0 6px !important;
    font-size: 12.5px !important;
  }
}

/* Скрываем плавающие иконки мессенджеров когда пользователь активно
   взаимодействует с квизом — чтобы они не перекрывали поля формы.
   Возвращаем когда квиз закрыт или ушёл из вьюпорта. */
body.nmo-local-quiz-in-view .nmo-floating-messengers {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease !important;
}
/* модальный режим квиза — body получает класс при открытии */
body:has(.nmo-local-quiz-modal:not([hidden])) .nmo-floating-messengers {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Компактная плашка «Ваша скидка 20%» на мобиле — занимает меньше места
   справа, не оставляет белого пятна. */
@media (max-width: 480px) {
  .nmo-local-quiz.is-contact-step .nmo-local-quiz__reward {
    grid-template-columns: 80px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .nmo-local-quiz__discount-badge {
    min-height: 34px !important;
    padding: 4px 6px !important;
  }
  .nmo-local-quiz__discount-badge span { font-size: 10px !important; }
  .nmo-local-quiz__discount-badge strong { font-size: 13px !important; }
  .nmo-local-quiz__discount-arrow { font-size: 10px !important; }
}
/* На самых узких — ещё компактнее */
@media (max-width: 360px) {
  .nmo-local-quiz.is-contact-step .nmo-local-quiz__reward {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
  .nmo-local-quiz__discount-badge {
    min-height: 30px !important;
    padding: 3px 5px !important;
  }
  .nmo-local-quiz__discount-badge strong { font-size: 12px !important; }
}

/* Зелёная рамка вокруг поля телефона когда введён ВЕСЬ номер целиком.
   Класс is-valid вешает JS (akrmed-quiz-extras.js). Когда стираешь хотя
   бы одну цифру — класс снимается, рамка пропадает мгновенно. */
.nmo-local-quiz__field.is-valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18) !important;
}
.nmo-local-quiz__phone-shell:has(.is-valid),
.nmo-local-quiz__input-shell:has(.is-valid) {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18) !important;
}

/* Форма контактов без email — улучшаем расстояния между полями имя/телефон
   и кнопкой «Использовать мессенджер», чтобы выглядело гармонично. */
.nmo-local-quiz__contact-card form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.nmo-local-quiz__contact-card .nmo-local-quiz__field-label {
  margin: 0 !important;
}
.nmo-local-quiz__contact-card .nmo-local-quiz__messenger-use {
  margin-top: 6px !important;
}

/* На мобиле в квизе кнопки «Назад» и «Получить результат / Далее» поднимаем
   ВЫШЕ прогресс-бара и плашки скидки — так удобнее тянуться большим пальцем. */
@media (max-width: 767px) {
  .nmo-local-quiz__bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .nmo-local-quiz__nav-wrap { order: 0 !important; }
  .nmo-local-quiz__progress { order: 1 !important; }
}

/* Финальный шаг квиза: убираем лишнюю шапку и собираем скидку/прогресс компактно. */
.nmo-local-quiz.is-contact-step .nmo-local-quiz__eyebrow {
  display: none !important;
}

@media (max-width: 767px) {
  .nmo-local-quiz.is-contact-step {
    padding-top: 20px !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__footer {
    margin-top: 8px !important;
    padding-top: 10px !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__progress {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    grid-template-areas:
      "reward label spacer"
      "track track track" !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    margin: 0 !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__reward {
    grid-area: reward !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__discount-badge {
    width: 104px !important;
    min-height: 32px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 6px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__discount-badge span {
    font-size: 8.5px !important;
    line-height: 1.05 !important;
    min-width: 0 !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__discount-badge strong {
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__discount-arrow {
    right: 4px !important;
    top: 4px !important;
    font-size: 8px !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__progress-label {
    grid-area: label !important;
    margin: 0 !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .nmo-local-quiz.is-contact-step .nmo-local-quiz__progress-track {
    grid-area: track !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Cookie-баннер на мобиле: единый компактный вид от 320px до 767px */
@media (max-width: 767px) {
  #cookieBanner,
  #cookieBanner.cb-bar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    padding: 8px 30px 8px 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(5, 5, 21, .14) !important;
  }
  #cookieBanner .cb-container {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  #cookieBanner p {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }
  /* фиолетовый крестик в правом верхнем углу — один размер на всех мобильных */
  #cookieBanner #cbAccept,
  #cookieBanner button {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #191880 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s ease, transform .15s ease !important;
  }
  #cookieBanner #cbAccept::before,
  #cookieBanner button::before {
    content: "\2715" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #191880 !important;
    font-family: system-ui, sans-serif !important;
  }
  #cookieBanner #cbAccept:hover,
  #cookieBanner button:hover {
    background: rgba(25, 24, 128, .1) !important;
    transform: scale(1.1) !important;
  }
}

/* Скрываем NMO-тизер «Пройди тест и получи скидку» — на akrmed его не было */
.nmo-quiz-teaser,
[data-nmo-quiz-teaser] {
  display: none !important;
}

/* Гарантируем курсор-pointer и кликабельность на кнопках, открывающих квиз.
   Класс btn-new ни на что не настроен, поэтому без !important его перебивают
   родительские стили. Также поднимаем над декоративными элементами справа.
   ВАЖНО: НЕ форсим position здесь. На блоках-канвасах Craftum кнопки имеют
   position:absolute с координатами top/left из per-id CSS (как и соседние
   карточки/картинки). Если перебить это на position:relative — кнопки
   «Узнать стоимость» съезжают/уезжают за экран на мобиле. z-index работает и на
   absolute, поэтому подъём над декором сохраняется без подмены позиционирования. */
a.btn-new,
a[data-nmo-local-quiz-open],
.cli-button[data-nmo-local-quiz-open] {
  cursor: pointer !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}
a.btn-new *,
a[data-nmo-local-quiz-open] * {
  cursor: pointer !important;
  pointer-events: none !important; /* клики проваливаются на саму ссылку */
}

/* ===== МОДАЛКА КВИЗА: гарантированный полный экран =====
   Основные стили модалки теперь применяются inline через JS (openModal),
   потому что Craftum-обёртки иногда дают transform/contain родителю,
   и тогда CSS-правил с position:fixed недостаточно. CSS здесь остаётся
   для общих случаев и для модалки в desktop-режиме. */

/* Встроенный (inline) квиз в потоке страницы оставляем видимым — он стоит
   на тех же 24 страницах, что и в оригинале akrmed.ru (index, afeldshera,
   akkredmedsestry, lechdelo* и т.д.). Это самостоятельный блок; модалка по
   кнопке — отдельная сущность и ему не мешает (overlay перекрывает фон). */
.nmo-local-quiz-modal {
  position: fixed !important;
  inset: 0 !important;            /* top/right/bottom/left:0 — растягивает на весь вьюпорт без width:100vw (100vw включает полосу прокрутки и сдвигает окно влево) */
  z-index: 2147483600 !important;
  background: rgba(20, 22, 35, .72) !important;
  margin: 0 !important;
  overflow: auto !important;
}

/* Скрытое состояние ДОЛЖНО победить display:block/grid !important из правил ниже,
   иначе на телефоне модалка не закрывается по крестику: closeModal() ставит
   [hidden], но display:block !important держит её на экране. Селектор с атрибутом
   специфичнее (0,2,0 > 0,1,0), поэтому перебивает. */
.nmo-local-quiz-modal[hidden] {
  display: none !important;
}

/* На десктопе оставляем карточку по центру с отступами; на мобилке — фуллскрин */
@media (max-width: 767px) {
  .nmo-local-quiz-modal {
    padding: 0 !important;
    /* Убираем grid + place-items:center — иначе dialog получает natural-высоту
       и центрируется, оставляя страницу видимой сверху и снизу */
    display: block !important;
    background: rgba(8, 10, 20, .96) !important; /* почти непрозрачный фон */
  }
  .nmo-local-quiz-modal__dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }
  /* Крестик закрытия: крупная и надёжно кликабельная зона на телефоне.
     Круг 32px ловил тап только в центре — по углам (вне окружности) клик
     проваливался на квиз и окно «не закрывалось». 44px + zona побольше. */
  .nmo-local-quiz-modal__close {
    width: 44px !important;
    height: 44px !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 26px !important;
    z-index: 30 !important;
    pointer-events: auto !important;
  }
  /* Растягиваем сам квиз и его контейнер на всю высоту диалога —
     без этого внутри остаётся ~300px пустоты под прогресс-баром,
     а опции зачем-то скроллятся, хотя места хватает. */
  .nmo-local-quiz-modal .nmo-local-quiz,
  .nmo-local-quiz-modal .nmo-local-quiz--modal-content {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .nmo-local-quiz-modal .nmo-local-quiz__container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  /* Тело с опциями квиза занимает всё свободное место между заголовком и
     нижней панелью «Назад / Далее / прогресс». Скролл появляется ТОЛЬКО
     если опций реально больше, чем помещается. */
  .nmo-local-quiz-modal .nmo-local-quiz__body {
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  /* Футер с кнопками всегда прижат к низу */
  .nmo-local-quiz-modal .nmo-local-quiz__footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
  }

  /* Шаг контактов: форму прижимаем к верху, кнопку отправки ставим сразу под
     полями, а пустое место собираем внизу (как в старом квизе). Без растягивания
     тела на всю высоту не образуется большой белый разрыв между полями и кнопкой.
     При этом max-height + overflow:auto остаются — длинная форма всё ещё скроллится. */
  .nmo-local-quiz-modal .nmo-local-quiz.is-contact-step .nmo-local-quiz__body {
    flex: 0 1 auto !important;
  }
  .nmo-local-quiz-modal .nmo-local-quiz.is-contact-step .nmo-local-quiz__footer {
    margin-top: 14px !important;
  }
}

/* Пока модалка квиза открыта — гасим шапку, cookie и любые floating-виджеты,
   чтобы они не торчали из-под/над модалкой и не сбивали фокус. */
body:has(.nmo-local-quiz-modal:not([hidden])) .cli-header,
body:has(.nmo-local-quiz-modal:not([hidden])) .cli-block.cli-header,
body:has(.nmo-local-quiz-modal:not([hidden])) #cookieBanner,
body:has(.nmo-local-quiz-modal:not([hidden])) .cookie {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Блокируем скролл страницы пока открыта модалка квиза.
   Раньше здесь стояло height:100vh на html и body — страница схлопывалась,
   позиция прокрутки обнулялась, и фон за полупрозрачной модалкой прыгал на
   первый экран, а после закрытия там и оставался. Теперь позицию держит
   класс .nmo-scroll-locked (body фиксируется со сдвигом, см. nmo-local-quiz.js),
   а здесь остаётся только запрет прокрутки самого документа. */
html:has(.nmo-local-quiz-modal:not([hidden])) {
  overflow: hidden !important;
}

/* ---- Кнопки квиза (Next / Done / основной submit) ---- */
.nmo-local-quiz__next,
.nmo-local-quiz__main-submit,
.nmo-local-quiz__done-button,
.nmo-local-quiz [data-nmo-contact-submit],
.nmo-local-quiz [data-nmo-messenger-submit] {
  background: #191880 !important;
}
.nmo-local-quiz__next:hover,
.nmo-local-quiz__main-submit:hover,
.nmo-local-quiz__done-button:hover {
  background: #2a28a3 !important;
}

/* активная опция в шагах квиза */
.nmo-local-quiz__option.is-active,
.nmo-local-quiz__option:hover {
  border-color: #191880 !important;
  color: #191880 !important;
}

/* прогресс-бар */
.nmo-local-quiz__progress-fill {
  background: #191880 !important;
}

/* ---- Чекбокс согласия в формах страниц ----
   Раньше тут был просто абзац-текст. Теперь — галочка слева + текст со ссылкой
   на политику. Шрифт/размер/цвет наследуются от родительского <p>
   (cli-block-description), поэтому вид строки не меняется. */
.akr-consent {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 600px;
  text-align: left;
  cursor: pointer;
  vertical-align: middle;
}
.akr-consent > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #191880;
  cursor: pointer;
}
.akr-consent > span { flex: 1 1 auto; }
.akr-consent a { color: inherit; text-decoration: underline; }
.akr-consent a:hover { text-decoration: none; }