/* Shared styling for the static content pages (tickets, promotions,
   directions, privacy). Kept as one stylesheet so the pages stay visually
   identical to each other and close to the React app they sit beside. */
:root {
  --bg: #0b1220;
  --panel: #101a2e;
  --line: rgba(255, 255, 255, .10);
  --text: #dbe4f0;
  --muted: #93a3bb;
  --sky: #38bdf8;
  --green: #34d399;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  line-height: 1.75;
  font-size: 15px;
}
.wrap { max-width: 820px; margin: 0 auto; padding: 32px 20px 72px; }
a { color: var(--sky); }
nav.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
nav.crumbs a { text-decoration: none; }
header { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 28px; }
h1 { font-size: 27px; line-height: 1.35; margin: 0 0 6px; color: #fff; }
h1 .en { display: block; font-size: 17px; color: var(--muted); font-weight: 600; }
h2 {
  font-size: 19px; color: #fff; margin: 38px 0 10px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
h2 .en { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
h3 { font-size: 16px; color: #fff; margin: 22px 0 6px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 20px; }
.en-body { color: var(--muted); font-size: 14px; }
.lead { font-size: 16px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 14px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .04); }
td.num { text-align: right; font-weight: 700; color: var(--sky); white-space: nowrap; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; margin: 18px 0;
}
.card.good { border-color: rgba(52, 211, 153, .32); background: rgba(52, 211, 153, .07); }
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(52, 211, 153, .16); border: 1px solid rgba(52, 211, 153, .34);
  color: var(--green); font-weight: 700; text-decoration: none;
  padding: 12px 20px; border-radius: 14px; margin: 6px 0;
}
.cta:hover { background: rgba(52, 211, 153, .26); }
.pages { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.pages a {
  display: inline-block; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 13px; font-size: 13px; text-decoration: none;
}
.pages a:hover { border-color: rgba(56, 189, 248, .45); }
footer {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
}