/* BombayCafe Radio — כפתור בכותרת + חלונית נגן (07/11/2026; עבר לכותרת 08/11/2026) */

/* הכפתור בכותרת. בטלפון (≤600px) — 📻 ליד ה-☀; במחשב — "📻 Radio" ליד כפתור ה-Light */
.bc-hradio-btn {
    background: none;
    border: 1px solid rgba(0, 255, 255, 0.35);
    color: #5af7ff;
    border-radius: 20px;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bc-hradio-btn[hidden] { display: none !important; }
.bc-hradio-btn:hover { background: rgba(0, 255, 255, 0.1); }
.bc-hradio-btn:focus-visible { outline: 2px solid #5af7ff; outline-offset: 2px; }
.bc-hradio-btn.is-on { background: rgba(0, 255, 255, 0.12); }
/* מנגן עכשיו: נקודה קטנה פועמת */
.bc-hradio-btn.is-playing::after {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: #5af7ff;
    animation: bc-hradio-pulse 1.2s ease-in-out infinite;
}
@keyframes bc-hradio-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .bc-hradio-btn.is-playing::after { animation: none; } }

.bc-hradio-mobile { display: none; }
@media (max-width: 600px) {
    .bc-hradio-desktop { display: none !important; }
    .bc-hradio-mobile { display: inline-flex; height: 28px; padding: 2px 8px; border-radius: 12px; font-size: 0.9rem; box-sizing: border-box; }
}

/* החלונית: צפה מתחת לכותרת בצד ימין, קטנה. מקופלת = מוסתרת אבל הנגן ממשיך לנגן
   (visibility ולא display:none, כדי שה-iframe של ספוטיפיי לא ייעצר) */
.bc-hradio-panel {
    position: fixed;
    top: 66px;
    right: max(8px, env(safe-area-inset-right, 0px));
    width: min(360px, calc(100vw - 16px));
    z-index: 1200;
    background: #0e1418;
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 12px;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    display: grid;
    gap: 6px;
}
.bc-hradio-panel.is-collapsed { visibility: hidden; pointer-events: none; opacity: 0; }
.bc-hradio-panel iframe { display: block; width: 100%; height: 80px; border: 0; border-radius: 10px; }
.bc-hradio-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bc-hradio-close { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 0.72rem; color: #9aa; cursor: pointer; }
.bc-hradio-close:hover { color: #5af7ff; }
.bc-hradio-ext { font-size: 0.68rem; color: #777; text-decoration: none; }
.bc-hradio-ext:hover { color: #aaa; text-decoration: underline; }

body[data-theme="light"] .bc-hradio-btn { border-color: #c9a84c; color: #b8952f; }
body[data-theme="light"] .bc-hradio-btn:hover,
body[data-theme="light"] .bc-hradio-btn.is-on { background: #fdf6e3; }
body[data-theme="light"] .bc-hradio-btn.is-playing::after { background: #b8952f; }
body[data-theme="light"] .bc-hradio-panel { background: #fffaf0; border-color: #e6d5a3; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15); }
body[data-theme="light"] .bc-hradio-close { color: #777; }
body[data-theme="light"] .bc-hradio-ext { color: #999; }