#rbr-player-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--rbr-height, 70px);
    background-color: var(--rbr-bg, #ffffff);
    color: var(--rbr-text, #333333);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--rbr-border, #e33b4d);
    z-index: 999999;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 0;
    box-sizing: border-box;
}

html, body { padding-top: 0 !important; }
.mh-container-outer, #page, .site { 
    padding-top: calc(var(--rbr-height, 70px)) !important; 
    margin-top: 0 !important; 
}
body.admin-bar .mh-container-outer { padding-top: calc(var(--rbr-height, 70px) + 32px) !important; }
body.admin-bar #rbr-player-bar { top: 32px; }

.rbr-player-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1080px; 
    padding: 0 15px;
    height: 100%;
    flex-wrap: nowrap !important; 
    box-sizing: border-box;
}

.rbr-player-left { flex: 1.2; display: flex; align-items: center; justify-content: flex-start; gap: 12px; overflow: hidden; }
.rbr-player-center { flex: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.rbr-player-right { flex: 1; display: block; }

.rbr-player-logo { height: calc(var(--rbr-height, 70px) - 20px); width: auto; min-height: 40px; flex-shrink: 0; transition: border-radius 0.3s ease; }
.rbr-live-avatar { border-radius: var(--rbr-avatar-radius, 50%); object-fit: cover; aspect-ratio: 1/1; }

.rbr-station-text { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    text-align: left;
    gap: 3px; 
    line-height: 1.1; 
    overflow: hidden; 
}
.rbr-show-name { 
    font-size: 15px; 
    font-weight: bold; 
    color: var(--rbr-text, #333333); 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: 100%;
}
.rbr-presenter-name { 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--rbr-text, #333333); 
    opacity: 0.9; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: 100%;
}

.rbr-controls-row { display: flex; align-items: center; justify-content: center; gap: 15px; height: 35px; }

#rbr-play-btn, .rbr-vol-btn {
    background-color: var(--rbr-color, #e33b4d); 
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
}
#rbr-play-btn:hover, .rbr-vol-btn:hover { transform: scale(1.15); filter: brightness(1.1); }

#rbr-play-btn {
    border: none; border-radius: 8px; width: 40px; height: 35px; flex-shrink: 0;
    cursor: pointer; position: relative; box-shadow: inset 0px -2px 0px rgba(0,0,0,0.1);
}
#rbr-play-btn::after {
    content: ''; position: absolute; top: 10px; left: 15px;
    border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #ffffff;
}
#rbr-play-btn.playing::after {
    border-style: double; border-width: 0px 0 0px 12px; height: 14px; left: 14px; top: 10px;
}

.rbr-volume-group { display: flex; align-items: center; gap: 6px; }
.rbr-vol-btn {
    color: white; border: none; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; 
    font-size: 13px; font-weight: bold; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#rbr-vol-slider { -webkit-appearance: none; width: 80px; height: 8px; background: #ccc; border-radius: 4px; outline: none; }
#rbr-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #888; cursor: pointer; }

.rbr-now-playing { 
    font-size: 13px; color: var(--rbr-text, #444444); text-align: center; overflow: hidden; 
    max-width: var(--rbr-scroller, 320px); width: 100%; height: 18px; line-height: 18px; margin-top: 2px; white-space: nowrap; 
}
#rbr-track-text { display: inline-block; }

@keyframes marquee-ltr { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes marquee-rtl { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

.rbr-anim-ltr { animation: marquee-ltr var(--rbr-speed, 12s) linear infinite; }
.rbr-anim-rtl { animation: marquee-rtl var(--rbr-speed, 12s) linear infinite; }


/* ==========================================
   Responsive Breakpoints
========================================== */

/* Tablet & iPad Pro */
@media (max-width: 900px) {
    .rbr-player-right { display: none !important; } 
    .rbr-player-left { flex: 1.5; }
}

/* Mobile Phones (iPhone) - Pixel Perfect Grid Layout */
@media (max-width: 650px) {
    /* 1. Force exact bar height and padding */
    #rbr-player-bar { 
        height: 85px !important; 
        padding: 10px 0 !important; 
        display: block; 
    }
    
    /* 2. Push website down exactly 85px to prevent overlaps */
    .mh-container-outer, #page, .site { padding-top: 85px !important; margin-top: 0 !important; }
    body.admin-bar .mh-container-outer { padding-top: 117px !important; }
    
    /* 3. Convert container to a strict CSS Grid */
    .rbr-player-inner { 
        display: grid !important; 
        grid-template-columns: 42px 1fr 42px; 
        grid-template-rows: auto auto; 
        column-gap: 12px; 
        row-gap: 4px; 
        padding: 0 15px !important; 
        width: 100%;
        align-items: center;
    }
    
    /* 4. Flatten the HTML wrappers so elements align directly on the grid */
    .rbr-player-left, .rbr-player-center { display: contents !important; }
    
    /* Hide Desktop volume and spacing elements */
    .rbr-volume-group, .rbr-player-right { display: none !important; }
    
    /* Logo on the left */
    .rbr-player-logo { 
        grid-column: 1; 
        grid-row: 1; 
        width: 42px !important; 
        height: 42px !important; 
        min-height: 42px !important; 
        margin: 0; 
    }
    
    /* Show Name and Presenter aligned next to Logo */
    .rbr-station-text { 
        grid-column: 2; 
        grid-row: 1; 
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
    .rbr-show-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .rbr-presenter-name { font-size: 12px; }
    
    /* Play Button aligned to the far right */
    .rbr-controls-row { 
        grid-column: 3; 
        grid-row: 1; 
        margin: 0; 
        height: auto; 
        justify-content: flex-end;
    }
    #rbr-play-btn { width: 42px; height: 42px; margin: 0; }
    #rbr-play-btn::after { top: 13px; left: 16px; border-width: 8px 0 8px 12px; }
    #rbr-play-btn.playing::after { top: 13px; left: 14px; height: 16px; border-width: 0 0 0 12px; }
    
    /* Scroller text on the bottom line, indented nicely to match the Show Name */
    .rbr-now-playing { 
        grid-column: 2 / 4; 
        grid-row: 2; 
        text-align: left; 
        width: 100% !important; 
        max-width: 100% !important; 
        margin: 0 !important; 
    }
}