/* Cab pages: only what packages.css (loaded first) does not already provide. Everything is
   nested under .cab-page so it never leaks into the rest of the site. */

/* Availability form, inside the dark hero card */
.cab-page .cab-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cab-page .cab-form label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b7c8d0; margin-top: 6px; }
.cab-page .cab-form input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: #fff; color: var(--pkg-navy); font: 500 15px/1 'Inter', sans-serif; }
.cab-page .cab-form input::placeholder { color: #8a979d; }
.cab-page .cab-form select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: #fff; color: var(--pkg-navy); font: 500 15px/1 'Inter', sans-serif; }
.cab-page .cab-form select:focus-visible { outline: 3px solid var(--pkg-gold); outline-offset: 1px; }
.cab-page .cab-form input:focus-visible { outline: 3px solid var(--pkg-gold); outline-offset: 1px; }
.cab-page .cab-form__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.cab-page .cab-form .pkg-btn { margin-top: 12px; width: 100%; justify-content: center; }

/* Overview: prose beside a relevant vehicle, airport, city or destination photo. */
.cab-page .cab-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.cab-page--vehicle .cab-overview, .cab-page--visual .cab-overview { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
.cab-page .cab-figure { margin: 0; background: #fff; border: 1px solid var(--pkg-line); border-radius: var(--pkg-radius); padding: 14px 14px 10px; box-shadow: 0 12px 32px rgba(3,46,66,.08); }
.cab-page .cab-figure img { width: 100%; height: auto; border-radius: 8px; display: block; }
.cab-page .cab-figure--scene { padding: 10px 10px 8px; overflow: hidden; }
.cab-page .cab-figure--scene img { aspect-ratio: 4 / 3; object-fit: cover; }
.cab-page .cab-figure figcaption { margin-top: 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--pkg-gray); }

/* Fare tables: wider than the fact table, with the fare as the loudest cell */
.cab-page .cab-table { font-size: 14.5px; }
.cab-page .pkg-table-wrap:has(.cab-table) { max-width: 1100px; }
.cab-page .cab-table thead th { background: var(--pkg-navy); color: #fff; border-bottom: 0; white-space: nowrap; }
.cab-page .cab-table thead th a { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.6); }
.cab-page .cab-table thead th small { display: block; font-size: 11px; font-weight: 500; color: #b7c8d0; }
.cab-page .cab-table tbody th { font-weight: 700; color: var(--pkg-navy); }
.cab-page .cab-table tbody th a { color: var(--pkg-navy); text-decoration: none; }
.cab-page .cab-table tbody th a:hover { color: var(--pkg-primary); }
.cab-page .cab-fare { font-size: 16px; font-weight: 800; color: var(--pkg-primary); white-space: nowrap; }
.cab-page .cab-ask { color: var(--pkg-gray); font-weight: 600; font-size: 13.5px; }
.cab-page .cab-incl { color: var(--pkg-gray); font-size: 13px; min-width: 190px; }
.cab-page .cab-matrix td, .cab-page .cab-matrix th[scope="col"] { text-align: center; }
.cab-page .cab-matrix td small { display: block; font-size: 11px; color: var(--pkg-gray); font-weight: 500; white-space: nowrap; }
.cab-page .cab-notes { max-width: 820px; margin-inline: auto; }
.cab-page .cab-notes li { margin-bottom: 8px; }

/* Vehicle cards */
.cab-page .cab-vehicles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .cab-page .cab-vehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cab-page .cab-vehicles { grid-template-columns: minmax(0, 1fr); } }
.cab-page a.pkg-vehicle__img { display: block; }
.cab-page .pkg-vehicle h3 a { color: var(--pkg-navy); text-decoration: none; }
.cab-page .pkg-vehicle h3 a:hover { color: var(--pkg-primary); }
.cab-page .cab-vehicle__fare { margin: 0 0 10px; font-size: 14px; color: var(--pkg-gray); }
.cab-page .cab-vehicle__fare span, .cab-page .cab-vehicle__fare-note { font-size: 13px; color: var(--pkg-gray); font-weight: 500; }

/* Image-led route and related-service cards make the next useful choice feel
   like a destination rather than another wall of links. */
.cab-page .cab-route-card, .cab-page .cab-related-card { padding: 0; overflow: hidden; }
.cab-page .cab-route-cards { display: flex; flex-wrap: wrap; justify-content: center; }
.cab-page .cab-route-cards .cab-route-card { flex: 0 1 calc(25% - 14px); min-width: 220px; }
.cab-page .cab-route-card__img, .cab-page .cab-related-card__img { height: 148px; overflow: hidden; background: var(--pkg-navy); }
.cab-page .cab-route-card__img img, .cab-page .cab-related-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cab-page .cab-route-card:hover .cab-route-card__img img, .cab-page .cab-related-card:hover .cab-related-card__img img { transform: scale(1.05); }
.cab-page .cab-route-card__body, .cab-page .cab-related-card__body { padding: 18px 20px 20px; }
.cab-page .cab-route-card__body h3, .cab-page .cab-related-card__body h3 { margin-top: 0; }

@media (max-width: 860px) {
	.cab-page .cab-route-cards .cab-route-card { flex-basis: calc(50% - 9px); }
}
@media (max-width: 560px) {
	.cab-page .cab-route-cards .cab-route-card { flex-basis: 100%; }
}

@media (max-width: 860px) {
	.cab-page--vehicle .cab-overview, .cab-page--visual .cab-overview { grid-template-columns: minmax(0, 1fr); }
	.cab-page .cab-figure { max-width: 380px; }
}

/* Enquiry block: stands where the fares would be on a page that has none */
.cab-page .cab-enquire { max-width: 640px; margin: 0 auto; padding: 30px 24px; text-align: center; background: #fff; border: 1px solid var(--pkg-line); border-radius: var(--pkg-radius); box-shadow: 0 12px 32px rgba(3,46,66,.08); }
.cab-page .cab-enquire .pkg-cta-row { justify-content: center; margin: 0; }
.cab-page a.pkg-btn--outline-dark { background: transparent; color: var(--pkg-navy); box-shadow: inset 0 0 0 2px var(--pkg-navy); }
.cab-page a.pkg-btn--outline-dark:hover { background: var(--pkg-navy); color: #fff; }
.cab-page .cab-none { color: #a3adb2; }