/* Booking request form — shared by the tour page (trip card) and the booking page (book.html, WordPress /book/<slug>/).
   Fields, start-time buttons, travelers steppers, the estimate, messages. Behaviour: assets/js/booking.js */

.td-form { display: grid; gap: 14px; }
.td-form__trip,
.td-form__contact { display: grid; gap: 14px; }
.td-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.td-field > label,
.td-field legend { padding: 0; font-size: .8125rem; font-weight: 700; color: var(--c-text); }
.td-field legend { margin-bottom: 6px; }
.td-field small { font-weight: 500; color: var(--oz-text-2); }
.td-field input,
.td-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid #D5DBDF;
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.td-field textarea { min-height: 88px; resize: vertical; }
.td-field input:focus,
.td-field textarea:focus { border-color: var(--oz-navy); outline: none; box-shadow: 0 0 0 3px var(--c-primary-soft); }
.td-field [aria-invalid="true"] { border-color: var(--oz-red); }
.td-err { font-size: .8125rem; font-weight: 600; color: var(--oz-red); }

.td-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.td-radio { position: relative; }
.td-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.td-radio span { display: grid; gap: 2px; min-height: 52px; padding: 8px 12px; border: 1.5px solid #D5DBDF; border-radius: 10px; font-size: .875rem; font-weight: 700; line-height: 1.3; transition: border-color .2s ease, background-color .2s ease; }
.td-radio small { font-size: .75rem; font-weight: 500; color: var(--oz-text-2); }
.td-radio input:checked + span { border-color: var(--oz-navy); background: var(--c-primary-soft); }
.td-radio input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }
/* start times inside the 2-hour cut-off (Vietnam time) */
.td-radio input:disabled { cursor: not-allowed; }
.td-radio input:disabled + span { border-style: dashed; background: var(--oz-gray); color: #6B7280; }
.td-radio__note { font-size: .75rem; font-style: normal; font-weight: 700; color: var(--oz-red); }

.td-stepper { display: flex; align-items: stretch; overflow: hidden; border: 1.5px solid #D5DBDF; border-radius: 10px; }
.td-stepper button { display: grid; flex: none; place-items: center; width: 48px; border: 0; background: var(--oz-gray); color: var(--c-text); }
.td-stepper button:hover:not(:disabled) { background: #E6EBED; }
.td-stepper button:disabled { color: #A9B1B6; cursor: default; }
.td-field .td-stepper input { min-height: 46px; border: 0; border-radius: 0; box-shadow: none; text-align: center; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.td-stepper input::-webkit-inner-spin-button,
.td-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.td-stepper:focus-within { border-color: var(--oz-navy); box-shadow: 0 0 0 3px var(--c-primary-soft); }

/* tour type shown as a fact when the tour runs only one way */
.td-fixed { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 10px; background: var(--oz-gray); font-size: .9375rem; font-weight: 600; }
.td-fixed .icon { flex: none; color: var(--oz-navy); }

/* travelers: adults / children / infants, label left + stepper right */
.td-pax { gap: 10px; }
.td-pax__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.td-pax__row label { display: grid; gap: 1px; font-size: .9375rem; line-height: 1.3; }
.td-pax__row b { font-weight: 700; }
.td-pax__row small { font-size: .75rem; color: var(--oz-text-2); }
.td-pax .td-stepper { flex: none; width: 136px; }
.td-pax .td-stepper button { width: 44px; }

/* contact block (booking page) */
.td-group { gap: 14px; margin-top: 4px; }
.td-group > legend { font-size: .9375rem; }

.td-sum { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--oz-gray); font-size: .875rem; }
.td-sum dd.is-muted { font-weight: 500; color: var(--oz-text-2); }
.td-sum dt small { display: block; font-size: .75rem; color: var(--oz-text-2); }
.td-sum div { display: flex; justify-content: space-between; gap: 12px; }
.td-sum dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.td-sum__cap { margin: 2px 0 -6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oz-text-2); }
.td-sum__tot { padding-top: 8px; border-top: 1px solid #D5DBDF; font-weight: 700; }
.td-sum__dep { padding-top: 8px; border-top: 1px dashed #C9D1D5; }
.td-sum__dep dd { font-size: 1rem; color: var(--oz-orange-hover); } /* darker orange: 5.5:1 on the grey estimate box (--oz-orange is 4.2:1 there) */
.td-note { font-size: .75rem; line-height: 1.5; color: var(--oz-text-2); }
.td-hint { font-size: .8125rem; line-height: 1.45; color: var(--oz-text-2); }
.td-hint a { color: var(--oz-navy); font-weight: 700; text-underline-offset: 2px; }

/* request form extras: backup date (native <details>), consent, honeypot, reassurance lines */
.td-alt { margin-top: -6px; }
.td-alt summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; font-weight: 700; color: var(--oz-navy); cursor: pointer; list-style: none; }
.td-alt summary::-webkit-details-marker { display: none; }
.td-alt summary::before { content: '+'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-primary-soft); font-size: 1rem; line-height: 1; }
.td-alt[open] summary::before { content: '–'; }
.td-alt summary small { font-weight: 500; color: var(--oz-text-2); }
.td-alt .td-field { padding-top: 2px; }
.td-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.td-field > .td-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: .8125rem; font-weight: 500; line-height: 1.5; color: var(--oz-text-2); cursor: pointer; }
.td-field .td-check input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--oz-navy); }
.td-check input[aria-invalid="true"] { outline: 2px solid var(--oz-red); outline-offset: 2px; }
.td-check a { color: var(--oz-navy); text-decoration: underline; text-underline-offset: 2px; }
.td-after { text-align: center; }

