/* Checkout UI.
 *
 * ‼ WHY THIS IS A SEPARATE STYLESHEET AND NOT TAILWIND CLASSES.
 * styles.css is a BAKED artefact - Tailwind was compiled once, upstream, and
 * only the arbitrary values that existed in the reference markup have rules.
 * Writing `bg-[#A8E04A]` in new markup produces a class with no declaration and
 * an invisible button. So the checkout carries its own explicit rules.
 *
 * Every colour below was MEASURED off the live page (getComputedStyle on
 * touchdownticket.travel, 2026-08-17), not copied from the design doc, so the
 * checkout matches what actually ships rather than what was intended:
 *   page violet        rgb(128, 35, 151)  #802397
 *   card               rgb(235, 240, 249) #EBF0F9   border #8826A0 1.6px r12
 *   money CTA          rgb(168, 224, 74)  #A8E04A   ink rgb(22,36,10) #16240A
 *                      pill, weight 800, 16px, padding 12px 24px
 *
 * The role palette is LOCKED (CREATIVE-DIRECTION.md): lime is the MONEY role and
 * is worn by the pay action only. Nothing decorative here may take it.
 */

/* ‼ The heading takes tabindex="-1" so each step change can move focus to it -
   otherwise a screen-reader user is left on a button that has just been
   hidden. Programmatic .focus() does NOT set :focus-visible, so this drops the
   ring for that case while keeping it if the heading is ever reached by
   keyboard. Without it the card paints a navy box round the title on every
   step change. */
#tt-heading:focus:not(:focus-visible) { outline: none; }

.tt-field { margin-bottom: 16px; }

.tt-label {
  display: block;
  margin-bottom: 8px;
  font: 500 16px/24px Figtree, ui-sans-serif, system-ui, sans-serif;
  color: #191b1e;
}

.tt-input,
.tt-select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid #777f89;
  border-radius: 8px;
  background: #fff;
  font: 400 16px/24px Figtree, ui-sans-serif, system-ui, sans-serif;
  color: #191b1e;
  -webkit-appearance: none;
  appearance: none;
}

.tt-select {
  /* the chevron, inline so it needs no asset and cannot 404 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.6 7.2 10 11.6l4.4-4.4' stroke='%23777f89' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.tt-input::placeholder { color: #777f89; }

/* --- field icons -------------------------------------------------------- */
/* The reference card carried a departure-plane, arrival-plane, calendar and
   person glyph inside its four inputs, and the first pass of this rewrite
   dropped all four - caught by screenshotting the rebuilt page against the old
   one rather than by reading the markup. They are restored as CSS backgrounds
   keyed off the ids, so the markup stays clean and no asset can 404. Paths are
   lifted from the reference's own inline SVGs at 20x20 in #777f89. */

#tt-from, #tt-to, #tt-departure, #tt-count {
  padding-left: 48px;
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 20px 20px;
}

/* the select needs BOTH its chevron (right) and its glyph (left) */
#tt-count {
  background-position: right 16px center, left 16px center;
  background-size: 20px 20px, 20px 20px;
}

#tt-from {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23777f89' d='M16.83 9.85 5.17 13c-.36.1-.71.08-1.05-.06a1.9 1.9 0 0 1-.8-.69L1.42 9.08a.68.68 0 0 1-.08-.75c.11-.26.3-.43.58-.5l.48-.12c.14-.03.27-.03.4-.01.14.02.26.08.37.17l2 1.67 2.92-.77-3.4-4.54a.83.83 0 0 1-.16-.94c.11-.34.35-.56.71-.66l.44-.1c.15-.05.31-.05.49-.03.17.03.32.1.44.21l5.82 4.9 3.54-.96c.44-.13.86-.08 1.26.15.4.23.66.57.78 1.01.13.45.08.87-.15 1.26-.23.4-.57.66-1.01.78ZM3.33 17.5a.8.8 0 0 1-.59-.24.8.8 0 0 1-.24-.59c0-.24.08-.43.24-.6a.8.8 0 0 1 .59-.23h13.34c.23 0 .43.08.59.24a.8.8 0 0 1 .24.59.8.8 0 0 1-.24.59.8.8 0 0 1-.59.24H3.33Z'/%3E%3C/svg%3E");
}

