/*
 * Site-wide refresh (2026 redesign — TwoFools mockup)
 * Loaded globally after app.css. Restyles the shared header and footer only;
 * homepage-specific styles live in home-refresh.css.
 */

:root {
    --vch-navy: #101C3C;
    --vch-navy-deep: #0B1530;
    --vch-red: #C4112E;
    --vch-red-dark: #A30E26;
    --vch-off-white: #F4F6F9;
    --vch-muted: #5A6478;
}

/* 2026 mockup typography: Poppins for headings/UI chrome, Open Sans for
   running text (overrides the Nunito baked into app.css) */
body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.btn,
.navbar-nav,
.book-now-btn,
.bk-label {
    font-family: 'Poppins', sans-serif;
}

/* ---------- Header: grey bar becomes navy, red Book Now button ---------- */

.site-header-2026 {
    background-color: var(--vch-navy);
}

/* Figma: slim full-width bar — logo hard left, nav centred, Book Now hard right */
.site-header-2026 > .container {
    max-width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
}

.site-header-2026 .container > .row {
    align-items: center;
}

.site-header-2026 .menu-vch img {
    max-height: 68px;
    width: auto;
}

.site-header-2026 .navbar-nav {
    width: 100%;
    justify-content: center;
    align-items: center;
}

.site-header-2026 .navbar-nav.py-4 {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

.site-header-2026 .nav-book-now {
    margin-left: auto;
}


.site-header-2026 .navbar-nav a {
    font-weight: 600;
}

/* Underline the link, not the li - the li's own padding made the active and
   hovered lines touch and read as one long rule */
.site-header-2026 .nav-item.active,
.site-header-2026 .navbar-nav li:hover {
    border-bottom-color: transparent;
}

.site-header-2026 .navbar-nav .nav-item:not(.nav-book-now) > a {
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
}

.site-header-2026 .nav-item.active:not(.nav-book-now) > a,
.site-header-2026 .navbar-nav .nav-item:not(.nav-book-now):hover > a {
    border-bottom-color: var(--vch-red);
}

.site-header-2026 .nav-book-now,
.site-header-2026 .nav-book-now:hover {
    border-bottom: 0;
}

.site-header-2026 .book-now-btn {
    background-color: var(--vch-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 0.4rem 1.1rem;
}

.site-header-2026 .book-now-btn:hover,
.site-header-2026 .book-now-btn:focus {
    background-color: var(--vch-red-dark);
    color: #fff;
    text-decoration: none;
}

/* ---------- Fleet/specials result cards: uniform height, rounded ---------- */

/* Column becomes a flex stack so the card fills the space under the
   Hire This Car button; description grows, pinning buttons to the bottom
   so every card in a row ends on the same line. */
.col-lg-4.col-md-6.col-12.justify-content-center {
    display: flex;
    flex-direction: column;
}

/* A lone card in the last row lines up with the grid instead of centring */
#fleet-container.justify-content-center {
    justify-content: flex-start !important;
}

/* The Hire This Car button reads as the card's header: top corners
   rounded on the button, bottom corners rounded on the card */
.col-lg-4.col-md-6.col-12.justify-content-center > .btn {
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card {
    flex: 1 1 auto;
    border-radius: 0 0 12px 12px !important;
    border-top: 0;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* !important beats the partial's inline padding-top: 0 */
    padding: 1.25rem 1.5rem 1.5rem !important;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card .card-title {
    margin-bottom: 0.75rem;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card .card-body > .card-text {
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card .card-body .btn {
    border-radius: 8px !important;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card .fleet-image {
    margin-top: 1.5rem;
}

/* MORE INFO expands as a floating panel below the card, overlaying the
   content underneath instead of growing the card (and its row siblings) */
.col-lg-4.col-md-6.col-12.justify-content-center {
    position: relative;
}

/* static so the panel anchors to the column and escapes the card's
   overflow clipping (Bootstrap makes .card position: relative) */
.col-lg-4.col-md-6.col-12.justify-content-center .card {
    position: static;
}

/* While MORE INFO is open the card and its panel get a more defined
   outline (white background stays, because the car photos are white) */
.col-lg-4.col-md-6.col-12.justify-content-center .card,
.col-lg-4.col-md-6.col-12.justify-content-center .fleet-extra-info-container {
    transition: border-color 0.2s ease;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card.card-open,
.col-lg-4.col-md-6.col-12.justify-content-center .card.card-open .fleet-extra-info-container {
    border-color: var(--vch-navy);
}

.col-lg-4.col-md-6.col-12.justify-content-center .fleet-extra-info-container {
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    z-index: 30;
    background: #fff;
    /* overlaps the card's rounded bottom so the two read as one surface */
    margin-top: calc(-1.25rem - 12px);
    border-radius: 0 0 12px 12px;
    /* continue the card's outline so the two read as one element */
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-top: 0;
    /* soft, downward-only shadow */
    box-shadow: 0 14px 24px -12px rgba(11, 21, 48, 0.2);
    padding: 0.75rem 1.5rem 1.25rem;
}

/* Air between the page copy and the results/specials card grid */
#fleet-container {
    margin-top: 1.25rem;
}

/* Specials starburst badge: the partial pulls it up with a -25px margin,
   so the card's rounded-corner overflow clip cut off its top spikes.
   Keep it fully inside the card (and drop the <br> that padded it). */
.col-lg-4.col-md-6.col-12.justify-content-center .card .fleet-image-special {
    /* inline style on the div needs the !important */
    margin-top: 0 !important;
    /* smaller star so it covers less of the car photo (was 160px) */
    height: 115px !important;
    background-position: calc(100% - 14px) center !important;
    position: relative;
}

/* Price text lives in a box exactly the star's size, flex-centred, so it
   stays dead-centre on the graphic at any card width */
.col-lg-4.col-md-6.col-12.justify-content-center .card .fleet-image-special .special-text {
    float: none !important;
    position: absolute;
    top: 0;
    right: 14px;
    width: 115px;
    height: 115px;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* The car photo pulls itself up -95px against the old 160px star; keep
   the same clearance under the smaller one */
.col-lg-4.col-md-6.col-12.justify-content-center .card .fleet-image-special + .fleet-image {
    margin-top: -50px !important;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card:has(.fleet-image-special) > br {
    display: none;
}

/* Redesign palette on the card buttons: navy header bar, red CTA,
   navy-outline MORE INFO (replaces Bootstrap's blue/green) */
.col-lg-4.col-md-6.col-12.justify-content-center > .btn {
    background-color: var(--vch-navy);
    border-color: var(--vch-navy);
    color: #fff;
}

.col-lg-4.col-md-6.col-12.justify-content-center > .btn:hover,
.col-lg-4.col-md-6.col-12.justify-content-center > .btn:focus {
    background-color: var(--vch-navy-deep);
    border-color: var(--vch-navy-deep);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(16, 28, 60, 0.25);
}

.col-lg-4.col-md-6.col-12.justify-content-center .card .btn-success,
.col-lg-4.col-md-6.col-12.justify-content-center .card .btn-primary {
    background-color: var(--vch-red);
    border-color: var(--vch-red);
    color: #fff;
}

.col-lg-4.col-md-6.col-12.justify-content-center .card .btn-success:hover,
.col-lg-4.col-md-6.col-12.justify-content-center .card .btn-success:focus,
.col-lg-4.col-md-6.col-12.justify-content-center .card .btn-primary:hover,
.col-lg-4.col-md-6.col-12.justify-content-center .card .btn-primary:focus {
    background-color: var(--vch-red-dark);
    border-color: var(--vch-red-dark);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(196, 17, 46, 0.25);
}

.col-lg-4.col-md-6.col-12.justify-content-center .btn-more-info {
    background-color: transparent;
    border-color: var(--vch-navy);
    color: var(--vch-navy);
}

.col-lg-4.col-md-6.col-12.justify-content-center .btn-more-info:hover,
.col-lg-4.col-md-6.col-12.justify-content-center .btn-more-info:focus {
    background-color: var(--vch-navy);
    border-color: var(--vch-navy);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(16, 28, 60, 0.25);
}

/* ---------- Booking widget on inner pages ---------- */

/* Same treatment as the homepage booking card, scoped to the layout's
   .widget1/.widget2 wrappers so the widget partial stays untouched */
.widget1,
.widget2 {
    background: #fff;
    border: 1px solid #E3E7EF;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(11, 21, 48, 0.1);
    padding: 1rem 1.1rem 0.75rem;
    /* even air around the card (replaces the layout's old <br><br>) */
    margin-top: 1.75rem;
    margin-bottom: 1.25rem;
}

/* Tight, even grid: every cell gets the same small gap all round,
   which also sets the spacing between the widget's stacked rows */
.widget1 .row.no-gutters,
.widget2 .row.no-gutters {
    margin-left: -0.3rem;
    margin-right: -0.3rem;
}

.widget1 .row.no-gutters > [class*="col-"],
.widget2 .row.no-gutters > [class*="col-"] {
    padding: 0.25rem 0.3rem;
}

/* The button's wrapper is the one form-group without mb-0 — its 1rem
   margin was the dead space under the card's last row */
.widget1 .form-group,
.widget2 .form-group {
    margin-bottom: 0;
}

/* The widget precedes the suburb field with an &nbsp; spacer column
   (toggled by its JS with inline display, hence the !important) —
   in the card it just draws a blank band */
.widget1 form #pickup_suburb_hidden,
.widget1 form #return_suburb_hidden,
.widget2 form #pickup_suburb_hidden,
.widget2 form #return_suburb_hidden {
    display: none !important;
}

/* Soft grey rounded fields with the red icon inside on the left */
.widget1 .input-group,
.widget2 .input-group {
    background: var(--vch-off-white);
    border: 1px solid #E3E7EF;
    border-radius: 8px;
    overflow: hidden;
    align-items: center;
    flex-wrap: nowrap;
}

.widget1 .input-group-text,
.widget2 .input-group-text {
    background: transparent;
    border: 0;
    color: var(--vch-red);
    font-size: 0.8rem;
    padding: 0.3rem 0.25rem 0.3rem 0.65rem;
}

.widget1 .input-group .form-control,
.widget2 .input-group .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 0.8rem;
    color: var(--vch-navy);
    height: 2.15rem;
}

.widget1 .btn-search,
.widget2 .btn-search {
    background-color: var(--vch-red);
    border-color: var(--vch-red);
    border-radius: 8px !important;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.widget1 .btn-search:hover,
.widget1 .btn-search:focus,
.widget2 .btn-search:hover,
.widget2 .btn-search:focus {
    background-color: var(--vch-red-dark);
    border-color: var(--vch-red-dark);
    box-shadow: 0 0 0 0.2rem rgba(196, 17, 46, 0.25);
}

/* Small PICK-UP / RETURN panel headings (injected by app.blade.php JS) */
.widget1 .wgt-heading,
.widget2 .wgt-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vch-muted);
}

/* Side-by-side panels on desktop: the form's first two rows (pick-up and
   return sections) sit half-width next to each other, the button row
   spans below. Below md everything stacks via the widget's own col-12s. */
@media (min-width: 768px) {
    .widget1 form,
    .widget2 form {
        display: flex;
        flex-wrap: wrap;
    }

    .widget1 form > .row:nth-of-type(1),
    .widget1 form > .row:nth-of-type(2),
    .widget2 form > .row:nth-of-type(1),
    .widget2 form > .row:nth-of-type(2) {
        flex: 0 0 50%;
        max-width: 50%;
        /* pack wrapped lines to the top when one panel is taller */
        align-content: flex-start;
    }

    /* Clear gutter between the two panels */
    .widget1 form > .row:nth-of-type(1),
    .widget2 form > .row:nth-of-type(1) {
        padding-right: 0.65rem;
    }

    .widget1 form > .row:nth-of-type(2),
    .widget2 form > .row:nth-of-type(2) {
        padding-left: 0.65rem;
    }

    /* Inside a half-width panel the widget's cols remap: location and
       flight number span the panel, the date/time pair splits it */
    .widget1 form > .row:nth-of-type(1) [class*="col-md-6"],
    .widget1 form > .row:nth-of-type(2) [class*="col-md-6"],
    .widget2 form > .row:nth-of-type(1) [class*="col-md-6"],
    .widget2 form > .row:nth-of-type(2) [class*="col-md-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .widget1 form > .row:nth-of-type(1) [class*="col-md-3"],
    .widget1 form > .row:nth-of-type(2) [class*="col-md-3"],
    .widget2 form > .row:nth-of-type(1) [class*="col-md-3"],
    .widget2 form > .row:nth-of-type(2) [class*="col-md-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* The widget's empty spacer column would draw a blank band */
    .widget1 form .col-md-6.text-right:not([id]),
    .widget2 form .col-md-6.text-right:not([id]) {
        display: none;
    }

    /* Suburb search spans its panel like the other single fields
       (the widget marks it col-6, which would leave it half-width) */
    .widget1 form #pickup_suburb,
    .widget1 form #return_suburb,
    .widget2 form #pickup_suburb,
    .widget2 form #return_suburb {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Search button: centred pill under the panels (cancel the offset,
       let the column shrink to the button, centre it in its row) */
    .widget1 form > .row:nth-of-type(3),
    .widget2 form > .row:nth-of-type(3) {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
        margin-top: 0.35rem;
    }

    .widget1 form > .row:nth-of-type(3) .offset-md-6,
    .widget2 form > .row:nth-of-type(3) .offset-md-6 {
        margin-left: 0;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .widget1 form > .row:nth-of-type(3) .btn-search,
    .widget2 form > .row:nth-of-type(3) .btn-search {
        padding-left: 2.75rem;
        padding-right: 2.75rem;
    }
}

/* ---------- CMS long-form content (front/page.blade.php .page-copy) ---------- */

/* Legacy content carries inline Roboto/14px/#337ab7 styling pasted from
   the old site — the !importants re-set it to the redesign type system */
.page-copy p,
.page-copy div,
.page-copy li,
.page-copy span,
.page-copy u {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6;
}

.page-copy p {
    margin-bottom: 0.9rem !important;
}

.page-copy ul {
    padding-left: 1.4rem;
    margin-bottom: 1.5rem !important;
}

.page-copy li {
    margin-bottom: 0.45rem;
}

.page-copy h1, .page-copy h2, .page-copy h3,
.page-copy h4, .page-copy h5, .page-copy h6,
.page-copy h4 span {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700;
    color: var(--vch-navy) !important;
    margin-top: 2.25rem !important;
    margin-bottom: 0.9rem !important;
    line-height: 1.3 !important;
}

/* Some sections use a bold span in a bare div as their heading — dress
   them like the real headings */
.page-copy > div > span[style*="font-weight"] {
    display: inline-block;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700;
    color: var(--vch-navy) !important;
    margin-top: 2.25rem;
    margin-bottom: 0.9rem;
}

.page-copy a {
    color: var(--vch-red) !important;
    font-weight: 600;
}

/* The hire-guide jump menu (the one paragraph of #-anchor links) reads
   as navigation chips, not as red body links run together */

/* The chips index the sections below, so they group with the content
   under them: clear gap above, tight to the first heading beneath */
.page-copy.page-hire-guide > p:has(a[href^="#"]) {
    margin: 1.75rem 0 0.5rem !important;
}

.page-copy.page-hire-guide > p:has(a[href^="#"]) + h1,
.page-copy.page-hire-guide > p:has(a[href^="#"]) + h2,
.page-copy.page-hire-guide > p:has(a[href^="#"]) + h3,
.page-copy.page-hire-guide > p:has(a[href^="#"]) + h4 {
    margin-top: 0.75rem !important;
}

.page-copy.page-hire-guide > p:has(a[href^="#"]) br {
    display: none;
}

/* invisible <a name> anchors would render as empty chips */
.page-copy.page-hire-guide > p:has(a[href^="#"]) a:not([href]) {
    display: none;
}

.page-copy.page-hire-guide > p:has(a[href^="#"]) a[href] {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.4rem 1rem;
    /* the CMS anchors carry inline background-color: transparent */
    background-color: var(--vch-navy) !important;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem !important;
    font-weight: 600;
    color: #fff !important;
}

/* one chip's label sits in a nested span — keep it the chip's size */
.page-copy.page-hire-guide > p:has(a[href^="#"]) a[href] span {
    font-family: inherit !important;
    font-size: 0.8rem !important;
    color: inherit !important;
}

.page-copy.page-hire-guide > p:has(a[href^="#"]) a[href]:hover {
    background-color: var(--vch-red) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.page-copy a:hover {
    text-decoration: underline !important;
}

/* Embedded maps (contact page) read as a redesign card */
.page-copy iframe {
    display: block;
    width: 100%;
    border: 1px solid #E3E7EF !important;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(11, 21, 48, 0.1);
    margin-bottom: 1.5rem;
}

.page-copy strong {
    color: var(--vch-navy);
}

/* Legacy address table: no giant heading margin inside cells */
.page-copy td h1, .page-copy td h2, .page-copy td h3,
.page-copy td h4, .page-copy td h5, .page-copy td h6 {
    margin-top: 0 !important;
}

.page-copy hr {
    border-top-color: #E3E7EF;
    margin: 1.5rem 0;
}

.page-copy .text-danger {
    color: var(--vch-red) !important;
}

/* ---------- Contact page: tile layout for the CMS content ---------- */

/* The content arrives flat (map p, address table, hr, contact p, hours p,
   holidays note + dates) — grid places it without touching the CMS HTML */
.page-copy.page-contact-us {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.page-copy.page-contact-us > p:first-child {
    grid-column: 1 / -1;
    margin-bottom: 0.25rem !important;
}

/* the grid gap replaces the divider */
.page-copy.page-contact-us > hr {
    display: none;
}

/* Address, contact details and office hours stack down the left; the holiday
   note and its dates sit in the right hand column beside them. Rows are named
   explicitly because the source order interleaves the two columns. */
.page-copy.page-contact-us > table       { grid-column: 1; grid-row: 2; }
.page-copy.page-contact-us > p:nth-of-type(2) { grid-column: 1; grid-row: 3; }
.page-copy.page-contact-us > p:nth-of-type(3) { grid-column: 1; grid-row: 4; }

/* Address, contact details and office hours become three tiles */
.page-copy.page-contact-us > table,
.page-copy.page-contact-us > p:nth-of-type(2),
.page-copy.page-contact-us > p:nth-of-type(3) {
    background: var(--vch-off-white);
    border: 1px solid #E3E7EF;
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    margin: 0 !important;
    /* the legacy table carries an inline width: 50% */
    width: 100% !important;
}

.page-copy.page-contact-us > table {
    /* Bootstrap collapses table borders, and collapsed tables ignore
       their own padding — separate lets the tile padding apply */
    border-collapse: separate;
}

.page-copy.page-contact-us td {
    padding: 0;
    vertical-align: top;
}

/* Holiday note and dates, wrapped into one element by the page view. Spans the
   left column's rows so the card sits alongside them rather than under. The
   dates are br-separated lines in a single paragraph, so they stay as one
   stack - columns would run top-to-bottom while people scan left-to-right,
   and the list then reads as though it were unsorted. */
.page-copy.page-contact-us .holiday-note {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: start;
    background: var(--vch-off-white);
    border: 1px solid #E3E7EF;
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
}

.page-copy.page-contact-us .holiday-note p.text-danger {
    margin: 0 0 0.9rem !important;
}

.page-copy.page-contact-us .holiday-note p:last-child {
    margin: 0 !important;
    line-height: 1.75;
}

/* One column on small screens: let everything fall back into source order */
@media (max-width: 767.98px) {
    .page-copy.page-contact-us {
        grid-template-columns: 1fr;
    }

    .page-copy.page-contact-us > table,
    .page-copy.page-contact-us > p:nth-of-type(2),
    .page-copy.page-contact-us > p:nth-of-type(3),
    .page-copy.page-contact-us .holiday-note {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Fleet listing intro line above the card grid */
.fleet-intro {
    color: var(--vch-muted);
    font-size: 1rem;
    margin-bottom: 0 !important;
}

/* ---------- Enquiry pages (lead-time-enquiry, contact/{id}) ---------- */

.enquiry-2026 a {
    color: var(--vch-red);
    font-weight: 600;
}

.enquiry-2026 a:hover {
    text-decoration: underline;
}

.enquiry-2026 .card-img-top {
    border-radius: 12px;
    margin: 1rem 0;
}

/* Booking-details table (values used to be inline light blue) */
.enquiry-2026 table td {
    padding: 0.2rem 0;
}

.enquiry-2026 .detail-value {
    color: var(--vch-muted);
}

/* Form fields match the booking widget's treatment */
.enquiry-2026 .form-group label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vch-muted);
    margin-bottom: 0.3rem;
}

.enquiry-2026 .form-control {
    background: var(--vch-off-white);
    border: 1px solid #E3E7EF;
    border-radius: 8px;
}

.enquiry-2026 .form-control:focus {
    border-color: var(--vch-navy);
    box-shadow: 0 0 0 0.2rem rgba(16, 28, 60, 0.15);
}

.enquiry-2026 textarea.form-control {
    min-height: 6rem;
}

.enquiry-2026 .btn-primary {
    background-color: var(--vch-red);
    border-color: var(--vch-red);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 8px;
    padding: 0.5rem 1.75rem;
}

.enquiry-2026 .btn-primary:hover,
.enquiry-2026 .btn-primary:focus {
    background-color: var(--vch-red-dark);
    border-color: var(--vch-red-dark);
    box-shadow: 0 0 0 0.2rem rgba(196, 17, 46, 0.25);
}

/* ---------- Sticky footer: short pages pin it to the viewport bottom ---------- */

#app > main > .container-fluid {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#app > main > .container-fluid > .site-footer-2026 {
    margin-top: auto;
}

/* ---------- Utility strip (shared partial utility-strip.blade.php) ---------- */

/* The layout renders content inside a padded .container-fluid; the
   negative margins pull the band to the viewport edges like a row */
section.strip-2026 {
    margin-left: -15px;
    margin-right: -15px;
    background: var(--vch-red);
    padding: 0.6rem 0;
}

/* Full-width band with the same ~48px side margins as the other bands */
.strip-2026 .container {
    max-width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
}

.strip-2026 .strip-contact a {
    color: #fff;
    font-size: 0.9rem;
    margin-right: 1.75rem;
    text-decoration: none;
}

.strip-2026 .strip-search {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.strip-2026 .strip-search input {
    max-width: 320px;
    border-radius: 4px;
    border: 0;
    font-size: 0.9rem;
}

.strip-2026 .strip-search .btn {
    background: var(--vch-navy);
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ---------- Footer polish ---------- */

/* Content runs with the same ~48px side margins as the page bands */
.site-footer-2026 .bg-vch-red {
    padding: 1.5rem 2rem 1rem;
}

.site-footer-2026 h4 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}

.site-footer-2026 ul li {
    margin-bottom: 0.35rem;
}

.site-footer-2026 a {
    font-size: 0.9rem;
}

.site-footer-2026 a:hover {
    text-decoration: underline;
}

/* Icons on an even grid: fixed-size boxes so varying glyph widths align */
.site-footer-2026 .social-links {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.site-footer-2026 .social-links a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
}

.site-footer-2026 .social-links svg {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
}

/* Figma: payment logos as white rounded cards, on the same left edge */
.site-footer-2026 .payment-badges {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.site-footer-2026 .payment-badges img {
    height: 40px;
    width: auto;
    border-radius: 6px;
}

.site-footer-2026 .bg-vch-grey {
    background-color: var(--vch-navy-deep);
}

/* Bottom bar: logo left, credits right */
.site-footer-2026 .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem 2rem;
}

.site-footer-2026 .footer-bottom-logo img {
    max-height: 42px;
    width: auto;
}

/* Centred so the floating WhatsApp/chat buttons can't cover it */
.site-footer-2026 .footer-bottom-credits {
    font-size: 0.9rem;
    flex-grow: 1;
    text-align: center;
}

.site-footer-2026 .footer-bottom-credits a {
    color: #fff;
    font-size: 0.9rem;
    text-decoration: underline;
}

/* ---------- Mobile (must stay last so it overrides the rules above) ---------- */

@media (max-width: 991.98px) {
    .site-header-2026 > .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Logo keeps its natural size; nav area takes the rest */
    .site-header-2026 .container > .row > .col-2 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .site-header-2026 .container > .row > .col-10 {
        flex: 1 1 0;
        max-width: none;
    }

    .site-header-2026 .menu-vch img {
        max-height: 38px;
    }

    .site-header-2026 .book-now-mobile {
        margin-right: 0.6rem;
        margin-top: 0.1rem;
        padding: 0.3rem 0.8rem;
        font-size: 0.8rem;
    }

    /* Mockup: hamburger with a visible rounded outline */
    .site-header-2026 .navbar-toggler {
        border: 1.5px solid rgba(255, 255, 255, 0.8);
        border-radius: 8px;
        padding: 0.2rem 0.4rem;
    }

    .site-header-2026 .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }

    .site-header-2026 .navbar {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* The bar has its own Book Now on mobile — drop the duplicate menu item */
    .site-header-2026 .nav-book-now {
        display: none;
    }

    /* Footer: ~14px side inset when the columns stack (vertical rhythm
       keeps the desktop values) */
    .site-footer-2026 .bg-vch-red {
        padding-left: 0;
        padding-right: 0;
    }

    .site-footer-2026 .bg-vch-red [class*="col-"] {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    /* Stacked sections sit ~24px apart like the mockup */
    .site-footer-2026 .bg-vch-red [class*="col-"].py-4 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .site-footer-2026 .bg-vch-red ul {
        margin-bottom: 0;
    }

    .site-footer-2026 .footer-bottom {
        padding: 0.75rem 0.9rem;
    }

    .site-footer-2026 .footer-bottom-credits {
        text-align: left;
    }

    /* Utility strip on small screens: compact contact line, full-width search */
    .strip-2026 .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .strip-2026 .strip-contact {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .strip-2026 .strip-contact a {
        font-size: 0.78rem;
        margin-right: 0;
        white-space: nowrap;
    }

    .strip-2026 .strip-search {
        justify-content: flex-start;
    }

    .strip-2026 .strip-search input {
        max-width: 100%;
        flex-grow: 1;
    }
}

/* ---------------------------------------------------------------------------
   Booking and terms modals

   Both are stock Bootstrap markup living in layouts/app.blade.php. The booking
   form is nine fields long, which on a phone ran off the bottom of the screen
   and took Proceed to Payment with it, so the dialog now scrolls its own body
   and pins the header and footer.
   --------------------------------------------------------------------------- */

/* The booking form wraps the dialog rather than sitting inside it, so it is the
   percentage parent for centred and scrollable dialogs. Without a height here
   their calc(100% - 1rem) resolves against an auto-height block and both the
   centring and the scroll cap quietly stop working. */
.vch-modal > form {
    height: 100%;
    margin: 0;
}

.vch-modal .modal-content {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(11, 21, 48, 0.28);
    overflow: hidden;
}

.vch-modal .modal-header {
    background-color: var(--vch-navy);
    border-bottom: 0;
    padding: 1.15rem 1.5rem;
    align-items: center;
}

.vch-modal .modal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0;
}

.vch-modal .modal-header .close {
    color: #fff;
    opacity: 0.75;
    text-shadow: none;
    font-weight: 400;
    padding: 1rem;
    margin: -1rem -0.75rem -1rem auto;
}

.vch-modal .modal-header .close:hover {
    opacity: 1;
}

.vch-modal .modal-body {
    padding: 1.5rem;
}

/* Was 20px bold red centred text, which reads as something having gone wrong.
   It is a condition of hire, so it is a notice: tinted panel, red rule down the
   side, left aligned at body size. */
.vch-modal-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: #FCF2F4;
    border-left: 3px solid var(--vch-red);
    border-radius: 0 6px 6px 0;
    padding: 0.9rem 1rem;
    margin-bottom: 1.5rem;
}

.vch-modal-notice i {
    color: var(--vch-red);
    font-size: 1.05rem;
    line-height: 1.5;
    flex-shrink: 0;
}

.vch-modal-notice p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--vch-navy);
}

.vch-modal .modal-body label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vch-muted);
    margin-bottom: 0.35rem;
}

.vch-modal .modal-body .form-control {
    border: 1px solid #D6DBE4;
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    height: auto;
    color: var(--vch-navy);
}

.vch-modal .modal-body .form-control:focus {
    border-color: var(--vch-red);
    box-shadow: 0 0 0 3px rgba(196, 17, 46, 0.12);
}

.vch-modal .modal-body textarea.form-control {
    min-height: 74px;
    resize: vertical;
}

/* The country code select is a custom-select rather than a form-control, so it
   needs the same treatment spelled out or it sits a couple of pixels off the
   inputs beside it. */
.vch-modal .modal-body .custom-select {
    width: 100%;
    min-width: 0;
    border: 1px solid #D6DBE4;
    border-radius: 6px;
    height: auto;
    padding: 0.55rem 1.75rem 0.55rem 0.75rem;
    color: var(--vch-navy);
}

.vch-modal .modal-body .custom-select:focus {
    border-color: var(--vch-red);
    box-shadow: 0 0 0 3px rgba(196, 17, 46, 0.12);
}

/* Every field is half width from md up, so the two column edges run straight
   down the form. Below md they stack, which is what form-row already does. */
.vch-modal .modal-body .form-row > [class*="col-"] {
    min-width: 0;
}

/* The spinner on the number field is no use for a phone number and only makes
   that one input look unlike its neighbours */
.vch-modal .modal-body input[type="number"]::-webkit-outer-spin-button,
.vch-modal .modal-body input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vch-modal .modal-body input[type="number"] {
    -moz-appearance: textfield;
}

.vch-modal-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    background-color: var(--vch-off-white);
    border-top: 1px solid #E3E7EE;
    padding: 1.1rem 1.5rem;
}

.vch-modal-footer .form-check {
    margin: 0;
    padding-left: 1.5rem;
}

.vch-modal-footer .form-check-label {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--vch-navy);
}

.vch-modal-footer .form-check-label a {
    color: var(--vch-red);
    text-decoration: underline;
}

.vch-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* Three weights, used in the modals and on the quote page: solid red for the
   action we want, navy outline for the useful alternative, grey for the way
   out. They replace btn-success/btn-primary, which put Bootstrap's stock green
   and blue next to the VCH red and read as three equally urgent choices. */
.btn-vch,
.btn-vch-outline,
.btn-vch-ghost {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 6px;
    padding: 0.6rem 1.4rem;
    border: 1px solid transparent;
}

/* Generate new quote is an anchor styled as a button, so it needs telling that
   it is not ordinary body copy */
a.btn-vch,
a.btn-vch-outline,
a.btn-vch-ghost {
    text-decoration: none;
}

.btn-vch {
    background-color: var(--vch-red);
    border-color: var(--vch-red);
    color: #fff;
}

.btn-vch:hover:not(:disabled) {
    background-color: var(--vch-red-dark);
    border-color: var(--vch-red-dark);
    color: #fff;
}

/* Disabled until the terms box is ticked, so it needs to look unavailable
   rather than merely faded */
.btn-vch:disabled {
    background-color: #C9CED8;
    border-color: #C9CED8;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}

.btn-vch-outline {
    background-color: transparent;
    border-color: var(--vch-navy);
    color: var(--vch-navy);
}

.btn-vch-outline:hover {
    background-color: var(--vch-navy);
    border-color: var(--vch-navy);
    color: #fff;
}

.btn-vch-ghost {
    background-color: transparent;
    border-color: #C9CED8;
    color: var(--vch-muted);
}

.btn-vch-ghost:hover {
    background-color: #E9ECF2;
    color: var(--vch-navy);
}

/* btn-lg overrides the shared sizing above, so the larger pair at the foot of
   the quote page keeps the same radius and lettering as the row at the top */
.btn-vch.btn-lg,
.btn-vch-outline.btn-lg,
.btn-vch-ghost.btn-lg {
    font-size: 0.95rem;
    padding: 0.75rem 1.6rem;
    border-radius: 6px;
}

.vch-modal .modal-body ul {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--vch-navy);
}

.vch-modal .modal-body h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vch-navy);
    margin-top: 1.25rem;
}

@media (max-width: 767.98px) {
    /* Near enough full screen: the default gutters waste width the form needs */
    .vch-modal .modal-dialog {
        margin: 0.5rem;
        max-width: none;
    }

    .vch-modal .modal-header,
    .vch-modal .modal-body,
    .vch-modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .vch-modal .modal-title {
        font-size: 1.02rem;
    }

    /* 16px minimum, otherwise iOS Safari zooms the page in on focus and the
       reader has to pinch back out after every field */
    .vch-modal .modal-body .form-control,
    .vch-modal .modal-body .custom-select {
        font-size: 16px;
    }

    .vch-modal-actions {
        flex-direction: column-reverse;
    }

    .vch-modal-actions .btn {
        width: 100%;
    }
}

/* Payment page: the vehicle on one side, the Peach widget on the other.
   The page yields straight into a container-fluid, so it brings its own
   width limit rather than running to the edges of the screen. */
.vch-payment {
    background-color: var(--vch-off-white);
    padding: 2.5rem 0 3rem;
}

.vch-payment-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* No height and no overflow clipping here. Both together capped the
   payment card to the height of the car card beside it and cut the
   billing fields off, with Peach's sticky Pay now button left sitting
   over the middle of the form. The corners are rounded on the two
   children that reach the card edge instead. */
.vch-pay-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(11, 21, 48, 0.08);
}

