/* ============================================================
   KOSOVA TV V3302 — PLAYER + PWA + ADS PRO
   One final player UI layer.
   Playback logic remains in player-v3100.js?v=3237.
   ============================================================ */

:root{
  --k2-bg:#03060b;
  --k2-panel:#09111a;
  --k2-panel2:#0f1722;
  --k2-panel3:#121d29;
  --k2-line:rgba(255,255,255,.085);
  --k2-line2:rgba(255,255,255,.14);
  --k2-text:#f7f9fc;
  --k2-muted:#8e9aa9;
  --k2-red:#ff2348;
  --k2-red2:#d91539;
  --k2-redsoft:rgba(255,35,72,.16);
  --k2-shadow:0 30px 100px rgba(0,0,0,.56);
}

/* PLAYER ROOT */
#live{
  background:rgba(1,4,8,.96)!important;
  padding:12px!important;
}

#live .player-shell{
  position:relative!important;
  width:min(1500px,calc(100vw - 24px))!important;
  height:min(900px,calc(100dvh - 24px))!important;
  margin:auto!important;
  border:1px solid var(--k2-line2)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#060a10,#04070b)!important;
  box-shadow:var(--k2-shadow)!important;
}

/* TOP BAR */
#live .player-topbar{
  min-height:62px!important;
  padding:0 14px!important;
  border-bottom:1px solid var(--k2-line)!important;
  background:rgba(6,10,16,.98)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}

#live .player-brand img{
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
  object-fit:contain!important;
}

#live .player-brand b,
#live .player-top-title strong{
  color:var(--k2-text)!important;
}

#live .player-brand small,
#live .player-top-title small{
  color:var(--k2-muted)!important;
}

#live .now-live{
  border-radius:8px!important;
  background:linear-gradient(135deg,var(--k2-red),var(--k2-red2))!important;
  box-shadow:0 8px 22px rgba(255,35,72,.22)!important;
}

#live .player-top-actions button{
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  border:1px solid var(--k2-line2)!important;
  background:#0e151f!important;
}

/* MAIN LAYOUT: video always takes full player width */
#live .player-layout{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:calc(100% - 62px)!important;
  min-height:0!important;
}

#live .player-main{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}

#live .video-wrap{
  position:relative!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  background:#000!important;
  overflow:hidden!important;
}

#live video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#000!important;
}

/* EMPTY / LOADING */
#live .player-empty{
  background:
    radial-gradient(circle at 50% 40%,rgba(255,35,72,.08),transparent 28%),
    #030609!important;
}

#live .player-empty .empty-mark{
  width:58px!important;
  height:58px!important;
  border-radius:18px!important;
  display:grid!important;
  place-items:center!important;
  background:#101923!important;
  border:1px solid var(--k2-line2)!important;
}

#live .player-loading{
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}

/* CONTROLS */
#live .player-controlbar{
  flex:0 0 auto!important;
  min-height:58px!important;
  padding:8px 10px!important;
  border-top:1px solid var(--k2-line)!important;
  background:#071019!important;
}

#live .player-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
#live .player-actions::-webkit-scrollbar{display:none!important}

#live .player-actions button,
#live .quality-control{
  flex:0 0 auto!important;
  min-height:38px!important;
  border-radius:11px!important;
  border:1px solid var(--k2-line2)!important;
  background:#0f1721!important;
  color:#fff!important;
}

#live .player-actions button:hover{
  background:#151f2b!important;
  border-color:rgba(255,255,255,.2)!important;
}

#live .player-actions button svg,
#live .player-top-actions button svg{
  width:17px!important;
  height:17px!important;
}

/* EPG */
#live .epg-strip{
  flex:0 0 auto!important;
  background:#09111a!important;
  border-top:1px solid var(--k2-line)!important;
}

/* ADS INSIDE PLAYER */
#live .ima-ad-container{
  position:absolute!important;
  inset:0!important;
  z-index:35!important;
}

#live .ad-companion{
  flex:0 0 auto!important;
  border-top:1px solid var(--k2-line)!important;
  background:#080d13!important;
}

#live .ott-ad-slot{
  overflow:hidden!important;
}

#live .ott-ad-slot iframe{
  display:block!important;
  width:100%!important;
  border:0!important;
}

/* ============================================================
   DESKTOP / TABLET DRAWER OVERLAY
   ============================================================ */
@media (min-width:761px){

  #live .player-drawer{
    position:absolute!important;
    z-index:90!important;
    top:12px!important;
    right:12px!important;
    bottom:12px!important;

    width:min(400px,34vw)!important;
    min-width:340px!important;
    max-width:400px!important;
    height:auto!important;

    display:flex!important;
    flex-direction:column!important;

    border:1px solid var(--k2-line2)!important;
    border-radius:18px!important;
    background:
      radial-gradient(circle at 50% -10%,rgba(255,35,72,.09),transparent 28%),
      rgba(8,13,20,.975)!important;

    box-shadow:0 24px 80px rgba(0,0,0,.58)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;

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

    transition:
      transform .22s cubic-bezier(.2,.75,.2,1),
      opacity .18s ease,
      visibility .18s ease!important;
  }

  #live.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;
  }

  #live.drawer-open .player-shell::after{
    content:""!important;
    position:absolute!important;
    inset:62px 0 0!important;
    z-index:70!important;
    background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.34))!important;
    pointer-events:none!important;
  }

  #live.drawer-open .player-drawer{
    z-index:100!important;
  }
}

/* DRAWER COMMON */
#live .drawer-head{
  flex:0 0 auto!important;
  padding:12px 12px 10px!important;
  border-bottom:1px solid var(--k2-line)!important;
  background:rgba(7,12,18,.98)!important;
}

