/* General body styling - dark theme, fixed background */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #121212;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px; /* spacing from top */
  min-height: 100vh;
  overflow: hidden; /* prevent scrolling vertically and horizontally */
  position: fixed; /* lock background and content in place */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Prevent horizontal scroll */
html {
  overflow-x: hidden;
}

/* Header */
h1 {
  margin-bottom: 15px;
  font-size: 28px;
}

h3 {
  margin: 10px 0;
  font-size: 20px;
  text-align: center;
}

/* Search bar */
#search {
  width: 100%;
  max-width: 500px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  margin: 12px 0;
  font-size: 16px;
  background: #1e1e1e;
  color: #fff;
}

/* Playlist */
#playlist {
  width: 100%;
  max-width: 500px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: calc(9 * 49px); /* Show exactly 9 surahs */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

#playlist::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

#playlist li {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.03); /* very subtle divider */
  transition: background 0.2s;
}

#playlist li:hover, #playlist li.active {
  background: #1e1e1e;
}

/* Back to Home button */
#back-home {
  display: none;
  margin: 12px 0;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: #1e1e1e;
  color: #fff;
  cursor: pointer;
}

#back-home.show {
  display: block;
}

/* Progress bar */
#progress {
  width: 100%;
  max-width: 500px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  border-radius: 3px;
  margin-bottom: 4px; /* small margin above time */
  display: none; /* hidden initially */
}

#time-display {
  font-size: 14px;
  color: #bbb;
  text-align: center;
  margin-bottom: 15px; /* spacing to search bar */
  letter-spacing: 0.5px;
  display: none; /* hidden initially */
}

#progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 2px solid #333;
}

#progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333;
  cursor: pointer;
}

#progress::-ms-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333;
  cursor: pointer;
}

/* Mobile adjustments */
@media (max-width: 450px) {
  body {
    padding-top: 60px; /* extra space on top */
  }

  #playlist {
    max-height: calc(9 * 56px); /* Show exactly 9 surahs on mobile */
  }

  #search, #progress, #playlist {
    width: 85%; /* thinner than desktop, keep white space */
    margin: 0 auto 10px auto;
  }

  #playlist li, #search {
    font-size: 18px;
    padding: 14px 16px;
  }
}