/* RELAX FM sticky player final cascade layer.
   Loaded after page CSS so homepage rfm-home.css cannot restore old station rail rules. */

@media (max-width: 768px) {
  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-count-1,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher.rfm-stations-count-1,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail.rfm-stations-count-1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-count-2,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher.rfm-stations-count-2,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail.rfm-stations-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab img,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab img,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab::after,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab::after,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab::after {
    content: attr(aria-label) !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    color: inherit !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 380px) {
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    gap: 6px !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab {
    padding-left: 5px !important;
    padding-right: 5px !important;
    gap: 4px !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab img,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab img,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-basis: 20px !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab::after,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab::after,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab::after {
    font-size: 7px !important;
    letter-spacing: 0.01em !important;
  }
}


/* Step 1.0.376 - Mobile sticky player independent rows.
   The station buttons must not react to current title/artist length. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px 34px !important;
    row-gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
  }

  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: 52px 52px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    gap: 9px !important;
    align-items: center !important;
    justify-items: start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn {
    grid-column: 1 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    flex: 0 0 52px !important;
    align-self: center !important;
    justify-self: start !important;
  }

  #rfp-sticky-bar .rfm-sticky-brand-logo-frame {
    grid-column: 2 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    flex: 0 0 52px !important;
    align-self: center !important;
    justify-self: start !important;
  }

  #rfp-sticky-bar .rfm-sticky-text-block {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    align-self: center !important;
    justify-self: stretch !important;
  }

  #rfp-sticky-bar #sticky-song-title,
  #rfp-sticky-bar #sticky-artist-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  #rfp-sticky-bar #sticky-song-title {
    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  #rfp-sticky-bar #sticky-artist-title {
    font-size: 12px !important;
    line-height: 1.16 !important;
  }

  #rfp-sticky-bar .rfm-sticky-mobile-trigger {
    display: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    align-content: stretch !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-count-1,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher.rfm-stations-count-1,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail.rfm-stations-count-1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-count-2,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher.rfm-stations-count-2,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail.rfm-stations-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex: none !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

@media (max-width: 380px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    grid-template-rows: 50px 32px !important;
    row-gap: 9px !important;
  }

  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block {
    grid-template-columns: 48px 48px minmax(0, 1fr) !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    gap: 8px !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn,
  #rfp-sticky-bar .rfm-sticky-brand-logo-frame {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
  }

  #rfp-sticky-bar #sticky-song-title { font-size: 14px !important; }
  #rfp-sticky-bar #sticky-artist-title { font-size: 11px !important; }

  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail,
  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
}

/* Step 1.0.377 - Mobile sticky unified surface.
   Keep the mobile sticky player as one glass card. Inner rows must not add
   a second translucent panel, so the top player row and station row read as
   the same surface. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    box-shadow: 0 -12px 34px rgba(38, 28, 29, 0.10) !important;
    backdrop-filter: blur(24px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner,
  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block,
  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block {
    padding: 0 !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    padding: 0 !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab {
    background: rgba(255, 255, 255, 0.52) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    box-shadow: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    background: #d2042b !important;
    border-color: rgba(210, 4, 43, 0.82) !important;
    box-shadow: 0 8px 18px rgba(210, 4, 43, 0.16) !important;
  }
}

/* Step 1.0.378 - Mobile sticky station surface neutrality.
   The station row is part of the same glass card. Do not let station tabs,
   especially the active red tab, create a separate translucent band or blush. */
@media (max-width: 768px) {
  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    background: #d2042b !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }
}


/* Step 1.0.379 - Mobile sticky station row must not create a second surface after JS renders stations.
   JS renders station buttons after load and toggles the active class. The active state must not turn
   into a solid/red pill or add shadows, because that reads as a different translucent band inside
   the glass card. Keep all station slots on the same transparent surface and show active state only
   with text color and a small underline. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    background: rgba(255, 255, 255, 0.82) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    overflow: hidden !important;
  }

  #rfp-sticky-bar #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner,
  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block,
  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab,
  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    position: relative !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    color: #6b6061 !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    color: #d2042b !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab::before,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab::before,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab::before {
    content: "" !important;
    position: absolute !important;
    left: 18% !important;
    right: 18% !important;
    bottom: 0 !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active::before,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active::before,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active::before {
    background: #d2042b !important;
    opacity: 1 !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab::after,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab::after,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab::after {
    color: inherit !important;
  }
}


/* Step 1.0.380 - Mobile sticky solid surface.
   The previous unified glass card was technically one surface, but because it
   was transparent and blurred the page behind it, the upper row and station row
   could still look different whenever different page content sat behind them.
   On mobile the sticky player must read as one stable card, so the outer card
   gets an almost solid white surface and inner rows remain transparent. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 -12px 34px rgba(38, 28, 29, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner,
  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block,
  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn,
  #rfp-sticky-bar .rfm-sticky-brand-logo-frame {
    box-shadow: none !important;
  }
}


/* Step 1.0.381 - Mobile sticky Relax FM glass-solid surface.
   Keep the unified, non-shifting surface from 1.0.380, but make it visually
   belong to the Relax FM floating header language. The surface is intentionally
   almost opaque: enough glass/rose character to match the header, but not
   transparent enough for different page content behind the upper/lower rows to
   create a visible opacity split. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.965) 0%,
      rgba(255, 250, 251, 0.945) 48%,
      rgba(255, 246, 248, 0.935) 100%) !important;
    background-color: #fffafa !important;
    background-image: linear-gradient(135deg,
      rgba(255, 255, 255, 0.965) 0%,
      rgba(255, 250, 251, 0.945) 48%,
      rgba(255, 246, 248, 0.935) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    box-shadow:
      0 -14px 38px rgba(38, 28, 29, 0.105),
      0 -3px 14px rgba(210, 4, 43, 0.040),
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(210, 4, 43, 0.030) !important;
    backdrop-filter: blur(10px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
  }

  #rfp-sticky-bar::before,
  #rfp-sticky-bar.expanded::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 12% 10%, rgba(210, 4, 43, 0.045), transparent 34%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.00) 58%) !important;
    opacity: 1 !important;
    z-index: 0 !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    position: relative !important;
    z-index: 1 !important;
  }

  #rfp-sticky-bar #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner,
  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block,
  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn,
  #rfp-sticky-bar .rfm-sticky-brand-logo-frame {
    background: rgba(255, 255, 255, 0.52) !important;
    border: 1px solid rgba(210, 4, 43, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn svg,
  #rfp-sticky-bar #rfp-sticky-btn #sticky-play-ico,
  #rfp-sticky-bar #rfp-sticky-btn #sticky-stop-ico {
    color: #d2042b !important;
    fill: #d2042b !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab,
  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    color: #d2042b !important;
  }
}

/* Step 1.0.382 - Mobile sticky header-matched unified glass.
   Match the mobile floating header transparency again, but keep the player as one
   visual surface: backdrop/filter only on the outer card, no vertical/radial
   inner wash, and no backgrounds on the two rows or station tabs. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.34)) !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.34)) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      0 -16px 44px rgba(38, 28, 29, 0.12),
      0 -4px 16px rgba(210, 4, 43, 0.045),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(9px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(150%) !important;
    isolation: isolate !important;
  }

  #rfp-sticky-bar::before,
  #rfp-sticky-bar.expanded::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: rgba(255, 255, 255, 0.055) !important;
    opacity: 1 !important;
  }

  #rfp-sticky-bar::after,
  #rfp-sticky-bar.expanded::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035)) !important;
    opacity: 0.55 !important;
  }

  #rfp-sticky-bar #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    background-image: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block,
  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn,
  #rfp-sticky-bar .rfm-sticky-brand-logo-frame {
    background: rgba(255, 255, 255, 0.30) !important;
    border: 1px solid rgba(210, 4, 43, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab,
  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Step 1.0.383 - Mobile station tabs get subtle individual Relax FM frames.
   Keep the unified header-like glass surface from 1.0.382, but make the three
   station tabs slightly larger and easier to tap/read. The frames are local to
   each tab and do not create a second row background, so the player surface
   remains visually unified. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    padding: 8px 10px 9px !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    grid-template-rows: 52px 38px !important;
    row-gap: 9px !important;
  }

  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    gap: 9px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab,
  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 7px !important;
    gap: 6px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.10)) !important;
    border: 1px solid rgba(255, 255, 255, 0.44) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    color: #d2042b !important;
    background: rgba(255, 255, 255, 0.25) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 248, 250, 0.16)) !important;
    border-color: rgba(210, 4, 43, 0.20) !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab img,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab img,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab::after,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab::after,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab::after {
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.015em !important;
    font-weight: 900 !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab::before,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab::before,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab::before {
    left: 22% !important;
    right: 22% !important;
    bottom: 3px !important;
    height: 2px !important;
  }
}

@media (max-width: 380px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    grid-template-rows: 50px 36px !important;
    row-gap: 8px !important;
  }

  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    gap: 7px !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab,
  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab.active,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab.active,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab.active {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 5px !important;
    gap: 4px !important;
    border-radius: 13px !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab img,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab img,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex-basis: 24px !important;
  }

  #rfp-sticky-bar .rfm-sticky-stations-switcher .rfm-station-tab::after,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher .rfm-station-tab::after,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail .rfm-station-tab::after {
    font-size: 8px !important;
    letter-spacing: 0.005em !important;
  }
}


/* Step 1.0.384 - Mobile sticky station row bottom gap trim.
   Keep the 1.0.382 header-like glass and 1.0.383 individual station frames,
   but move the station row slightly closer to the bottom edge so the lower
   glass padding does not look heavier than the top spacing. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    padding: 8px 10px 5px !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    grid-template-rows: 52px 38px !important;
    row-gap: 7px !important;
    align-content: start !important;
  }

  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

@media (max-width: 380px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    padding-top: 7px !important;
    padding-bottom: 4px !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    grid-template-rows: 50px 36px !important;
    row-gap: 6px !important;
    align-content: start !important;
  }
}

/* Step 1.0.385 - Mobile sticky equal top/bottom air.
   Keep the 1.0.382 header-like unified glass and 1.0.383 station tab frames,
   but stop using a fixed oversized card height that leaves extra empty glass
   under the station row. The card now sizes from the two rows plus equal
   vertical padding, so the bottom air visually matches the top air. */
@media (max-width: 768px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: 52px 38px !important;
    row-gap: 7px !important;
    align-content: start !important;
    justify-content: stretch !important;
    box-sizing: border-box !important;
  }

  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  body {
    padding-bottom: 126px !important;
  }
}

@media (max-width: 380px) {
  #rfp-sticky-bar,
  #rfp-sticky-bar.expanded {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 7px 9px !important;
  }

  #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    grid-template-rows: 50px 36px !important;
    row-gap: 6px !important;
  }

  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  #rfp-sticky-bar .rfm-sticky-right-controls-group,
  #rfp-sticky-bar.expanded .rfm-sticky-right-controls-group,
  #rfp-sticky-bar .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.expanded .rfm-sticky-stations-switcher,
  body #rfp-sticky-bar .rfm-sticky-stations-switcher.rfm-stations-rail {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  body {
    padding-bottom: 118px !important;
  }
}


