/* ═══════════════════════════════════════════════════════════════════════
 * PAX Pilates Club — bespoke showcase design system
 * "Where movement meets mood." — editorial luxury, warm paper canvas
 * Fonts: Trirong (display serif, TH+EN) · Italianno (script flourish) · IBM Plex Sans Thai (body)
 * สีเป็น channel "R G B" เพื่อให้ alpha ทำงานกับ Tailwind/CSS
 * ─── ปรัชญาสี: กระดาษครีม + มะกอกเข้ม + ดินเผา + ไวน์ (ไม่ใช่ SaaS ขาว) ───
 * ═══════════════════════════════════════════════════════════════════════ */
:root {
  --c-ink: 36 28 23;        /* warm near-black brown — text */
  --c-muted: 107 93 80;     /* secondary text */
  --c-faint: 162 147 127;   /* tertiary / captions */
  --c-line: 74 58 44;       /* hairline base (low alpha) */
  --c-surface: 243 234 217; /* bone / paper canvas */
  --c-card: 251 246 236;    /* warm card */
  --c-olive: 47 58 37;      /* deep olive — sidebar, dark editorial blocks */
  --c-olive2: 63 76 48;     /* olive lighter */
  --c-clay: 190 106 67;     /* terracotta — the single accent (times / active / links) */
  --c-wine: 94 38 32;       /* oxblood — rare deep accent */
  --c-sand: 220 201 174;    /* warm sand */
  --c-blush: 226 190 170;   /* soft peach */
  --c-accent: var(--c-clay);
  --shadow-sm: 0 1px 2px rgb(36 28 23 / 0.05), 0 1px 1px rgb(36 28 23 / 0.03);
  --shadow-md: 0 8px 26px -10px rgb(36 28 23 / 0.16), 0 3px 8px -4px rgb(36 28 23 / 0.08);
  --shadow-lg: 0 24px 60px -22px rgb(36 28 23 / 0.30);
}
html { scroll-behavior: smooth; }
body {
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
  color: rgb(var(--c-ink));
  background-color: rgb(var(--c-surface));
  /* subtle paper grain + warm light from corners */
  background-image:
    radial-gradient(1100px 520px at 92% -10%, rgb(190 106 67 / 0.09), transparent 60%),
    radial-gradient(900px 480px at -6% 2%, rgb(47 58 37 / 0.08), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
}
.font-display { font-family: "Trirong", "IBM Plex Sans Thai", serif; letter-spacing: -0.005em; }
.font-script  { font-family: "Italianno", "Trirong", cursive; letter-spacing: 0.01em; }
::selection { background: rgb(var(--c-clay) / 0.24); }
input[type="color"] { -webkit-appearance: none; appearance: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* ── hairlines ─────────────────────────────────────────────────────── */
.hair   { border: 1px solid rgb(var(--c-line) / 0.14); }
.hair-t { border-top: 1px solid rgb(var(--c-line) / 0.14); }
.hair-b { border-bottom: 1px solid rgb(var(--c-line) / 0.14); }
.hair-r { border-right: 1px solid rgb(var(--c-line) / 0.14); }

/* ── cards ─────────────────────────────────────────────────────────── */
.cf-card { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.12); border-radius: 1.1rem; box-shadow: var(--shadow-sm); transition: box-shadow .25s, border-color .25s, transform .25s; }
a.cf-card:hover, .cf-card-hover:hover { box-shadow: var(--shadow-md); border-color: rgb(var(--c-clay) / 0.30); }

/* dark editorial block (olive) — used for hero / feature panels */
.cf-dark { background: rgb(var(--c-olive)); color: rgb(var(--c-surface)); border-radius: 1.1rem; position: relative; overflow: hidden; }
.cf-dark .cf-eyebrow { color: rgb(var(--c-blush)); }

/* ── stat card ─────────────────────────────────────────────────────── */
.cf-stat { position: relative; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.12); border-radius: 1.1rem; padding: 1.05rem 1.15rem; box-shadow: var(--shadow-sm); transition: box-shadow .25s, transform .25s, border-color .25s; display: flex; flex-direction: column; gap: 0.1rem; overflow: hidden; }
a.cf-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgb(var(--c-clay) / 0.28); }
.cf-stat-top { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: rgb(var(--c-muted)); letter-spacing: .01em; }
.cf-stat-num { font-family: "Trirong", serif; font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: -0.01em; margin-top: 0.45rem; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.cf-stat-num small { font-size: 0.85rem; font-weight: 500; color: rgb(var(--c-faint)); font-family: "IBM Plex Sans Thai"; }
.cf-stat-foot { font-size: 0.72rem; margin-top: 0.35rem; color: rgb(var(--c-muted)); }
.cf-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; }
.cf-stat-clay::before { background: rgb(var(--c-clay) / 0.9); }
.cf-stat-olive::before { background: rgb(var(--c-olive2) / 0.9); }
.cf-stat-wine::before { background: rgb(var(--c-wine) / 0.85); }
.cf-stat-sand::before { background: rgb(var(--c-sand)); }

