/* Naffin Radio Player Manager v1.1.0 */

body.nrpm-active .naffin-player{
  background:var(--nrpm-player-bg)!important;
  color:var(--nrpm-player-text)!important;
  border-color:var(--nrpm-border)!important;
  min-height:var(--nrpm-height)!important;
  padding-left:var(--nrpm-padding)!important;
  padding-right:var(--nrpm-padding)!important;
}

body.nrpm-active .naffin-player .naffin-pp,
body.nrpm-active .naffin-pp{
  width:var(--nrpm-play-desktop)!important;
  height:var(--nrpm-play-desktop)!important;
  min-width:var(--nrpm-play-desktop)!important;
  min-height:var(--nrpm-play-desktop)!important;
  border-radius:var(--nrpm-play-radius)!important;
  background:var(--nrpm-play-bg)!important;
  border:1px solid var(--nrpm-play-border)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

body.nrpm-active .naffin-player .naffin-pp::before,
body.nrpm-active .naffin-pp::before{
  border-left-color:var(--nrpm-accent)!important;
}

body.nrpm-active .naffin-player [class*="label"],
body.nrpm-active .naffin-player .naffin-onair{
  font-size:var(--nrpm-label-size)!important;
}

body.nrpm-active .naffin-player [class*="title"],
body.nrpm-active .naffin-player .naffin-current{
  font-size:var(--nrpm-title-size)!important;
}

body.nrpm-active .naffin-next,
body.nrpm-active .naffin-upnext,
body.nrpm-active [class*="upnext"]{
  font-size:var(--nrpm-upnext-size)!important;
}

body.nrpm-active .nrpm-wave-reactive{
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

body.nrpm-active .nrpm-wave-reactive.nrpm-wave-on{
  animation:nrpmWavePulse var(--nrpm-speed,.55s) ease-in-out infinite alternate;
}

@keyframes nrpmWavePulse{
  from{transform:scaleY(var(--nrpm-min,.45));opacity:var(--nrpm-opacity,.65)}
  to{transform:scaleY(var(--nrpm-max,1));opacity:1}
}

@media(max-width:767px){
  body.nrpm-active .naffin-player .naffin-pp,
  body.nrpm-active .naffin-pp{
    width:var(--nrpm-play-mobile)!important;
    height:var(--nrpm-play-mobile)!important;
    min-width:var(--nrpm-play-mobile)!important;
    min-height:var(--nrpm-play-mobile)!important;
  }
}


/* =========================================================
   v1.2.0 — MOBILE PLAY EXACT CLEAN STYLE + FORCE UP NEXT
   ========================================================= */
@media (max-width: 767px){

  /* Replace any old icon/image inside the play button. */
  body.nrpm-active .naffin-pp *,
  body.nrpm-active .naffin-player .naffin-pp *{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }

  body.nrpm-active .naffin-pp,
  body.nrpm-active .naffin-player .naffin-pp{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.32)!important;
    border-radius:50%!important;
    background:#000!important;
    background-image:none!important;
    box-shadow:none!important;
    outline:none!important;
    overflow:hidden!important;
    color:transparent!important;
    text-indent:-9999px!important;
    font-size:0!important;
    line-height:0!important;
    appearance:none!important;
    -webkit-appearance:none!important;
  }

  /* Clean white triangle like the reference screenshot. */
  body.nrpm-active .naffin-pp::before,
  body.nrpm-active .naffin-player .naffin-pp::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    transform:translate(-38%,-50%)!important;
    border-top:9px solid transparent!important;
    border-bottom:9px solid transparent!important;
    border-left:14px solid #fff!important;
    border-right:0!important;
    background:none!important;
    box-shadow:none!important;
  }

  /* Pause state: two white bars. */
  body.nrpm-active .naffin-pp.nrpm-playing::before,
  body.nrpm-active .naffin-player.nrpm-playing .naffin-pp::before{
    width:14px!important;
    height:18px!important;
    transform:translate(-50%,-50%)!important;
    border:0!important;
    background:
      linear-gradient(
        90deg,
        #fff 0 4px,
        transparent 4px 10px,
        #fff 10px 14px
      )!important;
  }

  /* Force UP NEXT visible on mobile, regardless of old theme media queries. */
  body.nrpm-active .naffin-next,
  body.nrpm-active .naffin-upnext,
  body.nrpm-active .naffin-player-next,
  body.nrpm-active [class*="upnext"],
  body.nrpm-active [class*="up-next"]{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    height:auto!important;
    max-height:none!important;
    width:auto!important;
    max-width:none!important;
    overflow:visible!important;
    clip:auto!important;
    clip-path:none!important;
    pointer-events:auto!important;
  }

  /* Player mobile layout: play + ON AIR on first row, UP NEXT always below/right. */
  body.nrpm-active .naffin-player{
    display:grid!important;
    grid-template-columns:56px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:14px!important;
    row-gap:8px!important;
    align-items:center!important;
  }

  body.nrpm-active .naffin-player .naffin-pp{
    grid-column:1!important;
    grid-row:1!important;
  }

  body.nrpm-active .naffin-player .naffin-now,
  body.nrpm-active .naffin-player .naffin-current,
  body.nrpm-active .naffin-player [class*="onair-wrap"],
  body.nrpm-active .naffin-player [class*="current-wrap"]{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
  }

  body.nrpm-active .naffin-player .naffin-next,
  body.nrpm-active .naffin-player .naffin-upnext,
  body.nrpm-active .naffin-player .naffin-player-next,
  body.nrpm-active .naffin-player [class*="upnext"],
  body.nrpm-active .naffin-player [class*="up-next"]{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    align-self:start!important;
    margin:0!important;
    padding:0!important;
    text-align:left!important;
  }
}


