/* Ndaar Direct */
.ndaar-direct { --ndaar-accent: #0B7A3E; font-family: inherit; margin: 0 0 1.5em; }

/* ---------- TV ---------- */
.ndaar-direct__screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.ndaar-direct__video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.ndaar-direct__badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: #E3241B; color: #fff; font: 700 12px/1 sans-serif; letter-spacing: 1px; padding: 6px 10px; border-radius: 3px; pointer-events: none; }
.ndaar-direct__offline { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 16px 16px 22px; text-align: center; color: #fff; background: #111 center / cover no-repeat; }
.ndaar-direct__offline::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.05) 60%); }
.ndaar-direct__offline > * { position: relative; }
.ndaar-direct__offline[hidden] { display: none; }
.ndaar-direct__offline strong { font-size: 1.2em; }
.ndaar-direct__title { margin: .6em 0 0; font-weight: 700; font-size: 1.25em; }

.ndaar-direct__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.ndaar-direct--tv.is-live .ndaar-direct__dot,
.ndaar-direct--radio.is-playing .ndaar-direct__dot { animation: ndaar-pulse 1.4s ease-in-out infinite; }
@keyframes ndaar-pulse { 50% { opacity: .3; } }

/* ---------- Radio ---------- */
.ndaar-direct--radio { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 20px; border-radius: 8px; background: var(--ndaar-accent); color: #fff; }
.ndaar-direct__play { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: none; background: #fff; color: var(--ndaar-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ndaar-direct__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ndaar-direct__icon-pause { display: none; }
.ndaar-direct--radio.is-playing .ndaar-direct__icon-play { display: none; }
.ndaar-direct--radio.is-playing .ndaar-direct__icon-pause { display: block; }
.ndaar-direct__radio-text { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.ndaar-direct__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.ndaar-direct__radio-text strong { font-size: 1.3em; line-height: 1.2; }
.ndaar-direct__sub, .ndaar-direct__status { font-size: .9em; }
.ndaar-direct__volume { flex: 0 1 160px; }
.ndaar-direct__volume input { width: 100%; accent-color: #fff; }

.ndaar-direct-notice { padding: 12px 16px; background: #fff8e5; border-left: 4px solid #dba617; }

@media (max-width: 480px) {
  .ndaar-direct__volume { flex-basis: 100%; }
}