/* ============================================================
   Форма подтверждения телефона — по макету dev/bitrix-html-monsher
   (префикс pv-ms-). Каркас — штатная модалка сайта (.modal), здесь
   только начинка. Шрифты — шаблонные (решение от 2026-08-27):
   вместо Manrope — Helvetica, вместо Playfair Display (заголовок
   и цифры кода) — Garamond. Разметка: include/popups/(ru|en)/phone_confirm.php,
   поведение: markup/src/js/scripts/phoneConfirm.js (window.msPhoneConfirm).
   ============================================================ */

.pv-ms__lead { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: #9b9188; }
.pv-ms__lead b { color: #5a5147; font-weight: 400; white-space: nowrap; }

/* --- Способы доставки: только информация, без кликов и статусов --- */
.pv-ms-ways { margin: 26px 0 0; border-top: 1px solid #ece7e2; }
.pv-ms-way {
  display: flex; gap: 16px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid #ece7e2;
  animation: pv-ms-fade-up .45s ease both;
}
.pv-ms-way:nth-child(1) { animation-delay: .05s; }
.pv-ms-way:nth-child(2) { animation-delay: .20s; }
.pv-ms-way:nth-child(3) { animation-delay: .35s; }

.pv-ms-way__ico { position: relative; width: 40px; height: 40px; flex: none; }
.pv-ms-way__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(252, 182, 152, .55);
  animation: pv-ms-ring 7.5s ease-out infinite;
}
.pv-ms-way__circle {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: #faf4ef; color: #c39a76;
  display: flex; align-items: center; justify-content: center;
  animation: pv-ms-wave 7.5s ease infinite;
}
.pv-ms-way__line {
  width: 26px; height: 1px; flex: none; background: #fcb698;
  transform-origin: left; animation: pv-ms-line 7.5s ease infinite;
}
/* волна: звонок → telegram → sms по кругу */
.pv-ms-way:nth-child(2) .pv-ms-way__ring,
.pv-ms-way:nth-child(2) .pv-ms-way__circle,
.pv-ms-way:nth-child(2) .pv-ms-way__line { animation-delay: 2.5s; }
.pv-ms-way:nth-child(3) .pv-ms-way__ring,
.pv-ms-way:nth-child(3) .pv-ms-way__circle,
.pv-ms-way:nth-child(3) .pv-ms-way__line { animation-delay: 5s; }

.pv-ms-way__body { flex: 1; min-width: 0; }
.pv-ms-way__name { font-size: 14.5px; font-weight: 500; color: #5a5147; }
.pv-ms-way__note { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: #a89e95; }

/* --- Поля кода: подчёркивания, цифры — акцентным шрифтом шаблона --- */
.pv-ms__label {
  margin: 26px 0 0; font-size: 12px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: #b5aba1;
}
.pv-ms-code { display: flex; gap: 14px; margin-top: 14px; }
.pv-ms-code__input {
  flex: 1; min-width: 0; height: 52px; box-sizing: border-box; padding: 0;
  text-align: center; font-family: 'Garamond', serif;
  font-size: 28px; color: #5a5147; background: transparent;
  border: none; border-bottom: 1.5px solid #ded7d0; border-radius: 0;
  caret-color: #fcb698; transition: border-color .2s;
}
.pv-ms-code__input:focus { outline: none; border-bottom-color: #fcb698; }
.pv-ms-code--error .pv-ms-code__input { border-bottom-color: #c0553b; }
.pv-ms-code--shake { animation: pv-ms-shake .4s; }
.pv-ms__error { margin: 14px 0 0; font-size: 13px; color: #c0553b; }

/* --- Кнопка --- */
.pv-ms__btn {
  margin-top: 26px; width: 100%; height: 54px; border: none;
  background: #fcb698; color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 500; letter-spacing: .03em; cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.pv-ms__btn:hover { background: #f7a380; box-shadow: 0 10px 24px rgba(252, 182, 152, .5); transform: translateY(-1px); }
.pv-ms__btn:active { background: #ef9871; box-shadow: none; transform: translateY(0); }
.pv-ms__btn[disabled] { background: #f6d5c5; cursor: default; box-shadow: none; transform: none; }

/* --- Низ: таймер / повтор / другой номер --- */
.pv-ms__foot { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pv-ms__timer { margin: 0; font-size: 13px; color: #b5aba1; font-variant-numeric: tabular-nums; }
.pv-ms__link,
.pv-ms__link-btn {
  font-family: inherit; font-size: 13.5px; color: #ad957d;
  text-decoration: none; border: none; background: none; padding: 0;
  border-bottom: 1px solid rgba(173, 149, 125, .4); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.pv-ms__link:hover,
.pv-ms__link-btn:hover { color: #8d7256; border-color: #8d7256; }

/* --- Успех --- */
.pv-ms-success { padding: 22px 0 8px; }
.pv-ms-success__ico {
  width: 66px; height: 66px; border-radius: 50%; background: #fcb698;
  display: flex; align-items: center; justify-content: center;
  animation: pv-ms-pop .5s ease;
}
.pv-ms-success__title { margin: 22px 0 0; }
.pv-ms-success__text { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #9b9188; }
.pv-ms-success__text b { color: #5a5147; font-weight: 400; white-space: nowrap; }

/* Переключение окон основной/успех */
.pv-ms__window { display: none; }
.pv-ms__window.pv-ms__window--active { display: block; }

/* --- Анимации --- */
@keyframes pv-ms-wave {
  0% { background: #faf4ef; color: #c39a76; }
  5%, 26% { background: #fcb698; color: #fff; }
  33%, 100% { background: #faf4ef; color: #c39a76; }
}
@keyframes pv-ms-ring {
  0% { transform: scale(.92); opacity: 0; }
  6% { opacity: .5; }
  16% { transform: scale(1.55); opacity: 0; }
  19% { transform: scale(.92); opacity: .5; }
  28% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes pv-ms-line {
  0% { transform: scaleX(0); opacity: 0; }
  6% { opacity: 1; }
  26% { transform: scaleX(1); opacity: 1; }
  34%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes pv-ms-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
@keyframes pv-ms-pop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.07); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pv-ms-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Попап входа/регистрации (itpragma:auth.popup) — макет
   dev/phone/bitrix-html-monsher, экран 01-vhod.

   Собственная модалка, а не штатная .modal сайта: макет задаёт свой
   оверлей и служебные кнопки, а попап должен открываться без modals.js
   (его перехватывает script.js шаблона компонента).

   Шрифты шаблонные, как и у формы кода выше: вместо Manrope — Helvetica,
   вместо Playfair Display — Garamond.
   ============================================================ */

.pv-ms-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(100, 91, 79, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 12px; box-sizing: border-box;
}
.pv-ms-overlay[hidden] { display: none; }

.pv-ms {
  width: 100%; max-width: 428px; box-sizing: border-box;
  background: #fff; padding: 38px 40px 34px; position: relative;
  max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: 0 30px 70px rgba(74, 66, 58, .22);
  font-family: 'Helvetica', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  animation: pv-ms-fade-up .35s ease;
}
@media (max-width: 480px) { .pv-ms { padding: 34px 22px 28px; } }

/* --- Служебные кнопки --- */
.pv-ms__nav {
  position: absolute; top: 18px; width: 30px; height: 30px; padding: 0;
  border: none; background: none; color: #c3bab1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s;
}
.pv-ms__nav:hover { color: #645b4f; }
.pv-ms__back { left: 18px; }
.pv-ms__close { right: 18px; }

/* --- Типографика экрана входа --- */
.pv-ms__eyebrow {
  margin: 16px 0 0; font-size: 10.5px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: #b5aba1;
}
.pv-ms__title {
  margin: 16px 0 0; font-family: 'Garamond', Georgia, serif;
  font-size: 27px; font-weight: 400; color: #5a5147; letter-spacing: .01em;
}
.pv-ms__eyebrow + .pv-ms__title { margin-top: 12px; }
.pv-ms__note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: #b5aba1; }

/* --- Табы Телефон / E-mail --- */
.pv-ms-tabs { display: flex; gap: 28px; margin: 28px 0 0; border-bottom: 1px solid #ece7e2; }
.pv-ms-tab {
  margin-bottom: -1px; padding: 0 0 12px; border: none; background: none;
  border-bottom: 1.5px solid transparent; font-family: inherit; font-size: 12px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: #b5aba1; cursor: pointer; transition: color .2s, border-color .2s;
}
.pv-ms-tab:hover { color: #8b8177; }
.pv-ms-tab.is-active { color: #5a5147; border-bottom-color: #fcb698; }

/* --- Поле логина --- */
.pv-ms__input {
  width: 100%; box-sizing: border-box; margin-top: 12px; height: 46px; padding: 0;
  font-family: inherit; font-size: 19px; color: #5a5147; background: transparent;
  border: none; border-bottom: 1.5px solid #ded7d0;
  caret-color: #fcb698; transition: border-color .2s;
}
.pv-ms__input:focus { outline: none; border-bottom-color: #fcb698; }
.pv-ms__input::placeholder { color: #c9c1b9; }

/* --- Согласие ---
   Внутри лежит ядровый bitrix:main.userconsent.request: он даёт настоящий
   чекбокс, ссылку и попап с текстом соглашения. Перекрашиваем его разметку
   под макет, свою не рисуем — иначе потеряется показ текста соглашения. */
.pv-ms-agree { margin-top: 22px; }
.pv-ms-agree .main-user-consent-request {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
}
.pv-ms-agree input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 22px; height: 22px; flex: none; box-sizing: border-box;
  border: 1.5px solid #ded7d0; background: #fff; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pv-ms-agree input[type="checkbox"]:checked {
  border-color: #fcb698; background-color: #fcb698;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.5l3.2 3.2L12 3.6'/%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat;
}
.pv-ms-agree .main-user-consent-request > span { font-size: 12.5px; line-height: 1.55; color: #a89e95; }
.pv-ms-agree a { color: #ad957d; text-decoration: underline; cursor: pointer; }
.pv-ms-agree a:hover { color: #8d7256; }

/* --- Вход через Яндекс ID / VK ID (включается параметром компонента) --- */
.pv-ms-or { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.pv-ms-or__line { flex: 1; height: 1px; background: #ece7e2; }
.pv-ms-or__text {
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: #b5aba1; white-space: nowrap;
}
.pv-ms-oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.pv-ms-oauth__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; border: 1px solid #ece7e2; background: #fff;
  font-family: inherit; font-size: 13.5px; color: #5a5147; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.pv-ms-oauth__btn:hover { border-color: #ded7d0; background: #faf7f4; }
.pv-ms-oauth__btn svg { flex: none; }
@media (max-width: 380px) { .pv-ms-oauth { grid-template-columns: 1fr; } }

/* --- Страница смены пароля /cabinet/recovery/ ---
   Отдельной вёрстки у неё не было; берём те же примитивы, что и попап,
   чтобы страница не выпадала из стиля входа. */
.pv-ms-recovery {
  max-width: 428px; margin: 40px auto 60px;
  font-family: 'Helvetica', system-ui, -apple-system, sans-serif;
}
.pv-ms-recovery__btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }