html,body{
 margin:0;
 height:100%;
 overflow:hidden;
 font-family:system-ui;
 background:#020617;
 color:#fff;
}

body:not(.panelsClosed) .panelToggleBtn{
 top:calc(70px + 8px);
}

#map{height:100vh}

/* ===== PANEL SLIDE ANIMATION ===== */

#searchWrapper,
#radioList{
 transition:transform .35s ease, opacity .35s ease;
}

/* hidden state */
.panelsClosed #searchWrapper,
.panelsClosed #radioList{
 transform:translateX(120%);
 opacity:0;
 pointer-events:none;
}

/* Prideti appa */
#installPrompt{
 position:fixed;
 right:16px;
 bottom:140px;
 background:rgba(15,23,42,.9);
 backdrop-filter:blur(18px);
 border-radius:18px;
 padding:14px 16px;
 font-size:14px;
 box-shadow:0 10px 30px rgba(0,0,0,.45);
 max-width:260px;
 z-index:4000;
 display:none;
}
#installPrompt .installActions{margin-top:10px;display:flex;gap:8px}
#installPrompt button{
 background:linear-gradient(135deg,#22c55e,#16a34a);
 border:none;
 color:white;
 padding:6px 12px;
 border-radius:14px;
 cursor:pointer;
 font-weight:600;
}
#installPrompt .cancelBtn{background:rgba(255,255,255,.15)}
#installPrompt .closeX{
 position:absolute;top:6px;right:10px;
 cursor:pointer;font-size:16px;opacity:.7
}


/* ===== TOGGLE BUTTON ===== */

#panelToggleBtn{
 position:fixed;
 right:20px;
 top:15px;
 z-index:3000;
 cursor:pointer;
 font-weight:600;
 transition:.25s;
}

#panelToggleBtn:hover{
 transform:scale(1.08);
}

/* PANEL CLOSE/OPEN BUTTON */

.panelCloseBtn{
 position:absolute;
 top:8px;
 right:12px;
 width:34px;
 height:34px;

 display:flex;
 align-items:center;
 justify-content:center;

 border-radius:50%;
 cursor:pointer;
 font-size:18px;
 font-weight:700;

 background:rgba(15,23,42,.75);
 backdrop-filter:blur(12px);

 color:white;
 transition:.25s;

 box-shadow:0 4px 16px rgba(0,0,0,.35);
}

.panelToggleBtn{
 position:absolute;
 right:20px;
 top:80px;
 z-index:2500;

 width:42px;
 height:42px;

 display:flex;
 align-items:center;
 justify-content:center;

 border-radius:50%;
 cursor:pointer;

 background:rgba(15,23,42,.75);
 backdrop-filter:blur(12px);

 box-shadow:0 6px 20px rgba(0,0,0,.45);

 font-size:18px;
 color:#fff;

 transition:.25s;
}

.panelToggleBtn:hover{
 transform:scale(1.08);
 background:rgba(34,197,94,.8);
}

/* Hover desktop */
.panelCloseBtn:hover{
 background:#22c55e;
 transform:rotate(90deg) scale(1.08);
}

/* Mobile slightly bigger touch target */
@media(max-width:900px){
 .panelCloseBtn{
  width:40px;
  height:40px;
  font-size:20px;
 }
}



/* ===== GREETING ===== */

#greeting{
 position:absolute;
 left:20px;
 top:15px;
 padding:10px 26px;
 border-radius:40px;
 background:rgba(15,23,42,.75);
 backdrop-filter:blur(12px);
 font-weight:600;
 z-index:2000;
}


/* ===== SEARCH ===== */

#searchWrapper{
 position:absolute;
 right:68px;
 top:15px;
 width:310px;
 z-index:2000;
}

.pill{
 padding:10px 18px;
 border-radius:40px;
 background:rgba(15,23,42,.75);
 backdrop-filter:blur(12px);
 box-shadow:0 4px 20px rgba(0,0,0,.4);
}

#search{
 border:none;
 background:transparent;
 color:#fff;
 outline:none;
 width:100%;
}


/* ===== RADIO LIST ===== */

#radioList{
 position:absolute;
 right:20px;
 top:70px;
 width:360px;
 max-height:72vh;
 overflow:auto;
 padding:18px;
 border-radius:24px;
 background:rgba(15,23,42,.78);
 backdrop-filter:blur(22px);
 z-index:2000;

 /* REMOVE TOP GAP FROM CONTAINER */
 padding-top:18px;
}

/* scrollbar */
#radioList::-webkit-scrollbar{width:10px}
#radioList::-webkit-scrollbar-track{background:transparent}
#radioList::-webkit-scrollbar-thumb{
 background:linear-gradient(180deg,#22c55e,#15803d);
 border-radius:20px;
 border:2px solid transparent;
 background-clip:content-box;
}
#radioList::-webkit-scrollbar-thumb:hover{
 background:linear-gradient(180deg,#4ade80,#16a34a);
}


/* ===== TABS ===== */

#tabs{
 position:sticky;
 top:0;
 z-index:10;
 display:flex;
 justify-content:center;
 gap:10px;
 margin-bottom:12px;

 /* MOVE BUTTON CLEARANCE HERE */
 padding:clamp(10px,6vh,10px) 14px 10px;

 background:linear-gradient(
  90deg,
  rgba(15,23,42,0) 0%,
  rgba(15,23,42,.85) 20%,
  rgba(15,23,42,.85) 80%,
  rgba(15,23,42,0) 100%
 );

 backdrop-filter:blur(18px);
 border-radius:18px;
}


.tab{
 cursor:pointer;
 padding:6px 16px;
 border-radius:18px;
 background:rgba(255,255,255,.06);
 transition:.25s;
}

.tab:hover{
 background:rgba(255,255,255,.12);
}