#tt-to {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23777f89' d='M3.33 17.5a.8.8 0 0 1-.59-.24.8.8 0 0 1-.24-.59c0-.24.08-.43.24-.6a.8.8 0 0 1 .59-.23h13.34c.23 0 .43.08.59.24a.8.8 0 0 1 .24.59.8.8 0 0 1-.24.59.8.8 0 0 1-.59.24H3.33Zm12.13-4.21L3.71 9.96a1.6 1.6 0 0 1-.88-.6 1.6 1.6 0 0 1-.33-1V4.67c0-.28.11-.5.33-.67.22-.17.47-.22.75-.15l.48.13c.14.04.26.1.36.19.11.09.18.2.22.34l.86 2.48 2.87.81-.58-5.64a.96.96 0 0 1 .36-.89c.28-.23.6-.29.95-.18l.43.13c.16.04.29.12.41.24.12.12.2.25.26.4l2.5 7.19 3.58 1.02c.35.11.64.31.87.6.23.3.35.63.35 1 0 .49-.2.92-.6 1.29-.39.37-.87.47-1.44.32Z'/%3E%3C/svg%3E");
}

#tt-departure, #tt-returning {
  padding-left: 48px;
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23777f89' d='M4.17 18.33c-.46 0-.85-.16-1.18-.49a1.6 1.6 0 0 1-.49-1.18V5c0-.46.16-.85.49-1.18.33-.32.72-.49 1.18-.49H5V2.5c0-.24.08-.43.24-.59a.8.8 0 0 1 .59-.24c.24 0 .43.08.6.24.15.16.23.35.23.59v.83h6.67V2.5c0-.24.08-.43.24-.59a.8.8 0 0 1 .59-.24c.24 0 .43.08.6.24.15.16.23.35.23.59v.83h.84c.45 0 .85.17 1.17.49.33.33.5.72.5 1.18v11.66c0 .46-.17.85-.5 1.18-.32.33-.72.49-1.17.49H4.17Zm0-1.66h11.66V8.33H4.17v8.34Z'/%3E%3C/svg%3E");
}

#tt-count {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.6 7.2 10 11.6l4.4-4.4' stroke='%23777f89' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23777f89' d='M10 10a3.2 3.2 0 0 1-2.35-.98A3.2 3.2 0 0 1 6.67 6.67c0-.92.32-1.7.98-2.36A3.2 3.2 0 0 1 10 3.33c.92 0 1.7.33 2.35.98.66.66.99 1.44.99 2.36 0 .91-.33 1.7-.99 2.35A3.2 3.2 0 0 1 10 10Zm-6.67 5v-.67c0-.47.12-.9.37-1.3.24-.4.56-.7.96-.91a12 12 0 0 1 2.63-.97 12.6 12.6 0 0 1 5.42 0c.89.22 1.76.54 2.62.97.4.21.73.51.97.91.24.4.37.83.37 1.3V15c0 .46-.17.85-.49 1.18-.33.32-.72.49-1.18.49H5c-.46 0-.85-.17-1.18-.49a1.6 1.6 0 0 1-.49-1.18Z'/%3E%3C/svg%3E");
}

.tt-input:focus-visible,
.tt-select:focus-visible {
  outline: 3px solid #8826a0;
  outline-offset: 2px;
  border-color: transparent;
}

/* ‼ 2.4px, not 1px. A hairline error border on a white card is not a
   perceivable state change for a low-vision user, and colour alone would not
   carry it either - so the message below the field is the real signal and the
   border only reinforces it. */
