/*
 * Oldies ref premium skin — shared background, top bar, footer, and inner-page panels.
 * Loaded for all public pages except ugfx bridge pages (games/chat/charts/etc.).
 * Homepage-only blocks (hero, schedule strip) use the same body.oldies-ref-premium; index also sets oldies-ref-premium-home.
 */

body.oldies-ref-premium {
  --r-cyan: #3cf0ff;
  --r-cyan-dim: rgba(60, 240, 255, 0.45);
  --r-orange: #ff8c32;
  --r-orange-deep: #e85d00;
  --r-pink: #ff5c8a;
  --r-gold: #ffd873;
  /* Lighter “glass” so background art + logo read through */
  --r-card: rgba(4, 10, 12, 0.38);
  --r-glass: rgba(0, 0, 0, 0.28);
}

/*
 * Full-page atmosphere: site background image (wood / lounge) + faint logo watermark.
 * Scrims stay light so the scene stays visible like the reference.
 */
body.oldies-ref-premium.oldies-premium {
  background-color: #050302 !important;
  /* Base photo: match legacy site.css — full width + viewport-tall (not cover/crop). */
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.22) 42%,
      rgba(0, 0, 0, 0.32) 100%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.38) 100%),
    url("/assets/images/logo.png"),
    url("/assets/images/background.png") !important;
  background-size: 100% 100%, 100% 100%, min(380px, 38vw), 100% 100vh !important;
  background-position: center, center, center 44%, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}
body.oldies-ref-premium.oldies-premium::before {
  opacity: 0.14 !important;
  background: radial-gradient(circle at 78% 16%, rgba(255, 110, 50, 0.12), transparent 38%),
    radial-gradient(circle at 22% 44%, rgba(60, 240, 255, 0.05), transparent 36%) !important;
}
body.oldies-ref-premium.oldies-premium::after {
  opacity: 0.06 !important;
}

/* Main column: one readable width, centered in the area right of the sidebar (index + ref pages) */
body.oldies-ref-premium .premium-page-wrap {
  box-sizing: border-box !important;
  width: min(1280px, calc(100vw - 246px - 28px)) !important;
  max-width: 1280px !important;
  margin: 104px 24px 28px
    calc(
      246px + max(0px, (100vw - 246px - 24px - min(1280px, calc(100vw - 246px - 28px))) / 2)
    ) !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Top bar — full width in content region, thin glass */
body.oldies-ref-premium .premium-topbar {
  left: 246px !important;
  right: 20px !important;
  width: auto !important;
  max-width: none !important;
  height: 72px !important;
  top: 14px !important;
  padding: 8px 20px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(60, 240, 255, 0.35) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 0 28px rgba(60, 240, 255, 0.04) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  gap: 20px !important;
}

body.oldies-ref-premium .premium-brand {
  min-width: 0 !important;
  gap: 12px !important;
}
body.oldies-ref-premium .premium-brand img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  box-shadow: 0 0 20px rgba(255, 100, 60, 0.55) !important;
}
body.oldies-ref-premium .premium-brand strong {
  font-family: "Pacifico", cursive !important;
  font-weight: 400 !important;
  font-size: clamp(0.92rem, 1.6vw, 1.18rem) !important;
  color: #ff7a8c !important;
  text-shadow: 0 0 16px rgba(255, 90, 120, 0.85), 0 0 32px rgba(255, 60, 80, 0.35) !important;
}
body.oldies-ref-premium .premium-brand small {
  color: #dceceb !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.92 !important;
}

body.oldies-ref-premium .premium-nav {
  gap: 18px !important;
  flex-wrap: wrap !important;
}
body.oldies-ref-premium .premium-nav a {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #c8f6f4 !important;
  opacity: 0.88 !important;
}
body.oldies-ref-premium .premium-nav a:hover {
  color: var(--r-orange) !important;
  text-shadow: 0 0 12px rgba(255, 140, 50, 0.55) !important;
}
body.oldies-ref-premium .premium-nav a.is-active {
  color: var(--r-cyan) !important;
  text-shadow: 0 0 14px rgba(60, 240, 255, 0.55) !important;
  box-shadow: 0 3px 0 0 var(--r-cyan) !important;
  opacity: 1 !important;
}

body.oldies-ref-premium .premium-badge {
  border: 1px solid rgba(255, 200, 80, 0.85) !important;
  color: var(--r-gold) !important;
  background: rgba(255, 140, 40, 0.12) !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  box-shadow: 0 0 18px rgba(255, 180, 60, 0.22) !important;
}

body.oldies-ref-premium .premium-avatar {
  width: 38px !important;
  height: 38px !important;
  border-color: var(--r-cyan-dim) !important;
}

