/* ================================================================
   XVB3 — style.css  v5 (Google TV UI - Contained Logos Edition)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');


.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette Colori Google TV (Scuri e immersivi) */
  --bg:         #0f1014; /* Sfondo tipico Google TV */
  --surface:    #1e1f27;
  --surface2:   #282a36;
  --on-bg:      #e8eaed; /* Bianco sporco per non affaticare la vista */
  --on-surface: #9aa0a6; /* Grigio Material */
  
  /* Accenti e Focus */
  --primary:    #d0bcff;
  --focus-ring: #ffffff;

  /* Material You — ruoli dinamici (aggiornati da JS) */
  --md-primary:           #d0bcff;
  --md-on-primary:        #1a0a3a;
  --md-primary-container: #2d1f5a;
  --md-surface-tint:      #6750a4;
  --md-card-bg:           #1e1f27;
  
  /* Font di sistema Android */
  --font-body:  'Google Sans', 'Roboto', sans-serif;
  --font-title: 'Google Sans', 'Product Sans', 'Roboto', sans-serif;
  
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
}

html, body { width:100%; height:100%; background:var(--bg); color:var(--on-bg); overflow:hidden; font-family: var(--font-body); font-size:16px; }
button, a, div[tabindex] { 
  font-family: var(--font-body); font-size:inherit; 
  cursor:pointer; 
  border:none; 
  background:none; 
  color:inherit; 
  outline: none; 
}
img { display:block; }

/* ── Layout ── */
#app {
  display: grid;
  grid-template-columns: 38% 1fr;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ════ HERO ════ */
#hero { position:relative; z-index:2; height:100vh; }

#heroBg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: background-image .6s cubic-bezier(0.2, 0, 0, 1); /* Transizione più morbida */
}

#heroGradient {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    /* 1. Glow Colorato: spostato da "0% 50%" a "5% 35%" per alzarlo e centrarlo dietro l'EPG */
    radial-gradient(ellipse 75% 85% at 5% 35%, var(--glow-bottom-left, rgba(103,80,164,.65)) 0%, transparent 70%),
    
    /* 2. Ombra di profondità: lasciata quasi inalterata per mantenere stacco col fondo */
    radial-gradient(ellipse 45% 55% at 0% 75%, rgba(15,16,20,.45) 0%, transparent 65%),
    
    /* 3. Vignettatura superiore */
    linear-gradient(to bottom,
      rgba(15,16,20,.85) 0%,
      rgba(15,16,20,.4)  14%,
      transparent        28%),
      
    /* 4. Vignettatura inferiore */
    linear-gradient(to top,
      rgba(15,16,20,1)   0%,
      rgba(15,16,20,.95) 18%,
      rgba(15,16,20,.7)  38%,
      rgba(15,16,20,.15) 55%,
      transparent        65%);
}

#heroContent {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 48px 80px;
  gap: 10px;
  z-index: 3;
}

#heroLogo { width:auto; max-width:140px; max-height:60px; object-fit:contain; object-position:left center; margin-bottom:8px; align-self:flex-start; }

#heroMeta { display: none; }

#heroTitle {
  font-family: var(--font-title);
  font-size: 30px; font-weight:800; letter-spacing:-.02em;
  color:#fff; line-height:1.1;
  text-shadow: 0 4px 32px rgba(0,0,0,.8);
}

#heroDesc {
  font-size: 1.05rem; color:var(--on-bg); line-height:1.55;
  max-width: 480px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}

#heroProgressWrap { display:none; }
#heroProgressWrap.visible { display:block; }
#heroProgressTimes {
  display: flex; justify-content: space-between;
  font-family: var(--font-title);
  font-size: .9rem; font-weight: 400;
  color: rgba(255,255,255,.5);
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
#heroProgressBar { width:min(260px,100%); height:4px; background:rgba(255,255,255,.2); border-radius:999px; overflow:hidden; }
#heroFill { height:100%; background: var(--md-primary, #d0bcff); border-radius:999px; width:0%; transition:width .6s ease; }

