/* ==========================================================================
   Book a Vehicle: templates/transport/home.html, category_vehicles.html,
   vehicle_detail.html and book_vehicle.html (+ _vehicle_card.html,
   _category_tiles.html, _pager.html).

   Built on the shared look in ../pages.css; only what these pages add or
   adjust is here. Everything is scoped to .tp-page.
   ========================================================================== */

.tp-page {
  /* Members' photos are mostly product shots on white: frame them on white. */
  --tp-photo-bg: #ffffff;
}
[data-bs-theme="dark"] .tp-page { --tp-photo-bg: #2c211b; }

/* pages.css zeroes the padding of every <section> in .vp-page (specificity
   0,1,1), which also wipes the padding of <section class="vp-hero"> and
   <section class="vp-panel"> written as its comments show. Put it back. */
.tp-page section.vp-hero { padding: 2rem 2.25rem; }
.tp-page section.vp-hero--compact { padding: 1.6rem 2rem; }
.tp-page section.vp-panel { padding: 1.15rem; }
.tp-page section.vp-panel--flush, .tp-page section.vp-panel--brand { padding: 0; }
@media (max-width: 767.98px) {
  .tp-page section.vp-hero { padding: 1.2rem 1.15rem 1.3rem; }
  .tp-page section.vp-hero--light:has(.vp-hero__media) { padding: 0; }
  .tp-page section.vp-panel:not(.vp-panel--flush):not(.vp-panel--brand) { padding: 1rem; }
}

/* Font Awesome's script swaps each <i> for an <svg class="svg-inline--fa">,
   so pages.css rules written for "i" miss the icons. The same rules for the
   svg, for the components these pages use. */
.tp-page .vp-card__meta .svg-inline--fa { flex: none; width: 0.95rem; color: var(--vh-orange); font-size: 0.78rem; }
.tp-page .vp-panel__title > .svg-inline--fa { color: var(--vh-orange); }
.tp-page .vp-rating .svg-inline--fa { color: var(--vp-star); }
.tp-page .vp-checks .svg-inline--fa { flex: none; margin-top: 0.2rem; color: var(--vh-orange); }
.tp-page .vp-hero__search > .svg-inline--fa { flex: none; color: var(--vh-muted); }
.tp-page .vp-more .svg-inline--fa { transition: transform 0.15s ease; }
.tp-page .vp-more:hover .svg-inline--fa { transform: translateX(3px); }
.tp-page .vp-kv__icon.svg-inline--fa { color: var(--vh-orange); justify-self: center; }

/* ------------------------------------------------------------------ hero */

/* Room for the search suggestions to hang below the banner. */
.tp-hero { z-index: 3; overflow: visible; }
.tp-hero .vp-hero__media { border-radius: 0 22px 22px 0; }
.tp-hero .vp-hero__body { flex: 1 1 auto; max-width: 35rem; }
@media (min-width: 768px) {
  .tp-page section.tp-hero.vp-hero--compact { min-height: 0; padding: 1.25rem 2rem 1.3rem; }
}
.tp-hero .vp-hero__kicker { margin-bottom: 0.5rem; }
.tp-hero .vp-hero__title { margin-bottom: 0.3rem; }
.tp-hero .vp-hero__lead { margin-bottom: 0.75rem; }
.tp-hero .tp-search { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.tp-hero .vp-hero__lead strong { color: var(--vh-brown); font-weight: 900; }
.tp-hero .vp-hero__actions { align-items: center; }

@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Narrower banners: the photo takes less room and the words wrap before it. */
  .tp-hero .vp-hero__media { width: 48%; }
  .tp-hero .vp-hero__lead { max-width: 25rem; }
}

.tp-search { position: relative; max-width: 33rem; }
.tp-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.tp-search .vh-btn { flex: none; }
.tp-search__btn-icon { display: none; }

.tp-suggest {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  z-index: 30;
  display: none;
  max-height: min(22rem, 60vh);
  padding: 0.35rem;
  overflow-y: auto;
  border: 1px solid var(--vh-line);
  border-radius: 16px;
  background: var(--vh-surface);
  box-shadow: 0 22px 44px -18px rgba(60, 30, 20, 0.5);
  text-align: left;
}
.tp-suggest.show { display: block; }
.tp-suggest__section + .tp-suggest__section { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--vh-line); }
.tp-suggest__title {
  padding: 0.45rem 0.7rem 0.2rem;
  color: var(--vh-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tp-suggest__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  color: var(--vh-ink);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.tp-suggest__item:hover, .tp-suggest__item.is-active { background: rgba(200, 97, 45, 0.1); color: var(--vh-ink); }
.tp-suggest__meta { color: var(--vh-muted); font-size: 0.74rem; font-weight: 600; }
.tp-suggest__empty { padding: 0.75rem; color: var(--vh-muted); font-size: 0.84rem; }

/* ------------------------------------------------------- category tiles */

.tp-cats .vp-cat { width: 7rem; }
.tp-cats .vp-cat__count { font-weight: 800; }
.tp-cat--empty .vp-cat__icon { opacity: 0.55; filter: grayscale(0.6); }

/* -------------------------------------------------------- list + filters */

.tp-layout { --vp-gap: 1.25rem; }
.tp-aside { gap: 1rem; }

.tp-filters__toggle { display: none; }
.tp-filters__form { margin: 0; }
.tp-filters fieldset.vp-filter { min-width: 0; margin: 0; }
/* A floated legend sits inside the fieldset's padding like any heading
   (Bootstrap's reboot clears the element after it). */
.tp-filters legend.vp-filter__title { float: left; width: 100%; padding: 0; font-size: 0.9rem; line-height: 1.3; }
.tp-filters label.vp-filter__title { display: block; }
.tp-check__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-filters .vp-check { min-width: 0; }
.tp-filters__actions { display: flex; flex-direction: column; gap: 0.5rem; }

.tp-money { position: relative; }
.tp-money__unit {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  color: var(--vh-muted);
  font-size: 0.74rem;
  font-weight: 800;
  transform: translateY(-50%);
  pointer-events: none;
}
.tp-money .vp-input { padding-left: 2.9rem; }

.tp-promo .vp-promo__title { font-size: 0.95rem; }
.tp-promo--end { display: none; }

.tp-results__head { flex-wrap: wrap; row-gap: 0.35rem; }
.tp-active .vp-chip { gap: 0.45rem; }
.tp-active .vp-chip .svg-inline--fa { font-size: 0.72rem; }

/* --------------------------------------------------------------- cards */

.tp-grid { --vp-min: 13.5rem; }
.tp-grid--wide { --vp-min: 15rem; }
.tp-hero__count { font-size: 0.78rem; }
.tp-card .vp-card__media { aspect-ratio: 4 / 3; background: var(--tp-photo-bg); }
.tp-card .vp-card__media--empty { background: var(--vp-warm-bg); font-size: 2.6rem; }
.tp-card .vp-card__flags { right: 0.75rem; }
.tp-type {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 10px -3px rgba(43, 29, 22, 0.35);
}
.tp-card .vp-card__tag { right: 0.75rem; }
.tp-card .vp-card__kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.6rem;
  margin-top: 0.15rem;
}
.tp-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3rem; margin: 0; }
.tp-rate__per { color: var(--vh-muted); font-size: 0.78rem; font-weight: 700; }
.tp-rate__ask { font-size: 0.95rem; }
.tp-card .vp-card__actions { padding-top: 0.65rem; }

