/* -------------------------------------------
   ✅ GLOBAL STYLES
------------------------------------------- */
@font-face {
  font-family: 'AvantGardeDefected';
  src: url('assets/fonts/AvantGardeDefectedRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('assets/SFProDisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Bold.woff2') format('woff2'),
      url('SFProDisplay-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-BlackItalic.woff2') format('woff2'),
      url('SFProDisplay-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Black.woff2') format('woff2'),
      url('SFProDisplay-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-BoldItalic.woff2') format('woff2'),
      url('SFProDisplay-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Heavy.woff2') format('woff2'),
      url('SFProDisplay-Heavy.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Medium.woff2') format('woff2'),
      url('SFProDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Light.woff2') format('woff2'),
      url('SFProDisplay-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-LightItalic.woff2') format('woff2'),
      url('SFProDisplay-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-HeavyItalic.woff2') format('woff2'),
      url('SFProDisplay-HeavyItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Semibold.woff2') format('woff2'),
      url('SFProDisplay-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Regular.woff2') format('woff2'),
      url('SFProDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-RegularItalic.woff2') format('woff2'),
      url('SFProDisplay-RegularItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-MediumItalic.woff2') format('woff2'),
      url('SFProDisplay-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Thin.woff2') format('woff2'),
      url('SFProDisplay-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-Ultralight.woff2') format('woff2'),
      url('SFProDisplay-Ultralight.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-ThinItalic.woff2') format('woff2'),
      url('SFProDisplay-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-SemiboldItalic.woff2') format('woff2'),
      url('SFProDisplay-SemiboldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplay';
  src: url('SFProDisplay-UltralightItalic.woff2') format('woff2'),
      url('SFProDisplay-UltralightItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}



.sticky-player .play-btn {
  position: relative;
  z-index: 3;
  background: none;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%; /* ✅ Make it circular */
  font-size: 10px;
  text-transform: uppercase;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradient pulse effect */
.sticky-player .play-btn::after {
  content: "";
  position: absolute;
  
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  background: linear-gradient(to right, var(--cf-primary), var(--cf-secondary));
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
  border-radius: 100%;
  transform: scale(1);
}

.sticky-player #playIcon,
.sticky-player #pauseIcon {
  opacity: 0.8;
}

.sticky-player .pulsing-glow {
  position: relative;
}

.sticky-player .pulsing-glow::before {
  content: ""; 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to right, var(--cf-primary), var(--cf-secondary));
  border-radius: 50%;
 filter: blur(14px);
 opacity: 0.35;
  animation: pulse-gradient 2s infinite ease-in-out;
  z-index: -1;
}

@keyframes pulse-gradient {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.9;
  }
}

/* Clicked state */
.sticky-player .play-btn:active::after {
  opacity: 0.9;
  transform: scale(1.05);
}

/* Make sure text/icon stays above the gradient */
.sticky-player .play-btn span,
.sticky-player .play-btn svg {
  position: relative;
  z-index: 2;
}

.sticky-player .seek-controls {
  display: none; /* initially hidden unless it's a listen-back show */
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: center;
}

.sticky-player .seek-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sticky-player .seek-btn::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(to right, var(--cf-primary), var(--cf-secondary));
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
  border-radius: 100%;
  transform: scale(1);
}

.sticky-player .seek-btn:active::after {
  opacity: 0.9;
  transform: scale(1.1);
}

/* Ensure the icon stays above the gradient */
.sticky-player .seek-btn img {
  position: relative;
  z-index: 2;
  filter: brightness(0) invert(1);
  height: 20px;
  transition: transform 0.2s;
}

.sticky-player .seek-btn:hover img {
  transform: scale(1.15);
}

.sticky-player .play-text {
  display: inline-block;
  width: 60px; /* or whatever fits "PAUSE" nicely */
  text-align: center;
}
/* -------------------------------------------
   📅 SCHEDULE LAYOUT & NAV
------------------------------------------- */
.scheduleapp .schedule-day,
#page-content[data-page="show-schedule"] .schedule-day,
#page-content[data-page="show-schedule_online"] .schedule-day { display: none; }

.scheduleapp .schedule-header,
#page-content[data-page="show-schedule"] .schedule-header,
#page-content[data-page="show-schedule_online"] .schedule-header {
  position: relative;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.scheduleapp .date-strip-container,
#page-content[data-page="show-schedule"] .date-strip-container,
#page-content[data-page="show-schedule_online"] .date-strip-container {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.day-nav-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  justify-content: flex-start; /* Left-aligned scroll */
  width: 100%;
  position: relative;
}