#heroNext { display:flex; flex-direction:column;  margin-top: 4px; }
.next-item { display:flex; gap:16px; font-size:.95rem; font-family:var(--font-title); }
.next-time { font-weight:700; color:#fff; min-width:40px; font-variant-numeric:tabular-nums; }
.next-title { color: var(--md-primary, #d0bcff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; font-weight:500;}

/* Stream meta badges */
#heroStreamMeta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px; margin-top: 2px;
  min-height: 0;
}
.stream-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 4px;
  background: none;
  border: 1.5px solid rgba(255,255,255,.25);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  font-family: var(--font-title);
}
/* Rating age badges */
.stream-badge.badge-rating { }
.stream-badge.badge-meta { background: none; border-color: transparent; text-transform: lowercase; letter-spacing: 0; color: rgba(255,255,255,.5); }

/* Hero actions row */
#heroActions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px; flex-wrap: wrap;
}

#watchNowBtn {
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
   border: 1.5px solid rgba(255,255,255,.15);
  color: var(--md-primary, #d0bcff);
  border-radius:999px; 
  padding-top:8px;
  padding-bottom: 8px;
  padding-right: 20px;
  padding-left: 10px;
  font-family:var(--font-title);
  font-size:1rem; font-weight:500; letter-spacing:.02em;
  width:fit-content;
  transition: background .2s, border-color .2s;
}
#watchNowBtn:hover {
  background: var(--md-primary, #d0bcff);
  border-color: rgba(255,255,255,.3);
  color: #000;

}

.hero-action-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
}
.hero-action-btn:hover {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.hero-action-btn.is-fav {
  
  color: #ff4444;
}
.hero-action-btn.is-fav:hover { 
  background: ; 
  color:#fff;
}
.hero-action-btn .material-symbols-outlined { font-size: 20px; }

/* ════ CONTENT ════ */
#content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
  position: relative;
  z-index: 3;
}

/* Categorie — wrap con frecce */
#categoriesBar {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
#categoriesBar::-webkit-scrollbar { display:none; }


/* Testo del canale nella Card (quando manca il logo) */
.card-name-fallback {
   display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-color: rgba(208, 188, 255, 0.03);
  color: rgb(208, 188, 255);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-family: var(--font);
  border-radius: 8px; 
  position: absolute;
  inset: 0;
}

/* Testo del canale nell'Hero in alto a sinistra (quando manca il logo) */
#heroLogoText {
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Dà profondità per staccarlo dallo sfondo */
}



/* Channels area spinta in basso */
#channelsArea {
  flex: 1;
  overflow-x: hidden;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  padding-bottom: 48px;
}
#channelsArea::-webkit-scrollbar { display:none; }

.category-section { display:flex; flex-direction:column; gap:8px; }

/* Titolo categoria nascosto */
.category-title { display: none; }

/* ── Card (Stile Google TV Focus) ── */
.card-img-wrap img {
  object-fit: contain;
  max-width: 100%; max-height: 100%;
  object-position: center;
  transition: transform .3s ease, opacity .3s ease;
}

/* ── Skeleton shimmer ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    rgba(255,255,255,.07) 50%,
    var(--surface2) 75%
  ) !important;
  background-size: 800px 100% !important;
  animation: shimmer 1.4s ease-in-out infinite !important;
}
.skeleton img,
.skeleton span { opacity: 0 !important; }

#heroBg.skeleton {
  background-color: var(--surface2) !important;
}

#heroLogo { transition: opacity .3s ease; }

/* Fallback per i loghi */
.card-logo-fallback { max-width:65%; max-height:60%; object-fit:contain; width:auto; height:auto; }
.card-initials { font-size:1.4rem; font-weight:700; color:rgba(255,255,255,.3); }

/* ════ PLAYER OVERLAY ════ */
#playerOverlay {
  position:fixed; inset:0; z-index:9999;
  background:#0a0a0f;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
#playerOverlay.active {
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .3s ease;
}

/* Sfondo player: colore dal logo + logo centrato */
#playerBg {
  position: absolute; inset: 0; z-index: 0;
  background: #0a0a0f;
  transition: background .5s ease;
  display: flex; align-items: center; justify-content: center;
}

#playerBgLogo {
  width: 250px; height: 250px;
  object-fit: contain;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

