/*
 * LiveTV.eu - kanaalpagina 2.0: spelerbalk, menu's, tooltips, sectienavigatie, streamkeuze en rails.
 * Bestaande Golden Master-tokens (style.css); iconen uit de LiveTV.eu-familie (community_icon).
 */

/* ---------------------------------------------------------------- spelerbalk */
.chd-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:6px 8px 6px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:linear-gradient(180deg,rgba(14,26,44,.85),rgba(8,17,31,.85));box-shadow:var(--shadow-soft)}
.chd-player:not(.has-cm) > .chd-toolbar{margin-top:12px}
.ce-live{display:inline-flex;align-items:center;gap:8px;flex:none;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ce-live-dot{width:7px;height:7px;border-radius:50%;background:#5b6b82}
.ce-live[data-state="loading"] .ce-live-dot{background:var(--warn);box-shadow:0 0 0 3px rgba(255,176,32,.16)}
.ce-live[data-state="live"]{color:#ff4d6d}
.ce-live[data-state="live"] .ce-live-dot{background:#ff4d6d;box-shadow:0 0 0 3px rgba(255,77,109,.18);animation:ltvpulse 2.4s infinite}
.ce-live[data-state="paused"] .ce-live-dot{background:#93a8c6}
.ce-tools{display:flex;align-items:center;gap:4px;min-width:0}
.ce-pop{position:relative}
.ce-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:40px;height:40px;padding:0 10px;border:1px solid transparent;
  border-radius:12px;background:transparent;color:#d6e4f7;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  transition:color .16s ease,background .16s ease,border-color .16s ease}
.ce-btn .cm-ic{width:20px;height:20px}
.ce-btn:hover:not(:disabled){color:#fff;background:rgba(127,233,247,.08);border-color:rgba(127,233,247,.26)}
.ce-btn[aria-pressed="true"],.ce-btn[aria-expanded="true"]{color:#fff;background:rgba(47,157,255,.14);border-color:rgba(47,157,255,.45)}
.ce-btn:focus-visible{outline:2px solid #7fe9f7;outline-offset:2px}
.ce-btn:disabled{opacity:.42;cursor:not-allowed}
.ce-btn[hidden]{display:none}
.ce-ic-off{display:none}
.ce-btn[aria-pressed="true"] .ce-ic-on{display:none}
.ce-btn[aria-pressed="true"] .ce-ic-off{display:block}
.ce-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:60;width:260px;max-width:calc(100vw - 24px);padding:10px;border:1px solid rgba(120,166,224,.3);
  border-radius:14px;background:linear-gradient(180deg,rgba(14,28,48,.97),rgba(7,15,28,.98));box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.ce-menu[hidden]{display:none}
.ce-menu-title{margin:4px 6px 6px;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7fe9f7}
.ce-menu-title:not(:first-child){margin-top:12px}
.ce-menu-note{margin:2px 6px 4px;font-size:.8rem;line-height:1.4;color:#b8cbe6}
.ce-opts{display:grid;gap:2px}
.ce-opt{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:9px;background:transparent;
  color:#dbe7f8;font:inherit;font-size:.86rem;text-align:start;cursor:pointer}
.ce-opt:hover,.ce-opt:focus-visible{background:rgba(47,157,255,.12);color:#fff;outline:0}
.ce-opt[aria-checked="true"]{color:#fff;font-weight:700}
.ce-opt[aria-checked="true"]::after{content:"";width:8px;height:8px;border-radius:50%;background:#7fe9f7;box-shadow:0 0 8px rgba(127,233,247,.6)}
.ce-opt--primary{justify-content:center;margin-top:8px;border:1px solid rgba(127,233,247,.42);background:rgba(127,233,247,.08);font-weight:700}

/* ---------------------------------------------------------------- tooltips (icoonknoppen; alleen met muis/toetsenbord) */
@media (hover:hover){
  .ce-btn[data-tip]:hover::after,.ce-btn[data-tip]:focus-visible::after,.cm-pbtn[data-tip]:hover::after,.cm-pbtn[data-tip]:focus-visible::after,
  .cm-rail-btn[data-tip]:hover::after,.cm-rail-btn[data-tip]:focus-visible::after,.cm-sharepanel .cm-shareopt[data-tip]:hover::after,
  .cm-sharepanel .cm-shareopt[data-tip]:focus-visible::after,.cm-emoji-btn[data-tip]:hover::after{
    content:attr(data-tip);position:absolute;z-index:70;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:5px 9px;border:1px solid rgba(120,166,224,.3);
    border-radius:8px;background:#0b1626;color:#eaf2ff;font-size:.72rem;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none;
    box-shadow:0 8px 20px rgba(0,0,0,.45)}
  .cm-pbtn[data-tip]:hover::after,.cm-pbtn[data-tip]:focus-visible::after{bottom:auto;top:calc(100% + 6px)}
  .cm-rail-btn[data-tip]:hover::after,.cm-rail-btn[data-tip]:focus-visible::after{bottom:auto;left:auto;right:calc(100% + 10px);top:50%;transform:translateY(-50%)}
  .ce-btn[aria-expanded="true"]::after{display:none}
}
.cm-pbtn,.cm-sharepanel .cm-shareopt{position:relative}

/* ---------------------------------------------------------------- sectienavigatie */
.chd-tabs{margin-top:4px}
.chd-tabs ul{display:flex;gap:6px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.chd-tabs ul::-webkit-scrollbar{display:none}
.chd-tabs a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;color:#c7d8f2;
  font-size:.86rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:color .16s ease,border-color .16s ease,background .16s ease}
.chd-tabs a:hover{color:#fff;border-color:var(--line-2)}
.chd-tabs a[aria-current="true"]{color:#fff;border-color:rgba(47,157,255,.55);background:var(--accent-soft)}
.chd-tabs a:focus-visible{outline:2px solid #7fe9f7;outline-offset:2px}
.chd-tabs .cm-ic{width:17px;height:17px;color:#7fe9f7}
#chd-streams-title,#chd-snap-title,.chd-rail h2{scroll-margin-top:96px}

/* ---------------------------------------------------------------- streamkeuze */
.chd-src-play{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;min-height:36px;padding:0 14px;border:1px solid rgba(127,233,247,.42);
  border-radius:999px;background:linear-gradient(180deg,rgba(127,233,247,.1),rgba(127,233,247,.03));color:#e6fbff;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease}
.chd-src-play .cm-ic{width:15px;height:15px}
.chd-src-play:hover{border-color:rgba(127,233,247,.8);box-shadow:0 0 16px rgba(0,224,198,.2)}
.chd-src-play:focus-visible{outline:2px solid #7fe9f7;outline-offset:2px}

/* ---------------------------------------------------------------- mobiel */
@media (pointer:coarse){
  .ce-btn{min-width:44px;height:44px}
  .chd-src-play{min-height:44px}
  .chd-tabs a{min-height:44px}
}
@media (max-width:759px){
  .chd-toolbar{padding:4px 4px 4px 10px;gap:6px}
  .ce-btn{padding:0 8px}
  .ce-btn-text{display:none}
  .ce-menu{position:fixed;inset-inline:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;border-radius:18px;padding:14px}
  .ce-opt{min-height:44px}
  /* "You may also like": horizontaal swipebaar binnen de sectie (geen pagina-overflow) */
  .chd-rail .chd-cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .chd-rail .chd-cards::-webkit-scrollbar{display:none}
  .chd-rail .chd-cards > li{flex:0 0 78%;min-width:0;scroll-snap-align:start}
  .chd-stream-list li{gap:6px 10px}
  .chd-src-play{margin-inline-start:0}
}
@media (max-width:359px){
  .ce-live [data-ce-live-text]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ce-btn,.chd-tabs a,.chd-src-play{transition:none}
  .ce-live[data-state="live"] .ce-live-dot{animation:none}
}