/* ============================================================
   Chivasook — ระบบดีไซน์ใหม่
   แนวคิด: เรียบ สงบ ปล่อยให้เนื้อหาเป็นตัวเอก ลดเส้นขอบ/สีที่ไม่จำเป็น
   ใช้ที่ว่างและลำดับชั้นของตัวอักษรในการจัดระเบียบ แทนกรอบเส้นหนา ๆ
   สีสันใช้อย่างประหยัด ให้ความสำคัญกับรายละเอียดเล็ก ๆ (มุมโค้ง เงานุ่ม จังหวะ)
   ============================================================ */

:root {
  /* ธีมใหม่: มินิมอล อบอุ่น โทนเบจ (cozy beige) — เปลี่ยนจากธีม apple blue เดิม */
  --ink: #3a332c;               /* ตัวอักษรหลัก — น้ำตาลเข้มอมดำ อุ่นกว่าสีดำจริง */
  --ink-secondary: #8a7d6d;      /* ตัวอักษรรอง/hint — น้ำตาลเทาอ่อน */
  --ink-tertiary: #c2b6a3;       /* ตัวอักษรจาง ๆ ที่สุด */
  --bg: #f6efe4;                 /* พื้นหลังหน้าเว็บ — เบจครีมอุ่น */
  --surface: #fffcf7;            /* พื้นผิวการ์ด/แผง — ครีมขาวนวล */
  --hairline: rgba(58, 51, 44, 0.12);
  --hairline-soft: rgba(58, 51, 44, 0.06);

  --navy: #3a332c;               /* คงชื่อตัวแปรไว้ (ใช้เป็น fallback) แต่ไม่ได้ใช้กับปุ่มแล้ว */
  --accent: #a9824c;             /* น้ำตาลทอง/แทน ใช้กับลิงก์/ข้อความเน้น (คอนทราสต์พอสำหรับตัวอักษร) */
  --accent-hover: #96693f;
  --accent-active: #7d5732;
  --accent-soft: #f1e3d0;        /* เบจอ่อน ใช้เป็นพื้นหลัง notice/badge/focus ring */

  /* สีปุ่ม — ปุ่มทั้งหมด (หลัก/รอง) อยู่ในโทนเบจเดียวกัน ต่างกันแค่ความเข้ม */
  --btn-bg: #ddc9a3;              /* ปุ่มหลัก — เบจเข้ม */
  --btn-bg-hover: #d3bc8e;
  --btn-bg-active: #c7b088;
  --btn-border: #c7b088;
  --btn-outline-bg: #f1e3d0;      /* ปุ่มรอง — เบจอ่อน */
  --btn-outline-bg-hover: #ead9bd;

  --danger: #b0483c;
  --danger-soft: #f7e6e1;
  --ok: #5d7a4a;
  --ok-soft: #eaf0e2;
  --warn: #9c7a1f;
  --warn-soft: #f6ecd4;
  --neutral-soft: #ece3d4;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-1: 0 1px 2px rgba(58, 51, 44, 0.06), 0 4px 12px rgba(58, 51, 44, 0.05);
  --shadow-2: 0 2px 4px rgba(58, 51, 44, 0.06), 0 12px 30px rgba(58, 51, 44, 0.10);

  /* สเกลระยะห่างเดียวที่ใช้ทั้งเว็บ (8px grid) — ทุกระยะห่าง (margin/padding) ในทุกหน้าต้องอิงจากชุดนี้เท่านั้น
     ห้ามใช้เลข px ลอย ๆ ที่ไม่อยู่ในสเกลนี้ เพื่อให้ชุดตัวอักษร/องค์ประกอบชนิดเดียวกันมีระยะห่างเท่ากันเสมอทุกหน้า */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* สีตัวอักษรสถานะ — ใช้ตัวเดียวกันทุกจุดที่ขึ้นบนพื้น -soft สีเดียวกัน (badge/notice) ไม่ให้มีเฉดต่างกันโดยไม่มีเหตุผล */
  --danger-text: #7a1f19;
  --ok-text: #1c5c3a;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* กันรูปภาพล้นจอเสมอ (เช่น QR ที่ฝั่งเซิร์ฟเวอร์สร้างมาเป็นขนาดพิกเซลตายตัว) — ขนาดที่กำหนดไว้เฉพาะจุด (inline style)
   ยังคงชนะกฎนี้ได้ตามปกติเพราะ inline style มีลำดับความสำคัญสูงกว่าเสมอ */
img { max-width: 100%; height: auto; }

/* ฟอนต์ไทยตัวหลักคือ Noto Sans Thai (โหลดจาก Google Fonts ใน partials/head.ejs) — รูปทรงตัวอักษรใกล้เคียงกับ
   ฟอนต์ไทยที่ apple.com ใช้จริงมากที่สุดในบรรดาฟอนต์ที่เปิดให้ใช้งานได้ฟรี ใช้แทนการปล่อยให้เบราว์เซอร์ fallback
   ไปที่ฟอนต์ไทยของระบบปฏิบัติการเอง (เช่น Leelawadee UI บน Windows) ซึ่งหน้าตาต่างจาก apple.com มาก
   ส่วนตัวอักษรละติน ยังใช้ SF Pro/-apple-system ก่อนถ้าเป็นอุปกรณ์ Apple */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Helvetica, Arial, "Noto Sans Thai", "Sarabun", sans-serif;
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  padding: 0;
  line-height: 1.47059;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ---------- Header ---------- */
header.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 252, 247, 0.85);
}
/* ใช้ grid 3 คอลัมน์ (ว่าง / โลโก้ / เมนู) แทนการใช้ position:absolute เพื่อจัดโลโก้ให้อยู่กึ่งกลางจริง ๆ —
   วิธีนี้ทำให้โลโก้ยังอยู่ใน flow ปกติ ความสูงของ header จะขยายตามขนาดโลโก้ได้ถูกต้อง ไม่ล้นทับเนื้อหาด้านล่าง */
