/* Styles */
        /* Navy-Blue BG color of upper seciton, buttons, footer: #124E66; */
        /* Yellow text color of  notable placements: #ffed00; */
    
        body {
            background-image: url('../background-img/background.jpg'); /* Path to your background image */
            background-size: cover; /* This ensures the image covers the entire screen */
            background-attachment: fixed; /* Keeps the background in a fixed position while scrolling */
            background-position: center; /* Centers the background image */
            background-repeat: no-repeat; /* Prevents the background from repeating */
            font-family: 'Roboto', sans-serif;
            background-color: #6a9493;
            color: #FFFFFF;
            max-width: 1100px; /* Originally: 1000px; */
            margin: 0 auto;
            padding: 10px;
            font-size: 14px;
        }

        /* Metallic gradient background used in the "notable placements" section */
        .metallic-background {
            background: linear-gradient(135deg, #1a1a1a, #333333 25%, #4d4d4d 50%, #1a1a1a 75%, #333333);
            background-size: 200% 200%;
            animation: metallic 6s linear infinite;
        }
        @keyframes metallic {
            0% {
                background-position: 0% 0%;
            }
            100% {
                background-position: 100% 100%;
            }
        } 
        /* END - Metallic gradient background used in the "notable placements" section - END */

        #upper-section-container {
            background-color: #124E66; /* Navy-Blue BG color of upper seciton, buttons, footer */
            padding-top: 1px;
        }

        section {
            background-color: #124E66;
        }
            p.intro {
                font-size: 14px;
                background-color: #124E66;
                text-align: center;
                padding-left: 5px;
                padding-right: 5px;
            }

            p.intro a {
            /* color: #ffffff; */
            color: #ffed00;
            text-decoration: none;
            /* text-decoration: none; */
            }
            p.intro a:hover {
            text-decoration: underline;
            }

        h1 {
            text-align: center;
            font-size: 16px;
            background-color: #124E66;
            }

            /* Link "Vadim Chaimovich" at the top of the page, color #ffed00; */
        h1 a {
            color: #ffed00;
        }

/* notalbe placements slider styles */

        #notable-placements-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 3px;
            padding-bottom: 3px;
            width: 100%;
            background-color: #000;
        }

        #notable-text {
            flex: 1;
            font-weight: bold;
            font-size: 12px;
            text-align: center; /* Centers the text */
        }

        #slider-container {
            flex: 2;
            overflow: hidden;
            position: relative;
        }

        #slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 300%;
        }

        .slide {
            min-width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }

        /* Styling the title of the TV production */
        .title {
            font-weight: bold;
            font-size: 1em;
            color: #ffed00; /* Black or any other suitable color */
            display: block; /* Ensures it appears on its own line */
            margin-bottom: 5px; /* Adds some space between title and description */
        }

        /* Styling the explanatory description */
        .description {
            font-size: 0.8em;
            color: #FFFFFF; /* A lighter color for distinction */
            font-style: italic; /* Adds an italic style to differentiate */
        }


/* end notalbe placements styles */


        .filter-section{
            color: #ffffff;
            padding: 7px;
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #124E66;
            display: flex;
            overflow: hidden;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            font-size: 12px;
        }
        .filter-item {
            flex: 1;
            min-width: 150px;
            max-width: 100%;
        }

        .filter-item input {
            width: 100%;
            margin-right: 10px;
            box-sizing: border-box;
        }

        .filter-item select.active-filter {
            background-color: #4CAF50 !important;
            color: white;
           font-weight: bold;
        }



        .filter-section option {

              /*width: 200px; /* Adjust the width */
              padding: 0px; /* Add padding for spacing */
              font-size: 12px; /* Adjust font size */
              color: #FFFFFF; /* Font color */
              background-color: #124e66; /* Background color */
              border: 0px solid #ccc; /* Border styling */
              border-radius: 0px; /* Rounded corners */
              /*appearance: none; /* Removes the default arrow */
              /*-webkit-appearance: none; /* For Safari */
              /*-moz-appearance: none; /* For Firefox */
              /*background-image: url('dropdown-arrow.png'); /* Custom dropdown arrow */
              /*background-repeat: no-repeat;
              background-position: right 10px top 50%;
              background-size: 15px; /* Size of custom arrow */
        }

        #reset-filter-button {
            margin-left: 10px;
        }

        #recordings-count {
            background-color: #000000;
            padding: 5px;
        }

