/* CD-B4 — Day mode banner readability + desktop stream row restore */

/* ===== DAY: light plaques over media ===== */
html:not([data-theme="dark"]) #clarity-top-duo .banner-overlay {
  background: linear-gradient(
    180deg,
    rgba(250, 248, 242, 0.82) 0%,
    rgba(250, 248, 242, 0.9) 55%,
    rgba(250, 248, 242, 0.94) 100%
  ) !important;
  color: #152019 !important;
}

html:not([data-theme="dark"]) #clarity-top-duo .banner-side.left .hijri-cal-section,
html:not([data-theme="dark"]) #clarity-top-duo .banner-side.right .salah-times-section {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 76, 58, 0.22) !important;
  color: #152019 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

html:not([data-theme="dark"]) #clarity-top-duo .salah-title,
html:not([data-theme="dark"]) #clarity-top-duo .cal-title,
html:not([data-theme="dark"]) #clarity-top-duo .hijri-cal-meta,
html:not([data-theme="dark"]) #clarity-top-duo .hijri-next-event,
html:not([data-theme="dark"]) #clarity-top-duo .hijri-temps,
html:not([data-theme="dark"]) #clarity-top-duo .hijri-local-time,
html:not([data-theme="dark"]) #clarity-top-duo .hijri-local-loc,
html:not([data-theme="dark"]) #clarity-top-duo .salah-times-list,
html:not([data-theme="dark"]) #clarity-top-duo .salah-name,
html:not([data-theme="dark"]) #clarity-top-duo .salah-time {
  color: #152019 !important;
}

html:not([data-theme="dark"]) #clarity-top-duo .salah-times-list li.salah-next {
  background: rgba(15, 76, 58, 0.1) !important;
  border-color: rgba(15, 76, 58, 0.35) !important;
}

html:not([data-theme="dark"]) #clarity-top-duo .bismillah,
html:not([data-theme="dark"]) #clarity-top-duo .rabbana-arabic {
  color: #0c3d30 !important;
  text-shadow: none;
}

html:not([data-theme="dark"]) #clarity-top-duo .banner-brand,
html:not([data-theme="dark"]) #clarity-top-duo .banner-brand .brand-name {
  color: #0f4c3a !important;
  text-shadow: none !important;
}

html:not([data-theme="dark"]) #clarity-top-duo .subtitle,
html:not([data-theme="dark"]) #clarity-top-duo .rabbana-english,
html:not([data-theme="dark"]) #clarity-top-duo .rabbana-ref {
  color: rgba(21, 32, 25, 0.82) !important;
}

html:not([data-theme="dark"]) #clarity-top-duo .rabbana-box {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(15, 76, 58, 0.18) !important;
}

html:not([data-theme="dark"]) #clarity-top-duo .banner-name-plaque {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 76, 58, 0.2);
}

html:not([data-theme="dark"]) #clarity-top-duo .allah-plaque .arabic {
  color: #0f4c3a !important;
}

/* Day stream pills */
html:not([data-theme="dark"]) .live-haramain-btn.stream-pill-primary {
  background: linear-gradient(135deg, #1a8f6a, #0f4c3a);
  color: #fff;
}

html:not([data-theme="dark"]) .quran-stream-btn.stream-pill-primary {
  background: linear-gradient(135deg, #d4b84a, #a68920);
  color: #152019;
}

html:not([data-theme="dark"]) .stream-drawer {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(15, 76, 58, 0.2) !important;
}

html:not([data-theme="dark"]) .stream-drawer-summary {
  color: #0f4c3a !important;
}

html:not([data-theme="dark"]) .stream-field {
  color: rgba(21, 32, 25, 0.75) !important;
}

/* ===== DESKTOP (≥701): classic horizontal AV row (not drawer-only) ===== */
@media (min-width: 701px) {
  .stream-controls-cdb2 {
    max-width: none;
    width: 100%;
  }

  .stream-controls-cdb2 .stream-primary {
    display: contents; /* allow pills into main flex row */
  }

  .stream-controls-cdb2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }

  /* Open drawer body always on desktop — classic strip */
  .stream-controls-cdb2 .stream-drawer {
    display: contents;
    border: none;
    background: transparent;
  }

  .stream-controls-cdb2 .stream-drawer-summary {
    display: none; /* no accordion chrome on desktop */
  }

  .stream-controls-cdb2 .stream-drawer-body {
    display: contents;
    padding: 0;
  }

  .stream-controls-cdb2 .stream-field {
    display: contents;
  }

  .stream-controls-cdb2 .stream-field-label {
    display: none;
  }

  .stream-controls-cdb2 .stream-select,
  .stream-controls-cdb2 select {
    width: auto;
    max-width: 9.5rem;
    min-height: 36px;
    font-size: 0.75rem;
  }

  .stream-controls-cdb2 .stream-pill-primary {
    min-width: auto;
    min-height: 36px !important;
    padding: 0.35rem 0.85rem !important;
    font-size: 0.8rem !important;
  }

  .stream-controls-cdb2 .stream-drawer-actions {
    display: contents;
  }

  .stream-controls-cdb2 .volume-control {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 36px;
  }

  .stream-controls-cdb2 .mute-btn {
    min-width: 36px;
    min-height: 36px;
  }

  .stream-controls-cdb2 #volume-slider {
    width: 4.5rem;
    min-width: 3.5rem;
  }
}

/* ===== MOBILE: keep vertical stack + drawer (B1/B2) ===== */
@media (max-width: 700px) {
  .stream-controls-cdb2 {
    flex-direction: column;
  }

  .stream-controls-cdb2 .stream-primary {
    display: flex;
  }

  .stream-controls-cdb2 .stream-drawer {
    display: block;
  }

  .stream-controls-cdb2 .stream-drawer-summary {
    display: flex;
  }

  .stream-controls-cdb2 .stream-drawer-body {
    display: flex;
    flex-direction: column;
  }

  .stream-controls-cdb2 .stream-field {
    display: flex;
    flex-direction: column;
  }

  .stream-controls-cdb2 .stream-field-label {
    display: block;
  }

  .stream-controls-cdb2 .stream-drawer-actions {
    display: flex;
  }
}