/* Fleet listings (/campers, /rv-rental, /4x4-camper, /rooftop-tent-rentals and their landings) and
   vehicle pages. Markup: inc/fleet_section.php, inc/fleet_vehicle.php. Behaviour: assets/js/fleet.js. */

/* tokens: also on the vehicle page's floating bar, which sits outside .fleet-section */
.fleet-section,
.fl,
.fv-bar {
    --fleet-ink: #14272c;
    --fleet-muted: #6a7174;
    --fleet-line: #c7d3d8;
    --fleet-soft: #f3f6f7;
    --fleet-accent: #f37720;
    --fleet-blue: #4e9db5;
}
.fleet-section {
    padding: 28px 0 60px;
    background: #fffefb;
    color: var(--fleet-ink);
}
/* Same widths as step 1 of the booking: results in a 1360px container, filters centred in 1179px */
/* a filter on its way (fleet.js, showListing) */
.fleet-section[aria-busy="true"] .fleet-grid {
    opacity: .5;
}
.fleet-grid {
    transition: opacity .2s ease; /* the dim while a filter applies (JOH-67: the price range too) */
}
.fleet-section .container {
    max-width: 1360px;
}
.fleet-filters {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Breadcrumbs ---------- */
.fleet-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--fleet-muted);
}
.fleet-breadcrumbs li + li::before {
    content: "›";
    margin-right: 4px;
}
.fleet-breadcrumbs a {
    color: var(--fleet-muted);
    text-decoration: underline;
}

