/* ===== TEAM FM PLAYER STYLES (player.css) ===== */
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{padding-bottom:calc(env(safe-area-inset-bottom)+90px);font-family:"Helvetica Neue",Arial,sans-serif}

/******** GLOBAL UTILITIES ********/
.hidden{display:none!important}

/******** CARD LISTS ********/
.player-card.hidden{display:none!important}
.player-card{position:relative;cursor:pointer}
.player-card.focused{outline:3px solid #d6ff00;outline-offset:0}

/* mobile thumbs */
#station-picker-mobile img.station-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;margin-right:1rem;vertical-align:middle}
#station-picker-mobile .player-card{display:flex;align-items:center;padding:.75rem 1rem}
#station-picker-mobile .player-card span{font-size:1.05rem;font-weight:500}
#station-picker-mobile{padding-bottom:90px;overflow-y:auto}

/******** PLAY ICON IN CARD ********/
.player-card .mdi-play-circle{position:absolute;bottom:8px;right:8px;font-size:32px;color:#fff;opacity:.9}

/******** PLAYER BAR ********/
#player-bar{position:fixed;left:0;right:0;bottom:0;height:74px;background:linear-gradient(90deg,#0070ff 0%,#0044b6 100%);display:flex;align-items:center;padding:0 12px 0 8px;z-index:1050;color:#fff}
#player-cover{width:60px;height:60px;border-radius:6px;object-fit:cover;flex:0 0 auto;box-shadow:0 0 4px rgba(0,0,0,.4)}
#playpause{background:#ffffff;border:2px solid #0044b6;width:56px;height:56px;border-radius:50%;flex:0 0 auto;margin-left:auto;margin-right:16px;display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:#002d5c;cursor:pointer}
#playpause:active{transform:scale(.95)}
#title-wrap{flex:1 1 auto;margin-left:12px;overflow:hidden}
#title-wrap span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#title-main{font-weight:700;font-size:1.1rem;line-height:1.2}
#title-sub{font-size:.95rem;line-height:1.2}
#desktop-controls{display:flex;align-items:center;gap:.5rem;margin-right:8px}
#volume-range{width:120px}

/******** HAMBURGER MENU ********/
#hamburger{position:fixed;top:14px;right:14px;left:auto;z-index:1100;font-size:2rem;color:#000;cursor:pointer;transition:color .3s}
#menu-drawer{position:fixed;top:0;right:-300px;width:240px;height:75vh;background:linear-gradient(180deg,#0070ff 0%,#0044b6 100%);color:#fff;z-index:1095;transition:right .3s;padding:70px 18px 24px;border-bottom-left-radius:12px;box-shadow:-4px 0 8px rgba(0,0,0,.25)}
#menu-drawer a{display:block;color:#fff;font-size:1.05rem;margin-bottom:1rem;text-decoration:none}
body.menu-open #menu-drawer{right:0}
body.menu-open #hamburger{color:#fff}

/******** COOKIE BANNER ********/
#cookie-banner{position:fixed;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));padding:14px 12px;background:linear-gradient(90deg,#0070ff 0%,#0044b6 100%);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.95rem;z-index:1045;border-top:1px solid rgba(255,255,255,.35);box-shadow:0 -2px 4px rgba(0,0,0,.3)}
#cookie-banner button{border:none;border-radius:4px;padding:6px 12px;font-weight:600;cursor:pointer}
#cookie-accept{background:#d6ff00;color:#002d5c}
#cookie-reject{background:#ffffff;color:#002d5c}
#cookie-settings{background:transparent;color:#fff;text-decoration:underline}

/******** COOKIE MODAL ********/
.cookie-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:#fff;color:#000;padding:24px 22px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:1100;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.cookie-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.cookie-modal h5{margin-top:0;font-size:1.2rem}
.cookie-modal label{display:block;margin:8px 0;font-size:.95rem}
.cookie-modal button{margin-top:12px;background:#0070ff;color:#fff;border:none;border-radius:4px;padding:6px 16px;font-weight:600;cursor:pointer}

.cookie-modal.hidden{display:none}

/******** RESPONSIVE BREAKPOINTS ********/
@media(max-width:767.98px){
  #player-bar{height:68px;padding-left:6px;padding-right:6px}
  #player-cover{width:50px;height:50px}
  #title-wrap{margin-left:8px}
  #title-main{font-size:1rem}
  #title-sub{font-size:.85rem}
  #playpause{width:46px;height:46px;font-size:1.7rem;margin-right:0}
  #desktop-controls{display:none}
}
@media(min-width:1500px){
  #playpause{width:72px;height:72px;font-size:2.4rem}
}