/* v1.2.1 — Move UP NEXT left on mobile, reserve cookie-logo safe area */
@media (max-width: 767px){
  body.nrpm-active .naffin-player .naffin-next,
  body.nrpm-active .naffin-player .naffin-upnext,
  body.nrpm-active .naffin-player .naffin-player-next,
  body.nrpm-active .naffin-player [class*="upnext"],
  body.nrpm-active .naffin-player [class*="up-next"]{
    justify-self:start!important;
    align-self:start!important;
    text-align:left!important;
    width:auto!important;
    max-width:calc(100vw - 120px)!important;
    margin-left:0!important;
    margin-right:90px!important;
    padding-right:0!important;
    transform:translateX(-18px)!important;
  }

  /* Keep its inner text left-aligned too */
  body.nrpm-active .naffin-player .naffin-next *,
  body.nrpm-active .naffin-player .naffin-upnext *,
  body.nrpm-active .naffin-player .naffin-player-next *,
  body.nrpm-active .naffin-player [class*="upnext"] *,
  body.nrpm-active .naffin-player [class*="up-next"] *{
    text-align:left!important;
  }
}

/* =========================================================
   v1.2.2 — ON AIR / UP NEXT symmetry + clearer spacing
   ========================================================= */
body.nrpm-active .naffin-player .naffin-meta,
body.nrpm-active .naffin-player .naffin-next{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-width:0!important;
  text-align:left!important;
}

/* Same vertical rhythm for the two status blocks. */
body.nrpm-active .naffin-player .naffin-meta > span,
body.nrpm-active .naffin-player .naffin-next > span{
  display:block!important;
  margin:0 0 12px 0!important;
  padding:0!important;
  line-height:1!important;
  font-size:var(--nrpm-label-size)!important;
  color:var(--nrpm-accent)!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
}

body.nrpm-active .naffin-player .naffin-meta > strong,
body.nrpm-active .naffin-player .naffin-next > strong{
  display:block!important;
  margin:0!important;
  padding:0!important;
  line-height:1.08!important;
  color:var(--nrpm-player-text)!important;
  font-size:var(--nrpm-title-size)!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:100%!important;
}

