/* Экран 4 «Бонусы и события». page-header* / .nw / .section-label наследуем
   глобально (city.css подключён в шаблоне + components.css). Здесь — только
   уникальные для экрана компоненты. */

/* ──────────────── Section-city (выбор города внутри section-label) ────────────────
   Лёгкий inline-chip справа от заголовка «Партнёрские предложения»: pin +
   название города + chevron. Без рамки и без фона по умолчанию — не отвлекает
   на скролле. Native <select> накладывается поверх invisible-слоем — tap по
   любой части открывает system-picker. Touch-area увеличена padding'ом до 44px
   высоты по effective-зоне (стандартный паттерн iOS bar-button: визуально
   маленький, кликабельная зона большая). */
.section-city {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  /* visual ~28px height, но tap-зона расширена padding'ом по vertical. */
  padding: .5rem .5rem .5rem .375rem;
  margin: -.5rem -.5rem -.5rem 0;  /* компенсируем padding — не растягиваем header */
  background: transparent;
  border: 0;
  color: var(--brand);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  border-radius: var(--r-input);
  transition: background-color .15s;
}
.section-city:active { background: var(--surface-alt); }
.section-city__pin     { flex-shrink: 0; }
.section-city__name    { font-weight: 700; }
.section-city__chevron { flex-shrink: 0; opacity: .7; transition: transform .15s; }
.section-city[aria-expanded="true"] .section-city__chevron { transform: rotate(180deg); }

/* Bottom-sheet выбора города — mobile-first замена dropdown.
   Структура (создаётся JS в `body`):
     .city-sheet-overlay (полупрозрачный фон) → .city-sheet (карточка снизу)
       → .city-sheet__head (title + close)
       → .city-sheet__list (городов с pin + check) */
.city-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, .45);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: city-sheet-fade .15s ease-out;
}
@keyframes city-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.city-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  animation: city-sheet-up .22s cubic-bezier(.2, .8, .25, 1);
}
@keyframes city-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.city-sheet__grabber {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 4px auto .5rem;
}
.city-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .25rem 0 .75rem;
}
.city-sheet__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.city-sheet__close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 50%;
}
.city-sheet__close:active { background: var(--surface-alt); }
.city-sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.city-sheet__item {
  display: flex;
  align-items: center;
  gap: .625rem;
  /* Touch-target ≥ 44px (Apple HIG). */
  min-height: var(--touch);
  padding: .625rem .75rem;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
  font-size: .9375rem;
  font-weight: 500;
}
.city-sheet__item:active { background: var(--surface-alt); }
.city-sheet__item-pin { color: var(--muted); flex-shrink: 0; }
.city-sheet__item-name { flex: 1; }
.city-sheet__item-check { color: var(--brand); flex-shrink: 0; opacity: 0; }
.city-sheet__item.is-active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}
.city-sheet__item.is-active .city-sheet__item-pin { color: var(--brand); }
.city-sheet__item.is-active .city-sheet__item-check { opacity: 1; }

/* ──────────────────────── Wheel-card ──────────────────────── */
.wheel-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.25rem var(--gutter) 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  /* margin-bottom 0 — следующий .section-label сам даёт 1rem сверху,
     иначе под колесом образуется 32px «дыра» (двойное складывание). */
  margin-bottom: 0;
}
.wheel-card__canvas-wrap {
  position: relative;
  width: 280px;
  height: 280px;
}
@media (max-width: 360px) {
  /* На узких экранах ужимаем canvas, чтобы не лез в gutter контейнера. */
  .wheel-card { padding: 1.25rem 12px 1rem; }
  .wheel-card__canvas-wrap { width: 240px; height: 240px; }
}
@media (max-width: 320px) {
  /* iPhone SE / Android compact — ещё агрессивнее, иначе canvas вылазит. */
  .wheel-card__canvas-wrap { width: 220px; height: 220px; }
}
.wheel-card__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Анимация вращения управляется JS через transform: rotate(deg). */
  transition: transform 4s cubic-bezier(.17, .67, .15, 1);
  will-change: transform;
}
/* Стрелка-указатель сверху — указывает вниз на выбранный сектор. */
.wheel-card__pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 18px solid var(--brand);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
.wheel-card__status {
  font-size: .875rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
  min-height: 1.4em;
}
.wheel-card__status.is-win { color: var(--success-ink); font-weight: 600; }
.wheel-card__status.is-dud { color: var(--warning-ink); font-weight: 600; }

