/* custom.css */

.form-group {
    margin-bottom: 5px; /* Add some space below each form group */
}

textarea {
    margin-bottom: 20px; /* Add space below the description field */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center the form box in the available space */
    width: 100%;
    min-height: calc(100vh - 98px); /* Height of the viewport minus header height */
    padding: 20px; /* Add some padding around the container */
    box-sizing: border-box;
    margin-top: 0; /* Make sure this is 0 to prevent extra top margin from style.css */
}

.button-container {
    margin-top: 30px; /* Add some space above the button container */
    position: sticky; /* Make buttons stick to the bottom of their parent .playlist-form-box */
    bottom: 0; /* Stick to the bottom */
    background: rgba(0, 0, 0, 0.9); /* Add a background to prevent playlist content from showing through */
    padding: 15px 0; /* Add padding to lift them from the very bottom */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
    z-index: 100; /* Ensure they are above the scrollable content */
    display: flex; /* Make it a flex container to space buttons */
    justify-content: space-between; /* Space buttons out */
    gap: 10px; /* Space between buttons */
}

.button-container button {
    margin-right: 0; /* Remove specific right margin here as gap handles it */
}

.header {
    margin-top: 0;
    font-size: 1.5em; /* Make the heading fit nicely in one line */
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px; /* Add space below the heading */
}

/* New: Styles for the scrollable playlist container */
.scrollable-playlist-container {
    /* Reduce this height to make the playlist area smaller */
    max-height: 250px; /* ORIGINAL WAS 350px. Adjust this value (e.g., 200px, 250px) to make the box shorter */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 15px; /* Add padding for the scrollbar to prevent content overlap */
    margin-bottom: 20px; /* Space before the button container */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for visibility */
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05); /* Slightly lighter background for the scroll area */
    padding: 10px;
    color: white; /* Ensure text is white */
}

/* Adjustments for individual playlist items inside the scrollable container */
.scrollable-playlist-container .playlistCard {
    /* Keep your existing .playlistCard styles from style.css/custom.css */
    margin: 5px 0; /* Adjust vertical margin for items within scroll */
    padding: 5px;
    /* Ensure text within playlistCard is visible */
    color: white; /* Ensure text is white */
    font-size: 0.9em;
}

.scrollable-playlist-container .playlistCard label {
    display: inline-block; /* Ensure label content is on one line if needed */
    margin-left: 5px; /* Space between checkbox and label */
    vertical-align: middle; /* Align text with checkbox */
    white-space: nowrap; /* Prevent text from wrapping prematurely */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis for overflow */
    max-width: calc(100% - 30px); /* Adjust max-width based on checkbox size */
}

/* Adjust select all checkbox container */
.select-all-container {
    color: white;
    margin-bottom: 15px; /* Space between select all and first playlist */
    padding: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Separator */
}

/* Ensure checkboxes are visible */
.playlist-checkbox, #select-all-checkbox {
    vertical-align: middle;
    margin-right: 5px; /* Space between checkbox and label */
}

/* If the playlist-form-box has a background, ensure it covers the sticky button background */
.playlist-form-box {
    position: relative; /* Needed for sticky positioning of button-container */
    overflow: hidden; /* Ensure nothing leaks outside this box */
    /* ... existing styles ... */
}