/* ---------- Filter bar ---------- */
/* Same language as step 1 of the booking: label above, round pills, thin vertical rules between groups */
.fleet-mobile-bar {
    display: none;
}
.fleet-filters {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 0;
    border: 0;
    background: transparent;
}
.fleet-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 0;
}
.fleet-facet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto; /* the groups share the full width: long names get more room, short ones stay tight */
    padding: 0 14px;
}
.fleet-facet:first-child {
    padding-left: 0;
}
.fleet-facet:last-child {
    padding-right: 0;
}
.fleet-facet .fleet-select,
.fleet-facet .fleet-select-toggle {
    width: 100%;
}
.fleet-select-toggle {
    justify-content: space-between;
    padding-left: 18px;
    padding-right: 16px;
    white-space: nowrap;
}
.fleet-facet--bare {
    justify-content: flex-end; /* no label: the button sits on the pills' line */
}
.fleet-facet + .fleet-facet::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px; /* on the pills' line, whether or not the group has a label above */
    width: 1px;
    height: 35px;
    background: var(--fleet-line);
}
.fleet-facet-label {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fleet-ink);
}
.fleet-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fleet-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 11px;
    border: 2px solid #c4d0d6;
    border-radius: 30px;
    background: #fff;
    color: var(--fleet-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
a.fleet-pill:hover,
.fleet-select-toggle:hover {
    border-color: #f4731f;
    color: #f4731f;
    text-decoration: none;
}
.fleet-pill.is-active {
    border-color: #f4731f;
    background: #f4731f;
    color: #fff;
}
a.fleet-pill.is-active:hover {
    color: #fff;
}
.fleet-pill.is-disabled {
    opacity: .4;
    cursor: not-allowed;
}
.fleet-pills .fleet-pill.is-disabled {
    display: none; /* nothing to filter: keep the row short */
}
.fleet-select-toggle,
.fleet-select-toggle.is-active {
    padding-right: 10px;
    border-color: #c4d0d6;
    background: #fff;
    color: var(--fleet-ink);
}
.fleet-select-toggle.is-active {
    border-color: #f4731f;
    font-weight: 700;
}
.fleet-select-toggle:hover {
    border-color: #f4731f;
    color: #f4731f;
}

/* Dropdowns (category, brand, model): open on click; on focus only without JS (html.fleet-js, fleet.js) */
.fleet-select {
    position: relative;
}
.fleet-select-toggle i,
.fleet-filters-toggle i {
    font-size: 11px;
}
.fleet-select-toggle[aria-expanded="true"] i,
.fleet-filters-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
    .fleet-select-toggle i,
    .fleet-filters-toggle i {
        transition: transform .2s ease;
    }
}
.fleet-select-menu {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: 100%; /* as wide as its button */
    max-height: 340px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--fleet-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20, 39, 44, .16);
}
.fleet-select-menu.is-right {
    left: auto;
    right: 0;
}
.fleet-select.is-open .fleet-select-menu,
html:not(.fleet-js) .fleet-select:focus-within .fleet-select-menu {
    display: block;
}
.fleet-select-menu a,
.fleet-select-menu span.is-active,
.fleet-select-menu span[data-href], /* the chosen option keeps its look when the phone «Clear» unticks it (fleet.js drops is-active only) */
.fleet-select-menu span.is-disabled {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--fleet-ink);
    font-size: 16px;
    text-decoration: none;
}
.fleet-select-menu a:hover {
    background: var(--fleet-soft);
    color: var(--fleet-ink);
    text-decoration: none;
}
.fleet-select-menu a.is-active,
.fleet-select-menu span.is-active {
    font-weight: 700;
}
.fleet-select-menu span.is-active {
    background: var(--fleet-soft);
}
.fleet-select-menu span.is-disabled {
    opacity: .4;
}
.fleet-select-heading {
    padding: 10px 10px 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fleet-muted);
}
.fleet-select-count {
    margin-left: auto;
    font-size: 14px;
    color: var(--fleet-muted);
}
/* chosen-count badge on the button, and radio / check boxes in the menus */
.fleet-select-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin: 0 6px 0 -2px;
    padding: 0 6px;
    border-radius: 10px;
    background: #f4731f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.fleet-select-badge[hidden] {
    display: none;
}
.fleet-select-menu :is(a, span)[data-value]::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid #c4d0d6;
    border-radius: 4px; /* same box whether the facet is single or multi-choice */
    background: #fff;
    box-sizing: border-box;
}
.fleet-select-menu :is(a, span)[data-value].is-active::before {
    border-color: #f4731f;
    background: #f4731f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.fleet-select-menu :is(a, span)[data-value].is-active {
    background: var(--fleet-soft);
}
/* JOS-19: the chosen option is a span (no link) that still takes the filter off on a tap */
.fleet-select-menu span[data-href] { cursor: pointer; }
.fleet-select-menu span[data-href]:hover { background: var(--fleet-soft); }
.fleet-select-menu span[data-href]:focus-visible { outline: 2px solid var(--fleet-accent); outline-offset: 1px; }
.fleet-select-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/* Price range: two native range inputs over one track, inside the "Price" menu */
.fleet-select-list {
    margin: 0;
    padding: 0;
    list-style: none; /* classed on purpose: the site gives "ul:not([class]) li" a dot */
}
.fleet-select-list li {
    margin: 0;
    padding: 0;
}
.fleet-select-section + .fleet-select-heading {
    margin-top: 6px;
    border-top: 1px solid var(--fleet-line);
    padding-top: 12px;
}
.fleet-select-brand + .fleet-select-brand {
    margin-top: 6px;
    border-top: 1px solid var(--fleet-line);
    padding-top: 6px;
}
.fleet-select-brand-head {
    font-weight: 600;
}
.fleet-select-menu a.fleet-select-model,
.fleet-select-menu span.fleet-select-model {
    padding-left: 34px; /* under the brand it belongs to */
}
.fleet-select-subheading {
    padding: 8px 10px 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fleet-ink);
}
.fleet-select-range {
    padding: 4px 10px 10px;
}
.fleet-select-range .fleet-range {
    width: 100%;
}
.fleet-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
}
.fleet-range-track {
    position: relative;
    height: 24px;
}
.fleet-range-track::before,
.fleet-range-bar {
    content: "";
    position: absolute;
    top: 8px;
    height: 8px;
    border-radius: 4px;
}
.fleet-range-track::before {
    left: 0;
    right: 0;
    background: var(--fleet-line);
}
.fleet-range-bar {
    left: 0;
    width: 100%;
    background: var(--fleet-accent);
}
.fleet-range-track input[type="range"] {
    position: absolute;
    left: 0;
    top: 2px;
    width: 100%;
    height: 20px;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.fleet-range-track input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--fleet-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    pointer-events: auto;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
/* JOH-67: how many vehicles the range leaves, live while dragging */
.fleet-range-count {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    color: var(--fleet-ink);
}
.fleet-range-track input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--fleet-accent);
    pointer-events: auto;
    cursor: pointer;
}

/* the «Clear / Apply» bar of the menus with several choices is for phones only (rules in the max-width: 767px block) */
@media (min-width: 768px) {
    .fleet-select-actions { display: none; }
}

/* ---------- Toolbar ---------- */
.fleet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 16px;
}
.fleet-count {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a2b29;
}
.fleet-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.fleet-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1.5px solid var(--fleet-line);
    border-radius: 999px;
    background: #fff;
    color: var(--fleet-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}
.fleet-chip span {
    color: var(--fleet-accent);
    font-size: 16px;
}
.fleet-chip:hover {
    background: var(--fleet-line);
    color: var(--fleet-ink);
    text-decoration: none;
}
.fleet-clear {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--fleet-muted);
    text-decoration: underline;
    cursor: pointer;
}
.fleet-active[hidden] {
    display: none;
}