.day-nav button {
  background: #343434;
  color: white;
  border: none;
  padding: 12px;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  width: 50px;
  flex: 0 0 auto; /* Prevent shrinking */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.day-nav button.active {
  background: white;
  color: black;
}

.scheduleapp .date-label,
#page-content[data-page="show-schedule"] .date-label,
#page-content[data-page="show-schedule_online"] .date-label {
  font-size: 20px;
  font-weight: bold;
  display: block;
}
.scheduleapp .day-label,
#page-content[data-page="show-schedule"] .day-label,
#page-content[data-page="show-schedule_online"] .day-label {
  font-size: 14px;
  font-weight: normal;
  display: block;
}
.day-nav button.active {
  background: white;
  color: black;
}
.day-nav button:hover {
  color: #00cae7;
}
.scheduleapp .day-label,
#page-content[data-page="show-schedule"] .day-label,
#page-content[data-page="show-schedule_online"] .day-label { font-size: 14px; font-weight: normal; }
.scheduleapp .date-label,
#page-content[data-page="show-schedule"] .date-label,
#page-content[data-page="show-schedule_online"] .date-label { font-size: 20px; font-weight: bold; }

/* -------------------------------------------
   🎵 SHOW BLOCKS
------------------------------------------- */
.schedule-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-container .show-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid color(srgb 0.0927 0.17 0.1627);
  margin-bottom: 14px;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 10px;
}

.schedule-container .show-item:hover {
  transform: scale(1.03);
}
.schedule-container .show-time {
  
  font-weight: bold;
  margin-right: 15px;
  min-width: 80px;
  color: #fff !important;
}
.schedule-container .show-details {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-grow: 1;
  color: #fff !important;
}
.schedule-container .show-name {
  font-size: 1.2em;
  font-weight: bold;
  color: #fff !important;
}

.schedule-container .listen-btn {
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  text-decoration: none !important;
}
.schedule-container .listen-live {
  background: red;
  color: white;
}
.schedule-container .listen-back {
  background: gray;
  color: white !important;
}

.schedule-container .live-show {
  background-color: rgba(0, 202, 231, 0.06) !important;
  border: 2px solid #00cae7 !important;
  box-shadow: 0 0 0 1px rgba(0, 202, 231, 0.18), 0 0 26px rgba(0, 202, 231, 0.22) !important;
  color: #fff !important;
  flex-wrap: wrap;
}
.schedule-container .live-show .listen-btn {
  background: linear-gradient(135deg, #00cae7, #6ef6d4) !important;
  color: #04232a !important;
}
/* LIVE NOW tag */
.schedule-container .live-now-tag {
  display: inline-block;
  margin-top: 4px;
  color: #00cae7;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Live progress bar (how far through the show) */
.schedule-container .live-progress {
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.schedule-container .live-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00cae7, #6ef6d4);
  transition: width 1s linear;
}

/* Live play button → circular neon icon button (unifies home + schedule) */
.schedule-container .live-show .listen-btn.listen-live {
  width: 58px;
  height: 58px;
  min-width: 58px;
  flex: 0 0 58px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00cae7, #6ef6d4) !important;
  color: #04232a !important;
  box-shadow: 0 4px 14px rgba(0, 202, 231, 0.35) !important;
}
.schedule-container .live-show .listen-btn.listen-live .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.schedule-container .live-show .listen-btn.listen-live svg {
  width: 24px;
  height: 24px;
  fill: #04232a;
}
/* Let the text/progress column fill the row so the progress bar is full width */
.schedule-container .live-show .show-text { flex: 1 1 auto; min-width: 0; }
.schedule-container .btn-icon {color: white !important;}

/* -------------------------------------------
   🎤 PRESENTER IMAGES
------------------------------------------- */
.schedule-container .presenter-images {
  position: relative;
  height: 85px;
  min-width: 85px; 
  display: flex;
  align-items: center;
}
.schedule-container .presenter-images img.presenter-img {
width: 85px;
height: 85px;
border-radius: 10px;
object-fit: cover;
position: absolute;
border: 0px solid rgb(47, 23, 23);
transition: transform 0.2s ease;
z-index: 0; 
}
.schedule-container .dual-presenter-img img.presenter-img {
  width: 85px !important;
  height: 85px !important;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  border: 2px solid black;
  transition: transform 0.2s ease;
  z-index: 0;
}
.schedule-container .presenter-images img.presenter-img:hover {
  transform: scale(1.1);
  z-index: 999;
}
.schedule-container .presenter-images img.presenter-img:not(:first-child) {
  left: 5px;
}

/* -------------------------------------------
   📻 STICKY AUDIO PLAYER
------------------------------------------- */
.sticky-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(44, 44, 44, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  padding: 12px 16px 20px;
  font-family: 'Montserrat', sans-serif;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  overflow: visible; /* ✅ allow image to overflow upward */
}

.sticky-player .player-left {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 20px;;
}
.sticky-player .play-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.sticky-player .play-btn svg {
  transition: transform 0.2s ease;
  width: 40px;
  height: 40px;
}
.sticky-player .play-btn:hover svg {
  transform: scale(1.2);
}
.sticky-player .play-text {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
}

.sticky-player .player-right {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-left: auto;
  min-width: 0;
}

.sticky-player .presenter-text strong,
.sticky-player .presenter-text small {
  overflow-wrap: break-word;
  white-space: normal;
}


.sticky-player .presenter-img-wrapper {
  position: relative;
  margin-top: -40px;
}
.sticky-player .presenter-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid white;
  object-fit: cover;
  z-index: 2;
}
.sticky-player .presenter-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 180px;
  
}