header.topbar .brand {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
header.topbar .brand > a {
  grid-column: 2;
  justify-self: center;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
}
header.topbar .brand .name { font-weight: 600; letter-spacing: -0.016em; font-size: 15.5px; }
header.topbar nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.logo-img { height: 80px; width: auto; display: block; }

/* ---------- Typography ---------- */
/* กฎเดียวที่ใช้ทุกหน้า: h1/h2/h3 มีระยะห่างบน-ล่างตายตัวจากสเกล --space-* เท่านั้น
   h3 ที่เป็นหัวข้อตัวแรกของการ์ด/แผงฟอร์ม (ไม่มีอะไรอยู่ก่อนหน้า) ให้ใช้ .mt-0 แทนเลข px ลอย ๆ
   เพื่อให้หัวข้อชื่อเดียวกัน/บทบาทเดียวกันมีระยะห่างเท่ากันทุกหน้า ไม่ใช่กำหนดทีละหน้าแบบสุ่ม */
h1, h2, h3 { color: var(--ink); font-weight: 600; }
h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.015em; margin: var(--space-2) 0 var(--space-6); font-weight: 600; }
h2 { font-size: 28px; line-height: 1.14286; letter-spacing: -0.007em; margin: var(--space-8) 0 var(--space-4); }
h3 { font-size: 19px; line-height: 1.21053; letter-spacing: -0.021em; margin: var(--space-7) 0 var(--space-2); font-weight: 600; }
p { margin: 0 0 var(--space-3); color: var(--ink); }

/* หัวข้อที่เป็นองค์ประกอบแรกของการ์ด/แผง (ไม่ต้องมีระยะห่างด้านบน เพราะ padding ของการ์ดจัดให้แล้ว) */
.mt-0 { margin-top: 0 !important; }

/* ---------- Hero heading (หน้าแรกร้านค้าเท่านั้น) ---------- */
/* ทรงตัวหนา + ไล่เฉดสี แบบหัวข้อโปรโมชันของ apple.com — ใช้เฉพาะหัวข้อใหญ่หน้าแรกฝั่งลูกค้า
   ไม่ใช้กับหน้า console/staff เพื่อรักษาความเรียบง่ายของงานหลังบ้านตามแนวคิด less but better */
.hero-heading {
  font-weight: 800;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 55%, var(--btn-bg) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink); /* fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ background-clip:text */
  -webkit-text-fill-color: transparent;
}

/* ปุ่มคำสั่งหลักที่ปิดท้ายฟอร์ม/หนึ่งชุดข้อมูล — ระยะห่างด้านบนค่าเดียวกันทุกหน้า แทนการกำหนด margin-top เป็น px ลอย ๆ ทีละที่ */
.btn-cta { margin-top: var(--space-5); }

