/* Theme vars */
:root{
  --imu-gold:#e6ce68;
  --imu-black:#0f1014;
  --imu-stroke: rgba(255,255,255,.12);
  --imu-card-w:300px;
  --imu-card-caption-h:48px;
  /* Fixed rail height so short rows don't look "short" */
  --imu-rail-min-h: calc((var(--imu-card-w) * 0.5625) + var(--imu-card-caption-h) + 18px);
}

/* Neon hover (match main page selected vibe): dark bg, white text, neon-blue outline) */
:root{
  --imu-neon:#33ccff;
  --imu-neon-glow: rgba(51, 204, 255, .35);
}

/* ===== Site-wide button style (jet black base, thin gold border) ===== */
.imu-btn,
button,
a.button,
a.wp-block-button__link,
input[type=button],
input[type=submit],
.button {
  background: var(--imu-black);
  color: var(--imu-gold);
  border: 1px solid var(--imu-gold);
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .05s ease;
}



/* Global buttons/links hover */
.imu-btn:hover,
button:hover,
a.button:hover,
a.wp-block-button__link:hover,
input[type=button]:hover,
input[type=submit]:hover,
.button:hover {
  background: var(--imu-black) !important;
  color: #fff !important;
  border-color: var(--imu-neon) !important;
  box-shadow: 0 0 0 3px var(--imu-neon-glow);
}



/* Global scrollbar styling + stable gutter so content doesn't shift */
html{
  scrollbar-color: var(--imu-gold) var(--imu-black);
  scrollbar-width: thin;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--imu-black)}
