/* Bangkok Taxi Services — a road atlas.
 *
 * Bangkok is not a destination on this network. It is the place everything
 * else is measured from, and the fare list proves it: eleven destinations
 * leave from here, and four of them (Khao Yai, Chiang Mai, Phuket, Hat Yai)
 * have no city fare at all — only an airport one. So the page is built the
 * way a road atlas is built: five named highways out of one city, each with
 * its stops laid along it in order outward.
 *
 * The surface is printed paper, not a screen. Thai motorway signage green
 * carries the roads; the pink is the colour of a Bangkok cab and is spent
 * only on money and on the one button that books a car.
 *
 * Nothing here is shared with another site in this network. The vehicle
 * capacities, the child seat price and the eSIM are the same facts
 * everywhere — the form they take on this page is not.
 */

:root {
  --map:      #e8e6dc;   /* aged map paper */
  --map-2:    #dfdccf;   /* the fold */
  --map-3:    #d3cfbe;   /* inset panels */
  --ink:      #16211c;   /* green-black, the printing */
  --ink-2:    #59635c;   /* legend grey */
  --road:     #0f6b3f;   /* Thai motorway sign green */
  --road-2:   #0a4d2d;
  --taxi:     #c2136a;   /* Bangkok cab pink, darkened to read on paper */
  --line:     #b9b6a6;   /* hairline rule */
  --line-2:   #8f8b78;   /* a rule you are meant to notice */
  --card:     #f3f1e9;   /* the whiter paper a form is printed on */

  --atlas: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --read:  "Newsreader", Georgia, "Times New Roman", serif;
  --thai:  "Noto Sans Thai Looped", "Noto Sans Thai", "Leelawadee UI", sans-serif;

  --gut: clamp(1.1rem, 4vw, 2.4rem);
}

:lang(th) { --read: var(--thai); --atlas: var(--thai); }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--map);
  color: var(--ink);
  font-family: var(--read);
  font-size: 1.02rem;
  line-height: 1.62;
  /* The faint horizontal banding of a folded paper map. */
  background-image: linear-gradient(var(--map-2) 1px, transparent 1px);
  background-size: 100% 7.5rem;
}

img, svg { max-width: 100%; }
a { color: var(--road-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--taxi); }
:focus-visible { outline: 3px solid var(--taxi); outline-offset: 2px; }

.sheet { max-width: 68rem; margin: 0 auto; padding: 0 var(--gut); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── The masthead: one thin printed bar, the way a map sheet is titled ── */

.plate {
  border-bottom: 2px solid var(--ink);
  background: var(--map);
  position: sticky; top: 0; z-index: 40;
}
.plate .sheet {
  display: flex; align-items: center; gap: 0.6rem 1.4rem;
  flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0.6rem;
}
.sheetname {
  font-family: var(--atlas); font-weight: 900; font-size: 1.02rem;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; margin-right: auto;
  display: flex; align-items: center; gap: 0.5rem;
}
.sheetname svg { display: block; }
.index { display: flex; align-items: center; gap: 0.15rem 1rem; flex-wrap: wrap; }
.index a {
  font-family: var(--atlas); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.index a:hover { color: var(--ink); border-bottom-color: var(--taxi); }
.index a.here { color: var(--ink); border-bottom-color: var(--ink); }

/* The one button that books a car. It is the only pink fill on the page. */
.hire {
  font-family: var(--atlas); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--taxi); color: #fff !important; text-decoration: none;
  padding: 0.42rem 0.95rem; border-radius: 2px; white-space: nowrap;
}
.hire:hover { background: #a30f59; color: #fff !important; }

.tongues { display: flex; gap: 0.4rem; }
.tongues a { padding: 0; border: 0; line-height: 0; opacity: 0.5; }
.tongues a.here, .tongues a:hover { opacity: 1; }
.tongues img { border: 1px solid var(--line); display: block; }

/* ── Sheet 1: the title block ─────────────────────────────────────────── */

.title { padding: clamp(2rem, 6vw, 3.6rem) 0 clamp(1.4rem, 4vw, 2.4rem); }
.title h1 {
  font-family: var(--atlas); font-weight: 900;
  font-size: clamp(2rem, 6.4vw, 3.5rem); line-height: 1.02;
  letter-spacing: -0.025em; margin: 0 0 1rem; text-wrap: balance;
  max-width: 17ch;
}
.title h1 span { color: var(--road); }
.lede {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem); line-height: 1.6;
  max-width: 50ch; margin: 0 0 1.5rem;
}
.lede b { font-weight: 600; color: var(--taxi); font-variant-numeric: tabular-nums; }

/* The road fan. A drawing of the five highways out, at true bearings. */
.fan {
  margin: clamp(1.6rem, 5vw, 2.6rem) 0 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.2rem 0;
}
.fan figcaption {
  font-family: var(--atlas); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2);
  margin-top: 0.7rem;
}

/* Lettering inside the two drawings. Kept here rather than as attributes so
 * both drawings share one type scale with the rest of the sheet. */
.fan svg text, .chao svg text { font-family: var(--atlas); }
.n-place  { font-weight: 700; font-size: 15px; fill: var(--ink); }
.n-dist   { font-weight: 600; font-size: 11.5px; fill: var(--ink-2); letter-spacing: 0.09em; }
.n-city   { font-weight: 900; font-size: 15px; fill: var(--ink); letter-spacing: 0.1em; }
.n-port   { font-weight: 800; font-size: 12px; fill: var(--taxi); letter-spacing: 0.1em; }
.n-fee    { font-weight: 700; font-size: 12px; fill: var(--ink-2); letter-spacing: 0.1em; }
.n-fee-hot{ font-weight: 900; font-size: 17px; fill: var(--taxi); letter-spacing: 0.02em; }
.shieldno { font-weight: 900; font-size: 15px; fill: #fff; }

/* Thai has no word spaces and its marks sit above and below the line, so the
 * tracking that opens up a Latin map label just pulls Thai syllables apart.
 * The Thai sheet keeps the same type scale and drops the letter-spacing. */
:lang(th) .n-dist, :lang(th) .n-city, :lang(th) .n-fee { letter-spacing: 0; }
:lang(th) .n-place, :lang(th) .n-dist { font-size: 16px; }

/* 17ch is a sensible headline measure in Latin; in Thai the ch unit is much
 * wider than the average glyph, so the same rule strands one word per line. */
:lang(th) .title h1 { max-width: 22ch; }

/* ── The legend: what a printed map puts in its corner box ────────────── */

.legend {
  background: var(--map-3);
  border: 1px solid var(--line);
  padding: 1.1rem 1.2rem;
  margin: clamp(1.6rem, 4vw, 2.2rem) 0 0;
  display: grid; gap: 0.1rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.legend h2 {
  grid-column: 1 / -1;
  font-family: var(--atlas); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 0.6rem;
}
.legend p { margin: 0 0 0.5rem; font-size: 0.94rem; line-height: 1.5; }
.legend p b {
  font-family: var(--atlas); font-weight: 700; color: var(--ink);
  display: block; font-size: 0.86rem; letter-spacing: 0.01em;
}
.legend .cash { color: var(--taxi); font-variant-numeric: tabular-nums; }

/* ── The road entries. Five of them, one per highway. ─────────────────── */

.road {
  border-top: 2px solid var(--ink);
  padding: clamp(1.6rem, 5vw, 2.6rem) 0;
}
.road-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.9rem; }

/* A Thai motorway shield, drawn in CSS the way the real sign is drawn. */
.shield {
  flex: none;
  background: var(--road); color: #fff;
  border: 2px solid #fff; outline: 1px solid var(--road-2);
  border-radius: 5px;
  min-width: 3.4rem; padding: 0.3rem 0.4rem 0.35rem;
  text-align: center; line-height: 1;
}
.shield i {
  display: block; font-family: var(--atlas); font-style: normal;
  font-size: 0.52rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.85;
}
.shield b {
  display: block; font-family: var(--atlas); font-weight: 900;
  font-size: 1.5rem; letter-spacing: -0.02em; margin-top: 0.1rem;
}
.road-head h2 {
  font-family: var(--atlas); font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); line-height: 1.12;
  letter-spacing: -0.015em; margin: 0.1rem 0 0.15rem;
}
.road-head .thainame {
  font-family: var(--thai); font-size: 0.92rem; color: var(--ink-2);
  margin: 0; line-height: 1.4;
}
.road > .sheet > p { max-width: 58ch; margin: 0 0 1.3rem; }

