/* ptcargo-notify-toast.css — กล่องแจ้งเตือนเด้ง (ใช้ได้ทั้ง member และ admin/warehouse)
   ★ ที่ตั้ง+อนิเมชันตามที่เจ้าของสั่ง 2026-09-06 ★
     desktop/tablet (>=768) : เด้งมุมขวาล่าง เลื่อนเข้าจากขวา
     mobile (<768)          : สไลด์ลงจากด้านบน เต็มความกว้างจอ แล้วเด้งกลับขึ้นไป
   ★ ของเดิมถูกอยู่แล้วทุกประการ ★ รอบนี้แก้เฉพาะ 'ชุดสี'
     เดิมเป็นโทนน้ำตาล (#8A5A2B/#2A2016/#F0E6DA) ซึ่งเป็นชุดสีเก่าของระบบ
     ไม่เข้ากับกรมท่า+ส้มที่ใช้อยู่ตอนนี้ ⇒ น่าจะเป็นเหตุผลที่มีคนเรียกใช้แค่ 2 ไฟล์
   ★ อย่าสับสนกับ toast() แถบดำกลางล่าง ★ ที่ 150 หน้าเขียนซ้ำกันเอง — คนละตัว */

.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:#EF5F06;
  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 #E7ECF3; border-left:4px solid var(--ptn-accent);
  border-radius:14px; padding:12px 13px; cursor:pointer;
  box-shadow:0 14px 34px -12px rgba(23,35,58,.34), 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:#17233A; line-height:1.35; }
.ptn-sub{ font-size:12px; color:#6B7A90; 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:44px; height:44px; border:0; background:transparent; color:#93A1B5;
  display:grid; place-items:center; font-size:20px; line-height:1; cursor:pointer;
  border-radius:10px; margin:-5px -5px 0 0;
}
.ptn-x:hover{ background:#F3F6FB; color:#17233A; }
.ptn-x:focus-visible{ outline:3px solid rgba(255,122,26,.35); outline-offset:2px; }

/* 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; } }