/* =======================================================================
   DANO DREVO RADIO
   ======================================================================= */

.radio-panel {
  width: 100%;

  margin: 0;

  padding: 12px;

  background:
    linear-gradient(
      180deg,
      rgba(4, 19, 9, .97),
      rgba(1, 9, 4, .97)
    );

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    0 12px 40px rgba(0, 0, 0, .45),
    0 0 22px rgba(0, 255, 102, .12),
    inset 0 0 25px rgba(0, 255, 102, .025);
}


.radio-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 9px;
}


.radio-title {
  display: flex;

  align-items: center;

  gap: 8px;

  color:
    var(--cyan);

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    1.5px;
}


.radio-dot {
  width: 8px;
  height: 8px;

  flex:
    0 0 8px;

  border-radius:
    50%;

  background:
    var(--cyan);

  box-shadow:
    0 0 8px rgba(0, 255, 102, .75);
}


.radio-status {
  min-width: 0;

  overflow: hidden;

  color:
    var(--muted);

  font-size:
    10px;

  text-align:
    right;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.radio-player-shell {
  width: 100%;

  min-height: 200px;

  overflow: hidden;

  background:
    #000;

  border:
    1px solid var(--soft-border);

  border-radius:
    8px;

  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, .75);
}


#dano-radio-player {
  width: 100%;

  min-height: 200px;
}


#dano-radio-player iframe {
  width: 100% !important;

  min-height: 200px;

  display: block;

  border: 0;
}


.radio-controls {
  display: grid;

  grid-template-columns:
    auto auto auto minmax(0, 1fr);

  align-items: center;

  gap: 7px;

  margin-top: 9px;
}


.radio-control {
  min-width: 42px;

  padding:
    7px 9px;

  color:
    var(--lime);

  font-size:
    11px;
}


.radio-volume {
  display: grid;

  grid-template-columns:
    auto minmax(70px, 1fr) 34px;

  align-items: center;

  gap: 7px;

  min-width: 0;

  color:
    var(--muted);

  font-size:
    10px;
}


.radio-volume input {
  width: 100%;

  min-width: 0;

  padding: 0;

  accent-color:
    var(--cyan);

  cursor:
    pointer;
}


#radio-volume-value {
  color:
    var(--lime);

  text-align:
    right;
}


.radio-footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 8px;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    .7px;
}


.radio-footer strong {
  color:
    var(--cyan);

  font-weight:
    500;
}


/* =======================================================================
   RESPONSIVE
   ======================================================================= */

@media (max-width: 600px) {

  .radio-panel {
    width: 100%;

    padding:
      10px;
  }


  .radio-controls {
    grid-template-columns:
      auto auto auto;
  }


  .radio-volume {
    grid-column:
      1 / -1;

    margin-top:
      3px;
  }

}

/* =======================================================================
   RADIO STATION SWITCH
   ======================================================================= */

.radio-station-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 10px;

  padding:
    8px 10px;

  background:
    rgba(0, 255, 102, .025);

  border:
    1px solid var(--soft-border);

  border-radius:
    8px;
}


.radio-station-label {
  margin-right: 3px;

  color:
    var(--muted);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .09em;
}


.radio-station-option {
  appearance: none;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding:
    5px 8px;

  color:
    var(--muted);

  background:
    transparent;

  border:
    1px solid transparent;

  border-radius:
    7px;

  font-size:
    10px;

  font-weight:
    700;

  opacity:
    .60;

  cursor:
    pointer;
}


.radio-station-option:hover {
  color:
    var(--lime);

  opacity:
    1;

  border-color:
    var(--soft-border);
}


.radio-station-option.active {
  color:
    var(--lime);

  opacity:
    1;

  border-color:
    var(--border);

  background:
    rgba(0, 255, 102, .055);

  box-shadow:
    0 0 10px rgba(0, 255, 102, .08);
}


.radio-station-dot {
  line-height: 1;
}


html[data-theme="cyberpunk"]
.radio-station-option.active {
  color:
    #f4f000;

  border-color:
    #ff2bd6;

  background:
    rgba(255, 43, 214, .07);

  box-shadow:
    0 0 10px rgba(255, 43, 214, .12);
}


@media (max-width: 600px) {

  .radio-station-switch {
    gap: 6px;

    padding:
      7px 8px;
  }


  .radio-station-option {
    font-size:
      9px;

    padding:
      5px 6px;
  }

}