/* Add this at the top of your CSS file */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


body {
    background-color: lightgray;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    padding-top: 60px; /* Space for the fixed header */
    padding-bottom: 150px; /* Space for the fixed footer */
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scrollbar during blur */
}

/* Header styling */
.main-header {
    background-color: #f0f0f0;
    height: 50px;
    padding: 0; /* Remove horizontal padding */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
    box-shadow: 0 1px 0px rgba(0,0,0,0.1);
    z-index: 1000;
}

.menu-icon {
    font-size: 28px;
    cursor: pointer;
    color: #333;
    z-index: 1001; /* Ensure it's above other header content and blur */
    padding-right: 15px;
    margin-left: auto; /* Push menu icon to the right */
}
.home-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 2; /* Ensure it's above other header content and blur */
    padding-left: 0;
    margin-left: 0; /* Remove negative margin */
    transition: opacity 0.3s ease, width 0.3s ease, margin-left 0.3s ease;
}

.home-icon img {
    height: 28px;
    width: 28px;
    display: block;
}

/* New container for the search icon */
.search-icon-container {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative; /* Needed for z-index to work */
    margin-left: 15px; /* Add padding from the left edge */
    z-index: 2; /* Place icons above the hidden search bar */
    transition: opacity 0.3s ease, width 0.3s ease;
}

#search-icon {
    height: 24px;
    width: 24px;
    filter: invert(70%); /* Makes the black SVG appear gray */
}

/* Search container in header */
#search-container {
    flex-grow: 1;
    opacity: 0;
    width: 0;
    pointer-events: none; /* Not clickable when hidden */
    transition: all 0.4s ease;
    position: relative;
}

/* When search is active, expand the search container */
.main-header.search-active #search-container {
    opacity: 1;
    width: auto;
    margin: 0 15px; /* Add some space on the sides */
    pointer-events: auto; /* Clickable when visible */
}

/* Hide home icon and search icon when search is active */
.main-header.search-active .search-icon-container {
    opacity: 0;
    pointer-events: none;
    width: 0;
    margin-left: 0;
}

.main-header.search-active .home-icon {
    opacity: 0;
    pointer-events: none;
    width: 0;
    padding-left: 0;
}

/* Hide the menu icon when search is active */
.main-header.search-active .menu-icon {
    opacity: 0;
    pointer-events: none;
}

.main-header.search-active {
}

.typeahead, .tt-query, .tt-hint {
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 21px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-input {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
    color: #999;
}
/* Footer styling */
.main-footer {
    background-color: #e0e0e0;
    height: 120px;
    padding: 5px 15px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    z-index: 1000; /* Keep it high */
    gap: 20px;
    
}

/* Hide the native audio element itself */
.hls-audio-player {
    display: none;
}

/* Custom Audio Control Button Styling */
.custom-audio-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #666;
    color: white; /* Color for icons */
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.custom-audio-controls:hover {
    background-color: #555;
}

/* Icon states */
/* SVG Play Icon Styling */
.play-icon {
    display: block; /* SVGs are inline by default, block helps with centering */
    width: 75%; /* Make SVG fill the width of its parent (.custom-audio-controls) */
    height: 75%; /* Make SVG fill the height of its parent */
}
/* Pause Icon Styling (still text-based) */
.pause-icon {
    line-height: 1; /* For text-based icons */
    font-weight: 60;
    font-size: 1 em; /* Just an example to make the icon a bit bigger */
}

/* Spinner Loading Icon Styling */
.loading-icon.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3); /* Light color for the static part */
    border-top: 4px solid #fff; /* Main color for the spinning part */
    border-radius: 50%;
    width: 20px; /* Adjust size to fit your icon space */
    height: 20px; /* Adjust size to fit your icon space */
    animation: spin 1s linear infinite;
}

/* Utility class to hide elements */
.hidden {
    display: none !important;
}

/* Keyframe for the loading spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Audio Visualizer Canvas Styling */
#audioVisualizer {
    flex-grow: 1;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.05); /* This background color can show through if not cleared properly */
    border-radius: 6px;
    overflow: hidden;
}

