/* KOSOVA TV V3243.1 — DESKTOP OVERLAY CHANNEL DRAWER
   Desktop only. Mobile/PWA remain untouched. */

@media (min-width: 761px){

  #live .player-shell{
    position:relative !important;
  }

  /* Keep the video at full available width */
  #live .player-body,
  #live .player-content{
    position:relative !important;
  }

  #live .video-wrap{
    width:100% !important;
    max-width:none !important;
    border-right:0 !important;
  }

  /* Drawer floats INSIDE the player/video instead of taking layout width */
  #live .player-drawer{
    position:absolute !important;
    z-index:80 !important;
    top:74px !important;
    right:14px !important;
    bottom:78px !important;

    width:min(390px,32vw) !important;
    min-width:330px !important;
    max-width:390px !important;
    height:auto !important;

    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:18px !important;

    background:
      radial-gradient(circle at 50% -10%,rgba(255,35,72,.09),transparent 28%),
      rgba(8,13,20,.965) !important;

    box-shadow:
      0 24px 80px rgba(0,0,0,.56),
      0 0 0 1px rgba(0,0,0,.25) !important;

    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;

    overflow:hidden !important;

    transform:translateX(calc(100% + 34px)) !important;
    opacity:0 !important;
    pointer-events:none !important;
    visibility:hidden !important;

    transition:
      transform .22s ease,
      opacity .18s ease,
      visibility .18s ease !important;
  }

  /* Existing player toggle class opens the overlay */
  #live.drawer-open .player-drawer,
  #live .player-shell.drawer-open .player-drawer,
  #live .player-drawer.open,
  #live .player-drawer.active{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* Premium drawer header */
  #live .player-drawer .drawer-head,
  #live .player-drawer .drawer-header,
  #live .player-drawer .ktv-v3239-drawer-head{
    background:rgba(8,13,20,.985) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  #drawerSearch{
    height:42px !important;
    border-radius:12px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:#101923 !important;
  }

  #drawerList{
    height:100% !important;
    max-height:none !important;
    overflow-y:auto !important;
    padding:9px !important;
    background:transparent !important;
  }

  #drawerList .drawer-channel{
    min-height:60px !important;
    grid-template-columns:44px minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:8px 9px !important;
    margin-bottom:7px !important;
    border-radius:14px !important;
    background:rgba(17,25,35,.92) !important;
    border:1px solid transparent !important;
  }

  #drawerList .drawer-channel:hover{
    transform:translateY(-1px) !important;
    background:#151f2b !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  #drawerList .drawer-channel.active{
    background:
      linear-gradient(90deg,rgba(255,35,72,.20),rgba(17,25,35,.96) 74%) !important;
    border-color:rgba(255,35,72,.52) !important;
    box-shadow:inset 3px 0 0 #ff2348 !important;
  }

  #drawerList .drawer-channel img,
  #drawerList .drawer-fallback{
    width:44px !important;
    height:44px !important;
    border-radius:10px !important;
  }

  /* Dark overlay behind drawer: makes it feel like a real OTT player */
  #live.drawer-open .player-shell::after{
    content:"" !important;
    position:absolute !important;
    inset:62px 0 0 0 !important;
    z-index:70 !important;
    background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.26)) !important;
    pointer-events:none !important;
  }

  /* Drawer stays over overlay */
  #live.drawer-open .player-drawer{
    z-index:90 !important;
  }
}

/* Large desktop: slightly wider drawer */
@media (min-width: 1500px){
  #live .player-drawer{
    width:410px !important;
    max-width:410px !important;
  }
}