.vch-pay-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}

.vch-pay-card-body {
    padding: 1.5rem;
}

.vch-pay-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vch-navy);
    margin: 0 0 0.6rem;
}

.vch-pay-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--vch-muted);
    margin: 0;
}

/* The amount the customer is about to be charged, set apart from the
   description so it is the last thing read before the card fields. */
.vch-pay-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid #E3E7EE;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.vch-pay-total-label {
    font-size: 0.85rem;
    color: var(--vch-muted);
}

.vch-pay-total-amount {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--vch-navy);
    white-space: nowrap;
}

.vch-pay-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: #FCF2F4;
    border-left: 3px solid var(--vch-red);
    border-radius: 0 6px 6px 0;
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
}

.vch-pay-notice i {
    color: var(--vch-red);
    line-height: 1.5;
    flex-shrink: 0;
}

.vch-pay-notice p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--vch-navy);
}

.vch-pay-card-header {
    background-color: var(--vch-navy);
    border-radius: 10px 10px 0 0;
    padding: 1.15rem 1.5rem;
}

.vch-pay-card-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0;
}

/* Peach's widget lays itself out against the height of this box, so the
   height has to be a real value - min-height leaves it nothing to measure
   and the form collapses to a single field. The original code forced
   height:100% for the same reason.

   No overflow here either. Their Pay now button is pinned to the bottom of
   the form, and making this a scrolling box pinned it over the Street
   Address field instead. The height is set to clear their longest form. */
