/*
  Plugin: "Что сейчас играет?" (Now Playing)
  Minimal styles, designed to match Radio template.
*/

.page__np-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--bdc);
  background:transparent;
  color:var(--tt);
  cursor:pointer;
  font-size:12px;
  line-height:1;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.page__np-btn:hover{
  border-color:var(--accent-primary);
  color:var(--accent-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

/* Делаем .page__ctrl многострочным, чтобы вывести кнопку "второй строкой" */
.page__ctrl.nowplaying-enabled{
  flex-wrap:wrap;
}

/* Хост для кнопки: под контролами (в т.ч. под громкостью), но выравнивание СЛЕВА */
.page__np-host{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  margin-top:8px;
}

@media (max-width: 520px){
  .page__np-btn{
    width:100%;
    justify-content:center;
    padding:10px 12px;
    line-height:1.2;
    white-space:normal;
    text-align:center;
  }
  .page__np-btn-text{
    display:inline;
    min-width:0;
    overflow-wrap:anywhere;
  }
  .page__np-host{
    margin-top:10px;
  }
  .nowplaying-box__head,
  .nowplaying-box__body{
    padding-left:10px;
    padding-right:10px;
  }
}

.nowplaying-box{
  margin-top:0;
  border:1px solid var(--bdc);
  border-radius:14px;
  overflow:hidden;
  background: rgba(0,0,0,0.02);
  background: color-mix(in srgb, var(--accent-primary) 4%, transparent);
}

.nowplaying-box__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid color-mix(in srgb, var(--bdc) 70%, transparent);
}

.nowplaying-box__title{
  font-weight:700;
  font-size:13px;
}

.nowplaying-box__close{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--bdc);
  background:transparent;
  color:var(--tt-fade);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nowplaying-box__close:hover{
  color:var(--tt);
  border-color:var(--accent-primary);
}

.nowplaying-box__body{
  padding:10px 12px 12px;
  font-size:13px;
  line-height:1.45;
}

.np-row{margin:6px 0;}
.np-muted{opacity:.75;}
.np-dot{opacity:.55; margin:0 6px;}
.np-help, .np-help-inline{
  text-decoration:underline;
  text-underline-offset:3px;
}