/*
  ОКНО ОПЛАТЫ

  Цвета взяты из брендбука: фон #1f1f1f, тёплый акцент #dfb673 —
  единственный цветной элемент в кадре. Ничего праздничного: мы продаём
  предсказуемость, а не впечатление.

  Окно намеренно скучное. Человек на этом шаге уже принял решение,
  и всё, что ему тут нужно, — увидеть сумму, ввести почту и нажать кнопку.
*/

/*
  СВОЯ КОРОБОЧНАЯ МОДЕЛЬ ДЛЯ ОКНА ОПЛАТЫ

  На сайте нет глобального box-sizing: border-box — у всего стоит
  content-box. Значит отступы и рамка ПРИБАВЛЯЮТСЯ к ширине: поле
  с width:100% и padding 15px становится шире своего контейнера,
  и внизу окна вылезает горизонтальная полоса прокрутки.
  Поймано на живой странице 15.09.2026, а не в вёрстке — потому что
  в отдельном файле окно выглядело правильно.

  Правило нарочно ограничено окном оплаты. Переключать модель глобально
  на чужом сайте нельзя: это переставит вёрстку везде разом.
*/
.pay,
.pay *,
.pay *::before,
.pay *::after {
  box-sizing: border-box;
}

.pay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Отступ по краям, чтобы на телефоне окно не упиралось в края экрана,
     и учёт выреза/динамического острова на iPhone. */
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px
           max(16px, env(safe-area-inset-bottom, 0px));
}

/* [hidden] на флекс-контейнере сам по себе не работает: display:flex
   перебивает display:none из браузерных стилей. */
.pay[hidden] {
  display: none;
}

.pay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  /* Размытие — украшение: где не поддерживается, просто затемнение. */
  backdrop-filter: blur(3px);
}

.pay__window {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* Длинное название проекта не должно выталкивать кнопку за экран
     на невысоких экранах — окно прокручивается внутри себя. */
  max-height: 100%;
  overflow-y: auto;
  padding: 32px 28px 28px;
  background: #1f1f1f;
  border: 1px solid rgba(223, 182, 115, .25);
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

.pay__close {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 4px 8px;
  font-size: 28px;
  line-height: 1;
  color: #8a8a8a;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s;
}

.pay__close:hover,
.pay__close:focus-visible {
  color: #dfb673;
}

.pay__title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
}

.pay__project {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.4;
  color: #c9c9c9;
}

.pay__price {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 600;
  color: #dfb673;
  /* Цифры не должны прыгать по ширине, если окно перерисуется. */
  font-variant-numeric: tabular-nums;
}

.pay__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: #a9a9a9;
}

.pay__input {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  /* 16px — не эстетика: при меньшем размере Safari на iPhone увеличивает
     страницу при фокусе на поле, и человек теряет из виду кнопку. */
  font-size: 16px;
  color: #fff;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  transition: border-color .2s;
}

.pay__input::placeholder {
  color: #6a6a6a;
}

.pay__input:focus {
  outline: none;
  border-color: #dfb673;
}

.pay__input._bad {
  border-color: #c9584f;
}

.pay__hint {
  margin: 9px 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #8a8a8a;
}

.pay__agree {
  margin-bottom: 20px;
}

.pay__button {
  display: block;
  width: 100%;
  padding: 15px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #1f1f1f;
  background: #dfb673;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .2s;
}

.pay__button:hover:not(:disabled) {
  opacity: .88;
}

.pay__button:disabled {
  opacity: .55;
  cursor: default;
}

.pay__error {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #e08078;
}

.pay__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #7a7a7a;
}

/* Пока окно открыто, страница под ним не прокручивается: иначе на
   телефоне прокрутка внутри окна «проваливается» на страницу. */
body.pay-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .pay__window {
    padding: 28px 20px 24px;
  }

  .pay__price {
    font-size: 26px;
  }
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  .pay__close,
  .pay__input,
  .pay__button {
    transition: none;
  }
}

