/*
 * Additions to the bundled theme (css/site.css, generated from thereefcarrental.com). Only what the
 * old site did with jQuery or a plugin, and the blocks the CMS draws itself. Loaded after site.css.
 *
 * ⛔ The class of the open mobile menu, rc-menu-is-open, is PublicPageChrome.MenuOpenClass and must
 * be literally the same in js/site.js (PublicPageChromeTests).
 * ⛔ No photo as a CSS background anywhere (rule 8): every photo is an <img> that fills its box.
 */

/* ------------------------------------------------------------------ house-style colours */

/* The theme reads its colours from its own custom properties; they point at the house-style colours
   that /beheer/colors writes (BrandColors, rendered as a :root block by App.razor), so a colour
   changed in /beheer changes on the site. The factory values are the colours of the old site. */
:root {
    --color__primary: var(--rc-brand, #6e8c8a);
    --color__primary-hover: var(--rc-brand, #6e8c8a);
    --color__secondary: var(--rc-brand-secondary);
    --color__menu-text: var(--rc-header-text, #2d3748);
    --color__menu-text_hover: var(--rc-header-accent, #10202c);
    --color__text-main: var(--rc-ink, #005650);
    --color__text-light: var(--rc-ink-soft, #5e5e5e);
    --color__link: var(--rc-link, #2d3748);
    --color__link-hover: var(--rc-link-hover, #10202c);
}

.rq-listing-header nav.navbar {
    background-color: var(--rc-header-bg, #ffffff);
}

.rq-footer .rq-main-footer {
    background-color: var(--rc-footer-bg, #6e8c8a);
}

.rq-footer .rq-main-footer .footer-widget .widget-list p,
.rq-footer .rq-main-footer .footer-widget .widget-list p a {
    color: var(--rc-footer-text, #e3e3e3);
}

.rq-footer .rq-main-footer .footer-widget .widget-title {
    color: var(--rc-footer-heading, #ffffff);
}

.rq-footer .rq-copyright-section {
    background-color: var(--rc-footer-bottom-bg, #6e8c8a);
}

.rq-footer .rq-copyright-section .copyright-content p {
    color: var(--rc-footer-bottom-text, #ffffff);
}

/* ------------------------------------------------------------------ banner and row photos */

.rc-banner {
    overflow: hidden;
}

.rc-banner__photo,
.rc-row-photo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    max-width: none;
}

.inner-page-banner.rc-banner.no-banner-image .rq-title-container .rq-title {
    color: var(--rc-ink, #005650);
}

.rc-banner > .container {
    position: relative;
    z-index: 1;
}

/* The home hero row: the photo was a WPBakery parallax background on the old site. */
.vc_row.rc-row-photo {
    position: relative;
    overflow: hidden;
}

.vc_row.rc-row-photo > *:not(.rc-row-photo__img) {
    position: relative;
    z-index: 1;
}

/* A parallax row (js/site.js): the script gives the photo its height and its top while scrolling. */
.vc_row.rc-parallax .rc-row-photo__img {
    will-change: top;
}

/* The [[img:...]] shortcode wraps nothing: the photo of a row is the first child of that row. */
.rc-row-photo > p:first-child:empty {
    display: none;
}

/* ------------------------------------------------------------------ header and menu */

.rq-listing-header .navbar-brand img {
    width: auto;
    height: auto;
}

.rc-language-switch > a {
    text-transform: none;
}

/* The mobile menu: the theme opens the off-canvas panel with .navbar-collapse.show; the class on
   <html> keeps the page from scrolling behind it. */
html.rc-menu-is-open,
html.rc-menu-is-open body {
    overflow: hidden;
}

.rq-listing-nav-close {
    cursor: pointer;
}

/* ------------------------------------------------------------------ carousels */

.rc-carousel__slide {
    display: none;
}

.rc-carousel__slide.is-active {
    display: block;
}

/* The name of a car (and the title of a news article) was an h2 on the old site; it is the h1 of
   the page now (SEO), with exactly the size and spacing of that h2 (42px, no margin; measured
   28 September 2026 with the headless browser against thereefcarrental.com). */
.rq-listing-details h1.rq-title {
    font-family: var(--h2__font-family);
    font-size: var(--h2__font-size, 30px);
    font-weight: var(--h2__font-weight);
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .rq-listing-details h1.rq-title {
        font-size: calc(var(--h2__font-size, 30px) - 2px);
    }
}

@media (max-width: 767px) {
    .rq-listing-details h1.rq-title {
        font-size: calc(var(--h2__font-size, 30px) - 4px);
    }
}

/* The old slider showed the 1200x546 crop WordPress made of every car photo (centre crop); the
   original photo here is cropped to the same shape, so the page is exactly as high as it was. */
.details-slider.rc-carousel .rc-carousel__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 546;
    object-fit: cover;
    object-position: center;
}

.details-slider.rc-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.details-slider.rc-carousel .owl-nav button {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--heading__color, #2d3748);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.details-slider.rc-carousel .owl-prev {
    left: 15px;
}

.details-slider.rc-carousel .owl-next {
    right: 15px;
}

/* The reviewer and the stars; the theme styled them on a link (<a href="#">), here a span. */
.testimonial-wrapper .author-name-title .rc-author {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    font-weight: 600;
    color: var(--heading__color, #2d3748);
}

.testimonial-wrapper .author-name-title .rc-stars {
    color: orange;
    font-size: calc(var(--base__font-size, 16px) - 2px);
    margin-left: 4px;
}

/* ------------------------------------------------------------------ FAQ accordion */

.rc-accordion .card-header button {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.rc-accordion .collapse.show {
    display: block;
}

/* ------------------------------------------------------------------ car page */

.rq-listing-promo-content .rq-listing-item .attribute-icon {
    float: left;
}

.rc-reservation .custom-block {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.rc-reservation .custom-block .pull-right {
    margin-left: auto;
    white-space: nowrap;
}

.rc-reservation input[type="date"].rq-form-control {
    min-height: 44px;
    padding: 6px 10px 6px 34px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    width: 100%;
    font-family: inherit;
}

.rc-reservation .pick-up-date-picker,
.rc-reservation .drop-off-date-picker {
    position: relative;
    display: block;
}

.rc-reservation .pick-up-date-picker > i,
.rc-reservation .drop-off-date-picker > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.rc-reservation .booking_cost .rc-quote-line {
    display: flex;
    margin: 0 0 6px;
}

.rc-reservation .booking_cost .rc-quote-line .pull-right {
    margin-left: auto;
}

.rc-reservation .booking_cost .rc-quote-line--total {
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
}

.rc-reservation__problem:empty {
    display: none;
}

.rc-reservation__problem,
.rc-reservation__error {
    color: #c53030;
    margin: 8px 0;
}

.rc-reservation__ok {
    color: var(--color__text-main, #005650);
    font-weight: 600;
    margin-bottom: 12px;
}

.rc-reservation .redq_request_for_a_quote {
    width: 100%;
    margin-top: 16px;
}

.rc-quote-popup {
    margin-top: 16px;
}

.rc-js .rc-quote-popup {
    display: none;
}

.rc-js .rc-quote-popup.is-open {
    display: block;
}

.rc-quote-popup input,
.rc-quote-popup textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 8px 10px;
    font-family: inherit;
}

.rc-quote-popup .quote-submit {
    background: var(--color__primary, #6e8c8a);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 10px 24px;
    cursor: pointer;
}

/* ------------------------------------------------------------------ car overview ([[carlist]]) */

/* The layout of the ReactivePro page: a filter column of 285px and the car grid 48px to its right
   (measured on the rendered old page: filter at x=150, grid at x=483 on a 1440px screen). The
   cards themselves are styled by the theme bundle (listing-single, listing-details-two). */
.rc-carlist {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    column-gap: 48px;
    margin-bottom: 100px;
}

.rc-carlist__car[hidden] {
    display: none;
}

/* The grid box of ReactivePro started 42px below the top of the layout (2px padding, 20px padding
   of its contents and the 20px of its empty title), level with the list under the filter title. */
.rc-carlist__cars {
    padding-top: 42px;
}

/* The filter column of the grid layout of ReactivePro is positioned by the flow here, not by the
   inline styles of the React app. */
.rc-carlist .rc-carlist__filter.react-grid-item {
    position: static;
    transition: none;
}

.rc-carlist .reactiveGridContents___21sFx {
    padding-top: 20px;
}

.rc-carlist h3.reactiveBlockTitle___ {
    margin: 0;
}

/* The checkbox of ReactivePro (its own stylesheet, not in the theme bundle), measured on the old
   page: a 16px box with a 2px grey border 12px before a 14px label, dark grey with a white tick
   when ticked. The tick was an Ionicons glyph; here it is drawn with two borders. */
.rc-carlist .reuseCheckboxWrapper___ {
    display: flex;
}

.rc-carlist .reuseCheckboxField___ label {
    display: flex;
    align-items: flex-end;
    position: relative;
    margin: 0;
    cursor: pointer;
}

.rc-carlist .reuseCheckboxField___ label span {
    display: block;
    font-size: 14px;
    line-height: 16px;
}

.rc-carlist .reuseCheckboxField___ label::before {
    content: "";
    display: flex;
    flex: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-right: 12px;
    border: 2px solid #cbd5e0;
    border-radius: 2px;
    background-color: #fff;
}

.rc-carlist .reuseCheckboxField___ input.reuseCheckbox___:checked + label::before {
    background-color: #454545;
}

.rc-carlist .reuseCheckboxField___ input.reuseCheckbox___:checked + label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ReactivePro hid the real checkbox (display: none) and drew the box on the label. Here the checkbox
   stays in the page, invisible but reachable with the keyboard, so the filter works without a mouse. */
.rc-carlist .reuseCheckboxField___ input.reuseCheckbox___ {
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.rc-carlist .reuseCheckboxField___ {
    position: relative;
}

.rc-carlist .reuseCheckboxField___ input.reuseCheckbox___:focus-visible + label {
    outline: 2px solid var(--color__primary, #6e8c8a);
    outline-offset: 2px;
}

.rc-carlist .listing-img img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

/* The close button of the drawer and the "Filter Search" button only exist on a phone. */
.rc-carlist__filter-close,
.rc-carlist__mobile-toggle {
    display: none;
}

@media (max-width: 1199.98px) {
    /* ReactivePro below 1200 px, measured on the old page (a phone, 768 and 1024 px): no filter column
       but a drawer of 75% from the right with only "Select Type" (content padding 0 20px 30px), a
       white half-round close button of 70px on its left edge, and a dark "Filter Search" pill 30px
       above the bottom of the screen; the cards take the full width (343 px at 768, 453 px at 1024). */
    .rc-carlist {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ".react-grid-item" in the selector: it has to beat the desktop rule that makes the column static. */
    .rc-carlist .rc-carlist__filter.react-grid-item {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 75%;
        z-index: 10000;
        background: #fff;
        transform: translateX(110%);
        transition: transform .3s ease;
        box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
    }

    .rc-carlist .rc-carlist__filter.react-grid-item.is-open {
        transform: none;
    }

    .rc-carlist .rc-carlist__filter .reactiveGridContents___21sFx {
        height: 100%;
        overflow-y: auto;
        padding: 13px 20px 30px;
    }

    .rc-carlist .rc-carlist__filter h3.reactiveBlockTitle___ {
        display: none;
    }

    .rc-carlist__filter-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: -35px;
        top: 50%;
        width: 70px;
        height: 70px;
        margin-top: -35px;
        padding: 0 35px 0 0;
        border: 0;
        border-radius: 50% 0 0 50%;
        background: #fff;
        box-shadow: rgba(0, 0, 0, .3) -2px 0 4px -1px;
        color: #2d3748;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .rc-carlist .rc-carlist__filter:not(.is-open) .rc-carlist__filter-close {
        visibility: hidden;
    }

    .rc-carlist__mobile-toggle {
        display: flex;
        justify-content: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 30px;
        z-index: 9999;
        pointer-events: none;
    }

    .rc-carlist__mobile-toggle button {
        pointer-events: auto;
        height: 38px;
        padding: 0 30px;
        border: 0;
        border-radius: 140px;
        background: #2b2b2b;
        color: #fff;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
    }

    .rc-carlist__cars {
        padding-top: 0;
    }
}

/* ------------------------------------------------------------------ contact and review form */

.rc-contactform__honey {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.rc-contactform .validation-message {
    color: #c53030;
    font-size: 14px;
    margin-top: 4px;
}

.rc-contactform__ok,
.rc-contactform__error {
    border: 2px solid var(--color__primary, #6e8c8a);
    padding: 10px 16px;
    margin: 16px 0;
}

.rc-contactform__error {
    border-color: #c53030;
}

/* ------------------------------------------------------------------ WhatsApp chat button */

.rc-whatsapp {
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 999;
    font-family: inherit;
}

.rc-whatsapp__button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0;
    background: #4dc247;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
}

/* The theme sizes an svg inside a button down to a few pixels; the icon of the old button is 30px. */
.rc-whatsapp__button svg {
    width: 30px;
    height: 30px;
    flex: none;
}

.rc-whatsapp__button:hover,
.rc-whatsapp__button:focus {
    color: #fff;
}

.rc-whatsapp__window {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 300px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}

.rc-whatsapp__window[hidden] {
    display: none;
}

.rc-whatsapp__header {
    background: #0a5f54;
    color: #fff;
    padding: 16px 40px 16px 16px;
    position: relative;
}

.rc-whatsapp__title {
    display: block;
    font-weight: 600;
}

.rc-whatsapp__subtitle {
    display: block;
    font-size: 13px;
    opacity: .8;
}

.rc-whatsapp__close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.rc-whatsapp__body {
    background: #e6ddd4;
    padding: 16px;
}

.rc-whatsapp__bubble {
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 12px;
}

.rc-whatsapp__bubble p {
    margin: 0;
}

.rc-whatsapp__start {
    display: block;
    text-align: center;
    background: #4dc247;
    color: #fff;
    border-radius: 25px;
    padding: 8px 12px;
}

.rc-whatsapp__start:hover,
.rc-whatsapp__start:focus {
    color: #fff;
}

/* ------------------------------------------------------------------ misc */

.rc-hidden-badge {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1000;
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
}

.rc-hidden-badge__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc3545;
    margin-right: 6px;
}

.rc-muted {
    color: var(--color__text-light, #5e5e5e);
}

.rc-media-missing__box {
    display: inline-block;
    border: 1px dashed #c53030;
    color: #c53030;
    padding: 8px 12px;
}

.rc-footer .rq-main-footer {
    position: relative;
}

.rc-footer__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-footer__veil {
    position: absolute;
    inset: 0;
}

.rc-footer .rq-main-footer > .container {
    position: relative;
}

/* ------------------------------------------------------------------ narrow screens (final check) */

/* Measured with Scripts/measure-mobile.py on 28 September 2026 (320 to 1024 px, both languages):
   - the options of the reservation form (name plus a price that may not wrap) made the reservation
     column 326 px wide, wider than a 320 px phone and wider than its own column at 1024 px;
   - the car overview grew wider than the screen: its titles did not wrap and its spec line was one
     unbreakable row (a Dutch label is longer), so the grid track took the width of its content. */
/* The theme gives the section a fixed width of 326 px: fine next to the photo on a wide screen, too
   wide for a 320 px phone and for the column at 1024 px. */
.rc-reservation .turbo-rnb-section,
.rc-reservation .turbo-rnb-section h6 {
    width: auto;
    max-width: 100%;
}

/* The date block is a grid of 173 px + 150 px (date and time field of the old plugin) with a gap of
   15 px: 338 px, wider than the column on a phone. The columns may shrink; on a wide screen they keep
   their width. */
.rq-listing-details .sidebar.rc-reservation form.cart .rnb-component-wrapper.redq-date-time-picker {
    grid-template-columns: minmax(0, 173px) minmax(0, 150px);
}

.turbo-rnb-section .custom-block {
    flex-wrap: wrap;
    column-gap: 8px;
    min-width: 0;
}

.turbo-rnb-section .custom-block .pull-right {
    margin-left: auto;
}

.rc-carlist {
    grid-template-columns: 285px minmax(0, 1fr);
}

.rc-carlist .listing-attributes ul {
    flex-wrap: wrap;
    row-gap: 4px;
}

.rc-carlist .listing-title a {
    white-space: normal;
}

/* Label and value of a spec stand without a space between them (the markup of the old site), so a
   long Dutch pair ("Versnellingsbak Handgeschakeld") could not wrap inside a narrow card. */
.rc-carlist .listing-attributes li {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
}

/* The theme sizes the social icons of the footer to about 30 px: too small to hit with a thumb.
   The tap area becomes 44 px, the icon stays the size of the old site. */
.rq-copyright-section .social-list li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* A text field under 16 px makes iOS zoom in on a tap and stay zoomed in (an iPad in landscape is 1024 px). */
@media (max-width: 1024px) {
    .rq-listing-details .sidebar.rc-reservation form.cart .rnb-component-wrapper input.rq-form-control,
    .turbo-rnb-section input,
    .turbo-rnb-section textarea,
    .turbo-rnb-section select,
    .rq-contact-us-form-content input,
    .rq-contact-us-form-content textarea {
        font-size: 16px;
    }
}

/* The "Make reservation" layer over a car photo only appears on hover. A touch screen has no hover:
   there the layer is not drawn at all, the same button stands under every card. */
@media (hover: none) {
    .rc-carlist .listing-image-hover {
        display: none;
    }
}

/* ------------------------------------------------------------------ phone (below 768 px) */

@media (max-width: 767px) {
    .rc-whatsapp {
        right: 16px;
        bottom: 16px;
    }

    .rc-whatsapp__window {
        width: calc(100vw - 32px);
    }

    .inner-page-banner .rq-title-container .rq-title {
        font-size: 40px;
    }
}

/* The ReactivePro list had no underlined links; the theme underlines links inside page content. */
.rc-carlist a,
.rc-carlist a:hover,
.rc-carlist a:focus {
    text-decoration: none;
}

.rc-carlist .book-now-btn a,
.rc-carlist .book-now-btn a:hover,
.rc-carlist .book-now-btn a:focus,
.rc-carlist .listing-image-hover a {
    color: #fff;
}