/* ข้อความรอง/คำอธิบายเสริม — ให้ใช้สีเดียวกันทุกหน้า (ผ่านคลาส .hint ที่มีอยู่แล้ว) หรือคลาสนี้เมื่อไม่ใช่ <p> */
.text-secondary { color: var(--ink-secondary); }
.text-tertiary { color: var(--ink-tertiary); }

/* ลิงก์ — สีเดียวกับสีเน้นหลักของธีม ไม่มีเส้นใต้จนกว่าจะ hover */
a { color: var(--accent); }
a.plain, .voucher-card a, header.topbar .brand > a { color: inherit; }

/* ---------- Storefront card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0;
}
.voucher-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-2);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.voucher-card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 8px rgba(58, 51, 44, 0.08), 0 18px 36px rgba(58, 51, 44, 0.14);
  transform: translateY(-2px);
}
.voucher-card img.thumb {
  display: block;
  max-width: none; /* ยกเว้นกฎ img{max-width:100%} ทั่วไป เพราะรูปนี้ตั้งใจให้ล้นขอบการ์ดเล็กน้อย (bleed) */
  width: calc(100% + 40px);
  aspect-ratio: 2000 / 647; /* สัดส่วนจริงของไฟล์รูปบัตรต้นฉบับ กันภาพยืด/ถูกครอปข้อความหาย */
  height: auto;
  object-fit: cover;
  margin: -20px -20px 16px -20px;
}
.voucher-card .card-title { font-size: 17px; font-weight: 600; color: var(--ink); margin: 6px 0 2px; letter-spacing: -0.01em; }
.voucher-card .price { font-size: 26px; font-weight: 650; color: var(--ink); margin: 4px 0; letter-spacing: -0.02em; }
.voucher-card .old-price { text-decoration: line-through; color: var(--ink-tertiary); font-size: 14px; }
.voucher-card .bonus-value { color: var(--accent); font-weight: 600; font-size: 13.5px; }

/* ---------- Buttons ---------- */
/* ธีมเบจ: ปุ่มทั้งหมด (หลัก/รอง) อยู่ในโทนเบจเดียวกัน ต่างกันแค่ความเข้มของเบจ — ไม่มีปุ่มสีเข้ม/สีน้ำเงินอีกต่อไป
   ทุกปุ่มยังคงความนูนมีมิติ: เงาด้านล่างหนักขึ้น + เส้นขอบบนสว่างเล็กน้อยเหมือนพื้นผิวยกตัว
   ตอน hover เงาจะลึกขึ้น (ยกตัวขึ้น) ตอนกด (active) เงาจะยุบลง (กดจม) ให้ความรู้สึกตอบสนองจริง */
.voucher-card button, .btn {
  background: var(--btn-bg);
  color: var(--ink);
  border: 1px solid var(--btn-border);
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 1px rgba(58, 51, 44, 0.12),
    0 6px 16px rgba(58, 51, 44, 0.22);
  transition: box-shadow 0.15s ease, transform 0.08s ease, background 0.15s ease;
}
.btn.gold {
  background: var(--btn-bg);
}
.btn.gold:hover { background: var(--btn-bg-hover); }
.btn.gold:active { background: var(--btn-bg-active); }
.btn.outline {
  background: var(--btn-outline-bg);
  border: 1px solid var(--btn-border);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(58, 51, 44, 0.06),
    0 4px 12px rgba(58, 51, 44, 0.10);
}
.btn.outline:hover {
  background: var(--btn-outline-bg-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(58, 51, 44, 0.08),
    0 6px 16px rgba(58, 51, 44, 0.14);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(58, 51, 44, 0.16),
    0 10px 22px rgba(58, 51, 44, 0.26);
}
.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    inset 0 1px 3px rgba(58, 51, 44, 0.22),
    0 1px 1px rgba(58, 51, 44, 0.1);
}
.btn.small { padding: 7px 14px; font-size: 13px; }

/* ---------- เมนูหลักหน้า console/staff ---------- */
/* บังคับให้ปุ่มเมนูอยู่แถวเดียวกันเสมอ ไม่ตกบรรทัดเป็นแถวที่ 2 แม้มีปุ่มจำนวนมาก (เช่นหน้าตั้งค่าร้าน)
   ถ้าจอแคบกว่าความกว้างของปุ่มทั้งหมด ให้เลื่อนแนวนอน (scroll) แทนการตกบรรทัด */