/* ========== HERO (match ref: brick + wall neons | center copy | jukebox + 50s, clock inside) ========== */
body.oldies-ref-premium .premium-hero-card.ref-hero {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid rgba(60, 240, 255, 0.42) !important;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.55), 0 0 32px rgba(60, 240, 255, 0.08) !important;
  background: #020202 !important;
}

body.oldies-ref-premium .premium-hero-card.ref-hero::before {
  display: none !important;
}

body.oldies-ref-premium .ref-hero__scene {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Left: brick wall */
body.oldies-ref-premium .ref-hero__brickwall {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 46% !important;
  height: 100% !important;
  background-color: #0d0604 !important;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.65) 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 11px,
      rgba(0, 0, 0, 0.35) 11px,
      rgba(0, 0, 0, 0.35) 12px
    ),
    repeating-linear-gradient(
      90deg,
      #1a0f0c 0,
      #1a0f0c 28px,
      #120a08 28px,
      #120a08 30px,
      #160d0a 30px,
      #160d0a 58px,
      #0f0806 58px,
      #0f0806 60px
    ) !important;
  background-size: auto, auto, auto !important;
  box-shadow: inset -24px 0 48px rgba(0, 0, 0, 0.75) !important;
}

/* Right: jukebox scene */
body.oldies-ref-premium .ref-hero__jukebox-photo {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 58% !important;
  height: 100% !important;
  background-color: #050302 !important;
  background-image: linear-gradient(95deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.25) 28%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 35%, rgba(0, 0, 0, 0.75) 100%),
    url("/assets/images/hero-diner.jpg"),
    url("https://cdn.pixabay.com/photo/2015/04/20/13/03/jukebox-731076_1280.jpg") !important;
  background-size: cover, cover, cover, cover !important;
  background-position: center, center, 70% center, 65% center !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.12) contrast(1.08) !important;
}

body.oldies-ref-premium .ref-hero__shade {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 70% 60% at 82% 42%, rgba(255, 130, 60, 0.18), transparent 50%),
    radial-gradient(ellipse 50% 45% at 22% 38%, rgba(60, 240, 255, 0.06), transparent 45%) !important;
  pointer-events: none !important;
}

body.oldies-ref-premium .ref-hero__body {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: clamp(520px, 62vh, 700px) !important;
}

body.oldies-ref-premium .ref-hero__top {
  display: grid !important;
  grid-template-columns: minmax(160px, 0.95fr) minmax(240px, 1.2fr) minmax(140px, 0.85fr) !important;
  gap: clamp(12px, 2vw, 24px) !important;
  align-items: center !important;
  padding: clamp(22px, 3vw, 36px) clamp(16px, 2.5vw, 28px) clamp(12px, 2vw, 20px) !important;
  flex: 1 1 auto !important;
}

/* Wall-mounted neons — no glass card */
body.oldies-ref-premium .ref-hero__neons {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 8px 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.oldies-ref-premium .ref-neon {
  display: inline-block !important;
  margin: 0 !important;
}

body.oldies-ref-premium .ref-neon--onair {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(1.75rem, 2.8vw, 2.35rem) !important;
  letter-spacing: 0.22em !important;
  padding: 10px 18px 8px !important;
  color: #ff4d0a !important;
  border: 3px solid #ff5a1a !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  text-shadow: 0 0 18px #ff3300, 0 0 40px rgba(255, 80, 0, 0.75) !important;
  box-shadow: 0 0 24px rgba(255, 90, 0, 0.45), inset 0 0 20px rgba(255, 60, 0, 0.12) !important;
}

body.oldies-ref-premium .ref-neon--rock {
  font-family: "Satisfy", cursive !important;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
  padding: 8px 16px !important;
  color: #ff4a6a !important;
  border: 2px solid rgba(255, 80, 100, 0.85) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  transform: rotate(-3deg) !important;
  text-shadow: 0 0 14px rgba(255, 60, 90, 0.9), 0 0 28px rgba(255, 40, 60, 0.45) !important;
  box-shadow: 0 0 20px rgba(255, 60, 80, 0.35) !important;
}

body.oldies-ref-premium .ref-neon-amp {
  color: #ffe08a !important;
  text-shadow: 0 0 10px rgba(255, 220, 120, 0.8) !important;
}

body.oldies-ref-premium .ref-neon--oldies {
  font-family: "Bungee", cursive !important;
  font-size: clamp(0.82rem, 1.5vw, 1.05rem) !important;
  letter-spacing: 0.14em !important;
  padding: 10px 14px 8px !important;
  color: #ffb32d !important;
  border: 2px solid rgba(255, 170, 60, 0.8) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.42) !important;
  transform: rotate(2deg) !important;
  text-shadow: 0 0 16px rgba(255, 160, 50, 0.85), 0 0 32px rgba(255, 100, 20, 0.35) !important;
  box-shadow: 0 0 18px rgba(255, 140, 40, 0.3) !important;
}

