body, .ast-separate-container {
    background-color: #000000;
    background-image: none;
}

@media (max-width: 921px) {
    #primary, #secondary {
        padding: 0em 0;
        margin: 0;
    }
}
.bg-mask {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    background: radial-gradient(rgba(0, 0, 0, .5) 20%, #000 85%);
    z-index: 1;
}
.ob-radio-player {
height: 495px;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    position: relative;
    overflow: hidden;
    display: inline-block;
    /* Remove default cursor pointer as navigation is handled */
    /* cursor: pointer; */

    /* Add focus style for keyboard/remote navigation */
    outline: 2px solid transparent; /* Default transparent outline */
    outline-offset: 4px; /* Space between element and outline */
    transition: outline-color 0.2s ease;
}
.ob-radio-player2 { /* Apply base styles to both player types */
    height: 990px;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    position: relative;
    overflow: hidden;
    display: inline-block;
    /* Remove default cursor pointer as navigation is handled */
    /* cursor: pointer; */

    /* Add focus style for keyboard/remote navigation */
    outline: 2px solid transparent; /* Default transparent outline */
    outline-offset: 4px; /* Space between element and outline */
    transition: outline-color 0.2s ease;
}
.wp-block-uagb-container.uagb-block-a435d4be {
  box-shadow: 0px 0px #00000070;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 0px !important;
}
.wp-block-uagb-container.uagb-block-8114f7f3 {
  min-height: 380px;
  box-shadow: 0px 0px #00000070;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 0% !important;
}

.ob-radio-player:focus,
.ob-radio-player.is-focused,
.ob-radio-player2:focus,
.ob-radio-player2.is-focused {
    outline-color: transparent; /* Visible outline when focused */
}

.ob-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease-in-out;
}
.ob-background.active {
    opacity: 1;
}
.ob-background.inactive {
    opacity: 0;
}

/* Specific background for the TV player's active background div */
.ob-radio-player2 .ob-background.active {
    background-image: url('./tv_screen_background.png'); /* Use the new TV screen background */
    background-color: #1a1a1a; /* Fallback dark color */
    background-size: cover;
    background-position: center;
}

.ob-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 140%;
    padding: 20px;
    box-sizing: border-box;
}
.ob-logo {
    width: 150px;
    height: 140px;
    margin-top: 60px;
    margin-bottom: -30px;
}
.ob-playing-now {
    font-size: 12px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #858079;
}
.ob-track-title {
    font-size: 13px;
    /* Color is now set dynamically via inline style from JS data */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 700;
}
.ob-track-title2 { /* Style for the new TV player title */
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 700;
    color: #00c6b3; /* Specific color for TV player title */
}
.ob-track-titleb { /* This seems unused based on HTML */
    font-size: 13px;
    color: #a83900;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 700;
}
.ob-track-artist {
    font-size: 12px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #858079;
}
.ob-track-artist2 { /* Style for the new TV player artist/description */
    font-size: 12px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #858079;
}

/* Consolidate overlay visibility rule for both player types */
.ob-radio-player > div[class^="ob-listen-now-overlay"],
.ob-radio-player2 > div[class^="ob-listen-now-overlay"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Background colors are defined in the specific overlay classes */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 6;
}

/* Show overlay on hover or focus for both player types */
.ob-radio-player:hover > div[class^="ob-listen-now-overlay"],
.ob-radio-player:focus > div[class^="ob-listen-now-overlay"],
.ob-radio-player.is-focused > div[class^="ob-listen-now-overlay"],
.ob-radio-player2:hover > div[class^="ob-listen-now-overlay"],
.ob-radio-player2:focus > div[class^="ob-listen-now-overlay"],
.ob-radio-player2.is-focused > div[class^="ob-listen-now-overlay"] {
    opacity: 1;
    pointer-events: auto; /* Allow pointer events when visible (for mouse clicks, though handled by JS now) */
}


/* Keep original overlay color classes */
.ob-listen-now-overlay { /* Pop */
    background-color: rgb(217 79 253 / 40%);
}
.ob-listen-now-overlayb { /* Sertanejo */
    background-color: rgb(168 57 0 / 41%);
}
.ob-listen-now-overlayc { /* EDM */
    background-color: rgb(14 211 247 / 53%);
}
.ob-listen-now-overlayd { /* Nostalgia */
    background-color: rgba(255, 48, 108, 0.53);
}
.ob-listen-now-overlaye { /* Rock */
    background-color: rgb(203 23 23 / 56%);
}
.ob-listen-now-overlayf { /* Raiz, or TV ONBEAT now */
     background-color: rgb(205 190 146 / 70%); /* Increased opacity for better visibility */
}
.ob-listen-now-overlayg { /* Love */
    background-color: rgb(226 226 226 / 60%);
}
.ob-listen-now-overlayh { /* Gospel */
    background-color: rgb(205 190 146 / 68%); /* Seems like f and h are the same in original? Keeping both but check if intended */
}
.ob-listen-now-overlayi { /* 80s or POP ROCK */
    background-color: rgb(142 48 150 / 67%);
}
.ob-listen-now-overlayj { /* Pagode or VIBES */
    background-color: rgb(83 8 50 / 70%); /* This overlay has a very dark background, the white text might not show well */
}
.ob-listen-now-overlayk { /* 90s */
    background-color: rgb(222 181 19 / 63%);
}
.ob-listen-now-overlayl { /* Som Brasil or TOP BRASIL */
    background-color: rgb(124 208 82 / 58%);
}

.ob-listen-now-text {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    animation: pulse2 2s infinite;
     /* Ensure text is above the overlay background */
    position: relative;
    z-index: 1;
}
@keyframes pulse2 {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@media only screen and (min-width: 1024px) {
.entry-content[ast-blocks-layout] > * {
    max-width: var(--wp--custom--ast-content-width-size);
    margin-left: auto;
    margin-right: auto;
}
}
/* Basic Flexbox/Grid fallback or helper styles if UAGB doesn't provide full grid behavior on all screen sizes */
/* These might need adjustment based on actual UAGB output */
.uagb-container-inner-blocks-wrap {
    display: flex; /* Use flexbox for row layout */
    flex-wrap: wrap; /* Allow wrapping to next line */
    gap: 20px; /* Add some space between players */
    justify-content: center; /* Center players in the row */
}

/* Apply to the dynamically added wrapper divs */
.wp-block-uagb-container.dynamic-player-wrapper {
    flex: 0 1 auto; /* Allow flex items to shrink but not grow, base size auto */
    min-width: 272px; /* Minimum size for players (adjust as needed) */
    max-width: 600px; /* Maximum size for players (adjust as needed) */
}

@media (min-width: 768px) {
    .wp-block-uagb-container.dynamic-player-wrapper {
         flex-basis: calc(33.33% - 0px); /* Example: 3 players per row on medium screens */
    }
}

@media (min-width: 1024px) {
    .wp-block-uagb-container.dynamic-player-wrapper {
         flex-basis: calc(16.66% - 0px); /* Example: 6 players per row on large screens */
    }
}