/* frenzy96-fixes.css — 2026-06-01 batch UI fixes. Loaded LAST so it overrides.
   P3a: VIP/subpage header was display:block (back + h3 stacked → ~114px top blank).
   P3b: close (X) + back button restyled to match dark theme (Mz spec). */

/* ── P3a: compact single-row subpage header ── */
#pf3-subpage .pf3-subpage-header,
.pf-v4 .pf3-subpage-header,
.pf3-subpage-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #1e2e40 !important;
}
#pf3-subpage .pf3-subpage-header > h3,
.pf3-subpage-header > #pf3-subpage-title,
#pf3-subpage-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.2 !important;
}

/* ── P3b: profile close (X) — 28x28 dark circle (Mz spec) ── */
html body #modal-profile .pf-v3 .pf3-close,
html body #modal-profile .pf3-close,
.pf3-close {
  width: 28px !important;
  height: 28px !important;
  background: #252831 !important;
  border: 1px solid #3a3e4d !important;
  border-radius: 50% !important;
  color: #888 !important;
  top: 12px !important;
  right: 14px !important;
}
html body #modal-profile .pf-v3 .pf3-close:hover,
.pf3-close:hover {
  background: #2e3040 !important;
  color: #eee !important;
}
html body #modal-profile .pf-v3 .pf3-close svg,
.pf3-close svg {
  width: 13px !important;
  height: 13px !important;
}

/* ── back arrow in subpages — same circular dark treatment for consistency ── */
#pf3-subpage .pf3-back,
.pf3-subpage-header .pf3-back {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
  background: #252831 !important;
  border: 1px solid #3a3e4d !important;
  border-radius: 50% !important;
  color: #888 !important;
}
#pf3-subpage .pf3-back:hover { background: #2e3040 !important; color: #eee !important; }
#pf3-subpage .pf3-back svg { width: 16px !important; height: 16px !important; }

/* ── modal-vip (bundle-native VIP sheet) header fix — 2026-06-01 ──
   .modal is flex-column align-items:flex-end (gutter bug) + .flex class resolves
   to display:block (Tailwind inactive) → header shrinks to 68px & right-aligns →
   "VIP" + ✕ cramped top-right with big empty left. Fix: stretch + real flex row. */
#modal-vip .modal { align-items: stretch !important; padding-top: 14px !important; }
#modal-vip .modal > .flex.items-center.justify-between,
#modal-vip .modal > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}
#modal-vip .modal > div:first-child > h3 { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: #fff !important; }
#modal-vip [data-close="modal-vip"] {
  width: 32px !important; height: 32px !important; flex: 0 0 32px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: #252831 !important; border: 1px solid #3a3e4d !important; border-radius: 50% !important;
  color: #888 !important; font-size: 15px !important; line-height: 1 !important; padding: 0 !important;
}
#modal-vip [data-close="modal-vip"]:hover { background: #2e3040 !important; color: #eee !important; }

/* ─── APK download banner close button (2026-06-04) ───
   Was rendering as a full-height (44px) bar pinned to the right edge, covering the
   baked-in red DOWNLOAD button in Stanley's banner image. Force it to a small circle
   in the extreme top-right corner. Loaded last → wins over the stale stanley-header css. */
#apk-banner .apk-close,
#apk-banner #apk-close {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  left: auto !important;
  bottom: auto !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 0 !important;
  max-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 6 !important;
}
#apk-banner .apk-close:hover,
#apk-banner #apk-close:hover { background: rgba(0, 0, 0, 0.8) !important; }