/* ---------- Cards ---------- */
/* The vehicle card of step 1 of the booking (.book-template .grid-item .box): title and model on top,
   photo, feature row, rule, price and a full-width button. Here the price is "per day from" and the
   button opens the booking overlay to pick dates; the details link goes to the vehicle page. */
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}
.fleet-card {
    display: flex;
    flex-direction: column;
    padding: 30px 16px 16px;
    border: 2px solid var(--fleet-line);
    border-radius: 30px;
    background: #fff;
    text-align: center;
}
/* RULE of the site: a hover that draws an outline is this ring, as in the mega menu. It is drawn in from the edge the
   pointer crossed and wiped out through the exit edge (assets/js/fleet.js sets data-from and .is-lit). */
.fleet-ring { --ring-w: 2px; position: relative; }
.fleet-ring::after {
    content: "";
    position: absolute;
    inset: calc(var(--ring-w) * -1);
    border: var(--ring-w) solid var(--fleet-accent);
    border-radius: 30px;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .4s cubic-bezier(.22, 1, .36, 1);
}
.fleet-ring[data-from="top"]::after { clip-path: inset(0 0 100% 0); }
.fleet-ring[data-from="bottom"]::after { clip-path: inset(100% 0 0 0); }
.fleet-ring[data-from="left"]::after { clip-path: inset(0 100% 0 0); }
.fleet-ring[data-from="right"]::after { clip-path: inset(0 0 0 100%); }
.fleet-ring.is-lit::after, .fleet-ring:focus-visible::after { clip-path: inset(0 0 0 0); }
.fleet-ring.is-ring-reset::after { transition: none; }
@media (prefers-reduced-motion: reduce) { .fleet-ring::after { transition: none; } }
.fleet-card.is-hidden {
    display: none;
}
.fleet-card-title {
    margin: 0 0 2px;
    font-family: "Bubblegum Sans", cursive;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--fleet-ink);
}
.fleet-card-title a {
    color: inherit;
    font-weight: 400; /* global links are bold; Bubblegum only has 400 and would be faux-bolded */
    text-decoration: none;
}
/* CAR-5: the title is the card's only link and its ::before covers the whole card; the booking button sits above it */
.fleet-card-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
@media (hover: hover) {
    .fleet-card:hover .fleet-card-title a { color: var(--fleet-accent); }
    .fleet-card:hover .fleet-spec-info { --_c: var(--fleet-accent); }
}
.fleet-card-link:focus-visible { outline: none; }
.fleet-card:has(.fleet-card-link:focus-visible) { outline: 2px solid var(--fleet-accent); outline-offset: 3px; }
.fleet-card-subtitle {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--fleet-ink);
}
.fleet-card-sep-text {
    color: var(--fleet-muted);
}
.fleet-card-media {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    margin: 10px 0 0;
}
.fleet-card-media img {
    width: 100%;
    max-height: 210px;
    object-fit: contain;
}
.fleet-card-media .fleet-card-placeholder {
    width: 64px;
    height: 64px;
    opacity: .4;
}
/* the admin's badge («New Model 2024!»): at the bottom left, because the photo carries its own stickers
   on top (No F-roads on the left, WINTER DEAL on the right) */
.fleet-card-badge {
    position: absolute;
    bottom: 4px;
    left: 0;
    z-index: 1;
    max-width: 60%;
    pointer-events: none; /* a click on the badge goes to the card link below */
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--fleet-ink);
    color: #fff;
    font: 700 11px/1.2 "Cabin", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* feature row: text or number + icon, thin rules between items */
