/* ================================================================
   Dag Assistent — Player v5.1  Professional Brand Design
   Brand: #1a56db (logo blue) · #e0102a (lip red) · #0c0f1a (dark)
   ================================================================ */

/* ── Scoped design tokens ──────────────────────────────────────── */
.da-player-container {
  --da-bg:       #09090f;
  --da-surface:  #111120;
  --da-surface2: #1a1a2e;
  --da-border:   rgba(139,92,246,.15);
  --da-purple:   #7C3AED;
  --da-purple2:  #A78BFA;
  --da-cyan:     #38BDF8;
  --da-cyan2:    #67E8F9;
  --da-grad:     linear-gradient(135deg, #7C3AED, #38BDF8);
  --da-red:      #e0102a;
  --da-text:     #f0f0ff;
  --da-muted:    #8882aa;
  --da-radius:   20px;
  --da-card-r:   14px;
}

/* ── Container ─────────────────────────────────────────────────── */
.da-player-container {
  background:    var(--da-bg) !important;
  border:        1px solid rgba(124,58,237,.3) !important;
  border-radius: var(--da-radius) !important;
  padding:       0 !important;
  max-width:     560px;
  margin:        0 auto;
  color:         var(--da-text) !important;
  font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif !important;
  box-shadow:    0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(124,58,237,.12) !important;
  overflow:      visible !important;
  transition:    box-shadow .4s, border-color .4s;
}
.da-player-container.da-playing {
  border-color: rgba(124,58,237,.6) !important;
  box-shadow:   0 28px 80px rgba(124,58,237,.2), 0 0 0 1px rgba(124,58,237,.3) !important;
}
.da-player-container * { box-sizing: border-box !important; }
.da-player-container a { color: inherit; text-decoration: none; }

/* ── Info cards ────────────────────────────────────────────────── */
.da-player-container .da-cards-strip {
  display:    flex !important;
  position:   relative !important;
  z-index:    3 !important;
  padding-top: 10px !important;
  gap:        10px !important;
  padding:    0 22px !important;
  margin-bottom: 14px !important;
  flex-wrap:  wrap !important;
}
.da-player-container .da-card-weather,
.da-player-container .da-card-traffic {
  flex:          1 !important;
  min-width:     140px !important;
  border-radius: var(--da-card-r) !important;
  padding:       14px !important;
  color:         #fff !important;
  box-shadow:    0 4px 20px rgba(0,0,0,.4) !important;
}
.da-player-container .da-card-icon {
  font-size:    2rem !important;
  line-height:  1 !important;
  margin-bottom: 4px !important;
  display:      block !important;
}
.da-player-container .da-card-temp {
  font-size:   2.2rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}
.da-player-container .da-card-label {
  font-size:   .82rem !important;
  font-weight: 600 !important;
  margin:      3px 0 2px !important;
  text-transform: capitalize !important;
  opacity: .95 !important;
}
.da-player-container .da-card-sub {
  font-size:  .72rem !important;
  opacity:    .78 !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}
.da-player-container .da-card-traffic .da-card-label {
  font-size:   .7rem !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  opacity: .7 !important;
  margin-bottom: 6px !important;
}
.da-player-container .da-card-traffic-row {
  font-size:    .75rem !important;
  margin-bottom: 4px !important;
  display:      flex !important;
  gap:          5px !important;
  align-items:  flex-start !important;
  line-height:  1.4 !important;
  opacity:      .9 !important;
}

/* ── News strip ────────────────────────────────────────────────── */
.da-player-container .da-news-strip {
  display:         flex !important;
  gap:             10px !important;
  padding:         0 22px !important;
  margin-bottom:   14px !important;
  overflow-x:      auto !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.da-player-container .da-news-strip::-webkit-scrollbar { display: none !important; }
.da-player-container .da-news-card {
  flex:          0 0 160px !important;
  scroll-snap-align: start !important;
  background:    var(--da-surface) !important;
  border:        1px solid var(--da-border) !important;
  border-radius: 10px !important;
  overflow:      hidden !important;
  text-decoration: none !important;
  color:         var(--da-text) !important;
  transition:    transform .2s, border-color .2s !important;
  display:       flex !important;
  flex-direction: column !important;
}
.da-player-container .da-news-card:hover { transform: translateY(-2px) !important; border-color: rgba(26,86,219,.4) !important; }
.da-player-container .da-news-img { height:78px !important; background-size:cover !important; background-position:center !important; flex-shrink:0 !important; }
.da-player-container .da-news-img--placeholder { display:flex !important; align-items:center !important; justify-content:center !important; }
.da-player-container .da-news-body { padding:8px !important; flex:1 !important; display:flex !important; flex-direction:column !important; gap:4px !important; }
.da-player-container .da-news-source {
  display:       inline-block !important;
  font-size:     .6rem !important;
  font-weight:   700 !important;
  padding:       2px 6px !important;
  border-radius: 50px !important;
  color:         #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  width:         fit-content !important;
}
.da-player-container .da-news-title {
  font-size:   .74rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin:      0 !important;
  color:       var(--da-text) !important;
  display:     -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow:    hidden !important;
}

/* ── Mouth wrap ────────────────────────────────────────────────── */
.da-player-container .da-mouth-wrap {
  transition: filter .5s !important;
}
.da-player-container.da-playing .da-mouth-wrap {
  filter: drop-shadow(0 0 28px rgba(224,16,42,.6)) !important;
}

/* ── Lyrics ────────────────────────────────────────────────────── */
.da-player-container .da-lyrics-wrap {
  height:        180px !important;
  overflow:      hidden !important;
  margin:        0 22px 14px !important;
  border-radius: 10px !important;
  background:    var(--da-surface) !important;
  border:        1px solid var(--da-border) !important;
  position:      relative !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%) !important;
          mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%) !important;
}
.da-player-container .da-lyrics-inner {
  padding:        50px 20px !important;
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  gap:            12px !important;
}
.da-player-container .da-lyric-line {
  display:     block !important;
  font-size:   1.1rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align:  center !important;
  color:       rgba(255,255,255,.15) !important;
  transition:  color .3s, transform .3s, font-size .3s !important;
  transform:   scale(.94) !important;
  max-width:   460px !important;
  margin:      0 !important;
  padding:     0 !important;
}
.da-player-container .da-lyric-line.da-lyric-past  { color: rgba(255,255,255,.3) !important; transform: scale(.96) !important; }
.da-player-container .da-lyric-line.da-lyric-active {
  color:       #fff !important;
  font-size:   1.3rem !important;
  font-weight: 700 !important;
  transform:   scale(1) !important;
  text-shadow: 0 0 30px rgba(124,58,237,.7) !important;
}

