/* =============================================================
   messenger-popup.css
   Стили попапа «Написать в мессенджер».
   Заменяет легаси «Заказать звонок» (jqModal Aspro).

   Naming aligned with messenger-popup.js (BEM, префикс .dp-messenger-*).
   Overlay управляется через .dp-messenger-overlay--visible.
   Scroll-lock body — через html.dp-messenger-locked.
   Видимость form/header/channels/success — через attribute [hidden] (JS).
   ============================================================= */

/* -------------------------------------------------------------
   0. Body scroll-lock (JS добавляет html.dp-messenger-locked)
   ------------------------------------------------------------- */
html.dp-messenger-locked,
html.dp-messenger-locked body {
  overflow: hidden;
  touch-action: none;
}

/* -------------------------------------------------------------
   0.1. Иконка на самих кнопках «Написать нам» (callback-триггеры)
   JS добавляет SVG.dp-callback-icon в начало каждого [data-name="callback"]
   и класс .dp-callback-btn-with-icon — мы прижимаем её к тексту.
   ------------------------------------------------------------- */
.dp-callback-btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.dp-callback-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  color: inherit;
}

/* -------------------------------------------------------------
   1. Overlay — fullscreen контейнер, hidden by default
   z-index 3100 — выше Aspro jqModal (1001-1005) и mobileheader (993).
   ------------------------------------------------------------- */
.dp-messenger-overlay {
  position: fixed;
  inset: 0;
  z-index: 3100;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background-color: rgba(20, 16, 28, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  opacity: 0;
  transition: opacity 0.2s ease;
}

.dp-messenger-overlay--visible {
  display: flex;
  opacity: 1;
}

/* -------------------------------------------------------------
   2. Card попапа
   ------------------------------------------------------------- */
.dp-messenger-popup {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  padding: 32px;

  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);

  animation: dpMessengerPopupIn 0.22s ease both;
}

@keyframes dpMessengerPopupIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* -------------------------------------------------------------
   3. Кнопка × закрытия
   ------------------------------------------------------------- */
.dp-messenger-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  border-radius: 50%;
  color: #777;

  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.dp-messenger-popup__close:hover,
.dp-messenger-popup__close:focus {
  background-color: rgba(0, 0, 0, 0.06);
  color: #222;
  outline: none;
}

.dp-messenger-popup__close:focus-visible {
  outline: 2px solid rgba(124, 42, 143, 0.5);
  outline-offset: 2px;
}

.dp-messenger-popup__close svg {
  display: block;
}

/* -------------------------------------------------------------
   4. Header (заголовок + подзаголовок)
   ------------------------------------------------------------- */
.dp-messenger-popup__header {
  margin-bottom: 20px;
  padding-right: 32px; /* чтобы не заезжать под × */
}

.dp-messenger-popup__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: #222;
}

