/* ═══════════════════════════════════════════
   Radio Stream Player — Frontend Styles
   Servidores Seguros INC
   v1.3 — Full isolation mode
═══════════════════════════════════════════ */

:root {
    --rsp-bg:     #1a1a2e;
    --rsp-accent: #e94560;
    --rsp-text:   #ffffff;
    --rsp-bar-h:  64px;
    --rsp-z:      99999;
}

/* ════════════════════════════════════════
   RESET TOTAL — everything inside #rsp-player
   starts from zero, ignores theme styles
════════════════════════════════════════ */
#rsp-player, #rsp-player * {
    all: initial;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ── Wrapper ── */
#rsp-player {
    display:      block    !important;
    position:     fixed    !important;
    bottom:       0        !important;
    left:         0        !important;
    right:        0        !important;
    width:        100%     !important;
    background:   var(--rsp-bg)   !important;
    color:        var(--rsp-text) !important;
    box-shadow:   0 -3px 20px rgba(0,0,0,.45) !important;
    z-index:      var(--rsp-z)    !important;
    transition:   transform .3s ease !important;
}

body { padding-bottom: var(--rsp-bar-h) !important; }
body.rsp-minimized { padding-bottom: 0 !important; }

/* ════════════════════
   BAR
════════════════════ */
#rsp-player .rsp-bar {
    display:      flex         !important;
    flex-direction: row        !important;
    align-items:  center       !important;
    height:       var(--rsp-bar-h) !important;
    padding:      0 16px       !important;
    gap:          12px         !important;
    width:        100%         !important;
    max-width:    1400px       !important;
    margin:       0 auto       !important;
}

/* Logo */
#rsp-player .rsp-bar__logo {
    display:      flex        !important;
    align-items:  center      !important;
    justify-content: center   !important;
    width:        42px        !important;
    height:       42px        !important;
    flex-shrink:  0           !important;
}
#rsp-player .rsp-bar__logo img {
    display:      block       !important;
    width:        42px        !important;
    height:       42px        !important;
    object-fit:   cover       !important;
    border-radius: 6px        !important;
}
#rsp-player .rsp-default-icon {
    display:   block   !important;
    font-size: 24px    !important;
    color:     var(--rsp-accent) !important;
}

/* Info */
#rsp-player .rsp-bar__info {
    display:        flex   !important;
    flex-direction: column !important;
    flex:           1      !important;
    min-width:      0      !important;
    overflow:       hidden !important;
}
#rsp-player .rsp-station-name {
    display:       block         !important;
    font-size:     14px          !important;
    font-weight:   700           !important;
    color:         var(--rsp-text) !important;
    white-space:   nowrap        !important;
    overflow:      hidden        !important;
    text-overflow: ellipsis      !important;
    line-height:   1.3           !important;
}
#rsp-player .rsp-song-title {
    display:       block         !important;
    font-size:     12px          !important;
    color:         var(--rsp-accent) !important;
    white-space:   nowrap        !important;
    overflow:      hidden        !important;
    text-overflow: ellipsis      !important;
    margin-top:    3px           !important;
    line-height:   1.3           !important;
}
#rsp-player .rsp-song-title.rsp-marquee {
    animation: rsp-scroll 16s linear infinite !important;
}
@keyframes rsp-scroll {
    0%,20%   { transform: translateX(0); }
    80%,100% { transform: translateX(-50%); }
}

/* Controls group */
#rsp-player .rsp-bar__controls {
    display:     flex    !important;
    flex-direction: row  !important;
    align-items: center  !important;
    gap:         8px     !important;
    flex-shrink: 0       !important;
}

/* ════════════════════
   BUTTONS
════════════════════ */
#rsp-player button {
    display:         flex     !important;
    align-items:     center   !important;
    justify-content: center   !important;
    cursor:          pointer  !important;
    border:          none     !important;
    outline:         none     !important;
    background:      transparent !important;
    padding:         0        !important;
    margin:          0        !important;
    color:           var(--rsp-text) !important;
    transition:      transform .15s, opacity .15s !important;
    line-height:     1        !important;
}
#rsp-player button:hover  { opacity: .82 !important; transform: scale(1.06) !important; }
#rsp-player button:active { transform: scale(.92) !important; }

/* Play button */
#rsp-player .rsp-btn--play,
#rsp-player .rsp-btn--play-lg {
    border-radius: 50%          !important;
    background:    var(--rsp-accent) !important;
    color:         #fff         !important;
    flex-shrink:   0            !important;
}
#rsp-player .rsp-btn--play   { width: 44px !important; height: 44px !important; }
#rsp-player .rsp-btn--play-lg{ width: 64px !important; height: 64px !important; }

#rsp-player .rsp-btn--icon { opacity: .7 !important; padding: 5px !important; }
#rsp-player .rsp-btn--icon:hover { opacity: 1 !important; }

/* SVG icons */
#rsp-player svg {
    display: block !important;
    width:   22px  !important;
    height:  22px  !important;
    fill:    currentColor !important;
}
#rsp-player .rsp-btn--play svg,
#rsp-player .rsp-btn--play-lg svg { width: 26px !important; height: 26px !important; }

#rsp-player .rsp-icon-spin {
    animation: rsp-spin .75s linear infinite !important;
}
@keyframes rsp-spin { to { transform: rotate(360deg); } }