.sticky-player .live-tag {
  font-size: 12px;
  font-weight: bold;
  background: black;
  color: red;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.sticky-player .presenter-text strong {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  word-break: break-word;
  white-space: normal;
  line-height: 1.2;
  display: block;
  max-width: 100%;
}

.sticky-player .presenter-text {
  display: block;
  max-width: 100%;
}




.sticky-player .presenter-text small {
  font-size: 11px;
 text-transform: uppercase !important;
  font-weight: 600;
  color: #ccc;
  line-height: 1.2; /* ✅ tighter spacing */
  margin-top: 2px;
  white-space: normal;
  word-break: break-word;
}

.sticky-player .now-playing {
  font-size: 8px;
 text-transform: uppercase !important;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2; /* ✅ tighter spacing */
  margin-top: 2px;
 

}

.sticky-player .now-playing-label {
  font-weight: bold;
  color: var(--cf-primary);
  margin-right: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}


.sticky-player #now-playing {
  opacity: 0;
  transition: opacity 0.5s ease;
  display: none; /* start hidden */
}

.sticky-player #now-playing.visible {
  display: block;
  opacity: 1;
}





@media (max-width: 768px) {

  .sticky-player .presenter-text small {
    font-size: 9px!important;

  }

  .sticky-player .presenter-text strong {
    font-size: 12px !important;}




}

/* Scrubber Container */
.sticky-player .scrubber-container {
  width: 100%;
  margin-top: 8px;
  padding-bottom: 12px;
  box-sizing: border-box;
}

/* Progress Track */
.sticky-player .range-wrapper {
  position: relative;
  width: 100%;
  height: 8px;
  z-index: 1; /* Lower layer */
}
/* Pink progress bar inside */
.sticky-player .progress-bar {
  position: absolute;
  top: 6px;
  left: 0;
  width: 0%;
  height: 8px;
  background: linear-gradient(to right, var(--cf-primary), var(--cf-secondary));
  z-index: 4; /* Below range input */
  pointer-events: none;
  border-radius: 6px; /* 👈 match this to the track rounding */
  
}

/* Range Input */
.sticky-player .scrubber-container input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: transparent;
  position: relative;
  z-index: 3; /* 👈 bring range input (thumb) above progress bar */
  top: -3px;
  margin: 0;
  padding: 0;
  pointer-events: all; /* 👈 ensures it's clickable */
}


/* Remove browser default styles */
.sticky-player .scrubber-container input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  background: #444;
  border: 1px solid #444;
  z-index: 0;
  border-radius: 0; /* 👈 this removes the round edges */

}
.sticky-player .scrubber-container input[type=range]::-moz-range-track {
  height: 8px;
  background: #444;
  border: none;
  border-radius: 0; /* 👈 this removes the round edges */
}

/* Thumb Styling */
.sticky-player .scrubber-container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px; /* Aligns thumb vertically */
  box-shadow: 0 0 0 0px #333; /* Optional: defines thumb edge */
  z-index: 2;
}
.sticky-player .scrubber-container input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--cf-primary);
  border: none;
  
  cursor: pointer;
}

/* Optional hover effect */
.sticky-player .scrubber-container input[type=range]::-webkit-slider-thumb:hover {
  background: transparent;
}


/* -------------------------------------------
   📱 RESPONSIVE STYLES
------------------------------------------- */
@media (max-width: 768px) {
  .scheduleapp .schedule-header,
  #page-content[data-page="show-schedule"] .schedule-header,
  #page-content[data-page="show-schedule_online"] .schedule-header {
    flex-direction: column;
    padding: 10px 0;
  }

  .day-nav {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    
  }

  .day-nav button {
    width: 42px;
    padding: 6px;
    font-size: 11px;
  }

  .schedule-container .show-item {
    flex-direction: row;
    align-items: flex-start;
    padding: 12px;
    gap: 10px;
  }

  .schedule-container .show-time {
    font-size: 1em;
    min-width: 60px;
  }

  .schedule-container .presenter-images {
    height: 75px;
    min-width: 75px;
  }

  .schedule-container .dual-presenter-img img.presenter-img {
    width: 75px;
    height: 75px;
    position: static;
    margin-right: 5px;
  }

  .schedule-container .dual-presenter-img {
  
    width: 75px !important;
    height: 75px !important;
   
  }

  .schedule-container .show-name {
    font-size: 0.95em;
    font-weight: 600;
    margin-left: 0 !important;
    flex: 1;
    position: relative;
    z-index: 10;
    background-color: transparent;
    text-align: left;
  }

  .schedule-container .listen-btn {
    font-size: 11px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .schedule-container .show-details,
  .schedule-container .listen-btn {
    margin-top: 5px;
  }

  .scheduleapp .date-strip-container::before,
  .scheduleapp .date-strip-container::after,
  #page-content[data-page="show-schedule"] .date-strip-container::before,
  #page-content[data-page="show-schedule"] .date-strip-container::after,
  #page-content[data-page="show-schedule_online"] .date-strip-container::before,
  #page-content[data-page="show-schedule_online"] .date-strip-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }

  .scheduleapp .date-strip-container::before,
  #page-content[data-page="show-schedule"] .date-strip-container::before,
  #page-content[data-page="show-schedule_online"] .date-strip-container::before {
    left: 0;
    background: linear-gradient(to right, black 0%, transparent 100%);
  }

  .scheduleapp .date-strip-container::after,
  #page-content[data-page="show-schedule"] .date-strip-container::after,
  #page-content[data-page="show-schedule_online"] .date-strip-container::after {
    right: 0;
    background: linear-gradient(to left, black 0%, transparent 100%);
  }
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
   
  }
  50% {
    opacity: 0.3;
    
  }
}