*::-webkit-scrollbar-thumb{background:var(--imu-gold);border-radius:10px;border:2px solid var(--imu-black)}
*::-webkit-scrollbar-thumb:hover{background:#cfb74f}

/* Player frame */
.imu-embed-wrap{position:relative;width:100%;padding-top:50.625%;background:#000;border:1px solid var(--imu-stroke);border-radius:12px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.35)}
.imu-embed-wrap>iframe{position:absolute;inset:0;width:100%;height:100%}

/* Overlay (UPDATED) */
.imu-overlay{position:absolute;inset:0;pointer-events:none}
.imu-overlay a{
  position:absolute;
  top:12px;           /* top-right placement for QR */
  right:12px;
  display:inline-block;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:6px;
  pointer-events:auto;
}
.imu-overlay img{display:block;max-width:160px;height:auto;border-radius:8px}
.imu-ticker{
  position:absolute;
  left:0; right:0;
  bottom:8px;         /* small gap from bottom of screen */
  height:34px; line-height:34px;
  background:linear-gradient(90deg,rgba(15,16,20,.85),rgba(15,16,20,.55));
  color:var(--imu-gold);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  padding-left:10px;
}
.imu-ticker::after{content:attr(data-text);position:absolute;left:100%;padding-left:50px;white-space:nowrap;animation:imu-ticker-move 18s linear infinite}
@keyframes imu-ticker-move{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Frosted glass */
.imu-glass{background:rgba(255,255,255,.06);backdrop-filter:saturate(140%) blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:12px}

/* Watch Live */
.imu-watch-live{position:relative}
.imu-live-header{display:flex;align-items:center;justify-content:space-between;gap:14px}
.imu-now-playing{margin:0;color:#fff;font-weight:800}
.imu-select,.imu-search{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#1a1c22;color:var(--imu-gold);min-width:240px}

/* Guide */
.imu-guide-title{color:var(--imu-gold)}
.imu-guide-grid{display:grid;gap:8px}
.imu-guide-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(15,16,20,.55)}
.imu-guide-row.imu-guide-head{font-weight:700;background:rgba(15,16,20,.7)}

/* Top bar (sections) */
.imu-toprow{max-width:1632px; margin:0 auto 10px}
.imu-topbar{display:flex;align-items:center;justify-content:center;gap:12px}
.imu-sections-box{display:flex;align-items:center;padding:8px 10px}
.imu-browse-sections {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  justify-content: flex-start;
  padding: 0 12px;
  -webkit-overflow-scrolling: touch;
}

.imu-browse-sections::-webkit-scrollbar {
  height: 6px;
}

.imu-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}

/* Tabs */
.imu-tab{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#0f1014;color:var(--imu-gold);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.imu-tab.active{background:#1a1c22}

/* Section panels / rows */
/* ==================== SECTION PANELS / ROWS — FINAL MOBILE FIX (DEC 2025) ==================== */
.imu-browse {
  overflow-x: visible !important;   /* THIS WAS THE KILLER — REMOVE HIDDEN */
}

.imu-rows {
  margin-top: 10px;
  padding: 0 8px;
  box-sizing: border-box;
}
.imu-section-panel{display:none}
.imu-section-panel.active{display:block}
.imu-row{margin:16px 0}
.imu-row-box {
  padding: 12px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: visible !important;   /* ← UNCLIPS CAROUSEL */
  background: transparent;       /* ← removes visual box that tricks the eye */
}

/* Desktop: restore max-width only on large screens */
@media (min-width: 901px) {
  .imu-row-box {
    max-width: 1632px;
    background: rgba(15,16,20,.55);   /* optional: keep frosted look on desktop */
  }
}
.imu-row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.imu-row-title{margin:0;color:var(--imu-gold)}

/* Rails */
.imu-rail-wrap{
  position:relative;
  width:100%;
  overflow:visible;
  min-height: var(--imu-rail-min-h);
}
.imu-card-rail {
  position: relative;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 12px 16px 12px;   /* left/right padding = card gap */
  scroll-behavior: smooth;
  justify-content: flex-start;
  box-sizing: border-box;
  scrollbar-gutter: stable;
  min-height: var(--imu-rail-min-h);
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 12px;
  overscroll-behavior-x: contain; /* prevents pull-to-refresh bounce */
}

.imu-card-rail::-webkit-scrollbar {
  height: 6px;
}


/* DEPRECATED OVAL ARROWS — ensure they never appear */
.imu-rail-prev,
.imu-rail-next{ display:none !important; }

/* Cards */
.imu-card{
  flex: 0 0 var(--imu-card-w);
  min-width:var(--imu-card-w);
  width:var(--imu-card-w);
  border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0f1014;color:var(--imu-gold);
  cursor:pointer;display:flex;flex-direction:column;overflow:hidden;text-align:left;
  transition:background .15s,color .15s,border-color .15s
}
.imu-card-thumb{ position:relative;width:100%; aspect-ratio: 16 / 9; background:#000; }
.imu-card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imu-thumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:12px;background:#111}
.imu-card-caption{padding:8px 10px;min-height:var(--imu-card-caption-h)}
.imu-card-title{font-size:13px;font-weight:700;display:block;line-height:1.25;color:#e9e9e9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Ghost placeholders */
.imu-card.is-ghost{opacity:.35; pointer-events:none}
.imu-card.is-skel .imu-thumb-ph{opacity:.75}

.imu-empty{color:#aaa;font-style:italic;padding:8px}

/* GOLD-on-BLACK HOVER — cards + buttons */
.imu-card:hover,
.imu-btn:hover,
.imu-tab:hover{
  background:var(--imu-gold);
  color:var(--imu-black);
  border-color:var(--imu-gold);
}
.imu-card:hover .imu-card-title{color:var(--imu-black)}

/* Header profile button: keep label on one line */
.imu-header .imu-btn{
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 116px;
  padding: 10px 14px;
}
@media (max-width: 420px){
  .imu-header .imu-btn{
    font-size: 0.9rem;
    padding: 8px 12px;
  }
}

/* Keep in sync with neon hover above */
a.button:hover,
a.wp-block-button__link:hover,
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
.button:hover{
  background: var(--imu-black) !important;
  color: #fff !important;
  border-color: var(--imu-neon) !important;
  box-shadow: 0 0 0 3px var(--imu-neon-glow);
}


/* Debug */
.imu-debug{margin-top:6px;border-left:3px solid var(--imu-gold);padding:6px 10px;background:rgba(230,206,104,.08);border-radius:8px}

/* Modal */
.imu-modal{display:none;position:fixed;inset:0;z-index:9999}
.imu-modal.show{display:block}
.imu-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}
/* ==================== PLAYER POP-UP — FINAL: NO HEADER OVERLAP, PERFECT ON DESKTOP & MOBILE ==================== */
.imu-modal-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  width: 94%;
  margin: 0 auto;
  background: #0f1014;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
}

/* Desktop: starts well below header, scrollable, no overlap */
@media (min-width: 901px) {
  .imu-modal-inner {
    margin-top: 90px !important;           /* ← BIG nudge down to clear site header */
    margin-bottom: 40px !important;
    max-height: calc(100vh - 100px) !important; /* generous space top + bottom */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile: starts immediately below header, fully scrollable */
@media (max-width: 900px) {
  .imu-modal-inner {
    width: 96% !important;
    max-width: none !important;
    margin: 80px auto 20px !important;    /* ← 80px top gap = starts below mobile header */
    padding: 14px !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 20px !important;
  }
}
.imu-modal-headline{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin:12px 0 6px;
}
.imu-modal-headline h3{margin:0;color:#fff}
.imu-modal-min{border:1px solid rgba(255,255,255,.2);background:#0f1014;color:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.imu-modal-restore{display:none;position:absolute;top:6px;right:6px;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:16px;cursor:pointer;border-radius:6px;padding:4px 6px}
.imu-modal-close{position:absolute;top:10px;right:12px;border:0;background:transparent;color:#fff;font-size:22px;cursor:pointer}
.imu-modal-player{position:relative;width:100%;padding-top:0;background:#000;margin-bottom:12px}
.imu-modal-player .imu-embed-wrap{width:90%;margin:0 auto;border-radius:12px;overflow:hidden}

/* Meta + suggest */
.imu-modal-meta{margin-top:8px;margin-bottom:12px}
.imu-modal-meta p{margin:6px 0}
#imu-modal-desc{color:#fff;font-size:14px}
.imu-modal-credits{color:#bfbfbf}
.imu-modal-suggest{margin-top:16px;padding:12px}
.imu-modal-suggest h4{margin:0 0 8px;color:var(--imu-gold)}

/* Minimized PiP */
.imu-modal.is-min{pointer-events:none}
.imu-modal.is-min .imu-modal-backdrop{display:none}
/* ==================== MINIMIZED PLAYER — DESKTOP ONLY — FINAL & PERFECT ==================== */
@media (min-width: 901px) {
  .imu-modal.is-min .imu-modal-inner {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    bottom: 20px !important;     /* starts in bottom-right */
    right: 20px !important;
    width: 420px !important;
    height: auto !important;
    min-height: 280px !important;
    max-height: 90vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
    cursor: move !important;
    pointer-events: auto !important;
    background: #0f1014 !important;
    transition: none !important;
    z-index: 9999 !important;
  }

  /* Hide everything except player + top bar */
  .imu-modal.is-min .imu-modal-meta,
  .imu-modal.is-min .imu-modal-suggest,
  .imu-modal.is-min .imu-modal-close,
  .imu-modal.is-min .imu-modal-headline,
  .imu-modal.is-min .imu-title-row,
  .imu-modal.is-min .imu-min-bar {
    display: none !important;
  }

  /* Player fills the box perfectly */
  .imu-modal.is-min .imu-modal-player {
    margin: 0 !important;
    padding: 0 !important;
    height: calc(100% - 62px) !important;
  }

  .imu-modal.is-min .imu-modal-player .imu-embed-wrap {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 0 16px 16px !important;
  }

  /* Top bar pinned to top */
  .imu-modal.is-min #imu-player-topbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 62px !important;
    border-radius: 16px 16px 0 0 !important;
    pointer-events: auto !important;
  }

  /* Clean restore button */
  .imu-modal.is-min .imu-modal-restore {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid var(--imu-gold);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    font-size: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
  }
}
.imu-modal.is-min .imu-modal-player{padding-top:0}
.imu-modal.is-min .imu-modal-player .imu-embed-wrap{width:100%}
.imu-modal.is-min .imu-modal-meta,
.imu-modal.is-min .imu-modal-suggest,
.imu-modal.is-min .imu-modal-close,
.imu-modal.is-min .imu-modal-headline{display:none}
.imu-modal.is-min .imu-modal-restore{display:block}
.imu-min-bar{display:none;position:absolute;top:6px;left:6px;right:6px;z-index:2;align-items:center;gap:8px}
.imu-min-title{color:#fff;font-weight:700;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imu-min-back{border:1px solid var(--imu-gold);background:rgba(0,0,0,.55);color:#fff;border-radius:8px;padding:4px 8px;cursor:pointer}
.imu-modal.is-min .imu-min-bar{display:flex}

/* ===== Hide custom bottom slider; use native scrollbar instead ===== */
.imu-rail-controls{ display:none !important; }

/* Desktop: widen carousel viewport by 20% and center it */
@media (min-width: 901px){
  .imu-rows .imu-card-rail{
    max-width: calc(((var(--imu-card-w) * 3) + (2 * 12px)) * 1.2);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Search dropdown */
.imu-header-search{position:relative}
.imu-search-dd{
  position:absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background:#0f1014;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  max-height:60vh;
  overflow:auto;
  z-index:1000;
  padding:6px;
  display:none;
}
.imu-search-dd.show{display:block}
.imu-sug{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.1);
  background:transparent;
  color:#e9e9e9;
  border-radius:10px;
  padding:8px;
  cursor:pointer;
}
.imu-sug + .imu-sug{margin-top:6px}
.imu-sug:hover, .imu-sug.active{
  background:var(--imu-gold);
  color:var(--imu-black);
  border-color:var(--imu-gold);
}
.imu-sug-thumb{
  width:56px; height:32px; border-radius:6px; overflow:hidden; flex:0 0 56px; background:#111; display:flex; align-items:center; justify-content:center;
}
.imu-sug-thumb img{width:100%; height:100%; object-fit:cover}
.imu-sug-title{display:block; font-weight:700; line-height:1.25}
.imu-sug-meta{display:block; opacity:.8; font-size:12px}

/* Mobile */
/* ==================== MOBILE CAROUSEL — FINAL & ABSOLUTELY PERFECT (JAN 2026) ==================== */
@media (max-width: 900px) {
  .imu-select,
  .imu-search {
    min-width: unset;
    width: 100%;
  }

  .imu-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .imu-modal-inner {
    margin: 0;
    min-height: 100%;
    border-radius: 0;
    max-height: none;
  }

  .imu-modal.is-min .imu-modal-inner {
    width: 86vw;
  }

  /* CRITICAL: Make .imu-row-box full-width like top sections bar */
  .imu-row-box {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 8px 8px 8px !important; /* Match .imu-rows outer padding */
    background: transparent;
    border-radius: 0;
    overflow: visible !important;
    box-sizing: border-box;
  }

  /* Make rail wrap full width with exact same padding as top bar */
  .imu-rail-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: visible !important;
  }

  /* CARD RAIL — identical behavior to .imu-browse-sections */
  .imu-card-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 12px 20px 12px !important;
    scroll-padding: 0 12px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-height: var(--imu-rail-min-h);
  }

  .imu-card-rail::-webkit-scrollbar {
    height: 6px;
    background: transparent;
  }

  .imu-card-rail::-webkit-scrollbar-thumb {
    background: var(--imu-gold);
    border-radius: 3px;
  }

  /* CARD WIDTH — perfect fit, last card fully visible */
  .imu-card,
  .imu-card-rail .imu-card {
    flex: 0 0 calc(81vw - 32px) !important; /* 12px left + 12px right padding + gap */
    min-width: calc(81vw - 32px) !important;
    max-width: calc(81vw - 32px) !important;
    width: calc(81vw - 32px) !important;
    scroll-snap-align: start !important;
  }

  .imu-card-thumb {
    aspect-ratio: 16 / 9;
  }

  .imu-card {
    --imu-card-w: unset !important;
    flex-shrink: 0 !important;
  }
}

/* ==================== PLAYER MODAL — WATCH NEXT MINI CAROUSEL — FULLY SCROLLABLE + VISIBLE GOLD SLIDER (MAY 2026) ==================== */
@media (max-width: 900px) {
  .imu-modal-suggest {
    margin: 16px 8px 8px 8px !important;
    padding: 14px 10px 44px 10px !important;   /* extra room for visible scrollbar */
    background: rgba(15, 16, 20, 0.75) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px !important;
    overflow: visible !important;
    width: calc(100% - 16px) !important;
    max-width: none !important;
    box-sizing: border-box;
    position: relative;
  }

  .imu-modal-suggest h4 {
    margin: 0 0 14px 4px !important;
    font-size: 17px !important;
    font-weight: 800;
    color: var(--imu-gold);
  }

  #imu-modal-suggest-rail {
    display: flex !important;
    gap: 12px;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 12px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--imu-gold) rgba(15,16,20,.8);
    padding: 4px 12px 40px 12px !important;   /* huge bottom padding → scrollbar always visible */
    margin: 0 !important;
    width: 100% !important;
    background: transparent;
    min-height: 180px;
  }

  /* FULLY VISIBLE GOLD SCROLLBAR – identical to main browse rows */
  #imu-modal-suggest-rail::-webkit-scrollbar {
    height: 10px;
    background: rgba(15,16,20,.8);
    border-radius: 5px;
  }

  #imu-modal-suggest-rail::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 12px;
  }

  #imu-modal-suggest-rail::-webkit-scrollbar-thumb {
    background: var(--imu-gold);
    border-radius: 5px;
    border: 2px solid rgba(15,16,20,.8);
  }

  #imu-modal-suggest-rail .imu-card {
    flex: 0 0 calc(81vw - 48px) !important;
    min-width: calc(81vw - 48px) !important;
    max-width: calc(81vw - 48px) !important;
    width: calc(81vw - 48px) !important;
    scroll-snap-align: start !important;
  }
}

/* Prevent modal body from scrolling when Watch Next is active */
@media (max-width: 900px) {
  .imu-modal-inner {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stop horizontal overflow from breaking layout */
  .imu-modal-inner,
  .imu-modal-suggest,
  #imu-modal-suggest-rail {
    overflow-x: hidden !important;
  }
}


/* Banner: solid black, thin gold border, gold text */
.imu-ticker{
  background: var(--imu-black);              /* solid black */
  border: 1px solid var(--imu-gold);         /* thin gold border */
  color: var(--imu-gold);                    /* gold text */
  border-radius: 8px;                        /* subtle rounding */
  height: 36px; line-height: 36px;
  bottom: 12px; padding: 0 12px;
}

/* (Optional) duplicate text so the loop feels continuous */
.imu-ticker::after{
  content: attr(data-text) "   •   " attr(data-text);
}

/* QR badge: small rounded square, thin gold outline, top-right */
.imu-overlay a{
  top: 12px; right: 12px;
  background: rgba(0,0,0,.75);
  border: 1px solid var(--imu-gold);         /* gold outline */
  border-radius: 12px;
  padding: 6px;
}

/* Ensure the QR itself renders as a neat square with rounded corners */
.imu-overlay img{
  width: 120px; height: 120px;               /* small square */
  max-width: none;
  border-radius: 8px;                         /* rounded edges */
  object-fit: contain;
}


/* Optional: show a small LOCKED badge on gated cards */
.imu-card.locked .imu-card-caption::after {
    content: "🔒 UNLOCK";
    display: block;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(0,0,0,.75);
    border: 1px solid var(--imu-gold);
    color: var(--imu-gold);
    font-weight: 800;
    font-size: 11px;
    border-radius: 8px;
    width: fit-content;
}
.imu-card.locked .imu-card-thumb::before {
    content: "🔒";
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,.75);
    border: 1px solid var(--imu-gold);
    color: var(--imu-gold);
    font-size: 14px;
    padding: 4px;
    border-radius: 6px;
    z-index: 10; /* Ensure lock is above thumbnail image */
}

/* ===== Checkout Modal (Web2/Web3) ===== */
.imu-pay-modal{display:none;position:fixed;inset:0;z-index:10000}
.imu-pay-modal.show{display:block}
.imu-pay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.imu-pay-dialog{
  position:relative;z-index:1;max-width:980px;margin:5vh auto;background:#0f1014;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;max-height:90vh;overflow:auto
}
/* Close & Back — 30% smaller + styled like site buttons */
.imu-pay-close{
  position:absolute;top:10px;right:12px;
  background: var(--imu-black);
  color: var(--imu-gold);
  border: 1px solid var(--imu-gold);
  border-radius: 10px;
  font-size: 15.4px;           /* 22px → ~15.4px (–30%) */
  line-height: 1;
  padding: 6px 8px;
  cursor:pointer;
}
.imu-pay-back{
  position:absolute;top:10px;left:12px;
  background: var(--imu-black);
  color: var(--imu-gold);
  border: 1px solid var(--imu-gold);
  border-radius: 10px;
  font-size: 12.6px;           /* 18px → ~12.6px (–30%) */
  line-height: 1;
  padding: 6px 10px;
  cursor:pointer;
}
.imu-pay-close:hover,
.imu-pay-back:hover{
  background: var(--imu-gold);
  color: var(--imu-black);
  border-color: var(--imu-gold);
}

.imu-pay-head h3{margin:4px 0 12px;color:#fff}
.imu-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .imu-pay-grid {
    grid-template-columns: 1fr;
  }
}
.imu-pay-details {
  grid-column: 1 / -1;
}

.imu-pay-card{
  border:1px solid rgba(255,255,255,.12);background:#121318;border-radius:12px;padding:12px;color:#e9e9e9
}
.imu-pay-card h4{margin:0 0 6px;color:var(--imu-gold)}
.imu-pay-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.imu-pay-card-head h4 {
    margin: 0;
}
.imu-pay-card-head .imu-pay-sub {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 4px;
}
.imu-pay-card-head .imu-btn {
    flex-shrink: 0;
}
.imu-pay-details .imu-pay-detail-line{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.12);padding:6px 0}
.imu-pay-details .k{opacity:.8}
.imu-pay-details .v{font-weight:700}
.imu-pay-mini{opacity:.75;font-size:12px;margin-top:8px}
.imu-pay-row{display:flex;flex-direction:column;margin:8px 0}
.imu-pay-row label{font-size:12px;opacity:.8;margin-bottom:4px}
.imu-pay-row input,.imu-pay-row select{
  padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#1a1c22;color:var(--imu-gold)
}
.imu-pay-note{margin-top:8px;color:#bbb;min-height:18px}
.imu-pay-qr{margin-top:10px;padding:10px;border:1px dashed rgba(255,255,255,.2);border-radius:10px}
.imu-pay-wait{margin-bottom:6px}
.imu-pay-deeplink{color:var(--imu-gold);text-decoration:underline}
.imu-pay-order-summary {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: #121318;
}
.imu-pay-order-summary h4 {
    margin: 0 0 8px;
    color: var(--imu-gold);
}
.imu-pay-methods {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    opacity: 0.8;
}
.imu-pay-order-summary .imu-pay-detail-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,.12);
}
.imu-pay-order-summary .k {
    opacity: 0.8;
}
.imu-pay-order-summary .v {
    font-weight: 700;
}

.imu-pay-qr {
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed rgba(255,255,255,.2);
    border-radius: 12px;
    text-align: center;
    background: rgba(15,16,20,.75);
}
.imu-pay-qr img {
    max-width: 240px;
    width: 100%;
    height: auto;
    border: 1px solid var(--imu-gold);
    border-radius: 8px;
    object-fit: contain;
}
.imu-pay-deeplink {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--imu-gold);
    color: var(--imu-black);
    border: 1px solid var(--imu-gold);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}
.imu-pay-deeplink:hover {
    background: #cfb74f;
    border-color: #cfb74f;
}
.imu-pay-wait {
    margin-bottom: 6px;
    color: var(--imu-gold);
    font-size: 14px;
}

/* Center only the Terms line inside the ORDER DETAILS box */
.imu-pay-details .imu-pay-mini{
  text-align: center;
}


.imu-btn-disabled{opacity:.5;pointer-events:none}

/* Watch Live gate overlay */
.imu-live-gate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.imu-live-gate-inner{padding:16px;text-align:center}
.imu-live-gate-lock{font-size:28px;margin-bottom:6px}
.imu-live-gate-text{color:#fff;margin-bottom:10px}

/* Lower the "Unlock Channel" gate on /watch-live */
.imu-watch-live .imu-live-gate,
.imu-watch-live #imu-live-gate {
  align-items: flex-start;                  /* stop vertical centering */
  padding-top: clamp(80px, 18vh, 280px);    /* push the box down */
}

@media (max-width: 900px){
  .imu-watch-live .imu-live-gate,
  .imu-watch-live #imu-live-gate {
    padding-top: clamp(56px, 14vh, 200px);  /* a bit less push on mobile */
  }
}


