:root { --pink: #ffb900; --pink-dark: #e39b00; --dark: #071a3a; --light-pink: #fff8e5; --border: #e8ebf0; --text: #0b1730; }
body { font-family: "Poppins", sans-serif; color: var(--text); font-size: 16px; background: #f3f8ff;}
a { text-decoration: none; }
strong { font-weight: 600; }
.bg-light{background-color: #f3f8ff !important}
.text-pink { color: var(--pink) !important; }
.bg-pink { background: var(--pink) !important; }
.btn-pink { background: var(--pink); border-color: var(--pink); color: var(--dark); }
.btn-pink:hover { background: var(--pink-dark); border-color: var(--pink-dark); color: var(--dark); }
.section-title { font-size: 22px; font-weight: 700; margin: 0; position: relative; padding-left: 14px; }
.section-title:before { content: ""; position: absolute; left: 0; top: 3px; width: 3px; height: 16px; background: var(--pink); }
.site-header { background: #fff !important; border-bottom: 1px solid #edf0f4 !important; }
.site-header .nav-link { color: #111; font-size: 14px; font-weight: 500; padding: 16px 0 !important; }
.site-header .nav-link:hover { color: #d9910a; }
.site-header .nav-link.active { color: #d9910a; border-bottom: 3px solid var(--pink); border-bottom-color: #d9910a; }
.site-header .btn { font-size: 13px; }
.navbar-toggler .icon-close { display: none; }
.navbar-toggler .icon-open { display: inline-block; }
.navbar-toggler:not(.collapsed) .icon-open { display: none; }
.navbar-toggler:not(.collapsed) .icon-close { display: inline-block; }
.hero-section { overflow: hidden; background-color: #011039; background-image: url('hero-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center left; color: #fff; }
.hero-title { font-size: 48px; line-height: 1.15; font-weight: 700; }
.hero-title span { color: var(--pink); }
.hero-text { font-size: 16px; line-height: 1.7; color: #eef3fb; }
.hero-search { display: flex; gap: 10px; max-width: 620px; }
.hero-search .input-group { flex: 1; }
.hero-search .input-group-text { background: #fff; border-right: 0; border-color: #fff; }
.hero-search .form-control { border-left: 0; height: 46px; font-size: 14px; box-shadow: none; border-color: #fff; }
.hero-search .form-select { width: 120px; height: 46px; font-size: 14px; background-color: #092651; background-image: url('select-arrow.svg'); border-color: #3b587f; color: #fff; }
.hero-search .form-select option { color: #111; background: #fff; }
.hero-search .btn { height: 46px; }
.hero-section-inner { overflow: hidden; background-color: #0a264e;color: #fff; }

.popular-search { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: 12px; }
.popular-search strong { font-size: 12px; margin-right: 5px; }
.popular-search a { border: 1px solid #3b587f; border-radius: 20px; padding: 4px 9px; background: rgba(255, 255, 255, .04); color: #fff; }
.popular-search a:hover { color: var(--pink); border-color: var(--pink); }
.hero-radio { max-height: 400px; position: relative; z-index: 2; }
.category-card { height: 130px; background: #fff; border: 1px solid #edf0f4; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #222; box-shadow: 0 3px 15px rgba(0, 0, 0, .04); transition: .2s; }
.category-card i { font-size: 32px; color: var(--pink); margin-bottom: 8px; }
.category-card strong { font-size: 13px; }
.category-card small { font-size: 12px; color: #777; margin-top: 4px; }
.category-card img { max-height: 50px; }
.category-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, .08); }
.categories .active { background: #fff9ea; border: 1px solid #ffe2b8; }
.station-list { border: 1px solid #e8ebf0; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 15px rgba(0, 0, 0, .03); }
.station-item { display: flex; align-items: center; gap: 18px; padding: 12px 15px; border-bottom: 1px solid #edf0f4; min-height: 74px; }
.station-item > img { width: 68px; height: auto; object-fit: cover; border-radius: 5px; }
.station-info { width: 190px; }
.station-info strong { display: block; font-size: 16px; }
.station-info small { display: block; font-size: 12px; color: #777; margin-top: 4px; }
/*.station-tags { display: flex; gap: 7px; flex: 1; text-align: center; }
.station-tags span { font-size: 11px; padding: 4px 11px; border-radius: 20px; }
.station-tags span:nth-child(1) { background: #fff8e5; color: #222; border: 1px solid #fbdf94;}
.station-tags span:nth-child(2) { background: #f2f4f8; color: #222; border: 1px solid #d4e2ff; }*/

.station-tags { display: flex; align-items: center; gap: 7px; flex: 1; }
.station-tags span { font-size: 11px; padding: 4px 11px; border-radius: 20px; width: 100px; min-width: 100px; max-width: 100px; overflow: hidden; white-space: nowrap; display: inline-block; position: relative; box-sizing: border-box; }
.station-tags span .text-track { display: inline-block; white-space: nowrap; padding: 0; background: transparent; border: none; }
.station-tags span.is-overflowing .text-track { display: inline-block; animation: scrollText 8s linear infinite; }
.station-tags span:hover .text-track { animation-play-state: paused; }
.station-tags span:nth-child(1) { background: #fff8e5; color: #222; border: 1px solid #fbdf94; }
.station-tags span:nth-child(2) { background: #f2f4f8; color: #222; border: 1px solid #d4e2ff; }
@keyframes scrollText { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.banner-tags span{font-size: 11px; padding: 4px 11px; border-radius: 20px; background: #f2f4f8; color: #222; border: 1px solid #d4e2ff; }
.play-btn { width: 38px; height: 38px; line-height: 0px; border: 0; border-radius: 50%; background: var(--dark); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.play-btn:hover { background: #184fab; color: #fff; }
.btn-live { width: 56px; height: 56px; line-height: 0px; border: 0; border-radius: 50%; background: var(--dark); color: #fff; font-size: 30px; 
  display: flex; align-items: center; justify-content: center; }
.btn-live:hover { background: #184fab; color: #fff; }

.view-link { font-size: 12px; white-space: nowrap; }
.load-more { border: 1px solid #8c9bb2; color: var(--dark); font-size: 11px; border-radius: 6px; padding: 7px 45px; }
.list-radio-card { background-color: #011434; color: #fff; border-radius: 11px; padding: 25px 20px; font-size: 14px; 
  background-image: url('mic-bg.jpg'); background-repeat: no-repeat; background-position: right center; background-size: contain; }
.list-radio-card > i { font-size: 35px; background: var(--pink); color: var(--dark); border-radius: 50%; padding: 0px; width: 65px; height: 65px; display: block; text-align: center; line-height: 65px; }
.list-radio-card h3 { font-size: 22px; margin-top: 18px; font-weight: 600; }
.list-radio-card p { font-size: 13px; line-height: 1.7; color: #dce6f6; }
.list-radio-card .btn { font-size: 14px; margin-top: 8px; background: var(--pink); color: var(--dark); border-color: var(--pink); }
.help-card { border: 1px solid #e8ebf0; border-radius: 11px; padding: 20px; box-shadow: 0 3px 15px rgba(0, 0, 0, .03); }
.help-card h3 { font-size: 18px; font-weight: 600; }
.help-card p { font-size: 13px; }
.help-card ul { padding-left: 18px; list-style: none; }
.help-card li { font-size: 13px; margin: 11px 0; }
.help-card li:before { color: var(--pink); }
.btn-outline-pink { border: 1px solid var(--dark); color: var(--dark); font-size: 14px; width: 100%; }
.btn-outline-pink:hover { background: var(--dark); color: #fff; }
.features-box { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;}
.feature-item { padding: 25px; text-align: center; border: 1px solid #e8ebf0; border-radius: 12px; box-shadow: 0 3px 15px rgba(0, 0, 0, .03); background-color: #fff }
.feature-icon { width: 50px; height: 50px; line-height: 55px;margin-bottom: 15px; border-radius: 50%; display: inline-block; align-items: center; justify-content: center; font-size: 30px; }
.feature-item strong { font-size: 14px; }
.feature-item p { font-size: 12px; line-height: 1.6; color: #666; margin: 7px 0 0; }
.blue { background: #cbf3ff; color: #222}
.green { background: #d4ffcf; color: #222}
.pink { background: #ffd9e0; color: #222}
.vio { background: #d9d6ff; color: #222}

.site-footer { background: var(--dark); color: #fff; }
.site-footer h5 { font-size: 16px; margin-bottom: 18px; }
.site-footer > a { display: block; color: #d8e0ed; font-size: 11px; margin-bottom: 12px; }
.site-footer .col-lg-2 a { display: block; color: #d8e0ed; font-size: 11px; margin-bottom: 12px; }
.footer-tagline { font-size: 11px; color: #d8e0ed; }
.site-footer .col-lg-5 p { font-size: 11px; color: #cbd5e4; }
.social-links { display: flex; gap: 8px; }
.social-links a { width: 32px; height: 32px; border-radius: 50%; background: #19345e; color: #fff; display: flex; align-items: center; justify-content: center; }
.newsletter { display: flex; gap: 7px; }
.newsletter .form-control { height: 38px; font-size: 11px; }
.newsletter .btn { font-size: 11px; padding: 0 18px; }
.footer-bottom { background: var(--pink); text-align: center; padding: 12px; font-size: 11px; color: var(--dark); height: 130px }
.trusted-section { background: #fff; }
.trusted-logos { overflow: hidden; width: 100%; position: relative; }
.trusted-logos-track { display: flex; gap: 10px; width: max-content; animation: scrollLogos 20s linear infinite; }
.trusted-logos-track:hover { animation-play-state: paused; }
.trusted-logos-track > div { width: 140px; min-height: 58px; border: 1px solid #edf0f4; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; color: #26334a; background: #fff; flex-shrink: 0; }
@keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }.fade-up { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; transform: translateY(30px); }
.fade-left { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; transform: translateX(-40px); }
.fade-right { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; transform: translateX(40px); }
.fade-up.is-visible { opacity: 1; transform: translate(0, 0); }
.fade-left.is-visible { opacity: 1; transform: translate(0, 0); }
.fade-right.is-visible { opacity: 1; transform: translate(0, 0); }
.fade-up:nth-child(1) { transition-delay: 0.0s; }
.fade-right:nth-child(1) { transition-delay: 0.0s; }
.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-right:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }
.fade-up:nth-child(5) { transition-delay: 0.4s; }
.fade-up:nth-child(6) { transition-delay: 0.5s; }
.fade-up:nth-child(7) { transition-delay: 0.6s; }
.fade-up:nth-child(8) { transition-delay: 0.7s; }
.fade-up:nth-child(9) { transition-delay: 0.8s; }
.fade-up:nth-child(10) { transition-delay: 0.9s; }
.fade-up:nth-child(11) { transition-delay: 1s; }
.fade-up:nth-child(12) { transition-delay: 1.1s; }


.ad{padding: 15px 0;}
.ad-placeholder{background-color: #eaf6ff; padding: 15px; border:1px dashed #57aef2; border-radius: 12px; min-height: 90px; font-size: 12px; display: flex;
    align-items: center; justify-content: center; text-align: center;}
.side-ad{min-height: 250px;}
.tall-ad{min-height: 600px;}

.lang{width: 50px; height: 50px; line-height: 50px;margin-bottom: 8px; font-size: 24px; font-weight: 600; background-color: #f5ae04; text-align: center; border-radius: 50%}
.text-warning{color: #e7b217 !important}
.form-control, .form-select{border-color: #ccc !important}
.btn-primary{background:#3767c7 !important}
.btn-photo{top:100%; left:50%; transform: translate(-50%, -50%); z-index:111; width:56px; height:56px; line-height:48px; overflow:hidden; border:4px solid #fff;}
.wiz .badge{width:45px; height:45px; line-height:40px;}

.bg-navy{background-color: #071a3d}
.text-primary{color: #04143c !important}
.gradient-glance-card {background: linear-gradient(135deg, #0b132b 0%, #1c2541 50%, #3a506b 100%); color: #ffffff;}


.audio-wave-container { width: 100%; max-width: 420px; height: 50px; display: flex; align-items: center; overflow: hidden; }
.waveform-svg { width: 100%; height: 50px; display: block; overflow: visible; }
.waveform-svg rect { fill: #ffc107; shape-rendering: geometricPrecision; }
.btn-live { width: 56px; height: 56px; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-live i { font-size: 25px; line-height: 1; }
.station-item .audio-wave-container { max-width: 150px; height: 40px;}
.station-item .btn-live { width: 35px; height: 35px; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.station-item .waveform-svg {height: 40px;}
.station-item .waveform-svg rect { fill: #3342ca; }
@media (max-width: 767.98px) {
.audio-wave-container { max-width: 40px !important; height: 45px; }
.waveform-svg { height: 45px; }
.btn-live { width: 52px; height: 52px; }
}

.vote-btn{font-size: 16px; border-radius: 50%;}
.share-btn{font-size: 16px;}
.modal-content .dropdown-item{padding: .75rem 1rem !important;}
.modal-content .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.feature-icon2{
    width:25px;
    height:25px;
    border-radius:50%;
    background:#7ed957;
    color:#173a59;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
    flex-shrink:0;
}

@media (max-width: 991px){
    .feature-icon2{
        width:20px;
        height:20px;
        font-size:16px;
    }
}


.accordion-dark .accordion-item{
    background:#19296a;
    border:1px solid rgba(255,255,255,.1);
    border-radius:0;
}

.accordion-dark .accordion-button{
    background:#cfe3fe;
    color:#0b2c5d;
    font-weight:500;
    box-shadow:none;
    padding:1.25rem;
}

.accordion-dark .accordion-button:not(.collapsed){
    background:#cfe3fe;
    color:#0b2c5d;
}

.accordion-dark .accordion-body{
    background:#fff;
    color:#222;
    line-height:1.8;
    font-size:.95rem;
    border-top:1px solid #9cbce8;
}

.accordion-dark .accordion-item + .accordion-item{
    margin-top:1px;
}

.social-icons a {
  font-size: 30px; /* Controls the size of the icons */
  margin-right: 15px;
  transition: color 0.2s ease;
}

/* Optional brand-specific hover colors */
.social-icons .bi-facebook { color: #1877f2; }
.social-icons .bi-youtube { color: #ff0000; }
.social-icons .bi-instagram { color: #e4405f; }
.social-icons .bi-spotify { color: #1db954; }


:root {--webfm-dark: #071527; --webfm-yellow: #ffc107; --webfm-yellow-btn: #ffb700;}
.modal-xl {max-width: 1050px;}
.modal-content {border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.15);}
.brand-panel {background-color: var(--webfm-dark); color: #ffffff; padding: 40px 30px; display: flex; flex-direction: column; justify-content: space-between; position: relative; background-size: cover; background-position: center;}
.brand-panel::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(7,21,39,0.92) 20%, rgba(7,21,39,0.65) 60%, rgba(7,21,39,0.95) 100%); z-index: 1;}
.brand-panel > * {position: relative; z-index: 2;}
.brand-title {font-size: 1.75rem; font-weight: 700; line-height: 1.2;}
.brand-title span {color: var(--webfm-yellow);}
.form-panel {padding: 35px 40px; background-color: #ffffff; max-height: 100vh; overflow-y: auto;}
.form-label {font-size: 0.85rem; font-weight: 600; color: #212529; margin-bottom: 4px;}
.form-control, .form-select {font-size: 0.875rem; padding: 0.55rem 0.75rem; border-radius: 6px; border: 1px solid #cccccc;}
.form-control:focus, .form-select:focus {border-color: var(--webfm-yellow-btn); box-shadow: 0 0 0 0.2rem rgba(255, 183, 0, 0.25);}
.journey-card {border: 1px solid #cccccc; border-radius: 6px; padding: 10px 12px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center;}
.btn-check:checked + .journey-card {border-color: var(--webfm-yellow-btn); background-color: #fffdf5;}
.btn-warning-custom {background-color: var(--webfm-yellow-btn); border-color: var(--webfm-yellow-btn); color: #000; font-weight: 600; padding: 0.65rem 1rem; border-radius: 6px; transition: opacity 0.2s;}
.btn-warning-custom:hover {background-color: #e5a600; border-color: #e5a600;}
.success-icon-wrapper {width: 80px; height: 80px; background-color: #fff9e6; border: 2px solid #ffeeba; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; color: #d4a005; font-size: 2rem;}
.form-check-input{border-color:#a19f9f !important;}
.journey-card { border: 1px solid #dee2e6; border-radius: 6px; padding: 10px 12px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; background-color: #ffffff; margin-bottom: 0; }
.journey-card input[type="radio"] { margin-top: 0 !important; margin-right: 8px; flex-shrink: 0; }
.journey-card:has(input:checked) { border-color: var(--webfm-yellow-btn) !important; background-color: #fffdf5; }
.form-check-input:checked { background-color: var(--webfm-yellow-btn); border-color: var(--webfm-yellow-btn) !important; }

.list-end{float: end; text-align: right;}

@media (min-width: 1025px) and (orientation: landscape) {
.rightSidebar { position: sticky; top: 1rem; align-self: flex-start; }
.rightSidebar2 { position: sticky; top: 1rem; align-self: flex-start; }
}

@media (min-width: 760px) and (orientation: portrait) {
.rightSidebar2 { position: sticky; top: 1rem; align-self: flex-start; }

}

 .mobile-play-btn.is-playing { animation: livePulse 1.3s infinite cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, box-shadow; }
@keyframes livePulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6); } 50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(255, 193, 7, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } }

@media (max-width: 1200.98px) {
 .play-btn.is-playing, .btn-live.is-playing { animation: livePulse 1.3s infinite cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, box-shadow; }
@keyframes livePulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6); } 50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(255, 193, 7, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } }
.list-end{float: end; text-align: right; max-width: 160px;}
}

@media (max-width: 991.98px) {
  .site-header .nav-link.active { border: 0; }
  .hero-title { font-size: 32px; }
  .hero-section { text-align: center; }
  .hero-section .row { min-height: 0; }
  .hero-search { max-width: 100%; flex-wrap: wrap; }
  .hero-search .input-group { flex: 1 1 100%; }
  .hero-search .form-select { flex: 1; }
  .popular-search { justify-content: center; }
  .hero-radio { max-height: 300px; }
  .features-box { grid-template-columns: repeat(2, 1fr); }
  .trusted-logos { grid-template-columns: repeat(4, 1fr); }
 }

@media (max-width: 575.98px) {
  .hero-section{min-height: 67vh; background-size: 200%; background-repeat: no-repeat; background-position: right bottom;}
  .hero-title { font-size: 28px; }
  .hero-text { font-size: 13px; }
  .hero-search .form-select { width: calc(50% - 6px); }
  .station-item { gap: 12px; }
  .station-item > img { width: 55px; height: 48px; }
  .station-info { width: auto; flex: 1; }
  .station-tags { display: none; }
  .station-info strong {font-size: 14px; }
  .station-info small {font-size: 10px; }
  .play-btn { width: 30px; height: 30px; line-height: 0px; font-size: 20px; }
  .features-box { grid-template-columns: 1fr; }
  .feature-item { border-bottom: 1px solid #eee; padding-bottom: 15px; }
  .navbar-nav { min-height: 80vh; padding: 25px 15px; }
  .navbar-nav .nav-link { font-size: 18px; }
  .trusted-logos { grid-template-columns: repeat(2, 1fr); }
  .mb-scroll{overflow-y: hidden;}
  .mb-scroll .row{min-width: 800px}
  .list-end{float: end; text-align: right; max-width: 80px;}
}
@media (max-width: 350.98px) {
  .hero-section{min-height: 88vh; background-size: 200%; background-repeat: no-repeat; background-position: right bottom;}
}




/* Sticky Audio Player Transitions */
#stickyAudioPlayer {
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}
#stickyAudioPlayer.show-player {
    transform: translateY(0);
    opacity: 1;
}
.hover-text-white:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

@keyframes pulseGlow {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
.animate-pulse {
    animation: pulseGlow 1.5s infinite ease-in-out;
}
@media (min-width: 992px) {
    .md-wave-show {
        display: block !important;
    }
}

.detail-title{font-size: 2rem}
@media (max-width: 768px) {
    .detail-title{font-size: 1.3rem}
    .st-nm{border-bottom:1px solid #2a435c; padding-bottom: 3px;}
    .mobile-player-grid {
        display: grid !important;
        /* Equal 1fr columns on the sides ensure the center element is locked dead-center */
        grid-template-columns: 1fr auto 1fr !important;
        grid-template-areas: 
            "top top top"
            "left center right" !important;
        gap: 6px 4px !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Top Area: Station name centered, logo hidden */
    .mobile-top-area {
        grid-area: top;
        justify-self: center;
        width: 100%;
        justify-content: center !important;
    }

    .mobile-hide-logo {
        display: none !important;
    }

    .mobile-name-stack {
        align-items: center !important;
        text-align: center !important;
    }

    .mobile-station-title {
        font-size: 0.85rem !important;
    }

    /* Hide large screen LIVE badge on mobile */
    .mobile-top-area .d-lg-flex {
        display: none !important;
    }

    /* Mobile LIVE Badge on left of controls */
    .mobile-live-badge-grid {
        grid-area: left;
        justify-self: start;
        display: flex !important;
        padding-left: 4px;
    }

    /* Center Controls Area - Perfectly centered on screen */
    .mobile-controls-area {
        grid-area: center;
        justify-self: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 10px !important;
    }

    .mobile-hide-label {
        display: none !important;
    }

    .mobile-play-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.1rem !important;
    }

    /* Volume Area on right of controls */
    .mobile-volume-area {
        grid-area: right;
        justify-self: end;
        padding-right: 4px;
    }

    .mobile-vol-range {
        width: 50px !important;
    }
    .footer-bottom {height: 150px; padding-left: 0; padding-right: 0; }

}


/* Rotate hourglass icon during buffering/loading */
@keyframes spin-loader {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-icon {
  display: inline-block;
  animation: spin-loader 1.2s linear infinite;
}

.station-logo-lg {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.station-logo-sm {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.waveform-height {
  height: 25px;
}

@media (min-width: 766px) and (max-width: 999px){
  .station-item {
    gap: 0.5rem !important; /* Reduced from 2.5rem to match standard row spacing */
  }
  .station-logo-container {
    margin-right: -70px;
  }
}

@media (min-width: 1000px) {
  .station-item {
    gap: 1rem !important; /* Use a standard, consistent gap */
  }
  .station-logo-container {
    margin-right: -50px; /* Remove negative margin causing separation issues */
  }
}

@media (min-width: 1300px) and (max-width: 1400px){
  .station-item {
    gap: 1.5rem !important; /* Reduced from 2.5rem to match standard row spacing */
  }
  .station-logo-container {
    margin-right: 0;
  }
}


/* Mobile View - Applies ONLY to phones (below 576px) */
@media (max-width: 640px) {
  .station-item {
    display: grid !important;
    grid-template-columns: 65px 1fr 20px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 0px;
    align-items: center;
  }

  .station-logo-container {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .station-name-row {
    grid-column: 2;
    grid-row: 1;
  }

  .station-controls-row {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .station-arrow-col {
    grid-column: 3;
    grid-row: 1 / span 2;
    text-align: right;
  }
}

.audio-bar-animation {
    height: 20px;
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}

.audio-bar-animation .bar {
    display: block;
    width: 4px;
    height: 100%;
    background-color: #ffc107; /* Match your theme color */
    animation: soundWave 1.2s infinite ease-in-out;
    border-radius: 2px;
}

.audio-bar-animation .bar:nth-child(1) { animation-delay: -0.4s; }
.audio-bar-animation .bar:nth-child(2) { animation-delay: -0.8s; }
.audio-bar-animation .bar:nth-child(3) { animation-delay: 0s; }
.audio-bar-animation .bar:nth-child(4) { animation-delay: -0.5s; }
.audio-bar-animation .bar:nth-child(5) { animation-delay: -0.2s; }

@keyframes soundWave {
    0%, 100% { height: 6px; }
    50% { height: 20px; }
}


/* Default state (Paused): All bars are grey */
.station-item .audio-bar-animation .bar {
  background-color: #d1d5db !important; /* light grey */
  animation-play-state: paused !important;
}

/* Active state (Playing): Bars turn yellow and animate */
.station-item:has(.play-btn .bi-pause-fill) .audio-bar-animation .bar {
  background-color: #ffc107 !important; /* yellow */
  animation-play-state: running !important;
}

@media (min-width: 576px) and (max-width: 640px){
.audio-bar-animation{margin: 0 25%; }
}
@media (min-width: 561px) and (max-width: 575px){
.audio-bar-animation{margin: 0 25%; }
}
@media (min-width: 521px) and (max-width: 560px){
.audio-bar-animation{margin: 0 23%; }
}
@media (min-width: 511px) and (max-width: 520px){
.audio-bar-animation{margin: 0 5.25rem; }
}
@media (min-width: 501px) and (max-width: 510px){
.audio-bar-animation{margin: 0 5rem; }
}
@media (min-width: 491px) and (max-width: 500px){
.audio-bar-animation{margin: 0 4.75rem; }
}
@media (min-width: 481px) and (max-width: 490px){
.audio-bar-animation{margin: 0 4.5rem; }
}
@media (min-width: 471px) and (max-width: 480px){
.audio-bar-animation{margin: 0 4rem; }
}
@media (min-width: 461px) and (max-width: 470px){
.audio-bar-animation{margin: 0 3.5rem; }
}
@media (min-width: 451px) and (max-width: 460px){
.audio-bar-animation{margin: 0 3rem; }
}
@media (min-width: 441px) and (max-width: 450px){
.audio-bar-animation{margin: 0 2.75rem; }
}
@media (min-width: 431px) and (max-width: 440px){
.audio-bar-animation{margin: 0 2.5rem; }
}
@media (min-width: 421px) and (max-width: 430px){
.audio-bar-animation{margin: 0 2.25rem; }
}
@media (min-width: 411px) and (max-width: 420px){
.audio-bar-animation{margin: 0 2rem; }
}
@media (min-width: 401px) and (max-width: 410px){
.audio-bar-animation{margin: 0 1.75rem; }
}
@media (min-width: 391px) and (max-width: 400px){
.audio-bar-animation{margin: 0 1.5rem; }
}
@media (min-width: 381px) and (max-width: 390px){
.audio-bar-animation{margin: 0 1.25rem; }
}
@media (min-width: 371px) and (max-width: 380px){
.audio-bar-animation{margin: 0 1rem; }
}
@media (min-width: 361px) and (max-width: 370px){
.audio-bar-animation{margin: 0 .7rem; }
}
@media (min-width: 351px) and (max-width: 360px){
.audio-bar-animation{margin: 0 .4rem; }
}
@media (min-width: 346px) and (max-width: 350px){
.audio-bar-animation{margin: 0 .15rem;}
}
@media (min-width: 340px) and (max-width: 345px){
.audio-bar-animation{margin: 0 .1rem;}
}