body.oldies-ref-premium .ref-hero__center {
  text-align: center !important;
  justify-self: center !important;
  max-width: 28rem !important;
}

/* Ref comp #2: large bold cyan station title (not only script) */
body.oldies-ref-premium .hero-copy-ref h1.hero-title-neon {
  font-family: "Outfit", "Inter", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: #4df9ff !important;
  font-size: clamp(1.85rem, 3.8vw, 2.85rem) !important;
  text-transform: none !important;
  text-shadow: 0 0 12px rgba(77, 249, 255, 0.95), 0 0 28px rgba(60, 240, 255, 0.55), 0 0 52px rgba(60, 240, 255, 0.25) !important;
  margin: 0 0 10px !important;
}

body.oldies-ref-premium .hero-tagline-lead {
  color: #f0f7f6 !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
}

body.oldies-ref-premium-home .hero-on-air-now {
  margin: 0.35rem auto 1rem !important;
  max-width: 28rem !important;
  font-size: 0.98rem !important;
  line-height: 1.4 !important;
  color: rgba(240, 247, 246, 0.9) !important;
}

body.oldies-ref-premium-home .hero-on-air-now__label {
  font-family: "Syne", "Outfit", system-ui, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 0.68rem !important;
  color: rgba(93, 255, 232, 0.9) !important;
  margin-right: 0.4rem !important;
}

body.oldies-ref-premium-home .hero-on-air-now__name {
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
}

body.oldies-ref-premium .ref-hero__center .hero-actions {
  display: flex !important;
  justify-content: center !important;
}

body.oldies-ref-premium .premium-play--hero {
  border-radius: 999px !important;
  padding: 14px 32px !important;
  background: linear-gradient(180deg, #ffd88a, var(--r-orange) 55%, var(--r-orange-deep)) !important;
  border: 1px solid rgba(255, 220, 140, 0.9) !important;
  color: #1a0a00 !important;
  box-shadow: 0 0 28px rgba(255, 130, 40, 0.75), 0 0 50px rgba(255, 90, 0, 0.25) !important;
}

body.oldies-ref-premium .listen-row__label {
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.72rem !important;
  color: #9ed8d4 !important;
}

body.oldies-ref-premium .listen-row__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body.oldies-ref-premium .listen-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #f4fffe !important;
  text-decoration: none !important;
  background: rgba(0, 0, 0, 0.72) !important;
  border: 2px solid !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}
body.oldies-ref-premium .listen-chip:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
}
body.oldies-ref-premium .listen-chip img {
  height: 20px !important;
  max-width: 70px !important;
  object-fit: contain !important;
}
body.oldies-ref-premium .listen-chip--red {
  border-color: #ff3355 !important;
  box-shadow: 0 0 14px rgba(255, 50, 90, 0.55) !important;
}
body.oldies-ref-premium .listen-chip--blue {
  border-color: #38a5ff !important;
  box-shadow: 0 0 14px rgba(56, 165, 255, 0.5) !important;
}
body.oldies-ref-premium .listen-chip--green {
  border-color: #3cff9a !important;
  box-shadow: 0 0 14px rgba(60, 255, 154, 0.45) !important;
}
body.oldies-ref-premium .listen-chip--purple {
  border-color: #c56fff !important;
  box-shadow: 0 0 14px rgba(197, 111, 255, 0.5) !important;
}
body.oldies-ref-premium .listen-chip--pink {
  border-color: #ff6fd8 !important;
  box-shadow: 0 0 14px rgba(255, 111, 216, 0.5) !important;
}

/* Jukebox column: era badge stack (mirrors neon column) + warm glow */
body.oldies-ref-premium .ref-hero__jukebox-col {
  position: relative !important;
  min-height: 260px !important;
  align-self: stretch !important;
}

body.oldies-ref-premium .ref-hero__era-badges {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 11px !important;
}

body.oldies-ref-premium .ref-hero__era-badge {
  display: inline-block !important;
  margin: 0 !important;
  font-family: "Bebas Neue", sans-serif !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  padding: 7px 13px 4px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border-style: solid !important;
  border-width: 3px !important;
}