/* Locked badge is already supported by:
   .imu-card.locked .imu-card-thumb::after { ... } */

.imu-pay-web3-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001; /* Higher than main modal */
}
.imu-pay-web3-modal.show {
    display: block;
}

.imu-pay-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--imu-gold);
    font-size: 14px;
}
.imu-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--imu-gold);
    border-top: 3px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.imu-pay-note.success {
    color: var(--imu-gold);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    animation: pulse 1.5s ease-in-out;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

 .imu-pay-note.success {
        color: #39d353;
        font-weight: bold;
        text-align: center;
    }
    .imu-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #ffd36e;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        vertical-align: middle;
        margin-right: 8px;
    }
    .imu-pay-loading {
        display: none; /* Hidden by default, shown via JS */
        text-align: center;
        margin-top: 10px;
    }
    .imu-pay-loading.show {
        display: block;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    /* ===== Price chips / bubbles ===== */
.imu-section-title{
  margin: 10px 0 6px;
  color: var(--imu-gold);
  font-weight: 800;
}
.imu-pay-detail-block{
  padding-top: 8px;
}
/* Center the Prices title + chips */
.imu-section-title { 
  margin: 10px 0 6px; 
  color: var(--imu-gold); 
  font-weight: 800; 
  text-align: center; 
}
.imu-price-hint { 
  margin-top: 6px; 
  font-size: 12px; 
  opacity: .7; 
  text-align: center; 
}
.imu-price-bubbles{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 2px;
  justify-content: center;    /* center the chips */
}

/* Chips match the site-wide button look */
.imu-price-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--imu-gold);
  background: var(--imu-black);
  color: var(--imu-gold);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .05s ease;
}
.imu-price-chip .c{ opacity: .95; }
.imu-price-chip .p{ color: var(--imu-gold); }
.imu-price-chip:hover{
  background: var(--imu-gold);
  color: var(--imu-black);
  border-color: var(--imu-gold);
  transform: translateY(-1px);
}
.imu-price-chip.is-disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* Center modal section headings */
.imu-pay-head h3,
.imu-pay-card h4,
.imu-pay-order-summary h4 {
  text-align: center;
}