/* Swiper / Page Carousel Styling */
main {
    /* Now main is the only thing inside content-to-blur, its height remains as is */
    height: calc(100vh - 60px - 120px - 30px); /* 100vh - header - footer - scrolltext*/
    overflow: hidden;
    position: relative;
    cursor: grab;
}

.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    width: 1000%; /* This implies 10 slides, each 10% */
    height: 100%;
    transition: transform 0.3s ease-out;
}


/*i44 clickable radio image effect*/
.swiper-slide {
    cursor: pointer;
    transform: translateZ(0);  /* Hardware acceleration */
    backface-visibility: hidden;  /* Reduce flickering */
    -webkit-tap-highlight-color: transparent;  /* Remove tap highlight on mobile */
    will-change: transform;  /* Hint to browser for optimization */
    transition: transform 0.2s ease-out;/*, filter 0.1s ease-out;  /* Faster transition */
}
.swiper-slide:active {
    transform: scale(0.94);  /* Slightly less scale for faster response */
    /*filter: brightn ess(0.85);  /* Less brightness change for faster effect */
}
.swiper-slide img {
    transition: transform 0.1s ease-out;  /* Match parent transition speed */
    pointer-events: none;  /* Prevent image handling interference */
}
.swiper-slide:hover {
    filter: brightness(1.03);  /* Subtle hover effect */
}



.swiper-slide {

    width: 10%; 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    color: #555;
    background-color: transparent;
    flex-shrink: 0;
    flex-grow: 0;
    user-select: none;
    -webkit-user-drag: none;
    
}


/*i44 */
.swiper-slide .radioimage {
    display: none;
}

.swiper-slide .radioimage {
    width: 100%;           /* Fill the container horizontally */
    max-width: 320px;      /* Or your preferred max width */
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0 auto;        /* Center the image horizontally if container is wider */
    display: block;
    filter: grayscale(100%);
    transition: filter 1.5s ease;
    position: relative;
    backface-visibility: hidden;
}


.swiper-slide.active .radioimage {
    display: block;
}



/* --- POP-UP STYLES --- */

/* The overall content area that gets blurred */
.content-to-blur {
    transition: filter 0.3s ease-out; /* Smooth transition for the blur effect */
    width: 100%;
    position: relative;
    z-index: 1; /* Ensure it's below the fixed header/footer when blurred */
}

/* Pop-up Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Starts fully transparent, will be adjusted by JS */
    display: flex; /* Use flex to center the content */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Above main content, same as header/footer, but pop-up window is higher */
    /* Control visibility and opacity with JS adding/removing 'active' class */
    visibility: hidden;
    opacity: 0;
    transition: background-color 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s ease-out;
}

.popup-overlay.active {
    visibility: visible;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.2); /* Darker, transparent overlay when active */
}

/* Pop-up Window */
.popup-window {
    background-color: rgba(230, 230, 230, 1); /* Light gray with some transparency */
    border-radius: 15px; /* Rounded corners */
    padding: 30px; /* This padding applies to the entire popup window */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative; /* For positioning the close button inside */
    transform: scale(0.8); /* Starts slightly smaller */
    opacity: 0; /* Starts hidden */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    
    /* --- FIXED DIMENSIONS --- */
    width: 350px; /* Fixed width */
    max-width: 90%; /* Ensure it doesn't overflow on very small screens */
    max-height: 550px; /* Fixed maximum height */
    overflow-y: auto; /* Enable scrolling if content exceeds max-height */
    
    /* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */


    /* --- END FIXED DIMENSIONS --- */

    text-align: center;
    z-index: 1001; /* Ensure pop-up window is above the overlay and header/footer */
    margin: 0 20px; /* Add 20px margin on left and right for spacing */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    display: flex; /* Use flexbox to organize content vertically */
    flex-direction: column; /* Stack items vertically */
}

.popup-overlay.active .popup-window {
    transform: scale(1); /* Scales to normal size */
    opacity: 1; /* Becomes fully visible */
}

/* Remove previous popup-scroll-content rules as its div is removed */
/*
.popup-scroll-content {
    flex-grow: 1; 
    max-height: calc(100vh - 100px - 60px); 
    overflow-y: auto; 
    padding-right: 15px; 
    box-sizing: border-box; 
    -webkit-overflow-scrolling: touch; 
}
*/

