/* ============================================================
   Digital Voucher System — Design System
   ------------------------------------------------------------
   Customer-facing neutral palette (hospitality-grade).
   Brand colors used ONLY in internal portals (admin / staff)
   and LINE Flex notifications — never in customer view.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Trirong:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ----- Customer-facing palette (neutral, warm) ----- */
  --color-bg:           #f5f1ea;   /* warm cream */
  --color-bg-elevated:  #ffffff;   /* card */
  --color-bg-muted:     #ede7dc;   /* chip / subtle */
  --color-bg-inset:     #faf7f1;   /* nested inset */

  --color-ink:          #1a1614;   /* almost-black, warm */
  --color-ink-muted:    #6b635b;   /* secondary text */
  --color-ink-subtle:   #a59c91;   /* tertiary */

  --color-border:       #e5dfd5;
  --color-border-strong:#d4ccbe;

  /* Semantic (status) */
  --color-success:      #2d6b3f;
  --color-success-bg:   #e8f0e3;
  --color-warning:      #b78628;
  --color-warning-bg:   #fbf4e2;
  --color-danger:       #9c2e2a;
  --color-danger-bg:    #f5e4e1;
  --color-neutral:      #6b635b;
  --color-neutral-bg:   #ede7dc;

  /* Accent (use sparingly — for CTAs only) */
  --color-accent:       #1a1614;
  --color-accent-ink:   #f5f1ea;

  /* ----- Brand palette (internal use only) ----- */
  --brand-8B:           #b72b26;   /* 8 Bistro — เลือดหมูอ่อน */
  --brand-FB:           #2b4178;   /* FAT BOY — กรมท่า */
  --brand-SCL:          #eeb241;   /* Shounen City Link — เหลือง */
  --brand-SJS:          #a9a0cb;   /* Shounen Jomsurang — ม่วงพาสเทล */
  --brand-KN:           #e56b2e;   /* Ken Izakaya — ส้ม */

  /* ----- Typography ----- */
  --font-display:       'Trirong', 'IBM Plex Sans Thai', Georgia, serif;
  --font-body:          'IBM Plex Sans Thai', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:          'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Sizes (mobile-first) */
  --fs-display-xl:      clamp(2.5rem, 8vw, 3.5rem);
  --fs-display:         clamp(1.875rem, 5vw, 2.25rem);
  --fs-h1:              1.5rem;
  --fs-h2:              1.25rem;
  --fs-body:            1rem;
  --fs-sm:              0.875rem;
  --fs-xs:              0.75rem;

  /* ----- Spacing & radii ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ----- Shadows (subtle, premium) ----- */
  --shadow-sm:  0 1px 2px rgba(26, 22, 20, 0.04), 0 1px 1px rgba(26, 22, 20, 0.03);
  --shadow-md:  0 4px 12px rgba(26, 22, 20, 0.06), 0 2px 4px rgba(26, 22, 20, 0.04);
  --shadow-lg:  0 12px 32px rgba(26, 22, 20, 0.08), 0 4px 8px rgba(26, 22, 20, 0.04);
  --shadow-inset: inset 0 1px 2px rgba(26, 22, 20, 0.04);

  /* ----- Transitions ----- */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Reset & base
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; }

/* ============================================================
   Typography utilities
   ============================================================ */

.display-xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.25;
}

.h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.3;
}

.muted   { color: var(--color-ink-muted); }
.subtle  { color: var(--color-ink-subtle); }
.mono    { font-family: var(--font-mono); }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ============================================================
   Layout primitives
   ============================================================ */

.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-wide {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-padded { padding: var(--space-6); }
.card-padded-lg { padding: var(--space-8); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-ink);
  text-decoration: none;
  transition: all var(--t-base);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}
.btn-secondary:hover { background: var(--color-bg-inset); }

.btn-danger {
  background: var(--color-danger);
  color: var(--color-bg-elevated);
  border-color: var(--color-danger);
}

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--color-bg-muted); }

.btn-block { width: 100%; }
.btn-lg { padding: var(--space-4) var(--space-6); font-size: 1.0625rem; }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }

/* ============================================================
   Forms
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(26, 22, 20, 0.08);
}

.textarea { min-height: 80px; resize: vertical; line-height: 1.45; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  cursor: pointer;
  transition: all var(--t-fast);
}
.checkbox-row:hover { background: var(--color-bg-inset); }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-ink); }
.checkbox-row .brand-dot {
  width: 10px; height: 10px; border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.checkbox-row.checked { border-color: var(--color-ink); background: var(--color-bg-inset); }

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  cursor: pointer;
  transition: all var(--t-fast);
}
.radio-card:hover { background: var(--color-bg-inset); }
.radio-card.checked { border-color: var(--color-ink); background: var(--color-bg-inset); }
.radio-card input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-ink); margin-top: 2px; }
.radio-card-content { display: flex; flex-direction: column; gap: 2px; }
.radio-card-content .title { font-weight: 500; }
.radio-card-content .desc { font-size: var(--fs-sm); color: var(--color-ink-muted); }

/* ============================================================
   Status badges
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-bg);
  color: var(--color-neutral);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* ============================================================
   Voucher-specific
   ============================================================ */

/* Wrapper for the voucher card with ticket-style notches */
.voucher-card {
  position: relative;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Decorative side notches (ticket cutouts) */
.voucher-card::before,
.voucher-card::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--color-bg);
  border-radius: 50%;
  top: var(--notch-y, 220px);
  z-index: 1;
}
.voucher-card::before { left: -12px; }
.voucher-card::after  { right: -12px; }

.voucher-perforation {
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--color-border-strong) 0,
    var(--color-border-strong) 4px,
    transparent 4px,
    transparent 8px
  );
  margin: 0 var(--space-4);
}

/* Header strip showing all eligible brand logos */
.brand-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: var(--color-bg-inset);
  flex-wrap: wrap;
}
.brand-logos img {
  height: 44px;
  width: auto;
  opacity: 0.92;
}
.brand-logos.single img { height: 64px; }

.brand-eyebrow {
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  padding-bottom: var(--space-4);
  background: var(--color-bg-inset);
}

/* QR area */
.qr-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-4) var(--space-6);
  background: var(--color-bg-elevated);
}

.qr-canvas {
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}

.qr-canvas.is-invalid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245, 241, 234, 0.85);
  backdrop-filter: blur(2px);
  border-radius: inherit;
}
.qr-canvas.is-invalid::before {
  content: '✕';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 5rem;
  font-weight: 300;
  color: var(--color-danger);
  z-index: 2;
}

.voucher-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-xl);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.voucher-code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-ink-subtle);
  letter-spacing: 0.08em;
}

/* Detail rows */
.detail-list {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}
.detail-row > .label { flex-shrink: 0; }
.detail-row > .value { text-align: right; color: var(--color-ink); font-weight: 500; }

/* Brand chips */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; }

/* Footer of voucher card */
.voucher-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-inset);
}

/* Stamp overlay (redeemed / expired) */
.stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  padding: var(--space-3) var(--space-6);
  border: 3px solid currentColor;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-danger);
  background: rgba(255, 255, 255, 0.85);
  z-index: 3;
  pointer-events: none;
}
.stamp.muted { color: var(--color-neutral); }

/* ============================================================
   Internal-portal styles (admin / staff)
   ============================================================ */

.portal-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.portal-header {
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}

.portal-header .brand-strip {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
}

.portal-main { flex: 1; padding: var(--space-6) 0; }

.portal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Table */
.table-wrap {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th, .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.table th {
  font-weight: 500;
  color: var(--color-ink-muted);
  background: var(--color-bg-inset);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-bg-inset); }

.brand-dot-list { display: inline-flex; gap: 4px; }
.brand-dot-list .dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(26, 22, 20, 0.1);
}

/* Brand color helpers (set inline style for these in HTML) */
.brand-bg-8B  { background-color: var(--brand-8B); color: white; }
.brand-bg-FB  { background-color: var(--brand-FB); color: white; }
.brand-bg-SCL { background-color: var(--brand-SCL); color: #1a1614; }
.brand-bg-SJS { background-color: var(--brand-SJS); color: #1a1614; }
.brand-bg-KN  { background-color: var(--brand-KN); color: white; }

/* ============================================================
   Animations
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.delay-1 { animation-delay: 60ms; }
.delay-2 { animation-delay: 120ms; }
.delay-3 { animation-delay: 180ms; }
.delay-4 { animation-delay: 240ms; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.pulse { animation: pulse 1.6s ease-in-out infinite; }

/* ============================================================
   Utility
   ============================================================ */

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.flex-1 { flex: 1; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Print: clean QR for screenshot/share */
@media print {
  body { background: white; }
  .no-print { display: none !important; }
}