body.nrpm-active .naffin-player .naffin-meta > small,
body.nrpm-active .naffin-player .naffin-next > small,
body.nrpm-active .naffin-player .nrpm-upnext-time{
  display:block!important;
  margin:10px 0 0 0!important;
  padding:0!important;
  line-height:1.1!important;
  color:#8f8f8f!important;
  font-size:calc(var(--nrpm-upnext-size) - 1px)!important;
  font-weight:400!important;
  white-space:nowrap!important;
}

/* Desktop: ON AIR and UP NEXT occupy equivalent information columns. */
@media (min-width:768px){
  body.nrpm-active .naffin-player{
    grid-template-columns:var(--nrpm-play-desktop) minmax(260px,360px) 1fr minmax(220px,320px)!important;
    column-gap:22px!important;
    align-items:center!important;
  }
  body.nrpm-active .naffin-player .naffin-next{
    justify-self:start!important;
    align-self:center!important;
    margin:0!important;
    transform:none!important;
  }
}

/* Mobile keeps the established 1.2.1 left position but uses the same vertical hierarchy. */
@media (max-width:767px){
  body.nrpm-active .naffin-player .naffin-next,
  body.nrpm-active .naffin-player .naffin-upnext,
  body.nrpm-active .naffin-player .naffin-player-next{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:0!important;
  }
  body.nrpm-active .naffin-player .naffin-next > span,
  body.nrpm-active .naffin-player .naffin-upnext > span,
  body.nrpm-active .naffin-player .naffin-player-next > span{
    margin-bottom:10px!important;
  }
}


/* =========================================================
   v1.2.3 — MOBILE: ON AIR + UP NEXT SIDE BY SIDE
   Approved layout: current programme left, next programme
   immediately to its right, with safe space for cookie icon.
   Active play/pause ring + symbol become orange.
   DESKTOP IS UNCHANGED.
   ========================================================= */
