/* ============================================================
   Ephesus Broadcast — global sticky/floating widget
   ----------------------------------------------------------
   Renders a single audio bar at the bottom of every page that
   keeps playback alive while the user navigates. Designed to
   sit BELOW WordPress's admin bar and ABOVE site footers.

   Visual language matches the in-page Ephesus Audio Player
   (cream + dark accents), but the widget is intentionally
   compact: 64px tall on desktop, 80px (with handle) on phones.
   ============================================================ */

.ebw-widget {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99980;
    padding: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    --ebw-bg-dark: 14, 26, 54;
    --ebw-bg-light: 255, 245, 220;
    --ebw-fg-dark: 246, 244, 243;
    --ebw-fg-light: 26, 26, 26;
    --ebw-accent: #FFF1D3;
}
.ebw-widget[data-state="ready"],
.ebw-widget[data-state="playing"],
.ebw-widget[data-state="paused"] {
    transform: translateY(0);
}
.ebw-widget[hidden] { display: none; }

.ebw-bar {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(var(--ebw-bg-dark), 0.92);
    color: rgb(var(--ebw-fg-dark));
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.35);
    margin: 0 auto;
    max-width: 1100px;
    border-radius: 16px 16px 0 0;
}

:root[data-theme="light"] .ebw-bar {
    background: rgba(var(--ebw-bg-light), 0.95);
    color: rgb(var(--ebw-fg-light));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.12);
}

.ebw-art {
    position: relative;
    width: 56px;
    height: 56px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}
.ebw-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, #2a3a6a, #0e1a36);
}
.ebw-art:focus-visible {
    outline: 2px solid var(--ebw-accent);
    outline-offset: 2px;
}

.ebw-pill {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: 2px 0;
    background: #d63638;
    color: white;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.ebw-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ebw-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ebw-sub {
    font-size: 12px;
    opacity: .7;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ebw-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ebw-btn {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s;
}
.ebw-btn:hover { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="light"] .ebw-btn:hover { background: rgba(0, 0, 0, 0.06); }
.ebw-btn[hidden] { display: none; }
.ebw-btn:focus-visible {
    outline: 2px solid var(--ebw-accent);
    outline-offset: 2px;
}

.ebw-play {
    background: var(--ebw-accent);
    color: #0E1A36;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.ebw-play:hover { background: var(--ebw-accent); filter: brightness(1.05); }

.ebw-progress {
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.ebw-progress-fill {
    height: 100%;
    width: 0;
    background: var(--ebw-accent);
    transition: width .15s linear;
}
:root[data-theme="light"] .ebw-progress {
    background: rgba(0, 0, 0, 0.08);
}

/* When LIVE, the live-state payload sets [data-live="1"] on the widget
   so we can tint the pill, change the title prefix, and hide the seek bar. */
.ebw-widget[data-live="1"] .ebw-pill-live { display: block !important; }
.ebw-widget[data-live="1"] .ebw-progress { display: none; }

/* Phones: stack the controls below the meta on the smallest screens
   so the title isn't elided to nothing. */
@media (max-width: 480px) {
    .ebw-bar {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
        padding: 8px 12px;
        border-radius: 12px 12px 0 0;
    }
    .ebw-art { width: 48px; height: 48px; grid-row: span 2; }
    .ebw-meta { grid-column: 2; }
    .ebw-controls { grid-column: 1 / -1; justify-content: center; padding-top: 4px; }
    .ebw-prev, .ebw-next { display: inline-flex !important; }
}