.fleet-card-specs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr; /* equal cells, each item centred, rules on the cell edges */
    align-items: center;
    margin: 18px 0 10px;
    padding: 0;
    list-style: none;
}
.fleet-card-specs li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 24px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--fleet-ink);
}
.fleet-card-specs li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    transform: translateY(-50%);
    background: #ccc;
}
.fleet-spec-num {
    font-size: 24px;
    font-weight: 500;
}
.fleet-spec-icon {
    display: block;
    width: auto;
}
.fleet-spec-icon--seats { width: 14px; }
.fleet-spec-icon--beds { width: 21px; }
.fleet-spec-icon--heating,
.fleet-spec-icon--info { width: 20px; }
.fleet-spec-info {
    --_c: var(--fleet-line);
    display: block;
    line-height: 0;
}
/* the icon is a mask, so its colour follows the link: grey, orange on hover / keyboard focus */
.fleet-spec-info .fleet-spec-icon--info {
    display: block;
    height: 20px;
    background: var(--_c);
    -webkit-mask: url(/assets/images/icon-info.svg) center / contain no-repeat;
    mask: url(/assets/images/icon-info.svg) center / contain no-repeat;
    transition: background-color .15s ease;
}
.fleet-card-rule {
    height: 1px;
    margin: 0 -16px;
    background: var(--fleet-line);
}
.fleet-card-rule--extras {
    display: flex;
    align-items: center;
    height: auto;
    background: none;
}
.fleet-card-rule--extras::before,
.fleet-card-rule--extras::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--fleet-line);
}
.fleet-card-extras {
    flex: 0 0 auto;
    margin: 0 10px;
    padding: 4px 9px;
    border-radius: 4px;
    background: #75a843;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.fleet-card-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}
.fleet-card-price-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--fleet-muted);
}
.fleet-card-price strong {
    font-family: "Cabin", sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fleet-accent);
}
.fleet-card-price strong small {
    font-size: 24px;
    font-weight: 700;
}
.fleet-card-price-alt {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.07;
    color: #1a2b29;
}
.fleet-card-price-alt b {
    font-size: 14px;
    font-weight: 700;
}
.fleet-card-actions {
    position: relative;
    z-index: 2; /* above the card link */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.fleet-card-cta.btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 50px;
    font-family: "Cabin", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
}

.fleet-empty {
    padding: 40px 20px;
    border: 1px dashed var(--fleet-line);
    border-radius: 16px;
    text-align: center;
}
.fleet-empty[hidden] {
    display: none;
}
.fleet-empty p {
    font-size: 18px;
}

@media (max-width: 1359px) {
    /* small desktop and tablet: tighter so the filter row still fits in one line */
    .fleet-facet {
        padding: 0 10px;
    }
    .fleet-select-toggle {
        padding-left: 14px;
        padding-right: 12px;
    }
    .fleet-facet + .fleet-facet::before {
        height: 32px;
    }
    .fleet-pill {
        min-height: 36px;
        padding: 5px 10px;
        font-size: 15px;
    }
    .fleet-pills {
        gap: 6px;
    }
}
@media (max-width: 1199px) {
    .fleet-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* tablet landscape: smallest sizes that keep the nine groups in one line */
    .fleet-facet {
        padding: 0 6px;
    }
    .fleet-select-toggle {
        padding-left: 10px;
        padding-right: 8px;
    }
    .fleet-pill {
        min-height: 34px;
        padding: 4px 8px;
        font-size: 14px;
    }
    .fleet-pills {
        gap: 5px;
    }
    .fleet-range-labels {
        font-size: 12px;
    }
}
@media (max-width: 991px) {
    .fleet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
    .fleet-facet {
        padding: 0 16px;
    }
}
@media (max-width: 767px) {
    .fleet-facet {
        flex: 0 0 auto;
        padding: 0;
    }
    .fleet-facet + .fleet-facet::before {
        display: none;
    }
    .fleet-mobile-bar {
        display: block;
        margin-bottom: 12px;
    }
    .fleet-filters-toggle {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--fleet-line);
        border-radius: 12px;
        background: #fff;
        font-size: 16px;
        font-weight: 700;
        text-align: left;
    }
    .fleet-filters-toggle i {
        float: right;
        margin-top: 4px;
    }
    .fleet-filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    .fleet-filters {
        display: none;
        flex-direction: column;
        gap: 18px;
        padding: 16px;
        border: 1px solid var(--fleet-line);
        border-radius: 16px;
        background: #fff;
    }
    .fleet-filters.is-open {
        display: flex;
    }
    .fleet-select-menu {
        position: static;
        box-shadow: none;
        margin-top: 4px;
        max-height: none; /* the whole list in the page: no scroll box inside the scrolling page; the «Apply» bar sticks to the screen's foot */
        overflow: visible;
    }
    /* Vehicle, Price and Brand & Model gather several choices: «Clear» and «Apply» stay at the foot of the menu (fleet.js) */
    .fleet-select-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        display: flex;
        gap: 8px;
        margin: 8px -6px -6px; /* edge to edge of the menu (its padding is 6px) */
        padding: 10px;
        border-top: 1px solid var(--fleet-line);
        border-radius: 0 0 12px 12px;
        background: #fff;
    }
    .fleet-select-clear,
    .fleet-select-apply {
        flex: 1;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        cursor: pointer;
    }
    .fleet-select-clear {
        border: 1px solid var(--fleet-line);
        background: #fff;
        color: var(--fleet-ink);
    }
    .fleet-select-apply {
        flex: 2;
        border: 0;
        background: var(--fleet-accent);
        color: #fff;
    }
    .fleet-select-apply:disabled {
        opacity: .45;
        cursor: default;
    }
    .fleet-select-clear:focus-visible,
    .fleet-select-apply:focus-visible {
        outline: 2px solid var(--fleet-accent);
        outline-offset: 2px;
    }
    .fleet-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Vehicle page: five chapters, each answering one question of the traveller ---------- */