/* Праздничный блок выигрыша — сумма-герой + burst + поздравление, с scale-pop
   вспышкой. Колесо — единственный «карнавальный» элемент UI, где вспышка
   уместна. Класс --lvlN масштабирует яркость по весу приза. */
.wheel-win {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  animation: wheel-win-pop .35s cubic-bezier(.2, .8, .3, 1.25) both;
}
.wheel-win__burst { font-size: 1.75rem; line-height: 1; }
.wheel-win__headline { font-size: .8125rem; font-weight: 700; color: var(--success-ink); }
.wheel-win__amount { font-size: 1.5rem; font-weight: 700; color: var(--success-ink); }
.wheel-win__sub { font-size: .75rem; color: var(--muted); font-weight: 400; }

/* Масштаб яркости по уровню приза (5/10/15k → 25/30k → 50/75k → 125k). */
.wheel-win--lvl2 .wheel-win__amount { font-size: 1.625rem; }
.wheel-win--lvl3 .wheel-win__burst  { font-size: 2.125rem; }
.wheel-win--lvl3 .wheel-win__amount {
  font-size: 1.875rem;
  text-shadow: 0 1px 10px var(--success-glow);
}
.wheel-win--lvl4 .wheel-win__burst  { font-size: 2.5rem; }
.wheel-win--lvl4 .wheel-win__headline { font-size: .9375rem; }
.wheel-win--lvl4 .wheel-win__amount {
  font-size: 2.25rem;
  text-shadow: 0 2px 16px var(--success-glow), 0 0 4px var(--success-glow);
}
@keyframes wheel-win-pop {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* Canvas-залп конфетти поверх колеса (JS создаёт и удаляет за время праздника). */
.wheel-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .wheel-win { animation: none; }
}

.wheel-card__btn { width: 100%; max-width: 280px; }
.wheel-card__btn:disabled { cursor: not-allowed; }
/* Радужный перелив активной кнопки спина. Цвета взяты 1:1 с секторов колеса
   (domain/wheel.py: 5k→125k), чтобы кнопка визуально принадлежала колесу, а не
   была случайной радугой. Первый и последний стоп совпадают (#fbbf24) — шов
   градиента бесшовный при сдвиге фона. Перебивает синий .btn-primary только в
   активном виде; countdown-вид (--secondary) ниже остаётся приглушённым. */
.wheel-card__btn:not(.wheel-card__btn--secondary) {
  background: linear-gradient(
    90deg,
    #fbbf24, #fb923c, #f87171, #ec4899,
    #a855f7, #00b4d8, #3b82f6, #10b981, #fbbf24
  );
  background-size: 200% 100%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); /* читаемость текста на жёлтых стопах */
  animation: wheel-btn-shimmer 4s linear infinite;
}
@keyframes wheel-btn-shimmer {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-card__btn:not(.wheel-card__btn--secondary) { animation: none; }
}
/* Secondary-вид кнопки в состоянии «уже крутил сегодня» — приглушённый, без
   градиента. Внутри живёт live countdown до 00:00 VN. Кнопка disabled —
   не реагирует на тап. */
.wheel-card__btn--secondary {
  background: var(--surface-alt);
  color: var(--muted);
  box-shadow: none;
  /* Таймер в две строки: «До следующего спина» / «19ч 58м» — иначе перенос
     рвал время посреди (19ч\n58м). */
  flex-direction: column;
  gap: .125rem;
  line-height: 1.25;
}
.wheel-countdown__label { font-size: .8125rem; font-weight: 500; }
.wheel-countdown__time { font-size: .9375rem; font-weight: 700; }
/* Перебиваем .btn:disabled opacity:.55 — countdown должен оставаться читаемым. */
.wheel-card__btn.wheel-card__btn--secondary:disabled {
  opacity: 1;
  background: var(--surface-alt);
  color: var(--muted);
}

