/* Club TNB 1.1.34 — Shared white surfaces for the public Club application.
 * Loaded after the feature styles so every route uses the same surface system.
 * Product artwork, meaningful selection/status colors and redemption safeguards
 * keep their own styles. This file changes presentation only.
 */
:root {
  color-scheme: light;
  --background: #fff;
  --card: #fff;
  --popover: #fff;
  --border: #e6e6e6;
  --hy-paper: #fff;
  --tnb-white: #fff;
  --tnb-surface: #fff;
  --tnb-surface-line: #ededed;
  --tnb-shadow-card: 0 6px 22px rgb(0 0 0 / 9%), 0 1px 3px rgb(0 0 0 / 3%);
  --tnb-shadow-small: 0 3px 12px rgb(0 0 0 / 7%);
  --tnb-shadow-hover: 0 9px 26px rgb(0 0 0 / 12%);
  --tnb-shadow-dialog: 0 18px 60px rgb(0 0 0 / 20%);
}

html,
body,
#root,
#root .tnb-app,
#root .main-content,
#root .club-landing,
#root .tnb-menu,
#root .tnb-catalog-surface,
#root .hy-offers-section,
#root .tnb-app-footer {
  background: var(--tnb-surface);
}

/* The old warm page texture is decorative, not part of the product artwork. */
body::before {
  content: none;
  background: none;
  animation: none;
}

/* A single elevated header and navigation shell; no shadow per nav item. */
#root .tnb-app-header {
  background: var(--tnb-surface);
  border-color: transparent;
  box-shadow: var(--tnb-shadow-small);
}

#root .tnb-bottom-nav {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

#root .tnb-bottom-inner {
  background: var(--tnb-surface);
  border-color: transparent;
  box-shadow: var(--tnb-shadow-card);
  backdrop-filter: none;
}

#root .tnb-bottom-inner > button {
  box-shadow: none;
}

#root .tnb-bottom-inner > button[aria-current="page"] {
  background: #f0f0f0;
}

/* Page wrappers group content through spacing; cards provide the elevation. */
#root :is(.tnb-menu, .tnb-catalog-surface, .hy-offers-section) {
  border-color: transparent;
  box-shadow: none;
}

#root :is(
  .tnb-menu-product,
  .club-reward-card,
  .hy-offer-card,
  .coupon-card,
  .tnb-rewards-wallet,
  .tnb-engagement,
  .tnb-birthday-countdown,
  .tnb-reservation-card,
  .tnb-preferences-panel,
  .tnb-profile-completion,
  .club-no-rewards,
  .hy-empty
) {
  background: var(--tnb-surface);
  border-color: var(--tnb-surface-line);
  box-shadow: var(--tnb-shadow-card);
}

#root .original-home .selector-btn {
  background: var(--tnb-surface);
  border-color: var(--tnb-surface-line);
  box-shadow: var(--tnb-shadow-card);
}

/* Nested photo/copy areas are part of their card, not extra raised boxes. */
#root :is(
  .tnb-menu-product > .tnb-menu-card,
  .tnb-menu-card > img,
  .club-reward-photo,
  .club-reward-copy,
  .hy-offer-content,
  .hy-offer-visual,
  .hy-offer-copy,
  .hy-reward-preview-image
) {
  background: var(--tnb-surface);
  box-shadow: none;
}

#root .hy-reward-preview > button {
  background: var(--tnb-surface);
  border-color: var(--tnb-surface-line);
  box-shadow: var(--tnb-shadow-card);
}

/* Keep the approved photograph and its readable white text-side overlay. */
#root .club-entry-hero,
#root .club-entry-hero.club-wallet-hero.club-house-hero {
  background: var(--tnb-surface);
  border-color: transparent;
  box-shadow: var(--tnb-shadow-card);
}

#root .club-entry-hero.club-wallet-hero.club-house-hero::before {
  background: linear-gradient(90deg, #ffffffb3 0%, #ffffff80 30%, #ffffff2b 48%, transparent 64%);
}

#root .club-house-hero .club-wallet-balance {
  background: var(--tnb-surface);
  border-color: var(--tnb-surface-line);
  box-shadow: var(--tnb-shadow-small);
}

/* Tier headings and informational containers share the same white treatment. */
#root .tnb-reward-tier-heading,
#root .tnb-rewards-local-notice,
#root .tnb-menu-club,
#root .hy-rewards-to-offers,
#root .tnb-ranking-month,
#root .tnb-ranking-choice,
#root .tnb-ranking-empty,
#root .tnb-ranking-auth,
.hy-account-dialog .hy-account-pass,
.hy-account-dialog .email-access,
.tnb-ranking-confirmation .tnb-ranking-confirmation-score {
  background: var(--tnb-surface);
  border-color: var(--tnb-surface-line);
  box-shadow: var(--tnb-shadow-small);
}

/* The empty battle state sits on the dark illustrated banner with light text. */
#root .tnb-battle .tnb-ranking-empty {
  background: transparent;
  border: 0;
  box-shadow: none;
}

#root .tnb-rewards-local-notice {
  border-left-color: #ffcf09;
}

/* Do not replace the gift illustration or the battle's contrasting artwork. */
#root .tnb-birthday-gift {
  background: var(--tnb-surface);
  border-color: var(--tnb-surface-line);
  box-shadow: var(--tnb-shadow-card);
}

/* Dialogs may be mounted outside #root; preserve their backdrop and focus. */
.tnb-participation,
.hy-account-dialog,
.tnb-ranking-selector,
.tnb-ranking-confirmation {
  background: var(--tnb-surface);
  border-color: var(--tnb-surface-line);
  box-shadow: var(--tnb-shadow-dialog);
}

.tnb-participation .tnb-p-review {
  background: var(--tnb-surface);
  border-color: var(--tnb-surface-line);
  box-shadow: var(--tnb-shadow-small);
}

@media (hover: hover) {
  #root :is(.tnb-menu-product, .club-reward-card, .hy-offer-card):hover,
  #root .hy-reward-preview > button:hover,
  #root .original-home .selector-btn:hover {
    box-shadow: var(--tnb-shadow-hover);
  }
}

@media (max-width: 680px) {
  #root .club-entry-hero.club-wallet-hero.club-house-hero::before {
    background: linear-gradient(90deg, #fffffff0 0%, #ffffffde 30%, #ffffff8a 50%, #ffffff1f 69%, transparent 85%);
  }
}

/* Keep the existing welcome artwork readable on narrow phones. */
@media (max-width: 480px) {
  #root .original-home .hero-block {
    padding: 12px 18px;
    font-size: clamp(18px, 5.5vw, 26px);
  }

  #root .original-home .hero-block.mustard {
    font-size: clamp(12px, 4vw, 17px) !important;
  }
}