/*
  ВТОРАЯ КНОПКА НА КАРТОЧКЕ ПРОЕКТА

  «Обсудить проект» носит тот же класс project__buy-item, что и «Купить
  проект», и потому выглядит так же: тот же фон, рамка, скругление,
  отступы. Отличается только насыщенностью рамки — этого хватает, чтобы
  было видно, какая кнопка главная, и при этом они читались парой.

  Прежняя версия имела собственный класс со своей геометрией, и кнопки
  выглядели из разных наборов. Замечание владельца 15.09.2026.
*/
/*
  Серебро вместо золота, 16.09.2026. Тот же набор, что у фильтров
  в каталоге: рамка rgba(255,255,255,0.1), подпись белая, значок серый
  #9c9c9c. Золото осталось за ценой и кнопкой «Купить» — цвет акцента
  теперь работает только там, где нужно действие.
*/
.project__buy-item_ghost {
  border-color: rgba(255, 255, 255, 0.1);
}

.project__buy-item_ghost .project__buy-item-text {
  font-weight: 500;
  color: #fff;
}

.project__buy-item_ghost svg {
  stroke: var(--color-gray-text, #9c9c9c);
}

.project__buy-item_ghost:hover,
.project__buy-item_ghost:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
}

/*
  ШАПКА КАРТОЧКИ НА ТЕЛЕФОНЕ

  В одну строку помещались название, две кнопки и цена — и на узком
  экране они переносились как попало: цена оказывалась под кнопками,
  кнопки разной ширины, а сама цена в своей плашке сидела не по центру,
  потому что у родителя align-items: stretch.

  Становится так:
    строка 1 — название слева, цена справа;
    строка 2 — две кнопки во всю ширину, поровну.

  Порядок задаётся order, перенос — пустым ::after во всю ширину.
  У .project__title-wrapper своего ::after нет, проверено на живой
  странице; появится в теме — эти строки надо пересмотреть.

  ПРО КЕГЕЛЬ. Название и цена на телефоне оставались теми же 40px, что
  и на десктопе: 291px + 212px против 374px ширины экрана — рядом они
  не помещались физически, и цена сваливалась на свою строку. Поэтому
  здесь кегль уменьшается. clamp, а не фиксированное число: на 320px
  берётся нижняя граница, на 700px — верхняя, между ними плавно.
  Межстрочный интервал в теме задан множителем (1.5), поэтому тянется
  за кеглем сам и трогать его не нужно.

  Точка перелома 700px взята не с потолка — это один из двух
  собственных брейкпоинтов project.css, чтобы шапка перестраивалась
  вместе с остальной страницей, а не на своей отдельной ширине.
*/
/*
  БЛОК ДЕЙСТВИЯ: ЦЕНА И КНОПКИ ОДНИМ СТОЛБЦОМ СПРАВА

  Вариант A из макета 15.09.2026. Решение о покупке принимается в связке
  «цена → действие», а раньше между ними лежала половина строки: сначала
  взгляд натыкался на кнопки, и только потом находил цену у правого края.

  «Купить» залита акцентом и в кадре единственная такая — это главное
  действие страницы. «Обсудить» остаётся кнопкой, а не ссылкой: за ней
  не вопрос перед покупкой, а отдельный заказ — похожий дом со своими
  правками. Приглушена только рамкой.
*/
.project__cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/*
  Порядок в строке: «Обсудить», «Купить», цена. Кнопка покупки прижата
  к цене — это одна мысль, и разрывать её нечем.

  Столбцом это стояло недолго: три строки справа растягивали шапку
  по высоте, а слева от них оставалось пустое поле во всю ширину.
  Замечание владельца 16.09.2026.

  Порядок задан через order, а не перестановкой в шаблоне: в разметке
  цена идёт первой, и это правильно — без стилей (и для голосового
  чтения) сначала должна звучать цена, а потом действия с ней.
*/
.project__buy-item_ghost { order: 1; }
.project__buy-item_main  { order: 2; }
.project__cta > ._price  { order: 3; }

