/* Mood mobile-native v3 — bonuses (#pageBonuses) */

@media (max-width: 1023px) {
  body.mood-mobile-v3 #pageBonuses {
    padding-bottom: var(--space-4);
  }

  body.mood-mobile-v3 .bp-nav {
    position: sticky;
    top: calc(var(--header-stack-offset, var(--mood-header-h)) - 1px);
    z-index: var(--z-mob-sticky, 100);
    margin: 0 calc(-1 * var(--mob-gutter)) var(--space-4);
    padding: var(--space-2) var(--mob-gutter);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  body.mood-mobile-v3 .bp-nav__item {
    scroll-snap-align: start;
    min-height: var(--mob-touch-min, 44px);
    flex-shrink: 0;
  }

  body.mood-mobile-v3 .mood-bh-rail {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  body.mood-mobile-v3 .mood-bh-rail__btn {
    scroll-snap-align: start;
    min-height: 44px;
    flex-shrink: 0;
  }

  body.mood-mobile-v3 .mood-bh-active-card,
  body.mood-mobile-v3 .mood-bh-claim-card {
    border-radius: var(--radius-xl);
  }

  body.mood-mobile-v3 .mood-bh-active-card__actions .btn,
  body.mood-mobile-v3 .mood-bh-claim-card__cta {
    min-height: var(--mob-touch-min, 44px);
    width: 100%;
    justify-content: center;
  }

  body.mood-mobile-v3 .bp-promo {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
  }

  body.mood-mobile-v3 .bp-promo__input,
  body.mood-mobile-v3 .bp-promo__btn {
    min-height: var(--mob-touch-min, 44px);
    width: 100%;
  }

  body.mood-mobile-v3 .mood-cb-lv-card {
    flex: 0 0 72vw;
    max-width: 280px;
    scroll-snap-align: start;
  }

  /* ---- Кэшбэк (mood-cb-v5) ---- */

  /* Кнопки получения — полная ширина и палец, а не мышь */
  body.mood-mobile-v3 .mood-cb .mood-bh-claim-actions-primary,
  body.mood-mobile-v3 .mood-cb .mood-bh-claim-actions-primary .btn {
    width: 100%;
    min-height: var(--mob-touch-min, 44px);
    justify-content: center;
  }

  /* «Ваш расчёт сейчас»: в одну колонку подпись и значение вставали друг под
     друга и блок растягивался на пол-экрана — на узком экране это строки. */
  body.mood-mobile-v3 .mood-cb .mood-cb-metric-card {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
  }

  body.mood-mobile-v3 .mood-cb .mood-cb-metric-card__val {
    font-size: 1.05rem;
    text-align: right;
  }

  /* Сравнение «кэшбэк / релоад»: три колонки нужны для смысла (второй столбец —
     кэшбэк, третий — релоад), поэтому не ломаем сетку, а уплотняем. */
  body.mood-mobile-v3 .mood-cb .mood-cb-compare-list li {
    gap: 6px;
    padding: 9px 10px;
    font-size: 0.76rem;
    line-height: 1.35;
  }

  /* Уровни: пять карточек во всю ширину давали ~700px пустой прокрутки.
     Двумя в ряд блок читается целиком, а степпер выше остаётся быстрым обзором.
     (Старое правило .mood-cb-lv-card выше относится к разметке до v5.) */
  body.mood-mobile-v3 .mood-cb .mood-cb-levels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.mood-mobile-v3 .mood-cb .mood-cb-lv-engage__inner {
    padding: 12px;
    gap: 4px;
  }

  body.mood-mobile-v3 .mood-cb .mood-cb-lv-engage__meta {
    font-size: 0.72rem;
  }

  /* Степпер уровней — горизонтальная прокрутка вместо переноса чипов.
     nowrap обязателен: с flex-wrap: wrap чипы переносятся и overflow-x нечему
     прокручивать. */
  body.mood-mobile-v3 .mood-cb .mood-cb-levels-stepper__track {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.mood-mobile-v3 .mood-cb .mood-cb-levels-stepper__track::-webkit-scrollbar {
    display: none;
  }

  body.mood-mobile-v3 .mood-cb .mood-cb-levels-stepper__chip {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-height: var(--mob-touch-min, 44px);
  }

  body.mood-mobile-v3 .mood-cb .mood-cb-history__tab,
  body.mood-mobile-v3 .mood-cb .mood-cb-accordion__summary {
    min-height: var(--mob-touch-min, 44px);
  }

  body.mood-mobile-v3 .bp-cb-levels-scroll,
  body.mood-mobile-v3 .bp-fs-tiers {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  @media (hover: none), (pointer: coarse) {
    body.mood-mobile-v3 .bp-bonus-card:hover,
    body.mood-mobile-v3 .mood-bh-active-card:hover {
      transform: none;
    }

    body.mood-mobile-v3 .bp-bonus-card:active,
    body.mood-mobile-v3 .mood-bh-active-card:active {
      transform: scale(0.98);
    }
  }
}