.imu-price-chip.is-disabled{
  opacity: .45;
  cursor: not-allowed;
}
.imu-price-empty{
  opacity: .7;
  font-style: italic;
}
.imu-price-hint{
  margin-top: 6px;
  font-size: 12px;
  opacity: .7;
}


/* Modal head action row (three buttons in one line) */
.imu-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 8px;
  -webkit-overflow-scrolling: touch;
}

/* ==================== MOBILE: ACTION BUTTONS (Favourites + Watch Next) – CENTERED ==================== */
@media (max-width: 900px) {
  .imu-head-actions {
    gap: 12px !important;
    justify-content: center !important;   /* Perfectly centered */
    flex-wrap: wrap;
    padding: 8px 12px;
  }

  .imu-head-actions .imu-btn,
  .imu-head-actions button {
    min-width: 100px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    flex: 1 1 45%;               /* Two buttons per row, centered */
    max-width: 48%;
    white-space: normal;
    line-height: 1.3;
  }
}

/* Ensure action buttons stay on one line and wrap text cleanly */
.imu-head-actions {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  .imu-head-actions {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .imu-head-actions::-webkit-scrollbar {
    display: none;
  }
}

/* Ensure all three buttons feel uniform */
.imu-head-actions .imu-btn,
.imu-head-actions button{
  height: 40px;             /* equal height */
  padding: 0 16px;          /* consistent padding */
  line-height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* Make "Browse & Listen" single line and a tad wider */
/* "Browse & Listen" button – hidden on mobile */
#imu-modal-min{
  min-width: 180px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  #imu-modal-min {
    display: none !important;   /* completely gone on mobile */
  }
}