.sticky-player .pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 59, 48, 0.8);
  animation: pulse-dot 0.8s infinite;
  margin-left: 6px; /* space between text and dot */
}

.schedule-container .dual-presenter-img {
  position: relative;
  width: 85px !important;
  height: 85px !important;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid black;
  display: flex;
  box-shadow: 0 0 0 0px white;
}

.schedule-container .dual-presenter-img .half {
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.schedule-container .dual-presenter-img .half-left {
  border-right: 1px solid white;
}

.schedule-container .dual-presenter-img .half-right {
  border-left: none;
}
.sticky-player .dual-presenter-img {
  border: 3px solid white; /* White border for dual presenter images in the player */
  width: 100px;
  height: 100px;
}


.sticky-player .presenter-img {
  border: 3px solid white; /* White border for dual presenter images in the player */
  width: 100px;
  height: 100px;
}



.sticky-player .spinner {
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

 .sticky-player .up-next {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.65rem !important;
  color: #ffffff!important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  display: block !important;
  line-height: 1.2!important;
}



@media (max-width: 768px) {
  /* ... your other mobile styles ... */



  .sticky-player .presenter-img-wrapper {
    position: absolute;
    top: 25px;
    left: 45%;
    transform: translateX(-40%);
    z-index: 2;
  }

  .sticky-player {
    flex-direction: row;
    align-items: flex-start; /* align all items to the top */
    padding: 12px 16px 20px;
  }

  .sticky-player .player-left {
    flex: 0 0 auto;
  }

  .sticky-player .player-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    margin: 0;
    max-width: 85%; /* give more room */
   
  }

  .sticky-player .presenter-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    max-width: 160px; /* give more room */
    width: 100%;
    min-width: 100px; 
  }

  .sticky-player .presenter-text strong {
    display: block; /* stack on its own line */
    padding-top: 10px;
    max-width: 95%;
  
    white-space: normal;
  word-break: normal;
  overflow-wrap: normal;     /* ← important */
  text-align: right;
  word-break: keep-all;      /* ← keeps short words intact */
  hyphens: none; 
  min-width: 200px; /* gives short names a little more room */
  }

  .sticky-player .presenter-text strong {
    min-width: 50px;
  }

  .sticky-player .presenter-text {
    text-align: right;
    max-width: 100%;
  }

  .sticky-player .presenter-img-wrapper {
    margin-top: -40px;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

}

.sticky-player #shareShow svg {
  transition: transform 0.2s ease;
  display: none;
}

.sticky-player #shareShow:hover svg {
  transform: scale(1.2);
  fill: var(--cf-primary);
}

.sticky-player #nowPlaying {
  font-size: 8px;
  white-space: pre-wrap;
}

.sticky-player .seek-tooltip {
  position: absolute;
  top: -10px;
  background: #000;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'SFProDisplay', sans-serif;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.2s;
  z-index: 10;
}

.sticky-player .range-wrapper {
  position: relative;
}

.sticky-player .live-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sticky-player .now-playing-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  display: flex;
  align-items: center;
}
.sticky-player .now-playing-btn img {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  box-shadow: none !important;
  outline: none !important;
}

.sticky-player .now-playing-btn {
  all: unset; /* resets everything */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
}

.sticky-player .now-playing-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

.sticky-player .live-tag *:not(.pulse-dot) {
  background: none !important;
  border-radius: 0 !important;
}

.sticky-player .presenter-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.sticky-player .presenter-link:hover {
  border-bottom-color: rgba(255,255,255,0.6);
}

.sticky-player .presenter-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  pointer-events: auto;           /* ensure link is clickable */
}
.sticky-player .presenter-link:hover {
  border-bottom-color: rgba(255,255,255,0.6);
}

