/* Member storefront preview. The layer gives component overrides priority over
   the existing brand sheets' unlayered important declarations. */
@layer member-refresh {
  :where(body.member-site, body.bg-body.font-body) {
    --refresh-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --refresh-accent: #edc77f;
    --refresh-accent-ink: #201307;
    --refresh-radius: 16px;
    --refresh-section-gap: clamp(28px, 3.6vw, 54px);
    font-family: var(--refresh-font) !important;
    font-synthesis: none;
  }

  :where(body.vice-site) {
    --refresh-accent: #f373d0;
    --refresh-accent-ink: #250b22;
  }

  :where(body.betovo-site, body.bg-body.font-body) {
    --refresh-accent: #b6f34b;
    --refresh-accent-ink: #162006;
  }

  :where(body.qatar-site) {
    --refresh-accent: #ff6487;
    --refresh-accent-ink: #2f0712;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .site-header, .sidebar, .main-content, .mobile-nav, .bv-top, .bv-mobile,
    .bv-hero, .bp12-section-heading, .mp-shell, .mp-dialog, .wu-shell,
    input, select, textarea, button
  ) {
    font-family: var(--refresh-font) !important;
  }

  :where(html:not([data-theme="light"])) :where(body.member-site, body.bg-body.font-body) :is(
    .site-header, .bv-top, .mobile-nav, .bv-mobile
  ) {
    background: #101218 !important;
    border-color: color-mix(in srgb, var(--refresh-accent) 20%, #232630) !important;
  }

  :where(html:not([data-theme="light"])) :where(body.member-site, body.bg-body.font-body) :is(
    .sidebar, .texture-sidebar
  ) {
    background: #13161d !important;
    border-color: #262a34 !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .section-heading h2, .bp12-section-heading h2, .mp-section-head h2,
    .vip-hero h1, .mp-shell h1, .game-search + h1
  ) {
    font-family: var(--refresh-font) !important;
    font-weight: 760 !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .section-heading h2, .bp12-section-heading h2, .mp-section-head h2
  ) {
    font-size: clamp(22px, 2.35vw, 30px) !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .section-heading .eyebrow, .bp12-section-heading .eyebrow, .mp-eyebrow
  ) {
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .12em !important;
  }

  :where(body.member-site) .main-content .section-space {
    margin-block-start: var(--refresh-section-gap) !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(.section-heading, .bp12-section-heading) {
    gap: 12px !important;
    margin-block-end: 16px !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .header-actions .btn, .bv-top .bv-login, .bv-top .bv-register, .bv-hero-cta
  ) {
    min-height: 42px !important;
    border-radius: 999px !important;
    font-family: var(--refresh-font) !important;
    font-size: 13px !important;
    font-weight: 730 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    padding-inline: clamp(12px, 1.6vw, 22px) !important;
    text-transform: none !important;
    text-decoration: none;
    white-space: nowrap;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .header-actions .btn.primary, .bv-top .bv-register, .bv-hero-cta
  ) {
    background: var(--refresh-accent) !important;
    color: var(--refresh-accent-ink) !important;
    border-color: var(--refresh-accent) !important;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--refresh-accent) 18%, transparent) !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .header-actions .btn, .bv-top .bv-login, .bv-top .bv-register,
    .bv-hero-cta, .header-nav a, .sidebar a, .mobile-nav a, .bv-mobile a
  ):focus-visible {
    outline: 2px solid var(--refresh-accent) !important;
    outline-offset: 3px !important;
  }

  :where(body.member-site) :is(.header-nav a, .sidebar a) {
    font-family: var(--refresh-font) !important;
    font-size: 13px !important;
    font-weight: 610 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    border-radius: 10px !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .mobile-nav a, .bv-mobile a, .quick-links-container a, .bv-hero-copy p,
    .rd-promo-body, .bp12-game-open
  ) {
    font-family: var(--refresh-font) !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .game-card, .real-game, .bp12-game, .bp12-offer, .vice-game-tile,
    .rd-promo-card, .ron-campaign-carousel, #viceHeroSlider, .bv-hero,
    .game-search.surface, .mp-wallet-panel, .mp-activity-card, .mp-stat-card,
    .vip-hero, .vip-level
  ) {
    border-radius: var(--refresh-radius) !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .game-card h3, .game-card strong, .real-game h3, .bp12-game h3,
    .rd-promo-title, .mp-stat-card strong, .vip-level h3
  ) {
    font-family: var(--refresh-font) !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    letter-spacing: -.01em !important;
  }

  :where(body.member-site, body.bg-body.font-body) :is(
    .game-search input, .game-search select, .mp-wallet-panel input,
    .mp-wallet-panel select, .mp-wallet-panel textarea
  ) {
    font-size: 15px !important;
    line-height: 1.4 !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  @media (max-width: 620px) {
    :where(body.member-site, body.bg-body.font-body) {
      --refresh-radius: 13px;
      --refresh-section-gap: 26px;
    }

    :where(body.member-site, body.bg-body.font-body) :is(
      .header-actions .btn, .bv-top .bv-login, .bv-top .bv-register
    ) {
      min-height: 40px !important;
      padding-inline: 11px !important;
      font-size: 12px !important;
    }

    :where(body.member-site, body.bg-body.font-body) :is(
      .game-search input, .game-search select, .mp-wallet-panel input,
      .mp-wallet-panel select, .mp-wallet-panel textarea
    ) {
      font-size: 16px !important;
    }

    :where(body.member-site, body.bg-body.font-body) :is(.mobile-nav a, .bv-mobile a) {
      font-size: 11px !important;
      font-weight: 600 !important;
      line-height: 1.2 !important;
    }
  }
}