/* ============================================================
   FLIX2WATCH FINAL PUSH V7 — MOBILE + TV RESPONSIVE LAYER
   ============================================================ */

:root{
  --f2w-tap:44px;
}

/* Better keyboard / TV remote focus */
:where(
  button,
  a,
  input,
  select,
  textarea,
  [tabindex]
):focus-visible{
  outline:3px solid var(--accent,#e50914) !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent,#e50914) 18%,transparent) !important;
}

/* Prevent long labels/content from forcing page width. */
.header-tools,
.search-container,
.user-search-container,
.account-card,
.chat-card,
.modal-card,
.profile-card,
.card,
.panel,
.table-wrap,
main{
  min-width:0;
}

img,
video,
iframe{
  max-width:100%;
}

button,
a,
input,
select{
  min-height:var(--f2w-tap);
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
  font-size:max(16px,1em);
}

/* MOBILE */
@media(max-width:820px){
  :root{--f2w-tap:46px}

  body{
    overflow-x:hidden !important;
  }

  .telemetry-bar{
    display:none !important;
  }

  header{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:9px !important;
    padding:10px 12px !important;
  }

  header > .logo{
    grid-column:1;
    grid-row:1;
    align-self:center;
  }

  .logo-image{
    width:78px !important;
    max-width:78px !important;
    height:auto !important;
  }

  .header-tools{
    grid-column:1 / -1 !important;
    grid-row:2;
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  .header-tools > .search-container,
  .header-tools > .user-search-container{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
  }

  .search-bar,
  .search-bar:focus,
  .user-search-bar{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:46px !important;
  }

  .tool-btn,
  .header-tools > button,
  .header-tools .f2w-discover-wrap > .tool-btn,
  .header-tools .dropdown-wrapper > .tool-btn{
    width:100% !important;
    justify-content:center !important;
    padding:10px 9px !important;
    font-size:.76rem !important;
    white-space:normal !important;
    line-height:1.2 !important;
    text-align:center !important;
  }

  .f2w-discover-wrap,
  .dropdown-wrapper{
    min-width:0 !important;
  }

  .f2w-discover-menu,
  .dropdown-menu,
  .user-search-results,
  .watch-search-results{
    max-width:calc(100vw - 24px) !important;
  }

  main{
    width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-banner{
    min-height:320px !important;
    height:52svh !important;
    max-height:520px !important;
    padding:18px !important;
    margin-bottom:20px !important;
    align-items:flex-end !important;
  }

  .hero-content{
    max-width:100% !important;
  }

  .hero-title{
    font-size:clamp(2.2rem,12vw,3.25rem) !important;
    line-height:.95 !important;
  }

  .hero-overview{
    font-size:.84rem !important;
    -webkit-line-clamp:4 !important;
  }

  .filter-tabs{
    width:100% !important;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    padding-bottom:10px !important;
  }

  .filter-tabs .tab-btn{
    scroll-snap-align:start;
    flex:0 0 auto;
  }

  .section-header{
    align-items:flex-start !important;
    gap:9px !important;
    flex-wrap:wrap !important;
  }

  .section-header h2,
  h2{
    font-size:clamp(1.55rem,9vw,2.2rem) !important;
  }

  .movie-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .movie-card{
    border-radius:10px !important;
  }

  .movie-info{
    padding:10px !important;
  }

  .movie-title{
    font-size:.80rem !important;
  }

  .movie-meta{
    gap:5px !important;
    font-size:.69rem !important;
  }

  .staff-collection-row,
  .recent-strip,
  .f2w-shelf-track{
    grid-auto-columns:minmax(125px,44vw) !important;
  }

  /* Full-screen-feeling modals on phones */
  .chat-modal,
  .account-modal,
  .modal-overlay,
  .report-modal{
    padding:0 !important;
    align-items:stretch !important;
  }

  .chat-card,
  .account-card,
  .modal-card,
  .report-card{
    width:100% !important;
    max-width:none !important;
    min-height:100svh !important;
    height:100svh !important;
    max-height:100svh !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    overflow:auto !important;
  }

  .chat-messages{
    min-height:0 !important;
  }

  .chat-input-area{
    position:sticky !important;
    bottom:0 !important;
    padding:max(10px,env(safe-area-inset-bottom)) 10px !important;
  }

  .account-username-change-row,
  .owner-chat-auth-row{
    grid-template-columns:1fr !important;
    display:grid !important;
  }

  .profile-hero,
  .profile-shell,
  .profile-grid,
  .profile-main{
    width:100% !important;
    max-width:100% !important;
  }

  .profile-name-row{
    flex-wrap:wrap !important;
    gap:7px !important;
  }

  .profile-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .profile-action-btn{
    width:100% !important;
    justify-content:center !important;
  }

  .favorites-grid,
  .library-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .player-container,
  #flix-player-container{
    width:calc(100% + 28px) !important;
    max-width:none !important;
    margin-left:-14px !important;
    margin-right:-14px !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
  }

  .server-groups,
  .server-controls,
  .player-controls{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    overscroll-behavior-inline:contain;
  }

  .server-btn{
    flex:0 0 auto !important;
    min-height:44px !important;
  }

  footer{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

/* Very small phones */
@media(max-width:430px){
  .header-tools{
    grid-template-columns:1fr !important;
  }

  .header-tools > *{
    grid-column:1 !important;
  }

  .movie-grid,
  .favorites-grid,
  .library-grid{
    gap:9px !important;
  }

  .movie-info{
    padding:8px !important;
  }

  .movie-title{
    font-size:.74rem !important;
  }

  .profile-actions{
    grid-template-columns:1fr !important;
  }
}

/* TABLET */
@media(min-width:821px) and (max-width:1180px){
  header{
    padding:13px 18px !important;
  }

  .header-tools{
    gap:8px !important;
  }

  .search-bar{
    width:200px !important;
  }

  .movie-grid{
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) !important;
    gap:18px !important;
  }
}

/* TV / LARGE SCREEN */
@media(min-width:1500px){
  :root{--f2w-tap:52px}

  body{
    font-size:18px;
  }

  header{
    padding:20px 42px !important;
  }

  .header-tools{
    gap:14px !important;
  }

  .search-bar{
    width:310px !important;
    font-size:1rem !important;
  }

  .user-search-bar{
    min-width:250px !important;
    font-size:1rem !important;
  }

  .tool-btn{
    padding:12px 17px !important;
    font-size:.92rem !important;
  }

  main{
    max-width:1700px !important;
    padding-left:42px !important;
    padding-right:42px !important;
  }

  .hero-banner{
    height:520px !important;
    padding:50px !important;
  }

  .movie-grid{
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;
    gap:28px !important;
  }

  .chat-card{
    max-width:720px !important;
    height:min(820px,88vh) !important;
  }

  .account-card{
    max-width:620px !important;
  }
}

@media(min-width:1900px){
  body{font-size:20px}
  main{max-width:1850px !important}
  .movie-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) !important}
}


/* Skip off-screen layout/paint work until the user scrolls near it. */
main > section,
.f2w-extra-section,
.staff-collection-block,
.recently-viewed-section,
.faq-section{
  content-visibility:auto;
  contain-intrinsic-size:1px 620px;
}

/* The hero and first visible Staff collection should paint immediately. */
.hero-banner,
.staff-curated-top-wrap,
main > section:first-child{
  content-visibility:visible;
  contain-intrinsic-size:auto;
}

button,a,.tool-btn,.tab-btn,.server-btn,.profile-action-btn{
  touch-action:manipulation;
}