body.oldies-ref-premium .ref-hero__era-badge--50s {
  font-size: clamp(2.05rem, 3.8vw, 3.1rem) !important;
  color: #ffe566 !important;
  border-color: rgba(255, 210, 90, 0.85) !important;
  text-shadow: 0 0 14px rgba(255, 200, 80, 0.95), 0 0 32px rgba(255, 140, 40, 0.55) !important;
  box-shadow: 0 0 22px rgba(255, 160, 60, 0.35) !important;
}

body.oldies-ref-premium .ref-hero__era-badge--60s {
  font-size: clamp(1.55rem, 2.85vw, 2.35rem) !important;
  color: #ff7a9a !important;
  border-color: rgba(255, 100, 130, 0.82) !important;
  transform: rotate(-2.5deg) !important;
  text-shadow: 0 0 14px rgba(255, 90, 120, 0.9), 0 0 28px rgba(255, 60, 90, 0.4) !important;
  box-shadow: 0 0 18px rgba(255, 80, 110, 0.32) !important;
}

body.oldies-ref-premium .ref-hero__era-badge--70s {
  font-size: clamp(1.5rem, 2.75vw, 2.25rem) !important;
  color: #ffb32d !important;
  border-color: rgba(255, 175, 60, 0.82) !important;
  transform: rotate(2deg) !important;
  text-shadow: 0 0 14px rgba(255, 170, 50, 0.88), 0 0 26px rgba(255, 120, 30, 0.38) !important;
  box-shadow: 0 0 18px rgba(255, 150, 50, 0.3) !important;
}

body.oldies-ref-premium .ref-hero__era-badge--80s {
  font-size: clamp(1.45rem, 2.65vw, 2.2rem) !important;
  color: #6df4ff !important;
  border-color: rgba(90, 235, 255, 0.78) !important;
  transform: rotate(-1.5deg) !important;
  text-shadow: 0 0 14px rgba(80, 240, 255, 0.85), 0 0 26px rgba(60, 200, 255, 0.35) !important;
  box-shadow: 0 0 18px rgba(60, 220, 255, 0.28) !important;
}

body.oldies-ref-premium .ref-hero__jukebox-glow {
  position: absolute !important;
  inset: 18% -10% 8% 0 !important;
  background: radial-gradient(ellipse 70% 70% at 70% 55%, rgba(255, 140, 60, 0.35), transparent 62%) !important;
  pointer-events: none !important;
}

/* Clock embedded in hero (ref comp #2) */
body.oldies-ref-premium .ref-hero__clock {
  margin: 0 clamp(16px, 2.5vw, 28px) clamp(18px, 2vw, 24px) !important;
  padding: 18px 20px 16px !important;
  border-radius: 16px !important;
  background: rgba(2, 8, 10, 0.48) !important;
  border: 1px solid rgba(60, 240, 255, 0.42) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(60, 240, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  flex: 0 0 auto !important;
}

body.oldies-ref-premium .ref-hero__clock .clock-panel-ref__title {
  margin-bottom: 12px !important;
}

/* ========== CARDS (schedule, now playing, comments — lighter boxes, logo shows through) ========== */
body.oldies-ref-premium .premium-panel:not(.ref-hero__clock),
body.oldies-ref-premium .clock-panel-ref:not(.ref-hero__clock) {
  background: var(--r-card) !important;
  border: 1px solid rgba(60, 240, 255, 0.38) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(60, 240, 255, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.oldies-ref-premium .clock-panel-ref__title,
body.oldies-ref-premium .premium-panel h2 {
  color: var(--r-cyan) !important;
  text-shadow: 0 0 14px rgba(60, 240, 255, 0.45) !important;
  font-weight: 800 !important;
}

body.oldies-ref-premium .clock-panel-ref:not(.ref-hero__clock) {
  text-align: center !important;
  padding: 22px 20px 18px !important;
  margin: 0 0 20px !important;
}

body.oldies-ref-premium .ref-hero__clock.clock-panel-ref {
  text-align: center !important;
}

body.oldies-ref-premium .premium-clock-flex--digital .clock-digits {
  font-family: "Share Tech Mono", ui-monospace, monospace !important;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important;
}
body.oldies-ref-premium .premium-clock-flex--digital .clock-box:first-child .clock-digits {
  color: var(--r-cyan) !important;
  text-shadow: 0 0 14px rgba(60, 240, 255, 0.5) !important;
}
body.oldies-ref-premium .premium-clock-flex--digital .clock-box:last-child .clock-digits {
  color: #ffb347 !important;
  text-shadow: 0 0 14px rgba(255, 160, 80, 0.45) !important;
}

body.oldies-ref-premium .hero-station-date {
  color: #a8b8b5 !important;
}

/* Schedule strip — one horizontal row: Now On Air | Next Up | Coming After */
body.oldies-ref-premium .show-cards.ref-schedule-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 130, 60, 0.45) !important;
  border-radius: 18px !important;
  background: rgba(8, 3, 2, 0.32) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 0 20px rgba(255, 90, 30, 0.1), inset 0 0 24px rgba(0, 0, 0, 0.15) !important;
  margin: 0 0 22px !important;
  overflow: hidden !important;
}

body.oldies-ref-premium .ref-schedule-strip .show-card {
  margin: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 18px 16px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
}

body.oldies-ref-premium .ref-schedule-strip .show-card:last-child {
  border-right: none !important;
}

body.oldies-ref-premium .ref-schedule-strip .show-card--live {
  background: linear-gradient(165deg, rgba(120, 45, 0, 0.38) 0%, rgba(40, 12, 0, 0.32) 45%, rgba(0, 0, 0, 0.22) 100%) !important;
  box-shadow: inset 0 0 40px rgba(255, 100, 40, 0.1), 0 0 18px rgba(255, 80, 0, 0.14) !important;
}

body.oldies-ref-premium .ref-schedule-strip .show-card__eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
}

