@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');

: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');
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}
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;
  
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.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); }

.store-logo {
  max-width: 200px;
  height: auto;
  object-fit: contain;
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-in-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.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); }
}

.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); }
}

.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-fade-in { transform: none; }
.reveal-fade-up { transform: translateY(45px); }
.reveal-fade-left { transform: translateX(-40px); }
.reveal-fade-right { transform: translateX(40px); }
.reveal-zoom-in {
  transform: scale(0.3) translateY(50px);
  transition-property: opacity, transform;
  transition-duration: 0.95s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.active {
  opacity: 1;
  transform: none;
}