/* ensure the halves-as-links are clickable */
.sticky-player .presenter-img-wrapper a.half {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* just in case any parent sets pointer-events:none; */
.sticky-player,
.sticky-player .presenter-text,
.sticky-player .presenter-img-wrapper,
.sticky-player .presenter-img-wrapper * {
  pointer-events: auto;
}

/* --- make image links definitely clickable --- */
.sticky-player .presenter-img-wrapper {
  position: relative;
  z-index: 20;                  /* above surrounding layout */
}
.sticky-player .dual-presenter-img,
.sticky-player .dual-presenter-img .half,
.sticky-player .presenter-img-wrapper img.presenter-img {
  position: relative;
  z-index: 21;                  /* above live tag, etc. */
}
.sticky-player .presenter-img-wrapper a.half,
.sticky-player .presenter-img-wrapper a {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  cursor: pointer;
}

/* --- make the presenter-name links clickable and on top --- */
.sticky-player .presenter-info,
.sticky-player .presenter-text {
  position: relative;
  z-index: 20;
}
.sticky-player .presenter-link {
  position: relative;
  z-index: 21;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.sticky-player .presenter-link:hover {
  border-bottom-color: rgba(255,255,255,0.6);
}

/* --- ensure no sibling overlay steals clicks --- */
.sticky-player .live-tag,
.sticky-player .now-playing-btn,
.sticky-player .play-controls,
.sticky-player .seek-controls {
  position: relative;
  z-index: 10;                  /* lower than 20/21 above */
}

/* mobile absolute avatar should still sit on top */
@media (max-width: 768px) {
  .sticky-player .presenter-img-wrapper {
    position: absolute;         /* you already use absolute on mobile */
    z-index: 30;                /* higher on mobile just in case */
  }
}

/* -------------------------------------------
   CENTREFORCE PLAYER REDESIGN
------------------------------------------- */
.sticky-player {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 0 12px env(safe-area-inset-bottom);
  /* fully transparent — the .player-main card is the ONLY glass layer, so the
     player matches the single-layer top nav (no stacked scrim underneath it) */
  background: transparent !important;
  color: #f3f7fb;
  z-index: 9999;
  box-sizing: border-box;
  overflow: visible;
}

.sticky-player.show {
  opacity: 1;
  transform: translateY(0);
}

.sticky-player .player-main {
  position: relative;
  width: min(1360px, 100%);
  display: grid;
  gap: 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px 18px 0 0;
  /* flat dark glass — same as the top nav: rgba(10,14,18,0.92) + blur(10px),
     single layer (wrapper above is transparent). Player elements stay neon. */
  background: rgba(10, 14, 18, 0.92) !important;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Neon gradient line along the top edge — same as the footer's top line,
   1px thinner (footer is 2px). Transparent ends fade into the rounded corners. */
.sticky-player .player-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #00cae7 35%, #6ef6d4 65%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 6;
}

.sticky-player .player-primary {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 430px) minmax(280px, 1fr);
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.sticky-player .player-track {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sticky-player .player-artwork {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-player .player-center {
  display: grid;
  gap: 8px;
  min-width: 0;
  justify-items: center;
}

.sticky-player .player-spacer {
  min-height: 1px;
}

.sticky-player .play-controls {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 40px 52px 40px;
  column-gap: 10px;
  width: 100%;
}

.sticky-player .play-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  justify-self: center;
}

/* ===== Desktop waveform player mode — only added (via JS) when the show has peaks ===== */
.sticky-player .cf-desk-wave { display: none; }
@media (min-width: 768px) {
  .sticky-player.cf-wave-mode .player-primary {
    grid-template-columns: auto 1fr;   /* [artwork+meta] [play + waveform] */
    gap: 26px;
  }
  .sticky-player.cf-wave-mode .player-track { max-width: 360px; }
  .sticky-player.cf-wave-mode .player-spacer { display: none; }
  .sticky-player.cf-wave-mode .player-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    justify-items: initial;
  }
  /* collapse the transport to just the play button */
  .sticky-player.cf-wave-mode #seekControls {
    display: flex;
    width: auto;
    flex: 0 0 auto;
    grid-template-columns: none;
  }
  .sticky-player.cf-wave-mode #seekControls .seek-btn { display: none; }
  .sticky-player.cf-wave-mode #scrubberContainer { display: none !important; }
  .sticky-player.cf-wave-mode .cf-desk-wave {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
  }
  .sticky-player.cf-wave-mode .cf-desk-wave canvas {
    display: block;
    width: 100%;
    height: 56px;
    cursor: pointer;
  }
}

.sticky-player .play-btn {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #00cae7; /* solid neon — single circle that blends with the glow */
  box-shadow: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.sticky-player .play-btn::after {
  display: none;
}

.sticky-player .play-btn:hover {
  transform: scale(1.02);
  background: #19d3ef;
}

.sticky-player .play-btn:active {
  transform: translateY(0) scale(0.98);
}

.sticky-player #playIcon,
.sticky-player #pauseIcon {
  width: 26px;
  height: 26px;
  opacity: 1;
  position: relative;
  z-index: 2;
  filter: brightness(0) saturate(100%);
}

.sticky-player .spinner {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 22px !important;
  height: 22px !important;
  margin: 0;
  border-width: 2px !important;
  border-color: rgba(12, 18, 24, 0.14) !important;
  border-top-color: #0cb9d2 !important;
  transform: translate(-50%, -50%);
  animation: cf-spin 0.7s linear infinite !important;
}
/* keeps the spinner centred while it rotates (plain `spin` drops the translate) */
@keyframes cf-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.sticky-player .seek-controls {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 40px 52px 40px;
  column-gap: 10px;
  margin-top: 0;
  padding: 0;
  justify-self: center;
}

.sticky-player .seek-controls.is-live {
  grid-template-columns: 0 52px 0;
}

.sticky-player .seek-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sticky-player .seek-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.86;
}