#live .drawer-head h3{
  margin:2px 0 0!important;
  font-size:17px!important;
  color:#fff!important;
}

#live .drawer-head button{
  width:36px!important;
  height:36px!important;
  border-radius:11px!important;
  border:1px solid var(--k2-line2)!important;
  background:#101923!important;
}

#live .drawer-search{
  flex:0 0 auto!important;
  margin:10px!important;
  border:1px solid var(--k2-line2)!important;
  border-radius:13px!important;
  background:#0f1823!important;
}

#live .drawer-search input,
#drawerSearch{
  height:42px!important;
  color:#fff!important;
  background:transparent!important;
}

#live .drawer-list,
#drawerList{
  flex:1 1 auto!important;
  min-height:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:0 9px 12px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.18) transparent!important;
}

#drawerList .drawer-channel{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;

  min-height:62px!important;
  width:100%!important;
  margin:0 0 7px!important;
  padding:8px 9px!important;

  border-radius:14px!important;
  border:1px solid transparent!important;
  background:#101923!important;
  color:#fff!important;

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease!important;
}

#drawerList .drawer-channel:hover{
  transform:translateY(-1px)!important;
  background:#151f2b!important;
  border-color:var(--k2-line2)!important;
}

#drawerList .drawer-channel.active{
  background:
    linear-gradient(90deg,rgba(255,35,72,.20),#121a24 74%)!important;
  border-color:rgba(255,35,72,.55)!important;
  box-shadow:inset 3px 0 0 var(--k2-red)!important;
}

#drawerList .drawer-channel img,
#drawerList .drawer-fallback{
  width:46px!important;
  height:46px!important;
  border-radius:11px!important;
  object-fit:contain!important;
  background:#f2f4f7!important;
}

#drawerList .drawer-channel b{
  font-size:12px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#drawerList .drawer-channel small{
  color:var(--k2-muted)!important;
  font-size:9px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* ============================================================
   MOBILE + PWA
   ============================================================ */
@media (max-width:760px){

  html,body{
    background:#02050a!important;
  }

  #live{
    padding:0!important;
  }

  #live .player-shell{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  #live .player-topbar{
    min-height:56px!important;
    padding:
      max(6px,env(safe-area-inset-top))
      10px
      6px!important;
  }

  #live .player-brand small{
    display:none!important;
  }

  #live .player-top-title{
    min-width:0!important;
  }

  #live .player-top-title strong{
    max-width:42vw!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  #live .player-layout{
    height:calc(100% - 56px)!important;
  }

  #live .video-wrap{
    flex:0 0 auto!important;
    height:auto!important;
  }

  #live video{
    width:100%!important;
    height:auto!important;
    max-height:34dvh!important;
    aspect-ratio:16/9!important;
    object-fit:contain!important;
  }

  #live .player-controlbar{
    min-height:54px!important;
    padding:7px 8px!important;
  }

  #live .player-actions button span,
  #live .quality-control>span{
    display:none!important;
  }

  #live .player-actions button{
    min-width:40px!important;
    min-height:40px!important;
    padding:0 10px!important;
  }

  #live .quality-control{
    min-width:74px!important;
    padding:0 9px!important;
  }

  /* true app-like bottom sheet */
  #live .player-drawer{
    position:absolute!important;
    z-index:110!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    top:auto!important;

    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:min(76dvh,720px)!important;

    display:flex!important;
    flex-direction:column!important;

    border:1px solid var(--k2-line2)!important;
    border-radius:24px!important;

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

    box-shadow:
      0 -20px 70px rgba(0,0,0,.56),
      0 24px 80px rgba(0,0,0,.42)!important;

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

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

    transition:
      transform .24s cubic-bezier(.2,.75,.2,1),
      opacity .18s ease,
      visibility .18s ease!important;
  }

  #live .player-drawer::before{
    content:""!important;
    flex:0 0 auto!important;
    width:46px!important;
    height:4px!important;
    margin:8px auto 2px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.25)!important;
  }

  #live.drawer-open .player-drawer,
  #live .player-drawer.open,
  #live .player-drawer.active{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  #live.drawer-open .player-shell::after{
    content:""!important;
    position:absolute!important;
    inset:56px 0 0!important;
    z-index:100!important;
    background:rgba(0,0,0,.44)!important;
    backdrop-filter:blur(1px)!important;
    -webkit-backdrop-filter:blur(1px)!important;
    pointer-events:none!important;
  }

  #live.drawer-open .player-drawer{
    z-index:120!important;
  }

  #live .drawer-head{
    padding:7px 10px 9px!important;
  }

  #live .drawer-search{
    margin:8px 10px!important;
  }

  #drawerList{
    padding:
      0 8px
      calc(14px + env(safe-area-inset-bottom))!important;
    scrollbar-width:none!important;
  }
  #drawerList::-webkit-scrollbar{display:none!important}

  #drawerList .drawer-channel{
    grid-template-columns:42px minmax(0,1fr) auto!important;
    min-height:58px!important;
    gap:9px!important;
    padding:7px 8px!important;
    border-radius:13px!important;
  }

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

  #live .epg-strip{
    max-height:86px!important;
    overflow:auto!important;
  }

  /* PWA safer bottom spacing */
  html.ktv-v3302-standalone #live .player-controlbar{
    padding-bottom:max(7px,env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:420px){
  #live video{
    max-height:31dvh!important;
  }

  #live .player-drawer{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    height:79dvh!important;
    border-radius:22px!important;
  }
}