/* ============================================================
   FLIX2WATCH V20 — SUPPORT CONSISTENCY / SEARCH / WATCH STATE
   ============================================================ */

/* ---------- Theme dots: guaranteed visible on every page ---------- */
.dropdown-item .dot{
  width:9px !important;
  height:9px !important;
  min-width:9px !important;
  min-height:9px !important;
  display:inline-block !important;
  flex:0 0 9px !important;
  border-radius:50% !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) !important;
}
.dropdown-item .dot.red{background:#e50914 !important}
.dropdown-item .dot.blue{background:#3b82f6 !important}
.dropdown-item .dot.green{background:#10b981 !important}
.dropdown-item .dot.purple{background:#8b5cf6 !important}
.dropdown-item .dot.amber{background:#f59e0b !important}
.dropdown-item .dot.matrix{background:#00ff66 !important}
.dropdown-item .dot.cyan{background:#06b6d4 !important}
.dropdown-item .dot.pink{background:#ec4899 !important}
.dropdown-item .dot.orange{background:#f97316 !important}
.dropdown-item .dot.ice{background:#7dd3fc !important}
.dropdown-item .dot.gold{background:#eab308 !important}
.dropdown-item .dot.midnight{background:#6366f1 !important}

/* ---------- Shared user-search previews ---------- */
body.f2w-main-page > header .user-search-results{
  position:absolute !important;
  top:calc(100% + 7px) !important;
  left:0 !important;
  right:0 !important;
  z-index:100060 !important;
  display:none !important;
  max-height:330px !important;
  overflow:auto !important;
  border:1px solid #2a3e56 !important;
  border-radius:9px !important;
  background:#06101c !important;
  box-shadow:0 18px 50px rgba(0,0,0,.62) !important;
}
body.f2w-main-page > header .user-search-results.show{
  display:block !important;
}
body.f2w-main-page > header .user-search-result{
  width:100% !important;
  min-height:52px !important;
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
  padding:7px 8px !important;
  border:0 !important;
  border-bottom:1px solid #182a3d !important;
  background:transparent !important;
  color:#fff !important;
  text-align:left !important;
  cursor:pointer !important;
}
body.f2w-main-page > header .user-search-result:hover{
  background:#0a1523 !important;
}
body.f2w-main-page > header .user-search-result:last-child{
  border-bottom:0 !important;
}
body.f2w-main-page > header .user-search-avatar{
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  border:1px solid #2a3e56 !important;
  border-radius:50% !important;
  background:#0b1725 !important;
  color:#d7dfe9 !important;
  font-size:.53rem !important;
  font-weight:800 !important;
}
body.f2w-main-page > header img.user-search-avatar{
  object-fit:cover !important;
}
body.f2w-main-page > header .user-search-copy{
  min-width:0 !important;
  display:block !important;
}
body.f2w-main-page > header .user-search-name{
  display:block !important;
  overflow:hidden !important;
  color:#edf2f7 !important;
  font-size:.59rem !important;
  font-weight:760 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.f2w-main-page > header .user-search-sub{
  display:block !important;
  margin-top:2px !important;
  color:#748196 !important;
  font-size:.48rem !important;
}
body.f2w-main-page > header .user-search-empty{
  padding:14px 10px !important;
  color:#7f8da1 !important;
  text-align:center !important;
  font-size:.55rem !important;
}

/* Search Users should visually/semantically remain a lookup field. */
body.f2w-main-page > header #user-search{
  -webkit-appearance:none !important;
  appearance:none !important;
}
body.f2w-main-page > header #user-search:-webkit-autofill,
body.f2w-main-page > header #user-search:-webkit-autofill:hover,
body.f2w-main-page > header #user-search:-webkit-autofill:focus{
  -webkit-text-fill-color:#eef2f7 !important;
  caret-color:#eef2f7 !important;
  -webkit-box-shadow:0 0 0 1000px #07111d inset !important;
  box-shadow:0 0 0 1000px #07111d inset !important;
}

/* ---------- Support page: same compact panel language as Home ---------- */
body.f2w-support-page{
  background:
    radial-gradient(circle at 86% 8%,rgba(var(--f2w-accent-rgb),.05),transparent 25%),
    #020813 !important;
}

body.f2w-support-page main{
  width:min(100% - 28px,1280px) !important;
  max-width:none !important;
  margin:14px auto 54px !important;
  padding:0 !important;
}

body.f2w-support-page .support-v16-hero{
  grid-template-columns:minmax(0,1fr) 210px !important;
  gap:12px !important;
  padding:16px !important;
  border:1px solid #263a53 !important;
  border-radius:9px !important;
  background:
    radial-gradient(circle at 88% 15%,rgba(var(--f2w-accent-rgb),.07),transparent 28%),
    linear-gradient(180deg,#07111d,#06101c) !important;
  box-shadow:0 13px 34px rgba(0,0,0,.22) !important;
}

body.f2w-support-page .support-v16-kicker{
  color:var(--accent) !important;
  font-size:.49rem !important;
  letter-spacing:.7px !important;
}

body.f2w-support-page .support-v16-hero h1{
  margin:4px 0 4px !important;
  font-size:1.12rem !important;
  line-height:1.1 !important;
}

body.f2w-support-page .support-v16-hero p{
  max-width:720px !important;
  color:#8290a4 !important;
  font-size:.59rem !important;
  line-height:1.5 !important;
}

body.f2w-support-page .support-v16-brand{
  min-height:92px !important;
  padding:9px !important;
  border:1px solid #263a53 !important;
  border-radius:8px !important;
  background:#06101c !important;
}

body.f2w-support-page .support-v16-brand img{
  width:175px !important;
  max-width:95% !important;
}

body.f2w-support-page .support-v16-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
  margin-top:9px !important;
}

body.f2w-support-page .support-v16-quick{
  min-height:88px !important;
  padding:11px !important;
  gap:5px !important;
  border:1px solid #263a53 !important;
  border-radius:8px !important;
  background:#07111d !important;
  box-shadow:none !important;
}

body.f2w-support-page .support-v16-quick:hover{
  border-color:color-mix(in srgb,var(--accent) 36%,#465c76) !important;
  background:#091522 !important;
}

body.f2w-support-page .support-v16-quick i{
  color:var(--accent) !important;
  font-size:.82rem !important;
}

body.f2w-support-page .support-v16-quick strong{
  font-size:.64rem !important;
}

body.f2w-support-page .support-v16-quick span{
  color:#748196 !important;
  font-size:.52rem !important;
  line-height:1.4 !important;
}

body.f2w-support-page .support-v16-layout{
  gap:9px !important;
  margin-top:9px !important;
}

body.f2w-support-page .support-v16-card{
  padding:13px !important;
  border:1px solid #263a53 !important;
  border-radius:9px !important;
  background:#07111d !important;
  box-shadow:0 10px 28px rgba(0,0,0,.16) !important;
}

body.f2w-support-page .support-v16-card-head{
  margin-bottom:9px !important;
}

body.f2w-support-page .support-v16-card-head strong{
  font-size:.69rem !important;
}

body.f2w-support-page .support-v16-card-head span{
  font-size:.50rem !important;
}

body.f2w-support-page .support-v16-primary,
body.f2w-support-page .support-v16-secondary{
  min-height:31px !important;
  padding:5px 8px !important;
  border-radius:6px !important;
  font-size:.55rem !important;
}

body.f2w-support-page .support-v16-card input,
body.f2w-support-page .support-v16-card textarea,
body.f2w-support-page .support-v16-card select{
  border:1px solid #2a3e56 !important;
  border-radius:7px !important;
  background:#06101c !important;
  font-size:.61rem !important;
  box-shadow:none !important;
}

body.f2w-support-page .support-v16-card input:focus,
body.f2w-support-page .support-v16-card textarea:focus,
body.f2w-support-page .support-v16-card select:focus{
  outline:none !important;
  border-color:color-mix(in srgb,var(--accent) 58%,#53687f) !important;
  box-shadow:0 0 0 1px rgba(var(--f2w-accent-rgb),.07),0 0 8px rgba(var(--f2w-accent-rgb),.10) !important;
}

/* ---------- Watch: blocked title only on confirmed backend state ---------- */
body.f2w-watch-page #content-block-overlay{
  display:none !important;
}
body.f2w-watch-page.f2w-content-block-confirmed #content-block-overlay.show:not([hidden]){
  display:grid !important;
}

/* Hide playback sources until authentication is confirmed, not merely while loading. */
body.f2w-watch-page:not(.watch-authenticated) #stream-toolbar,
body.f2w-watch-page:not(.watch-authenticated) #tv-controls,
body.f2w-watch-page.watch-locked #stream-toolbar,
body.f2w-watch-page.watch-locked #tv-controls,
body.f2w-watch-page #stream-toolbar[hidden],
body.f2w-watch-page #tv-controls[hidden]{
  display:none !important;
}

@media(max-width:900px){
  body.f2w-support-page .support-v16-hero{
    grid-template-columns:1fr !important;
  }
  body.f2w-support-page .support-v16-brand{
    display:none !important;
  }
}

@media(max-width:700px){
  body.f2w-support-page main{
    width:calc(100% - 20px) !important;
    margin-top:10px !important;
  }

  body.f2w-support-page .support-v16-grid{
    grid-template-columns:1fr !important;
  }
}