/* Step 1.0.386 - Mobile sticky play/stop button fit.
   After tap, mobile browsers can keep :focus/:active on the sticky button. Older
   hover/focus rules scale the button, which makes the circular frame touch or clip
   against the 52px player row. Keep the button and logo visually equal, but give
   both a 1px safety inset and disable mobile transform scaling. */
@media (max-width: 768px) {
  #rfp-sticky-bar #rfp-sticky-inner,
  #rfp-sticky-bar.expanded #rfp-sticky-inner {
    grid-template-rows: 52px 38px !important;
  }

  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block {
    grid-template-columns: 50px 50px minmax(0, 1fr) !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn,
  #rfp-sticky-bar .rfm-sticky-brand-logo-frame {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    flex: 0 0 50px !important;
    align-self: center !important;
    justify-self: center !important;
    box-sizing: border-box !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn:hover,
  #rfp-sticky-bar #rfp-sticky-btn:focus,
  #rfp-sticky-bar #rfp-sticky-btn:focus-visible,
  #rfp-sticky-bar #rfp-sticky-btn:active {
    transform: none !important;
    outline: none !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn svg,
  #rfp-sticky-bar #rfp-sticky-btn #sticky-play-ico,
  #rfp-sticky-bar #rfp-sticky-btn #sticky-stop-ico {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block;
    margin: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn #sticky-play-ico {
    width: 18px !important;
    height: 18px !important;
    left: 52% !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn #sticky-stop-ico {
    width: 12px !important;
    height: 12px !important;
    left: 50% !important;
  }
}