/* ==== HOTFIX: Content Card + Modal Title Colors & Button Alignment ==== */

/* 1.1 Keep card titles white on hover */
.imu-card:hover .imu-card-title,
.imu-card:focus .imu-card-title {
  color: #fff !important;
}

/* 1.3 Keep the content title white after a card is opened (modal)  */
.imu-title-row h3,
#imu-modal-title,
#imu-min-title {
  color: #fff !important;
}
.imu-title-row h3:hover {
  color: #fff !important;
}

/* 1.2 Right-align the three action buttons in the modal header */
.imu-head-actions {
  justify-content: flex-end !important;
}

/* Make sure the action row can actually take the full width */
.imu-modal-headline {
  width: 100%;
}

/* (Optional) keep mobile tidy: still right-aligned but allow wrap */
@media (max-width: 640px){
  .imu-head-actions {
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* Add small gap between button row and title row */
.imu-title-row {
  margin-top: 8px; /* small gap */
}

.imu-card.is-disabled { pointer-events:none; opacity:.6; }
.imu-rail-disabling    { pointer-events:none; }


/* 1. Force player container to be a stacking root */
#imu-live-player,
#imu-modal-player {
    position: relative;   /* creates a new stacking context */
    z-index: 10;          /* above overlay (3) and background (1-2) */
}

/* 2. Make the iframe itself the topmost child */
#imu-live-player iframe,
#imu-modal-player iframe {
    position: relative;
    z-index: 11;          /* one step above its container */
    width: 100%;
    height: 100%;
    border: none;
}