/* Одинаковая ширина: надписи разной длины не должны давать разные кнопки. */
.project__cta .project__buy-item {
  min-width: 168px;
}

/*
  Цена внутри блока действия — просто крупная строка, без плашки.
  Плашка осталась от той поры, когда цена стояла в ряду с кнопками
  и должна была держать с ними один вид. В столбце она лишняя: рамка
  вокруг цифры спорит с рамкой кнопки прямо под ней, и глаз не понимает,
  что тут нажимается, а что читается.
*/
.project__cta > ._price {
  white-space: nowrap;
  margin-bottom: 2px;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
}

.project__cta .project__buy-item {
  gap: 9px;
  padding: .72em 1.5em;
}

.project__cta .project__buy-item svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.project__buy-item_main {
  background-color: #dfb673;
  border-color: #dfb673;
  color: #1f1f1f;
}

.project__buy-item_main .project__buy-item-text {
  color: #1f1f1f;
}

.project__buy-item_main:hover,
.project__buy-item_main:focus-visible {
  background-color: #e8c78d;
  border-color: #e8c78d;
}

@media (width < 700px) {
  /*
    На телефоне столбец распускается: display:contents убирает коробку
    .project__cta, и цена с кнопками снова становятся прямыми элементами
    шапки — тогда работают правила порядка ниже. Из-за этого селекторы
    здесь по потомку, а не по прямому ребёнку: в дереве документа цена
    по-прежнему лежит внутри .project__cta.
  */
  .project__cta {
    display: contents;
  }

  .project__title-wrapper {
    align-items: center;
    /* В теме зазор 1em — на 320px из-за него названию и цене не хватало
       пяти пикселей, и цена сваливалась на свою строку. Померено. */
    gap: 10px 8px;

    /* Вертикальный зазор 5px, а не 10: перенос строки делает пустой
       элемент ::after во всю ширину, то есть между названием и кнопками
       лежат ДВА межстрочных зазора, а не один. 5 + 5 = 10px — ровно
       столько же, сколько от кнопок до характеристик. Померено. */
    row-gap: 5px;
  }

  /*
    По потомку, а не по прямому ребёнку. Цена лежит внутри .project__cta,
    и с «>» правило её не доставало: на телефоне она оставалась
    десктопного размера — 27px против 23px у названия на 390px и 40px
    против 28px на 599px. Из-за разной высоты строки отступ до кнопок
    гулял от 24 до 30px на разной ширине. Померено.
  */
  .project__title-wrapper .project__title {
    font-size: clamp(20px, 6vw, 28px);
  }

  .project__title-wrapper > .project__title:not(._price) {
    order: 1;
    /* уступает место цене, если название окажется длиннее обычного */
    flex: 0 1 auto;
    min-width: 0;
  }

  .project__title-wrapper ._price {
    order: 2;
    margin-left: auto;
    /* цена не переносится по словам ни при какой ширине */
    white-space: nowrap;
    flex: 0 0 auto;
    /* на десктопе 2px для оптического выравнивания с кнопками,
       здесь цена стоит над ними и этот сдвиг только ломает ритм */
    margin-bottom: 0;
  }

  /* Разрыв строки: пустой элемент во всю ширину между ценой и кнопками */
  .project__title-wrapper::after {
    content: '';
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  /* Порядок тот же, что на десктопе: сначала «Обсудить», потом «Купить». */
  .project__title-wrapper .project__buy-item_ghost { order: 4; }
  .project__title-wrapper .project__buy-item_main { order: 5; }

  .project__title-wrapper .project__buy-item {
    /* flex-basis: 0 — чтобы обе кнопки были ровно по половине,
       независимо от длины надписи внутри */
    flex: 1 1 0;
    min-width: 0;
    padding: .7em .6em;
    text-align: center;
  }

  .project__title-wrapper .project__buy-item .project__buy-item-text {
    font-size: 14px;
  }
}