/* ── logo / icon boxes ─────────────────────────────────────────────── */
.cf-mark { border: 1.5px solid currentColor; border-radius: 0.7rem; display: grid; place-items: center; }
.cf-iconbox { border: 1px solid rgb(var(--c-line) / 0.18); border-radius: 0.7rem; display: grid; place-items: center; color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }

/* ── eyebrow (small caps, letterspaced) ────────────────────────────── */
.cf-eyebrow { font-family: "Trirong", serif; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgb(var(--c-clay)); font-weight: 500; }

/* ── chips ─────────────────────────────────────────────────────────── */
.cf-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; padding: 0.26rem 0.66rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-muted)); background: rgb(var(--c-card)); transition: .15s; cursor: default; }
button.cf-chip { cursor: pointer; }
.cf-chip-ink { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink) / 0.3); background: rgb(var(--c-ink) / 0.04); }
.cf-chip-clay { color: rgb(var(--c-wine)); border-color: rgb(var(--c-clay) / 0.4); background: rgb(var(--c-clay) / 0.10); }

/* ── buttons ───────────────────────────────────────────────────────── */
.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; padding: 0.56rem 1.1rem; border-radius: 0.7rem; border: 1px solid rgb(var(--c-line) / 0.18); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); transition: .18s; box-shadow: var(--shadow-sm); }
.cf-btn:hover { border-color: rgb(var(--c-clay) / 0.5); box-shadow: var(--shadow-md); }
.cf-btn-primary { background: rgb(var(--c-clay)); color: #fff; border-color: rgb(var(--c-clay)); }
.cf-btn-primary:hover { background: rgb(var(--c-wine)); border-color: rgb(var(--c-wine)); }
.cf-btn-dark { background: rgb(var(--c-olive)); color: rgb(var(--c-surface)); border-color: rgb(var(--c-olive)); }
.cf-btn-dark:hover { background: rgb(var(--c-ink)); border-color: rgb(var(--c-ink)); }

/* ── the SIGNATURE: "flow of the evening" program ledger ───────────── */
.pax-flow { position: relative; }
.pax-flow-row { display: grid; grid-template-columns: 5.4rem 1fr; gap: 1rem; padding: 0.85rem 0; position: relative; }
.pax-flow-row + .pax-flow-row { border-top: 1px dashed rgb(var(--c-line) / 0.22); }
.pax-flow-time { font-family: "Trirong", serif; font-weight: 500; font-size: 0.98rem; color: rgb(var(--c-clay)); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; padding-top: 0.05rem; }
.pax-flow-title { font-weight: 500; color: rgb(var(--c-ink)); line-height: 1.35; }
.pax-flow-title small { display: block; font-weight: 400; color: rgb(var(--c-muted)); font-size: 0.82rem; margin-top: 0.15rem; }

/* ── vertical wordmark rule (rotated PAX ·) ────────────────────────── */
.pax-vrule { writing-mode: vertical-rl; text-orientation: mixed; font-family: "Trirong", serif; letter-spacing: 0.5em; text-transform: uppercase; font-size: 0.7rem; color: rgb(var(--c-faint)); }

/* ── poster / collage frame (event promo) ──────────────────────────── */
.pax-poster { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem; color: #fff; }
.pax-poster::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgb(20 16 12 / 0.72)); }
.pax-poster > * { position: relative; z-index: 1; }
.pax-poster-olive { background: linear-gradient(150deg, rgb(var(--c-olive)), rgb(30 38 24)); }
.pax-poster-clay  { background: linear-gradient(150deg, rgb(var(--c-clay)), rgb(120 52 34)); }
.pax-poster-wine  { background: linear-gradient(150deg, rgb(var(--c-wine)), rgb(40 16 14)); }
.pax-poster-sand  { background: linear-gradient(150deg, rgb(200 176 140), rgb(150 120 84)); }