body.oldies-ref-premium .ref-schedule-strip .show-card__label {
  color: #ff9a4a !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 12px rgba(255, 140, 80, 0.45) !important;
}

body.oldies-ref-premium .ref-schedule-strip .live-pill--sm {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ff3030, #c01010) !important;
  border: 1px solid rgba(255, 120, 120, 0.85) !important;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.75) !important;
  box-shadow: 0 0 14px rgba(255, 40, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body.oldies-ref-premium .ref-schedule-strip .live-pill--sm.live-pill--autodj {
  background: linear-gradient(180deg, #64748b, #475569) !important;
  border: 1px solid rgba(148, 163, 184, 0.55) !important;
  text-shadow: none !important;
  box-shadow: 0 0 12px rgba(71, 85, 105, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.oldies-ref-premium .now-playing-premium .live-pill.live-pill--autodj {
  background: linear-gradient(180deg, #64748b, #475569) !important;
  border-color: rgba(148, 163, 184, 0.55) !important;
  text-shadow: none !important;
  box-shadow: 0 0 16px rgba(71, 85, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.oldies-ref-premium .ref-schedule-strip .show-card__show {
  margin: 0 !important;
  max-width: 100% !important;
  color: #fff !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.12) !important;
}

body.oldies-ref-premium .ref-schedule-strip .show-card__time {
  margin: 0 !important;
  max-width: 100% !important;
  color: #aebdba !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  text-align: center !important;
}

/* Now playing */
body.oldies-ref-premium .now-playing-premium {
  display: grid !important;
  grid-template-columns: minmax(160px, 210px) 1fr !important;
  gap: 26px !important;
  padding: 24px 26px !important;
  margin: 0 0 20px !important;
  align-items: start !important;
}

body.oldies-ref-premium .album-card--hero {
  height: 200px !important;
}
body.oldies-ref-premium .album-card--hero img {
  width: 168px !important;
  height: 168px !important;
}
body.oldies-ref-premium .album-card--hero .record {
  left: 78px !important;
  width: 148px !important;
  height: 148px !important;
}

body.oldies-ref-premium #nowplaying-content .np-artist {
  color: #fff !important;
  font-size: clamp(1.45rem, 2.8vw, 2.1rem) !important;
  font-weight: 800 !important;
}
body.oldies-ref-premium #nowplaying-content .np-song {
  color: var(--r-cyan) !important;
  text-shadow: 0 0 12px rgba(60, 240, 255, 0.45) !important;
}

body.oldies-ref-premium #nowplaying-content .np-line--split {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
body.oldies-ref-premium #nowplaying-content .np-line--single {
  text-align: left !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}

body.oldies-ref-premium .np-btn--info {
  border-color: rgba(60, 240, 255, 0.55) !important;
  color: #e8fffe !important;
  background: linear-gradient(165deg, rgba(0, 24, 28, 0.72) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 22px rgba(60, 240, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.oldies-ref-premium .np-btn--info .np-btn__icon {
  background: rgba(60, 240, 255, 0.14) !important;
  color: var(--r-cyan) !important;
  box-shadow: inset 0 0 14px rgba(60, 240, 255, 0.12) !important;
}
body.oldies-ref-premium .np-btn--info:hover {
  border-color: var(--r-cyan) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4), 0 0 32px rgba(60, 240, 255, 0.28), inset 0 0 24px rgba(60, 240, 255, 0.08) !important;
}
body.oldies-ref-premium .np-btn--request {
  background: linear-gradient(165deg, #ffe6b3 0%, var(--r-orange) 42%, var(--r-orange-deep) 100%) !important;
  color: #1a0a00 !important;
  border-color: rgba(255, 220, 160, 0.85) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 140, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
body.oldies-ref-premium .np-btn--request .np-btn__icon {
  background: rgba(26, 10, 0, 0.18) !important;
  color: #1a0a00 !important;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.12) !important;
}
body.oldies-ref-premium .np-btn--request:hover {
  filter: brightness(1.05) saturate(1.05);
  border-color: rgba(255, 236, 200, 0.95) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), 0 0 36px rgba(255, 120, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.oldies-ref-premium .np-btn--request:focus-visible {
  outline-color: var(--r-gold) !important;
}

body.oldies-ref-premium .wave-line span {
  background: var(--r-cyan) !important;
  box-shadow: 0 0 8px var(--r-cyan) !important;
}

/* Comments */
body.oldies-ref-premium .comments-stack {
  gap: 18px !important;
}
body.oldies-ref-premium .premium-form input,
body.oldies-ref-premium .premium-form textarea {
  border: 1px solid rgba(60, 240, 255, 0.22) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.5) !important;
}
body.oldies-ref-premium .premium-form button {
  border-radius: 12px !important;
  background: linear-gradient(90deg, #1ef0f0, #0aa8a8) !important;
  color: #031010 !important;
}

body.oldies-ref-premium .comment-form-ref .premium-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
body.oldies-ref-premium .comment-panel__hint {
  color: #b0c4c1 !important;
}
body.oldies-ref-premium .comment-tile__name {
  color: #7df9ff !important;
}
body.oldies-ref-premium .comment-tile__text {
  color: #e4eeec !important;
}
body.oldies-ref-premium .recent-view-all {
  color: var(--r-cyan) !important;
}

body.oldies-ref-premium .comment-tile {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 14px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.oldies-ref-premium .comment-tile:last-child {
  border-bottom: none !important;
}
body.oldies-ref-premium .comment-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #1ef0f0, #0a8888) !important;
  color: #031010 !important;
  border: 2px solid var(--r-cyan-dim) !important;
}
body.oldies-ref-premium .comment-tile__time {
  color: #8a9593 !important;
  font-size: 0.75rem !important;
}

/* Footer + player — lighter so watermark reads through */
body.oldies-ref-premium .site-footer.premium-footer {
  border: 1px solid rgba(60, 240, 255, 0.35) !important;
  border-radius: 18px !important;
  background: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  margin-top: 8px !important;
}

body.oldies-ref-premium .sticky-player-shell {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 14px !important;
}

body.oldies-ref-premium .footer-brand-block h3 {
  color: #ff8a9a !important;
  text-shadow: 0 0 12px rgba(255, 80, 100, 0.45) !important;
}

/* ========== Inner pages: .main-wrap + legacy panels (schedule, about, contact, …) ========== */
/* Center the content column in the area to the right of the fixed sidebar (match width formula). */
body.oldies-ref-premium .main-wrap {
  box-sizing: border-box !important;
  width: min(1280px, calc(100vw - 246px - 28px)) !important;
  max-width: 1280px !important;
  margin: 104px 24px 28px
    calc(
      246px + max(0px, (100vw - 246px - 24px - min(1280px, calc(100vw - 246px - 28px))) / 2)
    ) !important;
  padding: 0 !important;
  background: transparent !important;
}

body.oldies-ref-premium .content-panel {
  border: 1px solid rgba(60, 240, 255, 0.38) !important;
  border-radius: 18px !important;
  background: var(--r-card) !important;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(60, 240, 255, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 28px 32px 36px !important;
}

body.oldies-ref-premium .neon-card {
  background: var(--r-card) !important;
  border: 1px solid rgba(60, 240, 255, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.32), inset 0 0 20px rgba(60, 240, 255, 0.04) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 22px 24px !important;
}

body.oldies-ref-premium .neon-card h2,
body.oldies-ref-premium .neon-card h3,
body.oldies-ref-premium .schedule-day-title {
  color: var(--r-cyan) !important;
  text-shadow: 0 0 12px rgba(60, 240, 255, 0.45) !important;
}

body.oldies-ref-premium .neon-title,
body.oldies-ref-premium .section-title,
body.oldies-ref-premium .schedule-banner-text,
body.oldies-ref-premium .news-banner-text {
  color: var(--r-cyan) !important;
  text-shadow: 0 0 14px rgba(60, 240, 255, 0.45) !important;
}

body.oldies-ref-premium .about-tagline,
body.oldies-ref-premium .schedule-subtext {
  color: #b8d4d0 !important;
}

body.oldies-ref-premium .about-text,
body.oldies-ref-premium .content-panel .about-text {
  color: #e8f0ee !important;
}

body.oldies-ref-premium .schedule-dj {
  color: #f4fffe !important;
}

body.oldies-ref-premium .schedule-time {
  color: #9ed8d4 !important;
  font-weight: 700 !important;
}

body.oldies-ref-premium .schedule-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.oldies-ref-premium .schedule-list li:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

body.oldies-ref-premium .live-now {
  background: linear-gradient(165deg, rgba(120, 45, 0, 0.35) 0%, rgba(40, 12, 0, 0.28) 100%) !important;
  border-radius: 10px !important;
}

body.oldies-ref-premium .live-now-badge {
  color: #fff !important;
  background: linear-gradient(180deg, #ff3030, #c01010) !important;
  border: 1px solid rgba(255, 120, 120, 0.85) !important;
}

body.oldies-ref-premium .content-box {
  background: transparent !important;
}

body.oldies-ref-premium .button.radio-static {
  border-radius: 12px !important;
  border: 2px solid rgba(60, 240, 255, 0.35) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #e8fffe !important;
  box-shadow: 0 0 14px rgba(60, 240, 255, 0.12) !important;
}

body.oldies-ref-premium .button.radio-static:hover {
  border-color: var(--r-orange) !important;
  color: var(--r-orange) !important;
}

body.oldies-ref-premium .msg.success {
  background: rgba(0, 80, 60, 0.45) !important;
  border: 1px solid rgba(60, 240, 255, 0.35) !important;
  color: #c8fff0 !important;
}

body.oldies-ref-premium .msg.error {
  background: rgba(80, 20, 20, 0.45) !important;
  border: 1px solid rgba(255, 100, 100, 0.4) !important;
  color: #ffe0e0 !important;
}

body.oldies-ref-premium .about-list li {
  color: #e4eeec !important;
}

body.oldies-ref-premium .content-card {
  background: var(--r-card) !important;
  border: 1px solid rgba(60, 240, 255, 0.32) !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.28) !important;
}

body.oldies-ref-premium .content-card h1,
body.oldies-ref-premium .content-card h2 {
  color: var(--r-cyan) !important;
  text-shadow: 0 0 12px rgba(60, 240, 255, 0.4) !important;
}

body.oldies-ref-premium .content-card p {
  color: #e4eeec !important;
}

body.oldies-ref-premium .request-input,
body.oldies-ref-premium .request-box textarea {
  border: 1px solid rgba(60, 240, 255, 0.25) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #f0fffe !important;
}

body.oldies-ref-premium .vinyl-divider {
  filter: drop-shadow(0 0 8px rgba(60, 240, 255, 0.25));
}

body.oldies-ref-premium input.input-field,
body.oldies-ref-premium textarea.input-field,
body.oldies-ref-premium select.input-field {
  border: 1px solid rgba(60, 240, 255, 0.25) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #f0fffe !important;
}

body.oldies-ref-premium .input-field:focus {
  border-color: var(--r-cyan) !important;
  box-shadow: 0 0 0 2px rgba(60, 240, 255, 0.2) !important;
}

/* Bootstrap-based account pages (register/login) */
body.oldies-ref-premium .ugfx-card {
  background: var(--r-card) !important;
  border: 1px solid rgba(60, 240, 255, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #e8f0ee !important;
}

body.oldies-ref-premium .ugfx-card h1,
body.oldies-ref-premium .ugfx-card h2,
body.oldies-ref-premium .ugfx-card h3 {
  color: #f4fffe !important;
}

body.oldies-ref-premium .ugfx-micro-label {
  color: #ff9a4a !important;
  letter-spacing: 0.1em !important;
}

body.oldies-ref-premium .form-control {
  border: 1px solid rgba(60, 240, 255, 0.25) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #f0fffe !important;
}

body.oldies-ref-premium .form-control:focus {
  border-color: var(--r-cyan) !important;
  box-shadow: 0 0 0 2px rgba(60, 240, 255, 0.2) !important;
}

body.oldies-ref-premium .btn.ugfx-btn-primary {
  background: linear-gradient(90deg, #1ef0f0, #0aa8a8) !important;
  border: none !important;
  color: #031010 !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
}

/* Charts / listen-live: ugfx layout + ref glass (no main-wrap) */
body.oldies-ref-premium .ugfx-page-hero {
  box-sizing: border-box !important;
  width: min(1280px, calc(100vw - 246px - 28px)) !important;
  max-width: 1280px !important;
  margin: 104px 24px 20px
    calc(
      246px + max(0px, (100vw - 246px - 24px - min(1280px, calc(100vw - 246px - 28px))) / 2)
    ) !important;
  padding: 28px 24px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(60, 240, 255, 0.35) !important;
  background: var(--r-card) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35) !important;
}

body.oldies-ref-premium .ugfx-page-hero .page-title {
  color: var(--r-cyan) !important;
  text-shadow: 0 0 14px rgba(60, 240, 255, 0.45) !important;
}

/* .ugfx-kicker is a high-contrast pill (dark text on neon gradient in oldies-bridge.css) — do not mute it */
body.oldies-ref-premium .ugfx-page-hero .page-copy {
  color: #c8e8e4 !important;
}

body.oldies-ref-premium .section-pad {
  box-sizing: border-box !important;
  width: min(1280px, calc(100vw - 246px - 28px)) !important;
  max-width: 1280px !important;
  margin: 0 24px 32px
    calc(
      246px + max(0px, (100vw - 246px - 24px - min(1280px, calc(100vw - 246px - 28px))) / 2)
    ) !important;
}

body.oldies-ref-premium .text-secondary {
  color: #a8b8b5 !important;
}

@media (max-width: 640px) {
  body.oldies-ref-premium .comment-form-ref .premium-form-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1050px) {
  body.oldies-ref-premium .premium-page-wrap,
  body.oldies-ref-premium .main-wrap,
  body.oldies-ref-premium .ugfx-page-hero,
  body.oldies-ref-premium .section-pad {
    width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  body.oldies-ref-premium .premium-page-wrap,
  body.oldies-ref-premium .main-wrap {
    margin-top: 100px !important;
    margin-bottom: 24px !important;
  }
  body.oldies-ref-premium .ugfx-page-hero {
    margin-top: 100px !important;
  }
  body.oldies-ref-premium .section-pad {
    margin-bottom: 24px !important;
  }
  body.oldies-ref-premium .premium-topbar {
    left: 12px !important;
    right: 12px !important;
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
  }
  body.oldies-ref-premium .premium-nav {
    display: none !important;
  }
  body.oldies-ref-premium .ref-hero__brickwall {
    width: 100% !important;
    height: 42% !important;
  }
  body.oldies-ref-premium .ref-hero__jukebox-photo {
    width: 100% !important;
    height: 58% !important;
    top: auto !important;
    bottom: 0 !important;
  }
  body.oldies-ref-premium .ref-hero__top {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  body.oldies-ref-premium .ref-hero__neons {
    align-items: center !important;
    margin: 0 auto !important;
  }
  body.oldies-ref-premium .ref-hero__center {
    max-width: none !important;
  }
  body.oldies-ref-premium .ref-hero__jukebox-col {
    min-height: 120px !important;
  }
  body.oldies-ref-premium .ref-hero__era-badges {
    right: 50% !important;
    transform: translateX(50%) !important;
    align-items: center !important;
  }
  body.oldies-ref-premium .ref-hero__era-badge--60s,
  body.oldies-ref-premium .ref-hero__era-badge--70s,
  body.oldies-ref-premium .ref-hero__era-badge--80s {
    transform: none !important;
  }
  body.oldies-ref-premium .now-playing-premium {
    grid-template-columns: 1fr !important;
  }
}

/* Stack schedule only on very narrow screens */
@media (max-width: 640px) {
  body.oldies-ref-premium .ref-schedule-strip {
    grid-template-columns: 1fr !important;
  }
  body.oldies-ref-premium .ref-schedule-strip .show-card {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  body.oldies-ref-premium .ref-schedule-strip .show-card:last-child {
    border-bottom: none !important;
  }
}

/* —— Strong gutter for legacy inner pages (Shows, Gallery, About, schedule, …): only .main-wrap —— */
/* Index uses <main class="premium-page-wrap">, not .main-wrap, so this never hits the home hero. */
/* Avoid :not(.oldies-ref-premium-home) on body: some hosts report PHP_SELF as index.php for every route. */
body.oldies-premium.oldies-ref-premium .main-wrap {
  box-sizing: border-box !important;
  width: min(1280px, calc(100vw - 246px - 28px)) !important;
  max-width: 1280px !important;
  margin: 104px 24px 28px
    calc(
      246px + max(0px, (100vw - 246px - 24px - min(1280px, calc(100vw - 246px - 28px))) / 2)
    ) !important;
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 1050px) {
  body.oldies-premium.oldies-ref-premium .main-wrap {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    margin: 100px 12px 24px 12px !important;
  }
}