/* ==========================================================================
   WowLaos - Main CSS (Design Tokens, Reset, Base, Layout)
   ========================================================================== */

:root {
  /* Brand palette: Black / Gold */
  --vl-black: #0b0b0f;
  --vl-black-2: #131318;
  --vl-black-3: #1b1b22;
  /* "red" tokens repurposed to dark-gold/charcoal so the theme reads black + gold */
  --vl-red: #241d0e;
  --vl-red-dark: #14110a;
  --vl-red-light: #d4af37;
  --vl-gold: #d4af37;
  --vl-gold-light: #f4d878;
  --vl-gold-dark: #a5811f;
  --vl-accent: #d4af37;
  --vl-white: #f7f3e9;
  --vl-muted: #a7a2b0;
  --vl-success: #2ecc71;
  --vl-danger: #e74c3c;
  --vl-warning: #f1c40f;

  /* Gradients */
  --vl-gradient-primary: linear-gradient(135deg, #3a2f14 0%, #1a160c 55%, var(--vl-black) 100%);
  --vl-gradient-gold: linear-gradient(135deg, var(--vl-gold-light) 0%, var(--vl-gold) 50%, var(--vl-gold-dark) 100%);
  --vl-gradient-hero: radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.28), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(212, 175, 55, 0.14), transparent 50%),
    linear-gradient(180deg, #14141a 0%, #0b0b0f 100%);
  --vl-gradient-card: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));

  /* Glass */
  --vl-glass-bg: rgba(255, 255, 255, 0.06);
  --vl-glass-border: rgba(255, 255, 255, 0.12);
  --vl-glass-blur: 16px;

  /* Layout */
  --vl-header-height: 64px;
  --vl-pwa-banner-height: 52px;
  --vl-bottom-nav-height: 64px;
  --vl-container-max: 1320px;
  --vl-radius-sm: 8px;
  --vl-radius-md: 14px;
  --vl-radius-lg: 22px;
  --vl-radius-full: 999px;

  /* Shadow */
  --vl-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --vl-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --vl-shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.35);

  /* Motion */
  --vl-transition-fast: 150ms ease;
  --vl-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --vl-transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Font */
  --vl-font-base: 'Noto Sans Lao', 'Noto Sans Thai', 'Segoe UI', system-ui, -apple-system, sans-serif;

  color-scheme: dark;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--vl-font-base);
  background: var(--vl-black);
  color: var(--vl-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; font-size: 1rem; }
img { max-width: 100%; display: block; }
::selection { background: var(--vl-gold); color: var(--vl-black); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--vl-black-2); }
::-webkit-scrollbar-thumb { background: var(--vl-gold-dark); border-radius: var(--vl-radius-full); }

/* Container */
.container {
  max-width: var(--vl-container-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* Utility */
.vl-flex { display: flex; align-items: center; }
.vl-flex-between { display: flex; align-items: center; justify-content: space-between; }
.vl-gap-8 { gap: 8px; }
.vl-gap-12 { gap: 12px; }
.vl-gap-16 { gap: 16px; }
.vl-hidden { display: none !important; }
.vl-text-muted { color: var(--vl-muted); }
.vl-text-gold { color: var(--vl-gold); }
.vl-text-center { text-align: center; }
.vl-mt-16 { margin-top: 16px; }
.vl-mb-16 { margin-bottom: 16px; }
.vl-w-full { width: 100%; }

/* App shell offsets: PWA banner + sticky header stack.
   vl-has-header is added by header.js only on pages that render #appHeader -
   standalone pages (loading/offline/404) have no header, so they must not get its offset. */
body.vl-has-header { padding-top: var(--vl-header-height); }
body.vl-has-header.vl-has-pwa-banner { padding-top: calc(var(--vl-header-height) + var(--vl-pwa-banner-height)); }
body.vl-has-pwa-banner:not(.vl-has-header) { padding-top: var(--vl-pwa-banner-height); }

/* vl-has-bottom-nav is added by bottom-nav.js - mobile only, bar is hidden on desktop (min-width: 992px) */
@media (max-width: 991.98px) {
  body.vl-has-bottom-nav { padding-bottom: calc(var(--vl-bottom-nav-height) + env(safe-area-inset-bottom)); }
}

/* Glass surface */
.vl-glass {
  background: var(--vl-glass-bg);
  border: 1px solid var(--vl-glass-border);
  backdrop-filter: blur(var(--vl-glass-blur));
  -webkit-backdrop-filter: blur(var(--vl-glass-blur));
}

/* Buttons */
.vl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--vl-radius-full);
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform var(--vl-transition-fast), box-shadow var(--vl-transition-fast), opacity var(--vl-transition-fast);
  white-space: nowrap;
}
.vl-btn:active { transform: scale(0.96); }
.vl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.vl-btn-gold {
  background: var(--vl-gradient-gold);
  color: var(--vl-black);
  box-shadow: var(--vl-shadow-gold);
}
.vl-btn-gold:hover { filter: brightness(1.08); }