/* Make the accordion take up available space within the flex container */
.popup-window .accordion {
    flex-grow: 1; /* Allow the accordion to grow and fill available space */
}

.popup-window h2 {
    margin-top: 0;
    color: #333;
    margin-bottom: 20px; /* Space below heading */
    flex-shrink: 0; /* Prevent heading from shrinking */
}

/* Custom styling for sub-menu items within the accordion */
.accordion-body ul {
    list-style: none; /* Remove default list bullets */
    padding-left: 0;
    margin: 0;
}

.accordion-body ul li {
    padding: 8px 0;
    
}

.accordion-body ul li:last-child {
    border-bottom: none; /* No border for the last item */
}

.accordion-body ul li a {
    text-decoration: none;
    color: #636262; /* Default link color */
    font-size: 16px;
    transition: color 0.2s ease-in-out;
    display: block;  /* Make the whole list item clickable */


    /*i44 for font changes*/
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;  /* or 500 for medium */
    font-size: 0.870em;
    letter-spacing: -0.2px;
}

.accordion-body ul li a:hover {
    color: #007bff; /* Hover color for sub-menu items */
}

/*i44 right intend*/
.play-radio-link {
    display: inline-block;
    padding-left: 30px;  /* Add indentation */
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.play-radio-link:hover {
    color: #666;
}

/* i44 courier font for menu items */

.accordion-body ul li a:hover, .play-radio-link:hover {
    color: #004add;
}


/* Override Bootstrap's default accordion background/border for a consistent look */
.accordion-button {
    background-color: transparent !important;
    color: #333 !important;
    font-weight: bold;
    font-size: 18px;
    padding-right: 1.25rem; /* Standard Bootstrap padding for spacing */
    
    /* Use flexbox for horizontal alignment of content */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: space-between; /* Push text to left, icon to right */

    /* left icon */
    flex-direction: row-reverse; /* Reverse the direction of flex items */
    justify-content: flex-end; /* Align items to the end (left side) */
    padding-left: 1.25rem;
}

.accordion-button:not(.collapsed) {
    color: #0f5cba !important; /* Color when active */
    background-color: transparent !important;
    box-shadow: none !important;
}

.accordion-item {
    background-color: transparent !important;
    border: none !important; /* Remove accordion item borders */
}

.accordion-collapse.collapse.show {
    border-top: 1px solid #ccc; /* Add a subtle line above expanded content */
}

/* --- CUSTOM ACCORDION ICONS --- */
.accordion-button::after {
    /* Remove Bootstrap's default arrow icon */
    background-image: none !important;
    transform: none !important; /* Remove Bootstrap's default rotation */
    
    /* Position and style the circle */
    /* Removed absolute positioning for flex layout */
    flex-shrink: 0; /* Prevent icon from shrinking when space is tight */
    margin-left: auto; /* Pushes the icon to the far right within the flex container */

    width: 24px; /* Size of the circle */
    height: 24px;
    border: 1px solid #bdbdbd; /* Changed to a thicker blue border */
    border-radius: 50%; /* Make it a circle */
    
    /* Internal centering for the plus/minus character */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4em; /* Slightly larger font size for the icon */
    line-height: 1; /* Helps vertical centering of the character */
    
    transition: all 0.3s ease; /* Smooth transition for the circle and its content */
    color: #bdbdbd; /* Changed color of the plus/minus sign to blue */
    
    /* Default content (plus sign for collapsed state) */
    content: '+';

    /* Fine-tuning for character alignment inside the circle */
    margin-top: -1px; /* Nudge the icon content up by 1px */
    
    /*i44 left icon */
    margin-left: 0; /* Remove auto margin that pushed it right */
    margin-right: 15px; /* Add space between icon and text */
}

/* i44 left icon */
.accordion-button.collapsed {
    padding-right: 1.25rem;
}

/* When accordion is expanded (not collapsed) */
.accordion-button:not(.collapsed)::after {
    content: '-'; /* Change content to minus sign */
    border-color: #bdbdbd; /* Keep blue border color when active */
    color: #bdbdbd; /* Keep blue plus/minus color when active */
}

/* New rule to control accordion expansion/contraction timing */
.accordion-collapse.collapsing {
    transition: height 0.6s ease !important; /* Adjust '0.7s' to your desired duration */
}

/* Add this rule to align the list items to the left */
.accordion-body {
    text-align: left;
}


/* hide the x button
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #555;
    z-index: 1002; /* Ensure close button is above popup content */


.close-btn {
    display: none;
}


/* Blur effect for the main content when the pop-up is active */
body.blurred .content-to-blur {
    filter: blur(10 px); /* Adjust blur amount as needed */
}

.imgbox {
    width: 90%;
    max-width: 160px;
    height: auto;
    filter:grayscale(100%);
    transition: filter 2s ease-in-out;
    border-radius: 15px;

    margin: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    display: block;
}


.swiper-slide .radioimage,
.imgbox {
    width: 100%;           /* Fill the container horizontally */
    max-width: 1.75em;      /* Converted from 140px (140 / 16) */
    min-height: 1.75em;     /* Converted from 140px (140 / 16) */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
    margin: 0 auto;        /* Center the image horizontally */
    display: block;
    filter: grayscale(100%);
    transition: filter 1.5s ease;
    position: relative;
    backface-visibility: hidden;
}





.imgbox.playing {
    filter: grayscale(0%);
}


.now-playing-container {
    width: 100%;
    height: 30px;
    background-color: #efefef;
    color: #6c6b6b;
    font-size: 0.6em;
    padding: 5px 10px;
    box-sizing: border-box;
    position: fixed;
    bottom: 120px;
    left: 0;
    border-top: 0px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.now-playing-text {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: monospace, "Consolas", "Courier New";  /* Added this line */
    font-weight: 700;
    letter-spacing: -0.2px;  /* Adjust this value to increase/decrease spacing */
}

/* Keyframes for the scrolling animation */
/* i44 commented to stop scrolling
@keyframes scrollText {
    0% {
        transform: translateX(0%); //Start at the right edge of the container 
    }
    100% {
        transform: translateX(-100%); // Move to the left, off-screen 
    }
}
    */





/* Optional: Pause animation on hover */
.now-playing-container:hover .now-playing-text {
    animation-play-state: paused;
}

/* Universal Box-Sizing for consistent layout */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
    overflow-x: hidden; /* Prevent body scroll */
    
    /* Font smoothing for sharper text rendering */
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: 0.95em;
    text-align: center;
    color: #b8b8b8;
    margin-top: 100px;
    margin-bottom: 100px;
}

/* Container for the ticker cards */
.card-slider-container {
    width: 100%;
    overflow: hidden; /* Hide cards outside the view */
    cursor: grab; /* Indicate draggable */
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-drag: none; /* Disable native image dragging */
    padding: 10px 0; /* Vertical padding if needed */
}

/* The wrapper that holds all the cards and moves horizontally */
.card-slider-wrapper {
    display: flex;
    white-space: nowrap; /* Keep items in a single line */
    will-change: transform; /* Hint to browser for animation optimization */
    backface-visibility: hidden; /* Helps with smoother rendering and blurriness */
    /* transform: translateZ(0); /* Can be added if backface-visibility isn't enough */
}

/* Individual square card styling */
.square-card {
    flex-shrink: 0; /* Prevent cards from shrinking */
    width: 140px; /* Fixed width for square cards */
    height: 140px; /* Fixed height for square cards */
    margin-right: 10px; /* Space between cards */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    /* box-sizing: border-box; is handled by universal selector */
    text-align: left;
    overflow: hidden;
}

.square-card h3 {
    margin: 0 0 10px 0;
    font-size: 0.77em;
    color: #333;
    line-height: 1.3;
    word-break: break-word; /* Break long words to prevent overflow */
    overflow: hidden; /* Hide overflowed text */
    word-wrap: break-word;
    /*text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    max-height: 2.6em; /* Limit to 2 lines (1.3em * 2) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.square-card p {
    margin: 0;
    font-size: 0.85em;
    color: #666;
    line-height: 1.4;
    flex-grow: 1;
    
    /* Text clipping and ellipsis */
    word-wrap: break-word;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; /* Ensure text wraps normally */
    display: -webkit-box; /* Required for line-clamp */
    -webkit-line-clamp: 3; /* Limit text to 3 lines */
    line-clamp: 3; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
}

.square-card .source {
    font-size: 0.75em;
    color: #999;
    margin-top: 10px;
    
}