/** Shopify CDN: Minification failed

Line 911:13 Unexpected "2"

**/
/*
 * art_player_v4_helpers.css
 * NYC Art Player v4 — Additive CSS helpers
 *
 * Sections:
 *  1. Filter bar (+ sticky in immersive mode)
 *  2. Map-only player state
 *  3. Hotspot marker colors
 *  4. Past hotspot — colorful at 90% opacity
 *  5. Timelapse flat player layout + fullscreen 360 button
 *  6. Layout helpers
 */

/* Filter bar: hidden by default, shown only in immersive mode via JS */
.apv4-filter-wrap {
  /* Phase 2: container itself is transparent; .apv4-master-bar is the pill */
  display: none;  /* JS overrides when immersive activates */
  background: transparent;
  border: none;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   1b. ART HEADER BLOCK (visible in normal view, hidden in immersive)
   ═══════════════════════════════════════════════════════════════ */

.apv4-art-header-block {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.apv4-headline {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: #111;
}

.apv4-subtitle {
  font-size: 0.95rem;
  color: #555;
  margin: 0 0 1.4rem;
  line-height: 1.5;
}

/* Start Tour button: black pill with red YouTube-style play icon */
.apv4-start-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.18s, transform 0.12s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.apv4-start-tour-btn:hover {
  background: #333;
  transform: scale(1.04);
}
.apv4-start-tour-btn:active { transform: scale(0.97); }
.apv4-play-icon-red {
  /* Red rounded-rectangle play badge — same family as pill play button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 26px;
  background: #ff0000;
  border-radius: 6px;
}
.apv4-play-icon-red svg {
  /* ensure white triangle is centered in the red rect */
  display: block;
  fill: #ffffff;
}

/* Close immersive X button — right end of filter bar */
.apv4-close-immersive {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  border: none;
  cursor: pointer;
  color: #222;
  font-size: 1rem;
  transition: background 0.15s;
  line-height: 1;
}
.apv4-close-immersive:hover { background: rgba(0,0,0,0.18); }

.apv4-filter-bar { display: none; } /* old class — no longer used in v5 */

/* ── Phase 2: Master floating pill bar ── */
.apv4-master-bar {
  /* Three-zone flex: [play | middle | close] */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  /* Pill shape */
  background: rgba(18, 18, 18, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 9999px;       /* fully rounded pill */
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  padding: 5px 6px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  min-width: 0;
}


/* ── Middle scrollable filter zone ── */
.apv4-bar-middle {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* These padding values create the breathing room inside the pill */
  padding: 0 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.apv4-bar-middle::-webkit-scrollbar { display: none; }

/* Vertical divider between groups */
.apv4-filter-div {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(0,0,0,0.15);
  border-radius: 1px;
  flex-shrink: 0;
}

/* PLAY button — primary action */
.apv4-play-btn { display: none; } /* old — no longer used in v5 */

/* ── YouTube-style red play button (left anchor of master bar) ── */
.apv4-yt-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 28px;
  background: #ff0000;
  border: none;
  border-radius: 6px;         /* rounded rectangle, not circle */
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-right: 6px;
  padding: 0;
}
.apv4-yt-play-btn:hover  { background: #cc0000; transform: scale(1.06); }
.apv4-yt-play-btn:active { transform: scale(0.95); }

.apv4-scope-group {
  display: flex;
  border: 1.5px solid currentColor;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.7;
}

.apv4-scope-btn {
  padding: 5px 13px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.18s;
  white-space: nowrap;
  outline: none;
}
.apv4-scope-btn + .apv4-scope-btn { border-left: 1px solid rgba(0,0,0,0.15); }
.apv4-scope-btn.apv4-active        { background: rgba(0,0,0,0.1); font-weight: 800; }

.apv4-filter-sep {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.35;
}

.apv4-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.18s;
  white-space: nowrap;
  user-select: none;
  outline: none;
  opacity: 0.5;
}
.apv4-type-btn.apv4-on           { opacity: 1; }
.apv4-type-btn.apv4-on.apv4-t-reel { color: #cc2222; border-color: #cc2222; background: rgba(204,34,34,0.08); }
.apv4-type-btn.apv4-on.apv4-t-360  { color: #a07800; border-color: #a07800; background: rgba(160,120,0,0.08); }
.apv4-type-btn.apv4-on.apv4-t-tl   { color: #1a7acc; border-color: #1a7acc; background: rgba(26,122,204,0.08); }
.apv4-type-btn.apv4-on.apv4-t-map  { color: #555;    border-color: #888;    background: rgba(0,0,0,0.06); }

/* Hide / Show All toggle button */
.apv4-toggle-btn {
  padding: 5px 13px;
  border: 1.5px solid rgba(0,0,0,0.2);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.18s;
  white-space: nowrap;
  outline: none;
}
.apv4-toggle-btn:hover { background: rgba(0,0,0,0.08); }

.apv4-count {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.35;
  font-family: inherit;
  white-space: nowrap;
  display: none; /* hidden — clean bar */
}

/* Immersive mode: filter bar is pushed to position:fixed z-index:10001 by JS.
   The artwork-frame (position:fixed; top:0) needs to start BELOW the filter bar.
   We push it down by the filter bar height (approximately 46px / 3rem). */
/* Phase 2: pill bar floats OVER the content — artwork-frame uses full viewport.
   The 46px offset is no longer needed. */
body.immersive-active .artwork-frame.immersive-active {
  top: 0 !important;
  height: 100vh !important;
}
/* ═══════════════════════════════════════════════════════════════
   2. MAP-ONLY PLAYER STATE
   The old engine adds .type-map-only on controlPanel
   and .mode-map-only on playerBody when loc.type === 'map-only'
   ═══════════════════════════════════════════════════════════════ */

/* Hide the video card in map-only mode */
.player-body.mode-map-only .video-card {
  display: none !important;
}
/* Expand the map card to fill the space */
.player-body.mode-map-only .map-card {
  flex: 1 !important;
  min-height: 300px !important;
  height: 100% !important;
}
.player-body.mode-map-only .map-frame {
  min-height: 300px !important;
}
/* Mobile: map-only always shows map, no toggle */
@media (max-width: 768px) {
  .player-body.mode-map-only .player-card.map-card {
    display: flex !important;
  }
  .player-body.mode-map-only .mobile-toggle-btn {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   3. HOTSPOT MARKER COLORS
   Applied post-init by adapter's patchMarkers()
   ═══════════════════════════════════════════════════════════════ */

/* Standalone reel → red */
.hotspot.hp-reel {
  background: #e03333 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.75) !important;
}
.hotspot.hp-reel:hover,
.hotspot.hp-reel.active {
  box-shadow: 0 0 0 8px rgba(224,51,51,0.28) !important;
}

/* Standalone timelapse → blue */
.hotspot.hp-timelapse {
  background: #2a80cc !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.75) !important;
}
.hotspot.hp-timelapse:hover,
.hotspot.hp-timelapse.active {
  box-shadow: 0 0 0 8px rgba(42,128,204,0.28) !important;
}

/* Standalone map-only → near-black */
.hotspot.hp-map-only {
  background: #222 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.hotspot.hp-map-only:hover {
  box-shadow: 0 0 0 6px rgba(255,255,255,0.2) !important;
}
/* Map-only selected: strong visible white ring */
.hotspot.hp-map-only.active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(255,255,255,0.22) !important;
  border-color: #fff !important;
}

/* Child markers — smaller circles, symbol-only text */
.hotspot.hp-child {
  width: 22px !important;
  height: 22px !important;
  font-size: 12px !important;
  border-width: 1.5px !important;
}
.hotspot.hp-child-360 {
  background: #ffd700 !important;
  color: #000 !important;
  border-color: rgba(255,255,255,0.75) !important;
}
.hotspot.hp-child-tl {
  background: #2a80cc !important;
  color: #fff !important;
}
.hotspot.hp-child-reel {
  background: #e03333 !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. PAST HOTSPOT — preserve type color, just slightly faded
   The base stylesheet sets past-hotspot grey with !important.
   We override here with higher specificity.
   ═══════════════════════════════════════════════════════════════ */

.hotspot.past-hotspot {
  background: #666 !important; /* fallback if no type class applied yet */
  opacity: 0.88 !important;
  filter: none !important;
  /* Keep text readable — overridden per type below */
  color: #ccc !important;
  border-color: #888 !important;
}
/* 360 past: yellow + BLACK text (not grey) */
.hotspot.past-hotspot.is-360,
.hotspot.past-hotspot.star-360,
.hotspot.past-hotspot.hp-child-360 {
  background: #ffd700 !important;
  color: #000 !important;     /* BLACK — must be higher specificity than #ccc */
  border-color: rgba(255,255,255,0.7) !important;
}
/* Reel past: dark red */
.hotspot.past-hotspot.hp-reel,
.hotspot.past-hotspot.hp-child-reel {
  background: #c02828 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
}
/* Timelapse past: dark blue */
.hotspot.past-hotspot.hp-timelapse,
.hotspot.past-hotspot.hp-child-tl {
  background: #1c5f99 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
}
/* Map-only past: keep dark */
.hotspot.past-hotspot.hp-map-only {
  background: #333 !important;
  color: #aaa !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. TIMELAPSE FLAT HLS PLAYER LAYOUT
   Large landscape display — player-body gets mode-timelapse-hls.
   ═══════════════════════════════════════════════════════════════ */

.player-body.mode-timelapse-hls {
  flex-direction: column !important;
  width: min(1100px, 95vw) !important;
  max-width: none !important;
  height: auto !important;
  gap: 0 !important;
}

/* Video card: large landscape 16:9, minimum 60vh tall */
.player-body.mode-timelapse-hls .video-card {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 60vh !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Map card: hide completely in timelapse (JS also hides it, this is belt-and-suspenders) */
.player-body.mode-timelapse-hls .map-card {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   5b. MAP-ONLY PLAYER LAYOUT
   Wide/square display — video card hidden, map card prominent.
   player-body gets mode-map-only.
   ═══════════════════════════════════════════════════════════════ */

.player-body.mode-map-only {
  flex-direction: column !important;
  width: min(420px, 60vw) !important;   /* same footprint as portrait reel card */
  max-width: none !important;
  height: auto !important;
  gap: 0 !important;
}

/* Show ONLY the map card for map-only, no video */
.player-body.mode-map-only .video-card {
  display: none !important;
}

/* Map card: square / wide aspect */
.player-body.mode-map-only .map-card {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 16px 16px 0 0 !important;
  display: block !important; /* override mobile hide */
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Map-only badge: black circle, white text */
.control-panel.type-map-only .badge {
  background: #222 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. LAYOUT HELPERS + WHITE ARTWORK BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

.apv4-section {
  position: relative;
  width: 100%;
}

/* Force artwork container background to white (base CSS uses #f4f4f4 grey) */
.artwork-frame,
.artwork-frame.immersive-active {
  background-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   6b. PROGRESS BAR TYPE COLORS
   renderBars() adds bar-type-{loc.type} class to each bar segment.
   Timelapse = blue, 360 = amber, default = white.
   ═══════════════════════════════════════════════════════════════ */

.bar.bar-type-timelapse-hls .bar-fill,
.bar.bar-type-timelapse-yt .bar-fill {
  background: #2a80cc !important; /* blue for timelapse */
}
.bar.bar-type-360 .bar-fill {
  background: #ffd700 !important; /* amber/gold for 360 */
}
.bar.bar-type-timelapse-hls,
.bar.bar-type-timelapse-yt {
  background: rgba(42,128,204,0.25) !important; /* blue track */
}
.bar.bar-type-360 {
  background: rgba(255,215,0,0.25) !important;  /* amber track */
}

/* Compensate for sticky filter bar height in immersive mode */
body.immersive-active .apv4-section {
  padding-top: 0;
}

.apv4-art-header {
  padding: 1.5rem 1.5rem 0.5rem;
  text-align: center;
}

/* artwork-frame must not clip hotspots */
.apv4-section .artwork-frame,
.apv4-section .artwork-content-wrapper {
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   7. FULLSCREEN BUTTON — 360 sphere viewer
   ═══════════════════════════════════════════════════════════════ */

#fullscreen360-btn {
  position: absolute;
  bottom: 46px;
  left: 12px;
  z-index: 20;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}
#fullscreen360-btn:hover {
  background: rgba(255,255,255,0.15);
}

/* In fullscreen: make the sphere canvas fill the entire screen */
#viewer-360:fullscreen,
#viewer-360:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
}
#viewer-360:fullscreen canvas,
#viewer-360:-webkit-full-screen canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Timelapse video container fullscreen */
.video-placeholder:fullscreen,
.video-placeholder:-webkit-full-screen {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-placeholder:fullscreen video,
.video-placeholder:-webkit-full-screen video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════
   8. MOBILE LAYOUT FIXES
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Filter bar: left-aligned on mobile (centered only on desktop) */
  .apv4-filter-bar {
    justify-content: flex-start;
    padding: 8px 10px;
  }

  /* MAP-ONLY: center the player composition on mobile.
     The map card is square and should fill the available width. */
  .player-body.mode-map-only {
    width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .player-body.mode-map-only .map-card {
    width: min(80vw, 80vw) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: unset !important;
    margin: 0 auto !important;
  }

  /* TIMELAPSE: remove black bands; size video to actual content */
  .player-body.mode-timelapse-hls {
    width: 100% !important;
    max-width: none !important;
    gap: 0 !important;
  }
  .player-body.mode-timelapse-hls .video-card {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: unset !important;  /* remove 60vh min on mobile */
    height: auto !important;
    border-radius: 0 !important;
  }
  /* The <video> itself should use object-fit:contain
     to show only the actual content without black padding bars */
  .player-body.mode-timelapse-hls .video-placeholder video {
    object-fit: contain !important;
    background: #000;
    width: 100% !important;
    height: 100% !important;
  }

  /* FULLSCREEN 360 — portrait mode on mobile */
  #viewer-360:fullscreen,
  #viewer-360:-webkit-full-screen {
    width: 100vw !important;
    height: 100svh !important;
    background: #000;
  }

  /* FULLSCREEN TIMELAPSE — landscape on mobile:
     rotate the container so video fills landscape screen */
  .video-placeholder:fullscreen,
  .video-placeholder:-webkit-full-screen {
    width: 100vw !important;
    height: 100svh !important;
    object-fit: contain;
  }
  .video-placeholder:fullscreen video,
  .video-placeholder:-webkit-full-screen video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PIC HOTSPOT — green color
   ═══════════════════════════════════════════════════════════════ */

/* Standalone PIC → green */
.hotspot.hp-pic {
  background: #2ca86e !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.75) !important;
}
.hotspot.hp-pic:hover,
.hotspot.hp-pic.active {
  box-shadow: 0 0 0 8px rgba(44,168,110,0.28) !important;
}

/* PIC past: darker green */
.hotspot.past-hotspot.hp-pic {
  background: #1e7a50 !important;
  color: #fff !important;
}

/* PIC filter pill */
.apv4-type-btn.apv4-on.apv4-t-pic {
  color: #4ecb87;
  border-color: #4ecb87;
  background: rgba(78,203,135,0.12);
}

/* Hide old engine close X — pill bar is the only close path */
.player-close-btn { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   PHASE 2 — MASTER PILL BAR OVERRIDES
   All rules below override earlier definitions.
   Only affects v5 adapter (apv4-master-bar classes).
   ═══════════════════════════════════════════════════════════════ */

/* Hide old close button — pill bar is now the only close path */
.apv4-close-immersive { display: none !important; }
/* Hide old engine close X */
.player-close-btn { display: none !important; }

/* ── Master pill bar ── */
.apv4-master-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  background: rgba(14, 14, 14, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: 0 6px 36px rgba(0,0,0,0.60), 0 1px 0 rgba(255,255,255,0.05) inset;
  padding: 5px 6px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

/* ── Red YouTube-style play button — left anchor ── */
.apv4-yt-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 28px;
  background: #ff0000;
  border: none;
  border-radius: 7px;       /* rounded rectangle */
  cursor: pointer;
  transition: background 0.14s, transform 0.10s;
  margin-right: 7px;
  padding: 0;
}
.apv4-yt-play-btn:hover  { background: #cc0000; transform: scale(1.07); }
.apv4-yt-play-btn:active { background: #aa0000; transform: scale(0.95); }

/* ── Scrollable middle zone ── */
.apv4-bar-middle {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.apv4-bar-middle::-webkit-scrollbar { display: none; }

/* ── Scope group (NEW / ALL) ── */
.apv4-bar-middle .apv4-scope-group {
  display: flex;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 1;
}
.apv4-bar-middle .apv4-scope-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.60);
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background 0.16s, color 0.16s;
  font-family: inherit;
}
.apv4-bar-middle .apv4-scope-btn.apv4-active {
  background: rgba(255,255,255,0.18);
  font-weight: 800;
  color: #fff;
}
.apv4-bar-middle .apv4-scope-btn + .apv4-scope-btn {
  border-left: 1px solid rgba(255,255,255,0.14);
}

/* ── Filter type pills ── */
.apv4-bar-middle .apv4-type-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.04em;
  transition: all 0.16s ease;
  flex-shrink: 0;
  font-family: inherit;
}
.apv4-bar-middle .apv4-type-btn:hover {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.09);
}
.apv4-bar-middle .apv4-type-btn.apv4-on { color: #fff; }
.apv4-bar-middle .apv4-type-btn.apv4-on.apv4-t-reel {
  color: #ff6b6b; border-color: #ff6b6b; background: rgba(255,107,107,0.14);
}
.apv4-bar-middle .apv4-type-btn.apv4-on.apv4-t-360 {
  color: #ffd166; border-color: #ffd166; background: rgba(255,209,102,0.14);
}
.apv4-bar-middle .apv4-type-btn.apv4-on.apv4-t-tl {
  color: #74bcff; border-color: #74bcff; background: rgba(116,188,255,0.14);
}
.apv4-bar-middle .apv4-type-btn.apv4-on.apv4-t-pic {
  color: #4ecb87; border-color: #4ecb87; background: rgba(78,203,135,0.14);
}
.apv4-bar-middle .apv4-type-btn.apv4-on.apv4-t-map {
  color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.3);
}

/* ── HIDE / SHOW toggle ── */
.apv4-bar-middle .apv4-toggle-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.65);
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s, color 0.16s;
  flex-shrink: 0;
  font-family: inherit;
}
.apv4-bar-middle .apv4-toggle-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ── Vertical divider inside middle ── */
.apv4-bar-middle .apv4-filter-div {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── Right close button — always white bg, black symbol ── */
.apv4-bar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #111;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  transition: background 0.14s, transform 0.10s;
  margin-left: 7px;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.30);
}
.apv4-bar-close:hover  { background: #f0f0f0; }
.apv4-bar-close:active { transform: scale(0.91); }

/* ═══════════════════════════════════════════════════════════════

/* ── Phase 2 Repair: Remove old bar space assumptions ── */

/* The pill floats — no reserved header space needed.
   Neutralize any outer wrapper that might be pushing the content down. */
.apv4-filter-wrap {
  /* Pill is inside this wrapper but the wrapper itself has no visual presence */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  /* Height: only the natural size of its floating child */
  height: auto !important;
}

/* Prevent any residual white background from the base styles
   leaking through during immersive mode */
body.immersive-active .apv4-section,
body.immersive-active .apv4-art-header-block {
  background: transparent !important;
}

/* Confirm player-close-btn is visually hidden but still clickable
   (we need it clickable for the staged-close to work via .click()) */
.player-close-btn {
  opacity: 0 !important;
  pointer-events: auto !important;  /* keep clickable */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  z-index: -1 !important;
}


   END PHASE 2 OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* ── Phase A button polish: yt-play-btn svg white fill + Start Tour badge gap ── */
.apv4-yt-play-btn svg { fill: #fff !important; display: block; }
.apv4-yt-play-btn { box-shadow: 0 1px 6px rgba(255,0,0,0.35); }

/* Ensure Start Tour badge SVG reads as white triangle in red rect */
.apv4-play-icon-red svg { fill: #ffffff !important; display: block; }

/* ── Right pill button — white bg / black symbol (always) ── */
.apv4-bar-close {
  background: #ffffff !important;
  color: #111 !important;
  border: none !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.28);
}
.apv4-bar-close:hover { background: #f0f0f0 !important; }

/* ══════════════════════════════════════════════════════════
   MINI REFINEMENT PASS — button polish
   ══════════════════════════════════════════════════════════ */

/* ── Right pill button: thicker X character ──
   Using a custom SVG-style via pseudo-content + font-weight,
   or simply a heavier Unicode X at a bigger size.            */
.apv4-bar-close {
  font-size: 0.95rem !important;   /* slightly larger */
  font-weight: 900 !important;     /* heaviest weight */
  letter-spacing: 0;
  /* Use the multiplication sign × is thinner — override to bold ✕ */
  font-family: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ── Left pill play button: pill-shaped (fully rounded) ──
   Change border-radius from 7px rect to a full pill shape
   so it visually nests into the outer dark pill bar.          */
.apv4-yt-play-btn {
  border-radius: 20px !important;  /* full pill → matches outer bar roundness */
  width: 38px !important;
  height: 26px !important;
  box-shadow: 0 1px 8px rgba(255, 0, 0, 0.40) !important;
}

/* ══════════════════════════════════════════════════════════
   CLUSTER 1 REPAIR — UI Consistency
   ══════════════════════════════════════════════════════════ */

/* ── 1a. Hotspot dot: hide only the visible marker content (number/text).
         DO NOT use font-size:0 on .hotspot — that breaks child rules and tooltip.
         Instead zero out only the textContent layer via color:transparent,
         while keeping data-label title tooltip via CSS ::after intact. ── */
.hotspot {
  color: transparent !important;        /* hides the number/letter text */
  text-shadow: none !important;         /* removes any text shadow */
}

/* Restore visible text on tooltip hover (::after uses data-label attr) */
.hotspot::after {
  color: #fff !important;               /* tooltip text stays white */
}

/* ── 1b. Child hotspot: also hide their symbol text.
         They have font-size:12px !important in base CSS — override color only. ── */
.hotspot.hp-child,
.hotspot.hp-child-360,
.hotspot.hp-child-tl,
.hotspot.hp-child-reel,
.hotspot.star-360 {
  color: transparent !important;
  text-shadow: none !important;
}

/* ── 2. Player nav arrows: strong circular badges ─────────── */
.nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #111 !important;
  border: none !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22) !important;
  flex-shrink: 0 !important;
  transition: background 0.14s, transform 0.10s !important;
}
.nav-btn:hover  { background: #f0f0f0 !important; transform: scale(1.10) !important; }
.nav-btn:active { transform: scale(0.93) !important; }

/* ── 3. Player bar colors by media type ───────────────────── */
/* REEL (type=normal): RED */
.bar.bar-type-normal .bar-fill { background: #e84040 !important; }
.bar.bar-type-normal            { background: rgba(232,64,64,0.20) !important; }
/* REEL no-video */
.bar.bar-type-reel-no-video .bar-fill { background: #b03030 !important; }
.bar.bar-type-reel-no-video            { background: rgba(176,48,48,0.20) !important; }
/* PIC: GREEN */
.bar.bar-type-pic .bar-fill { background: #27ae60 !important; }
.bar.bar-type-pic            { background: rgba(39,174,96,0.20) !important; }

/* ══════════════════════════════════════════════════════════════════
   FOCUSED REPAIR — parent hotspot numbers + player badge
   ══════════════════════════════════════════════════════════════════

   FIX 1: Parent hotspot number removal.
   The base CSS sets color:#fff !important on every .hotspot.hp-X rule
   (specificity 0,2,0). Our earlier .hotspot rule (0,1,0) lost to it.
   We now mirror EACH typed selector to force transparent at same specificity.
   The child hotspot selectors already work — we only patch parent types here.
   ── */

/* Active / unvisited parent types */
.hotspot.hp-reel     { color: transparent !important; }
.hotspot.hp-timelapse { color: transparent !important; }
.hotspot.hp-pic      { color: transparent !important; }
.hotspot.hp-map-only { color: transparent !important; }
.hotspot.is-360      { color: transparent !important; }

/* Past (visited) parent variants */
.hotspot.past-hotspot                    { color: transparent !important; }
.hotspot.past-hotspot.hp-reel           { color: transparent !important; }
.hotspot.past-hotspot.hp-child-reel     { color: transparent !important; }
.hotspot.past-hotspot.hp-timelapse      { color: transparent !important; }
.hotspot.past-hotspot.hp-child-tl       { color: transparent !important; }
.hotspot.past-hotspot.hp-pic            { color: transparent !important; }
.hotspot.past-hotspot.hp-map-only       { color: transparent !important; }
.hotspot.past-hotspot.is-360            { color: transparent !important; }
.hotspot.past-hotspot.star-360          { color: transparent !important; }
.hotspot.past-hotspot.hp-child-360      { color: transparent !important; }

/* ── FIX 2: Player badge — simple colored circle, no visible number.
   The engine writes badge.textContent = markerLabel || id.
   We suppress the text with color:transparent + font-size:0 (belt-and-suspenders)
   and give each media type its correct color background.               ── */

.badge {
  color: transparent !important;
  font-size: 0 !important;
  /* Shape/size/border-radius inherited from base CSS .badge rule — not overridden */
}

/* Badge color per media type — control-panel gets class "type-{loc.type}" */
.control-panel.type-normal        .badge { background: #e84040 !important; } /* REEL/YouTube = red   */
.control-panel.type-pic           .badge { background: #2ca86e !important; } /* PIC = green          */
.control-panel.type-360           .badge { background: #ffd700 !important; } /* 360 = amber          */
.control-panel.type-timelapse-hls .badge { background: #2a80cc !important; } /* DRAW/timelapse = blue */
.control-panel.type-timelapse-yt  .badge { background: #2a80cc !important; } /* DRAW/timelapse = blue */
.control-panel.type-reel-no-video .badge { background: #b03030 !important; } /* reel, no video = dark red */
/* map-only: already #222 from base CSS — just hide the text */
.control-panel.type-map-only      .badge { color: transparent !important; font-size: 0 !important; }

/* ── Mobile hotspot size consistency ─────────────────────────────────────────
   The base @media rule shrinks .hotspot to 15×15px on mobile (no !important).
   But .hotspot.hp-child { width:22px !important } in helpers overrides that,
   leaving children larger than parents on mobile.
   Fix: explicitly set children to 15px on mobile with !important.             */
@media (max-width: 768px) {
  .hotspot.hp-child,
  .hotspot.hp-child-360,
  .hotspot.hp-child-tl,
  .hotspot.hp-child-reel {
    width:  15px !important;
    height: 15px !important;
    border-width: 1px !important;
  }
}