/* css/quickbuy.css
   Карусель быстрой покупки
   Вынесено из style.css без изменения содержимого правил. */

/* ===== СЕКЦИЯ БЫСТРОЙ ПОКУПКИ ===== */
/* .quick-buy-frame — тонкая рамка: обводка теперь идёт из утилиты
   .rd-snake/.rd-snake-redwhite (css/redesign-motion.css, классы навешаны в
   js/core/quickBuy/carousel.js) — Фаза 16.3, заодно дедуп старого
   quickBuySnake-приёма (описан ниже в этом же файле до правки: большой
   вращающийся conic-gradient позади + overflow:hidden для обрезки).
   padding:2px на самой рамке всё ещё нужен: .quick-buy-section (обычный
   элемент, идёт ПОСЛЕ ::before в порядке отрисовки DOM) сплошным фоном
   перекрывает всё, кроме этого padding — так получается видимый по краю
   "хвост" кольца без явных z-index-трюков. */
.quick-buy-frame {
  position: relative;
  /* Без собственного отступа: сверху уже есть padding-top у .container, и
     вместе с ним 40px давали от шапки втрое больший зазор, чем отбивка
     заголовка «Выберите игру» ниже (его margin — те же 20px). */
  margin-top: 0;
  padding: 2px;
  border-radius: 14px;
  isolation: isolate;
  /* Появляется первым (без задержки) — это то, на чём должен фокусироваться
     взгляд при заходе на главную; keyframe heroEnter общий с css/base.css. */
  animation: heroEnter 0.5s ease backwards;
}
@media (prefers-reduced-motion: reduce) {
  .quick-buy-frame { animation: none; }
}
.quick-buy-section {
  position: relative;
  z-index: 1;
  background: var(--surface-1);
  border-radius: 12px;
  padding: 20px;
}
.quick-buy-section h3 {
  color: var(--text-color);
  /* Браузерные 1.17em (≈18.7px) не влезали в строку на узком экране —
     заголовок ломался на две. На 320px к этому нужен ещё и более узкий
     боковой padding секции, см. медиа-запрос ниже. */
  font-size: var(--rd-text-md, 1rem);
  line-height: var(--rd-leading-tight, 1.25);
  font-weight: 600;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-buy-section h3 .icon-bolt {
  width: 20px;
  height: 20px;
  color: var(--primary-color);
  flex-shrink: 0;
}
.quick-buy-section .form-group input,
.quick-buy-section .form-group select {
  text-align: left;
}
/* Видимая подпись поля. Раньше подпись жила только в placeholder и исчезала,
   как только пользователь начинал печатать — в поле Player ID, куда уходит
   товар, проверить перед оплатой "туда ли я вписал" было нечем. */
.quick-buy-field-label {
  display: block;
  overflow: hidden;
  max-height: 2em;
  margin-bottom: 5px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--rd-text-muted);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out,
    max-height 0.18s ease-out, margin-bottom 0.18s ease-out;
}
/* Пока поле пустое, подпись дословно дублирует placeholder — показываем её
   только когда пользователь начал вводить и placeholder уже не виден. Место
   под подпись НЕ резервируется: пустая строка над полем читалась как случайный
   провал в вёрстке (правка по фидбэку владельца). Схлопываем max-height и
   margin вместе с прозрачностью и с той же длительностью — поле не прыгает, а
   плавно съезжает на 17px. max-height (не height:auto) — подпись всегда
   однострочная, 2em с запасом её накрывает, а auto анимировать нельзя.
   Браузеры без :has() просто показывают подпись всегда — это прежнее
   поведение, ничего не ломается. */
.quick-buy-field:has(input:placeholder-shown) > .quick-buy-field-label {
  opacity: 0;
  transform: translateY(3px);
  max-height: 0;
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .quick-buy-field-label {
    transition-duration: 0.01ms;
  }
  .quick-buy-field:has(input:placeholder-shown) > .quick-buy-field-label {
    transform: none;
  }
}
/* Сумма пересчитывается на месте при смене варианта/промокода — моноширинные
   цифры не дают подписи кнопки дёргаться по ширине. */