#videoEl { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
#videoIframe { position:absolute; inset:0; width:100%; height:100%; border:none; display:none; }
#iframeShield { position:absolute; inset:0; z-index:1; display:none; }




/* ── Row wrap con frecce ── */
.row-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: visible;
}

.row-arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  z-index: 2;
  margin: 0 8px;
}
.row-arrow:focus, .row-arrow.active { background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8); }
.row-arrow .material-symbols-outlined { font-size: 24px; }

.channel-row {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 16px;
  overflow-x: scroll;
  overflow-y: visible;
  padding: 14px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.channel-row::-webkit-scrollbar { display:none; }

/* ── Card active border — colore dal logo via --md-primary ── */
.channel-card {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
  outline: none;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.15);
}
.card-img-wrap {
  width: 100%; aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding: 16px;
  border: 1px solid transparent;
  transition: transform .25s cubic-bezier(0.2,0,0,1), box-shadow .25s, border-color .25s;
}
.channel-card.active .card-img-wrap,
.channel-card:focus .card-img-wrap {
  border-color: var(--md-primary, #d0bcff);
  box-shadow: 0 0 0 0.5px var(--md-primary, #d0bcff);
  z-index: 10;
}
.channel-card.active .card-img-wrap img,
.channel-card:focus .card-img-wrap img { transform: none; }

#topbarClock {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 900;
  color: var(--md-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: linear-gradient(to bottom, rgba(15,16,20,.8) 0%, transparent 100%);
}

.topbar-icon-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background .18s, color .18s;
  border: none; cursor: pointer;
  font-size: 17px;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.topbar-icon-btn .material-symbols-outlined { font-size: 20px; }

/* Search — solo icona a destra, si espande al click */
#searchWrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 7px 10px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  transition: background .18s, width .3s cubic-bezier(0.2,0,0,1), padding .3s;
  flex-shrink: 0;
  cursor: pointer;
}
#searchWrap.open {
  width: 220px;
  padding: 7px 14px;
  gap: 8px;
  cursor: default;
  background: rgba(255,255,255,.13);
}
#searchWrap .material-symbols-outlined { font-size: 24px; color: rgba(255,255,255,.7); flex-shrink: 0; }

#searchInput {
  background: none; border: none; outline: none;
  color: #fff; font-family: var(--font-body);
  font-family: var(--font-title);
  font-size: .9rem; width: 0; opacity: 0;
  transition: width .3s, opacity .2s;
  pointer-events: none;
}
#searchWrap.open #searchInput {
  width: 100%; opacity: 1;
  pointer-events: auto;
}
#searchInput::placeholder { color: rgba(255,255,255,.35); }

#topbarCategories {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  justify-content: center;
  gap: 15px;
}

/* Frecce nascoste di default — JS le mostra solo se overflow */
#catPrev,
#catNext {
  display: none;
  flex-shrink: 0;
}

#categoriesBar {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 500px;
}
#categoriesBar::-webkit-scrollbar { display:none; }

.cat-btn {
  flex-shrink: 0;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color:rgba(255,255,255,.6);
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 500;
  transition: all .2s cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,.15);
}
.cat-btn:hover { 
 background: rgba(255,255,255,.25);
 color: #e6f2ff;
}


.cat-btn.active {
 background: rgba(255,255,255,.08);
 border: 1.5px solid rgba(255,255,255,.15);
 color: var(--md-primary); 
 font-weight: 500;
}






/* Settings panel */
#settingsPanel {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15,16,20,.95);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
#settingsPanel.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}
#settingsPanelContent {
  max-width: 600px;
  width: 100%;
  padding: 48px;
  color: #fff;
}
#settingsPanelContent h2 {
  font-family: var(--font-title);
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 24px;
}
/* ════ PLAYER CONTROLS — YouTube style ════ */

:root {
  --chip-active: rgba(208,188,255,.18);
  --on-surface-2: rgba(244,239,244,.78);
  --on-surface-3: rgba(244,239,244,.56);
  --radius-pill: 999px;
}

/* Gradient overlay */
#playerControls {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px 32px 12px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.75) 0%,
    transparent 18%,
    transparent 72%,
    var(--player-bottom-gradient, rgba(0,0,0,.85)) 100%);
  opacity: 0; transition: opacity .25s ease;
}
#playerOverlay.active.show-controls #playerControls { opacity: 1; }

