/* =========================================================================
 * Beckon theme-song player (start page, Downloads section)
 * Dark theme matching the pricing-block / calculator. Audio file served from
 * /asset/beckon_soundtrack.mp3; behaviour in js/player.js.
 * ========================================================================= */

.beckon-player {
    max-width: 640px;
    margin: 40px auto 0;
    background: #1f1f1f;
    border: 1px solid #2d2d2d;
    border-radius: 14px;
    padding: 22px 26px;
    color: #fff;
    box-shadow: 0 0 18px 4px rgba(123, 67, 151, 0.18);
    font-family: 'Nunito', 'Catamaran', 'Helvetica', 'Arial', sans-serif;
}

.bp-title {
    font-size: 14px; font-weight: 700; letter-spacing: 1px;
    color: #e2e2e2; margin-bottom: 16px;
}
.bp-note { color: #b07cd6; margin-right: 5px; }

.bp-controls { display: flex; align-items: center; gap: 18px; }

.bp-play {
    flex: 0 0 auto;
    width: 52px; height: 52px; border-radius: 50%;
    background: #7b4397; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .1s;
}
.bp-play:hover { background: #8f4faf; }
.bp-play:active { transform: scale(0.96); }
.bp-play:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(123, 67, 151, 0.5); }
.bp-play svg { width: 20px; height: 20px; fill: #fff; display: block; }
.bp-icon-pause { display: none; }
.beckon-player.is-playing .bp-icon-play  { display: none; }
.beckon-player.is-playing .bp-icon-pause { display: block; }

.bp-seek {
    flex: 1 1 auto; min-width: 0;
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 999px;
    background: #3a3a3a; outline: none; cursor: pointer;
}
.bp-seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid #7b4397; cursor: pointer;
}
.bp-seek::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid #7b4397; cursor: pointer;
}

.bp-time {
    flex: 0 0 auto;
    font-size: 13px; color: #9a9a9a;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 575px) {
    .beckon-player { padding: 18px 18px; }
    .bp-controls { gap: 12px; }
    .bp-play { width: 46px; height: 46px; }
}