#quickBuyBtn {
  font-variant-numeric: tabular-nums;
}
/* ===== КАРУСЕЛЬ БЫСТРОЙ ПОКУПКИ ===== */
.quick-games {
  display: flex;
  /* НЕ center: при overflow-x у flex justify-content:center браузер уводит
     начало контента в недостижимую отрицательным scrollLeft зону — первый
     айтем обрезан и не докрутить. Центрирование активного элемента и так
     делает JS (scrollToItem() в carousel.js), здесь только flex-start. */
  justify-content: flex-start;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Верх/бока: место для scale(1.18) + кольца box-shadow активной иконки —
     иначе overflow-x:auto обрезает их по границе контейнера. */
  padding: 8px 6px 10px;
  margin-bottom: 12px;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.quick-games::-webkit-scrollbar { display: none; }
/* Включается из carousel.js (updateCenteringMode()) только когда все
   иконки помещаются в контейнер без overflow — обычно десктоп/мало игр.
   При overflow остаётся flex-start (см. комментарий выше), иначе первый
   айтем уезжает в недостижимую зону скролла. */
.quick-games.quick-games--fit { justify-content: center; }
/* .quick-game-item — теперь <button>, а не <div> (кликабельный див был
   недостижим с клавиатуры: выбрать игру в быстрой покупке без мыши было
   нельзя). Гасим фон/рамку браузера и наследуем шрифт — иначе .game-name с
   font-size:0.8em считался бы от дефолтного шрифта кнопки (~13px), а не от
   шрифта body, и подписи стали бы мельче. */
.quick-game-item {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  flex: 0 0 auto;
  /* center, не start: scrollToItem() в carousel.js целится в центр контейнера,
     а не в начало — если snap целится в другую точку, чем JS-скролл, браузер
     "перетягивает" итоговую позицию после инерции к своей точке, из-за чего
     активной визуально становится не тот айтем, что был выбран кликом. */
  scroll-snap-align: center;
  text-align: center;
  min-width: 80px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}
.quick-game-item img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.2s, box-shadow 0.2s;
}
.quick-game-item .game-name {
  font-size: 0.8em;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
/* transform:scale, а не рост width/height: реальный рост размера сдвигает
   offsetLeft всех следующих иконок в момент переключения .active — а
   scrollToItem() в carousel.js читает offsetLeft сразу после этого
   переключения, из-за чего расчёт цели скролла мог "съезжать" на соседнюю
   иконку. transform в layout не участвует и на offsetLeft соседей не влияет;
   клиппинг кольца при этом не возвращается — для этого уже есть запас в
   padding контейнера .quick-games. */
.quick-game-item.active { opacity: 1; }
.quick-game-item.active img {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--primary-color);
}
.quick-game-item:not(.active) { opacity: 0.6; }
.quick-games-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}
.quick-games-indicators .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  transition: background 0.3s, transform 0.3s;
}
.quick-games-indicators .dot.active {
  background: var(--primary-color);
  transform: scale(1.3);
}


/* Информирование при покупке (используется и быстрой покупкой, и основным
   чекаутом — js/core/checkout/checkout-helpers.js). Аккаунт для быстрой
   покупки заводится автоматически, формы регистрации с галочками человек не
   видит, поэтому основание обработки здесь — исполнение договора (п. 5 ч. 1
   ст. 6 152-ФЗ), а не согласие: требуется не галочка, а доступность
   документов до оплаты. */
.quick-buy-legal {
  color: var(--rd-text-muted);
  font-size: 0.78em;
  line-height: 1.45;
  text-align: center;
  margin: 10px 0 0;
}
.quick-buy-legal a {
  color: var(--rd-gold);
}

/* Подтверждение совершеннолетия перед оплатой (оферта п. 4.2). В отличие от
   .quick-buy-legal выше это ДЕЙСТВИЕ, а не информирование: без галочки сервер
   не примет ни заказ, ни оплату, ни пополнение баланса
   (server/middleware/ageConfirmation.js). Живёт здесь, а не в
   redesign-cart-checkout.css, потому что нужен обеим модалкам сразу — быстрой
   покупке и обычному чекауту, — а quickbuy.css подключён в <head> без
   отложенной загрузки. Геометрия повторяет .auth-consent-row из
   redesign-auth.css: одна и та же по смыслу строка с галочкой не должна
   выглядеть в двух местах по-разному. */
.checkout-age-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  color: var(--rd-text-muted);
  /* Токен шкалы, а не 0.85em: em считается от родителя и при вложенности
     перемножается, поэтому одна и та же строка получала разный кегль в
     чекауте и в быстрой покупке (см. «Шкала размеров текста» в CLAUDE.md). */
  font-size: var(--rd-text-sm);
  line-height: 1.45;
  cursor: pointer;
}
.checkout-age-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--rd-gold);
  cursor: pointer;
}
.checkout-age-row input[type="checkbox"]:focus-visible {
  /* Прозрачная рамка держится РЯДОМ с тенью намеренно: в режиме высокой
     контрастности Windows box-shadow не рисуется вовсе, и подсветка фокуса
     пропадала бы целиком — а там рамка получает системный цвет и остаётся
     единственным видимым индикатором. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px oklch(0.78 0.1 85 / 0.25);
}
.checkout-age-row a {
  color: var(--rd-gold);
}

/* Пояснение в модалке подтверждения возраста (js/shared/ageConfirmation.js).
   Классом, а не инлайновым style: тот же кегль со шкалы, что и у строки с
   галочкой под ним. */
.age-confirm-lead {
  color: var(--rd-text-muted);
  font-size: var(--rd-text-sm);
  line-height: 1.5;
}
/* Ссылка на оферту — тем же золотом, что в строке с галочкой рядом и в форме
   регистрации (.auth-consent-row a). Без этого правила она доставалась браузеру
   и рисовалась синей: на тёмной модалке такой текст не читается вовсе. */
.age-confirm-lead a {
  color: var(--rd-gold);
}

/* Поля заказа с вариантами: список, чекбокс «да/нет» и чек-лист. Тип поля
   задаётся в Настройки → Товары (см. server/utils/requiredFieldsConfig.js) и
   рисуется одинаково в модалке чекаута и в виджете быстрой покупки. */
.checkout-field-select,
.quick-buy-select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--rd-bg);
  color: var(--rd-text);
  border: 1px solid var(--rd-border);
}

.checkout-field-checklist,
.quick-buy-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.checkout-field-checkbox,
.quick-buy-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rd-text);
  font-size: var(--rd-text-sm, 0.9em);
  cursor: pointer;
}