.vl-btn-primary {
  background: var(--vl-gradient-primary);
  color: var(--vl-white);
  box-shadow: var(--vl-shadow-sm);
}
.vl-btn-primary:hover { filter: brightness(1.1); }

.vl-btn-outline {
  background: transparent;
  color: var(--vl-gold);
  border: 1.5px solid var(--vl-gold);
}
.vl-btn-outline:hover { background: rgba(212, 175, 55, 0.1); }

.vl-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--vl-white);
}
.vl-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.vl-btn-block { width: 100%; }
.vl-btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* Form controls */
.vl-field { margin-bottom: 16px; text-align: left; }
.vl-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--vl-muted);
  font-weight: 600;
}
.vl-input-wrap { position: relative; }
.vl-input, .vl-select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--vl-radius-md);
  border: 1px solid var(--vl-glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--vl-white);
  transition: border-color var(--vl-transition-fast), box-shadow var(--vl-transition-fast);
}
.vl-input::placeholder { color: var(--vl-muted); }
.vl-input:focus, .vl-select:focus {
  outline: none;
  border-color: var(--vl-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* Password show/hide toggle */
.vl-pw-wrap { position: relative; display: block; }
.vl-pw-wrap .vl-input { padding-right: 46px; }
.vl-pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--vl-muted);
  cursor: pointer;
  border-radius: var(--vl-radius-sm);
  transition: color var(--vl-transition-fast);
}
.vl-pw-toggle:hover { color: var(--vl-gold); }
.vl-pw-toggle svg { width: 20px; height: 20px; }
.vl-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
/* เบราว์เซอร์วาด dropdown list ของ <option> เป็นพื้นหลังขาวโดย default (ไม่รับ background จาก .vl-select)
   แต่ color ที่ตั้งไว้ที่ .vl-select นั้นถูก inherit ลงมา ทำให้ตัวหนังสือขาวบนพื้นขาว มองไม่เห็น
   ต้องกำหนด background/color ที่ตัว <option> เองตรง ๆ */
.vl-select option {
  background: var(--vl-black-2);
  color: var(--vl-white);
}
.vl-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--vl-muted); }
.vl-checkbox input { accent-color: var(--vl-gold); width: 16px; height: 16px; }

/* Card base */
.vl-card {
  background: var(--vl-gradient-card);
  border: 1px solid var(--vl-glass-border);
  border-radius: var(--vl-radius-lg);
  padding: 20px;
}

/* Section title */
.vl-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.vl-section-title h2 {
  font-size: 1.15rem;
  color: var(--vl-gold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vl-section-title .vl-view-all {
  font-size: 0.85rem;
  color: var(--vl-muted);
}

/* Auth page shell (login/register/404/offline) */
.vl-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--vl-gradient-hero);
}
.vl-auth-box {
  width: 100%;
  max-width: 420px;
  border-radius: var(--vl-radius-lg);
  padding: 32px 24px;
}
.vl-auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.vl-auth-title {
  text-align: center;
  color: var(--vl-gold);
  font-size: 1.4rem;
  margin-bottom: 24px;
}
.vl-auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--vl-muted);
}

/* Responsive helpers */
@media (min-width: 992px) {
  .vl-desktop-only { display: initial; }
  .vl-mobile-only { display: none !important; }
}
@media (max-width: 991.98px) {
  .vl-desktop-only { display: none !important; }
  .vl-mobile-only { display: initial; }
}