/* --------------------------------------------------------------- pager */

.tp-pager { margin-top: 0.5rem; }
.vp-pager > .tp-pager__gap { min-width: 1.5rem; padding: 0; border: 0; background: transparent; color: var(--vh-muted); }

/* ------------------------------------------------------- vehicle detail */

.tp-page .tp-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--vh-line);
  border-radius: 22px;
  background: var(--vh-surface);
  box-shadow: var(--vp-shadow);
}
.tp-gallery {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--vh-line);
  border-radius: 16px;
  background: var(--tp-photo-bg);
}
.tp-gallery img { width: 100%; height: 100%; object-fit: contain; }
.tp-gallery--empty { background: var(--vp-warm-bg); color: rgba(168, 77, 28, 0.45); font-size: 4.5rem; }
.tp-gallery__status { position: absolute; top: 0.85rem; left: 0.85rem; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.35); }
.tp-gallery__status.vp-pill--green { background: #e3f4e9; }
[data-bs-theme="dark"] .tp-gallery__status.vp-pill--green { background: #173524; }

.tp-summary { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.tp-summary__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tp-pill-link { text-decoration: none; }
.tp-pill-link:hover { background: rgba(168, 77, 28, 0.18); color: var(--vh-orange); }
.tp-pill-link:focus-visible { outline: 3px solid var(--vh-focus); outline-offset: 2px; }
.tp-summary__title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.tp-summary__sub { margin: -0.35rem 0 0; color: var(--vh-muted); font-size: 0.95rem; font-weight: 700; }
.tp-summary__rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  width: fit-content;
  color: var(--vh-body);
  font-size: 0.86rem;
  text-decoration: none;
}
.tp-summary__rating:hover { color: var(--vh-brown); text-decoration: underline; }
.tp-summary__rating strong { color: var(--vh-ink); }

.tp-stars { display: inline-flex; gap: 0.12rem; color: var(--vp-star); font-size: 0.9rem; line-height: 1; }
.tp-stars .is-empty { color: #e6dacd; }
[data-bs-theme="dark"] .tp-stars .is-empty { color: #4a3a30; }
.tp-stars--sm { font-size: 0.72rem; }

.tp-price {
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(200, 97, 45, 0.15);
  border-radius: 16px;
  background: var(--vp-warm-bg);
}
.tp-price__label { margin: 0; color: var(--vh-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.tp-price__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; margin: 0.1rem 0 0; }
.tp-price__alt { margin: 0.15rem 0 0; color: var(--vh-body); font-size: 0.88rem; }
.tp-price__alt strong { color: var(--vh-ink); }

.tp-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tp-actions .vh-btn--grad { flex: 1 1 13rem; }
.tp-actions .vh-btn--outline { flex: 0 1 auto; }
.tp-note { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; color: var(--vh-muted); font-size: 0.82rem; line-height: 1.45; }
.tp-note .svg-inline--fa, .tp-note i { flex: none; margin-top: 0.18rem; color: #2f9a5b; }

.tp-facts { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.tp-facts .vp-fact { padding: 0.75rem 0.9rem; }
.tp-plate { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.04em; }

.tp-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 0.55rem 1.25rem; }
.tp-panel-action { margin-top: 1rem; }
.tp-ok { color: #1d7a45 !important; }
.tp-no { color: #c0352a !important; }
[data-bs-theme="dark"] .tp-ok { color: #6fd39a !important; }
[data-bs-theme="dark"] .tp-no { color: #f08a7e !important; }

.tp-docs { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.tp-doc { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem; border: 1px solid var(--vh-line); border-radius: 14px; }
.tp-doc__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: rgba(200, 97, 45, 0.1);
  color: var(--vh-orange);
}
.tp-doc__body { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tp-doc__type { color: var(--vh-ink); font-size: 0.9rem; font-weight: 800; }
.tp-doc__date { color: var(--vh-muted); font-size: 0.78rem; }

.tp-owner__person { margin-bottom: 0.9rem; }
.tp-owner__name { color: var(--vh-ink); font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.tp-owner__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.tp-owner__actions .vh-btn { white-space: normal; overflow-wrap: anywhere; }
/* pages.css keeps the WhatsApp button's dark green text in the dark theme. */
[data-bs-theme="dark"] .tp-page .vh-btn--wa { color: #6fd39a !important; }
[data-bs-theme="dark"] .tp-page .vh-btn--wa:hover { color: #fff !important; }

.tp-verified { display: flex; align-items: flex-start; gap: 0.9rem; }
.tp-verified__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f9a5b 0%, #1d7a45 100%);
  color: #fff;
}
.tp-verified__title { margin: 0 0 0.25rem; color: #1d7a45; font-size: 0.95rem; font-weight: 800; }
[data-bs-theme="dark"] .tp-verified__title { color: #6fd39a; }

/* Ratings & reviews */
.tp-score { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.tp-score__num { color: var(--vh-ink); font-family: var(--vp-serif); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.tp-score__side { display: flex; flex-direction: column; gap: 0.3rem; }
.tp-score__count { color: var(--vh-muted); font-size: 0.84rem; font-weight: 600; }

.tp-rate-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 0.75rem;
  padding: 1rem;
  border: 1px solid var(--vh-line);
  border-radius: 16px;
  background: var(--vh-cream);
}
.tp-rate-form__stars { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.tp-rate-form__legend { float: left; width: 100%; margin: 0 0 0.25rem; padding: 0; color: var(--vh-ink); font-size: 0.9rem; font-weight: 800; }
.tp-rate-form .vh-btn { align-self: flex-start; }
.tp-star-input { --tp-star-off: #dccfc0; display: inline-flex; gap: 0.1rem; }
[data-bs-theme="dark"] .tp-star-input { --tp-star-off: #4a3a30; }
.tp-star-input input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tp-star-input label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border-radius: 10px;
  font-size: 1.45rem;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}
/* The stars run 1 to 5 (arrow keys go the natural way): the chosen star and
   every star before it light up; hovering previews a choice. The :where()
   rules keep a specificity the hover rules can beat. */
:where(.tp-star-input) label { color: var(--tp-star-off); }
:where(.tp-star-input:has(input:checked)) label { color: var(--vp-star); }
:where(.tp-star-input input:checked + label) ~ label { color: var(--tp-star-off); }
.tp-star-input input:checked + label { color: var(--vp-star); }
.tp-star-input:hover label { color: var(--vp-star); }
.tp-star-input:hover label:hover ~ label { color: var(--tp-star-off); }
.tp-star-input label:hover { transform: scale(1.08); }
.tp-star-input input:focus-visible + label { outline: 3px solid var(--vh-focus); outline-offset: 1px; }

.tp-rate-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--vh-field);
  color: var(--vh-body);
  font-size: 0.86rem;
  line-height: 1.45;
}
.tp-rate-note .svg-inline--fa, .tp-rate-note i { flex: none; margin-top: 0.2rem; color: var(--vh-orange); }
.tp-myreview {
  margin: 0 0 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(200, 97, 45, 0.15);
  border-radius: 14px;
  background: var(--vp-warm-bg);
}
.tp-myreview__title { margin: 0 0 0.3rem; color: var(--vh-ink); font-size: 0.86rem; font-weight: 800; }
.tp-myreview__stars { margin: 0; }
.tp-myreview__text { margin: 0.35rem 0 0; color: var(--vh-body); font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; }
.tp-review-list { margin: 0; padding: 0; list-style: none; }
.tp-review-list .vp-comment__head { align-items: center; }
.tp-noreviews { padding-top: 0.25rem; }

@media (min-width: 1200px) {
  .tp-detail__aside { position: sticky; top: calc(var(--phoenix-navbar-top-height) + 1rem); }
}
@media (max-width: 1199.98px) {
  /* One column: the owner's card right after the facts, as before. */
  .tp-detail__aside { order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); align-items: start; }
}

/* -------------------------------------------------------------- booking */

.tp-book__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.tp-book__lead { margin: 0.35rem 0 0; color: var(--vh-muted); font-size: 0.95rem; }

.tp-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.tp-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  border: 1px solid var(--vh-line);
  border-radius: 999px;
  background: var(--vh-surface);
  color: var(--vh-muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.tp-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--vh-field);
  color: var(--vh-muted);
  font-size: 0.75rem;
  font-weight: 900;
}
.tp-steps .is-done { color: var(--vh-ink); }
.tp-steps .is-done .tp-steps__n { background: rgba(31, 138, 76, 0.14); color: #1d7a45; }
[data-bs-theme="dark"] .tp-steps .is-done .tp-steps__n { color: #6fd39a; }
.tp-steps .is-current { border-color: transparent; background: var(--vh-grad); color: #fff; box-shadow: 0 8px 18px -10px rgba(111, 53, 39, 0.75); }
.tp-steps .is-current .tp-steps__n { background: rgba(255, 255, 255, 0.22); color: #fff; }

.tp-book__layout { display: grid; gap: var(--vp-gap); align-items: start; min-width: 0; }
@media (min-width: 992px) {
  .tp-book__layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .tp-book__aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--phoenix-navbar-top-height) + 1rem); }
  .tp-form { grid-column: 1; grid-row: 1; }
}
@media (min-width: 1200px) {
  .tp-book__layout { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.tp-sum { overflow: hidden; }
.tp-sum__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--tp-photo-bg);
  border-bottom: 1px solid var(--vh-line);
}
.tp-sum__media img { width: 100%; height: 100%; object-fit: contain; }
.tp-sum__media--empty { background: var(--vp-warm-bg); color: rgba(168, 77, 28, 0.45); font-size: 3rem; }
.tp-sum__badge { position: absolute; top: 0.75rem; left: 0.75rem; }
.tp-sum__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.15rem 1.15rem; }
.tp-sum__title { margin: 0; color: var(--vh-ink); font-family: var(--vp-serif); font-size: 1.3rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.tp-sum__year { color: var(--vh-muted); font-family: inherit; font-size: 0.95rem; font-weight: 700; }
.tp-sum__types { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tp-sum__label { margin: 0 0 0.15rem; color: var(--vh-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.tp-sum__rates .vp-kv__row { grid-template-columns: 1.4rem minmax(0, 1fr) auto; padding: 0.45rem 0; }
.tp-sum__rates dd { color: var(--vh-brown); font-weight: 900; text-align: right; }
.tp-sum__ask { margin: 0; color: var(--vh-body); font-size: 0.86rem; }
.tp-sum__ask .vp-price { font-size: 1rem; }

.tp-form { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.4rem 1.5rem 1.5rem; }
.tp-form__required { margin: 0 0 -0.75rem; color: var(--vh-muted); font-size: 0.78rem; text-align: right; }
.tp-req { color: #c0352a; font-weight: 800; }
[data-bs-theme="dark"] .tp-req { color: #f08a7e; }
.tp-form__section { min-width: 0; margin: 0; padding: 0 0 1.25rem; border: 0; border-bottom: 1px solid var(--vh-line); }
.tp-form__title {
  float: left;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  color: var(--vh-ink);
  font-family: var(--vp-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}
.tp-form__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  background: rgba(200, 97, 45, 0.1);
  color: var(--vh-orange);
  font-size: 0.9rem;
}
.tp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; clear: left; }
.tp-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.tp-field--full { grid-column: 1 / -1; }
.tp-label { margin: 0; color: var(--vh-ink); font-size: 0.86rem; font-weight: 800; }
.tp-control { width: 100%; font-size: 0.92rem; }
.tp-form .vp-select.tp-control { width: 100%; }
.tp-form .vp-input.tp-control, .tp-form .vp-select.tp-control { min-height: 3rem; }
.tp-help { margin: 0; color: var(--vh-muted); font-size: 0.78rem; line-height: 1.4; }
.tp-control:user-invalid { border-color: #c0352a; box-shadow: 0 0 0 4px rgba(192, 53, 42, 0.12); }

.tp-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(200, 97, 45, 0.15);
  border-radius: 14px;
  background: var(--vp-warm-bg);
  color: var(--vh-body);
  font-size: 0.84rem;
  line-height: 1.5;
}
.tp-tip p { margin: 0; }
.tp-tip strong { display: block; color: var(--vh-ink); }
.tp-tip .svg-inline--fa, .tp-tip i { flex: none; margin-top: 0.2rem; color: var(--vh-orange); }
.tp-tip--secure .svg-inline--fa, .tp-tip--secure i { color: #2f9a5b; }

.tp-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.tp-estimate { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tp-estimate__label { color: var(--vh-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.tp-estimate__value { color: var(--vh-brown); font-family: var(--vp-serif); font-size: 1.55rem; font-weight: 800; line-height: 1.15; }
.tp-estimate__hint { color: var(--vh-muted); font-size: 0.78rem; }
.tp-form__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tp-form__note { flex: 1 1 100%; justify-content: flex-end; text-align: right; }
.tp-form__buttons .btn-submit { min-width: 13rem; }
.btn-submit.loading { cursor: progress; }

/* --------------------------------------------------------------- phones */

@media (max-width: 991.98px) {
  .tp-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 1.1rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--vh-ink);
    font-size: 0.92rem;
    font-weight: 800;
    text-align: left;
  }
  .tp-filters__toggle:focus-visible { outline: 3px solid var(--vh-focus); outline-offset: -3px; }
  .tp-filters__toggle-label { display: inline-flex; align-items: center; gap: 0.55rem; }
  .tp-filters__toggle-label .svg-inline--fa { color: var(--vh-orange); }
  .tp-filters__chev { color: var(--vh-muted); transition: transform 0.2s ease; }
  .tp-filters.is-collapsed .tp-filters__chev { transform: rotate(-90deg); }
  .tp-filters.is-collapsed .tp-filters__form { display: none; }
  .tp-filters__form { border-top: 1px solid var(--vh-line); }
  .tp-filters.is-filtered .tp-filters__toggle-label::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--vh-orange);
  }
  .tp-aside .tp-promo { display: none; }
  .tp-promo--end { display: flex; }

  /* Booking: the vehicle as a row above the form, not a big picture. */
  .tp-sum { display: grid; grid-template-columns: 12rem minmax(0, 1fr); }
  .tp-sum__media { height: 100%; min-height: 7.5rem; aspect-ratio: auto; border-right: 1px solid var(--vh-line); border-bottom: 0; }
  .tp-sum__badge { display: none; }
}

@media (max-width: 767.98px) {
  .tp-hero .vp-hero__media { border-radius: 18px 18px 0 0; }
  .tp-hero.vp-hero--light:has(.vp-hero__media) .vp-hero__media { height: 7rem; }
  .tp-search { padding-left: 0.85rem; }
  .tp-cats .vp-cat { width: 6rem; }

  /* Detail: the photo above the name and price. */
  .tp-page .tp-top { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0.75rem 1rem; border-radius: 18px; }
  .tp-summary { padding: 0 0.35rem; }
  .tp-actions .vh-btn { flex: 1 1 100%; }
  .tp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .tp-facts .vp-fact { gap: 0.6rem; padding: 0.65rem 0.7rem; }
  .tp-facts .vp-fact__icon { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }
  .tp-score__num { font-size: 2.2rem; }

  /* Booking: one column of fields; the vehicle as a small row above them. */
  .tp-book__head { align-items: flex-start; }
  .tp-steps { flex-wrap: nowrap; }
  .tp-steps li { flex: none; padding-right: 0.7rem; font-size: 0.74rem; }
  .tp-steps li:not(.is-current) { padding-right: 0.4rem; }
  .tp-steps li:not(.is-current) .tp-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tp-form__note { justify-content: flex-start; text-align: left; }
  .tp-fields { grid-template-columns: minmax(0, 1fr); }
  .tp-form { padding: 1.1rem 1rem 1.2rem; }
  .tp-sum { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .tp-sum__body { gap: 0.5rem; padding: 0.8rem 0.9rem; }
  .tp-sum__title { font-size: 1.05rem; }
  .tp-form__foot { flex-direction: column; align-items: stretch; }
  .tp-form__buttons { flex-direction: column-reverse; }
  .tp-form__buttons .vh-btn { width: 100%; }
}

@media (max-width: 575.98px) {
  /* Two cards a row: the buttons one above the other. */
  .tp-grid .vp-card__actions { flex-direction: column; gap: 0.4rem; }
  .tp-grid .vp-card__actions .vh-btn { width: 100%; }
  .tp-grid .tp-card .vp-card__meta { font-size: 0.76rem; }
  .tp-grid .tp-card__price .vp-price { font-size: 0.95rem; }
  .tp-grid .vp-card__flags .vp-pill, .tp-grid .tp-type { font-size: 0.64rem; }
  .tp-search__btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tp-search__btn-icon { display: inline-block; }
  .tp-search .vh-btn { width: 2.75rem; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-filters__chev, .tp-page .vp-more .svg-inline--fa { transition: none; }
}