/* Styles for displayed recordings*/

        #recordings-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            font-size: 12px;
        }
        .recording {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 3px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
        }
        .recording-row {
            display: flex;
            flex-wrap: wrap;
            background-color: #EBE9E1;
            padding: 1px;
            gap: 10px;
            width: 100%;
        }

        .recording-row:nth-child(3), .recording-row:nth-child(4) {
            display: flex;
            flex-wrap: wrap;
            background-color: #D3D9D4;
            padding: 1px;
            gap: 5px;
            width: 100%;
        }


        .recording-row:nth-child(3) {
            padding-top: 5px;
            /*padding-left: 5px;*/
        }
      
        .recording span {
            margin-right: 10px;
            padding: 5px;
            color: #000;
        }

        .recording-row:nth-child(2) audio {
            margin-right: 0px;
            padding: 0px;
        }
      
        .recording-label {
            display: block;
        }


        .recording-row img {
            transition: opacity 0.5s ease; /* Optional: Smooth transition */
            margin-right: 15px;
            margin-left: 5px;
        }

        /* YouTube hover */
        .recording-row img[alt="YouTube"]:hover {
            content: url('../logos/youtube-hover.png');
        }

        /* Spotify hover */
        .recording-row a img[alt="Spotify"]:hover {
            content: url('../logos/spotify-hover.png');
        }

        /* Apple Music hover */
        .recording-row img[alt="Apple Music"]:hover {
            content: url('../logos/apple-music-hover.png');
        }

        .recording-row:nth-child(1) .recording-label:nth-child(1) {
            background-color: #000000;
            color: #ffffff;
            border-radius: 0px;
        }
      

        audio {
            margin-right: 15px;
            flex: 2;
            width: 100%;
        }


        /* Highlight Image Styles */
        .highlight-img {
            height: 20px;
            padding-top: 10px;
            margin-left: 0px;
        }

        /* Title styling */
        .recording-title {
            font-size: 1.1em;
            text-decoration: underline;
        }

        /* Artwork image styling */
        .artwork-img {
            max-width: 100px;
            margin-right: 10px;
        }

        /* Button styling for the Send Request and Share by Email buttons */
        .request-button-container {
            display: flex;
            gap: 10px;
        }


        .request-button {
            padding: 5px 10px;
            background-color: #124e66;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .request-button:hover {
            background-color: #000;
        }

        /* Logo Image Styling */
        .logo-img {
            height: 18px; /* Adjust this accordingly for specific logos */
        }

        .logo-img.spotify {
            height: 20px; /* Spotify specific size */
        }

        .logo-img.apple-music {
            height: 17px; /* Apple Music specific size */
        }


        /* Footer */

        .site-footer {
            background-color: #124e66; /* Matches your site's color scheme */
            color: #ffffff;
            padding: 3px 0;
            text-align: center;
            font-size: 11px;
            margin-top: 5px;
            /*position: fixed;*/
            bottom: 0;
            width: 100%;
        }

        .footer-container {
            display: flex;
            justify-content: center; /* Centers the content horizontally */
            flex-wrap: wrap;
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .footer-container span,
        .footer-container a {
            color: #ffffff;
            text-decoration: none;
        }

        .footer-container a:hover {
            text-decoration: underline;
        }



/* Go to Top Button Styles (Fixed for Mobile) */

#goToTopBtn {
    position: fixed;
    bottom: 20px;
    right: calc(50% - 540px); /* Align with right edge of the 1100px-wide body */
    z-index: 1000;
    background-color: rgba(18, 78, 102, 0.7); /* #124E66 with transparency */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    display: flex;
    align-items: center; /* Center text & icon */
    justify-content: center;
    gap: 5px; /* Space between arrow and text */
    height: 45px; /* Fixed height */
    min-width: 60px; /* Keep it readable */
    line-height: normal;
    transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
}

/* Fix for Mobile Viewports */
@media (max-width: 1100px) {
    #goToTopBtn {
        right: 15px; /* Align closer for smaller screens */
        bottom: 15px; /* Adjust for mobile layout */
        padding: 8px 12px; /* Slightly smaller button */
        font-size: 14px; /* Adjust font for readability */
    }
}

/* Hover Effect */
#goToTopBtn:hover {
    background-color: rgba(18, 78, 102, 0.9);
}

/* Smooth show/hide transitions */
#goToTopBtn.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

#goToTopBtn.hide {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
}




/* Favorites Button Styling */
.favorite-button {

    background-color: rgba(18, 78, 102, 0.7); /* Match your theme */
    background-color: #124E66;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.favorite-button:hover {

       background-color: #000000; /* Darker on hover */
    /* background-color: rgba(18, 78, 102, 0.9);  */ /* Darker on hover */
}

/* Saved Favorites Button */
.favorite-button.saved {
    background-color: #4CAF50; /* Green for saved items */
    color: white;
}

.favorite-button.saved::before {
    content: "✔ "; /* Tick mark before text */
}

/* Favorites Controls in Header */
.favorites-controls {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

/* Apply styling from Reset Filters button to Show My Favorites and Share Favorites by Email */

.favorites-controls {
    display: flex;
    gap: 10px;
}

#showFavoritesBtn, #shareFavoritesBtn, #reset-filter-button, #removeAllFavoritesBtn {
    padding: 7px 15px;
    background-color: #ddd; /* Matching Reset All Filters button */
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
}

#showFavoritesBtn:hover, #shareFavoritesBtn:hover, #reset-filter-button:hover, #removeAllFavoritesBtn:hover {
    background-color: #bbb;
}





        /* Responsive adjustments for smaller screens */
        @media (max-width: 600px) {

            h1 {
            font-size: 12px;
            }

            p.intro {
                font-size: 12px;
                background-color: #124E66;
                text-align: center;
                padding-left: 5px;
                padding-right: 5px;
            }

            #showFavoritesBtn, #shareFavoritesBtn, #reset-filter-button, #removeAllFavoritesBtn {
                padding: 5px 5px;
                background-color: #ddd; /* Matching Reset All Filters button */
                color: #000;
                font-weight: bold;
                border: none;
                border-radius: 3px;
                cursor: pointer;
                font-size: 12px;
                transition: background-color 0.3s;
            }

            .footer-container {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }
        
            .recording {
                flex-direction: column;
                align-items: flex-start;
            }
            .recording-label {
                display: inline;
            }
            .recording span {
                display: inline;
                margin-right: 0px; 
                padding: 2px;
            }

            .recording-row:nth-child(1) span:nth-child(1) {
                display: inline;
                margin-right: 0px; 
                padding: 5px;
            }


            .recording-row:nth-child(3) span {
                display: inline;
                margin-right: 0px; 
                padding: 3px;
            }

            .recording br {
                display: none;
            }
            audio {
                width: 100%;
            }

            img[alt="Highlight"] {
                padding-top: 0px;
            }

            /* Smaller artwork images on mobile */
            img[alt="Artwork"]{
                width: 100%; 
            }
             .artwork-img { 
                max-width: 75px; /* Force this size to override other styles */
            }
        }