/* The milestone strip: the stops on this road, in order outward from the
 * city. They are spaced evenly rather than to scale — Highway 4 runs 200,
 * 850 and 1,000 km, and at true scale the last two labels would sit on top
 * of each other. The distance is in the figure above each stop instead.
 * The strip scrolls sideways, which is what a road does. */
.strip { padding-bottom: 0.4rem; }
/* min-width holds the stops apart when there are more of them than fit;
 * width keeps the road drawn right across the sheet when there are fewer,
 * so a one-stop highway does not render as a stub. */
.mile {
  display: flex; align-items: stretch;
  min-width: max-content; width: 100%;
  border-top: 3px solid var(--road); position: relative;
}
.stop {
  flex: 1 1 0;
  padding: 0.85rem 1.5rem 0.2rem 0; min-width: 9.5rem; position: relative;
}
.stop::before {
  content: ""; position: absolute; top: -3px; left: 0;
  width: 3px; height: 0.7rem; background: var(--road);
}
.stop.far::before { height: 1.1rem; background: var(--taxi); }
.stop-km {
  font-family: var(--atlas); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--ink-2);
  font-variant-numeric: tabular-nums; display: block;
}
.stop-n {
  font-family: var(--atlas); font-weight: 700; font-size: 0.98rem;
  line-height: 1.2; display: block; margin: 0.15rem 0 0.05rem;
}
.stop-hr { font-size: 0.82rem; color: var(--ink-2); display: block; line-height: 1.35; }
.stop-p {
  font-family: var(--atlas); font-weight: 800; font-size: 1.12rem;
  color: var(--taxi); font-variant-numeric: tabular-nums;
  display: block; margin-top: 0.3rem;
}
.stop-p:empty::after { content: "—"; color: var(--ink-2); }
.stop-src {
  font-size: 0.72rem; color: var(--ink-2); display: block; line-height: 1.3;
  font-family: var(--atlas); letter-spacing: 0.02em;
}
.road-note {
  font-size: 0.9rem; color: var(--ink-2); max-width: 60ch;
  margin: 1rem 0 0; font-style: italic;
}

/* ── The river. A drawing, because the fact is geographic. ────────────── */

.chao {
  border-top: 2px solid var(--ink);
  padding: clamp(1.6rem, 5vw, 2.6rem) 0;
}
.chao h2 {
  font-family: var(--atlas); font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); letter-spacing: -0.015em;
  margin: 0 0 0.7rem;
}
.chao > .sheet > p { max-width: 58ch; margin: 0 0 1.4rem; }
.chao figure { margin: 0; }
.chao figcaption {
  font-family: var(--atlas); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-2); margin-top: 0.6rem;
  max-width: 60ch; line-height: 1.5; text-transform: none;
}
.chao figcaption b { color: var(--taxi); font-variant-numeric: tabular-nums; }

/* ── The two airports, set as a comparison, because that is the question
 *    a passenger actually has: which one am I at, and where do I walk? ── */

.ports { border-top: 2px solid var(--ink); padding: clamp(1.6rem, 5vw, 2.6rem) 0; }
.ports h2 {
  font-family: var(--atlas); font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); letter-spacing: -0.015em;
  margin: 0 0 0.7rem;
}
.ports > .sheet > p { max-width: 58ch; margin: 0 0 1.4rem; }
table.face { border-collapse: collapse; width: 100%; min-width: 34rem; }
table.face th, table.face td {
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0.9rem; text-align: left; vertical-align: top;
  font-size: 0.95rem; line-height: 1.5;
}
table.face thead th {
  border-bottom: 2px solid var(--ink); background: transparent;
  font-family: var(--atlas); font-weight: 800; font-size: 1rem;
  letter-spacing: -0.01em; padding-top: 0;
}
table.face thead th span {
  display: block; font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.1em; color: var(--ink-2);
}
table.face tbody th {
  font-family: var(--atlas); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  width: 9rem; white-space: nowrap;
}
table.face td b { font-family: var(--atlas); font-weight: 800; color: var(--road); }