@media (max-width:767px){
  /* Compact horizontal mobile grid. */
  body.nrpm-active .naffin-player{
    display:grid!important;
    grid-template-columns:56px minmax(112px,1.15fr) minmax(88px,.85fr)!important;
    grid-template-rows:auto!important;
    column-gap:14px!important;
    row-gap:0!important;
    align-items:center!important;
    justify-content:start!important;
    padding-left:16px!important;
    padding-right:68px!important; /* safe area for the floating cookie/privacy icon */
  }

  body.nrpm-active .naffin-player .naffin-pp{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:start!important;
  }

  /* Current programme: ON AIR / title / time. */
  body.nrpm-active .naffin-player .naffin-meta{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:stretch!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  /* Next programme immediately to the right of the current one. */
  body.nrpm-active .naffin-player .naffin-next,
  body.nrpm-active .naffin-player .naffin-upnext,
  body.nrpm-active .naffin-player .naffin-player-next{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0 0 0 14px!important;
    border-left:1px solid rgba(255,255,255,.08)!important;
    transform:none!important;
    text-align:left!important;
  }

  /* Undo the old second-row/left-shift rules from 1.2.0/1.2.1. */
  body.nrpm-active .naffin-player .naffin-next *,
  body.nrpm-active .naffin-player .naffin-upnext *,
  body.nrpm-active .naffin-player .naffin-player-next *{
    text-align:left!important;
  }

  /* Keep both blocks compact and visually matched on phones. */
  body.nrpm-active .naffin-player .naffin-meta > span,
  body.nrpm-active .naffin-player .naffin-next > span,
  body.nrpm-active .naffin-player .naffin-upnext > span,
  body.nrpm-active .naffin-player .naffin-player-next > span{
    margin-bottom:8px!important;
    white-space:nowrap!important;
  }

  body.nrpm-active .naffin-player .naffin-meta > strong,
  body.nrpm-active .naffin-player .naffin-next > strong,
  body.nrpm-active .naffin-player .naffin-upnext > strong,
  body.nrpm-active .naffin-player .naffin-player-next > strong{
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.nrpm-active .naffin-player .naffin-meta > small,
  body.nrpm-active .naffin-player .naffin-next > small,
  body.nrpm-active .naffin-player .naffin-upnext > small,
  body.nrpm-active .naffin-player .naffin-player-next > small,
  body.nrpm-active .naffin-player .nrpm-upnext-time{
    margin-top:8px!important;
    white-space:nowrap!important;
  }

  /* PLAYING STATE: both circle and pause symbol use the brand orange. */
  body.nrpm-active .naffin-pp.nrpm-playing,
  body.nrpm-active .naffin-player.nrpm-playing .naffin-pp{
    border-color:var(--nrpm-accent)!important;
    box-shadow:none!important;
  }

  body.nrpm-active .naffin-pp.nrpm-playing::before,
  body.nrpm-active .naffin-player.nrpm-playing .naffin-pp::before{
    background:
      linear-gradient(
        90deg,
        var(--nrpm-accent) 0 4px,
        transparent 4px 10px,
        var(--nrpm-accent) 10px 14px
      )!important;
  }
}

/* Very narrow phones: slightly tighten spacing, still side by side. */
@media (max-width:390px){
  body.nrpm-active .naffin-player{
    grid-template-columns:54px minmax(104px,1.12fr) minmax(80px,.88fr)!important;
    column-gap:11px!important;
    padding-left:12px!important;
    padding-right:58px!important;
  }
  body.nrpm-active .naffin-player .naffin-next,
  body.nrpm-active .naffin-player .naffin-upnext,
  body.nrpm-active .naffin-player .naffin-player-next{
    padding-left:11px!important;
  }
}


/* =========================================================
   v1.2.4 — MOBILE: align UP NEXT time exactly under title
   ========================================================= */
@media (max-width:767px){
  body.nrpm-active .naffin-player .naffin-next,
  body.nrpm-active .naffin-player .naffin-upnext,
  body.nrpm-active .naffin-player .naffin-player-next{
    justify-content:center!important;
  }

  body.nrpm-active .naffin-player .naffin-next > span,
  body.nrpm-active .naffin-player .naffin-next > strong,
  body.nrpm-active .naffin-player .naffin-next > small,
  body.nrpm-active .naffin-player .naffin-upnext > span,
  body.nrpm-active .naffin-player .naffin-upnext > strong,
  body.nrpm-active .naffin-player .naffin-upnext > small,
  body.nrpm-active .naffin-player .naffin-player-next > span,
  body.nrpm-active .naffin-player .naffin-player-next > strong,
  body.nrpm-active .naffin-player .naffin-player-next > small,
  body.nrpm-active .naffin-player .nrpm-upnext-time{
    display:block!important;
    width:100%!important;
    margin-left:0!important;
    padding-left:0!important;
    text-indent:0!important;
    align-self:flex-start!important;
    justify-self:start!important;
    transform:none!important;
    left:auto!important;
  }

  body.nrpm-active .naffin-player .naffin-next > small,
  body.nrpm-active .naffin-player .naffin-upnext > small,
  body.nrpm-active .naffin-player .naffin-player-next > small,
  body.nrpm-active .naffin-player .nrpm-upnext-time{
    margin-top:8px!important;
    position:relative!important;
  }
}


/* v1.2.6 — Schedule clickable DJ / Show names */
body.nrpm-active .naffin-schedule .nrpm-schedule-link{
  color:inherit!important;
  text-decoration:none!important;
  transition:color .18s ease!important;
  cursor:pointer!important;
}
body.nrpm-active .naffin-schedule .nrpm-schedule-link:hover,
body.nrpm-active .naffin-schedule .nrpm-schedule-link:focus-visible{
  color:var(--nrpm-accent,#ed6413)!important;
  text-decoration:none!important;
}