@media (max-width: 380px) {
  #rfp-sticky-bar .rfm-sticky-meta-block,
  #rfp-sticky-bar.expanded .rfm-sticky-meta-block {
    grid-template-columns: 48px 48px minmax(0, 1fr) !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn,
  #rfp-sticky-bar .rfm-sticky-brand-logo-frame {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn #sticky-play-ico {
    width: 17px !important;
    height: 17px !important;
  }

  #rfp-sticky-bar #rfp-sticky-btn #sticky-stop-ico {
    width: 11px !important;
    height: 11px !important;
  }
}


/* Step 1.0.387 - Mobile rating row support.
   The Song Ratings plugin v0.11.16 inserts the air-rating slot as an independent
   middle row. Keep the player as one unified glass card and do not let the
   rating row replace or push the three station tabs. */
@media (max-width: 768px) {
  #rfp-sticky-bar.rfm-rating-mobile-active,
  #rfp-sticky-bar.expanded.rfm-rating-mobile-active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 10px !important;
    overflow: visible !important;
  }

  #rfp-sticky-bar.rfm-rating-mobile-active #rfp-sticky-inner,
  #rfp-sticky-bar #rfp-sticky-inner.rfm-rating-mobile-active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px 52px 38px !important;
    row-gap: 7px !important;
    height: auto !important;
    align-content: start !important;
    align-items: stretch !important;
  }

  #rfp-sticky-bar.rfm-rating-mobile-active .rfm-song-rating-mobile-slot {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    width: 100% !important;
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #rfp-sticky-bar.rfm-rating-mobile-active .rfm-sticky-right-controls-group {
    grid-row: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #rfp-sticky-bar.rfm-rating-mobile-active .rfm-sticky-stations-switcher,
  #rfp-sticky-bar.rfm-rating-mobile-active .rfm-sticky-stations-switcher.rfm-stations-rail {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.rfm-rating-mobile-active,
  body:has(#rfp-sticky-bar.rfm-rating-mobile-active) {
    padding-bottom: 182px !important;
  }
}

