/* ============================================================
   FLIX2WATCH V17 — CONSISTENCY / DM / NOTIFICATIONS / AUTH
   ============================================================ */

/* ---------- Exact shared desktop header ---------- */
@media(min-width:821px) and (pointer:fine){
  body.f2w-main-page > header{
    min-height:64px !important;
    height:64px !important;
    padding:8px 20px !important;
    gap:14px !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    background:rgba(2,8,19,.94) !important;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,#273950) !important;
    box-shadow:0 8px 28px rgba(0,0,0,.28) !important;
  }
  body.f2w-main-page > header > .logo{
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.f2w-main-page > header > .logo .logo-image{
    width:205px !important;
    max-width:205px !important;
    height:auto !important;
    margin:0 !important;
  }
  body.f2w-main-page > header > .header-tools{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .f2w-primary-nav{display:flex !important;gap:2px !important}
  .f2w-nav-link,.f2w-nav-button{
    min-height:40px !important;
    height:40px !important;
    padding:8px 10px !important;
    font-size:.72rem !important;
    border-radius:7px !important;
  }
  .f2w-search-pair{
    flex:1 1 360px !important;
    min-width:280px !important;
    gap:8px !important;
  }
  body.f2w-main-page > header .search-bar,
  body.f2w-main-page > header .user-search-bar{
    height:39px !important;
    min-height:39px !important;
    font-size:.72rem !important;
  }
  .f2w-action-cluster{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    margin-left:auto !important;
  }
  body.f2w-main-page > header .tool-btn,
  .f2w-auth-top-btn{
    min-height:39px !important;
    height:39px !important;
    padding:7px 10px !important;
    border-radius:8px !important;
    font-size:.70rem !important;
    white-space:nowrap !important;
  }
}

/* ---------- Exact themed brand asset: no hue/filter recoloring ---------- */
.logo-image,
.f2w-guest-brand img,
.f2w-account-brand img,
.support-v16-brand img,
.staff-page-toolbar .logo img{
  filter:drop-shadow(0 4px 14px var(--accent-glow)) !important;
}

/* ---------- Every primary accent follows theme ---------- */
.f2w-auth-top-btn.signup,
.account-primary,
.hero-btn:not(.secondary),
.watch-login-actions .primary,
.chat-send,
.v17-dm-compose button,
.v17-notification-count,
.report-actions .submit,
.support-v16-primary{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}

/* ---------- Thin focus ring / small glow ---------- */
input,
textarea,
select,
.account-input,
.search-bar,
.user-search-bar{
  border-width:1px !important;
}
input:focus,
textarea:focus,
select:focus,
.account-input:focus,
.search-bar:focus,
.user-search-bar:focus{
  outline:none !important;
  border:1px solid color-mix(in srgb,var(--accent) 62%,#536a85) !important;
  box-shadow:0 0 0 1px rgba(var(--f2w-accent-rgb),.10),0 0 9px rgba(var(--f2w-accent-rgb),.14) !important;
}

/* ---------- Free/auth explanation ---------- */
.v17-free-note{
  margin-top:9px;
  padding:8px 9px;
  border:1px solid color-mix(in srgb,var(--accent) 16%,#263a53);
  border-radius:7px;
  background:#06101c;
  text-align:left;
}
.v17-free-note strong{
  display:flex;
  align-items:center;
  gap:6px;
  color:#e9eef5;
  font-size:.58rem;
}
.v17-free-note strong i{color:var(--accent)}
.v17-free-note span{
  display:block;
  margin-top:3px;
  color:#78869a !important;
  font-size:.53rem !important;
  line-height:1.45;
}

/* ============================================================
   WATCH: PLAYER + BUTTON CONSISTENCY
   ============================================================ */
body.f2w-watch-page{
  font-size:15px !important;
}
body.f2w-watch-page main{
  width:min(100% - 28px,1260px) !important;
  margin:12px auto 44px !important;
  padding:0 !important;
}
body.f2w-watch-page .player-wrapper{
  border:1px solid #263a53 !important;
  border-radius:9px !important;
  background:#07111d !important;
  box-shadow:0 14px 38px rgba(0,0,0,.26) !important;
}
body.f2w-watch-page .player-header-bar{
  min-height:42px !important;
  padding:6px 9px 6px 11px !important;
  gap:8px !important;
  border-bottom:1px solid #22354b !important;
  background:#07111d !important;
}
body.f2w-watch-page .player-header-bar > span{
  font-size:.66rem !important;
}
body.f2w-watch-page .player-header-actions{
  gap:5px !important;
}
body.f2w-watch-page .favorite-current-btn,
body.f2w-watch-page .fallback-trigger-btn,
body.f2w-watch-page #report-playback-btn{
  min-height:27px !important;
  height:27px !important;
  padding:3px 7px !important;
  border:1px solid #2a3d55 !important;
  border-radius:6px !important;
  background:#091421 !important;
  color:#cbd4df !important;
  font-size:.52rem !important;
  font-weight:650 !important;
  box-shadow:none !important;
}
body.f2w-watch-page .favorite-current-btn:hover,
body.f2w-watch-page .fallback-trigger-btn:hover{
  border-color:color-mix(in srgb,var(--accent) 42%,#50647d) !important;
  background:#0c1827 !important;
}
body.f2w-watch-page #flix-player-container{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  aspect-ratio:16/9 !important;
  background:#000 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.f2w-watch-page #video-frame{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:#000 !important;
}
body.f2w-watch-page.watch-locked #video-frame,
body.f2w-watch-page:not(.watch-authenticated) #video-frame{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.f2w-watch-page .watch-login-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:90 !important;
  display:grid !important;
  place-items:center !important;
  padding:16px !important;
  background:rgba(0,0,0,.76) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
}
body.f2w-watch-page .watch-login-overlay[hidden]{display:none !important}
body.f2w-watch-page .watch-login-card{
  width:min(355px,94%) !important;
  padding:15px !important;
  border:1px solid color-mix(in srgb,var(--accent) 26%,#273950) !important;
  border-radius:9px !important;
  background:rgba(7,17,29,.97) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.46),0 0 14px rgba(var(--f2w-accent-rgb),.06) !important;
}
body.f2w-watch-page .watch-login-card .lock-icon{
  width:36px !important;
  height:36px !important;
  margin:0 auto 8px !important;
  border:1px solid color-mix(in srgb,var(--accent) 35%,#263a53) !important;
  border-radius:8px !important;
  background:rgba(var(--f2w-accent-rgb),.07) !important;
  color:var(--accent) !important;
  font-size:.82rem !important;
}
body.f2w-watch-page .watch-login-card h2{
  font-size:.90rem !important;
  margin:0 !important;
}
body.f2w-watch-page .watch-login-card p{
  margin:6px auto 0 !important;
  max-width:320px !important;
  color:#8f9caf !important;
  font-size:.57rem !important;
  line-height:1.48 !important;
}
body.f2w-watch-page .watch-login-actions{
  gap:6px !important;
  margin-top:10px !important;
}
body.f2w-watch-page .watch-login-actions button{
  min-width:0 !important;
  min-height:29px !important;
  height:29px !important;
  padding:4px 8px !important;
  border-radius:6px !important;
  font-size:.54rem !important;
}
body.f2w-watch-page.watch-locked .stream-toolbar,
body.f2w-watch-page.watch-locked .tv-controls,
body.f2w-watch-page:not(.watch-authenticated) .stream-toolbar,
body.f2w-watch-page:not(.watch-authenticated) .tv-controls{
  display:none !important;
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.v17-notification-wrap{position:relative}
.v17-notification-btn{position:relative}
.v17-notification-count{
  min-width:17px;
  height:17px;
  display:inline-grid;
  place-items:center;
  padding:0 4px;
  border-radius:999px;
  font-size:.48rem;
  font-weight:900;
}
.v17-notification-count[hidden]{display:none !important}
.v17-notification-menu{
  position:absolute;
  right:0;
  top:calc(100% + 9px);
  z-index:35000;
  width:min(360px,calc(100vw - 24px));
  max-height:470px;
  overflow:hidden;
  border:1px solid #2b4059;
  border-radius:10px;
  background:#07111d;
  box-shadow:0 24px 70px rgba(0,0,0,.65);
}
.v17-notification-menu[hidden]{display:none !important}
.v17-notification-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 11px;
  border-bottom:1px solid #22354b;
}
.v17-notification-head strong{font-size:.72rem}
.v17-notification-head button{
  min-height:27px;
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:.52rem;
  cursor:pointer;
}
.v17-notification-list{
  max-height:410px;
  overflow:auto;
}
.v17-notification-item{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  padding:9px 10px;
  border:0;
  border-bottom:1px solid #182a3d;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.v17-notification-item:hover{background:#0a1523}
.v17-notification-item.unread{background:rgba(var(--f2w-accent-rgb),.055)}
.v17-notification-icon{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:8px;background:rgba(var(--f2w-accent-rgb),.10);color:var(--accent)
}
.v17-notification-copy strong{
  display:block;font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.v17-notification-copy span{
  display:-webkit-box;margin-top:2px;color:#8491a4;font-size:.54rem;line-height:1.35;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.v17-notification-copy small{display:block;margin-top:3px;color:#617086;font-size:.47rem}
.v17-notification-empty{padding:24px 14px;color:#7b899c;text-align:center;font-size:.59rem}

/* ============================================================
   CHAT HUB + DIRECT MESSAGES
   ============================================================ */
.chat-modal .v17-chat-hub{
  width:min(820px,calc(100vw - 30px)) !important;
  max-width:820px !important;
  height:min(630px,calc(100dvh - 105px)) !important;
  max-height:630px !important;
}
.v17-chat-hub-header{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
}
.v17-chat-mode-tabs{
  display:flex;align-items:center;justify-content:center;gap:5px
}
.v17-chat-mode{
  min-height:30px;padding:4px 8px;border:1px solid #2a3e56;border-radius:6px;
  background:#081321;color:#8f9daf;font-size:.56rem;font-weight:700;cursor:pointer
}
.v17-chat-mode.active{
  border-color:color-mix(in srgb,var(--accent) 55%,#2a3e56);
  background:rgba(var(--f2w-accent-rgb),.10);color:#fff
}
.v17-dm-unread{
  min-width:16px;height:16px;display:inline-grid;place-items:center;margin-left:3px;
  border-radius:999px;background:var(--accent);color:#fff;font-size:.46rem
}
.v17-dm-unread[hidden]{display:none !important}
.v17-chat-mode-panel{
  min-height:0;display:flex;flex-direction:column;flex:1
}
.v17-chat-mode-panel[hidden]{display:none !important}
.v17-dm-panel{
  min-height:0;display:grid;grid-template-columns:255px minmax(0,1fr);flex:1
}
.v17-dm-sidebar{
  min-height:0;display:flex;flex-direction:column;border-right:1px solid #22354b;background:#06101c
}
.v17-dm-security{
  display:flex;gap:8px;padding:9px;border-bottom:1px solid #22354b;background:#07111d
}
.v17-dm-security>i{color:var(--accent);margin-top:2px}
.v17-dm-security strong{display:block;font-size:.57rem}
.v17-dm-security span{display:block;margin-top:2px;color:#718095;font-size:.47rem;line-height:1.35}
.v17-dm-list-head{
  display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border-bottom:1px solid #182a3d
}
.v17-dm-list-head strong{font-size:.59rem}
.v17-dm-list-head button{border:0;background:transparent;color:#8f9daf;cursor:pointer}
.v17-dm-conversations{min-height:0;overflow:auto}
.v17-dm-conversation{
  width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;
  align-items:center;padding:8px;border:0;border-bottom:1px solid #182a3d;
  background:transparent;color:#fff;text-align:left;cursor:pointer
}
.v17-dm-conversation:hover,.v17-dm-conversation.active{background:#0a1523}
.v17-dm-avatar{
  width:38px;height:38px;display:grid;place-items:center;overflow:hidden;
  border:1px solid #2b4059;border-radius:50%;background:#0b1725;font-size:.58rem;font-weight:800
}
.v17-dm-avatar img{width:100%;height:100%;object-fit:cover}
.v17-dm-conversation-copy{min-width:0}
.v17-dm-conversation-copy strong{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.59rem
}
.v17-dm-conversation-copy span{
  display:block;overflow:hidden;margin-top:2px;color:#758399;text-overflow:ellipsis;white-space:nowrap;font-size:.49rem
}
.v17-dm-conversation-meta{text-align:right}
.v17-dm-conversation-meta small{display:block;color:#617086;font-size:.43rem}
.v17-dm-badge{
  min-width:16px;height:16px;display:inline-grid;place-items:center;margin-top:3px;
  border-radius:999px;background:var(--accent);color:#fff;font-size:.44rem
}
.v17-dm-thread{min-width:0;min-height:0;display:flex;flex-direction:column;background:#07111d}
.v17-dm-thread-head{
  min-height:50px;display:flex;align-items:center;padding:8px 11px;border-bottom:1px solid #22354b
}
.v17-dm-thread-head strong{display:block;font-size:.63rem}
.v17-dm-thread-head span{display:block;margin-top:2px;color:#748196;font-size:.49rem}
.v17-dm-messages{
  flex:1;min-height:0;overflow:auto;padding:10px;background:linear-gradient(180deg,#06101c,#07111d)
}
.v17-dm-message{
  position:relative;width:max-content;max-width:78%;margin:6px 0;padding:7px 9px;
  border:1px solid #263a53;border-radius:9px;background:#0a1523
}
.v17-dm-message.mine{
  margin-left:auto;border-color:color-mix(in srgb,var(--accent) 28%,#263a53);
  background:rgba(var(--f2w-accent-rgb),.09)
}
.v17-dm-message div{white-space:pre-wrap;word-break:break-word;color:#dce3ed;font-size:.59rem;line-height:1.45}
.v17-dm-message small{display:block;margin-top:4px;color:#68768a;font-size:.44rem}
.v17-dm-delete{
  position:absolute;top:4px;right:4px;display:none;border:0;background:transparent;color:#8794a7;cursor:pointer
}
.v17-dm-message.mine:hover .v17-dm-delete{display:block}
.v17-dm-compose{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:8px;border-top:1px solid #22354b
}
.v17-dm-compose input{
  min-height:36px;padding:7px 9px;border:1px solid #2a3e56;border-radius:7px;background:#06101c;color:#fff;font-size:.62rem
}
.v17-dm-compose button{
  width:38px;min-height:36px;border:1px solid var(--accent);border-radius:7px;cursor:pointer
}
.v17-dm-empty{padding:24px 12px;color:#748196;text-align:center;font-size:.56rem;line-height:1.45}

/* Profile message button */
.v17-message-profile-btn{
  border-color:#2a3e56 !important;
  background:#0a1523 !important;
  color:#d7dfe9 !important;
  box-shadow:none !important;
}

/* ---------- Mobile ---------- */
@media(max-width:820px), (max-width:1366px) and (pointer:coarse){
  .v17-notification-menu{
    position:fixed;left:10px;right:10px;top:68px;width:auto
  }
  .chat-modal .v17-chat-hub{
    width:calc(100vw - 20px) !important;
    height:min(620px,calc(100svh - 90px)) !important;
    max-height:calc(100svh - 90px) !important;
  }
  .v17-chat-hub-header{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .v17-chat-hub-header>div:first-child{display:none}
  .v17-chat-mode-tabs{justify-content:flex-start}
  .v17-dm-panel{grid-template-columns:1fr}
  .v17-dm-sidebar{max-height:185px;border-right:0;border-bottom:1px solid #22354b}
  .v17-dm-security{display:none}
  body.f2w-watch-page .player-header-actions{
    display:flex !important;flex-wrap:wrap !important;width:100% !important
  }
  body.f2w-watch-page .favorite-current-btn,
  body.f2w-watch-page .fallback-trigger-btn,
  body.f2w-watch-page #report-playback-btn{
    width:auto !important;flex:0 0 auto !important
  }
}


/* V17 uses pre-rendered theme-specific logo assets; defeat all older hue filters. */
html[data-flix2watch-theme] body .logo-image,
html[data-flix2watch-theme] body .f2w-guest-brand img,
html[data-flix2watch-theme] body .f2w-account-brand img,
html[data-flix2watch-theme] body .support-v16-brand img,
html[data-flix2watch-theme] body .staff-page-toolbar .logo img{
  filter:drop-shadow(0 4px 14px var(--accent-glow)) !important;
}


.v17-about-flix2watch{
  margin:14px 0 0;
  padding:14px 15px;
  border:1px solid #22354b;
  border-radius:9px;
  background:#06101c;
}
.v17-about-flix2watch span{
  color:var(--accent);
  font-size:.50rem;
  font-weight:900;
  letter-spacing:.75px;
}
.v17-about-flix2watch h2{
  margin:4px 0 0 !important;
  color:#fff !important;
  font-size:.92rem !important;
}
.v17-about-flix2watch p{
  max-width:980px;
  margin:7px 0 0;
  color:#7f8da1;
  font-size:.59rem;
  line-height:1.55;
}

html[data-flix2watch-theme] body .footer-brand img,
html[data-flix2watch-theme] body img[src*="flix2watch-logo-"]{
  filter:drop-shadow(0 4px 14px var(--accent-glow)) !important;
}