/* ── callouts ──────────────────────────────────────────────────────── */
.cf-good, .cf-warn, .cf-bad, .cf-info { border-radius: 0.85rem; padding: 0.8rem 1rem; font-size: 0.875rem; display: flex; gap: 0.6rem; border: 1px solid; align-items: flex-start; }
.cf-good { background: rgb(63 76 48 / 0.07); border-color: rgb(63 76 48 / 0.30); color: rgb(47 58 37); }
.cf-warn { background: rgb(190 106 67 / 0.08); border-color: rgb(190 106 67 / 0.32); color: rgb(150 78 44); }
.cf-bad  { background: rgb(94 38 32 / 0.06); border-color: rgb(94 38 32 / 0.28); color: rgb(94 38 32); }
.cf-info { background: rgb(var(--c-ink) / 0.03); border-color: rgb(var(--c-ink) / 0.13); color: rgb(var(--c-ink)); }

/* ── phone frame (LINE mini-app mock) ──────────────────────────────── */
.cf-phone { width: 100%; max-width: 322px; border: 1px solid rgb(var(--c-line) / 0.18); border-radius: 2.1rem; padding: 0.55rem; background: rgb(var(--c-ink)); box-shadow: var(--shadow-lg); }
.cf-phone-screen { border-radius: 1.7rem; overflow: hidden; background: rgb(var(--c-surface)); position: relative; }
.cf-phone-notch { height: 1.6rem; display:flex; align-items:center; justify-content:center; }
.cf-phone-notch::before { content:""; width: 42%; height: 0.4rem; border-radius: 9999px; background: rgb(var(--c-ink) / 0.85); }

/* ── status / zone pills ───────────────────────────────────────────── */
.cf-zone { font-size: 0.72rem; font-weight: 500; padding: 0.14rem 0.6rem; border-radius: 9999px; border: 1px solid; display: inline-flex; align-items: center; gap: 0.3rem; }
.cf-zone-live    { color: rgb(47 58 37); border-color: rgb(63 76 48 / 0.4); background: rgb(63 76 48 / 0.08); }
.cf-zone-open    { color: rgb(150 78 44); border-color: rgb(190 106 67 / 0.42); background: rgb(190 106 67 / 0.09); }
.cf-zone-full    { color: rgb(94 38 32); border-color: rgb(94 38 32 / 0.36); background: rgb(94 38 32 / 0.06); }
.cf-zone-wait    { color: rgb(150 78 44); border-color: rgb(190 106 67 / 0.3); background: rgb(190 106 67 / 0.05); }
.cf-zone-mute    { color: rgb(var(--c-muted)); border-color: rgb(var(--c-line) / 0.2); background: rgb(var(--c-line) / 0.04); }

/* dot */
.cf-light { width: 0.6rem; height: 0.6rem; border-radius: 9999px; display: inline-block; }
.cf-light-clay  { background: rgb(var(--c-clay)); box-shadow: 0 0 0 3px rgb(190 106 67 / 0.16); }
.cf-light-olive { background: rgb(var(--c-olive2)); box-shadow: 0 0 0 3px rgb(63 76 48 / 0.16); }
.cf-light-wine  { background: rgb(var(--c-wine)); box-shadow: 0 0 0 3px rgb(94 38 32 / 0.14); }

/* ── seat-map grid dot (booking) ───────────────────────────────────── */
.pax-seat { aspect-ratio: 1; border-radius: 0.45rem; display: grid; place-items: center; font-size: 0.62rem; font-weight: 600; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-faint)); background: rgb(var(--c-card)); font-variant-numeric: tabular-nums; }
.pax-seat-taken { background: rgb(var(--c-olive) / 0.9); color: rgb(var(--c-surface)); border-color: transparent; }
.pax-seat-hold  { background: rgb(var(--c-clay) / 0.18); color: rgb(var(--c-wine)); border-color: rgb(var(--c-clay) / 0.45); }
.pax-seat-vip   { background: rgb(var(--c-wine) / 0.12); color: rgb(var(--c-wine)); border-color: rgb(var(--c-wine) / 0.4); }