/* Утешка (показывается под колесом при DUD-исходе). */
.wheel-consolation {
  width: 100%;
  margin-top: .5rem;
  padding: .875rem var(--gutter);
  background: var(--brand-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
}
.wheel-consolation__head {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: .25rem;
}
.wheel-consolation__title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.wheel-consolation__desc {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: .25rem;
  line-height: 1.4;
}
.wheel-consolation__cta {
  display: inline-block;
  margin-top: .5rem;
  padding: .375rem .75rem;
  background: var(--brand);
  color: var(--brand-text);
  text-decoration: none;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
}
.wheel-consolation__cta:active { opacity: .85; }

/* ──────────────────────── Promo ──────────────────────── */
.promo-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: .875rem var(--gutter);
  margin-bottom: 1rem;
}
.promo-card__form { display: flex; gap: .5rem; }
.promo-card__input {
  flex: 1;
  min-width: 0;
  height: var(--touch);
  padding: 0 .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-input);
  font: inherit;
  font-size: .9375rem;
  background: var(--surface-alt);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.promo-card__input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
}
.promo-card__btn {
  /* .btn задаёт width: 100% — в flex-row это раздвигает кнопку на всю
     строку, а input ужимается до овала. Перебиваем width:auto, ширина
     определяется padding'ом + текстом. */
  flex-shrink: 0;
  width: auto;
  padding: 0 1.125rem;
  height: var(--touch);
}

.promo-card__status {
  margin-top: .625rem;
  padding: .5rem .75rem;
  border-radius: var(--r-input);
  font-size: .8125rem;
  line-height: 1.4;
}
.promo-card__status.is-ok {
  background: var(--success-soft);
  border: 1px solid var(--border);
  color: var(--success-ink);
}
.promo-card__status.is-error {
  background: var(--danger-soft);
  border: 1px solid var(--border);
  color: #b32d2d;
}

/* ──────────────────────── Offers ──────────────────────── */
.offers-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 1rem;
}
.offers-list__empty {
  padding: 1rem;
  text-align: center;
  font-size: .875rem;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-card);
}
.offer-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem var(--gutter);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.offer-card:active { background: var(--surface-alt); }
/* Получено: НЕ гасим карточку через opacity (читалось как «выключено»), а даём
   мягкий зелёный тон — акцент на успешном получении. */
.offer-card.is-granted {
  cursor: default;
  background: var(--success-soft);
  border-color: var(--success-border);
}
.offer-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad-brand-cta);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-text);
  font-weight: 700;
  font-size: 1.125rem;
  object-fit: cover;
  overflow: hidden;
}
.offer-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.offer-card__body { flex: 1; min-width: 0; }
.offer-card__partner {
  font-size: .75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .375rem;
}
.offer-card__global-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: .6875rem;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 700;
}
.offer-card__title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
  line-height: 1.3;
}
.offer-card__desc {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.offer-card__bonus {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success-ink);
  font-weight: 700;
  font-size: .8125rem;
  white-space: nowrap;
}
/* Получено: сплошная зелёная заливка бейджа (offer = мягкий зелёный → получено =
   сплошной зелёный, явный «успех/начислено»). */
.offer-card.is-granted .offer-card__bonus {
  background: var(--success);
  color: var(--success-text);
}
/* Подсказка-CTA в desc (карточка «за подписку»): сигналит «нажми». */
.offer-card__desc--cta { color: var(--brand); font-weight: 600; }

/* ──────────────────────── Events ──────────────────────── */
.events-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1rem;
}
.event-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.event-card:active { background: var(--surface-alt); }
.event-card__cover {
  width: 100%;
  height: 140px;
  /* Spacely cyan-теал градиент-placeholder. Без warning-оранжа — он отдан
     под семантику «осторожно» в success-warning. */
  background:
    linear-gradient(135deg, rgba(0, 150, 199, .18), rgba(0, 212, 170, .12));
  background-size: cover;
  background-position: center;
}
/* Нет фото: компактная брендовая полоса с иконкой «событие» вместо пустого
   140px-прямоугольника (не выглядит как сломанная картинка). */
.event-card__cover--empty {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-card__cover-icon { color: var(--brand); opacity: .55; }
.event-card__body { padding: .75rem var(--gutter); }
.event-card__title { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.event-card__partner { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.event-card__desc {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: .5rem;
  line-height: 1.45;
}
.event-card__cta {
  display: inline-block;
  margin-top: .625rem;
  padding: .375rem .875rem;
  background: var(--brand);
  color: var(--brand-text);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
}
.event-card__cta:active { opacity: .85; }