img {
  filter: sepia(0.5) contrast(1.1) brightness(1.2) saturate(0.9);
}

html, body {
  height: 100vh; 
  width: 100vw;
  margin: 0; 
  padding: 0;
 // font-family:'Bitcount Prop Single', 'Special Elite', 'Georgia', serif;
font-family: "Asimovian", sans-serif;
    font-weight: 400;
    font-style: normal;
  font-weight: : bolder;
  overflow: hidden;
}

body {
  display: flex; flex-flow: column;
  justify-content: center; 
  align-items: start;
  height: 100vh; 
  background: #222;
}

.radio-body { 
  background: #0f0f0fbb;
  width: 100vw; 
  height: 100vh; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 0; margin: 0 auto;
  gap: 0px;
  border-radius: 10px;
  box-shadow: 0 0 10px #1d140a, 0 0 0 8px #222 inset;
  min-width: 0; min-height: 0;
  position: relative;
}

.radio-top { 
  padding: 2px 20px; 
  background: #111;
  width: 98vw; 
  margin-bottom: 10px; 
  border-radius: 10px 10px 0 0;
  display: flex; 
  align-items: center; 
  justify-content: space-between;
}

.radio-speaker {
  width: 48px; 
  height: 48px;
  background: repeating-radial-gradient(circle, #3b2a18 2px, #bfa36a 4px, #7c5c36 8px);
  background-image: url('../media/rvblogol.png'); 
  background-size: 100% 100%;
  border-radius: 50%;
}

.radio-brand {
  font-size: 1rem; 
  text-transform: uppercase;
  color: #ddd;
  letter-spacing: 2.2px;
  text-shadow: 1px 1px 1px #f00, -1px -1px 1px #14ff00;
  font-family: 'Special Elite', serif;
  cursor: pointer;
}

.radio-switch {
  width: 38px; 
  height: 22px;
  background: #d60000;
  border: 2px solid #7c5c36;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 2px 8px #1d140a;
  cursor: pointer;
  transition: background 0.3s;
}

.radio-switch::before {
  content: '';
  position: absolute;
  left: 4px; 
  top: 4px;
  width: 12px; 
  height: 12px;
  background: linear-gradient(145deg, #e9c88a 60%, #7c5c36 100%);
  border-radius: 50%;
  box-shadow: 0 1px 4px #bfa36a;
  transition: left 0.3s cubic-bezier(.7,1.7,.7,1), background 0.3s;
}

.radio-switch[aria-pressed="true"] {
  background: #34c85c;
}

.radio-switch[aria-pressed="true"]::before {
  left: 18px;
  background: linear-gradient(145deg, #7c5c36 60%, #e9c88a 100%);
}

.radio-display { 
  background: #050505cc; 
  border-radius: 3px;
  box-shadow: 0 0 20px #00ff9f;
  width: 94%; 
  max-width: 320px;
  margin: 0 auto;
  padding: 10px 0 4px 0;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 10px;
  margin-top: 90px;
}

.song-cover { 
  position: relative; 
  top: 0px; 
  left: 0px; 
  z-index: 2; 
  width: 99%; 
  height: 100%; min-height: 100px; /* اصلاح از 680% */
  border-radius: 1px;
  border: 1px solid #ffc2c2;
  box-shadow: 0 0 0 1px #bfa36a, 0 0 0 0px #ffe7a1 inset;
  margin: 6px auto 6px auto;
  background: #050505;
  overflow: hidden;
}

.song-cover img { 
  position: absolute;  
  width: 30%; 
  height: 100%;
  object-fit: cover; 
  border-left: 3px solid red; 
 /* box-shadow: -100px -90px 10px pink; */
}

.song-info { 
  width: 95%;
  text-align: left;
  
}

.song-title { 
  color: silver;
  font-size: 1.35rem;
  font-weight: bold;
  margin: 2px;
  
}

.song-artist { 
  color: #00ffcf;
  font-size: 1.25rem;
  margin-bottom: 1px;
  opacity: 0.8;
}

.song-genre { 
  color: rgb(185, 81, 204);
  font-size: 0.99rem;
  font-style: italic;
}

/* ======= حذف بخش‌های station-seeker-bar و station-area ======= */

.radio-controls { width: 100%;
  display: flex;  text-align: right;
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  gap: 12px;
}

.volume-area {
  display: flex; 
  flex-direction: column; 
  align-items: center;
}

.volume-knob {
  -webkit-appearance: none; appearance: none; 
  border: 3px solid #4d3a1a;
  box-shadow: 0 0 7px #fff, 0 2px 3px #1d140a;
  cursor: pointer;
  margin: 0;
  width: 25%;
  height: 100%;
  background: green;
  border-radius: 8px;
  transition: box-shadow 0.3s;
  user-select: none;
  touch-action: none;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.volume-knob::-webkit-slider-thumb, 
.volume-knob::-moz-range-thumb {
  display: none;
}

.station-bar { opacity: 0.01;
  width: 100vw; max-width: 328px;
  height: 100px;
  appearance: none;
  background: repeating-linear-gradient( to left, #cfddff 1px 2px, #793c3c 2px 10px ), #000;
  border-radius: 5px;
  border: 1px solid #7c5c36;
  box-shadow: 0 2px 4px #1d140a inset;
  pointer-events: none;
  position: absolute; top: 300px; z-index: 2;
}

.station-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 60% 40%, #e9c88a 60%, #7c5c36 100%);
  border: 2px solid #4d3a1a;
  box-shadow: 0 0 6px #bfa36a, 0 2px 3px #1d140a;
}

.station-bar::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 60% 40%, #e9c88a 60%, #7c5c36 100%);
  border: 2px solid #4d3a1a;
  box-shadow: 0 0 6px #bfa36a, 0 2px 3px #1d140a;
}

.radio-footer {
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
  margin-top: 4px;
  gap: 4px;
}

.footer-info {
  font-size: 0.85rem;
  color: #4d3a1a;
  font-family: monospace;
}

.radio-meta {
    direction: rtl;
  display: flex; 
  flex-direction: column; 
  align-items: center;
  font-size: 1rem;
  color:  #00f2ff;
  opacity: 0.7;
  gap: 1px;
  text-align: center;
}

/* Modal styles */
.modal { font-size: 20px;
  position: fixed !important;
  z-index: 10000 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0,0,0,0.6) !important;
  display: none; /* پیش‌فرض مخفی */
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
}

.modal.show {
  display: flex !important;
}

.modal-content {
    transition: 1s;
  background: #151515 !important;
  border-radius: 18px !important;
  padding: 20px 20px !important;
  max-width: 90vw !important; width: 350px;
  max-height: 90vh !important; height: 350px;
  box-shadow: 0 2px 24px #4bc0c6 inset !important;
  color: #4d3a1a !important;
  position: relative !important;
  overflow-y: auto !important;
}

.modal-close {
  position: absolute !important;
  top: 10px !important;
  right: 15px !important;
  font-size: 28px !important;
  font-weight: bold !important;
  color: #7c5c36 !important;
  cursor: pointer !important;
}

.modal-close:hover {
  color: #bfa36a !important;
}

#remaining-time {
  color: #a8c720;
}

#music-title2 {
  color: #939393; 
  font-size: 13px;
}


.material-icons{
    font-size: medium;
}