@media (max-width: 380px) {
  #rfp-sticky-bar.rfm-rating-mobile-active #rfp-sticky-inner,
  #rfp-sticky-bar #rfp-sticky-inner.rfm-rating-mobile-active {
    grid-template-rows: 50px 50px 36px !important;
    row-gap: 6px !important;
  }

  #rfp-sticky-bar.rfm-rating-mobile-active .rfm-song-rating-mobile-slot {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  body.rfm-rating-mobile-active,
  body:has(#rfp-sticky-bar.rfm-rating-mobile-active) {
    padding-bottom: 172px !important;
  }
}

/* v1.0.462 - Relax FM audio stream loading animation.
   Visual-only status for the play buttons: no now-playing text changes. */
#rfp-sticky-bar #rfp-sticky-btn,
#rfm-playbtn {
  position: relative !important;
  overflow: visible !important;
}

#rfp-sticky-bar #rfp-sticky-btn.is-loading,
#rfm-playbtn.is-loading {
  pointer-events: auto !important;
}

#rfp-sticky-bar #rfp-sticky-btn.is-loading #sticky-play-ico,
#rfp-sticky-bar #rfp-sticky-btn.is-loading #sticky-stop-ico,
#rfm-playbtn.is-loading #hero-play-ico,
#rfm-playbtn.is-loading #hero-stop-ico {
  opacity: 0 !important;
  visibility: hidden !important;
}

#rfp-sticky-bar #rfp-sticky-btn.is-loading::before,
#rfm-playbtn.is-loading::before {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(210, 4, 43, 0.18) 0, rgba(210, 4, 43, 0.08) 42%, rgba(210, 4, 43, 0) 72%) !important;
  animation: rfmLiveButtonPulse 1.35s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}


/* v1.0.463 - keep first-click loading rings perfectly centered.
   Play triangles stay optically shifted; circular loaders stay mathematically centered. */
#rfp-sticky-bar #rfp-sticky-btn.is-loading::after,
#rfm-playbtn.is-loading::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  transform-origin: center center !important;
  border-radius: 999px !important;
  border: 2px solid rgba(210, 4, 43, 0.18) !important;
  border-top-color: #D2042B !important;
  border-right-color: rgba(210, 4, 43, 0.72) !important;
  box-shadow: 0 0 0 5px rgba(210, 4, 43, 0.045) !important;
  animation: rfmLiveButtonSpin 0.78s linear infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#rfm-playbtn.is-loading::after {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  transform-origin: center center !important;
  border-width: 2.5px !important;
}

#rfp-sticky-bar #rfp-sticky-btn.is-loading > *,
#rfm-playbtn.is-loading > * {
  position: relative;
  z-index: 1;
}

@keyframes rfmLiveButtonSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rfmLiveButtonPulse {
  0%, 100% { opacity: 0.52; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 768px) {
  #rfp-sticky-bar #rfp-sticky-btn.is-loading::after {
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
    transform-origin: center center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #rfp-sticky-bar #rfp-sticky-btn.is-loading::before,
  #rfm-playbtn.is-loading::before,
  #rfp-sticky-bar #rfp-sticky-btn.is-loading::after,
  #rfm-playbtn.is-loading::after {
    animation-duration: 1.8s !important;
  }
}

/* v1.0.573 - experimental mobile sticky player uses current track artwork when available. */
@media (max-width: 768px) {
  #rfp-sticky-bar .rfm-sticky-brand-logo-frame.has-track-artwork {
    border-radius: 14px !important;
    background: rgba(255,255,255,0.62) !important;
    border: 1px solid rgba(210,4,53,0.14) !important;
    box-shadow: 0 8px 18px rgba(38,28,29,0.08), inset 0 1px 0 rgba(255,255,255,0.72) !important;
    overflow: hidden !important;
  }
  #rfp-sticky-bar .rfm-sticky-brand-logo-frame.has-track-artwork img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}