html {
    height: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: 'DIN', sans-serif; /* Assuming DIN font is desired from estilo.css */
    background-color: #000; /* Fallback color */
    background-image: url(../img/fundo.png);
    /* background-color: lightblue; */ /* TEMPORARY DIAGNOSTIC BACKGROUND -REVERTING */
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: top center;
    display: flex;
    flex-direction: column; /* Allow footer to sit below player */
    align-items: center; /* Keep player centered horizontally */
    min-height: 100vh; /* Use full viewport height */
    /* padding-bottom: 20px; */ /* Removed this as it can cause overflow with min-height: 100vh */
}

.player-container {
    background: linear-gradient(to bottom, #8B0000, #4A0000); /* Darker red gradient to match the reference image */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    text-align: center;
    width: 90%; /* Responsive width */
    max-width: 400px; /* Max width for larger screens */
    color: white;
    margin: 40px auto 20px auto; /* Added bottom margin for spacing before footer */
}

.logo-container img#radioLogo {
    max-width: 80%;
    height: auto;
    margin-bottom: 15px;
    /* background-color: rgba(255, 255, 255, 0.9); */ /* Removing white plaque */
    /* padding: 8px; */ /* Removing padding for the plaque */
    /* border-radius: 4px; */ /* Removing border-radius for the plaque */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */ /* Removing shadow for the plaque */
}

.cover-image-container {
    width: 65%;  /* Take full responsive width of its parent */
    height: auto; /* Height will be determined by aspect-ratio */
    aspect-ratio: 1 / 1; /* Maintain a square shape (1:1 ratio) */
    overflow: hidden; /* Clip any overflow */
    margin: 0 auto 15px auto; /* Center the container and provide bottom margin */
    border-radius: 5px;
    border: 2px solid #D30000;
}

.cover-image-container img#coverImage {
    width: 100%; /* Make image fill container width */
    height: 100%; /* Make image fill container height */
    object-fit: cover; /* Scale to fill, maintain aspect ratio, crop if needed */
    display: block; /* Remove any extra space below the image */
    /* border-radius and border are now on the container */
}

.song-info p {
    margin: 5px 0;
}

/* Remove old artistName and songTitle styles */
/* #artistName {
    font-size: 1.2em;
    font-weight: bold;
}

#songTitle {
    font-size: 1em;
} */

/* Add new style for combined artist-song paragraph */
.song-info p#artist-song {
    font-size: 0.8em;
    font-weight: normal; /* You can change to bold if you prefer */
    margin: 10px 0;
}

/* Playback Controls Specific Styling */
.playback-controls-container {
    display: flex;
    justify-content: center; /* Centers the block if it has a defined width or for inline-block children */
    align-items: center;
    height: 60px; /* Define a height for the container */
    position: relative; /* Crucial for absolute positioning of children */
    /* No width needed, it will be content-driven or can be set if desired */
}

.controls button#playButton {
    background-color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 15px; */ /* Removed, vertical centering by absolute pos */
    position: absolute; /* Absolute positioning */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center it */
    transition: transform 0.3s ease-in-out;
    z-index: 2;
}

.controls button#playButton svg {
    width: 35px;
    height: 35px;
    fill: #D30000;
}

/* Loading spinner animation */
.controls button#playButton svg.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.controls button#playButton:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.vu-meter-placeholder {
    display: flex;
    align-items: flex-end;
    width: 40px;
    height: 50px; /* Increased height to match play button */
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scaleX(0);
    transform-origin: center;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    overflow: hidden;
    z-index: 1;
}

.vu-bar {
    width: 5px; /* Adjusted individual bar width */
    height: 100%;
    background-color: #FFD700;
    margin-right: 2px; /* Adjusted gap between bars */
    border-radius: 2px;
}
.vu-bar:last-child {
    margin-right: 0;
}

/* Remove static placeholder heights if they exist for more than 4 bars */
/* .vu-bar:nth-child(1) { height: 30%; } ... etc. are handled by JS */

/* Playing State */
.playback-controls-container.playing #playButton {
    /* Align button's left edge with cover image's left edge AND scale it down */
    /* Vertically, align scaled button's bottom with VU meter's bottom */
    transform: translate(calc(-50% - 55px), -17px) scale(0.7);
}

.playback-controls-container.playing .vu-meter-placeholder {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1);
}

/* App Store Links Styling */
.app-store-links {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px; /* Increased space above the app store links */
    gap: 15px; /* Space between the two store links */
}

.app-store-links a img {
    height: 30px; /* Reduced height for smaller badges */
    width: auto;  /* Maintain aspect ratio */
    display: block; /* Remove extra space below images if they were inline */
    transition: opacity 0.2s ease-in-out;
}

.app-store-links a:hover img {
    opacity: 0.8; /* Slight hover effect */
}

/* Social Media Links Styling */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px; /* Space above the social media links */
    gap: 15px; /* Space between the social icons */
}

.social-links a img {
    height: 33px; /* Smaller than app store badges */
    width: auto;
    display: block;
    transition: opacity 0.2s ease-in-out;
}

.social-links a:hover img {
    opacity: 0.8; /* Slight hover effect */
}

/* Copyright Text */
.copyright {
    text-align: center;
    color: #f0f0f0;
    font-size: 0.68em;
    margin-top: 20px;
    margin-bottom: 0px;
}

/* Footer - Minimized since content moved to .copyright */
footer {
    display: none; /* Hide the empty footer completely */
    /* Alternatively, leave minimal styling if you want to keep the element visible:
    width: 100%;
    text-align: center;
    padding: 5px 0;
    margin-top: auto;
    */
}

/* Remove the p style inside footer if it's no longer needed */
/* footer p {
    margin: 0;
} */