/* ── Waveform ──────────────────────────────────────────────────── */
.da-player-container .da-waveform {
  display:     flex !important;
  align-items: center !important;
  gap:         3px !important;
  height:      36px !important;
  margin:      0 22px 14px !important;
  overflow:    hidden !important;
}
.da-player-container .da-bar {
  flex:          1 !important;
  min-width:     2px !important;
  height:        3px !important;
  background:    var(--da-purple) !important;
  border-radius: 2px !important;
  transition:    height .08s ease !important;
  opacity:       .4 !important;
  margin:        0 !important;
  padding:       0 !important;
}
.da-player-container.da-playing .da-bar { opacity: 1 !important; }

/* ── Controls — één centrale knop ────────────────────────────── */
.da-player-container .da-controls {
  padding:    0 22px !important;
  margin-bottom: 10px !important;
}

.da-player-container .da-btn-main {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             12px !important;
  width:           100% !important;
  background:      #ffffff !important;
  color:           #0f0f1a !important;
  border:          none !important;
  border-radius:   50px !important;
  padding:         14px 28px !important;
  font-size:       1rem !important;
  font-weight:     700 !important;
  cursor:          pointer !important;
  transition:      background .2s, transform .15s, box-shadow .2s !important;
  box-shadow:      0 2px 16px rgba(0,0,0,.25) !important;
  letter-spacing:  .01em !important;
}
.da-player-container .da-btn-main:hover:not(:disabled) {
  background: #f0ecff !important;
  transform:  translateY(-1px) !important;
}
.da-player-container .da-btn-main:disabled {
  opacity: .6 !important;
  cursor: not-allowed !important;
}
.da-player-container .da-btn-main-icon {
  font-size:  1.1rem !important;
  flex-shrink: 0 !important;
  display:    inline-block !important;
}
.da-player-container .da-btn-main-label {
  font-size:  .97rem !important;
  font-weight: 700 !important;
}

@keyframes da-spin { to { transform: rotate(360deg); } }
@keyframes da-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