.sticky-player .seek-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sticky-player .seek-controls #rewind10 {
  grid-column: 1;
}

.sticky-player .seek-controls #forward10 {
  grid-column: 3;
}

.sticky-player .seek-controls.is-live #rewind10,
.sticky-player .seek-controls.is-live #forward10 {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sticky-player .seek-controls.is-live .play-button-wrapper {
  grid-column: 2;
}

.sticky-player .seek-controls.is-listen-back {
  grid-template-columns: 40px 52px 40px;
}

.sticky-player .player-center > #seekControls {
  display: grid !important;
  align-items: center;
  justify-content: center;
  justify-self: center;
  grid-template-columns: 40px 52px 40px;
  column-gap: 10px;
}

.sticky-player .player-center > #seekControls > #rewind10,
.sticky-player .player-center > #seekControls > #forward10 {
  display: inline-flex !important;
}

.sticky-player .player-center > #seekControls > .play-button-wrapper,
.sticky-player .player-center > #seekControls > .play-button-wrapper > #playPauseBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
}

.sticky-player .player-center > #seekControls.is-live {
  grid-template-columns: 0 52px 0 !important;
}

.sticky-player .player-center > #seekControls.is-live > .play-button-wrapper {
  grid-column: 2 !important;
}

.sticky-player .player-center > #seekControls.is-live > #rewind10,
.sticky-player .player-center > #seekControls.is-live > #forward10 {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.sticky-player .player-center > #seekControls.is-listen-back {
  grid-template-columns: 40px 52px 40px !important;
}

.sticky-player .player-center > #seekControls.is-listen-back > #rewind10,
.sticky-player .player-center > #seekControls.is-listen-back > #forward10 {
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 40px !important;
  height: 40px !important;
  overflow: visible !important;
}

.sticky-player .player-meta-stack {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
}

.sticky-player .presenter-info {
  max-width: none;
  align-items: flex-start;
  width: 100%;
}

.sticky-player .presenter-text {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

.sticky-player .presenter-text strong,
.sticky-player .presenter-text small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.sticky-player .presenter-text strong {
  color: #f6fbff;
  font-family: 'SFProDisplay', 'Montserrat', sans-serif;
  font-size: clamp(0.96rem, 1vw, 1.08rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
}

.sticky-player .presenter-text small {
  margin: 0;
  color: #8e9aa6;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.07em;
  text-transform: uppercase !important;
}

.sticky-player .up-next {
  color: #c9d4dd !important;
}

.sticky-player .now-playing {
  color: #8ee8f0;
}

.sticky-player .now-playing:empty {
  display: none !important;
}

.sticky-player .live-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 0;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #f3f7fb;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
}

.sticky-player .live-pill {
  color: #00cae7;
}

.sticky-player .pulse-dot {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  margin-left: 0;
  border-radius: 50% !important;
  background: #ff2d2d !important;
  animation: onair-pulse 1.4s ease-out infinite;
}

@keyframes onair-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 45, 45, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 45, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 45, 0); }
}

.sticky-player .now-playing-btn {
  all: unset;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.sticky-player .now-playing-btn img {
  width: 14px;
  height: 14px;
  opacity: 0.82;
}

.sticky-player .now-playing-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sticky-player .player-artwork-card {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}

.sticky-player .presenter-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 0;
  z-index: 20;
}

.sticky-player .presenter-img,
.sticky-player .dual-presenter-img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  object-fit: cover;
  overflow: hidden;
  box-shadow: none;
}

.sticky-player .dual-presenter-img {
  display: flex;
}