/* 3. (Optional) guarantee overlay never climbs over the player */
.imu-bg-overlay {
    z-index: 3 !important;   /* keep it below player */
}

/* -------------------------------------------------
   1. Player container – new stacking root
   ------------------------------------------------- */
#imu-live-player,
#imu-modal-player {
    position: relative;      /* creates stacking context */
    z-index: 20;             /* well above any page background */
}

/* -------------------------------------------------
   2. Iframe – always on top of its own container
   ------------------------------------------------- */
#imu-live-player iframe,
#imu-modal-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 21;             /* one step above container */
    border: none;
}

/* -------------------------------------------------
   3. Overlay – *outside* the player, fixed z‑index
   ------------------------------------------------- */
.imu-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10 !important;   /* ALWAYS below player, above background */
}

/* Keep QR / ticker clickable */
.imu-overlay a,
.imu-overlay .imu-ticker { pointer-events: auto; }

@media (max-width: 720px) {
  #imu-modal-suggest-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 0 16px;
    -webkit-overflow-scrolling: touch;
  }

  #imu-modal-suggest-rail .imu-card {
    flex: 0 0 70vw;
    min-width: 70vw;
    scroll-snap-align: start;
  }

  #imu-modal-suggest-rail::-webkit-scrollbar {
    height: 6px;
  }

  /* Prevent body scroll when modal is open */
  body.modal-open {
    overflow: hidden;
  }
}