/* No hero band here: leave room for the header, which sits over the top of every page (like .hero). */
.fleet-vehicle {
    padding-top: 150px;
    padding-bottom: 100px;
}
.fleet-vehicle-kicker {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fleet-accent);
}
.fleet-vehicle h1 {
    margin: 0;
    font-family: "Bubblegum Sans", cursive;
    font-weight: 400;
    font-size: 56px;
    line-height: 1.05;
}
.fleet-vehicle h2 {
    font-family: "Bubblegum Sans", cursive;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.15;
    margin: 0 0 12px;
}
.fleet-vehicle p {
    font-size: 17px;
    line-height: 1.5;
}
/* hero: one block, the photo with the name on the left, the panel with the booking card on the right */
.fv-hero {
    position: relative;
    margin-top: 10px;
}
.fv-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* chapters: photos on one side, copy on the other, alternating */
.fv-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 110px;
}
.fv-chapter:nth-child(even) .fv-media { order: 2; }
.fv-chapter--text { grid-template-columns: 1fr; }
/* photos keep the proportion of the photo (3:2 landscape): the boxes are 3:2 or 4:3, never a strip, so nothing is cut in half */
.fv-media {
    display: grid;
    gap: 10px;
}
.fv-media--1 { grid-template-columns: 1fr; }
.fv-media--1 .fv-ph { aspect-ratio: 3 / 2; }
.fv-media--2 { grid-template-columns: 1fr 1fr; }
.fv-media--2 .fv-ph { aspect-ratio: 4 / 3; }
.fv-media--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.fv-media--3 .fv-ph:first-child { grid-row: 1 / 3; aspect-ratio: 4 / 3; }
.fv-ph {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    background: var(--fleet-soft);
}
.fv-ph img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.fv-ph:hover img { transform: scale(1.03); }
.fv-num {
    font-family: "Bubblegum Sans", cursive;
    font-size: 90px;
    line-height: .8;
    color: #f0e2d2;
}
.fv-copy h2 { margin-top: 8px; }
.fv-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.fv-items li {
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--fleet-soft);
    font-size: 14px;
    font-weight: 600;
}
.fv-items li::before { content: none; }
.fv-q {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #fff6ee;
    font-size: 16px;
    line-height: 1.45;
}
.fv-q-mark {
    flex: 0 0 auto;
    min-width: 36px;
    font-family: "Bubblegum Sans", cursive;
    font-size: 56px;
    line-height: 1;
    text-align: center;
    color: var(--fleet-accent);
    opacity: .35;
}
.fv-q b {
    display: block;
    margin-bottom: 2px;
    font-size: 16px;
    color: var(--fleet-accent);
}
.fleet-vehicle-section {
    margin-top: 80px;
}
.fv-chapters + .fleet-vehicle-section {
    margin-top: 110px; /* same air after the last chapter as between chapters */
}
.fv-about {
    padding: 56px 0;
    border-top: 1px solid rgba(199, 211, 216, .45);
    border-bottom: 1px solid rgba(199, 211, 216, .45);
}
.fv-about--pic {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 40px;
    align-items: center;
}
.fv-about .fleet-vehicle-description {
    max-width: 820px;
}
.fv-about .fleet-equipment {
    margin-top: 40px;
}
.fv-about-img {
    width: 70%;
    max-width: 364px;
    justify-self: center; /* the cut-out of the listing, on the page itself: no frame, no gallery */
}
/* comparison with the siblings */
.fv-compare-wrap { overflow-x: auto; }
.fv-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.fv-compare th,
.fv-compare td {
    padding: 18px 14px;
    border-bottom: 1px solid var(--fleet-line);
    text-align: center;
}
.fv-compare th:first-child,
.fv-compare td:first-child {
    width: 20%;
    text-align: left;
    font-weight: 600;
    color: var(--fleet-muted);
}
.fv-compare th {
    font-family: "Bubblegum Sans", cursive;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    vertical-align: top; /* top, not bottom: names wrap to 2-4 lines on a phone and pushed the photos to different heights */
}
.fv-compare th.is-me { color: var(--fleet-accent); }
.fv-compare td.is-me { background: #fff6ee; font-weight: 700; }
.fv-compare th img {
    display: block;
    width: 120px;
    aspect-ratio: 3 / 2; /* the cut-outs are not all the same shape: one box for all, the van sits on its bottom edge */
    object-fit: contain;
    object-position: 50% 100%;
    margin: 0 auto 6px;
}
.fv-compare th a { color: inherit; text-decoration: underline; font-weight: 400; }
.fleet-equipment {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fleet-equipment li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.fleet-equipment li::before { content: none; }
.fleet-equipment svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    stroke-width: 1.75;
    color: var(--fleet-ink);
    opacity: .7;
}
.fleet-equipment p { margin: 0; }
.fv-eq-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--fleet-accent);
}
.fv-eq-value {
    margin-top: 3px !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--fleet-ink);
}
.fv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.fv-grid .fv-ph { aspect-ratio: 4 / 3; }
.fv-similar {
    margin-top: 28px;
}
.fv-similar h3 {
    margin: 0 0 6px;
    font-family: "Cabin", sans-serif;
    font-size: 18px;
    font-weight: 700;
}
.fv-similar p {
    max-width: 720px;
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--fleet-muted);
}
.fleet-similar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fleet-similar li::before { content: none; }
/* closing block: a card with the dashed inner line of the booking button */
.fv-end {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: center;
    margin-top: 70px;
    padding: 52px 56px;
    border: 2px solid var(--fleet-line);
    border-radius: 40px;
    background: #fff;
}
.fv-end::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1.5px dashed rgba(243, 119, 32, .45);
    border-radius: 28px;
    pointer-events: none;
}
.fv-end--pic {
    grid-template-columns: 260px 1fr 320px;
}
.fv-end-img {
    width: 100%;
    max-width: 260px;
    justify-self: center;
}
.fv-end .fleet-vehicle-kicker { margin-bottom: 2px; }
.fv-end h2 { color: var(--fleet-ink); }
.fv-end p { color: var(--fleet-ink); opacity: .85; }
.fv-end .fleet-card-price { align-items: flex-start; }
.fv-end .fleet-card-cta.btn { margin-top: 16px; }
.fv-trustpilot {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 14px;
    color: var(--fleet-ink);
    text-decoration: none;
    font-size: 15px;
}
.fv-trustpilot .tp-row { display: flex; align-items: center; }
.fv-trustpilot .tp-logo { display: block; width: 96px; height: auto; filter: brightness(0); opacity: .92; } /* the logo file is white */
.fv-trustpilot .tp-score { margin: 0 12px 0 8px; font-family: "Bubblegum Sans", cursive; font-size: 26px; line-height: 1; color: var(--fleet-ink); }
.fv-trustpilot .tp-stars { display: flex; gap: 4px; }
.fv-trustpilot .tp-text { font-weight: 600; }
/* reviews (inc/fleet_reviews.php) */
.fv-reviews-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 24px;
}
.fv-reviews-head h2 { margin: 0; }
.fv-reviews-head .fv-trustpilot { margin-top: 0; }
.fv-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.fv-review {
    display: flex;
    flex-direction: column;
    padding: 26px 26px 22px;
    border: 2px solid var(--fleet-line);
    border-radius: 24px;
    background: #fff;
}
.fv-review-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
}
.fv-review-stars span {
    width: 18px;
    height: 18px;
    background: #e3e9ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.69 20.69'%3E%3Cpath d='M10.3448 14.1477L13.4913 13.3052L14.806 17.5863L10.3448 14.1477ZM17.5862 8.61423H12.0474L10.3448 3.10349L8.64221 8.61423H3.10342L7.58618 12.03L5.88359 17.5407L10.3664 14.125L13.125 12.03L17.5862 8.61423Z' fill='%23fff'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.fv-review-stars span.is-on { background-color: #219653; }
.fv-review h3 {
    margin: 0 0 8px;
    font-family: "Cabin", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.fv-review p {
    flex: 1 1 auto;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
}
.fv-review footer {
    padding-top: 12px;
    border-top: 1px solid rgba(199, 211, 216, .5);
    font-size: 14px;
}
.fv-review footer b { display: block; }
.fv-review footer span { color: var(--fleet-muted); }
.fv-review footer a { color: var(--fleet-muted); text-decoration: underline; }
/* sticky bar with the price while scrolling the chapters: slides in from the top */
.fv-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 16px;
    z-index: 40;
    display: flex;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-140px);
    transition: transform .3s, visibility .3s;
}
.fv-bar.is-on {
    visibility: visible;
    opacity: 1;
    transform: none;
    transform-origin: 50% 0;
    animation: fvBarDrop .75s both;
}
/* it drops from the top, squashes on landing and bounces back */
@keyframes fvBarDrop {
    0%   { transform: translateY(-160px) scale(.9, 1.2); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
    50%  { transform: translateY(10px) scale(1.06, .88); animation-timing-function: ease-out; }
    68%  { transform: translateY(-6px) scale(.98, 1.05); animation-timing-function: ease-in-out; }
    84%  { transform: translateY(2px) scale(1.01, .98); animation-timing-function: ease-in-out; }
    100% { transform: none; }
}
/* leaving: a small dip to gather itself, then it shoots back up and fades, the reverse of the drop */
.fv-bar.is-leaving {
    visibility: visible;
    transform-origin: 50% 0;
    animation: fvBarLeave .5s both;
}
@keyframes fvBarLeave {
    0%   { transform: none; opacity: 1; animation-timing-function: ease-out; }
    22%  { transform: translateY(8px) scale(1.03, .95); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
    100% { transform: translateY(-170px) scale(.9, 1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .fv-bar.is-on { animation: none; }
    .fv-bar.is-leaving { animation: none; visibility: hidden; }
}
.fv-bar > div {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 16px 12px 26px;
    border: 2px solid var(--fleet-line);
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20, 39, 44, .18);
}
.fv-bar-text > span { /* the name; the price's own spans (data-isk, data-fx-code) stay inline */
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--fleet-muted);
}
.fv-bar-text strong {
    font-size: 26px;
    line-height: 1.1;
    color: var(--fleet-accent);
}
.fv-bar-text strong i { font-style: normal; font-size: 15px; }
.fv-bar .fleet-card-cta.btn {
    width: auto;
    padding: 10px 28px;
    font-size: 18px;
}
/* lightbox */
.fv-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    background: rgba(20, 39, 44, .94);
}
.fv-lightbox.is-on {
    display: flex;
    align-items: center;
    justify-content: center;
}
.fv-lightbox figure { margin: 0; }
.fv-lightbox img {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 16px;
}
.fv-lightbox figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}
.fv-lightbox button {
    position: absolute;
    top: 50%;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}
