.no-underline, .no-underline:hover, .no-underline:focus {
     text-decoration: none;
}
.btn-add,.desktop-nav a:hover,.search-icon-btn:hover{
    color:#fff
}
.desktop-nav a,.offcanvas a{
    font-family:Poppins-medium !importanttext-decoration:none
}
#top-header,.genre-card{
    font-family:Poppins-regular !important
}
@font-face{
    font-family:Poppins-extra;
    src:url('/fonts/trueno_bold.otf') format('truetype');
    font-display:swap
}
@font-face{
    font-family:Poppins-bold;
    src:url('/fonts/trueno_bold.otf') format('truetype');
    font-display:swap
}
@font-face{
    font-family:Poppins-medium !important ;
    src:url('/fonts/trueno_sbd.otf') format('truetype');
    font-display:swap
}
@font-face{
    font-family:Poppins-regular !important;
    src:url('/fonts/trueno_lt.otf') format('truetype');
    font-display:swap
}
@font-face{
    font-family:Poppins-light;
    src:url('/fonts/trueno_lt.otf') format('truetype');
    font-display:swap
}
:root{
    --bg-dark:#2B2A33;
    --input-bg:#444;
    --accent:#CF05FC
}
body{
    font-size:clamp(14px, 1.8vw, 18px)
}
h1{
    font-size:clamp(22px, 4vw, 40px)
}
h2{
    font-size:clamp(20px, 3vw, 32px)
}
h3{
    font-size:clamp(18px, 2.5vw, 26px)
}
p{
    line-height:1.6
}
@keyframes pulse-loading{
    0%,100%{
        transform:scale(1);
        opacity:1
    }
    50%{
        transform:scale(.75);
        opacity:.6
    }
}
/* Style for the Global Language Toggle Button */
.global-btn {
  background: transparent;
  border: none;
  color: #ffffff !important; /* Forces the icon stroke to white */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  outline: none;
}

/* Hover & Focus effects */
.global-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffca2c !important; /* Highlights icon on hover */
}

.global-btn:focus-visible {
  outline: 2px solid #ffca2c;
}

/* Ensure SVG icon inherits correct stroke and size */
.global-btn svg {
  stroke: currentColor;
  width: 22px;
  height: 22px;
  display: block;
}
.playBtn.is-loading svg{
    animation:1.2s ease-in-out infinite pulse-loading
}
.playBtn{
    transition:transform .2s
}
#pagination button,.genre-card{
    font-size:14px;
    transition:.2s;
    cursor:pointer
}
.Add_Radio_Podcast,
.premium_user_dp,
.ui-loading 
.Add_Radio_Podcast,
.ui-loading 
.premium_user_dp,
.ui-loading 
.upgrade_to_premium,
.upgrade_to_premium{
    display:none!important
}
#top-header{
    width:100%;
    overflow:hidden
}
.header-row{
    height:100%;
    display:flex;
    align-items:center;
    gap:.5rem;
    width:100%
}
.logo img{
    margin-top:2px;
    width:40px;
    height:40px;
    border-radius:8px
}
.btn-add-station,.logo{
    flex-shrink:0
}
.btn-add{
    background:var(--accent);
    border:none;
    border-radius:9999px;
    padding:.45rem 1.1rem
}
.desktop-nav a{
    color: #fff;
    margin: 0 1.8rem;
    font-size: 14px;
    font-weight: 900;
}
.offcanvas{
    background:var(--bg-dark);
    color:#fff;
    z-index:10050!important
}
.search-wrapper,input{
    background:var(--input-bg);
    color:#fff
}
.offcanvas a{
    display:block;
    padding:.9rem 0;
    color:#fff;
    width:100%;
    font-size:14px
}
.offcanvas-backdrop{
    z-index:10040!important
}
.search-wrapper form{
    position:relative
}
.search-wrapper{
    flex:1;
    min-width:0;
    height:38px;
    border-radius:9999px;
    border:none;
    margin-left:6px
}
.search-wrapper input:focus{
    border:none;
    outline:0!important;
    box-shadow:none!important
}
.scroll-controls{
    display:flex;
    gap:6px;
    margin-left:auto
}
.scroll-btn{
    border:none;
    background:rgba(255,255,255,.15);
    color:#fff;
    width:28px;
    height:28px;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center
}
#genreGrid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:12px
}
.genre-card{
    background:#111;
    color:#fff;
    padding:10px;
    border-radius:10px;
    text-align:center;
    border:1px solid #ccc
}
.genre-card:hover{
    background:#525259
}
#pagination{
    margin-top:20px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center
}
#pagination button{
    min-width:36px;
    height:36px;
    border-radius:8px;
    border:none;
    color:#fff;
    background:rgba(255,255,255,.12);
    opacity:1
}
#pagination .active{
    background:#525259;
    color:#fff
}
input{
    width:100%;
    height:40px;
    border-radius:9999px;
    border:none
}
.search-icon-btn{
    position:absolute;
    right:.9rem;
    top:50%;
    transform:translateY(-50%);
    background:0 0;
    border:none;
    font-size:1.3rem;
    color:#bbb;
    cursor:pointer;
    padding:0
}
.btn-add-station{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-color:#0d6efd;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-family:Poppins-medium !important;
    font-size:10px;
    padding:4px 12px;
    min-height:28px;
    width:auto;
    white-space:nowrap
}
@media (min-width:300px){
    .header-row{
        gap:4px
    }
    .logo img{
        margin-top:2px;
        width:40px;
        height:40px
    }
    .btn-add-station{
        font-size:9px;
        padding:4px 8px
    }
    .search-wrapper input{
        font-size:11px
    }
    #top-header{
        height:44px
    }
}
@media (min-width:320px){
    .header-row{
        gap:4px
    }
    .logo img{
        margin-top:2px;
        width:40px;
        height:40px
    }
    .btn-add-station{
        font-size:9px;
        padding:4px 8px
    }
    .search-wrapper input{
        font-size:11px
    }
    #top-header{
        height:44px
    }
}
@media (min-width:380px){
    .header-row{
        gap:4px
    }
    .logo img{
        margin-top:2px;
        width:40px;
        height:40px
    }
    .btn-add-station{
        font-size:9px;
        padding:4px 8px
    }
    .search-wrapper input{
        font-size:11px
    }
    #top-header{
        height:44px
    }
}
@media (max-width:480px){
    .header-row{
        gap:4px
    }
    .logo img{
        margin-top:2px;
        width:35px;
        height:35px
    }
    .btn-add-station{
        font-size:9px;
        padding:4px 8px
    }
    .search-wrapper input{
        font-size:11px
    }
    #top-header{
        height:44px
    }
}
.btn-add-station:hover{
    background-color:#0b5ed7;
    color:#fff;
    transform:translateY(-1px)
}
@media (min-width:768px){
    .btn-add-station{
        font-size:10px;
        height:28px;
        padding:4px 12px
    }
    #top-header{
        height:94px
    }
}
@media (min-width:992px){
    .btn-add-station{
        font-size:10px;
        height:28px;
        padding:4px 12px
    }
    #top-header{
        height:94px
    }
}
@media (min-width:1200px){
    #top-header{
        height:90px
    }
}