/* --- General Styles --- */

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.01em;
  background: #0e1116;
  color: #fff;
}

a, button, input, select, textarea {
  font-family: inherit;
}

/* --- Card Enhancements --- */
.group {
  touch-action: manipulation;
  background: linear-gradient(135deg, #23292e 85%, #223e27 100%);
  box-shadow: 0 4px 24px 0 #18261b55, 0 1.5px 2.5px #21cb5d13;
  border-radius: 1rem !important;
  border: 1.5px solid #202925;
  transition: 
    transform 0.14s cubic-bezier(.2,.6,.5,1), 
    box-shadow 0.17s, 
    background 0.15s;
}
.group:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px #17c85c44;
  background: linear-gradient(135deg, #23292e 65%, #225e37 100%);
}
.group:hover, .group:focus-visible {
  box-shadow: 0 6px 32px #18994473, 0 1.5px 2.5px #21cb5d26;
  border-color: #21cb5d88;
}

/* --- Logo Fallback (no image) --- */
.logo-fallback {
  background: linear-gradient(135deg, #27ca5c99 0%, #232b36 100%);
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.32rem;
  overflow: hidden;
  user-select: none;
  border-radius: 0.6rem;
}

/* --- Player Bar Enhancements --- */
footer {
  box-shadow: 0 -2px 24px 0 #15e15533, 0 -1.5px 1.5px #1a232b55;
  backdrop-filter: blur(10px);
  background: linear-gradient(90deg, #121920f0 70%, #0d2115f8 100%);
  border-top: 1.5px solid #12311a;
}
@media (max-width: 767px) {
  footer {
    left: 0 !important;
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    border-top: 1.5px solid #12592a;
  }
}

/* --- Pulse Animation --- */
.pulse-dot {
  animation: pulsedot 1.2s infinite;
}
@keyframes pulsedot {
  0% { box-shadow: 0 0 0 0 #22c55e80; }
  70% { box-shadow: 0 0 0 8px #22c55e00; }
  100% { box-shadow: 0 0 0 0 #22c55e00; }
}

/* --- Heart/Favorite Button --- */
.heart {
  transition: color 0.15s, transform 0.13s;
  cursor: pointer;
  stroke-width: 2;
  stroke: #e11d48;
  background: transparent;
}
.heart.fav {
  fill: #e11d48;
  color: #e11d48;
  transform: scale(1.09);
}

/* --- Input/Search Enhancements --- */
input[type="search"] {
  background: linear-gradient(90deg, #181e22 60%, #15241a 100%);
  border-radius: 1.7rem;
  box-shadow: 0 1.5px 8px #21cb5d11;
  border: 1.5px solid #1d3731;
  color: #f7fff8;
  font-size: 1.05rem;
  transition: box-shadow 0.15s, border 0.15s;
}
input[type="search"]:focus {
  border: 1.5px solid #22c55e;
  box-shadow: 0 4px 16px #21cb5d2a;
  background: linear-gradient(90deg, #202a22 50%, #213923 100%);
}
input[type="search"]::-webkit-search-cancel-button {
  filter: invert(1);
}
input[type="range"] {
  accent-color: #22c55e;
}

/* --- Bottom Navigation Bar (Mobile) --- */
nav.fixed {
  box-shadow: 0 -1px 16px #21cb5d1b;
  background: linear-gradient(90deg, #171e1c 90%, #15341a 100%);
  border-top: 1.5px solid #12311a;
  z-index: 60;
}
@media (max-width: 767px) {
  nav.fixed {
    bottom: 0 !important;
    z-index: 70;
    height: 56px; /* Match your nav bar height */
    box-shadow: 0 -1px 12px #21cb5d2b;
  border-top: 1px solid #17d95e33;
  }
  footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 56px !important; /* Sits above nav bar */
    z-index: 80;
    height: 80px; /* Match your player bar height */
    max-width: 100vw;
    min-width: 0;
    box-shadow: 0 -2px 14px #0f3411b5;
  border-top: 1.5px solid #12311a;
  }
  /* Make sure list content doesn't hide under fixed bars */
  section {
    padding-bottom: 140px !important; /* 80px + 56px = 136px, a little extra just in case */
    margin-left: 10px !important;
    margin-right: 10px !important;
  
  }
}

@media (max-width:1440px){
  section {
    padding-bottom: 140px !important; /* 80px + 56px = 136px, a little extra just in case */
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


nav.fixed button {
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
  border-radius: 1.2rem;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 500;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  padding-top: 3px;
  padding-bottom: 2px;
}
nav.fixed button:active {
  background: #183b1b;
  color: #22c55e !important;
  box-shadow: 0 2px 8px #21cb5d36;
}
nav.fixed button svg {
  transition: stroke 0.17s, fill 0.18s;
  opacity: 0.91;
}
nav.fixed button.text-green-400 svg,
nav.fixed button:active svg {
  stroke: #22c55e;
}

/* --- Nav active highlight for desktop --- */
.active-nav {
  background: #22c55e !important;
  color: white !important;
}

/* --- Scrollbar Modern --- */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #21cb5d33;
  border-radius: 9px;
}
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #18994444 transparent;
}

/* --- Remove ugly default outlines --- */
button:focus, .group:focus, input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #22c55e60;
}

/* --- Responsive Station Cards --- */
@media (max-width: 500px) {
  .group {
    min-height: 88px !important;
    padding: 9px 4px !important;
  }
  .logo-fallback {
    font-size: 1.09rem;
  }
}

/* --- Make all cards full width on mobile --- */
@media (max-width: 640px) {
  #stationsPanel > div, #favoritesPanel > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }
}

/* --- Polish the volume slider --- */
input[type="range"] {
  background: #193720;
  border-radius: 4px;
  height: 4px;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}
input[type="range"]:focus {
  box-shadow: 0 0 0 2px #22c55e60;
}

/* --- Misc touch-ups --- */
::-webkit-input-placeholder { color: #b3dbc3; opacity: 1; }
::-moz-placeholder { color: #b3dbc3; opacity: 1; }
:-ms-input-placeholder { color: #b3dbc3; opacity: 1; }
::placeholder { color: #b3dbc3; opacity: 1; }