/* "How booking works": three short steps under the form */
.td-how { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: how; font-size: .8125rem; }
.td-how li { position: relative; display: grid; gap: 1px; padding-left: 34px; counter-increment: how; line-height: 1.45; color: var(--oz-text-2); }
.td-how li::before { content: counter(how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary-soft); color: var(--oz-navy); font-size: .75rem; font-weight: 800; }
.td-how b { font-size: .875rem; color: var(--c-text); }

.td-msg:empty { display: none; }
.td-msg { font-size: .875rem; font-weight: 600; }
.td-msg.is-ok { padding: 14px 16px; border-radius: 10px; background: #E3F2EA; color: var(--c-success); }
.td-msg.is-error { color: var(--oz-red); }
/* confirmation panel after sending the request */
.td-msg.is-ok.td-done { display: grid; gap: 12px; font-weight: 500; line-height: 1.5; color: var(--c-text); }
.td-done__title { font-size: 1.125rem; font-weight: 800; color: #165C3A; }
.td-done__list { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .72); font-size: .8125rem; }
.td-done__list div { display: grid; gap: 1px; }
.td-done__list dt { font-weight: 700; color: var(--oz-text-2); }
.td-done__list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.td-done__help { font-size: .8125rem; }
.td-done__help a { color: var(--oz-navy); font-weight: 700; text-underline-offset: 2px; }

.td-book__trust { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--oz-line); font-size: .8125rem; color: var(--oz-text-2); }
.td-book__trust li { display: flex; align-items: center; gap: 8px; }
.td-book__trust .icon { flex: none; color: var(--c-success); }
.td-book__wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: .875rem; font-weight: 700; color: #15803D; text-decoration: none; } /* 5:1 on white (#178A45 was 4.4:1) */
.td-book__wa:hover { text-decoration: underline; text-underline-offset: 3px; }

/* travelers on the tour page: one line ("Travelers · 2 adults") that opens the three steppers */
.td-paxdd { border: 1.5px solid #D5DBDF; border-radius: 10px; }
.td-paxdd[open] { border-color: var(--oz-navy); }
.td-paxdd summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; }
.td-paxdd summary::-webkit-details-marker { display: none; }
.td-paxdd summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.td-paxdd[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.td-paxdd summary:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 8px; }
.td-paxdd__label { font-size: .8125rem; font-weight: 700; }
.td-paxdd__value { flex: 1; text-align: right; font-size: .9375rem; font-weight: 600; }
.td-paxdd .td-pax { padding: 4px 14px 14px; }

/* ---- Date field + calendar (assets/js/datepicker.js) ----
   The field's own date input becomes a hidden value; a button shows the date as words and opens a calendar: a popover under the button,
   a bottom sheet on phones. Without the script the field stays the browser's date input. */
