/* Wartip V37 — banner-synced ambient background.
   Uses a real <img> layer instead of body pseudo-elements so legacy theme CSS
   cannot suppress it. The same channel banner is enlarged behind the page. */

body.wt-has-cover-backdrop{
  position:relative!important;
  isolation:isolate!important;
  overflow-x:hidden!important;
}

/* The real banner image, enlarged and aligned behind the foreground banner. */
body.wt-has-cover-backdrop>.wt-channel-cover-ambient{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:#000!important;
}
body.wt-has-cover-backdrop>.wt-channel-cover-ambient>img{
  position:absolute!important;
  top:-18px!important;
  left:50%!important;
  width:max(100vw,1600px)!important;
  height:auto!important;
  min-height:0!important;
  max-width:none!important;
  object-fit:contain!important;
  transform:translateX(-50%) scale(1.22)!important;
  transform-origin:center top!important;
  opacity:.52!important;
  filter:saturate(.82) brightness(.62) contrast(1.03) blur(2px)!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.78) 72%,rgba(0,0,0,.22) 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.78) 72%,rgba(0,0,0,.22) 91%,transparent 100%);
}
body.wt-has-cover-backdrop>.wt-channel-cover-ambient::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.34) 34%,rgba(0,0,0,.68) 68%,rgba(0,0,0,.94) 88%,#000 100%),
    radial-gradient(ellipse 90% 50% at 50% 4%,transparent 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.34) 100%);
}

/* All interactive/public content sits above the ambient background. */
body.wt-has-cover-backdrop>.container{
  position:relative!important;
  z-index:2!important;
}
body.wt-has-cover-backdrop>.ws-toast{
  position:fixed;
  z-index:1200!important;
}
body.wt-has-cover-backdrop>.buyer-dialog,
body.wt-has-cover-backdrop>.wi-mobile-slip-dialog{
  z-index:1300!important;
}

/* Slightly transparent surfaces let the backdrop read as one continuous scene. */
html[data-channel-theme="black"] body.wt-has-cover-backdrop #wtPublicView .card,
html[data-channel-theme="black"] body.wt-has-cover-backdrop #wtPublicView .wt-support-info,
html[data-channel-theme="black"] body.wt-has-cover-backdrop .order-layout>.card{
  background:rgba(8,8,8,.88)!important;
  -webkit-backdrop-filter:blur(8px) saturate(.9);
  backdrop-filter:blur(8px) saturate(.9);
}

/* True pure-black base with a recognizable banner above it. */
html[data-channel-theme="black"] body.wt-has-cover-backdrop{
  background:#000!important;
}
html[data-channel-theme="black"] body.wt-has-cover-backdrop>.wt-channel-cover-ambient{
  background:#000!important;
}
html[data-channel-theme="black"] body.wt-has-cover-backdrop>.wt-channel-cover-ambient>img{
  opacity:.56!important;
  filter:saturate(.80) brightness(.58) contrast(1.06) blur(1.5px)!important;
}

/* Pure-white theme uses the same composition as a soft watermark. */
html[data-channel-theme="white"] body.wt-has-cover-backdrop{
  background:#fff!important;
}
html[data-channel-theme="white"] body.wt-has-cover-backdrop>.wt-channel-cover-ambient{
  background:#fff!important;
}
html[data-channel-theme="white"] body.wt-has-cover-backdrop>.wt-channel-cover-ambient>img{
  opacity:.30!important;
  filter:saturate(.60) brightness(1.08) contrast(.92) blur(2px)!important;
}
html[data-channel-theme="white"] body.wt-has-cover-backdrop>.wt-channel-cover-ambient::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.48) 38%,rgba(255,255,255,.78) 70%,rgba(255,255,255,.96) 90%,#fff 100%),
    radial-gradient(ellipse 90% 50% at 50% 4%,transparent 0%,rgba(255,255,255,.10) 55%,rgba(255,255,255,.36) 100%);
}
html[data-channel-theme="white"] body.wt-has-cover-backdrop #wtPublicView .card,
html[data-channel-theme="white"] body.wt-has-cover-backdrop #wtPublicView .wt-support-info,
html[data-channel-theme="white"] body.wt-has-cover-backdrop .order-layout>.card{
  background:rgba(255,255,255,.90)!important;
  -webkit-backdrop-filter:blur(8px) saturate(.85);
  backdrop-filter:blur(8px) saturate(.85);
}

@media(max-width:900px){
  body.wt-has-cover-backdrop>.wt-channel-cover-ambient>img{
    top:0!important;
    width:auto!important;
    height:64vh!important;
    min-width:145vw!important;
    object-fit:cover!important;
    transform:translateX(-50%) scale(1.03)!important;
    opacity:.38!important;
    filter:saturate(.80) brightness(.60) blur(1.5px)!important;
  }
  body.wt-has-cover-backdrop>.wt-channel-cover-ambient::after{
    background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.68) 58%,#000 92%)!important;
  }
  html[data-channel-theme="white"] body.wt-has-cover-backdrop>.wt-channel-cover-ambient::after{
    background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.80) 62%,#fff 94%)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.wt-has-cover-backdrop>.wt-channel-cover-ambient>img{transform:translateX(-50%) scale(1.22)!important}
}