.da-player-container.da-loading .da-btn-generate { animation: da-pulse 1.5s ease-in-out infinite !important; }
.da-player-container .da-btn-icon { font-size: 1rem !important; }

/* Play/Pause round button */
/* Secundaire knoppen — compact, naast volumes */
.da-player-container .da-secondary-controls {
  align-items: center;
  gap:         8px;
  padding:     6px 22px;
  flex-wrap:   wrap;
}

.da-player-container .da-btn-icon-sm {
  background:    var(--da-surface2) !important;
  border:        1px solid var(--da-border) !important;
  color:         var(--da-muted) !important;
  border-radius: 50% !important;
  width:         30px !important;
  height:        30px !important;
  font-size:     .78rem !important;
  cursor:        pointer !important;
  display:       inline-flex !important;
  align-items:   center !important;
  justify-content: center !important;
  flex-shrink:   0 !important;
  transition:    background .2s !important;
  padding:       0 !important;
}
.da-player-container .da-btn-icon-sm:hover {
  background: rgba(255,255,255,.08) !important;
  color:      var(--da-text) !important;
}
/* Stop = rood tintje */
.da-player-container #da-btn-stop {
  color:        #f87171 !important;
  border-color: rgba(248,113,113,.25) !important;
}

/* ── Volume ────────────────────────────────────────────────────── */
.da-player-container .da-volume-row {
  display:     flex !important;
  align-items: center !important;
  gap:         10px !important;
  padding:     10px 22px 0 !important;
}
.da-player-container .da-vol-icon { font-size: 1rem !important; flex-shrink: 0 !important; user-select: none !important; }
.da-player-container .da-vol-slider {
  flex:    1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height:  4px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.15) !important;
  outline: none !important;
  cursor:  pointer !important;
}
.da-player-container .da-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width:  16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: var(--da-purple) !important;
  box-shadow: 0 0 8px rgba(124,58,237,.7) !important;
  cursor: pointer !important;
}
.da-player-container .da-vol-pct {
  font-size: .73rem !important;
  color:     var(--da-muted) !important;
  min-width: 36px !important;
  text-align: right !important;
}

/* ── Progress ──────────────────────────────────────────────────── */
.da-player-container .da-progress-wrap { padding: 10px 22px 0 !important; }
.da-player-container .da-progress-bar {
  height:        5px !important;
  background:    rgba(255,255,255,.1) !important;
  border-radius: 4px !important;
  cursor:        pointer !important;
  overflow:      hidden !important;
}
.da-player-container .da-progress-fill {
  height:        100% !important;
  background:    var(--da-grad) !important;
  border-radius: 4px !important;
  width:         0% !important;
  transition:    width .2s linear !important;
}
.da-player-container .da-time-row {
  display:         flex !important;
  justify-content: space-between !important;
  margin-top:      5px !important;
  font-size:       .72rem !important;
  color:           var(--da-muted) !important;
}

