/* ===== Theme & Global ===== */
:root{
  --brand:#ff4802;
  --brand-2:#e50914;
  --bg:#f7f7f8;
  --text:#1f2937;
  --muted:#6b7280;
  --success:#10b981;
  --danger:#ef4444;
  --card:#ffffff;
  --ring:rgba(229,9,20,.25);
  --radius:14px;
  --shadow-strong: 0 24px 80px rgba(0,0,0,.22);
}

html,body{
  font-family:'Noto Sans Thai',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:14px; line-height:1.6; color:var(--text); background:var(--bg);
}
a{ color:inherit; }
.container{ max-width:1100px; margin:0 auto; padding:16px; }

/* ===== Header ===== */
.main-header{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; padding:20px; border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(0,0,0,.1); margin-bottom:20px; position:relative;
}
.shortfall-msg{
  margin-top: 6px;
  color: #ef4444;      /* แดง */
  font-weight: 700;
  text-align: right;   /* ชิดขวาให้ตรงกับตัวเลข */
}
.main-header h3{ margin:0; font-size:1.6rem; font-weight:600; }
.main-header p{ margin:6px 0 0; font-size:.92rem; opacity:.95; }
.main-header a{ color:#fff; text-decoration:underline; }
.animation-toggle{
  position:absolute; top:20px; right:20px; background:#fff; border:none; padding:8px; border-radius:50%;
  box-shadow:0 2px 5px rgba(0,0,0,.1); cursor:pointer; transition:all .3s ease;
}
.animation-toggle:hover{ transform:rotate(360deg); }
.animation-toggle i{ font-size:1.2rem; color:var(--brand-2); }

/* ===== Grid ===== */
.grid-container{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  background:var(--card); border-radius:var(--radius); padding:25px;
  border:1px solid #f1f1f1; box-shadow:0 10px 30px rgba(0,0,0,.06);
  animation: fadeIn .8s ease;
}
@media (max-width: 767px){
  .grid-container{ grid-template-columns:1fr; }
}

/* ===== Titles / Inputs ===== */
.section-title{
  font-weight:600; color:var(--brand); text-align:center; margin-bottom:14px; position:relative; font-size:1.2rem;
}
.section-title.blink{ animation: blink 1s infinite; }
.section-title::after{
  content:''; width:46px; height:3px; background:var(--brand);
  position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); border-radius:2px;
}
.search-input{
  width:100%; padding:12px 15px; border:1px solid #e0e0e0; border-radius:10px;
  background:#fafafa; font-size:.92rem; margin-bottom:14px; transition:all .3s ease;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.02);
}
.search-input:focus{
  outline:none; border-color:var(--brand-2); background:#fff; box-shadow:0 0 8px var(--ring); transform:scale(1.01);
}

