/* ptcargo-notify-toast.css — Shopee-style notification toasts (site-wide, member)
   desktop (>=768): เด้งมุมขวาล่าง เลื่อนเข้าจากขวา · mobile (<768): สไลด์ลงจากด้านบน */

.ptn-toasts{
  position:fixed; z-index:99999; display:flex; gap:10px; pointer-events:none;
  font-family:'Prompt','Mitr',system-ui,sans-serif;
}
/* mobile: จากด้านบน */
.ptn-toasts{ top:0; left:0; right:0; flex-direction:column; align-items:center; padding:10px 10px 0; }
/* desktop: มุมขวาล่าง (ใหม่สุดอยู่ล่าง) */
@media(min-width:768px){
  .ptn-toasts{ top:auto; left:auto; right:20px; bottom:20px; align-items:flex-end; padding:0; width:auto; }
}

.ptn-toast{
  --ptn-accent:#8A5A2B;
  pointer-events:auto; box-sizing:border-box; width:100%; max-width:420px;
  display:flex; align-items:flex-start; gap:11px;
  background:#fff; border:1px solid #F0E6DA; border-left:4px solid var(--ptn-accent);
  border-radius:14px; padding:12px 13px; cursor:pointer;
  box-shadow:0 14px 34px -12px rgba(80,50,20,.4), 0 2px 8px -4px rgba(0,0,0,.12);
  transform:translateY(-130%); opacity:0; transition:transform .34s cubic-bezier(.2,.8,.3,1), opacity .28s;
}
@media(min-width:768px){
  .ptn-toast{ width:360px; transform:translateX(130%); }
}
.ptn-toast.in{ transform:none; opacity:1; }
.ptn-toast.out{ opacity:0; transform:translateY(-130%); }
@media(min-width:768px){ .ptn-toast.out{ transform:translateX(130%); } }

.ptn-ic{
  flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:#fff; background:var(--ptn-accent);
}
.ptn-ic svg{ width:21px; height:21px; }
.ptn-body{ min-width:0; flex:1; }
.ptn-title{ font-weight:600; font-size:13.5px; color:#2A2016; line-height:1.35; }
.ptn-sub{ font-size:12px; color:#8a7a68; line-height:1.45; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ptn-meta{ font-size:10.5px; color:var(--ptn-accent); font-weight:600; margin-top:4px; }
.ptn-x{
  flex:none; width:22px; height:22px; border:0; background:transparent; color:#b9a894;
  font-size:18px; line-height:1; cursor:pointer; border-radius:7px; margin:-2px -2px 0 0;
}
.ptn-x:hover{ background:#F6EFE7; color:#7a6a58; }

/* progress bar (นับถอยหลังก่อนปิดเอง) */
.ptn-toast::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--ptn-accent); opacity:.5; border-radius:0 0 0 14px;
  transform-origin:left; animation:ptnBar 6.5s linear forwards;
}
.ptn-toast{ position:relative; overflow:hidden; }
@keyframes ptnBar{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
@media(prefers-reduced-motion:reduce){ .ptn-toast{ transition:opacity .2s; transform:none; } .ptn-toast::after{ animation:none; } }