/* 1. นำเข้าฟอนต์ทั้งหมดจาก Google Fonts ตามที่อยู่ใน Database
  (Kanit, Prompt, Sarabun, Noto Sans Thai)
*/
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@300;400;500;600;700&family=Kanit:wght@300;400;500;700&family=Noto+Sans+Thai:wght@300;400;500;700&family=Prompt:wght@300;400;500;700&family=Sarabun:wght@300;400;500;700&display=swap');

/* 2. กำหนดตัวแปร CSS (CSS Variables) ค่าเริ่มต้น
  ค่าเหล่านี้จะถูกแทนที่ด้วยข้อมูลจาก Database เมื่อโหลดหน้าเว็บ
*/
:root {
  --store-primary-color: #3B82F6;
  --store-secondary-color: #F3F4F6;
  --store-font-color: #1F2937;
  --store-bg-color: #f8fafc;
  --store-surface-color: #ffffff;
  --store-surface-alt-color: #f8fafc;
  --store-border-color: rgba(148, 163, 184, 0.28);
  --store-muted-color: #64748b;
  --store-hover-color: rgba(59, 130, 246, 0.08);
  --store-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(248, 250, 252, 0.40));
  --store-button-text: #ffffff;
  --store-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
  --card-bg: var(--store-surface-color);
  --store-font-family: 'Kanit', sans-serif;
  
  --store-bg-image: url('/uploads/images/default-bg.jpg');
}

/* 3. ตั้งค่าพื้นฐานของเว็บไซต์ (Base Styles) 
  ให้ทุกส่วนดึงตัวแปรไปใช้ เพื่อให้เว็บไปในทิศทางเดียวกัน
*/
body {
  font-family: var(--store-font-family);
  color: var(--store-font-color);
  background-color: var(--store-bg-color);
  background-image: var(--store-overlay), var(--store-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* ทำภาพพื้นหลังให้อยู่กับที่เวลา Scroll */
  
  margin: 0;
  padding: 0;
  min-height: 100vh;
}


/* 4. คลาสสำเร็จรูป (Utility Classes) สำหรับดึงไปใช้ตามจุดต่างๆ
*/
.bg-primary { background-color: var(--store-primary-color); }
.text-primary { color: var(--store-primary-color); }
.border-primary { border-color: var(--store-primary-color); }

.bg-secondary { background-color: var(--store-secondary-color); }
.text-secondary { color: var(--store-secondary-color); }

/* คลาสสำหรับ Logo เผื่อใช้จัดการขนาด */
.store-logo {
  max-width: 200px;
  height: auto;
  object-fit: contain;
}

/* 5. ระบบ Animations (ตรงกับ css_class ใน Database)
*/
/* Fade In */
.animate-fade-in {
  animation: fadeIn 0.8s ease-in-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide Up */
.animate-slide-up {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Zoom In */
.animate-zoom-in {
  animation: zoomIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}