.fv-lb-prev { left: 24px; }
.fv-lb-next { right: 24px; }
.fv-lightbox .fv-lb-close {
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    font-size: 20px;
    transform: none;
}
@media (max-width: 1199px) {
    .fleet-equipment { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .fleet-vehicle { padding-top: 96px; padding-bottom: 64px; }
    .fleet-vehicle h1 { font-size: 40px; }
    .fv-chapter,
    .fv-about--pic,
    .fv-end,
    .fv-end--pic { grid-template-columns: 1fr; }
    .fv-end-img { max-width: 220px; justify-self: start; }
    .fv-about-img { width: 100%; max-width: 260px; }
    .fv-chapter:nth-child(even) .fv-media { order: 0; }
    .fleet-equipment,
    .fv-reviews-grid,
    .fv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .fleet-vehicle h1 { font-size: 34px; }
    .fv-chapter { padding-top: 72px; gap: 20px; }
    .fleet-vehicle-section { margin-top: 56px; }
    .fv-chapters + .fleet-vehicle-section { margin-top: 72px; }
    .fv-about { padding: 40px 0; }
    .fv-num { font-size: 64px; }
    .fleet-vehicle h2 { font-size: 30px; }
    .fleet-equipment,
    .fv-reviews-grid { grid-template-columns: 1fr; }
    .fv-end { padding: 32px 26px; border-radius: 28px; }
    .fv-end::before { inset: 10px; border-radius: 18px; }
    .fv-bar > div { gap: 12px; padding: 10px 12px 10px 16px; }
    .fv-bar-text strong { font-size: 20px; }
    .fv-bar .fleet-card-cta.btn { padding: 8px 18px; font-size: 16px; }
    .fv-lightbox button { width: 40px; height: 40px; font-size: 20px; }
    .fv-lb-prev { left: 8px; } .fv-lb-next { right: 8px; }
}

/* hero panel: photo with the name on the left, the description, facts and booking card on the right, split by a line */
.fv-hero.fv-hero--panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 0;
    height: auto;
    min-height: 660px;
    max-height: none;
    overflow: hidden;
    border-radius: 40px;
    background: var(--fleet-soft);
}
.fv-panel-photo {
    position: relative;
    overflow: hidden;
    background: var(--fleet-soft);
}
.fv-panel-photo > img { position: absolute; inset: 0; }
.fv-hero--plain .fv-panel-photo > img { padding: 40px 40px 140px; }
.fv-panel-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 110px 44px 40px;
    background: linear-gradient(to top, rgba(20, 39, 44, .85), rgba(20, 39, 44, 0));
    color: #fff;
}
.fv-panel-title .fleet-vehicle-kicker,
.fleet-vehicle .fv-panel-title h1 { color: #fff; }
.fleet-vehicle .fv-panel-title h1 { font-size: 64px; }
.fv-panel-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 30px 26px;
    border-left: 2px solid var(--fleet-line);
    background: var(--fleet-soft);
}
.fv-hero--panel .fv-hero-intro {
    max-width: none;
    margin: 0;
    font-size: 17px;
    color: var(--fleet-ink);
    opacity: .85;
}
.fv-panel-title .fleet-vehicle-kicker { margin: 10px 0 0; }