/* ── The fare book, on its own sheet ──────────────────────────────────── */

.book { border-top: 2px solid var(--ink); padding: clamp(1.6rem, 5vw, 2.6rem) 0; }
.book h2 {
  font-family: var(--atlas); font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); letter-spacing: -0.015em;
  margin: 0 0 0.7rem;
}
.book > .sheet > p { max-width: 58ch; margin: 0 0 1.3rem; }

table.ledger { border-collapse: collapse; width: 100%; min-width: 40rem; }
table.ledger th, table.ledger td {
  padding: 0.5rem 0.7rem; text-align: left;
  border-bottom: 1px solid var(--line); font-size: 0.94rem;
}
table.ledger thead th {
  border-bottom: 2px solid var(--ink);
  font-family: var(--atlas); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap;
}
table.ledger thead th small {
  display: block; font-weight: 400; letter-spacing: 0.04em;
  text-transform: none; font-size: 0.66rem;
}
/* Specificity note: these must out-rank `table.ledger thead th` (0,2,1),
 * so they are written at the same depth rather than as a bare class. */
table.ledger thead th.pb-p, table.ledger tbody td.pb-p { text-align: right; }
table.ledger thead th.pb-b, table.ledger tbody td.pb-b { text-align: right; }
table.ledger td.pb-p {
  font-family: var(--atlas); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.ledger tr.home td:first-child { box-shadow: inset 3px 0 0 var(--taxi); }
table.ledger tr.home td.pb-p { color: var(--taxi); }
table.ledger td.pb-b a {
  font-family: var(--atlas); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--road-2); text-decoration: none;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0.22rem 0.6rem; white-space: nowrap; display: inline-block;
}
table.ledger td.pb-b a:hover { background: var(--road); color: #fff; border-color: var(--road); }
td.pb-msg { color: var(--ink-2); font-style: italic; }
.book-key {
  font-family: var(--atlas); font-size: 0.74rem; color: var(--ink-2);
  letter-spacing: 0.03em; margin: 0.8rem 0 0;
}
.book-key i {
  display: inline-block; width: 3px; height: 0.8em; background: var(--taxi);
  vertical-align: -1px; margin-right: 0.3rem;
}

/* ── The car, and everything you can ask for. Set as a specification
 *    table plus running prose — no card grid anywhere on this sheet. ─── */

.kit { border-top: 2px solid var(--ink); padding: clamp(1.6rem, 5vw, 2.6rem) 0; }
.kit h2 {
  font-family: var(--atlas); font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); letter-spacing: -0.015em;
  margin: 0 0 0.7rem;
}
.kit > .sheet > p { max-width: 58ch; margin: 0 0 1.3rem; }

table.spec { border-collapse: collapse; width: 100%; min-width: 26rem; }
table.spec th, table.spec td {
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0.8rem; text-align: left; font-size: 0.95rem;
}
table.spec thead th {
  border-bottom: 2px solid var(--ink);
  font-family: var(--atlas); font-weight: 800; font-size: 1rem;
}
table.spec tbody th {
  font-family: var(--atlas); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  width: 8.5rem;
}
table.spec tbody td { font-variant-numeric: tabular-nums; }
.rules {
  font-style: italic; color: var(--ink-2); font-size: 0.93rem;
  margin: 0.8rem 0 0; max-width: 60ch;
}

