/* ==========================================================
   Fleet page (cartype.html): banner, fare switch + bulk
   button, sort. The cards and tabs are in fleet.css.
   ========================================================== */
.page-fleet { background: #070a12; }

/* ---------- Banner ---------- */
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: min(640px, 78vh); padding: 140px max(20px, 5vw) 64px; overflow: hidden; isolation: isolate; color: #fff; background: #070a12; }
.ph-bg { position: absolute; inset: 0; z-index: -1; }
.ph-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); filter: saturate(1.05); transition: transform 2.4s var(--ease-out); }
.loaded .ph-bg img { transform: scale(1.02); }
.ph-bg:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #070a12 2%, #070a12b3 38%, #070a1240 70%, #070a1299), linear-gradient(90deg, #070a12cc, transparent 65%); }
.ph-inner { max-width: 760px; }
.ph-inner > * { opacity: 0; transform: translateY(28px); transition: opacity .9s, transform 1s var(--ease-out); transition-delay: calc(.15s + var(--d, 0) * .1s); }
.loaded .ph-inner > * { opacity: 1; transform: none; }
.ph-inner > :nth-child(2) { --d: 1; } .ph-inner > :nth-child(3) { --d: 2; } .ph-inner > :nth-child(4) { --d: 3; } .ph-inner > :nth-child(5) { --d: 4; }
.crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 600 13px Outfit, sans-serif; color: #aab3c8; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.crumbs b { color: var(--amber); font-weight: 600; }
.page-hero h1 { font-size: clamp(48px, 7vw, 104px); font-weight: 600; }
.page-hero h1 em { font-family: inherit; font-weight: 400; background: linear-gradient(90deg, #ffd23f, var(--orange), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.ph-lead { max-width: 560px; margin: 22px 0 0; color: #c9d0dd; font-size: 16.5px; line-height: 1.7; }
.ph-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.ph-stats li { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 14px; border: 1px solid #ffffff22; background: #0a0f1d80; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ph-stats b { font: 800 26px/1 Outfit, sans-serif; color: var(--amber); }
.ph-stats span { font-size: 13px; color: #c9d0dd; }

/* ---------- List section ---------- */
.fleet-page { padding-top: 40px; }
.fp-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
.fp-mode { display: flex; align-items: center; gap: 14px; }
.fp-mode > p { margin: 0; font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8f98ad; }
.fp-bulk { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid #ffb70355; border-radius: 16px; background: linear-gradient(120deg, #ffb7031a, #ff2d4614); color: #fff; text-align: left; cursor: pointer; transition: border-color .3s, transform .4s var(--ease-out); }
.fp-bulk > .ic { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--amber); color: var(--ink); stroke-width: 2; }
.fp-bulk span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #c9d0dd; }
.fp-bulk b { font: 800 14.5px Outfit, sans-serif; color: #fff; }
.fp-bulk i { font-style: normal; transition: transform .3s; }
.fp-bulk:hover { border-color: var(--amber); transform: translateY(-2px); }
.fp-bulk:hover i { transform: translateX(4px); }
.fleet-page .fleet-bar { margin-top: 28px; }

.fleet-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin: 20px 2px 18px; }
.fleet-meta .fleet-status { margin: 0; }
.fleet-sort { display: inline-flex; align-items: center; gap: 10px; font: 600 13px Outfit, sans-serif; color: #8f98ad; }
.fleet-sort select { height: 44px; padding: 0 36px 0 14px; border-radius: 12px; border: 1px solid #ffffff24; background: #ffffff0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 13px center; color: #fff; font: 700 13.5px Outfit, sans-serif; appearance: none; cursor: pointer; transition: border-color .3s; }
.fleet-sort select:hover, .fleet-sort select:focus { border-color: var(--amber); outline: none; }
.fleet-sort option { background: #0e1424; }

@media (max-width: 760px) {
  .page-hero { min-height: 560px; padding: 120px 16px 44px; }
  .ph-lead { font-size: 15px; }
  .ph-stats b { font-size: 22px; }
  .fp-mode { flex-direction: column; align-items: stretch; width: 100%; }
  .fp-bulk { width: 100%; }
  .fleet-sort { width: 100%; justify-content: space-between; }
  .fleet-sort select { flex: 1; max-width: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-bg img, .ph-inner > * { transition: none; transform: none; opacity: 1; }
}

/* ---------- Sticky ride search (same fields as the home booking bar), dark like the page ---------- */
.fleet-page .ct-search { position: sticky; top: 76px; z-index: 8; gap: 8px; margin: 0 0 28px; padding: 8px; border-radius: 20px; border: 1px solid #ffffff1c; background: #0e1326e6; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 30px 60px -40px #000; transition: padding .35s, box-shadow .35s, border-color .35s; }
.fleet-page .ct-search.stuck { padding: 6px; border-color: #ffb70366; box-shadow: 0 24px 50px -24px #000d; }
.ct-search .bk-field .ic { color: #ffb703; }
.ct-search .bk-field:focus-within { border-color: #ffb703; box-shadow: 0 0 0 3px #ffb7032e; }
.ct-search .bk-tabs { background: #080b18; border: 1px solid #ffffff1f; }
.ct-search .bk-tabs span { color: #a9b1c3; }
.ct-search .bk-tabs input:checked + span { background: #ffb703; color: var(--ink); box-shadow: none; }
.fleet-page .ct-search .bk-go { min-height: 54px; background: linear-gradient(135deg, #ffd23f, #ffb703 45%, #ff7a3d); color: var(--ink); box-shadow: 0 14px 30px -16px #ffb703; }
.fleet-page .ct-search.stuck .bk-go { min-height: 46px; }
/* The type tabs scroll with the page now (the search is the bar that sticks) */
.fleet-page .fleet-bar { position: relative; top: auto; }

/* ---------- Cards on the left, filter panel on the right ---------- */
.ct-layout { grid-template-columns: minmax(0, 1fr) 290px; margin-top: 20px; }
.ct-layout .ct-main { grid-column: 1; }
.ct-layout .ct-filters { grid-column: 2; top: 152px; max-height: calc(100vh - 172px); }
.ct-main .fleet-meta { margin-top: 0; }
.ct-main .fleet-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ct-filters legend small { margin-left: 6px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #ffb703; }
.ct-star { margin-right: 2px; color: #ffc233; }
.ct-main .ht-empty { margin-top: 16px; }
@media (max-width: 1100px) {
  .fleet-page .ct-search { grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; top: auto; }
  .fleet-page .ct-search .bk-tabs, .fleet-page .ct-search .bk-go { grid-column: 1 / -1; }
  .ct-layout .ct-filters { top: 90px; max-height: calc(100vh - 110px); }
}
@media (max-width: 1000px) { .ct-layout { grid-template-columns: minmax(0, 1fr) 250px; } }
@media (max-width: 700px) {
  .ct-layout { grid-template-columns: 1fr; }
  .ct-layout .ct-filters { top: auto; max-height: 86svh; }
  .fleet-meta .hl-filter-btn { order: -1; }
}

/* ---------- Filter panel on the left, holding "Show fares" and the vehicle types too ---------- */
.ct-layout { grid-template-columns: 290px minmax(0, 1fr); }
.ct-layout .ct-main { grid-column: 2; }
.ct-layout .ct-filters { grid-column: 1; }
@media (max-width: 1000px) { .ct-layout { grid-template-columns: 250px minmax(0, 1fr); } }
@media (max-width: 700px) { .ct-layout { grid-template-columns: 1fr; } .ct-layout .ct-main { grid-column: 1; } }
.fleet-page .fp-top { justify-content: flex-end; }
/* Fare switch fits the panel width */
.ct-filters .fare-mode { display: flex; width: 100%; padding: 4px; }
.ct-filters .fare-mode label { flex: 1; }
.ct-filters .fare-mode span { justify-content: center; width: 100%; height: 40px; padding: 0 6px; gap: 5px; font-size: 12.5px; }
.ct-filters .fare-mode span .ic { font-size: 14px; }
.ct-filters .fm-pill { top: 4px; bottom: 4px; }
/* Vehicle types as a vertical list */
.ct-filters .type-tabs { display: grid; gap: 2px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.ct-filters .tt-pill { display: none; }
.ct-filters .tt { justify-content: flex-start; width: 100%; height: 40px; padding: 0 10px; flex: none; }
.ct-filters .tt b { margin-left: auto; }
.ct-filters .tt:hover { background: #ffffff08; }
.ct-filters .tt[aria-selected="true"] { background: #fff; color: var(--ink); }
/* Keep each fare option on one line in the narrow panel */
.ct-filters .fare-mode label { flex: 1 1 auto; min-width: 0; }
.ct-filters .fare-mode span { white-space: nowrap; padding: 0 7px; gap: 4px; font-size: 12px; }
@media (max-width: 1000px) { .ct-filters .fare-mode span .ic { display: none; } }