/* ── Status ────────────────────────────────────────────────────── */
.da-player-container .da-status {
  padding:     8px 22px 0 !important;
  font-size:   .8rem !important;
  color:       var(--da-muted) !important;
  min-height:  1.1em !important;
  line-height: 1.5 !important;
}
.da-player-container .da-status--loading { color: var(--da-cyan) !important; }
.da-player-container .da-status--error   { color: #f87171 !important; }
.da-player-container .da-status--info    { color: var(--da-cyan) !important; }

/* ── Bottom padding ────────────────────────────────────────────── */
.da-player-container .da-status + audio { margin-bottom: 0 !important; }
.da-player-container > audio:last-of-type { margin-bottom: 20px !important; display: none !important; }
.da-player-container > div:last-of-type  { padding-bottom: 20px !important; }

/* ── Notice (logged out) ───────────────────────────────────────── */
.da-notice { color: var(--da-muted); font-style: italic; text-align: center; padding: 24px; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .da-player-container .da-player-header,
  .da-player-container .da-cards-strip,
  .da-player-container .da-news-strip,
  .da-player-container .da-waveform,
  .da-player-container .da-controls,
  .da-player-container .da-volume-row,
  .da-player-container .da-progress-wrap,
  .da-player-container .da-status,
  .da-player-container .da-lyrics-wrap { padding-left: 14px !important; padding-right: 14px !important; margin-left: 0 !important; margin-right: 0 !important; }
  .da-player-container { border-radius: 14px !important; }
  .da-player-container .da-player-date { display: none !important; }
  .da-player-container .da-btn-generate { width: 100% !important; }
  .da-player-container .da-mouth-wrap { width: 150px !important; height: 150px !important; }
  .da-player-container .da-mouth-img,
  .da-player-container .da-mouth-video { width: 150px !important; height: 150px !important; }
}

/* ── Admin CSS (not player) ────────────────────────────────────── */
.da-admin-wrap { max-width: 900px; }
.da-admin-header { margin:20px 0 0; padding:20px 24px; background:#fff; border:1px solid #e0e0e0; border-radius:12px; }
.da-logo-img { height:50px; width:auto; object-fit:contain; display:block; }
.da-card { background:#fff; border:1px solid #ddd; border-radius:8px; padding:22px; margin:18px 0; }
.da-card h2 { margin-top:0; padding-bottom:10px; border-bottom:1px solid #eee; font-size:1.05rem; }
.da-form-table th { width:200px; }
.da-copy-field { display:inline-block; background:#f4f4f4; border:1px solid #ddd; border-radius:4px; padding:5px 10px; font-size:.85rem; word-break:break-all; max-width:400px; }
.da-connected-badge { display:inline-flex; align-items:center; gap:8px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px; padding:10px 14px; margin:0 0 16px; color:#166534; font-weight:600; font-size:.9rem; }
.da-google-btn { display:inline-flex !important; align-items:center !important; height:42px !important; }
.da-feed-list { margin:8px 0; padding-left:0; list-style:none; }
.da-feed-list li { padding:6px 0; border-bottom:1px solid #f0f0f0; font-size:.9rem; }
.da-status-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-top:12px; }
.da-status-item { display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:6px; font-size:.86rem; font-weight:500; }
.da-status-item.ok   { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.da-status-item.warn { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.da-shortcode-block { display:inline-flex; align-items:center; gap:10px; background:#f4f4f4; border:1px solid #ddd; border-radius:6px; padding:10px 16px; margin-bottom:16px; }
.da-steps { line-height:1.8; padding-left:20px; }
.da-toggle { display:inline-flex; align-items:center; cursor:pointer; gap:0; }
.da-toggle input { display:none; }
.da-toggle-slider { width:44px; height:24px; background:#d1d5db; border-radius:50px; position:relative; transition:background .2s; flex-shrink:0; }
.da-toggle-slider::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.da-toggle input:checked + .da-toggle-slider { background:#1a56db; }
.da-toggle input:checked + .da-toggle-slider::after { transform:translateX(20px); }
.da-info-box { background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:.87rem; }
.da-volume-row { display:flex; align-items:center; gap:12px; }
.da-volume-row input[type="range"] { width:180px; }
.da-voice-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.da-feed-row { border:1px solid #e2e8f0; border-radius:8px; margin-bottom:10px; overflow:hidden; }
.da-feed-row-header { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#f8fafc; }
.da-feed-row-meta { flex:1; }
.da-feed-row-name { display:block; font-size:.9rem; }
.da-feed-row-url  { font-size:.77rem; color:#94a3b8; }
.da-feed-expand-btn { background:none; border:1px solid #cbd5e1; border-radius:4px; padding:4px 10px; font-size:.8rem; cursor:pointer; color:#475569; }
.da-badge { background:#e2e8f0; color:#475569; font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:50px; }
.da-add-feed-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.da-feed-preview { background:#f8f9fa; border:1px solid #dee2e6; border-radius:8px; padding:16px; margin-top:4px; }
.da-feed-preview-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.da-feed-items-list { max-height:300px; overflow-y:auto; border:1px solid #e2e8f0; border-radius:6px; background:#fff; }
.da-item-row { display:flex; align-items:flex-start; gap:10px; padding:8px 12px; border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background .15s; font-size:.86rem; }
.da-item-row:last-child { border-bottom:none; }
.da-item-row:hover { background:#f8faff; }
.da-item-unchecked { opacity:.45; }
.da-item-date { color:#94a3b8; font-size:.75rem; white-space:nowrap; flex-shrink:0; }
.da-feed-preview-actions { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.da-feed-error { background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:10px 14px; color:#991b1b; font-size:.86rem; margin-top:8px; }
.da-feed-items-expand { padding:0 12px 12px; background:#fff; }
.da-feed-dot--on  { display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; margin-right:4px; }

/* ── Music volume slider ───────────────────────────────────────── */
.da-player-container .da-vol-sep {
  color:       var(--da-border) !important;
  font-size:   1.1rem !important;
  padding:     0 2px !important;
  flex-shrink: 0 !important;
}
.da-player-container .da-music-vol-slider::-webkit-slider-thumb {
  background: var(--da-cyan) !important;
  box-shadow: 0 0 8px rgba(56,189,248,.6) !important;
}
.da-player-container .da-music-vol-slider::-moz-range-thumb {
  background: var(--da-cyan) !important;
}

/* ── Compact volume sliders in secondary bar ────────────────── */
.da-player-container .da-vol-slider-sm {
  width:   70px !important;
  height:  3px !important;
  -webkit-appearance: none !important;
  appearance:         none !important;
  background:         rgba(255,255,255,.15) !important;
  border-radius:      3px !important;
  outline:            none !important;
  cursor:             pointer !important;
  flex-shrink:        0 !important;
}
.da-player-container .da-vol-slider-sm::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width:  12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: var(--da-purple) !important;
  cursor: pointer !important;
}
.da-player-container .da-music-vol-slider::-webkit-slider-thumb {
  background: var(--da-cyan) !important;
}
.da-player-container .da-vol-sep {
  color:      var(--da-border) !important;
  flex-shrink: 0 !important;
}

/* Gradient balk: links wit-transparant → rechts bijna zwart */
/* Daisay lippenlogo als inline SVG-kleur-accent */
/* Tekst-blok rechts van het icoon */
@media (max-width: 480px) {
  }

/* Linker wit vlak — bevat het icoon */
/* Gradient overgang wit → donker */
/* Rechter donker vlak — bevat de tekst */
@media (max-width: 480px) {
  }

/* De balk: wit → zwart gradient van boven naar beneden         */
/* Loopt naadloos over in de donkere player-achtergrond         */
/* Logo — past in de witte bovenruimte */
/* Tekst rechts van logo — donker op witte achtergrond          */
@media (max-width: 480px) {
  }

/* Logo op witte achtergrond — toon originele kleuren */
/* Tekst rechts: zwarte letters op witte achtergrond */
@media (max-width: 480px) {
  }

/* extra ruimte onderaan voor fade */
  margin-bottom: -14px !important;          /* verberg harde onderrand */
  background:    linear-gradient(
                   to bottom,
                   #ffffff 0%,
                   #ffffff 60%,
                   #09090f 100%) !important;
  position:      relative !important;
  z-index:       1 !important;
}

/* Logo — toon in originele kleuren op witte bg */
/* Tekst: zwart op wit */
@media (max-width: 480px) {
  .da-player-container .da-player-header {
    padding: 14px 14px 26px !important;
    gap:     10px !important;
  }
  }

/* ── Header: wit → zwart, één blok, geen resten ─────────────── */
.da-player-container .da-player-header {
  display:       flex !important;
  align-items:   center !important;
  gap:           14px !important;
  padding:       4px 20px 52px !important;
  margin-bottom: -34px !important;
  background:    linear-gradient(to bottom, #fff 0%, #fff 48%, #09090f 100%) !important;
  position:      relative !important;
  z-index:       2 !important;
  border-radius: 20px 20px 0 0 !important;
  align-items:   flex-start !important;
}
.da-player-container .da-header-logo {
  height:     36px !important;
  width:      auto !important;
  display:    block !important;
  flex-shrink: 0 !important;
}
.da-player-container .da-header-text {
  flex:           1 !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            2px !important;
  min-width:      0 !important;
  background:     transparent !important;
}
.da-player-container .da-header-title {
  display:        block !important;
  font-size:      .97rem !important;
  font-weight:    700 !important;
  color:          #0f0f1a !important;
  letter-spacing: .01em !important;
  white-space:    nowrap !important;
  overflow:       hidden !important;
  text-overflow:  ellipsis !important;
  margin:         0 !important;
  padding:        0 !important;
  line-height:    1.3 !important;
  background:     transparent !important;
}
.da-player-container .da-header-date {
  display:     block !important;
  font-size:   .76rem !important;
  color:       rgba(15,15,26,.45) !important;
  margin:      0 !important;
  padding:     0 !important;
  white-space: nowrap !important;
  background:  transparent !important;
}
@media (max-width: 480px) {
  .da-player-container .da-player-header { padding: 12px 14px 22px !important; gap: 10px !important; }
  .da-player-container .da-header-logo   { height: 28px !important; }
  .da-player-container .da-header-title  { font-size: .88rem !important; }
}