.ask { margin-top: clamp(1.6rem, 4vw, 2.2rem); }
.ask h3 {
  font-family: var(--atlas); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 0.6rem;
}
.ask p { max-width: 62ch; margin: 0 0 0.8rem; }
.ask p b { font-family: var(--atlas); font-weight: 700; color: var(--ink); }
.ask .cash {
  font-family: var(--atlas); font-weight: 800; color: var(--taxi);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── The colophon. What a map sheet prints at the bottom edge. ────────── */

.colophon {
  border-top: 2px solid var(--ink);
  background: var(--map-3);
  margin-top: clamp(1.6rem, 5vw, 2.6rem);
  padding: clamp(1.6rem, 5vw, 2.4rem) 0 2rem;
}
.colophon dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.2rem 2rem; margin: 0 0 1.4rem;
}
.colophon dt {
  font-family: var(--atlas); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; margin-bottom: 0.5rem;
}
.colophon dd { margin: 0 0 0.35rem; font-size: 0.92rem; line-height: 1.5; }
.colophon dd a { display: inline-block; }
.colophon .imprint {
  font-size: 0.88rem; line-height: 1.6; color: var(--ink-2);
  max-width: 62ch; margin: 0 0 0.9rem;
  border-top: 1px solid var(--line); padding-top: 1rem;
}
.colophon .stamp {
  font-family: var(--atlas); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2); margin: 0;
}

/* ── Small screens. The strip keeps scrolling; everything else stacks. ── */

@media (max-width: 40rem) {
  body { background-size: 100% 6rem; }
  /* Scaled to a phone the two drawings would set their labels at about
   * six pixels. Hold them at a legible width and let the reader push them
   * sideways instead — a map is a thing you move around under your hand. */
  .fan .scroll-x svg, .chao .scroll-x svg { min-width: 38rem; }
  .plate .sheet { gap: 0.5rem 0.9rem; }
  .index { order: 3; width: 100%; gap: 0.1rem 0.85rem; }
  .index a { font-size: 0.7rem; }
  table.face { min-width: 30rem; }
  .stop { min-width: 8.5rem; padding-right: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Compatibility layer — book, fares, day-trips, contact and 404
   ---------------------------------------------------------------------
   Those pages were built on Tabler and still carry its utility class
   names through markup that also carries the booking logic: element ids
   the inline scripts read, one submit handler shared by two modes, and
   two scripts that talk to each other through globals. Rewriting that
   markup to change the paint is how you break a page that takes money.

   So the utilities are redefined here in this sheet's terms. The names
   are inherited; every value below is this site's own — map paper,
   motorway green, cab pink for money, square edges because an atlas has
   no rounded corners. Tabler is not loaded anywhere on the site.
   ===================================================================== */

.page { min-height: 100%; }
.container-xl { max-width: 68rem; margin-inline: auto; padding-inline: var(--gut); }

.row { display: flex; flex-wrap: wrap; margin-inline: -.5rem; }
/* Every column selector below is written as a child of .row so it matches the
 * base rule's specificity (0,2,0) and wins on source order. Written as bare
 * `.col-md-3` they are (0,1,0), the base rule's width:100% outranks them, and
 * every grid on the site silently collapses to one column at every width —
 * which is exactly what the inherited stylesheet did. */
.row > [class*="col-"] { padding-inline: .5rem; width: 100%; min-width: 0; }
.g-2 { row-gap: .5rem; } .g-3 { row-gap: 1rem; } .g-4 { row-gap: 1.5rem; }
.row > .col-6 { width: 50%; } .row > .col-12 { width: 100%; }
@media (min-width: 768px) {
  .row > .col-md-3 { width: 25%; } .row > .col-md-4 { width: 33.3333%; }
  .row > .col-md-6 { width: 50%; } .row > .col-md-8 { width: 66.6667%; }
  .text-md-start { text-align: left; } .text-md-end { text-align: right; }
  .mb-md-0 { margin-bottom: 0; } .d-md-inline { display: inline; }
  .d-md-block { display: block; }
}
@media (min-width: 992px) {
  .row > .col-lg-3 { width: 25%; } .row > .col-lg-4 { width: 33.3333%; }
  .row > .col-lg-5 { width: 41.6667%; } .row > .col-lg-6 { width: 50%; }
  .row > .col-lg-7 { width: 58.3333%; } .row > .col-lg-8 { width: 66.6667%; }
  .row > .col-lg-10 { width: 83.3333%; }
  .order-lg-1 { order: 1; } .order-lg-2 { order: 2; }
}
@media (min-width: 576px) { .d-sm-inline { display: inline; } .flex-sm-row { flex-direction: row; } }
.mx-auto { margin-inline: auto; }

.d-flex { display: flex; } .d-block { display: block; } .d-none { display: none; }
.d-grid { display: grid; }
.flex-row { flex-direction: row; } .flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; } .flex-fill { flex: 1 1 auto; }
.align-items-center { align-items: center; } .align-items-start { align-items: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.ms-auto { margin-left: auto; } .me-auto { margin-right: auto; }
.w-100 { width: 100%; } .h-100 { height: 100%; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; }
.order-1 { order: 1; } .order-2 { order: 2; }
[hidden] { display: none !important; }

.m-0{margin:0}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mt-5{margin-top:3rem}.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}
.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.my-3{margin-block:1rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}
.px-3{padding-inline:1rem}.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}
.py-3{padding-block:1rem}.py-4{padding-block:1.5rem}.py-5{padding-block:clamp(2.2rem,5vw,3.4rem)}
.pt-0{padding-top:0}.pt-2{padding-top:.5rem}.pt-3{padding-top:1rem}.pb-0{padding-bottom:0}

