/* Wartip public donation — Midnight / airy glass UI.
   Presentation only. Scoped to this public page; no changes to checkout or Dashboard.
   Load AFTER all public CSS and wartip_payment_ui.css. */
:root.wt-donate-night {
  color-scheme: dark;
  --bg:#0c0915;--card:rgba(19,15,31,.66);--field:rgba(39,30,57,.67);
  --line:rgba(188,145,255,.15);--primary:#a66aff;--primary2:#c79bff;
  --muted:#b8accf;--text:#f8f5ff;
  --wi-muted:#b8accf;--wi-border:rgba(197,151,255,.23);
  --public-shadow:none;
}
html.wt-donate-night{background:#090711!important;color-scheme:dark}
html.wt-donate-night body{
  color:#f5f1ff!important; background-color:#090711!important;
  background-image:radial-gradient(ellipse 75vw 70vh at 95% 8%,rgba(102,36,169,.23),transparent 74%),
    radial-gradient(ellipse 56vw 70vh at -8% 63%,rgba(112,32,182,.24),transparent 76%),
    radial-gradient(ellipse 78vw 60vh at 48% 110%,rgba(54,25,115,.29),transparent 78%),
    linear-gradient(132deg,#090711 0%,#120c1e 53%,#080710 100%)!important;
  background-attachment:fixed!important;background-size:auto!important;background-repeat:no-repeat!important;
  font-synthesis:none;min-height:100vh;isolation:isolate;
}
/* Dim light pools move slowly behind content; never interfere with controls. */
html.wt-donate-night body::before,
html.wt-donate-night body::after{
  content:"";pointer-events:none;position:fixed;inset:-26%;z-index:0;
  width:auto;height:auto;opacity:.32;transform:translate3d(0,0,0);
  background-image:radial-gradient(ellipse 31% 19% at 76% 36%,rgba(145,65,243,.30),transparent 74%),
    radial-gradient(ellipse 27% 17% at 21% 77%,rgba(100,35,203,.23),transparent 80%);
  background-size:100% 100%;animation:wt-night-drift 28s ease-in-out infinite alternate;
}
html.wt-donate-night body::after{
  opacity:.18;filter:blur(24px);animation-duration:36s;animation-direction:alternate-reverse;
  background-image:linear-gradient(112deg,transparent 22%,rgba(139,66,219,.18) 43%,transparent 59%);
}
@keyframes wt-night-drift{0%{transform:translate3d(-1.2%,0,0)}100%{transform:translate3d(1.4%,-1.6%,0)}}
html.wt-donate-night body>.container{position:relative;z-index:1}
/* Floating header with no enclosing white bar. Keep original logo legible. */
html.wt-donate-night body>.container>header.top{
  background:rgba(12,9,21,.76)!important; border:0!important;border-bottom:1px solid rgba(196,155,255,.12)!important;
  box-shadow:none!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}
html.wt-donate-night body>.container>header.top .logo{
  background:rgba(251,248,255,.95)!important;border:0!important;border-radius:13px!important;
  padding:4px 9px!important;box-shadow:0 3px 16px #0004!important;
}
html.wt-donate-night body>.container>header.top .home-link{
  background:rgba(57,35,85,.30)!important;color:#f2e7ff!important;
  border:1px solid rgba(177,128,247,.32)!important;box-shadow:none!important;
  backdrop-filter:blur(9px);
}
html.wt-donate-night body>.container>header.top .home-link:hover{background:rgba(117,57,193,.31)!important;color:#fff!important}
/* Use the streamer's OWN cover/avatar; place dark-tinted overlay only. */
html.wt-donate-night body>.container>.cover{
  border:0!important;box-shadow:0 16px 52px rgba(0,0,0,.20)!important;
  border-radius:23px!important;overflow:hidden;
}
html.wt-donate-night body>.container>.cover::after{background:linear-gradient(180deg,rgba(8,5,15,.02),rgba(9,5,20,.12) 28%,rgba(9,6,18,.89))!important}
html.wt-donate-night body>.container>.cover .channel h1{color:white!important}
html.wt-donate-night body>.container>.tabs{
  background:rgba(25,19,38,.38)!important;border:0!important;border-radius:16px!important;
  box-shadow:none!important;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  padding:6px!important;
}
html.wt-donate-night body>.container>.tabs a{color:#bcb0d1!important;border:0!important;border-radius:11px!important;box-shadow:none!important}
html.wt-donate-night body>.container>.tabs a:hover{background:rgba(143,80,223,.17)!important;color:#fff!important}
html.wt-donate-night body>.container>.tabs a.active,
html.wt-donate-night body>.container>.tabs a[aria-current="page"]{
  background:linear-gradient(115deg,rgba(112,45,204,.72),rgba(92,30,155,.64))!important;
  color:#fff!important;border:0!important;box-shadow:0 4px 18px rgba(107,38,210,.18)!important;
}
/* A donation panel that floats on the background, not a white box with a frame. */
html.wt-donate-night .layout:has(#donationForm){width:min(100%,850px);max-width:850px;margin:30px auto 62px}
html.wt-donate-night .layout:has(#donationForm)>.support-card{
  background:rgba(21,16,34,.46)!important;border:0!important;
  border-radius:30px!important;box-shadow:0 24px 75px rgba(0,0,0,.17)!important;
  backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);
  padding:clamp(20px,4vw,40px)!important;color:#f7f3ff!important;
}
html.wt-donate-night .layout:has(#donationForm)>.support-side{display:none!important}
html.wt-donate-night .support-intro,
html.wt-donate-night #donationForm .support-intro{border-color:rgba(181,141,241,.14)!important}
html.wt-donate-night .support-intro .icon,
html.wt-donate-night .support-heading .icon{
  background:rgba(132,67,221,.19)!important;color:#ca96ff!important;border:0!important;
  width:47px;height:47px;border-radius:15px;
}
html.wt-donate-night .support-intro .kicker{color:#c692ff!important;letter-spacing:.075em}
html.wt-donate-night .support-intro h2{color:#fff!important;font-size:clamp(24px,3vw,33px)!important;line-height:1.25}
html.wt-donate-night .support-intro .muted{color:#bfb4d1!important;font-size:clamp(13px,1.4vw,15px)}
html.wt-donate-night #donationForm{color:#f8f5ff!important;--wi-muted:#b7abcd;--wi-border:rgba(175,124,236,.19)}
html.wt-donate-night #donationForm .checkout-progress{margin:20px 0 16px}
html.wt-donate-night #donationForm .checkout-progress>i{background:rgba(179,133,233,.24)!important}
html.wt-donate-night #donationForm .checkout-progress-item{color:#aa9bbf!important}
html.wt-donate-night #donationForm .checkout-progress-item.active,
html.wt-donate-night #donationForm .checkout-progress-item.done{color:#e0c2ff!important}
html.wt-donate-night #donationForm .checkout-progress-item span{
  background:rgba(62,47,82,.82)!important;color:#c9b7e1!important;border:1px solid rgba(186,143,246,.18);
}
html.wt-donate-night #donationForm .checkout-progress-item.active span{
  color:#fff!important;border-color:transparent!important;background:linear-gradient(145deg,#b76aff,#6c25dc)!important;
  box-shadow:0 4px 17px rgba(130,56,221,.31)!important;
}
html.wt-donate-night #donationForm .checkout-progress-item.done span{color:#d9baff!important;background:rgba(122,56,201,.24)!important}
html.wt-donate-night #donationForm .wi-step-eyebrow{color:#ce9dff!important;background:rgba(128,62,197,.16)!important;border:0!important}
html.wt-donate-night #donationForm .field label{color:#f5efff!important;font-size:15px;font-weight:600}
html.wt-donate-night #donationForm .hint,
html.wt-donate-night #donationForm .wi-method-sub,
html.wt-donate-night #donationForm .wi-pay-sub,
html.wt-donate-night #donationForm .wpay-payment-tip,
html.wt-donate-night #donationForm .wi-security,
html.wt-donate-night #donationForm .wi-receiver .muted{color:#b1a4c4!important}
html.wt-donate-night #donationForm .input,
html.wt-donate-night #donationForm textarea,
html.wt-donate-night #donationForm input:not([type="radio"]):not([type="file"]):not([type="checkbox"]),
html.wt-donate-night #donationForm .wpay-mobile-link input{
  background:rgba(39,31,56,.58)!important;border:1px solid rgba(183,142,241,.20)!important;
  color:#fff!important;border-radius:15px!important;box-shadow:none!important;
  font-size:16px;min-height:51px;
}
html.wt-donate-night #donationForm textarea{min-height:105px;resize:vertical}
html.wt-donate-night #donationForm input::placeholder,
html.wt-donate-night #donationForm textarea::placeholder{color:#9486a9!important;opacity:1}
html.wt-donate-night #donationForm .input:focus,
html.wt-donate-night #donationForm textarea:focus,
html.wt-donate-night #donationForm input:focus-visible{
  border-color:#b376ff!important;outline:none!important;box-shadow:0 0 0 3px rgba(145,81,235,.22)!important;
}
html.wt-donate-night #donationForm .amounts{gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
html.wt-donate-night #donationForm .amounts button,
html.wt-donate-night #donationForm .wi-method-back,
html.wt-donate-night #donationForm .wi-text-button,
html.wt-donate-night #donationForm .bank-copy{
  color:#eee4ff!important;background:rgba(68,47,94,.34)!important;
  border:1px solid rgba(180,134,243,.23)!important;border-radius:12px!important;box-shadow:none!important;
}
html.wt-donate-night #donationForm .amounts button{min-height:44px;font-size:15px;font-weight:600}
html.wt-donate-night #donationForm .amounts button:hover,
html.wt-donate-night #donationForm .amounts button.chosen{
  background:rgba(125,64,213,.4)!important;color:#fff!important;border-color:#a76aff!important;
}
html.wt-donate-night #donationForm .btn-primary,
html.wt-donate-night #donationForm .wi-pay-start,
html.wt-donate-night #donationForm #donateContinue{
  color:#fff!important;border:0!important;background:linear-gradient(112deg,#8e3fe9,#7129d2 54%,#9f50ec)!important;
  border-radius:14px!important;box-shadow:0 6px 25px rgba(114,46,204,.24)!important;
  min-height:51px;font-size:16px;font-weight:650;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
@media(hover:hover){html.wt-donate-night #donationForm .btn-primary:hover,
 html.wt-donate-night #donationForm .wi-pay-start:hover{
  box-shadow:0 8px 29px rgba(142,63,233,.36)!important;transform:translateY(-1px);
}}
/* Stage 2: see each payment method clearly without solid boxes. */
html.wt-donate-night #donationForm .wi-method-stage h3,
html.wt-donate-night #donationForm .wi-pay-head h3{color:#fff!important}
html.wt-donate-night #donationForm .wi-pick-method legend{color:#e4d5f5!important}
html.wt-donate-night #donationForm .wi-method-total,
html.wt-donate-night #donationForm .wi-summary{
  color:#fff!important;background:rgba(55,37,81,.34)!important;
  border:0!important;border-radius:17px!important;box-shadow:none!important;
}
html.wt-donate-night #donationForm .wi-method-total strong,
html.wt-donate-night #donationForm .wi-summary strong{color:#c087ff!important}
html.wt-donate-night #donationForm .wi-method-total small,
html.wt-donate-night #donationForm .wi-summary small{color:#bcaed0!important}
html.wt-donate-night #donationForm .wi-method-stage .wi-method{
  color:#f7efff!important;background:rgba(42,29,63,.55)!important;
  border:1px solid rgba(179,128,246,.19)!important;border-radius:16px!important;
  box-shadow:none!important;transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
html.wt-donate-night #donationForm .wi-method-stage .wi-method:has(input:checked){
  background:rgba(103,50,179,.25)!important;border-color:rgba(187,117,255,.7)!important;
  box-shadow:0 0 0 2px rgba(147,80,235,.10)!important;
}
html.wt-donate-night #donationForm .wi-method-icon{background:rgba(129,63,226,.20)!important;color:#d3a0ff!important}
html.wt-donate-night #donationForm .wi-method-check{color:#ba86ff!important}
html.wt-donate-night #donationForm .wi-method-back{width:100%;padding:11px;font-size:14px}
/* Stage 3: dark glass around QR (QR itself remains white for reliable scanning). */
html.wt-donate-night #donationForm .wi-receiver .wpay-payment-detail,
html.wt-donate-night #donationForm .wi-slip-side .slip-picker{
  color:#f3eeff!important;background:rgba(45,31,66,.42)!important;
  border:1px solid rgba(186,141,249,.20)!important;box-shadow:none!important;
}
html.wt-donate-night #donationForm .wi-receiver .wpay-section-title{color:#f4ebff!important}
html.wt-donate-night #donationForm .wi-receiver strong{color:#fff!important}
html.wt-donate-night #donationForm .wi-timer{
  color:#ffdcaa!important;background:rgba(90,55,24,.23)!important;
  border:1px solid rgba(238,175,94,.25)!important;
}
html.wt-donate-night #donationForm .wi-timer>span,
html.wt-donate-night #donationForm .wi-timer strong{color:#ffdcaa!important}
html.wt-donate-night #donationForm .wi-cancel-btn{
  color:#f6bed0!important;background:rgba(104,45,75,.24)!important;border:1px solid rgba(237,142,166,.26)!important;
}
html.wt-donate-night #donationForm .wi-slip-side .slip-picker strong,
html.wt-donate-night #donationForm .wpay-mobile-open b{color:#f8f1ff!important}
html.wt-donate-night #donationForm .wi-slip-side .slip-picker small,
html.wt-donate-night #donationForm .wpay-mobile-open small{color:#b4a5c8!important}
html.wt-donate-night #donationForm .wpay-mobile-open{
  color:#fff!important;background:rgba(73,43,106,.30)!important;border:1px solid rgba(181,130,248,.25)!important;
}
html.wt-donate-night #donationForm .wpay-mobile-open>i:first-child,
html.wt-donate-night #donationForm .slip-picker-icon{color:#cf9cff!important;background:rgba(112,53,184,.19)!important}
html.wt-donate-night #donationForm .wpay-mobile-pair{background:rgba(53,32,78,.66)!important;color:#fff!important;border:1px solid rgba(183,141,247,.22)!important}
html.wt-donate-night #donationForm .wpay-mobile-pair .wpay-section-title{color:#fff!important}
html.wt-donate-night #donationForm .wi-confirm,
html.wt-donate-night #donationForm .wi-finish{
  background:rgba(57,39,81,.30)!important;border:0!important;
  color:#fff!important;box-shadow:none!important;
}
html.wt-donate-night #donationForm .wi-confirm h3,
html.wt-donate-night #donationForm .wi-finish h3{color:#fff!important}
html.wt-donate-night #donationForm .wi-confirm p,
html.wt-donate-night #donationForm .wi-finish p{color:#c0b2d0!important}
html.wt-donate-night #donationForm .wi-danger-btn{background:#a43966!important;color:#fff!important;border:0!important}
html.wt-donate-night .wpay-success-card,
html.wt-donate-night .buyer-dialog-inner{background:#241b34!important;color:#fff!important;border-color:rgba(183,136,248,.28)!important}
html.wt-donate-night .note{background:rgba(72,45,95,.36)!important;color:#f0e6ff!important;border-color:rgba(185,135,247,.28)!important}
html.wt-donate-night .note.error{background:rgba(103,39,73,.34)!important;color:#ffc0d6!important;border-color:rgba(239,121,170,.35)!important}
/* Shop/about keep matching text if users navigate using the same public tabs. */
html.wt-donate-night #wtPublicView .card:not(.support-card){background:rgba(27,20,40,.63)!important;color:#f4efff!important;border:0!important}
html.wt-donate-night #wtPublicView .card:not(.support-card) h2,
html.wt-donate-night #wtPublicView .card:not(.support-card) h3{color:#fff!important}
html.wt-donate-night .wfc-about-link{color:#e9d4ff!important;background:rgba(86,50,121,.36)!important;border-color:rgba(187,144,246,.25)!important}
html.wt-donate-night footer{color:#a79ab8!important}
@media(max-width:650px){
  html.wt-donate-night body>.container{width:min(100% - 28px,720px)}
  html.wt-donate-night .layout:has(#donationForm){margin:18px auto 34px;width:100%}
  html.wt-donate-night .layout:has(#donationForm)>.support-card{padding:20px 15px!important;border-radius:22px!important}
  html.wt-donate-night #donationForm .checkout-progress-item{font-size:clamp(10px,2.55vw,12px)}
  html.wt-donate-night #donationForm .amounts{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.wt-donate-night #donationForm .wi-method-stage .wi-method{padding:10px!important}
  html.wt-donate-night body::before,html.wt-donate-night body::after{opacity:.19;filter:none}
}
@media(prefers-reduced-motion:reduce){
  html.wt-donate-night body::before,html.wt-donate-night body::after{animation:none!important}
  html.wt-donate-night *,html.wt-donate-night *::before,html.wt-donate-night *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}