/* ===== Mini Cart (inline minimal) ===== */
#mini-cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9997; }
#mini-cart{ position:fixed; top:0; right:0; height:100vh; width:min(420px, 92vw); background:#fff; z-index:9998; box-shadow:-8px 0 30px rgba(0,0,0,.18); display:flex; flex-direction:column; }
#mini-cart:focus{ outline:none; }
.mc-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee; }
.mc-head h3{ font-size:1.1rem; margin:0; font-weight:800; }
.mc-close{ border:0; background:#f4f4f6; width:36px; height:36px; border-radius:10px; cursor:pointer; }
.mc-body{ flex:1 1 auto; overflow:auto; padding:10px 10px 0; }
.mc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.mc-empty{ text-align:center; padding:32px 10px; color:#666; display:none; }
.mc-item{ display:grid; grid-template-columns:64px 1fr auto; gap:10px; border:1px solid #eee; border-radius:12px; padding:8px; align-items:center; }
.mc-thumb{ width:64px; height:64px; border-radius:10px; object-fit:cover; background:#fafafa; border:1px solid #f0f0f0; }
.mc-title{ font-weight:800; line-height:1.25; margin-bottom:6px; }
.mc-meta{ color:#666; font-weight:700; font-size:.95rem; display:flex; gap:10px; align-items:center; }
.mc-qty{ display:inline-flex; align-items:center; border:1px solid #e6e6ea; border-radius:10px; overflow:hidden; height:32px; }
.mc-qty button{ width:32px; height:32px; border:0; background:#f6f7f9; cursor:pointer; }
.mc-qty input{ width:44px; height:32px; border:0; text-align:center; font-weight:800; }
.mc-price{ font-weight:900; }
.mc-remove{ border:0; background:#fff0f0; color:#c00; width:32px; height:32px; border-radius:10px; cursor:pointer; }
.mc-foot{ border-top:1px solid #eee; padding:12px 12px 14px; }
.mc-sum{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-weight:800; }
.mc-actions{ display:flex; gap:8px; }
.mc-btn{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; border-radius:12px; text-decoration:none; font-weight:900; border:1px solid transparent; }
.mc-btn.primary{ background:#111; color:#fff; }
.mc-btn.ghost{ background:#f6f7f9; color:#222; border-color:#e7e7e7; }
@media (max-width:480px){
  .mc-item{ grid-template-columns:56px 1fr auto; }
  .mc-thumb{ width:56px; height:56px; }
}

/* ===== Receipt Popup (กว้างและเต็มตาขึ้น) ===== */
#receipt-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9996; backdrop-filter: blur(2px); }
#receipt-modal{ position:fixed; inset:0; display:none; z-index:9997; place-items:center; padding:16px; }
#receipt-modal > *{ width:min(960px, 96vw); }   /* กว้างขึ้น */
.rcp-head,.rcp-body,.rcp-foot{ background:#fff; }
.rcp-head{ border-radius:16px 16px 0 0; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; }
.rcp-close{ border:0; width:36px; height:36px; border-radius:10px; background:#f4f4f6; cursor:pointer; }
.rcp-body{ padding:14px 16px; max-height:70vh; overflow:auto; } /* สูงขึ้น */
.rcp-foot{ border-top:1px solid #eee; padding:12px; border-radius:0 0 16px 16px; display:flex; gap:8px; flex-wrap:wrap; }
.rcp-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.rcp-item{ display:grid; grid-template-columns:56px 1fr auto; gap:10px; align-items:center; border:1px solid #eee; border-radius:12px; padding:8px; }
.rcp-thumb{ width:56px; height:56px; border-radius:10px; object-fit:cover; background:#fafafa; border:1px solid #f0f0f0; }
.rcp-title{ font-weight:800; line-height:1.25; }
.rcp-meta{ color:#666; font-weight:700; font-size:.95rem; }
.rcp-price{ font-weight:900; }
.rcp-sum{ margin-top:10px; border:1px solid #eee; border-radius:12px; padding:10px; }
.rcp-sum .row{ display:flex; justify-content:space-between; margin:6px 0; font-weight:700; }
.rcp-sum .split{ height:1px; background:#eee; margin:6px 0; }
.rcp-sum .grand{ font-size:1.1rem; }

/* ใหม่: QR Section */
.rcp-qr{ margin-top:12px; border:1px dashed #cbd5e1; border-radius:12px; padding:12px; display:grid; grid-template-columns:160px 1fr; gap:14px; align-items:center; background:#f9fafb; }
.rcp-qr .qr-box{ display:grid; place-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:8px; }
.rcp-qr .qr-box img{ width:200px; max-width:100%; height:auto; display:block; }
.rcp-qr .qr-text h4{ margin:0 0 6px; font-weight:800; }
.rcp-qr .qr-text p{ margin:0 0 10px; color:#333; }
.rcp-btn{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; border-radius:12px; border:1px solid #111; background:#111; color:#fff; font-weight:900; text-decoration:none; }
.rcp-btn.ghost{ background:#f6f7f9; color:#222; border-color:#e7e7e7; }
.rcp-btn.line{ background:#06C755; border-color:#06C755; color:#fff; }
.rcp-btn.small{ height:36px; padding:0 12px; flex:0 0 auto; }
@media(max-width:640px){
  .rcp-item{ grid-template-columns:48px 1fr auto; }
  .rcp-thumb{ width:48px; height:48px; }
  .rcp-qr{ grid-template-columns:1fr; }
}

/* Cart icon on price row */
.cmnsx-price{ display:flex; align-items:center; gap:8px; }
.card-cart-btn.cart-on-price{
  margin-left:auto;
  width:40px; height:40px; border:0; border-radius:12px;
  background:#111; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .2s;
}
.card-cart-btn.cart-on-price:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.24); }
.card-cart-btn.cart-on-price .material-symbols-rounded{ font-size:22px; }

/* ===== Receipt Modal (Backdrop) ===== */
#receipt-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  z-index:9996;
}

/* ===== Receipt Modal (Container) ===== */
#receipt-modal{
  position:fixed; inset:0;
  display:none;                  /* toggle เป็น grid ตอนเปิดผ่าน JS */
  place-items:center;
  padding:16px;
  z-index:9997;
}

/* ทำตัวคอนเทนต์เป็น “กล่องสามตอน” (head/body/foot) */
#receipt-modal > .rcp-head,
#receipt-modal > .rcp-body,
#receipt-modal > .rcp-foot{
  width:min(960px, 96vw);
  background:#fff;
}

/* ===== Header ===== */
.rcp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-radius:16px 16px 0 0;
  border-bottom:1px solid #eee;
}
.rcp-head h3{ margin:0; font-size:1.15rem; font-weight:800; }
.rcp-close{
  border:0; background:#f4f4f6;
  width:36px; height:36px; border-radius:10px; cursor:pointer;
}

/* ===== Body (scrollable) ===== */
.rcp-body{
  padding:14px 16px;
  max-height:70vh;               /* เดสก์ท็อป: เนื้อหาไม่ยาวเกิน */
  overflow:auto;
}

/* รายการสินค้า */
.rcp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rcp-item{
  display:grid; grid-template-columns:56px 1fr auto;
  gap:10px; align-items:center;
  border:1px solid #eee; border-radius:12px; padding:8px;
}
.rcp-thumb{ width:56px; height:56px; border-radius:10px; object-fit:cover; background:#fafafa; border:1px solid #f0f0f0; }
.rcp-title{ font-weight:800; line-height:1.25; }
.rcp-meta{ color:#666; font-weight:700; font-size:.95rem; }
.rcp-price{ font-weight:900; }

/* สรุปราคา */
.rcp-sum{
  margin-top:12px;
  border:1px solid #eee; border-radius:12px; padding:10px;
}
.rcp-sum .row{ display:flex; justify-content:space-between; align-items:center; margin:6px 0; font-weight:700; }
.rcp-sum .split{ height:1px; background:#eee; margin:6px 0; }
.rcp-sum .grand{ font-size:1.1rem; }

/* ===== QR – LINE OA ===== */
.rcp-qr{
  margin-top:12px;
  border:1px dashed #cbd5e1; border-radius:12px;
  padding:12px;
  display:grid; grid-template-columns:160px 1fr; gap:14px; align-items:center;
  background:#f9fafb;
}
.rcp-qr .qr-box{ display:grid; place-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:8px; }
.rcp-qr .qr-box img{ width:200px; max-width:100%; height:auto; display:block; }
.rcp-qr .qr-text h4{ margin:0 0 6px; font-weight:800; }
.rcp-qr .qr-text p{ margin:0 0 10px; color:#333; }

/* ===== Footer (sticky buttons) ===== */
.rcp-foot{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:12px;
  border-top:1px solid #eee;
  border-radius:0 0 16px 16px;
}
.rcp-btn{
  flex:1 1 0;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; border-radius:12px; text-decoration:none;
  font-weight:900; border:1px solid #111; background:#111; color:#fff;
}
.rcp-btn.ghost{ background:#f6f7f9; color:#222; border-color:#e7e7e7; }
.rcp-btn.line{ background:#06C755; border-color:#06C755; color:#fff; }
.rcp-btn.small{ height:36px; padding:0 12px; flex:0 0 auto; }

/* ===== Mobile / Tablet ===== */
@media (max-width: 768px){
  /* เปิดแบบ “เต็มจอ” */
  #receipt-modal{
    padding:0;
  }
  #receipt-modal > .rcp-head,
  #receipt-modal > .rcp-body,
  #receipt-modal > .rcp-foot{
    width:100%;
  }
  .rcp-head{
    position:sticky; top:0;
    padding:12px 16px;
    border-radius:0;
    background:#fff;
    z-index:1;
  }
  .rcp-body{
    /* เต็มความสูงเครื่อง มือถือมี safe-area */
    max-height:calc(100vh - 104px);
    padding:12px 16px;
    overscroll-behavior:contain;
  }
  .rcp-foot{
    position:sticky; bottom:0;
    padding: max(10px, env(safe-area-inset-bottom) + 10px) 12px 12px;
    border-radius:0;
    background:#fff;
  }

  /* ย่อการ์ดรายการ */
  .rcp-item{ grid-template-columns:48px 1fr auto; }
  .rcp-thumb{ width:48px; height:48px; }

  /* QR แปลงเป็น 1 คอลัมน์ */
  .rcp-qr{ grid-template-columns:1fr; }
  .rcp-qr .qr-box{ justify-self:center; }
}

/* จอเล็กมาก */
@media (max-width: 400px){
  .rcp-head h3{ font-size:1rem; }
  .rcp-btn{ height:42px; font-size:.95rem; }
}

/* ลด motion สำหรับผู้ใช้ที่ตั้งค่าไว้ */
@media (prefers-reduced-motion: reduce){
  #receipt-backdrop{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .rcp-close, .rcp-btn{ transition:none; }
}
/* ===== Drawer (Mini Cart) – Smooth open/close ===== */
#mini-cart-overlay{
  opacity:0; transition:opacity .25s ease;
}
#mini-cart{
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* เมื่อเปิด */
.mc-open #mini-cart-overlay{ opacity:1; }
.mc-open #mini-cart{ transform:translateX(0); }

/* ปุ่ม + badge เด้งเบา ๆ ตอนจำนวนเปลี่ยน */
@keyframes pop {
  0%{ transform:scale(1); }
  40%{ transform:scale(1.16); }
  100%{ transform:scale(1); }
}
.nav-cart .cart-count.pop{ animation: pop .28s ease; }

/* เอฟเฟกต์ปุ่มตะกร้าตอนกด */
.card-cart-btn.added{
  background:#16a34a !important;
  transition: background .18s ease;
}

/* “บินเข้าตะกร้า” */
.fly-img{
  position:fixed; z-index:9999; pointer-events:none;
  width:64px; height:64px; object-fit:cover; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transform-origin:center center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}

/* ทอสต์เล็ก ๆ แจ้งเพิ่มลงตะกร้าแล้ว */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff; padding:10px 14px; border-radius:12px; font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.18); opacity:0; z-index:10000;
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){
  #mini-cart, #mini-cart-overlay, .fly-img, .toast{ transition:none !important; }
}