.dp-messenger-popup__subtitle {
  margin: 0;
  color: var(--white_text_grey, #777);
  font-size: 14px;
  line-height: 1.45;
}

/* Подсказка-fineprint про fallback в чат при проблемах с TG/WA.
   Простой мелкий серый текст под кнопками, без рамки/фона. */
.dp-messenger-popup__chat-hint {
  margin: 0;
  padding: 0 2px;
  color: var(--white_text_grey, #999);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.dp-messenger-popup__chat-hint-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
.dp-messenger-popup__chat-hint-link:hover {
  color: #7c2a8f;
}

/* -------------------------------------------------------------
   5. Контейнер кнопок каналов
   ------------------------------------------------------------- */
.dp-messenger-channels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0;
}

/* -------------------------------------------------------------
   6. Общий стиль кнопки канала
   ------------------------------------------------------------- */
/* Outline-стиль (как кнопки на странице товара — btn-transparent-bg):
   в normal state цветная тонкая рамка + цветной текст + цветная иконка,
   на hover заливается каналом и текст становится белым. */
.dp-messenger-channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  min-height: 48px;
  padding: 10px 20px;

  background-color: transparent;
  border: 1px solid currentColor; /* цвет рамки = цвет текста через --channel-color */
  border-radius: var(--theme-button-border-radius, 8px);

  font-weight: 500;
  font-size: 15px;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  -webkit-tap-highlight-color: transparent;
}

.dp-messenger-channel:hover,
.dp-messenger-channel:focus {
  text-decoration: none;
  outline: none;
}

.dp-messenger-channel:active {
  transform: scale(0.99);
}

/* Focus-visible — цветной outline на 2px вокруг */
.dp-messenger-channel:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Активное (раскрытое) состояние — кнопка остаётся в outline-виде, но
   подсвечивается лёгкой плашкой и более выраженной рамкой,
   чтобы пользователь видел какой канал он выбрал. */
.dp-messenger-channel--active {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
  border-width: 2px;
  padding: 9px 19px; /* компенсация дополнительного 1px рамки */
}

/* -------------------------------------------------------------
   7. SVG-иконка и label канала
   ------------------------------------------------------------- */
.dp-messenger-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.dp-messenger-channel__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Иконки всех 3 каналов теперь чистые символы через currentColor —
   автоматически наследуют цвет текста кнопки (цветной в normal, белый в hover). */

.dp-messenger-channel__label {
  display: inline-block;
}

/* -------------------------------------------------------------
   8. Цветовые модификаторы каналов (outline-стиль)
      normal: цветная рамка + цветной текст/иконка (через currentColor)
      hover (только на устройствах с мышью): заливается цветом канала
      :active срабатывает на короткое время нажатия — без stuck-state
      ВАЖНО: @media (hover: hover) — на touch-устройствах hover «прилипает»
      после tap'а, кнопка остаётся залитой, что выглядит как баг.
   ------------------------------------------------------------- */
/* Telegram */
.dp-messenger-channel--tg {
  color: #229ED9;
}
@media (hover: hover) {
  .dp-messenger-channel--tg:hover {
    background-color: #229ED9;
    color: #fff;
    border-color: #229ED9;
  }
}
.dp-messenger-channel--tg:active {
  background-color: #187aa6;
  border-color: #187aa6;
  color: #fff;
}

/* WhatsApp */
.dp-messenger-channel--wa {
  color: #1eb959; /* чуть темнее #25D366 — лучше читается на белом */
}
@media (hover: hover) {
  .dp-messenger-channel--wa:hover {
    background-color: #25D366;
    color: #fff;
    border-color: #25D366;
  }
}
.dp-messenger-channel--wa:active {
  background-color: #1aa34d;
  border-color: #1aa34d;
  color: #fff;
}

/* Чат на сайте — бренд-фиолетовый */
.dp-messenger-channel--chat {
  color: #7c2a8f;
}
@media (hover: hover) {
  .dp-messenger-channel--chat:hover {
    background-color: #7c2a8f;
    color: #fff;
    border-color: #7c2a8f;
  }
}
.dp-messenger-channel--chat:active {
  background-color: #571762;
  border-color: #571762;
  color: #fff;
}

/* -------------------------------------------------------------
   9. Слот формы (раскрывается под выбранным каналом)
   Видимостью управляет JS через [hidden].
   ------------------------------------------------------------- */
.dp-messenger-form {
  display: block;
  overflow: hidden;
  margin-top: 16px;
  max-height: 900px; /* достаточно для имя + контакт + чекбокс + сабмит + success */
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease;
}

.dp-messenger-form[hidden] {
  display: none;
}

/* Опциональный модификатор --visible на случай если кто-то его задействует */
.dp-messenger-form--visible {
  max-height: 900px;
  opacity: 1;
  margin-top: 16px;
}

/* -------------------------------------------------------------
   10. Selected channel badge (показывает что выбрано)
   ------------------------------------------------------------- */
.dp-messenger-form__selected {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background-color: rgba(124, 42, 143, 0.06);
  border-radius: 6px;
  font-size: 14px;
  color: #222;
}

.dp-messenger-form__selected:empty {
  display: none;
}

.dp-messenger-form__selected-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dp-messenger-form__selected-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------
   11. Строки формы (label + input)
   ------------------------------------------------------------- */
.dp-messenger-form__row {
  margin-bottom: 12px;
}

.dp-messenger-form__row:last-of-type {
  margin-bottom: 0;
}

.dp-messenger-form__label {
  display: block;
  margin-bottom: 6px;
  color: var(--white_text_black, #222);
  font-size: 14px;
  font-weight: 500;
}

.dp-messenger-form__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;

  background-color: #fff;
  color: #222;
  font-size: 15px;
  line-height: 1.4;

  border: 1px solid #d8d8d8;
  border-radius: var(--theme-button-border-radius, 8px);

  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.dp-messenger-form__input:focus {
  outline: none;
  border-color: #7c2a8f;
  box-shadow: 0 0 0 3px rgba(124, 42, 143, 0.15);
}

.dp-messenger-form__input::placeholder {
  color: #aaa;
}

.dp-messenger-form__input--error {
  border-color: #c0392b;
}

.dp-messenger-form__input--error:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

/* -------------------------------------------------------------
   12. Чекбокс согласия на ОПД
   ------------------------------------------------------------- */
.dp-messenger-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
  color: var(--white_text_grey, #555);
}

.dp-messenger-form__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #7c2a8f;
}

.dp-messenger-form__consent-text a {
  color: #7c2a8f;
  text-decoration: underline;
}

.dp-messenger-form__consent-text a:hover {
  text-decoration: none;
}

/* -------------------------------------------------------------
   13. Submit кнопка
   .btn.btn-default.btn-lg.btn-wide наследуется от Aspro.
   Здесь — только margin, не переопределяем базовые стили.
   ------------------------------------------------------------- */
.dp-messenger-form__submit {
  margin-top: 16px;
  width: 100%;
}

/* Loading state */
.dp-messenger-form__submit[disabled],
.dp-messenger-form__submit.is-loading {
  opacity: 0.7;
  cursor: wait;
}

.dp-messenger-form__submit.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: middle;
  animation: dpMessengerSpin 0.7s linear infinite;
}

