/* Rastyle Player — Full Controls, Mobile-First Skin */

[hidden] {
  display: none !important;
}

/* --- 1. BASE STYLES (MOBILE-FIRST) --- */
#rpl-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483647;
  background: #121212;
  color: #fff;
  --rpl-accent-color: #1db954; /* Define accent color for reuse */
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .35);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem; /* REFINED: Reduced padding for a slimmer bar */
  gap: 0.4rem; /* REFINED: Slightly adjusted gap */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.25;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

/* Left Section */
#rpl-sticky-bar .rpl-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1 1 auto; }
/* REFINED: Reduced icon size for a more compact look */
#rpl-sticky-bar .rpl-icon, #rpl-sticky-bar .rpl-icon--placeholder { width: 32px; height: 32px; border-radius: 4px; background: #1f1f1f; object-fit: cover; flex-shrink: 0; }
#rpl-sticky-bar .rpl-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; overflow: hidden; } /* REFINED: Tightened gap */
#rpl-sticky-bar .rpl-title, #rpl-sticky-bar .rpl-now { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* REFINED: Reduced font size and weight for a less overpowering title */
#rpl-sticky-bar .rpl-title { font-size: 0.8125rem; font-weight: 600; }
/* REFINED: Reduced font size for better hierarchy */
#rpl-sticky-bar .rpl-now { font-size: 0.6875rem; opacity: .8; }

/* Right Section: Controls */
#rpl-sticky-bar .rpl-controls { display: flex; align-items: center; gap: 0.125rem; /* Tighter gap on smallest screens */ flex-shrink: 0; }
#rpl-sticky-bar .rpl-btn, #rpl-sticky-bar .rpl-icon-btn { appearance: none; border: 0; background: transparent; color: inherit; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all 0.15s ease; }
/* REFINED: Significantly smaller primary button for mobile */
#rpl-sticky-bar .rpl-btn--primary { width: 36px; height: 36px; }
#rpl-sticky-bar .rpl-btn--primary svg { width: 18px; height: 18px; }
/* REFINED: Slightly smaller secondary buttons for mobile */
#rpl-sticky-bar .rpl-btn--secondary, #rpl-sticky-bar #rpl-mute { width: 30px; height: 30px; opacity: 0.8; }
#rpl-sticky-bar .rpl-btn--secondary svg { width: 16px; height: 16px; }
#rpl-sticky-bar .rpl-btn:hover, #rpl-sticky-bar .rpl-icon-btn:hover { background: rgba(255, 255, 255, .1); opacity: 1; }
#rpl-sticky-bar .rpl-btn:focus-visible, #rpl-sticky-bar .rpl-icon-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .25); outline-offset: 2px; }

/* --- BUTTON STATE LOGIC --- */
#rpl-play-pause .rpl-icon-pause { display: none; }
#rpl-sticky-bar.is-playing #rpl-play-pause .rpl-icon-play { display: none; }
#rpl-sticky-bar.is-playing #rpl-play-pause .rpl-icon-pause { display: block; }

#rpl-shuffle.is-active { color: var(--rpl-accent-color); opacity: 1; }
#rpl-repeat .rpl-icon-repeat-one { display: none; }
#rpl-repeat.is-active-all { color: var(--rpl-accent-color); opacity: 1; }
#rpl-repeat.is-active-one { color: var(--rpl-accent-color); opacity: 1; }
#rpl-repeat.is-active-one .rpl-icon-repeat { display: none; }
#rpl-repeat.is-active-one .rpl-icon-repeat-one { display: block; }

#rpl-sticky-bar #rpl-volume { display: none; }

#rpl-sticky-bar #rpl-mute[aria-pressed="true"] .rpl-icon-sound { display: none; }
#rpl-sticky-bar #rpl-mute[aria-pressed="false"] .rpl-icon-mute { display: none; }

#rpl-ad-badge { font-size: 0.625rem; font-weight: 800; padding: 2px 6px; background: #ffd400; color: #000; border-radius: 4px; }

/* ENHANCEMENT: LOADING INDICATOR */
#rpl-sticky-bar.is-loading .rpl-btn--primary { animation: rpl-pulse 1.5s infinite ease-in-out; }
@keyframes rpl-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

/* ENHANCEMENT: MARQUEE FOR OVERFLOWING TEXT */
.rpl-marquee { display: inline-block; padding-left: 100%; animation: rpl-marquee-anim 15s linear infinite; }
@keyframes rpl-marquee-anim { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }

/* ENHANCEMENT: TOAST NOTIFICATION */
.rpl-toast { position: fixed; bottom: 80px; left: 50%; transform: translate(-50%, 10px); background-color: var(--rpl-accent-color); color: #fff; padding: 0.75rem 1.5rem; border-radius: 2rem; font-size: 0.875rem; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 2147483647; pointer-events: none; }
.rpl-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }


/* --- MEDIA QUERIES --- */
/* Restore original, larger sizes for tablets and desktops */
@media (min-width: 600px) {
  #rpl-sticky-bar { padding: 0.5rem 1rem; gap: 1rem; }
  #rpl-sticky-bar .rpl-controls { gap: 0.5rem; }
  #rpl-sticky-bar .rpl-icon, #rpl-sticky-bar .rpl-icon--placeholder { width: 36px; height: 36px; border-radius: 6px; }
  #rpl-sticky-bar .rpl-title { font-size: 0.875rem; font-weight: 700; }
  #rpl-sticky-bar .rpl-now { font-size: 0.75rem; opacity: .9; }
  #rpl-sticky-bar .rpl-btn--primary { width: 40px; height: 40px; }
  #rpl-sticky-bar .rpl-btn--primary svg { width: 20px; height: 20px; }
  #rpl-sticky-bar .rpl-btn--secondary, #rpl-sticky-bar #rpl-mute { width: 32px; height: 32px; }
  #rpl-sticky-bar .rpl-btn--secondary svg { width: 18px; height: 18px; }
}
@media (min-width: 821px) {
  #rpl-sticky-bar #rpl-volume { display: inline-block; width: 0; height: 28px; accent-color: var(--rpl-accent-color); margin: 0; opacity: 0; transition: width 0.3s ease, opacity 0.3s ease, margin 0.3s ease; }
  #rpl-sticky-bar .rpl-controls:hover #rpl-volume { width: 100px; opacity: 1; margin: 0 0.5rem; }
}

/* Optional Light Theme */
:root body.rpl-skin-light #rpl-sticky-bar { background: #fefefe; color: #0a0a0a; --rpl-accent-color: #2a79ff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .15); }
:root body.rpl-skin-light #rpl-sticky-bar .rpl-btn:hover,
:root body.rpl-skin-light #rpl-icon-btn:hover { background: rgba(0, 0, 0, .06); }