/* STS v5.6.147 - Search box clean alignment fix
   Fixes the header search looking too tall/stacked, keeps the icon button flush,
   and prevents the dropdown box from showing unless results are open. */
:root{
  --sts-search-green:#39ff14;
  --sts-search-purple:#8f2cff;
}

html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .tw-search.sts-nav-search.sts-mock-search,
html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search,
body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 48px!important;
  align-items:center!important;
  align-self:center!important;
  width:clamp(320px,24vw,430px)!important;
  min-width:320px!important;
  max-width:430px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(57,255,20,.72)!important;
  border-radius:2px!important;
  background:linear-gradient(180deg,rgba(18,22,33,.98),rgba(10,13,20,.98))!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.7) inset,0 0 18px rgba(57,255,20,.08)!important;
  overflow:visible!important;
  z-index:100001!important;
  flex:0 0 auto!important;
}

html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-search input,
html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search input,
body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search input{
  display:block!important;
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  line-height:42px!important;
  margin:0!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  color:#f8fafc!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  box-shadow:none!important;
}

html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search input::placeholder,
body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search input::placeholder{
  color:rgba(230,238,247,.62)!important;
  opacity:1!important;
  text-transform:none!important;
}

html body.streamx-v5.twitch-v53 .tw-topbar.sts-glass-nav.sts-mockup-header .sts-mock-search button,
html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search button,
body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search button{
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-left:1px solid rgba(57,255,20,.50)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(8,12,18,.96),rgba(3,5,8,.96))!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer!important;
}

html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search:focus-within,
body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search:focus-within{
  border-color:rgba(57,255,20,.96)!important;
  box-shadow:0 0 0 1px rgba(57,255,20,.18) inset,0 0 22px rgba(57,255,20,.22),0 0 28px rgba(143,44,255,.12)!important;
}

html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search button:hover,
body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search button:hover{
  background:var(--sts-search-green)!important;
  color:#041008!important;
}

/* Never reserve space for search results while closed */
html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search .sts-search-results,
body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search .sts-search-results{
  display:none!important;
  position:absolute!important;
  top:calc(100% + 10px)!important;
  left:0!important;
  right:0!important;
  min-width:100%!important;
  width:100%!important;
  max-width:430px!important;
  padding:8px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#090d14,#05070c)!important;
  border:1px solid rgba(57,255,20,.46)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.72),0 0 28px rgba(57,255,20,.10)!important;
  z-index:100002!important;
}

html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search .sts-search-results.open,
body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search .sts-search-results.open{
  display:block!important;
}

html body.streamx-v5.twitch-v53 .sts-mock-actions,
body.streamx-v5.twitch-v53 .sts-mock-actions{
  align-self:center!important;
}

@media(max-width:1500px){
  html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search,
  body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search{
    width:clamp(280px,24vw,380px)!important;
    min-width:280px!important;
    max-width:380px!important;
  }
}

@media(max-width:1180px){
  html body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search,
  body.streamx-v5.twitch-v53 .tw-search.sts-nav-search.sts-mock-search{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
}