/* ════════════════════
   VOLUME
════════════════════ */
#rsp-player .rsp-volume {
    display:     flex    !important;
    align-items: center  !important;
    gap:         5px     !important;
}
#rsp-player input[type="range"] {
    -webkit-appearance: none  !important;
    appearance:         none  !important;
    width:              80px  !important;
    height:             4px   !important;
    border-radius:      2px   !important;
    background:         rgba(255,255,255,.25) !important;
    outline:            none  !important;
    cursor:             pointer !important;
    border:             none  !important;
    padding:            0     !important;
    margin:             0     !important;
}
#rsp-player input[type="range"].rsp-volume-slider--lg {
    width: 140px !important;
}
#rsp-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width:  14px !important; height: 14px !important;
    border-radius: 50% !important;
    background: var(--rsp-accent) !important;
    cursor: pointer !important;
}
#rsp-player input[type="range"]::-moz-range-thumb {
    width:  14px !important; height: 14px !important;
    border-radius: 50% !important;
    background: var(--rsp-accent) !important;
    border: none !important; cursor: pointer !important;
}

/* ════════════════════
   EXPANDED PANEL
════════════════════ */
#rsp-player .rsp-expanded {
    position:       absolute     !important;
    bottom:         var(--rsp-bar-h) !important;
    left:           50%          !important;
    transform:      translateX(-50%) !important;
    width:          min(420px, 96vw) !important;
    background:     var(--rsp-bg)    !important;
    border-radius:  14px 14px 0 0    !important;
    box-shadow:     0 -8px 40px rgba(0,0,0,.55) !important;
    padding:        28px 28px 20px   !important;
    display:        flex             !important;
    flex-direction: column           !important;
    align-items:    center           !important;
    gap:            18px             !important;
    animation:      rsp-slideup .3s ease !important;
}
@keyframes rsp-slideup {
    from { transform: translateX(-50%) translateY(24px); opacity:0; }
    to   { transform: translateX(-50%) translateY(0);    opacity:1; }
}
#rsp-player .rsp-expanded__close {
    position: absolute !important;
    top: 12px !important; right: 12px !important; opacity: .55 !important;
}
#rsp-player .rsp-expanded__logo img {
    display:       block       !important;
    width:         100px       !important;
    height:        100px       !important;
    object-fit:    cover       !important;
    border-radius: 12px        !important;
    box-shadow:    0 4px 20px rgba(0,0,0,.4) !important;
}
#rsp-player .rsp-expanded__icon { font-size: 64px !important; display:block !important; }
#rsp-player .rsp-expanded__info {
    display:        flex   !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            4px    !important;
    text-align:     center !important;
}
#rsp-player .rsp-expanded__station {
    display:     block  !important;
    font-size:   18px   !important;
    font-weight: 700    !important;
    color:       var(--rsp-text) !important;
}
#rsp-player .rsp-expanded__song {
    display:       block  !important;
    font-size:     13px   !important;
    color:         var(--rsp-accent) !important;
    max-width:     320px  !important;
    overflow:      hidden !important;
    white-space:   nowrap !important;
    text-overflow: ellipsis !important;
}
#rsp-player .rsp-expanded__live {
    display:       flex   !important;
    align-items:   center !important;
    gap:           6px    !important;
    font-size:     11px   !important;
    font-weight:   700    !important;
    letter-spacing:1px    !important;
    opacity:       .6     !important;
    color:         var(--rsp-text) !important;
    margin-top:    4px    !important;
}
#rsp-player .rsp-live-dot {
    display:       inline-block !important;
    width:         8px          !important;
    height:        8px          !important;
    border-radius: 50%          !important;
    background:    var(--rsp-accent) !important;
    animation:     rsp-pulse 1.4s ease infinite !important;
}
@keyframes rsp-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.4; transform:scale(.7); }
}
#rsp-player .rsp-expanded__controls {
    display:        flex   !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            16px   !important;
    width:          100%   !important;
}
#rsp-player .rsp-expanded__volume {
    display:         flex   !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             10px   !important;
    width:           100%   !important;
}

/* ════════════════════
   MINIMIZED TAB
════════════════════ */
#rsp-tab {
    all:           initial        !important;
    box-sizing:    border-box     !important;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    position:      fixed          !important;
    bottom:        0              !important;
    right:         24px           !important;
    background:    var(--rsp-bg)  !important;
    color:         var(--rsp-text)!important;
    padding:       9px 16px       !important;
    border-radius: 8px 8px 0 0    !important;
    cursor:        pointer         !important;
    display:       flex           !important;
    align-items:   center         !important;
    gap:           8px            !important;
    font-size:     13px           !important;
    font-weight:   600            !important;
    box-shadow:    -2px -2px 16px rgba(0,0,0,.3) !important;
    z-index:       var(--rsp-z)   !important;
}
#rsp-tab:hover { filter: brightness(1.2) !important; }
#rsp-tab .rsp-tab__logo {
    width: 22px !important; height: 22px !important;
    border-radius: 3px !important; object-fit: cover !important;
    display: block !important;
}
#rsp-tab .rsp-tab__chevron { font-size: 10px !important; opacity: .6 !important; }

/* ── Minimized state ── */
#rsp-player.rsp-minimized { transform: translateY(var(--rsp-bar-h)) !important; }

/* ════════════════════
   RESPONSIVE
════════════════════ */
@media (max-width: 520px) {
    #rsp-player input[type="range"]:not(.rsp-volume-slider--lg) { width: 56px !important; }
    #rsp-player .rsp-btn--expand { display: none !important; }
    #rsp-player .rsp-bar { padding: 0 10px !important; gap: 8px !important; }
    #rsp-player .rsp-station-name { font-size: 12px !important; }
    #rsp-player .rsp-song-title   { font-size: 11px !important; }
    #rsp-player .rsp-btn--play    { width: 38px !important; height: 38px !important; }
}
@media (max-width: 380px) {
    #rsp-player .rsp-volume { display: none !important; }
}