/* ===== BurgerShot Toasts (Premium) ===== */
:root{
  --t-bg: rgba(14, 18, 28, .78);
  --t-line: rgba(255,255,255,.14);
  --t-text: #e9eef7;
  --t-muted: rgba(233,238,247,.72);
  --t-shadow: 0 18px 50px rgba(0,0,0,.45);
  --t-radius: 22px;
  --t-success: #22c55e;
  --t-info: #ffb703;
  --t-error: #ff4d2e;
}

.toast-host{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

/* Mobile: center top */
@media (max-width: 640px){
  .toast-host{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 24px));
  }
}

.toast{
  pointer-events: auto;
  width: 360px;
  max-width: calc(100vw - 24px);
  border-radius: var(--t-radius);
  border: 1px solid var(--t-line);
  background: var(--t-bg);
  backdrop-filter: blur(18px);
  box-shadow: var(--t-shadow);
  overflow: hidden;
  position: relative;

  /* Animation */
  transform-origin: top right;
  animation: toastIn .45s cubic-bezier(.2,.9,.2,1);
}

.toast::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 140px at 0% 0%, rgba(255,255,255,.08), transparent 50%),
    radial-gradient(600px 140px at 100% 0%, rgba(255,255,255,.06), transparent 50%);
}

.toastRow{
  display:flex;
  gap:12px;
  padding: 14px 14px 12px 14px;
  align-items:flex-start;
}

.toastLogoWrap{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  flex: 0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  position: relative;
  overflow:hidden;
}

.toastLogoWrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.toastContent{
  min-width:0;
  flex:1;
}

.toastTitle{
  color: var(--t-text);
  font-weight: 900;
  letter-spacing: -.3px;
  font-size: 1.02rem;
  line-height: 1.15;
}

.toastMsg{
  margin-top: 4px;
  color: var(--t-muted);
  font-weight: 700;
  font-size: .93rem;
  line-height: 1.35;
}

.toastMeta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.toastTag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,238,247,.75);
  font-weight: 800;
  font-size: .82rem;
}

.toastClose{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(233,238,247,.85);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight: 900;
}
.toastClose:hover{ background: rgba(255,255,255,.08); }

.toastBar{
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.toastBar span{
  display:block;
  height:100%;
  width:100%;
  transform-origin:left;
  animation: toastBar linear forwards;
}

/* Types */
.toast.success{
  box-shadow: 0 18px 60px rgba(34,197,94,.10), var(--t-shadow);
}
.toast.info{
  box-shadow: 0 18px 60px rgba(255,183,3,.10), var(--t-shadow);
}
.toast.error{
  box-shadow: 0 18px 60px rgba(255,77,46,.12), var(--t-shadow);
}

/* badge + bar colors */
.toast.success .toastBadge{ background: var(--t-success); }
.toast.info .toastBadge{ background: var(--t-info); }
.toast.error .toastBadge{ background: var(--t-error); }

.toast.success .toastBar span{ background: linear-gradient(90deg, var(--t-success), #86efac); }
.toast.info .toastBar span{ background: linear-gradient(90deg, var(--t-info), #ffe08a); }
.toast.error .toastBar span{ background: linear-gradient(90deg, var(--t-error), #ff8a75); }

/* Animations */
@keyframes toastIn{
  from{ opacity:0; transform: translateY(-12px) scale(.98); filter: blur(1px); }
  to{ opacity:1; transform: none; filter: none; }
}
@keyframes toastOut{
  to{ opacity:0; transform: translateY(-10px) scale(.98); }
}
@keyframes toastBar{
  from{ transform: scaleX(1); }
  to{ transform: scaleX(0); }
}