.console-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.console-nav .btn { flex: 0 0 auto; white-space: nowrap; }

/* ---------- Panels / forms ---------- */
form.panel, .panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin: var(--space-4) 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-1);
}
/* label ทุกช่องในทุกฟอร์มมีระยะห่างเท่ากันหมด — ไม่ต้อง override margin-top เป็นรายจุดอีก
   (ยกเว้น label ที่ใช้เป็นแถวเช็คบ็อกซ์/เรดิโอแนวนอน ซึ่งตั้ง margin:0 ไว้ชัดเจนเพื่อคุมระยะในแถวเอง) */
label { display: block; margin: var(--space-4) 0 var(--space-2); font-weight: 600; font-size: 13.5px; color: var(--ink-secondary); }
input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 16px; /* 16px กันไม่ให้ Safari บน iOS ซูมจอเข้าอัตโนมัติตอนแตะช่องกรอก */
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hint { color: var(--ink-secondary); font-size: 13px; margin-top: var(--space-2); line-height: 1.5; }

/* ---------- Notices ---------- */
.notice {
  background: var(--accent-soft);
  border-left: none;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  font-size: 14px;
  color: var(--ink);
}
.notice.danger { background: var(--danger-soft); color: var(--danger-text); }
.notice.ok { background: var(--ok-soft); color: var(--ok-text); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
th, td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--hairline-soft); }
th {
  background: transparent;
  color: var(--ink-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--hairline);
}
tr:last-child td { border-bottom: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge.active { background: var(--ok-soft); color: var(--ok-text); }
.badge.partial { background: var(--warn-soft); color: var(--warn); }
.badge.used { background: var(--neutral-soft); color: var(--ink-secondary); }
.badge.expired, .badge.void { background: var(--danger-soft); color: var(--danger-text); }
.badge.pending_payment { background: var(--warn-soft); color: var(--warn); }
.badge.paid { background: var(--ok-soft); color: var(--ok-text); }
.badge.cancelled { background: var(--neutral-soft); color: var(--ink-secondary); }

/* ---------- QR ---------- */
.qr-box { text-align: center; margin: var(--space-6) 0; }
.qr-box img {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(58, 51, 44, 0.12);
}

/* ---------- Voucher display (หน้าบัตรลูกค้า) ---------- */
.voucher-display {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-2);
  text-align: center;
}
/* การแสดงโค้ดบัตรตัวใหญ่ — ใช้คลาสเดียวนี้ทุกที่ที่ต้องโชว์โค้ดบัตรเด่น ๆ (หน้าบัตรลูกค้า, หน้าพิมพ์ QR ของแอดมิน ฯลฯ)
   เพื่อให้ "โค้ดบัตร" มีหน้าตา/ระยะห่างแบบเดียวกันทุกจุดที่ปรากฏ ไม่ต้องตั้งสไตล์ใหม่ทีละหน้า */
.code-display {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: var(--space-3) 0;
}

/* ---------- Footer ---------- */
footer.foot {
  text-align: center;
  color: var(--ink-tertiary);
  font-size: 12px;
  margin-top: var(--space-8);
  letter-spacing: 0.01em;
}

/* ============================================================
   Responsive — มือถือ (จอแคบกว่า 640px)
   ============================================================ */
@media (max-width: 640px) {
  .wrap { padding: 28px 16px 60px; }
  header.topbar { padding: 14px 16px; }
  h1 { font-size: 28px; letter-spacing: -0.011em; }
  h2 { font-size: 21px; letter-spacing: -0.007em; margin: var(--space-7) 0 var(--space-3); }

  /* ย่อโลโก้ลงบนมือถือ กันไม่ให้ header สูงเทอะทะเกินไปจนกินพื้นที่จอ */
  .logo-img { height: 36px; }

  form.panel, .panel, .voucher-display { padding: var(--space-4); border-radius: var(--radius-md); }

  /* ตารางข้อมูล (คำสั่งซื้อ/บัตร) มีหลายคอลัมน์ — บนจอแคบให้เลื่อนแนวนอนได้แทนที่จะบีบตัวจนอ่านไม่ออก */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  th, td { padding: 10px 10px; }
}

@media (max-width: 400px) {
  .logo-img { height: 28px; }
}