.vch-pay-checkout #payment-form {
    padding: 1.25rem;
    /* Deliberately roomy. The page scrolls anyway, so a little space under
       the button costs nothing, while too little height puts their pinned
       Pay now button back on top of the last field. */
    height: 1160px;
}

.vch-pay-checkout #payment-form iframe {
    width: 100%;
    border: 0;
}

/* The card form is a good deal taller than the summary beside it, so the
   summary follows you down instead of leaving an empty column: the car and
   the amount stay in view while the card details are filled in. */
@media (min-width: 992px) {
    .vch-pay-summary {
        position: sticky;
        top: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .vch-payment {
        padding: 1.5rem 0 2rem;
    }
    .vch-pay-title {
        font-size: 1.2rem;
    }
    .vch-pay-total-amount {
        font-size: 1.4rem;
    }
    .vch-pay-card-body,
    .vch-pay-card-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .vch-pay-checkout #payment-form {
        padding: 1rem 0.75rem;
    }
}

/* Standing message above a search widget - used by the pages a customer
   lands on when there is nothing to show them: payment already made,
   reference not found. Two h3s of equal weight read as two headings
   shouting at each other, so the status is the heading and the
   explanation is body text under it. */
.vch-message {
    padding: 2.75rem 1rem 1.75rem;
    text-align: center;
}