.tt-input[aria-invalid="true"],
.tt-select[aria-invalid="true"] { border: 2.4px solid #a4123f; }

.tt-error {
  margin-top: 6px;
  font: 500 14px/20px Figtree, ui-sans-serif, system-ui, sans-serif;
  color: #a4123f;
}

.tt-hint {
  margin-top: 8px;
  font: 400 14px/20px Figtree, ui-sans-serif, system-ui, sans-serif;
  color: #5b5d5f;
}

/* --- trip type ---------------------------------------------------------- */

.tt-trip { display: flex; gap: 24px; margin-bottom: 16px; }

.tt-trip label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: 400 16px/24px Figtree, ui-sans-serif, system-ui, sans-serif;
  color: #191b1e;
}

/* a real radio input, restyled - so keyboard, arrow keys and screen readers all
   work without a line of JavaScript */
.tt-trip input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #8826a0;
}

/* --- passenger blocks --------------------------------------------------- */

.tt-pax {
  border: 1px solid #dfdfe1;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  background: #fbfcfe;
}

.tt-pax h3 {
  margin: 0 0 12px;
  font: 700 15px/20px Figtree, ui-sans-serif, system-ui, sans-serif;
  color: #5b5d5f;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tt-row { display: flex; gap: 12px; }
.tt-row > * { flex: 1; }
.tt-row .tt-narrow { flex: 0 0 104px; }

@media (max-width: 520px) {
  .tt-row { flex-wrap: wrap; }
  .tt-row .tt-narrow { flex: 0 0 100%; }
}

/* --- the money action --------------------------------------------------- */

.tt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 12px 24px;
  border: 0;
  border-radius: 9999px;
  background: #a8e04a;
  color: #16240a;
  font: 800 16px/1.2 Figtree, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .15s ease;
}

.tt-cta:hover { background: #9ad235; }
.tt-cta:focus-visible { outline: 3px solid #16240a; outline-offset: 3px; }
.tt-cta[disabled] { background: #d7dade; color: #5b5d5f; cursor: not-allowed; }

.tt-back {
  border: 0;
  background: none;
  padding: 12px 4px;
  font: 600 16px/1.2 Figtree, ui-sans-serif, system-ui, sans-serif;
  color: #6d2380;
  text-decoration: underline;
  cursor: pointer;
}

.tt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

/* --- summary ------------------------------------------------------------ */

.tt-summary {
  border: 1.6px solid #8826a0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: #ebf0f9;
}

.tt-summary dl { margin: 0; }

.tt-summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font: 400 15px/22px Figtree, ui-sans-serif, system-ui, sans-serif;
  color: #191b1e;
}

.tt-summary dt { color: #5b5d5f; }
.tt-summary dd { margin: 0; font-weight: 600; text-align: right; }

.tt-total {
  margin-top: 8px;
  padding-top: 12px !important;
  border-top: 1px solid #c3cbdb;
  font-size: 18px !important;
  font-weight: 700;
}

/* --- states ------------------------------------------------------------- */

.tt-step[hidden],
.tt-note[hidden] { display: none !important; }

.tt-note {
  border-radius: 12px;
  padding: 16px;
  font: 400 15px/22px Figtree, ui-sans-serif, system-ui, sans-serif;
}

.tt-note--wait { background: #f4eef6; border: 1px solid #d9c2e0; color: #3c1246; }
.tt-note--bad  { background: #fdeef2; border: 1.6px solid #a4123f; color: #6b0b28; }
.tt-note--good { background: #eef8e2; border: 1.6px solid #4f7a12; color: #23390a; }

.tt-note strong { font-weight: 700; }

.tt-pnr {
  display: inline-block;
  margin: 8px 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: #16240a;
  color: #f6f4f6;
  font: 700 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.tt-spin {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -3px;
  animation: tt-spin .7s linear infinite;
}

@keyframes tt-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tt-spin { animation: none; }
}

#tt-paypal { margin-top: 8px; min-height: 52px; }