.sticky-player .dual-presenter-img .half {
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.sticky-player .dual-presenter-img .half-left {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.sticky-player .audio-player-heart {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(11, 15, 19, 0.94);
  color: #f3f7fb;
  box-shadow: none;
}

.sticky-player .audio-player-heart .heart-icon {
  width: 12px;
  height: 12px;
  fill: rgba(255, 255, 255, 0.72);
}

.sticky-player .audio-player-heart.visible {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.sticky-player .scrubber-container {
  width: 100%;
  margin-top: 0;
  padding-bottom: 0;
}

.sticky-player .range-wrapper {
  position: relative;
  width: 100%;
  height: 12px;
  padding: 2px 0 0;
}

.sticky-player .progress-bar {
  top: 3px;
  left: 0;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00cae7 0%, #6ef6d4 100%);
  box-shadow: none;
}

.sticky-player .scrubber-container input[type=range] {
  top: -6px;
  height: 18px;
}

.sticky-player .scrubber-container input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.sticky-player .scrubber-container input[type=range]::-moz-range-track {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.sticky-player .scrubber-container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin-top: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.sticky-player .scrubber-container input[type=range]::-moz-range-thumb {
  appearance: none;
  width: 0;
  height: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.sticky-player .seek-tooltip {
  top: -30px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(5, 8, 11, 0.96);
  color: #f3f7fb;
  font-size: 10px;
  font-weight: 700;
}

.sticky-player .presenter-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sticky-player .presenter-link:hover {
  border-bottom-color: rgba(0, 202, 231, 0.44);
}

.sticky-player,
.sticky-player .presenter-text,
.sticky-player .presenter-img-wrapper,
.sticky-player .presenter-img-wrapper * {
  pointer-events: auto;
}

.sticky-player .presenter-info,
.sticky-player .presenter-text,
.sticky-player .presenter-link,
.sticky-player .presenter-img-wrapper,
.sticky-player .presenter-img-wrapper a.half,
.sticky-player .presenter-img-wrapper a {
  position: relative;
  z-index: 21;
}

.sticky-player .live-tag,
.sticky-player .now-playing-btn,
.sticky-player .play-controls,
.sticky-player .seek-controls {
  position: relative;
  z-index: 10;
}

@media (max-width: 900px) {
  .sticky-player {
    padding-left: 10px;
    padding-right: 10px;
  }

  .sticky-player .player-main {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }

  .sticky-player .player-primary {
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 360px);
    gap: 16px;
  }

  .sticky-player .player-spacer {
    display: none;
  }
}

@media (max-width: 767px) {
  /* ============================================================
     📱 App-style MINI DOCKED PLAYER
     Single compact row:  [artwork] [name / date·time] ... [⟲30 ▶ 30⟳]
     with a neon progress bar pinned to the very bottom edge.
     ============================================================ */
  .sticky-player {
    /* float the whole card up off the bottom edge + small side margins.
       env() is applied as a POSITION offset (bottom), NOT as padding, so the
       card keeps a constant size when Safari's toolbar collapses on scroll —
       otherwise the gap below it grows/shrinks and looks like a resize. */
    top: auto;
    /* shifted down ~24px from the previous "+ 8px" float so the card sits
       lower and closes most of the dead space below it. Tune this single
       value (less negative = higher, more negative = lower). */
    bottom: calc(env(safe-area-inset-bottom) - 4px);
    padding: 0 8px;
    align-items: stretch;
  }

  .sticky-player .player-main {
    position: relative;
    grid-template-columns: 1fr;
    padding: 11px 14px 30px; /* room at the BOTTOM for the seek bar */
    border-radius: 18px; /* all corners — floating card */
    overflow: hidden; /* clips the bottom progress bar to the card */
  }

  /* one row: left cluster grows, controls keep natural width */
  .sticky-player .player-primary {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .sticky-player .player-spacer { display: none; }

  /* LEFT: artwork + meta */
  .sticky-player .player-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    column-gap: 10px;
  }

  /* artwork — small rounded square */
  .sticky-player .player-artwork-card {
    width: 46px;
    height: 46px;
  }
  .sticky-player .presenter-img-wrapper {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    margin: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
  }
  .sticky-player .presenter-img,
  .sticky-player .dual-presenter-img {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
  }
  .sticky-player .audio-player-heart { display: none !important; }

  /* meta column: On Air pill (live only) / name / date·time */
  .sticky-player .player-meta-stack {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
  }
  .sticky-player .presenter-info {
    width: 100%;
    min-width: 0;
    max-width: none;
    display: block;
    text-align: left;
    align-items: flex-start;
  }
  .sticky-player .presenter-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    max-width: 100%;
    text-align: left;
  }
  .sticky-player .presenter-text strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
  .sticky-player #showTitle {
    display: block;
    margin: 0;
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-player .now-playing,
  .sticky-player .up-next { display: none !important; }

  .sticky-player .live-tag {
    margin: 0 0 1px;
    font-size: 0.56rem;
  }

  /* RIGHT: control cluster (rewind / play / forward) */
  .sticky-player .player-center {
    flex: 0 0 auto;
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .sticky-player .player-center > #seekControls {
    grid-template-columns: 38px 46px 38px !important;
    column-gap: 8px;
    justify-self: end;
    justify-content: end;
  }
  .sticky-player .player-center > #seekControls.is-live {
    grid-template-columns: 0 46px 0 !important;
    column-gap: 0;
  }
  .sticky-player .player-center > #seekControls.is-listen-back {
    grid-template-columns: 38px 46px 38px !important;
  }
  .sticky-player .seek-btn {
    width: 38px;
    height: 38px;
  }

  /* big NEON play button — the app's signature control */
  .sticky-player .play-btn {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #00cae7 0%, #19bce8 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 202, 231, 0.4);
  }
  .sticky-player .play-btn:hover {
    background: linear-gradient(135deg, #11d4ef 0%, #29c4ef 100%) !important;
  }
  .sticky-player #playIcon,
  .sticky-player #pauseIcon {
    width: 22px;
    height: 22px;
    filter: brightness(0) !important; /* black glyph on neon (Spotify-style) */
  }

  /* LIVE: full static neon bar at the bottom edge (the app shows this even
     when live, where there's nothing to seek). The real scrubber below is
     hidden in live mode, so this stands in for it. */
  .sticky-player:has(#seekControls.is-live) .player-main::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 11px; /* seek bar lives at the BOTTOM of the card */
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #00cae7, #6ef6d4);
    z-index: 4;
    pointer-events: none;
  }

  /* PROGRESS BAR (listen-back) — solid, full-width, finger-friendly.
     A clear 6px track sits just above the home indicator; the neon fill
     overlays it (top:0, same height) so the two always line up exactly.
     A tall (28px) transparent range input gives a big touch zone, and the
     thumb is a visible white knob you can grab anywhere along the bar. */
  .sticky-player .scrubber-container {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 11px; /* seek bar at the BOTTOM of the card */
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 5;
  }
  .sticky-player .range-wrapper {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22); /* solid, visible track */
    z-index: 1;
  }
  .sticky-player .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #00cae7, #6ef6d4) !important;
    z-index: 2;
    pointer-events: none;
  }
  /* big invisible touch zone, vertically centred on the 6px track */
  .sticky-player .scrubber-container input[type=range] {
    position: absolute;
    left: 0;
    bottom: -15px; /* centres the 36px input on the 6px track */
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    z-index: 6;
    pointer-events: auto;
    cursor: pointer;
  }
  .sticky-player .scrubber-container input[type=range]::-webkit-slider-runnable-track {
    height: 36px;
    background: transparent;
    border: none;
  }
  .sticky-player .scrubber-container input[type=range]::-moz-range-track {
    height: 36px;
    background: transparent;
    border: none;
  }
  /* invisible thumb — only the neon fill shows position, but the knob is kept
     large so the bar is still easy to drag with a finger */
  .sticky-player .scrubber-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    margin-top: 5px; /* centre the 26px grab area in the 36px track */
    border-radius: 50%;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
  }
  .sticky-player .scrubber-container input[type=range]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
  }
}