@keyframes dpMessengerSpin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------
   14. Error-сообщения (под полем + general)
   ------------------------------------------------------------- */
.dp-messenger-form__error {
  display: block;
  margin-top: 6px;
  color: #c0392b;
  font-size: 13px;
  line-height: 1.4;
  animation: dpMessengerFadeIn 0.2s ease both;
}

.dp-messenger-form__error[hidden] {
  display: none;
}

.dp-messenger-form__error--general {
  margin-top: 12px;
  padding: 10px 14px;
  background-color: #fdecea;
  border: 1px solid #f5b7b1;
  border-radius: var(--theme-button-border-radius, 8px);
  font-size: 14px;
}

/* Hint под полем (если потребуется) */
.dp-messenger-form__hint {
  display: block;
  margin-top: 6px;
  color: var(--white_text_grey, #777);
  font-size: 13px;
  line-height: 1.4;
}

/* -------------------------------------------------------------
   15. Success-блок
   ------------------------------------------------------------- */
.dp-messenger-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 16px 18px;
  margin-top: 4px;

  background-color: #e8f7ee;
  color: #1a7a3d;
  border: 1px solid #b8e3c7;
  border-radius: var(--theme-button-border-radius, 8px);

  animation: dpMessengerFadeIn 0.25s ease both;
}

.dp-messenger-success[hidden] {
  display: none;
}

.dp-messenger-success__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #1a7a3d;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.dp-messenger-success__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  padding-top: 4px;
}

/* -------------------------------------------------------------
   16. Анимации
   ------------------------------------------------------------- */
@keyframes dpMessengerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------
   17. Адаптив — мобильный (≤767px)
   Tap-target остаётся 48px (не уменьшаем).
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  .dp-messenger-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .dp-messenger-popup {
    max-width: 100%;
    max-height: 95vh;
    padding: 24px 20px 28px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  }

  .dp-messenger-popup__header {
    margin-bottom: 18px;
    padding-right: 36px;
  }

  .dp-messenger-popup__title {
    font-size: 20px;
  }

  .dp-messenger-popup__subtitle {
    font-size: 13px;
  }

  .dp-messenger-channels {
    gap: 10px;
  }

  .dp-messenger-channel {
    min-height: 48px; /* не уменьшаем — tap-target */
    padding: 10px 16px;
    font-size: 15px;
  }

  .dp-messenger-channel__icon {
    width: 26px;
    height: 26px;
  }

  .dp-messenger-form__input {
    min-height: 46px;
    font-size: 16px; /* iOS — не зумит при focus если ≥16px */
  }
}

/* Очень узкие — синхрон с Aspro ≤600px */
@media (max-width: 600px) {
  .dp-messenger-popup {
    padding: 20px 16px 24px;
  }

  .dp-messenger-form__row {
    margin-bottom: 10px;
  }
}

/* -------------------------------------------------------------
   18. prefers-reduced-motion — отключаем переходы и анимации
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dp-messenger-overlay,
  .dp-messenger-popup,
  .dp-messenger-form,
  .dp-messenger-channel,
  .dp-messenger-form__input,
  .dp-messenger-popup__close,
  .dp-messenger-form__submit,
  .dp-messenger-form__error,
  .dp-messenger-success {
    transition: none !important;
    animation: none !important;
  }
}