@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

/* ==========================
   GLOBAL RESET
   ตั้งค่าพื้นฐานทุกหน้า
========================== */

*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  background:#eeeeee;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  font-family:'Noto Sans Thai',sans-serif;
}

/* ==========================
   PHONE FRAME
   กรอบมือถือ 390x844
========================== */

.phone{
  width:390px;
  height:844px;
  position:relative;
  overflow:hidden;
}

/* ==========================
   GLOBAL CLICKABLE
   ทำให้ปุ่ม/ลิงก์ขึ้นรูปมือ
========================== */

button,
.menu-icon,
.view-all-btn,
.upload-box,
.select-wrap,
.filter-pill,
select,
a{
  cursor:pointer;
}

/* ==========================
   USER SIDE MENU
   เมนูสไลด์ฝั่งผู้ใช้
========================== */

.side-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transition:.25s;
  z-index:50;
}

.side-overlay.active{
  opacity:1;
  visibility:visible;
}

.side-menu{
  position:absolute;
  top:0;
  right:-280px;
  width:280px;
  height:100%;
  background:#fff;
  z-index:60;
  padding:22px 18px;
  transition:.3s;
  box-shadow:-6px 0 18px rgba(0,0,0,.12);
}

.side-menu.active{
  right:0;
}

.side-menu-header{
  margin-bottom:22px;
  position:relative;
}

.side-menu-header h2{
  margin:0;
  color:#003b96;
  font-size:22px;
  font-weight:900;
}

.side-menu-header p{
  margin:2px 0 0;
  color:#555;
  font-size:12px;
  font-weight:800;
}

.side-menu-header i{
  position:absolute;
  top:0;
  right:0;
  font-size:22px;
  color:#333;
  cursor:pointer;
}

.side-menu a{
  height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#111;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  border-bottom:1px solid #eee;
}

.side-menu a i{
  width:28px;
  color:#1f6cff;
  text-align:center;
}

.side-menu .logout-link{
  color:#d64231;
}

.side-menu .logout-link i{
  color:#d64231;
}

/* ================= TOAST ================= */

.stic-toast{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:99999;

  width:fit-content;
  min-width:0;
  max-width:90%;
  background:#ffffff;
  color:#1d4ed8;

  border:1px solid #bfdbfe;
  border-radius:8px;
  padding:8px 12px;
  box-shadow:0 2px 8px rgba(37,99,235,.08);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;

  font-size:13px;
  font-weight:500;
  line-height:1.4;
  white-space:normal;
}

.stic-toast.hide{
  opacity:0;
  transform:translate(-50%,-46%);
  transition:.3s ease;
}

.stic-toast-icon{
  display:none;
}

.stic-toast-title{
  font-size:13px;
  font-weight:500;
  margin:0;
}

.stic-toast-message{
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  opacity:1;
}

/* Toast: error (ปรับเฉพาะกรอบให้เป็นทางการ ไม่เปลี่ยนข้อความ) */
.stic-toast-error{
  background:#ffffff;
  color:#1d4ed8;
  border-color:#bfdbfe;
}

.stic-toast-error .stic-toast-icon{
  display:none;
}

/* Toast: warning (ปรับเฉพาะกรอบให้เป็นทางการ ไม่เปลี่ยนข้อความ) */
.stic-toast-warning{
  background:#ffffff;
  color:#1d4ed8;
  border-color:#bfdbfe;
}

.stic-toast-warning .stic-toast-icon{
  display:none;
}

.review-reason{
  margin-top:6px;
  color:#dc2626;
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}

.stic-inline-data-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 10px;
  margin: 0;

  background: transparent;
  border: none;
  border-radius: 0;

  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.stic-inline-data-loading i {
  font-size: 13px;
  color: #2563eb;
}