@media (max-width: 560px) {
  .sticky-player .player-main {
    /* constant padding — no env() here, or the card resizes as Safari's
       toolbar collapses on scroll (env is handled by .sticky-player bottom).
       Top padding holds the seek bar; small bottom padding above the safe-area. */
    padding: 11px 12px 30px;
  }

  .sticky-player .player-primary {
    gap: 10px;
  }

  .sticky-player .player-track {
    gap: 10px;
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .sticky-player .seek-controls {
    display: grid;
    grid-template-columns: 34px 46px 34px;
    column-gap: 6px;
    justify-self: center;
  }

  .sticky-player .player-center > #seekControls,
  .sticky-player .player-center > #seekControls.is-listen-back {
    grid-template-columns: 34px 46px 34px !important;
    column-gap: 6px;
  }

  .sticky-player .seek-btn {
    width: 34px;
    height: 34px;
  }

  .sticky-player .play-btn {
    width: 46px;
    height: 46px;
  }

  .sticky-player .seek-controls.is-live {
    grid-template-columns: 0 46px 0;
  }

  .sticky-player .player-center > #seekControls.is-live {
    grid-template-columns: 0 46px 0 !important;
  }

  .sticky-player .audio-player-heart {
    width: 22px;
    height: 22px;
  }

  .sticky-player .live-tag {
    font-size: 0.56rem;
  }

  .sticky-player .player-artwork-card {
    width: 44px;
    height: 44px;
  }
  .sticky-player .presenter-img-wrapper,
  .sticky-player .presenter-img,
  .sticky-player .dual-presenter-img {
    width: 44px;
    height: 44px;
  }

  .sticky-player .now-playing-btn {
    width: 20px;
    height: 20px;
  }

  .sticky-player .presenter-text strong {
    font-size: 12.5px !important;
  }

  .sticky-player .presenter-text small {
    font-size: 0.62rem !important;
  }

  .sticky-player .scrubber-container {
    width: 100%;
  }
}

/* › chevron after the player's artist name when it links to a profile
   (matches the show cards; appears for both live and listen-back). */
#presenterName:has(.presenter-link)::after {
  content: "\203A";
  display: inline-block;
  margin-left: 5px;
  font-size: 1.1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, color 0.2s ease;
}
#presenterName:has(.presenter-link:hover)::after {
  color: #00cae7;
  transform: translateX(3px);
}