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

#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;
}

#searchWrapper{position:absolute;right:20px;top:15px;width:360px;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%}

#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);
}

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

#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}

#tabs{
  position:sticky;
  top:0;
  z-index:10;

  display:flex;
  justify-content:center;
  gap:10px;

  margin-bottom:12px;
  padding:10px 14px;

  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);
}
.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}

#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}

@media (max-width:900px){

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

  #searchWrapper{
    left:12px;
    right:12px;
    width:auto;
    top:58px;
  }

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

  #radioList{
    position:fixed;
    left:max(6px,env(safe-area-inset-left));
    right:max(6px,env(safe-area-inset-right));
    width:auto;
    max-width:100%;
    margin:0 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);
  }

#tabs{
  position:sticky;
  top:0;
  z-index:10;

  display:flex;
  justify-content:center;
  gap:10px;

  padding:10px 14px;
  margin-bottom:12px;

  border-radius:18px;

  background:linear-gradient(
    180deg,
    rgba(15,23,42,.92),
    rgba(15,23,42,.65)
  );

  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}


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

  #radioList::-webkit-scrollbar{width:7px}
  #radioList::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#22c55e,#15803d);
    border-radius:20px;
  }

  #map{height:100dvh}
}

/* 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
}
/* Desktop only contact button */
#contactBtn{
 position:fixed;
 left:20px;
 bottom:70px;
 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;
}