/* KOSOVA TV V3222 — MOBILE LIVE PRO
   Mobile-only public redesign. Desktop/tablet >= 701px unchanged. */

@media (max-width:700px) {
  /* APP SHELL */
  html{scroll-padding-top:70px!important}
  body.ott-body{
    padding-top:calc(62px + var(--safe-top))!important;
    padding-bottom:calc(86px + var(--safe-bottom))!important;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 88% 5%,rgba(217,16,47,.065),transparent 26%),
      var(--bg)!important;
  }

  /* HEADER — compact, app-like */
  .ott-header{
    min-height:calc(62px + var(--safe-top))!important;
    height:calc(62px + var(--safe-top))!important;
    padding:var(--safe-top) 12px 0!important;
    border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent)!important;
    background:color-mix(in srgb,var(--header) 96%,transparent)!important;
    backdrop-filter:blur(26px) saturate(175%)!important;
    box-shadow:0 10px 34px rgba(0,0,0,.16)!important;
  }
  .ott-header-inner{height:62px!important;max-width:100%!important;padding:0!important;gap:8px!important}
  .ott-brand{gap:9px!important;min-width:0!important}
  .ott-logo-wrap{
    width:38px!important;height:38px!important;border-radius:12px!important;
    box-shadow:0 8px 22px rgba(0,0,0,.23)!important;
  }
  .ott-brand-copy b{font-size:13px!important;letter-spacing:-.015em!important;white-space:nowrap!important}
  .ott-brand-copy small{display:block!important;margin-top:3px!important;font-size:7px!important;letter-spacing:.09em!important}
  .ott-head-actions{margin-left:auto!important;gap:6px!important}
  .studio-clock,.lang-control,.pwa-install,.signin,.vip-pass,.account-pill{display:none!important}
  .head-icon,.mobile-menu-btn{
    width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;
    border-radius:12px!important;background:color-mix(in srgb,var(--surface) 92%,transparent)!important;
    border:1px solid var(--line)!important;
  }
  .ott-head-actions [data-ui-theme]{display:none!important}
  .mobile-menu-btn{display:inline-grid!important;place-items:center!important}
  .mobile-menu{
    top:calc(62px + var(--safe-top))!important;left:10px!important;right:10px!important;
    padding:9px!important;border-radius:0 0 18px 18px!important;
    box-shadow:0 18px 50px rgba(0,0,0,.28)!important;
  }
  .mobile-menu a{min-height:44px!important;padding:0 13px!important;border-radius:11px!important;font-size:12px!important}

  /* HERO — cinematic but not oversized */
  .cinema-main{padding-top:10px!important}
  .cinema-hero{
    width:calc(100% - 20px)!important;max-width:none!important;
    min-height:360px!important;margin:0 10px!important;
    border-radius:22px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 24px 60px rgba(0,0,0,.34)!important;
    overflow:hidden!important;
  }
  .cinema-hero .hero-backdrop{
    background-position:64% center!important;
    opacity:.52!important;
    filter:grayscale(.28) saturate(.75) contrast(1.08)!important;
    transform:scale(1.015)!important;
  }
  .hero-overlay{
    background:
      linear-gradient(0deg,rgba(7,8,10,.96) 0%,rgba(7,8,10,.52) 60%,rgba(7,8,10,.22) 100%),
      linear-gradient(90deg,rgba(7,8,10,.96) 0%,rgba(7,8,10,.72) 64%,rgba(7,8,10,.18) 100%)!important;
  }
  .hero-grid{opacity:.055!important}
  .hero-inner{
    min-height:360px!important;padding:34px 20px 24px!important;
    align-items:flex-end!important;grid-template-columns:1fr!important;
  }
  .hero-copy{width:100%!important;max-width:none!important;align-self:end!important}
  .hero-side-card{display:none!important}
  .hero-kicker{font-size:8px!important;letter-spacing:.13em!important}
  .hero-kicker i{width:7px!important;height:7px!important}
  .cinema-hero h1{
    max-width:340px!important;margin:10px 0 9px!important;
    font-size:34px!important;line-height:1.00!important;letter-spacing:-.045em!important;
  }
  .cinema-hero p{
    max-width:350px!important;margin:0!important;font-size:11px!important;
    line-height:1.55!important;color:#c5c9d0!important;
  }
  .hero-meta{margin-top:13px!important;gap:6px!important}
  .hero-meta>span{
    min-height:25px!important;padding:0 8px!important;border-radius:999px!important;
    font-size:7px!important;display:inline-flex!important;align-items:center!important;
    background:rgba(255,255,255,.055)!important;
  }
  .hero-actions{display:grid!important;grid-template-columns:1.08fr .92fr!important;gap:8px!important;margin-top:16px!important}
  .hero-primary,.hero-secondary{
    min-height:44px!important;width:100%!important;padding:0 11px!important;
    border-radius:12px!important;justify-content:center!important;font-size:11px!important;
  }

  /* SECTIONS */
  .cinema-section,.cinema-promo,.vip-banner,.ott-footer,.ott-ad-slot.ad-top,.ott-ad-slot.ad-infeed{
    width:calc(100% - 20px)!important;max-width:none!important;margin-left:10px!important;margin-right:10px!important;
  }
  .cinema-section{margin-top:30px!important;scroll-margin-top:72px!important}
  .section-head{margin-bottom:13px!important;gap:10px!important}
  .section-head>div{min-width:0!important}
  .section-kicker{font-size:8px!important;letter-spacing:.13em!important}
  .section-head h2{margin-top:4px!important;font-size:23px!important;letter-spacing:-.035em!important}
  .section-head p{margin:5px 0 0!important;font-size:10px!important;line-height:1.45!important}
  .section-link{font-size:10px!important;white-space:nowrap!important}
  .section-note{display:none!important}

  /* HORIZONTAL RAILS */
  .media-rail{
    margin-left:-10px!important;margin-right:-10px!important;padding:1px 10px 9px!important;
    grid-auto-columns:62vw!important;gap:11px!important;scroll-padding-left:10px!important;
    scroll-snap-type:x mandatory!important;
  }
  .poster-rail{
    margin-left:-10px!important;margin-right:-10px!important;padding:1px 10px 9px!important;
    grid-auto-columns:43vw!important;gap:11px!important;scroll-padding-left:10px!important;
    scroll-snap-type:x mandatory!important;
  }
  .rail-card,.poster-card{scroll-snap-align:start!important}
  .rail-art,.poster-art,.channel-art{
    border-radius:15px!important;
    box-shadow:0 10px 26px rgba(0,0,0,.10)!important;
  }
  .rail-copy,.poster-copy{padding:8px 2px 0!important}
  .rail-copy b,.poster-copy b{font-size:12px!important}
  .rail-copy span,.poster-copy span{font-size:9px!important}

  /* LIVE LIBRARY — premium mobile */
  .library-head{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .ott-search{
    width:100%!important;min-height:48px!important;height:48px!important;
    margin:0!important;padding:0 14px!important;border-radius:14px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.055)!important;
  }
  .ott-search input{font-size:16px!important}
  .category-tabs{
    margin:0 -10px 12px!important;padding:1px 10px 3px!important;gap:7px!important;
    scroll-padding-left:10px!important;
  }
  .cat-tab,.category-tabs button,.category-tabs a{
    height:38px!important;min-height:38px!important;padding:0 12px!important;
    border-radius:999px!important;font-size:10px!important;flex:0 0 auto!important;
  }
  .channel-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:13px 10px!important;
  }
  .channel-card{min-width:0!important}
  .channel-art{aspect-ratio:16/9!important;border-radius:14px!important}
  .channel-art>.main-logo{padding:16px!important}
  .channel-copy{margin-top:7px!important;padding:0 2px!important;gap:5px!important}
  .channel-copy b{font-size:12px!important;line-height:1.22!important}
  .channel-copy small{font-size:9px!important;margin-top:2px!important}
  .channel-copy em{font-size:7px!important}

  /* TV GUIDE */
  .guide-grid{grid-template-columns:1fr!important;gap:8px!important}
  .guide-card{
    min-height:68px!important;grid-template-columns:48px minmax(0,1fr) 34px!important;
    gap:10px!important;padding:9px 10px!important;border-radius:14px!important;
  }
  .guide-logo{width:48px!important;height:48px!important;border-radius:11px!important}
  .guide-body b{font-size:11px!important}
  .guide-body small,.guide-body>span{font-size:8px!important}
  .guide-play{width:32px!important;height:32px!important}

  /* CINEMA / VIP */
  .cinema-promo{
    min-height:210px!important;margin-top:32px!important;padding:22px!important;
    border-radius:20px!important;
  }
  .cinema-promo h2{max-width:300px!important;font-size:25px!important;line-height:1.04!important}
  .cinema-promo p{font-size:10px!important;line-height:1.5!important}
  .cinema-promo a{min-height:42px!important;border-radius:11px!important}
  .vip-banner{
    margin-top:34px!important;padding:22px!important;border-radius:20px!important;
    grid-template-columns:1fr auto!important;gap:13px!important;
  }
  .vip-banner h2{font-size:23px!important;line-height:1.08!important}
  .vip-banner p{font-size:10px!important;line-height:1.45!important}
  .vip-price{align-self:start!important}
  .vip-price strong{font-size:31px!important}
  .vip-banner>a{grid-column:1/-1!important;width:100%!important;justify-content:center!important;min-height:43px!important}

  /* ADS — visually integrated, no effect on provider runtime */
  .ktv3220-slot,.ott-ad-slot{
    border-radius:16px!important;
  }
  .ktv3220-slot>small,.ott-ad-slot>small{
    font-size:8px!important;letter-spacing:.12em!important;
  }
  .ktv3220-mobile-sticky{
    width:min(340px,calc(100% - 20px))!important;
    bottom:calc(80px + var(--safe-bottom))!important;
    border-radius:16px!important;
  }

  /* FOOTER */
  .ott-footer{
    margin-top:34px!important;margin-bottom:calc(92px + var(--safe-bottom))!important;
    padding:18px 2px!important;display:grid!important;gap:12px!important;
  }
  .ott-footer .ott-logo-wrap{width:34px!important;height:34px!important}
  .ott-footer>div{display:grid!important;gap:3px!important;font-size:9px!important}

  /* BOTTOM DOCK — native-app feel */
  .mobile-dock{
    left:8px!important;right:8px!important;bottom:calc(7px + var(--safe-bottom))!important;
    height:68px!important;padding:5px!important;
    grid-template-columns:repeat(5,1fr)!important;
    border-radius:20px!important;border:1px solid color-mix(in srgb,var(--line) 80%,transparent)!important;
    background:color-mix(in srgb,var(--surface) 91%,transparent)!important;
    backdrop-filter:blur(28px) saturate(180%)!important;
    box-shadow:0 18px 52px rgba(0,0,0,.24)!important;
  }
  .mobile-dock a,.mobile-dock button{
    min-width:0!important;min-height:56px!important;padding:4px 2px!important;
    gap:3px!important;border-radius:15px!important;font-size:8px!important;
    transition:.16s ease!important;
  }
  .mobile-dock .ui-icon{width:20px!important;height:20px!important}
  .mobile-dock .active{
    color:#fff!important;
    background:linear-gradient(145deg,#e21839,#ae0a24)!important;
    box-shadow:0 7px 18px rgba(217,16,47,.22)!important;
  }

  /* GLOBAL SEARCH */
  .global-search-panel{
    padding:calc(8px + var(--safe-top)) 8px calc(8px + var(--safe-bottom))!important;
    align-items:flex-start!important;
  }
  .global-search-box{
    width:100%!important;max-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom))!important;
    padding:15px!important;border-radius:20px!important;
  }
  .global-search-head{margin-bottom:12px!important}
  .global-search-box>input{height:52px!important;min-height:52px!important;border-radius:13px!important;font-size:16px!important}
  .global-result{min-height:60px!important;border-radius:12px!important}

  /* FULLSCREEN PLAYER — phone optimized, player logic unchanged */
  .player-overlay{z-index:2500!important}
  .player-shell{height:100dvh!important;min-height:100dvh!important}
  .player-topbar{
    min-height:56px!important;height:56px!important;flex-basis:56px!important;
    padding:0 8px!important;gap:7px!important;
    padding-top:0!important;
  }
  .player-brand{gap:6px!important}
  .player-brand img{width:32px!important;height:32px!important;border-radius:9px!important}
  .player-brand span{display:none!important}
  .player-top-title{min-width:0!important;gap:6px!important}
  .player-top-title strong{
    max-width:45vw!important;font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  .player-top-title small{display:none!important}
  .now-live{font-size:7px!important;padding:4px 6px!important}
  .player-top-actions{gap:5px!important}
  .player-top-actions button{
    width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;border-radius:11px!important;
  }
  .player-layout{height:calc(100dvh - 56px)!important}
  .player-main{height:100%!important;min-height:0!important}
  .video-wrap{flex:1 1 auto!important;min-height:0!important;background:#000!important}
  .video-wrap video{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
  .player-controlbar{
    flex:0 0 auto!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px))!important;
    background:#0e1014!important;border-top:1px solid rgba(255,255,255,.08)!important;
  }
  .player-actions{
    gap:6px!important;overflow-x:auto!important;padding-bottom:1px!important;scrollbar-width:none!important;
  }
  .player-actions::-webkit-scrollbar{display:none!important}
  .player-actions button,.quality-control{
    min-width:42px!important;width:42px!important;height:42px!important;min-height:42px!important;
    border-radius:11px!important;flex:0 0 auto!important;
  }
  .quality-control{width:72px!important}
  .player-actions button span{display:none!important}
  .epg-strip{grid-template-columns:1fr 1fr!important}
  .epg-strip>div{padding:9px 10px!important}
  .epg-strip b{font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .epg-strip span{font-size:8px!important}
  .player-drawer{
    top:56px!important;width:100vw!important;max-width:100vw!important;
    border-left:0!important;border-radius:0!important;
  }
  .drawer-head{padding:14px!important}
  .drawer-search{padding:10px 12px!important}
  .drawer-search input{font-size:16px!important}
  .drawer-channel{min-height:64px!important;margin:0 8px 7px!important;border-radius:12px!important}
  .source-toast{top:9px!important;right:9px!important;max-width:75%!important}

  /* PWA / network */
  .network-pill{top:calc(70px + var(--safe-top))!important;right:10px!important;font-size:8px!important}
  .pwa-sheet{padding:10px!important;padding-bottom:calc(10px + var(--safe-bottom))!important}
  .pwa-sheet-card{border-radius:22px!important}
}

@media (max-width:390px) {
  .cinema-hero{min-height:340px!important}
  .hero-inner{min-height:340px!important;padding:30px 17px 21px!important}
  .cinema-hero h1{font-size:31px!important;max-width:300px!important}
  .cinema-hero p{font-size:10.5px!important}
  .hero-actions{grid-template-columns:1fr 1fr!important}
  .media-rail{grid-auto-columns:68vw!important}
  .poster-rail{grid-auto-columns:47vw!important}
  .channel-grid{gap:11px 8px!important}
  .channel-copy b{font-size:11px!important}
  .mobile-dock{left:6px!important;right:6px!important}
  .mobile-dock a,.mobile-dock button{font-size:7px!important}
  .player-top-title strong{max-width:40vw!important}
}

@media (max-width:700px) and (orientation:landscape) {
  .cinema-hero{min-height:300px!important}
  .hero-inner{min-height:300px!important}
  .mobile-dock{height:58px!important}
}