/* 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;
  }

  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);
    }
  }
}