.tab.active{
 background:#22c55e;
 transform:scale(1.05);
}


/* ===== STATION CARDS ===== */

.stationCard{
 padding:16px;
 margin-bottom:12px;
 border-radius:18px;
 background:rgba(255,255,255,.04);
 border:1px solid rgba(255,255,255,.08);
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 gap:8px;
}

.playBtn{
 margin-top:6px;
 padding:7px 16px;
 border:none;
 border-radius:18px;
 background:linear-gradient(135deg,#22c55e,#16a34a);
 color:white;
 font-weight:600;
 cursor:pointer;
}

.heart{
 font-size:20px;
 cursor:pointer;
}


/* ===== PLAYER ===== */

#playerBar{
 position:fixed;
 bottom:34px;
 left:50%;
 transform:translateX(-50%);
 padding:14px 30px;
 border-radius:50px;
 background:rgba(15,23,42,.92);
 backdrop-filter:blur(20px);
 display:flex;
 gap:16px;
 align-items:center;
 z-index:2000;
}

#playToggle{
 background:linear-gradient(135deg,#22c55e,#15803d);
 border:none;
 padding:10px 18px;
 border-radius:25px;
 color:white;
 font-weight:600;
}


/* ===== INFO PILLS ===== */

#topBar{
 position:fixed;
 right:20px;
 bottom:20px;
 z-index:2000;
}

#onlineVisitors{
 position:fixed;
 left:20px;
 bottom:70px;
 z-index:2000;
}
#onlineListeners{
 position:fixed;
 left:20px;
 bottom:20px;
 z-index:2000;
}


/* ===== MOBILE ===== */

@media (max-width:900px){

 body.panelsClosed #searchWrapper,
 body.panelsClosed #radioList{
  transform:translateX(120%);
  opacity:0;
  pointer-events:none;
 }

 #panelToggleBtn{
  right:12px;
  top:58px;
 }

 #greeting{
  top:14px;
  left:12px;
  right:12px;
  transform:none;
  text-align:center;
  font-size:14px;
  padding:8px 12px;
 }

 #searchWrapper{
  left:12px;
  right:65px;  
  width:auto;
  top:58px;
  z-index:2000;
 }

 #topBar{
  bottom:78px;
  right:12px;
  font-size:13px;
 }

 #onlineVisitors{
  bottom:120px;
  left:12px;
  font-size:13px;
 }
 
  #onlineListeners{
  bottom:78px;
  left:12px;
  font-size:13px;
 }

 #radioList{
  position:fixed;
  transform: translateY(-20px);
  left:6px;
  right:6px;
  width:auto;
  top:clamp(110px,18vh,140px);
  bottom:clamp(130px,18vh,180px);
  border-radius:24px;
  padding:12px;
  overflow:auto;
  background:rgba(15,23,42,.78);
  backdrop-filter:blur(24px);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  padding-top:clamp(10px,6vh,10px);
 }

 #playerBar{
  width:94%;
  bottom:16px;
  padding:10px 14px;
  font-size:14px;
 }

 #radioList::-webkit-scrollbar{width:7px}
 
  .panelCloseBtn{
  width:35px;
  height:35px;
  font-size:20px;
 }
}


/* ===== INSTALL PROMPT ===== */

#installPrompt{
 position:fixed;
 right:16px;
 bottom:140px;
 background:rgba(15,23,42,.9);
 backdrop-filter:blur(18px);
 border-radius:18px;
 padding:14px 16px;
 font-size:14px;
 box-shadow:0 10px 30px rgba(0,0,0,.45);
 max-width:260px;
 z-index:4000;
 display:none;
}


/* ===== CONTACT ===== */

#contactBtn{
 position:fixed;
 left:20px;
 bottom:120px;
 cursor:pointer;
 display:block;
 z-index:2000;
}

@media(max-width:900px){
 #contactBtn{display:none;}
}

#contactModal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.55);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:5000;
}

/* CONTACT FORM UNIFIED FIELD STYLE */

.contactCard input,
.contactCard textarea,
.contactCard select,
.contactCard button{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  margin:10px 0;
  border-radius:16px;
  border:none;
  font-family:inherit;
  font-size:14px;
}

/* Glass input style */
.contactCard input,
.contactCard textarea,
.contactCard select{
  background:rgba(255,255,255,.06);
  color:white;
  backdrop-filter:blur(12px);
}

/* Focus polish */
.contactCard input:focus,
.contactCard textarea:focus,
.contactCard select:focus{
  outline:none;
  background:rgba(255,255,255,.12);
}

/* TEXTAREA */
.contactCard textarea{
  min-height:90px;
  resize:vertical;
}

/* BUTTON */
.contactCard button{
  background:linear-gradient(135deg,#22c55e,#15803d);
  color:white;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

.contactCard button:hover{
  transform:translateY(-1px);
}
.contactCard select{
  color:white;
  background-color:#0f172a;
}

/* Dropdown options */
.contactCard select option{
  background:#0f172a;
  color:white;
}
.contactCard select option:hover{
  background:#22c55e;
  color:white;
}



/* ===== SEO FOOTER ===== */

#seoFooter{
 position:fixed;
 bottom:4px;
 left:50%;
 transform:translateX(-50%);
 z-index:1500;
 font-size:10px;
 opacity:.55;
}

@media (max-width:900px){
 #seoFooter{display:none;}
}

.footerLinks{
 background:rgba(15,23,42,.55);
 backdrop-filter:blur(8px);
 padding:4px 10px;
 border-radius:16px;
 display:flex;
 gap:10px;
 white-space:nowrap;
}

.footerLinks a{
 color:#94a3b8;
 text-decoration:none;
 transition:.2s;
}

.footerLinks a:hover{
 color:#22c55e;
}