/* ── Desert Sky Sermon Player ── */
:root {
  --sa-bg:       #1a0a0c;
  --sa-card:     #221010;
  --sa-border:   rgba(154,120,40,.2);
  --sa-brass:    #c4a24a;
  --sa-brass-dk: #9a7828;
  --sa-parch:    #f5ede0;
  --sa-muted:    rgba(245,237,224,.5);
  --sa-red:      #4a1418;
}

#dsky-sermon-player {
  max-width: 1000px;
  margin: 0 auto;
  color: var(--sa-parch);
  font-family: 'EB Garamond', Georgia, serif;
}

/* ── Filters ── */
#dsky-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
#dsky-search,
#dsky-sort {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--sa-border);
  color: var(--sa-parch);
  font-family: 'Cinzel', Georgia, serif;
  font-size: .65rem;
  letter-spacing: .12em;
  padding: .65rem 1rem;
  outline: none;
  border-radius: 2px;
  transition: border-color .2s;
}
#dsky-search {
  flex: 1;
  min-width: 200px;
}
#dsky-search::placeholder { color: var(--sa-muted); }
#dsky-search:focus,
#dsky-sort:focus { border-color: var(--sa-brass); }
#dsky-sort option { background: #1a0a0c; }

/* ── Sermon Cards ── */
#dsky-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.dsky-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 1.4rem;
  padding: 1.1rem 1.4rem;
  background: var(--sa-card);
  border: 1px solid var(--sa-border);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  position: relative;
}
.dsky-card:hover {
  background: rgba(74,20,24,.35);
  border-left-color: var(--sa-brass);
  transform: translateX(3px);
}
.dsky-card.dsky-active {
  background: rgba(74,20,24,.55);
  border-left-color: var(--sa-brass);
  border-color: rgba(154,120,40,.4);
}

.dsky-card-num {
  font-family: 'Cinzel', Georgia, serif;
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--sa-brass-dk);
  min-width: 28px;
  text-align: center;
}
.dsky-active .dsky-card-num { color: var(--sa-brass); }

.dsky-card-body { min-width: 0; }

.dsky-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  color: var(--sa-parch);
  line-height: 1.25;
  margin-bottom: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsky-active .dsky-card-title { color: var(--sa-brass); }

.dsky-card-sub {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  align-items: center;
}
.dsky-card-scripture {
  font-size: .85rem;
  color: var(--sa-brass);
  opacity: .8;
}
.dsky-card-series {
  font-size: .8rem;
  color: var(--sa-muted);
  font-style: italic;
}
.dsky-card-date {
  font-family: 'Cinzel', Georgia, serif;
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--sa-muted);
}

.dsky-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.dsky-card-dur {
  font-family: 'Cinzel', Georgia, serif;
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--sa-muted);
}
.dsky-play-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--sa-brass-dk);
  color: var(--sa-brass);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.dsky-play-btn svg {
  width: 14px; height: 14px;
  fill: currentColor;
}
.dsky-play-btn:hover,
.dsky-active .dsky-play-btn {
  background: var(--sa-brass-dk);
  border-color: var(--sa-brass);
  color: #fff;
}

/* ── Loading / Load More ── */
#dsky-loading { text-align: center; padding: 2rem; display: none; }
.dsky-spinner {
  width: 28px; height: 28px;
  border: 2px solid rgba(196,162,74,.2);
  border-top-color: var(--sa-brass);
  border-radius: 50%;
  animation: dsky-spin .8s linear infinite;
  margin: 0 auto;
}
@keyframes dsky-spin { to { transform: rotate(360deg); } }

#dsky-load-more {
  display: block;
  margin: 1.8rem auto 0;
  padding: .7rem 2.5rem;
  background: transparent;
  border: 1px solid var(--sa-brass-dk);
  color: var(--sa-brass);
  font-family: 'Cinzel', Georgia, serif;
  font-size: .65rem;
  letter-spacing: .15em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
#dsky-load-more:hover { background: var(--sa-brass-dk); color: #fff; }
#dsky-load-more.dsky-hidden { display: none; }

/* ── Now-Playing Bar ── */
#dsky-now-playing {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  background: var(--sa-bg);
  border-top: 1px solid rgba(154,120,40,.35);
  box-shadow: 0 -4px 30px rgba(0,0,0,.7);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
#dsky-now-playing.dsky-np-hidden { transform: translateY(110%); }

.dsky-np-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: .7rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 1.2rem;
}
/* prevent grid blowout from long titles */
.dsky-np-info { min-width: 0; }

.dsky-np-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem; font-style: italic; font-weight: 600;
  color: var(--sa-parch);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsky-np-meta {
  font-family: 'Cinzel', Georgia, serif;
  font-size: .55rem; letter-spacing: .1em;
  color: var(--sa-brass); opacity: .75;
  margin-top: .2rem;
}

.dsky-np-controls {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.dsky-ctrl {
  background: none; border: none; cursor: pointer;
  color: var(--sa-parch); opacity: .75;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s, color .2s;
  padding: 0;
}
.dsky-ctrl:hover { opacity: 1; color: var(--sa-brass); }
.dsky-ctrl svg { width: 18px; height: 18px; fill: currentColor; }
.dsky-play-pause { width: 42px; height: 42px; border-radius: 50%; background: var(--sa-brass-dk); opacity: 1; }
.dsky-play-pause:hover { background: var(--sa-brass); }
.dsky-play-pause svg { width: 16px; height: 16px; }

.dsky-np-progress-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 220px;
}
.dsky-time {
  font-family: 'Cinzel', Georgia, serif;
  font-size: .58rem; letter-spacing: .08em;
  color: var(--sa-muted); white-space: nowrap;
}
#dsky-progress {
  flex: 1;
  appearance: none;
  height: 3px;
  background: rgba(196,162,74,.25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
#dsky-progress::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px;
  background: var(--sa-brass);
  border-radius: 50%;
}

#dsky-np-close {
  background: none; border: none;
  color: var(--sa-muted); font-size: 1rem;
  cursor: pointer; padding: .25rem;
  transition: color .2s;
}
#dsky-np-close:hover { color: var(--sa-parch); }

@media (max-width: 680px) {
  /* Now-playing bar: 2-row layout on mobile */
  .dsky-np-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: .5rem .8rem;
    padding: .6rem 1rem;
  }
  /* Row 1: play button | title+meta | close */
  .dsky-np-controls { grid-column: 1; grid-row: 1; }
  /* hide rewind/forward on mobile to save space */
  #dsky-rewind, #dsky-forward { display: none; }
  .dsky-np-info { grid-column: 2; grid-row: 1; min-width: 0; }
  #dsky-np-close { grid-column: 3; grid-row: 1; }
  /* Row 2: progress bar spans full width */
  .dsky-np-progress-wrap { grid-column: 1 / -1; grid-row: 2; min-width: 0; }

  .dsky-card { grid-template-columns: 1fr auto; }
  .dsky-card-num { display: none; }
}