/* Ensure player content never gets hidden under the new top bar */
#imu-modal-player {
  padding-top: 70px !important;   /* matches the 62px bar + spacing */
  position: relative;
}

/* Top bar stays perfectly on top of iframe */
#imu-player-topbar {
  z-index: 999 !important;
}

/* Optional: slight shadow under top bar for depth */
#imu-player-topbar {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ==================== MINIMIZED PIP TITLE — 40% SMALLER + PERFECT ALIGNMENT ==================== */
.imu-modal.is-min .imu-min-title {
  font-size: 8px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
  padding: 0 4px !important;
}

/* Ensure title doesn't overflow the bar */
.imu-min-bar {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Ensure download button looks perfect on mobile */
@media (max-width: 900px) {
  #imu-download-btn {
    margin-top: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* FINAL MOBILE DOWNLOAD BUTTON — PERFECT CENTERING & TIGHT SPACING */
@media (max-width: 900px) {
  .imu-head-actions {
    gap: 10px !important;
    padding: 4px 12px !important;
  }

  /* Ensure the two existing buttons are slightly smaller and tighter */
  .imu-head-actions .imu-btn:not(#imu-download-btn) {
    flex: 1 1 48% !important;
    max-width: 48% !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
  }

  /* Download button row — perfect centering */
  .imu-head-actions > div:has(#imu-download-btn) {
    margin-top: 6px !important;
  }

  #imu-download-btn {
    margin: 0 auto !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }
}