/* ── progress bar ──────────────────────────────────────────────────── */
.cf-bar { height: 0.5rem; border-radius: 9999px; background: rgb(var(--c-line) / 0.1); overflow: hidden; }
.cf-bar > span { display: block; height: 100%; border-radius: 9999px; background: rgb(var(--c-clay)); }
.cf-bar-olive > span { background: rgb(var(--c-olive2)); }
.cf-bar-wine  > span { background: rgb(var(--c-wine)); }

/* ── forms ─────────────────────────────────────────────────────────── */
.cf-label { display:block; font-size:0.75rem; color:rgb(var(--c-muted)); margin-bottom:0.3rem; }
.cf-input { width:100%; border:1px solid rgb(var(--c-line) / 0.2); border-radius:0.7rem; padding:0.58rem 0.8rem; font-size:0.875rem; background:rgb(var(--c-card)); color:rgb(var(--c-ink)); transition:.15s; font-family:inherit; }
.cf-input::placeholder { color:rgb(var(--c-faint)); }
.cf-input:focus { outline:none; border-color:rgb(var(--c-clay)); box-shadow:0 0 0 3px rgb(190 106 67 / 0.14); }
select.cf-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b5d50' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.6rem center; padding-right:1.8rem; cursor:pointer; }

/* ── code chip (booking ref / ticket) ──────────────────────────────── */
.cf-code { font-family:"Trirong", serif; font-weight:600; letter-spacing:0.24em; font-size:1.5rem; color:rgb(var(--c-ink)); }

/* ── toast ─────────────────────────────────────────────────────────── */
.cf-toast { position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem); background:rgb(var(--c-olive)); color:rgb(var(--c-surface)); font-size:0.85rem; padding:0.72rem 1.2rem; border-radius:0.8rem; display:flex; align-items:center; gap:0.5rem; opacity:0; pointer-events:none; transition:.25s; z-index:80; box-shadow:var(--shadow-lg); }
.cf-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── data table ────────────────────────────────────────────────────── */
.cf-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.cf-table th { text-align: left; font-weight: 500; color: rgb(var(--c-muted)); padding: 0.6rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.14); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: "Trirong", serif; }
.cf-table td { padding: 0.72rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.08); color: rgb(var(--c-ink)); }
.cf-table tbody tr { transition: background .12s; }
.cf-table tbody tr:hover { background: rgb(var(--c-clay) / 0.04); }
.cf-table tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

/* ── avatar ────────────────────────────────────────────────────────── */
.cf-ava { width:2.3rem; height:2.3rem; border-radius:9999px; display:grid; place-items:center; font-family:"Trirong", serif; font-weight:600; font-size:0.82rem; background:rgb(var(--c-clay) / 0.12); border:1px solid rgb(var(--c-clay) / 0.24); color:rgb(var(--c-wine)); }
.cf-ava-olive { background:rgb(var(--c-olive) / 0.1); border-color:rgb(var(--c-olive) / 0.24); color:rgb(var(--c-olive)); }

/* ── divider list ──────────────────────────────────────────────────── */
.cf-divide > * + * { border-top: 1px solid rgb(var(--c-line) / 0.1); }

/* ── step (journey) ────────────────────────────────────────────────── */
.cf-step { position: relative; padding-left: 3.3rem; }
.cf-step::before { content: ""; position: absolute; left: 1.05rem; top: 2.5rem; bottom: -1.1rem; width: 1.5px; background: rgb(var(--c-line) / 0.16); }
.cf-step:last-child::before { display: none; }
.cf-step-num { position: absolute; left: 0; top: 0; width: 2.15rem; height: 2.15rem; border-radius: 0.7rem; display: grid; place-items: center; font-family: "Trirong", serif; font-weight: 600; font-size: 0.9rem; color: rgb(var(--c-clay)); border: 1.5px solid rgb(var(--c-clay) / 0.4); background: rgb(var(--c-clay) / 0.06); }

/* ── page-load reveal ──────────────────────────────────────────────── */
@keyframes pax-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: pax-rise .6s cubic-bezier(.22,.61,.36,1) both; }
  main > *:nth-child(1){ animation-delay:.02s } main > *:nth-child(2){ animation-delay:.09s }
  main > *:nth-child(3){ animation-delay:.16s } main > *:nth-child(4){ animation-delay:.23s }
  main > *:nth-child(5){ animation-delay:.30s } main > *:nth-child(6){ animation-delay:.37s }
  main > *:nth-child(7){ animation-delay:.44s } main > *:nth-child(n+8){ animation-delay:.5s }
}