@media (max-width: 991px) {
    .fleet-vehicle .fv-panel-title h1 { font-size: 48px; }
    .fv-hero.fv-hero--panel { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 767px) {
    .fleet-vehicle .fv-panel-title h1 { font-size: 36px; }
    .fv-hero.fv-hero--panel { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 24px; }
    /* a portrait crop cut the vehicle and the title covered it: whole landscape photo, title under it */
    .fv-panel-photo { min-height: 0; }
    .fv-panel-photo > img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
    .fv-hero--plain .fv-panel-photo > img { padding: 16px; object-fit: contain; }
    .fv-panel-title { position: static; padding: 16px 20px 18px; background: none; color: var(--fleet-ink); }
    .fv-panel-title .fleet-vehicle-kicker,
    .fleet-vehicle .fv-panel-title h1 { color: var(--fleet-ink); }
    .fv-panel-side { border-left: 0; border-top: 2px solid var(--fleet-line); padding: 20px 16px; }
    /* comparison: wider columns (it scrolls), so names and photos are not squeezed */
    .fv-compare th:not(:first-child),
    .fv-compare td:not(:first-child) { min-width: 150px; }
    .fv-compare th { font-size: 18px; }
}

/* hero right column: description, spec list and the promotion block */
.fv-deal { display: grid; }
.fv-deal p {
    grid-area: 1 / 1;
    margin: 0;
    transition: opacity .4s;
}
.fv-deal p:not(.is-on) { opacity: 0; visibility: hidden; }
.fv-deal-name {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.fv-deal b {
    display: block;
    font-family: "Bubblegum Sans", cursive;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    text-wrap: balance;
}
.fv-deal em { font-style: normal; font-size: 13px; font-weight: 700; }
.fv-buy-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}
p.fv-buy-price span,
p.fv-buy-price small { font-size: 14px; font-weight: 600; white-space: nowrap; }
p.fv-buy-price strong { font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 40px; }
.fv-buy .fleet-card-cta.btn { width: auto; margin: 0; padding: 12px 24px; font-size: 20px; }
.fv-buy .fleet-card-cta.btn span::after { content: " →"; }
ul.fv-buy-trust { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; padding: 0; list-style: none; }
ul.fv-buy-trust li { position: relative; margin: 0; padding-left: 18px; font-size: 13px; font-weight: 600; }
ul.fv-buy-trust li::before { content: "✓"; position: absolute; left: 0; color: #f37720; font-weight: 800; }

/* the facts as a spec sheet */
.fv-side--list { gap: 20px; }
dl.fv-spec { margin: 0; }
dl.fv-spec div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--fleet-line);
}
dl.fv-spec div:first-child { border-top: 1px solid var(--fleet-line); }
dl.fv-spec dt { margin: 0; font-size: 15px; font-weight: 600; color: var(--fleet-muted); }
dl.fv-spec dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--fleet-accent); }
/* the promotion: one tinted block, offer on top, then price and button, then the trust line */
.fv-side--list .fv-buy {
    text-align: center;
    padding: 20px 22px 16px;
    border: 1.5px solid rgba(243, 119, 32, .4);
    border-radius: 26px;
    background: #fff4ea;
}
.fv-side--list .fv-deal p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 8px;
}
.fv-side--list .fv-deal-name { order: 1; display: inline; font-size: 12px; color: var(--fleet-accent); }
.fv-side--list .fv-deal em { order: 2; font-size: 12px; font-weight: 700; color: var(--fleet-muted); }
.fv-side--list .fv-deal em::before { content: "· "; }
.fv-side--list .fv-deal b { order: 3; flex-basis: 100%; margin-top: 6px; font-size: 26px; color: var(--fleet-ink); }
.fv-buy-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(243, 119, 32, .25);
}
.fv-side--list p.fv-buy-price { justify-content: center; color: var(--fleet-ink); }
.fv-side--list p.fv-buy-price strong { font-size: 36px; }
.fv-side--list .fv-buy .fleet-card-cta.btn { width: 100%; padding: 13px 18px; font-size: 20px; }
.fv-side--list p.fv-buy-price span,
.fv-side--list p.fv-buy-price small { color: var(--fleet-muted); }
.fv-side--list ul.fv-buy-trust { justify-content: center; margin-top: 14px; }
.fv-side--list ul.fv-buy-trust li { color: var(--fleet-muted); }

@media (max-width: 767px) {
    .fv-side--list .fv-buy .fleet-card-cta.btn { padding: 12px 18px; font-size: 19px; }
}