/* ===== Scroll Lists ===== */
.scroll-container{
  height:350px; overflow-y:auto; border:1px solid #e0e0e0; border-radius:10px; background:#fff;
  box-shadow:0 4px 15px rgba(0,0,0,.03); transition: all .3s ease;
}
.scroll-container:hover{ box-shadow:0 6px 20px rgba(0,0,0,.06); }
.scroll-container::-webkit-scrollbar{ width:6px; }
.scroll-container::-webkit-scrollbar-track{ background:#f1f1f1; border-radius:10px; }
.scroll-container::-webkit-scrollbar-thumb{ background:var(--brand-2); border-radius:10px; }

/* ===== Items ===== */
.list-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 15px; border-bottom:1px dashed #eee; cursor:pointer; background:#fff;
  transition: all .25s ease; animation: slideInLeft .45s ease forwards; opacity:0;
}
.list-item:hover{ background:#fff7f4; transform: translateY(-1px); }
.list-item.selected{
  background:#fff; color:var(--brand-2); outline:2px solid var(--ring); box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.list-item img{ width:32px; height:32px; border-radius:50%; margin-right:12px; object-fit:cover; box-shadow:0 2px 5px rgba(0,0,0,.08); }
.list-item p{ margin:0; font-size:.95rem; color:#333; }
.list-item.selected p{ color:var(--brand-2); }

.price-badge{
  display:inline-flex; align-items:center; padding:6px 10px; font-size:.85rem; font-weight:700;
  border-radius:20px; background:var(--brand-2); color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.price-notstock{
  display:inline-flex; align-items:center; padding:6px 10px; font-size:.85rem; font-weight:700;
  border-radius:20px; background:var(--success); color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.list-item.package-item.in-stock{ background:#f0fff6; border-left:4px solid var(--success); }
.list-item.package-item.out-of-stock{ background:#fff0f1; border-left:4px solid var(--danger); }
.out-of-stock-img{ filter: grayscale(100%) brightness(.5); }

/* ===== Bottom Sheet Backdrop ===== */
.buy-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 9998;
}
.buy-backdrop.show{ opacity: 1; }

/* ===== Bottom Sheet (เดสก์ท็อป: กึ่งกลางกว้าง 520px) ===== */
.buy-sheet{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: min(520px, 94vw);
  background: linear-gradient(180deg, #ffffff, #fff7ef);
  border-top: 1px solid #ffd9ba;
  border-radius: 16px 16px 12px 12px;
  box-shadow: var(--shadow-strong);
  transition: transform .28s ease;
  z-index: 9999;
}
.buy-sheet.show{ transform: translate(-50%, 0); }

/* ===== มือถือ: เต็มจอ/ชิดล่างสุด ===== */
@media (max-width: 767px){
  .buy-sheet{
    left: 0;
    right: 0;
    width: 100vw;
    border-radius: 16px 16px 0 0;
    transform: translateY(105%);
  }
  .buy-sheet.show{ transform: translateY(0); }
  .sheet-body{ padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px); }
}

/* ===== เนื้อหาใน Sheet ===== */
.sheet-body{ padding: 14px 14px 16px; }
.sheet-header{ position: relative; padding-top: 12px; padding-bottom: 8px; }
.sheet-handle{
  position:absolute; left:50%; transform:translateX(-50%); top:4px;
  width:64px; height:4px; background:#ffd9c8; border-radius:999px;
}
.sheet-title{ font-weight:700; font-size:1rem; }

.sheet-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0;
}
.sheet-row .label{ color:#6b7280; }
.sheet-row .value{ font-weight:600; display:flex; align-items:center; gap:8px; }

.icon-img{ width:22px; height:22px; border-radius:6px; object-fit:cover; box-shadow:0 1px 3px rgba(0,0,0,.08); }

.qty-input{
  width: 86px;
  text-align:center;
  padding:6px 8px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}
.sheet-sep{ border:none; border-top:1px solid #f1f1f1; margin:8px 0 6px; }
.total{ font-size:1.05rem; }

.sheet-details{
  margin-top: 10px;
  border-top: 1px dashed #f3caa8;
  padding-top: 10px;
}
.sheet-details summary{
  cursor:pointer; color:#d97706; background:#fff; border:1px dashed #f0c9a8;
  padding:8px 10px; border-radius:12px; font-weight:700; list-style:none;
}
.sheet-details summary::-webkit-details-marker{ display:none; }
.details-body{ color:#374151; margin-top:8px; font-size:.95rem; white-space:pre-wrap; }

/* เช็กบ็อกซ์ยืนยัน */
.confirm-row{
  display:flex; align-items:center; gap:8px; margin-top:12px; font-weight:600;
}

/* ปุ่ม */
.sheet-actions{ display:flex; gap:10px; margin-top:14px; }
.btn-primary{
  flex:1;
  background: linear-gradient(90deg,#ffae62,#ff7a3d);
  color:#fff; border:none; border-radius:12px; padding:10px 18px; font-weight:700; cursor:pointer;
}
.btn-muted{
  background:#f1f5f9; color:#111; border:none; border-radius:12px; padding:10px 18px; cursor:pointer;
}
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.text-danger{ color:#ef4444 !important; }
  /* ป้ายสถานะสินค้า */
  .price-badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; font-size:.86rem; font-weight:800;
    border-radius:999px; border:1px solid; white-space:nowrap;
    box-shadow:0 6px 14px rgba(0,0,0,.06);
  }
  .price-green{ background:#ecfdf5; color:#059669; border-color:#a7f3d0; }  /* มีสินค้า */
  .price-red  { background:#fef2f2; color:#dc2626; border-color:#fecaca; }  /* สินค้าหมด */
  .price-gold { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }  /* พรีออเดอร์ */

  /* หน้าตารูปตอนหมดสต็อก (มีอยู่แล้วก็ข้ามได้) */
  .out-of-stock-img{ filter:grayscale(100%) contrast(.9) opacity(.7); }
  
/* ===== Mobile base tweaks ===== */
@media (max-width: 767px){
  .container{ padding:10px; }
  .main-header h3{ font-size:1.4rem; }
  .main-header p{ font-size:.86rem; }
  .section-title{ font-size:1.1rem; }
  .scroll-container{ height:300px; }
}

/* ===== Animations ===== */
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@keyframes slideInLeft{ from{opacity:0; transform:translateX(-20px);} to{opacity:1; transform:translateX(0);} }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.5;} }