/* Front floating toast — bottom-right (align with member toast)
 * 主题覆盖变量：见 xy_front_toast.example.css
 */
:root{
  --xy-ft-toast-right:24px;
  --xy-ft-toast-bottom:28px;
  --xy-ft-toast-z:10050;
  --xy-ft-toast-ok:#2a9a7f;
  --xy-ft-toast-err:#c62828;
}
.xy-ft-toast-host{
  position:fixed;
  right:var(--xy-ft-toast-right,24px);
  bottom:var(--xy-ft-toast-bottom,28px);
  left:auto;
  top:auto;
  z-index:var(--xy-ft-toast-z,10050);
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-end;
  gap:10px;
  width:min(380px,calc(100vw - 32px));
  margin:0;
  padding:0;
  transform:none;
  pointer-events:none;
}
.xy-ft-toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:12px 14px 12px 12px;
  border-radius:10px;
  border:1px solid #e6e8eb;
  background:#fff;
  box-shadow:0 10px 28px rgba(26,29,33,.12),0 2px 8px rgba(26,29,33,.06);
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1);
  font-size:13px;
  line-height:1.45;
  color:#1a1d21;
}
.xy-ft-toast.is-in{
  opacity:1;
  transform:translateY(0) scale(1);
}
.xy-ft-toast.is-out{
  opacity:0;
  transform:translateY(10px) scale(.98);
}
.xy-ft-toast-icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.xy-ft-toast.is-ok .xy-ft-toast-icon{background:linear-gradient(180deg,#3db89a 0%,var(--xy-ft-toast-ok,#2a9a7f) 100%)}
.xy-ft-toast.is-err .xy-ft-toast-icon{background:linear-gradient(180deg,#e57373 0%,var(--xy-ft-toast-err,#c62828) 100%)}
.xy-ft-toast-msg{
  flex:1 1 auto;
  min-width:0;
  margin:5px 0 0;
  font-weight:600;
  word-break:break-word;
}
.xy-ft-toast-x{
  flex:0 0 auto;
  margin:-2px -4px 0 0;
  border:0;
  background:transparent;
  color:#94a3b8;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:4px 6px;
}
.xy-ft-toast-x:hover{color:#1a1d21}
.xy-ft-toast.is-ok{border-color:#b7d4c9;background:linear-gradient(180deg,#f3fbf8 0%,#fff 55%)}
.xy-ft-toast.is-err{border-color:#f0c4c0;background:linear-gradient(180deg,#fff7f6 0%,#fff 55%)}
@media (max-width:640px){
  .xy-ft-toast-host{right:12px;bottom:16px;width:calc(100vw - 24px)}
}

/* Server flash → toast: hide after bubbled */
.xy-buy-now-flash.is-toasted,
.xy-checkout-toast.is-toasted,
[data-xy-front-flash].is-toasted,
.xy-ft-flash-src{
  display:none!important;
}