/* Media Network radio player. Uses the colour variables from com_medianetwork/mn.css. */
.mnp, .mnp *, .mnp *::before, .mnp *::after { box-sizing: border-box; }

.mnp {
  background: var(--mn-surface);
  color: var(--mn-text);
  border: 1px solid var(--mn-border);
  border-radius: 16px;
  padding: 14px 16px;
  display: grid;
  gap: 10px 18px;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: var(--mn-shadow);
}
.mnp p { margin: 0; }
.mnp a { color: var(--mn-accent); }
.mnp svg { width: 22px; height: 22px; fill: currentColor; display: block; pointer-events: none; }

.mnp__now { display: flex; gap: 14px; align-items: center; min-width: 0; }
.mnp__art {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: var(--mn-surface-2); border: 1px solid var(--mn-border); display: grid; place-items: center; color: var(--mn-muted);
}
.mnp__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mnp__art img[hidden] { display: none; }
.mnp__art svg { width: 30px; height: 30px; }
.mnp__meta { min-width: 0; }
.mnp__station { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mn-muted); }
.mnp__title { font-weight: 800; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnp__artist { color: var(--mn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnp__artist a { color: var(--mn-accent); font-weight: 600; }

.mnp__controls { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mnp__btn {
  width: 44px; height: 44px; min-width: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  background: transparent; color: var(--mn-text); border: 2px solid var(--mn-border); display: inline-grid; place-items: center;
}
.mnp__btn:hover { border-color: var(--mn-accent); color: var(--mn-accent); }
.mnp__btn[aria-pressed="true"] { background: var(--mn-accent); border-color: var(--mn-accent); color: var(--mn-accent-text); }
.mnp__btn--main { width: 56px; height: 56px; background: var(--mn-accent); border-color: var(--mn-accent); color: var(--mn-accent-text); }
.mnp__btn--main:hover { background: var(--mn-accent-hover); border-color: var(--mn-accent-hover); color: var(--mn-accent-text); }
.mnp__btn--main .i-pause { display: none; }
.mnp__btn--main.is-playing .i-play { display: none; }
.mnp__btn--main.is-playing .i-pause { display: block; }
.mnp__btn--main.is-loading { opacity: .75; }
.mnp__btn--main.needs-gesture { box-shadow: 0 0 0 4px var(--mn-focus); }
.mnp__btn[data-mn="repeat"][data-mode="one"]::after { content: "1"; position: absolute; font-size: .65rem; font-weight: 900; transform: translate(9px, 9px); }
.mnp__btn[data-mn="repeat"] { position: relative; }
.mnp__btn[data-mn="mute"][aria-pressed="true"] { background: var(--mn-surface-2); color: var(--mn-text); border-color: var(--mn-accent); }

.mnp__progress { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; color: var(--mn-muted); font-size: .9rem; }
.mnp input[type="range"] { width: 100%; accent-color: var(--mn-accent); height: 28px; margin: 0; background: transparent; }

.mnp__extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: flex-end; }
.mnp__genre select {
  min-height: 44px; max-width: 100%; padding: .4em .7em; font: inherit; font-size: 1rem; border-radius: 10px;
  color: var(--mn-input-text); background: var(--mn-input-bg); border: 2px solid var(--mn-border);
}
.mnp__vol { display: flex; align-items: center; gap: 6px; width: 150px; }
.mnp__text-btn {
  min-height: 44px; padding: .3em .9em; border-radius: 999px; border: 2px solid var(--mn-border); background: transparent;
  color: var(--mn-text); font: inherit; font-weight: 600; cursor: pointer;
}
.mnp__text-btn:hover { border-color: var(--mn-accent); color: var(--mn-accent); }
.mnp__recent { grid-column: 1 / -1; background: var(--mn-bg); border: 1px solid var(--mn-border); border-radius: 10px; padding: 8px 14px; max-height: 220px; overflow: auto; }
.mnp__recent[hidden] { display: none; }
.mnp__recent h3 { margin: 4px 0 6px; font-size: .95rem; color: var(--mn-text); }
.mnp__recent ol { margin: 0; padding-left: 1.3em; color: var(--mn-text); }
.mnp__status { grid-column: 1 / -1; min-height: 1.2em; font-size: .92rem; color: var(--mn-muted); }
.mnp__status:empty { display: none; }

/* sticky bar variant */
.mnp--bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; border-radius: 16px 16px 0 0; border-width: 1px 0 0;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(180px, 1fr) auto; align-items: center;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.mnp--bar .mnp__extras { flex-wrap: nowrap; }
body.mnp-has-bar { padding-bottom: 120px; }
.mnp--bar:not(.is-active) .mnp__progress { opacity: .6; }
@media (max-width: 1100px) {
  .mnp--bar { grid-template-columns: minmax(0, 1fr) auto; }
  .mnp--bar .mnp__progress { grid-column: 1 / -1; order: 3; }
  .mnp--bar .mnp__extras { grid-column: 1 / -1; order: 4; flex-wrap: wrap; justify-content: space-between; }
  body.mnp-has-bar { padding-bottom: 230px; }
}
@media (max-width: 560px) {
  .mnp--bar { grid-template-columns: 1fr; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .mnp--bar .mnp__controls { justify-content: space-between; }
  .mnp__vol { display: none; }
  .mnp__art { width: 52px; height: 52px; }
  body.mnp-has-bar { padding-bottom: 280px; }
}

/* full page variant */
.mnp--full { grid-template-columns: 1fr; padding: clamp(16px, 3vw, 28px); max-width: 760px; margin-inline: auto; }
.mnp--full .mnp__now { flex-direction: column; text-align: center; }
.mnp--full .mnp__art { width: min(300px, 70vw); height: min(300px, 70vw); border-radius: 16px; }
.mnp--full .mnp__art svg { width: 80px; height: 80px; }
.mnp--full .mnp__title { white-space: normal; font-size: 1.5rem; }
.mnp--full .mnp__artist { white-space: normal; }
.mnp--full .mnp__extras { justify-content: center; }
.mnp--full .mnp__vol { width: min(220px, 60vw); }

/* inline module variant */
.mnp--inline { max-width: 100%; }

.mnp-featured { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mnp-featured button {
  min-height: 40px; padding: .25em .9em; border-radius: 999px; border: 2px solid var(--mn-border); background: var(--mn-bg);
  color: var(--mn-text); font: inherit; font-weight: 600; cursor: pointer;
}
.mnp-featured button:hover { border-color: var(--mn-accent); color: var(--mn-accent); }