/* General Styles */
body {
    font-family: Arial, sans-serif; /* Bootstrap defaults to sans-serif */
    background-color: #f9f9f9; /* Optional: Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Use min-height for compatibility */
    margin: 0;
}


.breadcrumb {
    background: transparent;
    padding: 10px 15px;
    border-radius: 5px;
}
.breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
}
.breadcrumb-item.active {
    font-weight: bold;
    color: #555;
}


/* Form Container */
.form-container {
    background-color: #fff;
    border-radius: 0.5rem; /* Bootstrap uses rem units for rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

/* Submit Button */
.btn-submit {
    width: 100%; /* Bootstrap class can replace this: `w-100` */
}

.btn-submit:hover {
    background-color: #0056b3; /* Optional: Custom hover effect */
}

/* Sticky footer player styling */
.sticky-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #343a40; /* Dark background */
    color: #fff;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(100%); /* Hidden by default */
    transition: transform 0.3s ease-in-out;
}

.sticky-player.show {
    transform: translateY(0); /* Slide up when active */
}

.sticky-player .station-info {
    flex-grow: 1;
    margin-left: 15px;
}

.sticky-player audio {
    height: 30px;
}

.sticky-player .close-player {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
}

.sticky-player .close-player:hover {
    color: #ff6b6b; /* Highlight on hover */
}


.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.nav-link:hover {
    color: #f8d568 !important; /* Change link color on hover */
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
}


    /* Comment Section Styling */
    .comment-section {
        background-color: #f8f9fa; /* Light gray background */
    }

    /* Reply Section Styling */
    .reply-section {
        background-color: #f1f1f1; /* Slightly darker gray */
        padding: 10px; /* Add padding for replies */
        border-radius: 5px; /* Rounded corners */
        margin-top: 10px; /* Space between replies and comments */
    }

    /* Reduce Margins */
    .comment-section p,
    .reply-section p {
        margin-bottom: 5px; /* Smaller gap between username, content, and date */
    }

    /* Small Margin Between Each Reply */
    .reply-section + .reply-section {
        margin-top: 10px; /* Gap between successive replies */
    }

    .modal-body .btn {
        width: 150px;
    }
    #share-url {
        font-size: 14px;
    }


    .share-icon {
        font-size: 80px; /* Adjust size as needed */
        transition: color 0.3s ease;
    }

    .share-icon:hover {
        color: #f69402; /* Highlight color */
    }

 

    .social-links ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .social-links ul li {
        display: inline-block;
        margin-right: 15px;
    }

    .social-links ul li:last-child {
        margin-right: 0; /* Remove margin for the last icon */
    }

    .social-links ul li i {
        transition: color 0.3s ease;
    }

    .social-links ul li i:hover {
        color: #ff8400; /* Highlight color */
    }
 
    /* Fav button */
    #loveBtn {
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    #loveBtn:hover {
        transform: scale(1.1); /* Slight zoom effect on hover */
    }

    #loveIcon {
        transition: color 0.2s ease, transform 0.2s ease;
    }

    #loveIcon.fas {
        color: red; /* Solid heart is red */
    }

    #loveIcon.far {
        color: grey; /* Outline heart is grey */
    }

    #loveIcon:hover {
        transform: scale(1.2); /* Slight zoom effect on hover */
    }

    #favorites-recent {
        margin-bottom: 0;
    }


    #load-more-btn {
        margin: 0; /* Remove default margin */
        border-radius: 0; /* Optional: Make it flush with the grid */
    }

    /* Optional styling for smooth integration */
    #favorites-recent .card {
        margin-bottom: 0px; /* Add a small gap between cards */
    }

    .btn-secondary {
        background-color: #6c757d;
        border: none;
        color: white;
        text-transform: uppercase;
        font-size: 14px;
        padding: 10px;
    }

    #load-more-btn:hover {
        background-color: #5a6268;
    }



    #featured-radios .card {
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
        transition: transform 0.2s ease-in-out;
    }

    #featured-radios .card:hover {
        transform: scale(1.05);
    }

    #featured-radios .card img {
        border-bottom: 1px solid #ddd;
    }

    .btn-secondary {
        background-color: #6c757d;
        border: none;
        color: white;
        text-transform: uppercase;
        font-size: 14px;
        padding: 10px;
    }

    #load-more-featured {
        display: inline-block;
        width: 150px;
        margin: 0; /* Ensures button is close to grid */
    }

    #load-more-featured:hover {
        background-color: #5a6268;
    }





    #stations-grid .card {
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
        transition: transform 0.2s ease-in-out;
    }

    #stations-grid .card:hover {
        transform: scale(1.05);
    }

    #stations-grid .card img {
        border-bottom: 1px solid #ddd;
    }

    .btn-primary {
        background-color: #6c757d;
        border: none;
        color: white;
        text-transform: uppercase;
        font-size: 14px;
        padding: 1px;
    }

    #load-more-btn {
        display: inline-block;
        width: 100%;
        margin: 0; /* Ensures button is close to grid */
    }

    #load-more-btn:hover {
        background-color: #5a6268;
    }

   
 
    
    

 
    #Country-radios .card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease-in-out;
        padding: 2px;
        width: 90px; /* Smaller width */
        height: 110px; /* Smaller height */
      
        
    }
    
    #Country-radios .card img {
        width: 60px; /* Smaller width */
        height: 60px; /* Smaller height */
        object-fit: cover;
        margin: 0 auto; /* Center align */
        display: block;
    }
    
    #Country-radios .card:hover {
        transform: scale(1.05); /* Slight zoom on hover */
    }
    
    #Country-radios .card-body {
        padding: 2px; /* Smaller padding for text */
        font-size: 10px; /* Smaller font size */
        text-align: center; /* Center align text */
    }
    
  

    /* Ensure the logo and text are horizontally aligned */
.card .row.g-0 {
    display: flex;
    align-items: center; /* Align logo and write-up vertically */
}

/* Logo Styling */
.card img {
    max-height: 80px; /* Adjust height as needed */
    object-fit: cover;
    margin-left: 10px;
}

/* Adjust text alignment */
.card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Add spacing between items */
.row > .col-12, .row > .col-md-6 {
    padding: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card .card-body {
        padding-left: 10px; /* Add space between logo and text */
    }
}

body {
    margin-bottom: 70px; /* Adjust to match the height of the iframe */
}