.td-dp__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid #D5DBDF;
  border-radius: 10px;
  background: #fff;
  color: var(--c-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.td-dp__btn:hover { border-color: #B4BCC4; }
.td-dp__btn:focus-visible,
.td-dp__btn[aria-expanded="true"] { border-color: var(--oz-navy); outline: none; box-shadow: 0 0 0 3px var(--c-primary-soft); }
.td-dp__ico { color: var(--oz-navy); }
.td-dp__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-dp__btn.is-empty .td-dp__text { font-weight: 500; color: var(--oz-text-2); }
.td-dp__chev { color: var(--oz-text-2); transition: transform .2s ease; }
.td-dp__btn[aria-expanded="true"] .td-dp__chev { transform: rotate(180deg); }
.td-dp__btn[aria-invalid="true"] { border-color: var(--oz-red); }

.td-dpc__backdrop { position: fixed; inset: 0; z-index: 110; background: transparent; }
.td-dpc {
  position: fixed;
  z-index: 111;
  width: 340px;
  max-width: calc(100vw - 16px);
  padding: 10px 12px 12px;
  border: 1px solid var(--oz-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(10, 30, 28, .2), 0 2px 6px rgba(10, 30, 28, .08);
  color: var(--c-text);
  animation: td-dpc-in .16s ease-out;
}
.td-dpc.is-up { animation-name: td-dpc-in-up; }
.td-dpc__sheet { display: none; }
.td-dpc__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.td-dpc__title { margin: 0; font-size: 1rem; font-weight: 700; text-align: center; }
.td-dpc__step,
.td-dpc__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--oz-navy);
  cursor: pointer;
}
.td-dpc__step:hover:not(:disabled),
.td-dpc__close:hover { background: var(--c-primary-soft); }
.td-dpc__step:disabled { color: #B4BCC4; cursor: default; }
.td-dpc__step:focus-visible,
.td-dpc__close:focus-visible,
.td-dpc__chip:focus-visible,
.td-dpc__clear:focus-visible,
.td-dpc__day:focus-visible { outline: 3px solid var(--oz-navy); outline-offset: 2px; }

.td-dpc__quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.td-dpc__chip {
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid #D5DBDF;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.td-dpc__chip:hover { border-color: var(--oz-navy); background: var(--c-primary-soft); }

.td-dpc__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.td-dpc__grid th { padding: 6px 0; font-size: .75rem; font-weight: 600; color: var(--oz-text-2); text-align: center; }
.td-dpc__grid abbr { text-decoration: none; }
.td-dpc__grid td { padding: 1px; }
.td-dpc__day {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--c-text);
  cursor: pointer;
}
.td-dpc__day:hover { background: var(--c-primary-soft); }
.td-dpc__p { font-size: .75rem; font-weight: 700; color: var(--oz-orange-hover); }
.td-dpc__day.has-rate { background: #FFF4E8; }
.td-dpc__day.has-rate:hover { background: #FFE8CF; }
.td-dpc__day.is-today { box-shadow: inset 0 0 0 1.5px var(--oz-navy); }
.td-dpc__day.is-sel,
.td-dpc__day.is-sel:hover { background: var(--oz-navy); color: #fff; }
.td-dpc__day.is-sel .td-dpc__p { color: #FFE2C2; }
.td-dpc__day.is-off,
.td-dpc__day.is-off:hover { background: transparent; color: #8A939B; cursor: not-allowed; }
.td-dpc__day.is-off.is-today { box-shadow: inset 0 0 0 1.5px #D5DBDF; }

.td-dpc__note,
.td-dpc__legend { margin: 8px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--oz-text-2); }
.td-dpc__note { padding: 8px 10px; border-radius: 8px; background: var(--oz-gray); color: var(--c-text); font-weight: 600; }
.td-dpc__clear { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 600; color: var(--oz-navy); text-decoration: underline; cursor: pointer; }

@keyframes td-dpc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes td-dpc-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes td-dpc-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* phones: a sheet from the bottom of the screen, full width, with its own title and close button */
@media (max-width: 640px) {
  .td-dpc__backdrop.is-sheet { background: rgba(12, 31, 29, .45); }
  .td-dpc.is-sheet {
    inset: auto 0 0 0;
    width: auto;
    max-width: none;
    max-height: 92vh;
    overflow-y: auto;
    padding: 4px 8px calc(14px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 18px 18px 0 0;
    animation-name: td-dpc-sheet;
    animation-duration: .22s;
  }
  .td-dpc.is-sheet .td-dpc__sheet { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px 2px 8px; }
  .td-dpc__sheet-title { margin: 0; font-size: 1.0625rem; font-weight: 800; }
  .td-dpc.is-sheet .td-dpc__grid td { padding: 0; }
  .td-dpc.is-sheet .td-dpc__day { min-height: 52px; }
  html.td-dpc-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .td-dpc,
  .td-dp__chev { animation: none; transition: none; }
}
/* the narrowest phones: seven day buttons must still be 44px wide */
@media (max-width: 359px) {
  .td-dpc.is-sheet { padding-inline: 4px; }
}
/* a class that sets display beats the hidden attribute: say it again for the parts the script hides */
.td-dpc__quick[hidden],
.td-dpc__clear[hidden],
.td-dpc__note[hidden],
.td-dpc__legend[hidden] { display: none; }