/* TOP */
#playerTop {
  display: flex; align-items: center; gap: 16px;
}
#playerLogoWrap {
  flex-shrink: 0;
  height: 44px;
  display: flex; align-items: center;
}
#playerLogoImg {
  height: 44px; width: auto;
  max-width: 120px;
  object-fit: contain;
}
#playerProgramTitle {
  font-size: 1rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 400px;
}

/* BOTTOM */
#playerBottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 25px;
}

/* Progress bar */
#playerProgressWrap { width: 100%; }
#playerProgressTimes {
  display: flex; justify-content: space-between;
  font-size: .72rem; font-weight: 600;
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px; padding: 0 2px;
}
#playerProgressBar {
  width: 100%; height: 4px;
  background: rgba(255,255,255,.25);
  border-radius: 999px; overflow: hidden; cursor: pointer;
}
#playerProgress {
  height: 100%;
  background: var(--md-primary, #d0bcff);
  border-radius: 999px; width: 0%;
  transition: width .25s;
}
#playerProgress.is-buffer {
  background-color: rgba(255,255,255,.55) !important;
  transition: width 0.25s linear;
}

/* ── Player bar ── */
#playerBar {
  display: flex;
  align-items: center;
  min-height: 64px;
  gap: 10px;
}

/* La pill — solo blur, nessun sfondo */
.yt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.10); 
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 18px;
  padding: 6px 10px;
  min-height: 60px;
}

/* Pill play — solo più larga, tutto il resto identico alle altre pill */
.yt-pill-play{
  justify-content: center;
  background: rgba(255,255,255,.0); 
}

.pbar-btn-play {
  width: 65px; height: 65px;
  background: rgba(255,255,255,.10); 
    backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: none; border-radius: 999px;
  color: var(--md-primary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .14s ease;
  flex-shrink: 0;
}

.pbar-btn-play:hover { background:var(--md-primary) ; color: black;}

.pbar-btn {
  width: 52px; height: 52px;
  border: none; border-radius: 12px;
  background: transparent;
  color: var(--md-primary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .14s ease;
  flex-shrink: 0;
}
.pbar-btn:hover { background: rgba(255,255,255,.10); }
.pbar-btn .material-symbols-outlined {
  font-size: 28px !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Time display */
.pbar-time {
  font-size: 17px; font-weight: 500;
  color: rgba(255,255,255,.85);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 12px 0 6px;
  letter-spacing: .01em;
}

/* Volume */
.volume-container {
  display: inline-flex; align-items: center; gap: 0;
}
.volume-container:hover #volumeSlider,
.volume-container:focus-within #volumeSlider,
.volume-container.open #volumeSlider {
  width: 90px; opacity: 1; margin-left: 6px; pointer-events: auto;
}
#volumeSlider {
  width: 0; opacity: 0; margin-left: 0;
  pointer-events: none;
  height: 4px; -webkit-appearance: none; appearance: none;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  outline: none; cursor: pointer;
  transition: width .2s ease, opacity .16s ease, margin-left .2s ease;
}
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px; height: 16px;
  border-radius: 2px;
  background: #fff; border: 0;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
}
#volumeSlider::-moz-range-thumb {
  width: 3px; height: 16px;
  border-radius: 2px;
  background: #fff; border: 0;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
}

