/* ═══ trip.php — One Day Trip price request ═══
   Self-contained (no Tailwind). Site tokens: navy #082d54 · blue #006ce4 · gold #ffbd09 */
:root {
  --tp-navy: #082d54; --tp-blue: #006ce4; --tp-blue-dark: #0053a6; --tp-blue-soft: #e9f2ff; --tp-gold: #ffbd09;
  --tp-green: #16a34a; --tp-wa: #25d366;
  --tp-ink: #183552; --tp-muted: #5b7089; --tp-line: #dbe6f2; --tp-pale: #f5f9ff; --tp-bg: #f3f7fc;
  --tp-radius: 16px; --tp-shadow: 0 24px 50px -24px rgba(8, 45, 84, .35), 0 2px 8px rgba(8, 45, 84, .05);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.tp { margin: 0; background: linear-gradient(180deg, #e9f2fc 0%, var(--tp-bg) 380px); color: var(--tp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
.tp :is(a, button, input, select):focus-visible { outline: 3px solid var(--tp-blue); outline-offset: 3px; border-radius: 6px; }
.tp [hidden] { display: none !important; }
.tp svg { display: inline-block; }

/* ── header ── */
.tp-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--tp-line); box-shadow: 0 3px 20px rgba(8, 45, 84, .05); }
.tp-header__in { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.tp-back { display: inline-flex; align-items: center; gap: 4px; justify-self: start; color: var(--tp-muted); font-size: 13.5px; font-weight: 700; text-decoration: none; padding: 6px 8px 6px 2px; border-radius: 8px; }
.tp-back svg { width: 18px; height: 18px; }
.tp-back:hover { color: var(--tp-blue); }
/* text logo — same as the homepage header: Easy(navy)Taxi(yellow) · 5 dots · PATTAYA • BANGKOK */
.tp-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: #003580; line-height: 1; }
.tp-logo__word { font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.tp-logo__word b { color: #febb02; font-weight: 900; }
.tp-logo__dots { display: flex; gap: 5px; }
.tp-logo__dots i { width: 8px; height: 8px; border-radius: 50%; }
.tp-logo__dots i:nth-child(1) { background: #a855f7; }
.tp-logo__dots i:nth-child(2) { background: #94a3b8; }
.tp-logo__dots i:nth-child(3) { background: #3b82f6; }
.tp-logo__dots i:nth-child(4) { background: #22c55e; }
.tp-logo__dots i:nth-child(5) { background: #febb02; }
.tp-logo__tag { font-size: 9.5px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: rgba(0, 53, 128, .6); white-space: nowrap; }
.tp-logo__tag b { color: #febb02; margin: 0 2px; }
.tp-header__alt { justify-self: end; color: var(--tp-muted); font-size: 13px; text-decoration: none; text-align: right; }
.tp-header__alt b { color: var(--tp-blue); }
.tp-header__alt:hover b { text-decoration: underline; }
@media (max-width: 640px) {
  .tp-header__in { grid-template-columns: 36px 1fr 36px; padding: 8px 12px 10px; }
  .tp-back { grid-column: 1; }
  .tp-back span { display: none; }
  .tp-logo { grid-column: 2; justify-self: center; }
  .tp-header__alt { grid-column: 1 / -1; justify-self: center; font-size: 12.5px; margin-top: 2px; }
  /* มือถือ: header ไม่ติดบน (ฟอร์มยาว ไม่กินพื้นที่จอ) และย่อโลโก้ลงนิดหน่อย */
  .tp-header { position: static; }
  .tp-logo__word { font-size: 22px; }
  .tp-logo__dots i { width: 7px; height: 7px; }
  .tp-logo__tag { font-size: 8.5px; }
  .tp-btn--ghost { min-height: 48px; font-size: 15.5px; }
  .tp-actions--2 { flex-direction: column-reverse; }   /* ปุ่มหลักอยู่บน ปุ่ม Back/Edit อยู่ล่าง */
}

/* ── layout ── */
.tp-main { width: 100%; max-width: 780px; margin: 0 auto; padding: 22px 16px 40px; flex: 1 0 auto; }
@media (min-width: 640px) { .tp-main { padding: 34px 20px 56px; } }

/* ── hero ── */
.tp-hero { text-align: center; margin: 0 auto 22px; max-width: 640px; }
.tp-eyebrow { display: inline-block; color: var(--tp-blue); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.tp-hero h1 { margin: 8px 0 10px; color: var(--tp-navy); font-size: clamp(27px, 4.4vw, 40px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.tp-hero p { margin: 0 auto; max-width: 560px; color: var(--tp-muted); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
/* chips: 2×2 on phones/tablets, one balanced line on wide screens (never 3+1) */
.tp-chips { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 8px; }
@media (min-width: 720px) { .tp-chips { display: flex; flex-wrap: nowrap; justify-content: center; } }
.tp-chips li { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--tp-line); color: var(--tp-navy); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tp-chips svg { width: 14px; height: 14px; color: var(--tp-green); }

/* ── card ── */
.tp-card { background: #fff; border: 1px solid #e3ecf7; border-radius: 24px; box-shadow: var(--tp-shadow); padding: 20px 16px 24px; }
@media (min-width: 640px) { .tp-card { padding: 28px 32px 32px; } }

/* stepper */
.tp-stepper { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: none; }
.tp-stepper li { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; padding-top: 2px; }
.tp-stepper li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--tp-line); z-index: 0; }
.tp-stepper li:first-child::before { display: none; }
.tp-stepper li.is-active::before, .tp-stepper li.is-done::before { background: var(--tp-blue); }
.tp-stepper__num { position: relative; z-index: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 2px solid var(--tp-line); color: var(--tp-muted); font-size: 13px; font-weight: 900; transition: background .18s, border-color .18s, color .18s; }
.tp-stepper__label { color: var(--tp-muted); font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; }
.tp-stepper li.is-active .tp-stepper__num { background: var(--tp-blue); border-color: var(--tp-blue); color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 108, 228, .8); }
.tp-stepper li.is-active .tp-stepper__label { color: var(--tp-navy); }
.tp-stepper li.is-done .tp-stepper__num { background: var(--tp-navy); border-color: var(--tp-navy); color: #fff; }
.tp-stepper li.is-done .tp-stepper__label { color: var(--tp-navy); }

/* step headings */
.tp-step__title { margin: 0 0 4px; color: var(--tp-navy); font-size: clamp(21px, 3vw, 26px); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.tp-step__hint { margin: 0 0 18px; color: var(--tp-muted); font-size: 14.5px; }
.tp-step__hint b { color: var(--tp-navy); }

/* blocks */
.tp-block { padding: 18px 0 20px; border-top: 1px solid var(--tp-line); }
.tp-block__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--tp-navy); font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.tp-block__title b { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tp-blue-soft); color: var(--tp-blue); font-size: 13px; }
.tp-block__title small { margin-left: auto; color: var(--tp-muted); font-size: 12.5px; font-weight: 600; }

/* fields */
.tp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .tp-grid { grid-template-columns: 1fr 1fr; } .tp-field--full { grid-column: 1 / -1; } }
.tp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-field label { color: var(--tp-navy); font-size: 13.5px; font-weight: 800; }
.tp-field input, .tp-field select { width: 100%; min-height: 50px; padding: 11px 14px; border: 1.5px solid var(--tp-line); border-radius: 12px; background: #fff; color: var(--tp-ink); font: inherit; font-size: 16px; font-weight: 600; transition: border-color .18s, box-shadow .18s; -webkit-appearance: none; appearance: none; }
.tp-field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7089' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.tp-field input::placeholder { color: #94a3b8; font-weight: 500; }
.tp-field input:focus, .tp-field select:focus { border-color: var(--tp-blue); box-shadow: 0 0 0 3px rgba(0, 108, 228, .14); outline: none; }
.tp-field input[type="time"], .tp-field input[type="date"] { font-variant-numeric: tabular-nums; }

/* cars */
.tp-cars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .tp-cars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tp-car { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 12px; border: 1.5px solid var(--tp-line); border-radius: 14px; background: #fff; color: var(--tp-ink); font: inherit; text-align: center; cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s, transform .18s; }
.tp-car:hover { border-color: #9cc3f0; }
.tp-car:active { transform: scale(.98); }
.tp-car img { width: 104px; height: 56px; object-fit: contain; margin: 4px 0 6px; filter: drop-shadow(0 6px 10px rgba(8, 45, 84, .16)); transition: transform .2s; }
.tp-car b { font-size: 15px; font-weight: 900; color: var(--tp-navy); }
.tp-car > span:not(.tp-car__tag) { font-size: 11.5px; color: var(--tp-muted); font-weight: 600; line-height: 1.3; }
.tp-car__tag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #febb02, #f5a300); color: #3b2a00; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tp-car__tag--group { background: var(--tp-blue-soft); color: var(--tp-blue-dark); }
.tp-car__check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 2px solid #cbd5e1; color: transparent; transition: background .18s, border-color .18s, color .18s; }
.tp-car__check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-car.is-selected { border-color: var(--tp-blue); background: var(--tp-pale); box-shadow: 0 0 0 3px rgba(0, 108, 228, .12); }
.tp-car.is-selected img { transform: translateY(-1px) scale(1.04); }
.tp-car.is-selected .tp-car__check { background: var(--tp-blue); border-color: var(--tp-blue); color: #fff; }

/* route */
.tp-route { display: flex; flex-direction: column; gap: 10px; }
.tp-stops { display: flex; flex-direction: column; gap: 10px; }
.tp-stop { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 14px 14px 12px; border: 1.5px solid var(--tp-line); border-radius: 14px; background: var(--tp-pale); }
.tp-stop.is-new { animation: tpSlide .25s ease-out; }
@keyframes tpSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tp-stop__dot { width: 34px; height: 34px; margin-top: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 2px solid var(--tp-blue); color: var(--tp-blue); font-size: 13px; font-weight: 900; }
.tp-stop--start .tp-stop__dot, .tp-stop--end .tp-stop__dot { background: var(--tp-navy); border-color: var(--tp-navy); color: #fff; }
.tp-stop--start, .tp-stop--end { background: #fff; }
.tp-stop__body { display: grid; gap: 10px; min-width: 0; }
.tp-stop__body--2 { grid-template-columns: minmax(0, 1fr) 132px; }
.tp-stop__body--3 { grid-template-columns: minmax(0, 1fr) 124px 108px; }
.tp-stop__body .tp-field input { background: #fff; }
.tp-stop__meta { margin: 0; color: var(--tp-muted); font-size: 12.5px; }
.tp-stop__meta b { color: var(--tp-navy); }
.tp-stop__remove { position: absolute; top: -10px; right: -8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #fff; background: #fee2e2; color: #dc2626; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: background .18s, color .18s; }
.tp-stop__remove svg { width: 14px; height: 14px; }
.tp-stop__remove:hover { background: #dc2626; color: #fff; }
.tp-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 2px dashed #9cc3f0; border-radius: 14px; background: #fff; color: var(--tp-blue); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .18s, border-color .18s; }
.tp-add svg { width: 18px; height: 18px; }
.tp-add:hover { background: var(--tp-blue-soft); border-color: var(--tp-blue); }
@media (max-width: 480px) {
  .tp-stop { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 12px 12px 10px; }
  .tp-stop__dot { width: 30px; height: 30px; font-size: 12px; }
  .tp-stop__body--2 { grid-template-columns: 1fr; }
  .tp-stop__body--3 { grid-template-columns: 1fr 1fr; }
  .tp-stop__body--3 > .tp-field:first-child { grid-column: 1 / -1; }
  .tp-field--time { max-width: 180px; }
}

/* live itinerary */
.tp-preview { margin: 6px 0 18px; padding: 16px 16px 14px; border-radius: 16px; background: var(--tp-navy); color: #fff; }
.tp-preview h3 { margin: 0 0 12px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #9dc4f5; }
.tp-preview__empty { margin: 0; color: #b7cbe6; font-size: 13.5px; }
.tp-preview .tp-tl__dot { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
.tp-preview .tp-tl--start .tp-tl__dot, .tp-preview .tp-tl--end .tp-tl__dot { background: var(--tp-gold); border-color: var(--tp-gold); color: var(--tp-navy); }
.tp-preview .tp-tl__label { color: #9dc4f5; }
.tp-preview .tp-tl__body b { color: #fff; }
.tp-preview .tp-tl__time { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .18); }
.tp-preview .tp-tl + .tp-tl::before { background: rgba(255, 255, 255, .25); }

/* timeline rows (shared: preview / review / done) */
.tp-tl { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.tp-tl + .tp-tl::before { content: ""; position: absolute; left: 14px; top: -10px; width: 2px; height: 16px; background: var(--tp-line); }
.tp-tl__dot { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 2px solid var(--tp-blue); color: var(--tp-blue); font-size: 12px; font-weight: 900; }
.tp-tl--start .tp-tl__dot, .tp-tl--end .tp-tl__dot { background: var(--tp-navy); border-color: var(--tp-navy); color: #fff; }
.tp-tl__body { display: flex; flex-direction: column; min-width: 0; }
.tp-tl__label { color: var(--tp-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tp-tl__body b { color: var(--tp-navy); font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.tp-tl__time { padding: 5px 10px; border-radius: 999px; background: var(--tp-blue-soft); border: 1px solid #cfe1f7; color: var(--tp-blue-dark); font-size: 12.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* notes / actions */
.tp-note { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--tp-pale); border: 1px solid var(--tp-line); color: var(--tp-ink); font-size: 14px; line-height: 1.45; }
.tp-note svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--tp-blue); }
.tp-note--gold { background: #fff7db; border-color: #fde9a8; color: #5b3f00; }
.tp-note--gold svg { color: #b45309; }
.tp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
@media (min-width: 560px) { .tp-actions--2 { flex-direction: row; } .tp-actions--2 .tp-btn--ghost { flex: 0 0 140px; } .tp-actions--2 .tp-btn--primary, .tp-actions--2 .tp-btn--go { flex: 1; } }
.tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 22px; border: 0; border-radius: 14px; font: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.005em; cursor: pointer; text-decoration: none; transition: transform .18s, box-shadow .18s, filter .18s; }
.tp-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.tp-btn:active { transform: scale(.985); }
.tp-btn:disabled { opacity: .7; cursor: wait; }
.tp-btn--primary { background: linear-gradient(135deg, #0b82e6 0%, #0059bd 100%); color: #fff; box-shadow: 0 14px 30px -10px rgba(0, 108, 228, .75); }
.tp-btn--primary:hover { filter: brightness(1.05); }
.tp-btn--go { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); color: #fff; box-shadow: 0 14px 30px -10px rgba(22, 163, 74, .7); }
.tp-btn--ghost { background: #fff; border: 1.5px solid var(--tp-line); color: var(--tp-navy); }
.tp-btn--ghost:hover { border-color: var(--tp-blue); background: var(--tp-blue-soft); }
.tp-btn--wa { background: linear-gradient(135deg, #2ee27a 0%, #1aa64f 100%); color: #fff; box-shadow: 0 14px 30px -10px rgba(26, 166, 79, .8); }
.tp-btn--wa svg { width: 24px; height: 24px; flex-basis: 24px; }
.tp-fine { margin: 12px 0 0; text-align: center; color: var(--tp-muted); font-size: 12.5px; font-weight: 600; }

/* review */
.tp-review { margin: 0 0 18px; }
.tp-review__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (min-width: 560px) { .tp-review__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tp-review__grid > div { padding: 10px 12px; border-radius: 12px; background: var(--tp-pale); border: 1px solid var(--tp-line); min-width: 0; }
.tp-review__grid span { display: block; color: var(--tp-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tp-review__grid b { display: block; margin-top: 2px; color: var(--tp-navy); font-size: 14.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.tp-review__grid small { color: var(--tp-muted); font-size: 12.5px; font-weight: 600; }
.tp-review__route { padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--tp-line); background: #fff; }

/* status (errors / fallback) */
#trip-status { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #fecaca; background: #fff1f2; color: #9f1239; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.tp-status__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#trip-status a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid #fda4af; background: #fff; color: #9f1239; font-size: 13.5px; font-weight: 800; text-decoration: none; }
#trip-status a.is-wa { border-color: #86efac; background: #f0fdf4; color: #15803d; }

/* done */
.tp-done { padding: 0; overflow: hidden; }
.tp-done__head { padding: 30px 20px 26px; text-align: center; color: #fff; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.tp-done__icon { width: 60px; height: 60px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .55); }
.tp-done__icon svg { width: 30px; height: 30px; }
.tp-done__head h2 { margin: 0 0 6px; font-size: clamp(24px, 3.4vw, 30px); font-weight: 900; letter-spacing: -.02em; }
.tp-done__head p { margin: 0; color: #dcfce7; font-size: 15px; }
.tp-done__body { padding: 22px 16px 26px; }
@media (min-width: 640px) { .tp-done__body { padding: 28px 32px 32px; } }
.tp-done__idwrap { text-align: center; margin-bottom: 16px; }
.tp-done__idwrap > span { display: block; margin-bottom: 8px; color: var(--tp-muted); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tp-done__id { display: block; padding: 12px 16px; border-radius: 14px; background: var(--tp-pale); border: 2px solid var(--tp-line); color: var(--tp-navy); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(24px, 5vw, 34px); font-weight: 900; letter-spacing: .08em; user-select: all; }
.tp-done__next { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: tpnext; }
.tp-done__next li { counter-increment: tpnext; padding: 12px 12px 12px 40px; position: relative; border-radius: 12px; background: var(--tp-pale); border: 1px solid var(--tp-line); }
.tp-done__next li::before { content: counter(tpnext); position: absolute; left: 10px; top: 12px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tp-navy); color: #fff; font-size: 11.5px; font-weight: 900; }
.tp-done__next b { display: block; color: var(--tp-navy); font-size: 13.5px; }
.tp-done__next span { display: block; margin-top: 2px; color: var(--tp-muted); font-size: 12px; line-height: 1.35; }
@media (max-width: 560px) { .tp-done__next { grid-template-columns: 1fr; } }
.tp-done__sub { margin: 0 0 8px; color: var(--tp-navy); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.tp-timeline { padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--tp-line); background: #fff; margin-bottom: 22px; }
.tp-done__cta { text-align: center; padding-top: 20px; border-top: 1px solid var(--tp-line); }
.tp-done__cta p { margin: 0 0 14px; color: var(--tp-navy); font-size: 16px; font-weight: 800; }
.tp-done__call { display: inline-block; margin-top: 12px; color: var(--tp-muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.tp-done__call:hover { color: var(--tp-blue); }
.tp-done__reset { display: block; width: 100%; padding: 16px; border: 0; border-top: 1px solid var(--tp-line); background: var(--tp-pale); color: var(--tp-muted); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.tp-done__reset:hover { color: var(--tp-navy); }

/* footer */
.tp-footer { margin-top: auto; padding: 26px 16px; text-align: center; background: var(--tp-navy); color: #b7cbe6; font-size: 13px; }
.tp-footer p { margin: 0; }
.tp-footer p + p { margin-top: 4px; }

/* route map inside the itinerary preview */
.tp-map { margin-top: 14px; }
.tp-map__canvas { width: 100%; height: 260px; border-radius: 12px; background: #0f3a6b; overflow: hidden; }
@media (min-width: 640px) { .tp-map__canvas { height: 320px; } }
.tp-map__totals { margin: 10px 0 0; color: #fff; font-size: 13.5px; }
.tp-map__totals b { color: #ffbd09; }
.tp-map__hint { margin: 8px 0 0; color: #b7cbe6; font-size: 12px; }
.tp-map__totals:not([hidden]) + .tp-map__hint { display: none; }