/* fz-vip.css — VIP Club full-page screen (2026-07-11).
   Design source: prototype v2 L1111-1180 (VIP CLUB screen) — values copied verbatim.
   Converts #modal-vip from a dimmed centered dialog to the deep-sea FULL-PAGE form,
   same recipe as Account/Promotions/Wallet (see feedback_frenzy96_fullpage_modal_recipe):
   chrome header visible, ocean shows through, no dim overlay, content column centered.
   VIP uses a 1080px column (tier-card swipe rail needs the width; other screens use 560).
   <980 = fullscreen page (design is a full mobile screen, NOT a bottom-sheet).
   Mutual exclusion: modal-vip is already in fz-page-coordinator BACKDROP_PAGES. */

/* ── shared (both breakpoints): the screen owns the scroll, home is hidden ── */
body:has(#modal-vip.modal-backdrop.show) { overflow: hidden !important; }
body:has(#modal-vip.modal-backdrop.show) #apk-banner,
body:has(#modal-vip.modal-backdrop.show) .bs-container { visibility: hidden !important; }
#modal-vip #vip-content { max-height: none !important; overflow: visible !important; }

/* ── ≥980: transparent full-page under the 64px chrome header ── */
@media (min-width: 980px) {
  html body #modal-vip.modal-backdrop {
    position: fixed !important; inset: 64px 0 0 0 !important;
    background: transparent !important; padding: 0 !important;
    align-items: initial !important; justify-content: initial !important;
  }
  html body #modal-vip.modal-backdrop.show {
    display: block !important; z-index: 200 !important;
    background: transparent !important;
    overflow-y: auto !important; overflow-x: hidden !important;
  }
  html body #modal-vip .modal {   /* neutralize the dialog shell → pure content column */
    max-width: 1080px !important; width: 100% !important; margin: 0 auto !important;
    min-height: 100% !important; height: auto !important; max-height: none !important;
    background: transparent !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 24px 20px !important; animation: none !important;
  }
}

/* ── <980: fullscreen page with its own opaque ocean (design mobile = full screen) ── */
@media (max-width: 979.98px) {
  html body #modal-vip.modal-backdrop {
    position: fixed !important; inset: 0 !important; padding: 0 !important;
    align-items: initial !important; justify-content: initial !important;
    background: linear-gradient(180deg, rgba(9,38,50,0.94) 0%, rgba(4,14,22,0.98) 100%),
                url('/assets/img/bg/ocean.jpg') center / cover no-repeat !important;
  }
  html body #modal-vip.modal-backdrop.show {
    display: block !important; z-index: 200 !important;
    overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
  }
  html body #modal-vip .modal {
    max-width: none !important; width: 100% !important; margin: 0 !important;
    min-height: 100% !important; height: auto !important; max-height: none !important;
    background: transparent !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; animation: none !important;
    padding: 18px 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── page header: back chevron + gold display title (design L1113) ── */
#modal-vip .fzvip-top { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px; margin-bottom: 6px; }
#modal-vip .fzvip-back {
  width: 28px !important; height: 28px !important; min-height: 0 !important; padding: 0 !important;
  border-radius: 50%; background: rgba(7,8,13,.35); border: 1px solid rgba(210,240,255,.2);
  color: var(--fz-text-2, #A6B0BC); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
#modal-vip .fzvip-back::after { content: ""; position: absolute; inset: -8px; } /* ≥44px hit area */
#modal-vip .fzvip-back { position: relative; }
#modal-vip .fzvip-back:hover { border-color: var(--fz-cyan, #29B6E8); color: var(--fz-white, #fff); }
#modal-vip .fzvip-title {
  font-family: var(--fz-font-display, Oswald, Inter, sans-serif);
  font-size: clamp(26px, 4vw, 36px); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--fz-track-caps, .05em); color: var(--fz-gold, #F5C842); line-height: 1.05;
}

/* ── reduced motion: kill every VIP screen animation (rays/bubbles/sweep/shine/breathe…) ── */
@media (prefers-reduced-motion: reduce) {
  #modal-vip * { animation: none !important; }
}