/* Speed */
.pbar-speed {
  font-size: 17px !important;
  font-weight: 600;
  font-family: var(--font-title);
  width: 52px;
  color: rgba(255,255,255,.9);
}
.pbar-speed.is-active { color: #fff; font-weight: 700; }

/* REC */
.pbar-rec {
  width: auto !important;
  padding: 0 10px;
  gap: 5px;
  color: rgba(255,255,255,.7);
}
.pbar-rec .material-symbols-outlined { font-size: 22px !important; }
.pbar-rec #recordTimer {
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pbar-rec.is-recording { color: #ff6b6b; }
.pbar-rec.is-recording .material-symbols-outlined { color: #ff6b6b; }



/* Quality badge */
#qualityBadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 26px; padding: 3px 12px; border-radius: 10px;
  background: rgba(208,188,255,.16);
  font-size: 13px; line-height: 1; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
#qualityBadge.is-loading .material-symbols-outlined { animation: spinLoader 1s linear infinite; }
@keyframes spinLoader { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#qualityBadge[data-q="1080p"] { color: rgba(196,230,255,.9); }
#qualityBadge[data-q="720p"]  { color: rgba(255,237,194,.9); }
#qualityBadge[data-q="480p"]  { color: rgba(255,210,196,.9); }
#qualityBadge[data-q="4k"]    { color: rgba(214,255,241,.92); }
#qualityBadge[data-q="2k"],
#qualityBadge[data-q="1440p"] { color: rgba(206,240,255,.9); }
#qualityBadge[data-q="auto"]  { color: rgba(255,255,255,.84); }
#qualityBadge[data-q="web"]   { color: rgba(255,255,255,.7); }

/* playerClose */
#playerClose {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: #fff; border: none; cursor: pointer;
  transition: background .2s, transform .2s; flex-shrink: 0;
}
#playerClose:hover { background: rgba(255,255,255,.22); transform: scale(1.08); }
#playerClose .material-symbols-outlined { font-size: 22px; }

/* Stile progress buffer */
#playerProgress.is-buffer {
  background-color: rgba(255,255,255,.55) !important;
  transition: width 0.25s linear;
}

/* ── Player status pill — nessun sfondo ── */
.player-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 4px;
}
.player-status-pill[hidden] { display: none; }

/* ── Player status pill — spinner / errore inline ── */
.player-spinner-ring {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2.5px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: playerSpin .8s linear infinite;
}
@keyframes playerSpin { to { transform: rotate(360deg); } }
  position: fixed; top: 18px; right: 18px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(10,10,14,.55); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0,0,0,.28); pointer-events: none;
}
.rec-floating-dot {
  width: 8px; height: 8px; border-radius: 999px; background: #ff6b6b;
}

/* Classi legacy usate altrove — manteniamo stub */
.bottom-bar { display: flex; align-items: center; gap: 12px; }
.pill { display: flex; align-items: center; gap: 4px; }
.btn-icon {
  width: 40px; height: 40px; border: none; border-radius: 999px;
  background: transparent; color: var(--md-primary, #d0bcff);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .16s ease; flex: 0 0 auto;
}
.btn-icon:hover { background: var(--md-primary); color: #000; }
.ctrl-icon { font-size: 24px !important; line-height: 1; }
.info-pill { margin-left: auto; }
.speed-btn { font-size: 13px !important; font-weight: 700; }


/* Record */
.record-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; padding: 0 16px; 
  min-height: 52px; 
  background: rgba(255,255,255,.08); 
  border: 1.5px solid rgba(255,255,255,.15);
  box-shadow: none !important; 
   color: var(--md-primary, #d0bcff);
  border-radius: 999px; 
  backdrop-filter: blur(28px); 
  transition: background .2s ease; 
  cursor: pointer; }

.record-btn:hover { background: var(--md-primary); color:#000; }
.record-btn.is-recording:hover {background: #ff00002e; }
.record-btn:disabled { opacity: .45; }
.record-btn.is-recording { color: #ff6b6b; }
.record-btn.is-recording #recordIcon,
.record-btn.is-recording #recordLabel { color: #ff6b6b; }
.record-btn.is-recording #recordTimer { color: #fff; }
#recordIcon { font-size: 22px; line-height: 1; }
#recordLabel { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
#recordTimer { font-size: 12px; font-weight: 600; }

/* Floating REC badge */
.rec-floating-badge {
  position: fixed; top: 18px; right: 18px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(10,10,14,.55); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0,0,0,.28); pointer-events: none;
}
.rec-floating-dot { width: 8px; height: 8px; border-radius: 999px; background: #ff6b6b; }


/* Stile per la progress bar quando fa da buffer cache (canali senza EPG) */
#playerProgress.is-buffer {
  background-color: rgba(255, 255, 255, 0.7) !important; /* Bianco neutro/semi-trasparente */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  transition: width 0.25s linear; /* Movimento fluido per il buffer */
}