.vch-message-inner {
    max-width: 640px;
    margin: 0 auto;
}

.vch-message-icon {
    font-size: 2.25rem;
    color: var(--vch-red);
    margin-bottom: 1rem;
}

.vch-message-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vch-navy);
    margin: 0 0 0.6rem;
}

.vch-message-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vch-muted);
    margin: 0;
}

@media (max-width: 767.98px) {
    .vch-message {
        padding: 2rem 1rem 1.25rem;
    }
    .vch-message-title {
        font-size: 1.3rem;
    }
    .vch-message-text {
        font-size: 0.95rem;
    }
}

/* Booking complete. One centred card rather than a left-aligned wall of
   text, so the confirmation reads as a result and not as another page. */
.vch-success {
    background-color: var(--vch-off-white);
    padding: 3rem 1rem 3.5rem;
}

.vch-success-card {
    max-width: 620px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(11, 21, 48, 0.08);
    padding: 2.5rem 2rem;
    text-align: center;
}

.vch-success-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background-color: #E8F5EC;
    color: #1E8E4C;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vch-success-mark svg {
    width: 32px;
    height: 32px;
}

.vch-success-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--vch-navy);
    margin: 0 0 0.75rem;
}

.vch-success-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vch-muted);
    margin: 0;
}

.vch-success-contact {
    background-color: var(--vch-off-white);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    margin: 1.75rem 0;
}

.vch-success-contact p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--vch-navy);
    margin: 0 0 0.35rem;
}

.vch-success-contact a {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--vch-red);
    text-decoration: none;
}

.vch-success-contact a:hover {
    text-decoration: underline;
}

.vch-success-action {
    display: inline-block;
}

.vch-success-follow {
    border-top: 1px solid #E3E7EE;
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.vch-success-follow p {
    font-size: 0.85rem;
    color: var(--vch-muted);
    margin: 0 0 0.9rem;
}

/* The footer's icon rules are scoped to .site-footer-2026, so the same
   markup needs its own sizing here. */
.vch-success-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.vch-success-social a {
    color: var(--vch-navy);
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.vch-success-social a:hover {
    color: var(--vch-red);
    opacity: 1;
}

.vch-success-social svg {
    width: 26px;
    height: 26px;
    display: block;
}

@media (max-width: 767.98px) {
    .vch-success {
        padding: 2rem 1rem 2.5rem;
    }
    .vch-success-card {
        padding: 2rem 1.25rem;
    }
    .vch-success-title {
        font-size: 1.45rem;
    }
    .vch-success-lead {
        font-size: 0.95rem;
    }
}