/* CSS Variables for easier color management */
:root {
    --rbr-red-main: #ec2528;
    --rbr-red-dark: #d11e21;
    --rbr-gray-dark: #0f172a; /* body background */
    --rbr-gray-card: #1a202c; /* player card background */
    --rbr-gray-light-mute: #a0aec0; /* mute button background */
    --rbr-gray-dark-mute: #8c98a8; /* mute button hover */
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--rbr-gray-dark); /* Using CSS variable */
    color: #ffffff;
}
/* Style for the main content area to take available space */
.content-area {
    flex-grow: 1;
    overflow-y: auto; /* Enable scrolling for content */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
/* Custom styles for button hover/active states if needed beyond Tailwind */
.tab-button {
    transition: background-color 0.2s ease-in-out;
}
.tab-button.active {
    background-color: var(--rbr-red-main); /* Using CSS variable */
}
/* Hide scrollbar for a cleaner look but allow scrolling */
.content-area::-webkit-scrollbar {
    display: none;
}
.content-area {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Specific style for iframe container to manage height */
.iframe-container {
    flex-grow: 1; /* Allow container to grow within content-area */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Responsive styles for the chat, schedule, and news iframes */
.chat-iframe,
.schedule-iframe,
.news-iframe { /* Added news-iframe */
    border: none;
    width: 100%; /* Set width to 100% as requested */
    max-height: 90vh; /* Keep the max-height for very large screens */
    /* Default height for smaller screens (like iPhone X) */
    height: 600px; /* or a percentage, e.g., 70vh */
}

/* Media query for medium-sized screens (e.g., tablets like iPad) */
@media (min-width: 768px) { /* Typical breakpoint for tablets */
    .chat-iframe,
    .schedule-iframe,
    .news-iframe { /* Applied to news-iframe too */
        height: 830px; /* Height for iPad and similar devices */
    }
}

/* Style for the metadata bar */
#metadataBar {
    background-color: var(--rbr-red-main); /* Using CSS variable */
    color: #ffffff; /* White text color */
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.875rem; /* text-sm */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 10; /* Ensure it stays on top */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s ease; /* Smooth transition for background */
    height: 2.5rem; /* Fixed height for the bar */
    display: flex; /* Use flexbox for centering content */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    /* Ensure it's positioned at the very top */
    position: sticky; /* or fixed, depending on scroll behavior desire */
    top: 0;
    left: 0;
    right: 0;
}

#metadataBar.error {
    background-color: var(--rbr-red-dark); /* Using CSS variable */
    color: #ffffff;
}

/* NEW: Banner specific styles */
.banner {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    /* Optional: Add max-width for very large screens to prevent stretching too thin */
    max-width: 1200px; /* Example max width, adjust as needed */
    margin: 0 auto; /* Center the banner if max-width is applied */
}

/* Styles for the radio player container */
.radio-player-container {
    flex-grow: 1; /* Allows it to take up remaining vertical space */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center horizontally */
    justify-content: flex-start; /* Start content from the top */
    padding-bottom: 1rem; /* Add some padding at the bottom for controls */
    background-color: var(--rbr-gray-dark); /* Using CSS variable */
}
/* Adjust padding for player controls to move them closer to the banner */
.player-controls-card {
    background-color: var(--rbr-gray-card); /* Using CSS variable */
    padding: 1.5rem; /* Adjusted padding */
    border-radius: 1rem; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    margin-top: 1.5rem; /* Space from the banner */
    text-align: center; /* Center text within the card */
    width: 90%; /* Make it slightly narrower than full width */
    max-width: 400px; /* Max width for the card */
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Ensure track display is centered within its own div */
#currentTrackDisplay {
    margin-bottom: 1rem; /* Space below title */
    font-size: 2.rem;
    line-height: 1.2;
    min-height: 3rem; /* Prevent layout shift when text changes */
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-mute-buttons {
    display: flex;
    flex-direction: row;
    gap: 1.5rem; /* Space between play/pause and mute buttons */
    margin-top: 1.5rem; /* Space above buttons */
    justify-content: center;
    align-items: center;
}

.play-mute-buttons button {
    width: 3.5rem; /* Fixed width for consistent size */
    height: 3.5rem; /* Fixed height for consistent size */
    padding: 0; /* Remove padding to avoid double-sizing with fixed width/height */
    font-size: 2rem; /* Larger icons */
    border-radius: 9999px; /* Fully rounded */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    box-sizing: border-box; /* Include padding and border in width/height */
    display: flex; /* Use flexbox for centering icon */
    align-items: center; /* Vertically center icon */
    justify-content: center;
}

.play-mute-buttons button:hover {
    transform: translateY(-2px);
}
/* To prevent dimensional change on press, we can remove the transform for active state */
.play-mute-buttons button:active {
    transform: translateY(0);
}

#playPauseBtn {
    background-color: var(--rbr-red-main); /* Using CSS variable */
}
#playPauseBtn:hover {
    background-color: var(--rbr-red-dark); /* Using CSS variable */
}
#muteBtn {
    background-color: var(--rbr-gray-light-mute); /* Using CSS variable */
}
#muteBtn:hover {
    background-color: var(--rbr-gray-dark-mute); /* Using CSS variable */
}

/* Styles for iframe status message */
.iframe-status-message {
    text-align: center;
    color: #a0aec0; /* Tailwind text-gray-400 equivalent */
    margin-top: 1rem;
    font-size: 1rem;
    padding: 1rem; /* Add some padding */
}
.iframe-status-message.error {
    color: #dc2626; /* Tailwind text-red-600 equivalent */
}