.text-center { text-align: center; } .text-end { text-align: right; } .text-start { text-align: left; }
.text-muted { color: var(--ink-2); }
.text-white, .text-dark { color: var(--ink); }
.text-decoration-none { text-decoration: none; }
.fw-bold { font-weight: 700; } .fw-medium { font-weight: 500; } .fw-normal { font-weight: 400; }
.small, small { font-size: .86em; }
.lead { font-size: 1.08rem; } .opacity-90 { opacity: .9; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
h1, h2, h3, h4, .h3, .h4, .h5, .h6 {
  font-family: var(--atlas); font-weight: 800; letter-spacing: -.018em;
  line-height: 1.1; margin: 0 0 .5rem;
}
.h3 { font-size: 1.7rem; } .h4 { font-size: 1.45rem; } .h5 { font-size: 1.2rem; } .h6 { font-size: 1.04rem; }
.fs-5 { font-size: 1.15rem; }
.display-1 {
  font-family: var(--atlas); font-weight: 900;
  font-size: clamp(4rem, 12vw, 8rem); line-height: .92; letter-spacing: -.04em;
}

.card { background: var(--card); border: 1px solid var(--line); }
.card-header {
  background: var(--road); color: #fff; padding: .65rem 1rem;
  font-family: var(--atlas); font-weight: 700;
}
.card-header h1, .card-header h2, .card-header h3 { margin: 0; color: inherit; }
.card-body { padding: 1rem; }
.card-title { font-family: var(--atlas); font-weight: 700; }
.border-0 { border: 0; } .shadow, .shadow-sm, .shadow-lg { box-shadow: none; }
.rounded { border-radius: 0; }
.border-top { border-top: 1px solid var(--line); }
.bg-white { background: var(--card); }
.bg-green, .bg-azure, .bg-teal, .bg-azure-lt { background: var(--road); }
.text-green-fg, .text-azure-fg, .text-teal-fg { color: #fff; }
.text-warning, .text-success { color: var(--road-2); }
.text-danger { color: #a8102b; }

.btn {
  display: inline-block; font-family: var(--atlas); font-weight: 700; font-size: .92rem;
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
  padding: .55rem 1.1rem; border: 1px solid var(--line-2); border-radius: 2px;
  background: transparent; color: var(--ink); text-decoration: none;
  cursor: pointer; line-height: 1.35;
}
.btn:hover { border-color: var(--road); color: var(--road-2); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { border-color: var(--line-2); color: var(--ink); }
.btn-lg { font-size: 1rem; padding: .7rem 1.4rem; }
.btn-sm { font-size: .8rem; padding: .3rem .65rem; }
.btn-taxi, .btn-primary, .btn-warning, .btn-ocean {
  background: var(--taxi); border-color: var(--taxi); color: #fff;
}
.btn-taxi:hover, .btn-primary:hover, .btn-warning:hover, .btn-ocean:hover {
  background: #a30f59; border-color: #a30f59; color: #fff;
}
.btn-dark, .btn-success {
  background: var(--road); border-color: var(--road); color: #fff;
}
.btn-dark:hover, .btn-success:hover { background: var(--road-2); border-color: var(--road-2); color: #fff; }
.btn-light { background: var(--card); border-color: var(--line-2); color: var(--ink); }
.btn-outline-dark, .btn-outline-light, .btn-outline-secondary,
.btn-outline-success, .btn-outline-ocean { background: transparent; }
.btn-group { display: inline-flex; }
.btn-group > .btn + .btn { margin-left: -1px; }

.form-label {
  display: block; font-family: var(--atlas); font-weight: 700; font-size: .76rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: .3rem;
}
.form-control, .form-select {
  display: block; width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 2px;
  padding: .55rem .7rem;
}
.form-select {
  appearance: none; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form-control::placeholder { color: var(--ink-2); }
.form-control:focus, .form-select:focus {
  outline: 2px solid var(--taxi); outline-offset: 1px; border-color: var(--taxi);
}
.form-check { display: flex; align-items: flex-start; gap: .5rem; }
.form-check-input { margin-top: .3rem; accent-color: var(--taxi); }
.form-check-label { font-size: .94rem; }
textarea.form-control { min-height: 6rem; resize: vertical; }
.input-group { display: flex; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; }
.input-group > * + * { margin-left: -1px; }

.alert {
  border: 1px solid var(--line-2); border-left-width: 6px;
  background: var(--card); padding: .75rem 1rem;
}
.alert-success { border-left-color: var(--road); }
.alert-danger, .alert-warning { border-left-color: var(--taxi); }
.alert-info { border-left-color: var(--line-2); }
.badge {
  display: inline-block; font-family: var(--atlas); font-weight: 700; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .45rem; border: 1px solid var(--line-2);
}
.spinner-border {
  display: inline-block; width: 1.3rem; height: 1.3rem; vertical-align: -.2em;
  border: 3px solid var(--line); border-right-color: var(--taxi); border-radius: 50%;
  animation: bk-spin .7s linear infinite;
}
.spinner-border-sm { width: .9rem; height: .9rem; border-width: 2px; }
@keyframes bk-spin { to { transform: rotate(360deg); } }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); text-align: left; }
.table-responsive { overflow-x: auto; }

/* The booking form's own furniture. Route choices are set as milestones on
   a road, the way they are on the front sheet, rather than as cards. */
.car-type-btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 2px; background: transparent;
  color: var(--ink); padding: .55rem .4rem;
  font-family: var(--atlas); font-weight: 700; font-size: .9rem;
}
.car-type-btn:hover { border-color: var(--road); }
.car-type-btn.active { background: var(--road); border-color: var(--road); color: #fff; }
.route-card, .route-grid-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-left: 3px solid var(--line); background: var(--card);
  color: inherit; padding: .6rem .8rem; margin-bottom: .4rem;
}
.route-card:hover, .route-grid-card:hover { border-left-color: var(--road); }
.route-card.selected, .route-grid-card.selected {
  border-left-color: var(--taxi); background: var(--map-3);
}
.route-from-to { font-family: var(--atlas); font-weight: 700; font-size: 1rem; }
.route-price {
  font-family: var(--atlas); font-weight: 800; color: var(--taxi);
  font-variant-numeric: tabular-nums;
}
.booking-summary { border: 1px solid var(--line-2); background: var(--card); padding: .8rem 1rem; }
.booking-summary-item { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; }
.booking-summary-total {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 2px solid var(--ink); margin-top: .5rem; padding-top: .5rem;
  font-family: var(--atlas); font-weight: 900; font-size: 1.3rem;
  color: var(--taxi); font-variant-numeric: tabular-nums;
}

/* The three-step strip, set as route markers rather than filled circles. */
.step-indicator {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .9rem; border: 1px solid var(--line); color: var(--ink-2);
}
.step-number {
  font-family: var(--atlas); font-weight: 900; font-size: 1rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  background: var(--line); color: var(--ink-2); flex: 0 0 auto; border-radius: 2px;
}
.step-label { font-family: var(--atlas); font-weight: 700; font-size: .9rem; }
.step-line { flex: 1 1 auto; height: 3px; background: var(--line); min-width: 14px; }
.step-indicator.active { border-color: var(--road); color: var(--ink); }
.step-indicator.active .step-number { background: var(--road); color: #fff; }
.step-indicator.completed { border-color: var(--line-2); color: var(--ink); }
.step-indicator.completed .step-number { background: var(--road-2); color: #fff; }

/* Day trips. The card is a map inset: a green title bar and a plain body. */
.feature-card { border-top: 2px solid var(--ink); padding-top: .8rem; }
.feature-icon { display: none; }
.feature-title { font-family: var(--atlas); font-weight: 800; font-size: 1.05rem; margin: 0 0 .2rem; }
.hero-section { padding-block: clamp(1.8rem, 5vw, 3rem); }
.hero-title {
  font-family: var(--atlas); font-weight: 900; letter-spacing: -.025em;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3rem); line-height: 1.04; margin: 0 0 .6rem;
}
.hero-subtitle { color: var(--ink-2); margin: 0 0 1.2rem; max-width: 56ch; }
.cta-section { background: var(--map-3); border-block: 2px solid var(--ink); }
.tour-card {
  background: var(--card); border: 1px solid var(--line);
  height: 100%; display: flex; flex-direction: column;
}
.tour-card-header { background: var(--road); color: #fff; padding: .85rem 1.1rem; }
.tour-card-header h3 { color: #fff; margin: 0 0 .15rem; font-size: 1.15rem; }
.tour-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }
.tour-info { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tour-info-item { display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--ink-2); }
.tour-info-item svg { color: var(--road); }
.tour-includes {
  background: var(--map); border-left: 3px solid var(--line-2);
  padding: .7rem .8rem; margin-bottom: 1rem; font-size: .92rem; color: var(--ink-2);
}
.tour-includes strong { color: var(--ink); }
.tour-prices { margin-top: auto; }
.tour-price-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1rem;
  align-items: center; padding: .55rem 0; border-top: 1px solid var(--line);
}
.tour-price-type { font-family: var(--atlas); font-weight: 700; }
.tour-price-value {
  font-family: var(--atlas); font-weight: 900; color: var(--taxi);
  font-variant-numeric: tabular-nums;
}
.tour-price-book { justify-self: end; }

/* The FAQ, native <details> rather than a collapse plugin. */
.qa-list { border-top: 2px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.qa > summary { list-style: none; cursor: pointer; padding: .85rem 2rem .85rem 0; position: relative; }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: "+"; position: absolute; right: .2rem; top: .8rem;
  font-family: var(--atlas); font-weight: 700; font-size: 1.3rem; color: var(--taxi); line-height: 1;
}
.qa[open] > summary::after { content: "\2212"; }
.qa > summary:hover h3 { color: var(--road-2); }
.qa > summary h3 { font-family: var(--atlas); font-weight: 700; font-size: 1.02rem; margin: 0; }
.qa-body { padding: 0 2rem 1rem 0; color: var(--ink-2); font-size: .96rem; }

.nf-link { border-top: 1px solid var(--line); padding: .65rem .2rem; display: block; }
.nf-link:hover { color: var(--taxi); }

/* Turnstile ships a fixed 300px iframe; without this it pushes phones sideways. */
.cf-turnstile { max-width: 100%; overflow-x: auto; }

/* Palette names that still appear inside inline styles in JS template
   literals on book.html and day-trips.html. Hand-editing those strings is
   how a booking page breaks, so the names survive and point at this
   sheet's ink instead. */
:root {
  --ocean-blue: #c2136a; --ocean-blue-dark: #a30f59; --ocean-blue-light: #e6197c;
  --sky-blue: #d3cfbe; --sand-yellow: #0f6b3f; --sand-yellow-dark: #0a4d2d;
  --pattaya-dark: #16211c; --pattaya-gray: #59635c; --pattaya-gray-light: #d3cfbe;
  --pattaya-white: #16211c; --pattaya-off-white: #f3f1e9;
}