/* Airport to Pattaya Taxi
   ----------------------------------------------------------------------
   This site sells one thing: the two hours between landing at a Bangkok
   airport and being dropped in Pattaya. So the page is built as the sheet
   you would want open on your phone when the wheels touch down — the
   meeting point first, the money second, everything else after.

   The visual language is airport wayfinding, because that is literally
   what the most useful part of this page is: a sign telling you which
   level to walk to. Signs are square, high contrast, and set in condensed
   caps. Nothing here is rounded, nothing is shadowed, nothing fades into
   anything else. The one colour is the yellow used to highlight a figure
   on a printed sheet, and it is spent only on numbers that cost you money
   or time if you get them wrong.

   No Tabler, no Bootstrap, no framework. Every class below is this site's. */

:root {
  --paper:   #f2f1ed;   /* cool neutral stock, not cream */
  --card:    #ffffff;
  --ink:     #15171a;
  --ink-2:   #5a5d63;
  --rule:    #cdcbc4;
  --rule-hard: #15171a;
  --plate:   #15171a;   /* sign face */
  --plate-t: #ffffff;
  --signal:  #ffd400;   /* highlighter — figures only */
  --pad:     clamp(1rem, 4vw, 2.75rem);
  --wrap:    72rem;
  --sans:    "Asap", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --cond:    "Barlow Condensed", "Asap Condensed", ui-sans-serif, system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* Anything that could outgrow its track scrolls inside itself, never the page. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ masthead
   A sign board, not a hero. Black bar, condensed caps, no gradient. */
.mast { background: var(--plate); color: var(--plate-t); }
.mast .wrap { display: flex; align-items: center; gap: 1rem; min-height: 56px; }
.mast-brand {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.mast-brand img { height: 26px; width: auto; }
.mast-brand b {
  font-family: var(--cond); font-weight: 600; font-size: 1.15rem;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.mast-nav { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.mast-nav a {
  font-family: var(--cond); font-size: 1rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding: .35rem .6rem; white-space: nowrap;
}
.mast-nav a:hover { background: #2a2d33; }
.mast-nav a.cta { background: var(--signal); color: var(--ink); }
.mast-nav a.cta:hover { background: #ffe14d; }
.mast-nav a.now { box-shadow: inset 0 -3px 0 var(--signal); }
.lang { display: flex; gap: .35rem; padding-left: .5rem; margin-left: .25rem; border-left: 1px solid #3a3d43; }
.lang a { padding: .25rem; line-height: 0; }
.lang img { width: 22px; height: 15px; opacity: .5; }
.lang a.now img { opacity: 1; outline: 2px solid var(--signal); outline-offset: 1px; }

/* ------------------------------------------------------------------- opener
   One sentence of what this is, and the two runs it covers, stated as a
   board line rather than a slogan. */
.open { background: var(--plate); color: var(--plate-t); padding-block: clamp(1.6rem, 5vw, 3rem); }
.open h1 {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 1.1rem + 4vw, 3.6rem); line-height: 1.02;
  letter-spacing: -.005em; margin: 0; text-wrap: balance; max-width: 18ch;
}
.open p { max-width: 54ch; color: #c8cad0; margin: .9rem 0 0; }
.open .acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* the two runs, as a board */
.runs { margin-top: 1.8rem; border-top: 1px solid #3a3d43; }
.run {
  display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem;
  align-items: baseline; padding: .7rem 0; border-bottom: 1px solid #3a3d43;
}
.run-o {
  font-family: var(--cond); font-size: 1.35rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .01em;
}
.run-o small { display: block; font-family: var(--sans); font-size: .78rem;
  font-weight: 400; text-transform: none; letter-spacing: 0; color: #9b9ea6; }
.run-t {
  font-family: var(--cond); font-size: 1.25rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --------------------------------------------------------------- buttons */
.go, .go-2 {
  display: inline-block; font-family: var(--cond); font-size: 1.05rem;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .6rem 1.25rem; text-decoration: none; border: 2px solid transparent;
}
.go { background: var(--signal); color: var(--ink); }
.go:hover { background: #ffe14d; }
.go-2 { border-color: currentColor; }
.go-2:hover { background: rgba(255,255,255,.12); }
.on-paper .go-2:hover { background: rgba(0,0,0,.06); }

/* --------------------------------------------------------------- sections */
.sec { padding-block: clamp(2.2rem, 6vw, 4rem); border-bottom: 2px solid var(--rule-hard); }
.sec:last-of-type { border-bottom: 0; }
.secno {
  font-family: var(--cond); font-size: .95rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 .1rem;
}
.sec h2 {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1.05;
  margin: 0 0 .5rem; text-wrap: balance;
}
.sec > .wrap > p { max-width: 62ch; }
.lede { color: var(--ink-2); margin: 0 0 1.6rem; }

/* highlighter — only on a figure that costs money or time to get wrong */
.mark { background: var(--signal); padding: 0 .18em; font-weight: 600; }

/* ------------------------------------------------------------ meeting point
   The two airport signs, printed side by side, always both. No toggle:
   you already know which one you landed at, and the other one is the
   answer for your return trip. */
.signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem; }
.sign { border: 2px solid var(--rule-hard); background: var(--card); min-width: 0; }
.sign-h {
  background: var(--plate); color: var(--plate-t);
  padding: .7rem 1rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.sign-h b {
  font-family: var(--cond); font-size: 1.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em;
}
.sign-h span { font-size: .8rem; color: #a9acb3; }
.sign-b { padding: 1rem 1rem 1.15rem; }

/* the walk, as three numbered levels with an arrow between them */
.walk { list-style: none; margin: 0 0 1rem; padding: 0; }
.walk li {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 .9rem;
  align-items: start; padding: .55rem 0; border-top: 1px solid var(--rule);
}
.walk li:first-child { border-top: 0; padding-top: 0; }
.lvl {
  font-family: var(--cond); font-weight: 700; font-size: 1.05rem;
  text-align: center; text-transform: uppercase; line-height: 1.15;
  background: var(--plate); color: var(--plate-t); padding: .3rem .2rem;
  font-variant-numeric: tabular-nums;
}
.lvl.hi { background: var(--signal); color: var(--ink); }
.walk strong { display: block; font-size: .98rem; }
.walk p { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-2); }
.up { font-family: var(--cond); font-weight: 700; font-size: 1.05rem; }

.sign-note {
  border-top: 2px solid var(--rule-hard); padding-top: .7rem; margin-top: .2rem;
  font-size: .88rem; color: var(--ink-2);
}
.sign-note b { color: var(--ink); }

/* a caveat that applies to both signs */
.both {
  margin-top: 1.5rem; border: 2px solid var(--rule-hard); border-left-width: 10px;
  background: var(--card); padding: .95rem 1.1rem;
}
.both h3 { font-family: var(--cond); font-size: 1.15rem; font-weight: 700;
  text-transform: uppercase; margin: 0 0 .3rem; }
.both p { margin: 0; font-size: .95rem; }

/* ------------------------------------------------------------------ tariff
   A ruled fare sheet. The tbody id is a contract with functions/_middleware.js,
   which server-renders these rows so a crawler sees the prices; do not rename
   it without changing the middleware in the same commit. */
.tariff { border: 2px solid var(--rule-hard); background: var(--card); }
.tariff table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tariff thead th {
  background: var(--plate); color: var(--plate-t); text-align: left;
  font-family: var(--cond); font-weight: 600; font-size: 1rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .6rem .8rem; white-space: nowrap;
}
.tariff thead th.ta-p { text-align: right; }
.tariff thead th.ta-b { text-align: right; }
.tariff thead th small { display: block; font-family: var(--sans); font-size: .68rem;
  font-weight: 400; letter-spacing: 0; text-transform: none; color: #a9acb3; }
.tariff tbody td { padding: .6rem .8rem; border-top: 1px solid var(--rule); vertical-align: middle; }
.tariff tbody tr:nth-child(odd) td { background: #faf9f6; }
/* The runs that start at an airport are what this site sells; the rest of the
   list is the return leg and the long-distance work, which is real but is not
   the reason anyone is on this page. */
.tariff tbody tr.air td { background: #fffbe0; }
.tariff tbody tr.air + tr:not(.air) td { border-top: 2px solid var(--rule-hard); }
.ta-p { text-align: right; font-family: var(--cond); font-size: 1.15rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ta-b { text-align: right; white-space: nowrap; }
.ta-b a {
  font-family: var(--cond); font-weight: 600; font-size: .95rem; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; padding: .3rem .7rem;
  border: 2px solid var(--rule-hard); display: inline-block;
}
.ta-b a:hover { background: var(--signal); }
.ta-msg { padding: 1.6rem .8rem; text-align: center; color: var(--ink-2); }
.tariff-foot {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center;
  justify-content: space-between; margin-top: 1rem;
}
.tariff-foot p { margin: 0; font-size: .9rem; color: var(--ink-2); max-width: 46ch; }

/* ------------------------------------------------------- delays and waiting */
.late { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.late > div { border-top: 2px solid var(--rule-hard); padding-top: .8rem; min-width: 0; }
.late h3 { font-family: var(--cond); font-size: 1.2rem; font-weight: 700;
  text-transform: uppercase; margin: 0 0 .3rem; }
.late p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.late p + p { margin-top: .5rem; }

/* ----------------------------------------------------------------- the car */
.cars { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.car { border: 2px solid var(--rule-hard); background: var(--card); padding: .9rem 1rem; min-width: 0; }
.car b { font-family: var(--cond); font-size: 1.35rem; font-weight: 700;
  text-transform: uppercase; display: block; line-height: 1.1; }
.car dl { margin: .5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; font-size: .92rem; }
.car dt { color: var(--ink-2); }
.car dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }

.addons { border-top: 2px solid var(--rule-hard); }
.addon {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--rule);
}
.addon h3 { font-family: var(--cond); font-size: 1.15rem; font-weight: 600;
  text-transform: uppercase; margin: 0; }
.addon p { grid-column: 1 / -1; margin: 0; font-size: .92rem; color: var(--ink-2); max-width: 62ch; }
.addon .fee {
  font-family: var(--cond); font-size: 1.1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rules { margin-top: 1.4rem; font-size: .92rem; color: var(--ink-2); }
.rules ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* ------------------------------------------------------------- out of town */
.outs { columns: 2 15rem; column-gap: 2rem; }
.out { break-inside: avoid; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.out b { font-family: var(--cond); font-size: 1.15rem; font-weight: 600; text-transform: uppercase; }
.out p { margin: .1rem 0 0; font-size: .9rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--plate); color: #b9bcc3; padding-block: 2rem; }
.foot a { color: #fff; }
.foot-top { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-family: var(--cond);
  font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; }
.foot-nav a { text-decoration: none; }
.foot-nav a:hover { color: var(--signal); }
.foot-say { border-top: 1px solid #3a3d43; margin-top: 1.4rem; padding-top: 1.2rem;
  font-size: .88rem; max-width: 62ch; }
.foot-say a { text-decoration: underline; }
.foot-end { margin: 1.2rem 0 0; font-size: .8rem; color: #83868d; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 40rem) {
  body { font-size: 16px; }
  .mast .wrap { flex-wrap: wrap; padding-block: .5rem; gap: .5rem; }
  .mast-nav { width: 100%; justify-content: flex-start; overflow-x: auto; }
  .run { grid-template-columns: 1fr; }
  .run-t { justify-self: start; }
  .outs { columns: 1; }
}

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

:lang(th) { line-height: 1.85; }
:lang(th) .open h1, :lang(th) .sec h2 { line-height: 1.35; }

/* =====================================================================
   Compatibility layer — booking, contact, tour and 404
   ---------------------------------------------------------------------
   Those four pages were built on Tabler/Bootstrap and carry its utility
   classes through markup that also carries the booking logic: element ids
   the inline scripts read, a submit handler shared by two modes, and two
   scripts that talk to each other through globals. Rewriting that markup
   to change the paint would have risked the one thing on this site that
   takes money.

   So instead the utilities those pages actually use are redefined here, in
   this site's own terms: square, ruled, condensed, no gradients. Tabler is
   no longer loaded anywhere. Anything not listed below was not in use.
   ===================================================================== */

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

/* --- grid ------------------------------------------------------------ */
.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. */
.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%; }
@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; }
}
@media (min-width: 992px) {
  .row > .col-lg-3 { width: 25%; } .row > .col-lg-4 { width: 33.3333%; }
  .row > .col-lg-6 { width: 50%; } .row > .col-lg-8 { width: 66.6667%; } .row > .col-lg-10 { width: 83.3333%; }
}
.mx-auto { margin-inline: auto; }

/* --- flex / display -------------------------------------------------- */
.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; }
.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; }
[hidden] { display: none !important; }

/* --- spacing (Bootstrap's 0 .25 .5 1 1.5 3 scale) -------------------- */
.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}
.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-4{padding-block:1.5rem}.py-5{padding-block:clamp(2rem,5vw,3rem)}
.pt-0{padding-top:0}.pb-0{padding-bottom:0}

/* --- type ------------------------------------------------------------ */
.text-center { text-align: center; } .text-end { text-align: right; } .text-start { text-align: left; }
.text-muted { color: var(--ink-2); }
.text-white { color: #fff; } .text-dark { color: var(--ink); }
.text-decoration-none { text-decoration: none; }
.fw-bold { font-weight: 600; } .fw-normal { font-weight: 400; }
.small, small { font-size: .86em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
h1, h2, h3, h4, .h4, .h5, .h6 {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  line-height: 1.1; margin: 0 0 .5rem;
}
.h4 { font-size: 1.5rem; } .h5 { font-size: 1.25rem; } .h6 { font-size: 1.08rem; }

/* --- cards ----------------------------------------------------------- */
.card { background: var(--card); border: 2px solid var(--rule-hard); }
.card-header {
  background: var(--plate); color: var(--plate-t); padding: .7rem 1rem;
  font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.card-header h1, .card-header h2, .card-header h3 { margin: 0; color: inherit; }
.card-body { padding: 1rem; }
.card-title { font-family: var(--cond); text-transform: uppercase; }
.border-0 { border: 0; } .shadow-sm { box-shadow: none; } .rounded { border-radius: 0; }
.bg-white { background: var(--card); }

/* --- buttons --------------------------------------------------------- */
.btn {
  display: inline-block; font-family: var(--cond); font-weight: 600; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  padding: .55rem 1.1rem; border: 2px solid var(--rule-hard); border-radius: 0;
  background: var(--card); color: var(--ink); text-decoration: none; cursor: pointer;
  line-height: 1.3;
}
.btn:hover { background: var(--signal); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--card); }
.btn-lg { font-size: 1.15rem; padding: .7rem 1.4rem; }
.btn-sm { font-size: .9rem; padding: .3rem .7rem; }
.btn-taxi, .btn-ocean { background: var(--signal); border-color: var(--rule-hard); color: var(--ink); }
.btn-taxi:hover, .btn-ocean:hover { background: #ffe14d; }
.btn-dark { background: var(--plate); color: var(--plate-t); }
.btn-dark:hover { background: #2a2d33; color: var(--plate-t); }
.btn-success { background: var(--plate); color: var(--plate-t); }
.btn-success:hover { background: #2a2d33; color: var(--plate-t); }
.btn-outline-ocean, .btn-outline-dark { background: transparent; }
.btn-outline-light { background: transparent; border-color: currentColor; color: inherit; }
.btn-outline-light:hover { background: rgba(0,0,0,.06); color: inherit; }

/* --- forms ----------------------------------------------------------- */
.form-label {
  display: block; font-family: var(--cond); font-size: .95rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: .25rem;
}
.form-control, .form-select {
  display: block; width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--card); border: 2px solid var(--rule); border-radius: 0;
  padding: .5rem .65rem;
}
.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:focus, .form-select:focus {
  outline: 3px solid var(--signal); outline-offset: 0; border-color: var(--rule-hard);
}
.form-check { display: flex; align-items: flex-start; gap: .5rem; }
.form-check-input { margin-top: .3rem; accent-color: var(--ink); }
.form-check-label { font-size: .95rem; }
textarea.form-control { min-height: 6rem; resize: vertical; }

/* --- feedback -------------------------------------------------------- */
.alert { border: 2px solid var(--rule-hard); background: var(--card); padding: .8rem 1rem; }
.alert-success { border-left-width: 10px; }
.alert-danger, .alert-warning { border-left-width: 10px; background: #fffbe0; }
.alert-info { border-left-width: 10px; }
.badge {
  display: inline-block; font-family: var(--cond); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem;
  border: 1px solid var(--rule-hard); background: var(--card); color: var(--ink);
}
.spinner-border {
  display: inline-block; width: 1.4rem; height: 1.4rem; vertical-align: -.2em;
  border: 3px solid var(--rule); border-right-color: var(--ink); border-radius: 50%;
  animation: pt-spin .7s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }

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

/* --- the booking screen's own components ------------------------------ */
.car-type-btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  border: 2px solid var(--rule); background: var(--card); padding: .6rem .4rem;
  font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.car-type-btn:hover { border-color: var(--rule-hard); }
.car-type-btn.active { background: var(--signal); border-color: var(--rule-hard); }
.route-card, .route-grid-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 2px solid var(--rule); background: var(--card); padding: .65rem .8rem;
  margin-bottom: .5rem;
}
.route-card:hover, .route-grid-card:hover { border-color: var(--rule-hard); }
.route-card.selected, .route-grid-card.selected { border-color: var(--rule-hard); background: #fffbe0; }
.route-from-to { font-family: var(--cond); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; }
.route-price { font-family: var(--cond); font-weight: 700; font-variant-numeric: tabular-nums; }
.booking-summary { border: 2px solid var(--rule-hard); background: #fffbe0; padding: .8rem 1rem; }
.booking-summary-item { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.booking-summary-total {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 2px solid var(--rule-hard); margin-top: .5rem; padding-top: .5rem;
  font-family: var(--cond); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Turnstile ships a fixed 300px iframe; without this it pushes narrow phones sideways. */
.cf-turnstile { max-width: 100%; overflow-x: auto; }

/* The last few utilities those four pages use. Tabler's colour utilities
   (bg-azure, text-green-fg …) were carrying meaning on the contact and tour
   pages, so they are kept as roles rather than hues: everything highlighted
   uses the one signal colour, and only genuine errors use red. */
.row > .col-12 { width: 100%; }
@media (min-width: 992px) { .row > .col-lg-5 { width: 41.6667%; } .row > .col-lg-7 { width: 58.3333%; } }
.flex-fill { flex: 1 1 auto; }
.order-2 { order: 2; }
@media (min-width: 992px) { .order-lg-2 { order: 2; } .order-lg-1 { order: 1; } }
.shadow-lg { box-shadow: none; }
.border-top { border-top: 2px solid var(--rule-hard); }
.text-danger { color: #a3231b; }
.bg-green, .bg-azure, .bg-teal, .bg-azure-lt { background: var(--signal); }
.text-green-fg, .text-azure-fg, .text-teal-fg { color: var(--ink); }
.input-group { display: flex; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; }
.input-group > * + * { margin-left: -2px; }
.btn-outline-secondary { background: transparent; border-color: var(--rule); }
.spinner-border-sm { width: .95rem; height: .95rem; border-width: 2px; }

/* The feature cards on the tour page: a rule and a label, not a floating tile. */
.feature-card { border-top: 2px solid var(--rule-hard); padding-top: .8rem; }
.feature-icon { display: none; }
.feature-title { font-family: var(--cond); font-size: 1.15rem; font-weight: 700;
  text-transform: uppercase; margin: 0 0 .25rem; }

/* The old palette variables, remapped rather than removed.
   `var(--ocean-blue)` is written into inline styles that sit inside JS template
   literals on booking.html and tour.html — the strings that build a route row
   or a tour card. Editing those by hand is how you break a booking page. So the
   names survive and point at this site's ink instead, which is correct in every
   place they are used: as a dark ground behind white text, and as the colour of
   a price. */
:root {
  --ocean-blue:       #15171a;
  --ocean-blue-dark:  #000000;
  --ocean-blue-light: #2a2d33;
  --sky-blue:         #cdcbc4;
  --sand-yellow:      #ffd400;
  --sand-yellow-dark: #e6bf00;
  --pattaya-dark:     #15171a;
  --pattaya-gray:     #5a5d63;
  --pattaya-gray-light: #cdcbc4;
  --pattaya-white:    #ffffff;
  --pattaya-off-white:#f2f1ed;
}

/* remaining utilities those pages use */
.lead { font-size: 1.1rem; }
.opacity-90 { opacity: .9; }
.pt-2 { padding-top: .5rem; } .pt-3 { padding-top: 1rem; }
.py-3 { padding-block: 1rem; } .mt-5 { margin-top: 3rem; }
.order-1 { order: 1; }
@media (min-width: 576px) { .flex-sm-row { flex-direction: row; } }
.fw-medium { font-weight: 500; }
.text-success { color: var(--ink); }
.btn-group { display: inline-flex; }
.btn-group > .btn + .btn { margin-left: -2px; }
.btn-light { background: var(--card); }
.btn-primary, .btn-warning { background: var(--signal); border-color: var(--rule-hard); color: var(--ink); }
.btn-primary:hover, .btn-warning:hover { background: #ffe14d; }
.btn-outline-success { background: transparent; }
.display-1 { font-family: var(--cond); font-size: clamp(4rem, 12vw, 8rem); line-height: .95; }

/* 404 and the contact opener reuse the homepage's opener vocabulary */
.hero-section { background: var(--plate); color: var(--plate-t); padding-block: clamp(1.8rem, 5vw, 3rem); }
.hero-section .btn-outline-light:hover { background: rgba(255,255,255,.12); }
.hero-title { font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.8rem, 1.1rem + 3vw, 3rem); line-height: 1.03; margin: 0 0 .6rem; }
.hero-subtitle { color: #c8cad0; margin: 0 0 1.2rem; }
.cta-section { background: var(--plate); color: var(--plate-t); }
.cta-section h2 { color: var(--plate-t); }
.cta-section p { color: #c8cad0; }

/* On a dark band a black button is a hole. The LINE/WhatsApp pair inside the
   closing CTA gets the paper treatment instead. */
.cta-section .btn-success, .hero-section .btn-success,
.open .btn-success { background: var(--card); color: var(--ink); border-color: var(--card); }
.cta-section .btn-success:hover, .hero-section .btn-success:hover { background: var(--signal); }

/* 404's four ways back */
.nf-link { border-top: 2px solid var(--rule-hard); padding: .7rem .2rem; }
.nf-link:hover { background: var(--signal); }