/* ===== 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:16px;
  --shadow-strong: 0 24px 80px rgba(0,0,0,.22);
  --shadow-soft: 0 8px 32px rgba(0,0,0,.08);
  --gradient-warm: linear-gradient(135deg, #ff7a18 0%, #ff9d4a 50%, #ffb366 100%);
  --gradient-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}

html,body{
  font-family:'Sarabun','Noto Sans Thai',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:13px; line-height:1.5; color:var(--text);
  background: linear-gradient(135deg, #fff5f0 0%, #ffe8dd 50%, #ffd9c8 100%);
  background-attachment: fixed;
  margin:0; padding:0; overflow-x:hidden; position:relative;
}
body::before{
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255,122,24,0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(229,9,20,0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: gradientFloat 20s ease infinite;
}
@keyframes gradientFloat{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.8; transform: scale(1.05); }
}
body.no-animation *{ animation:none !important; transition:none !important; }
a{ color:inherit; }
.container{ max-width:1100px; margin:0 auto; padding:18px; position:relative; z-index:1; }

/* ===== Header ===== */
.main-header{
  background: var(--gradient-warm);
  color:#fff; padding:24px 22px; border-radius:16px;
  box-shadow: var(--shadow-soft); margin-bottom:16px; position:relative; overflow:hidden;
  animation: fadeIn .6s ease;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
}
.main-header::before{
  display:none;
}
@keyframes shimmer{
  0%{ left: -100%; }
  50%, 100%{ left: 100%; }
}
@keyframes floatHeader{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
.shortfall-msg{
  margin-top: 6px;
  color: #ef4444;
  font-weight: 700;
  text-align: right;
}
.main-header h3{ margin:0; font-size:1.5rem; font-weight:600; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
.main-header p{ margin:5px 0 0; font-size:.88rem; opacity:.95; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); }
.main-header a{ color:#fffbf5; text-decoration:underline; transition: all 0.3s ease; }
.main-header a:hover{ color:#ffd9c8; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.animation-toggle{
  position:absolute; top:18px; right:18px;
  background: rgba(255,255,255,0.25);
  border:1px solid rgba(255,255,255,0.4);
  color:#fff; border-radius:12px; padding:10px 14px;
  cursor:pointer; font-size:.9rem; transition: all .3s ease;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.animation-toggle:hover{ background: rgba(255,255,255,0.35); transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }

/* ===== Grid ===== */
.grid-container{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  background: rgba(255,255,255,0.85); border-radius:16px; padding:20px;
  border:1px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-soft);
  animation: fadeIn .6s ease;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
@keyframes floatUp{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (max-width: 767px){
  .grid-container{ grid-template-columns:1fr; }
}

/* ===== Titles / Inputs ===== */
.section-title{
  font-weight:600; text-align:center; margin-bottom:12px; position:relative; font-size:1.1rem;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-title.blink{ animation: blink 1s infinite; }
.section-title::after{
  content:''; width:50px; height:3px; background: var(--gradient-brand);
  position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); border-radius:2px;
  animation: expandWidth 0.6s ease;
}
@keyframes expandWidth{
  from{ width: 0; }
  to{ width: 50px; }
}
.search-input{
  width:100%; padding:10px 14px; border:1px solid rgba(255,122,24,0.2); border-radius:12px;
  background:rgba(255,255,255,0.9); font-size:.88rem; margin-bottom:12px; transition:all .25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.search-input:focus{
  outline:none; border-color:var(--brand); background:rgba(255,255,255,1);
  box-shadow:0 0 0 3px rgba(255,122,24,0.15), 0 4px 12px rgba(255,122,24,0.2);
  transform:scale(1.01);
}
.search-input::placeholder{ color:var(--muted); opacity:0.7; }

/* ===== Scroll Lists ===== */
.scroll-container{
  height:300px; overflow-y:auto; border:1px solid rgba(255,122,24,0.15); border-radius:12px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
  box-shadow:0 4px 16px rgba(0,0,0,.05); transition: all .25s ease;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.scroll-container:hover{ box-shadow:0 6px 24px rgba(255,122,24,0.15); border-color:rgba(255,122,24,0.25); }
.scroll-container::-webkit-scrollbar{ width:8px; }
.scroll-container::-webkit-scrollbar-track{
  background:rgba(255,245,240,0.5); border-radius:10px; margin:4px;
}
.scroll-container::-webkit-scrollbar-thumb{
  background: var(--gradient-warm); border-radius:10px;
  border:2px solid rgba(255,255,255,0.3); transition: all .3s ease;
}
.scroll-container::-webkit-scrollbar-thumb:hover{
  background: var(--gradient-brand); box-shadow: 0 0 6px rgba(255,122,24,0.5);
}
.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:11px 13px; margin:6px; cursor:pointer;
  background:rgba(255,255,255,0.8); border-radius:11px;
  border:1px solid rgba(255,122,24,0.1);
  transition: all .25s ease;
  opacity:1;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.list-item:hover{
  background:rgba(255,255,255,1);
  border-color:rgba(255,122,24,0.3);
  transform: translateX(3px);
  box-shadow: 0 4px 16px rgba(255,122,24,0.12);
}
.list-item.selected{
  background: linear-gradient(135deg, rgba(255,122,24,0.15), rgba(255,157,74,0.15));
  border-color:var(--brand);
  box-shadow: 0 6px 20px rgba(255,122,24,0.2), 0 0 0 3px rgba(255,122,24,0.1);
  transform: scale(1.02);
}
.list-item img{
  width:38px; height:38px; object-fit:cover; border-radius:9px;
  margin-right:11px; border:2px solid rgba(255,255,255,0.5);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
  transition: all .25s ease;
}
.list-item:hover img{
  transform: scale(1.08);
  box-shadow:0 5px 14px rgba(255,122,24,.22);
  border-color:rgba(255,122,24,0.3);
}
.list-item p{
  flex:1; margin:0; font-weight:500; font-size:.88rem; color:var(--text);
  transition: all .25s ease;
}
.list-item:hover p{
  color:var(--brand); transform: translateX(2px);
}
.list-item.selected p{ color:var(--brand); }

.price-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; font-size:.84rem; font-weight:600;
  border-radius:18px; white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.09);
  transition: all .25s ease;
  border:1px solid;
}
.list-item:hover .price-badge{
  transform: scale(1.04);
  box-shadow:0 5px 14px rgba(0,0,0,.13);
}
.price-green{
  background:linear-gradient(135deg, #ecfdf5, #d1fae5);
  color:#059669; border-color:#a7f3d0;
}
.price-red{
  background:linear-gradient(135deg, #fef2f2, #fee2e2);
  color:#dc2626; border-color:#fecaca;
}
.price-gold{
  background:linear-gradient(135deg, #fff7ed, #ffedd5);
  color:#c2410c; border-color:#fed7aa;
}
.price-notstock{
  display:inline-flex; align-items:center; padding:8px 14px; font-size:.88rem; font-weight:700;
  border-radius:20px; background:linear-gradient(135deg, #ecfdf5, #d1fae5); color:#059669;
  box-shadow:0 4px 12px rgba(0,0,0,.1); border:1px solid #a7f3d0;
}
.list-item.package-item.in-stock{
  background: linear-gradient(135deg, rgba(236,253,245,0.5), rgba(209,250,229,0.3));
  border-left:4px solid var(--success);
}
.list-item.package-item.out-of-stock{
  background: linear-gradient(135deg, rgba(254,242,242,0.5), rgba(254,226,226,0.3));
  border-left:4px solid var(--danger);
}
.out-of-stock-img{ filter: grayscale(100%) brightness(.5); opacity:0.7; transition: all .3s ease; }

/* ===== Bottom Sheet Backdrop ===== */
.buy-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .3s 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, rgba(255,255,255,0.98), rgba(255,247,239,0.98));
  border-top: 2px solid rgba(255,217,186,0.5);
  border-radius: 20px 20px 12px 12px;
  box-shadow: 0 -10px 40px rgba(255,122,24,0.2), 0 0 0 1px rgba(255,255,255,0.5);
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.buy-sheet.show{ transform: translate(-50%, 0); animation: slideUpBounce 0.5s ease; }

@keyframes slideUpBounce{
  0%{ transform: translate(-50%, 105%); }
  60%{ transform: translate(-50%, -10px); }
  80%{ transform: translate(-50%, 5px); }
  100%{ 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: var(--gradient-warm);
  border-radius:999px;
  box-shadow: 0 2px 4px rgba(255,122,24,0.3);
}
.sheet-title{
  font-weight:700; font-size:1.1rem;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sheet-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0;
  transition: all .3s ease;
}
.sheet-row:hover{
  background: rgba(255,245,240,0.5);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
.sheet-row .label{ color:#6b7280; font-weight:500; }
.sheet-row .value{ font-weight:600; display:flex; align-items:center; gap:8px; color:var(--text); }

.icon-img{
  width:24px; height:24px; border-radius:8px; object-fit:cover;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  border:1px solid rgba(255,122,24,0.2);
  transition: all .3s ease;
}
.sheet-row:hover .icon-img{
  transform: scale(1.1) rotate(5deg);
  box-shadow:0 4px 10px rgba(255,122,24,.25);
}

.qty-input{
  width: 90px;
  text-align:center;
  padding:8px 10px;
  border:2px solid rgba(255,122,24,0.3);
  border-radius:12px;
  background:rgba(255,255,255,0.95);
  font-weight:600;
  transition: all .3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.qty-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,122,24,0.15);
  transform: scale(1.05);
}
.sheet-sep{ border:none; border-top:2px dashed rgba(255,202,168,0.4); margin:12px 0 8px; }
.total{ font-size:1.1rem; color:var(--brand); }

.sheet-details{
  margin-top: 12px;
  border-top: 2px dashed rgba(243,202,168,0.5);
  padding-top: 12px;
}
.sheet-details summary{
  cursor:pointer;
  color:#d97706;
  background: linear-gradient(135deg, rgba(255,247,237,0.8), rgba(255,237,213,0.6));
  border:1px solid rgba(240,201,168,0.4);
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  list-style:none;
  transition: all .3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sheet-details summary:hover{
  background: linear-gradient(135deg, rgba(255,247,237,1), rgba(255,237,213,0.8));
  border-color:rgba(217,119,6,0.4);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(217,119,6,0.15);
}
.sheet-details summary::-webkit-details-marker{ display:none; }
.details-body{
  color:#374151;
  margin-top:10px;
  font-size:.95rem;
  white-space:pre-wrap;
  padding:10px;
  background:rgba(255,255,255,0.5);
  border-radius:8px;
  border-left:3px solid var(--brand);
}

/* เช็กบ็อกซ์ยืนยัน */
.confirm-row{
  display:flex; align-items:center; gap:10px; margin-top:14px; font-weight:600;
}
.confirm-row input[type="checkbox"]{
  width:20px; height:20px;
  cursor:pointer;
  accent-color: var(--brand);
}

/* ปุ่ม */
.sheet-actions{ display:flex; gap:12px; margin-top:16px; }
.btn-primary{
  flex:1;
  background: var(--gradient-warm);
  color:#fff; border:none; border-radius:14px; padding:12px 20px;
  font-weight:700; font-size:1rem; cursor:pointer;
  transition: all .3s ease;
  box-shadow: 0 4px 12px rgba(255,122,24,0.3);
  position: relative;
  overflow: hidden;
}
.btn-primary::before{
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}
.btn-primary:hover::before{
  left: 100%;
}
.btn-primary:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(255,122,24,0.4);
}
.btn-primary:active{
  transform: translateY(0) scale(0.98);
}
.btn-muted{
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color:#334155; border:none; border-radius:14px; padding:12px 20px;
  font-weight:600; cursor:pointer;
  transition: all .3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.btn-muted:hover{
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.btn-primary:disabled{
  opacity:.5; cursor:not-allowed;
  transform: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.text-danger{ color:#ef4444 !important; }

/* ===== Utility Classes ===== */
.d-flex{ display:flex; }
.align-items-center{ align-items:center; }
.mb-0{ margin-bottom:0; }
.p-3{ padding:1rem; }
.text-center{ text-align:center; }
.text-muted{ color:var(--muted); }

  /* ป้ายสถานะสินค้า (duplicate from above, keeping for compatibility) */
  .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:16px; }
  .main-header{ padding:24px 20px; }
  .main-header h3{ font-size:1.6rem; }
  .main-header p{ font-size:.9rem; }
  .section-title{ font-size:1.15rem; }
  .scroll-container{ height:320px; }
  .grid-container{ padding:16px; gap:20px; }
  .list-item{ padding:12px 14px; margin:6px; }
  .list-item img{ width:40px; height:40px; }
}

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