/*
Theme Name: Brro Flex Theme
Author: ronaldpostma.com @ Brro.nl
Description: Minimal flexbox-friendly starter theme with assets + templates
Version: 1.2.0
Text Domain: brro-flex-theme
*/

/* temp disable submit button until payment is completed 
button#brro-checkout-submit{
    pointer-events: none !important;
    opacity: .4 !important;
}
.brro-checkout-section-submit {
    pointer-events: none !important;
}
button#brro-checkout-submit:after {
    content: " is nog niet mogelijk";
}
    */

/* ========================================
   GLOBAL STYLES
   ======================================== */

/* CSS Custom Properties (CSS Variables) */
:root {
    --content-max-desk: min(100vw,1600px);
    --content-max-tab: min(100vw,1179px);
    --content-max-mob: min(100vw,767px);
    --gutter-desktop: 0px;
    --gutter-tablet: 0px;
    --gutter-mobile: 0px;
    --def-mob: clamp(309px, calc(28.26vw + 218.28px), 435px) /*320px @ 360 : 435px @ 767*/;
    --small-mob: clamp(290px, calc(19.66vw + 209.24px), 360px);
    --wide-mob: clamp(300px, calc(63.88vw + 90.02px), 580px);
    /* Font stacks — Zilverfloat (loaded via Google Fonts in header.php). */
    --platipy: "Platypi", serif;
    --inter: "Inter", system-ui, sans-serif;
    /* Project colors — Zilverfloat (Figma). */
    --petrol: #0b4263;
    --navy: #0d1d2d;
    --yellow: #f0b70c;
    --rust: #c75b40;
    --mist: #dfe2d5;
    --lavender: #d9cbf0;
    --chrome: #cacaca;
    --chrome-soft: #c3c3c3;
    --white: #ffffff;
    --ink: #000000;
    --gray-glass: rgba(255, 255, 255, 0.65);
    /* Alpha presets derived from brand solids (overlays / UI). */
    --petrol-overlay: rgba(11, 66, 99, 0.5);
    --yellow-glass: rgba(240, 183, 12, 0.65);
    --lang-muted: rgba(255, 255, 255, 0.55);
    /* Brro Booking — override plugin tokens (frontend.css loads at 15, theme at 20). */
    --brro-booking-color-primary: #44AF78; /*changed*/
    --brro-booking-color-primary-hover: #333333;
    --brro-booking-color-danger: #C75B40; /*changed*/
    --brro-booking-color-muted: #bcbeb8; /*changed*/
    --brro-booking-color-text: #1a1a1a;
    --brro-booking-color-on-primary: #ffffff;
    --brro-booking-color-surface: transparent;
    --brro-booking-color-msg-success: #2e7d32;
    --brro-booking-color-msg-error: #c62828;
    --brro-booking-qty-bg: #44AF78; /*changed*/
    --brro-booking-qty-fg: #ffffff;
    --brro-booking-qty-hover: #333333; /*changed*/
    --brro-booking-color-field-error: #C75B40; /*changed*/
    --brro-booking-first-step-option-width: clamp(59px, 4.93vw, 79px) /*71px @ 1440*/; /*changed*/
    --brro-booking-first-step-option-height: clamp(37px, 3.13vw, 50px) /*45px @ 1440*/; /*changed*/
}

/* ========================================
   CUSTOM ANIMATIONS
   ======================================== */

/* ========================================
   WORDPRESS ADMIN BAR
   ======================================== */

/* Hide all admin bar items by default */
body:not(.webadmin) #wpadminbar li:not(#wp-admin-bar-site-name, #wp-admin-bar-my-account, #wp-admin-bar-logout) {
    display: none !important;
}

/* ========================================
   HTML & BODY STYLES
   ======================================== */

/* Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden !important;
    margin: 0 !important;
}

body {
    background-image: linear-gradient(90deg, rgba(223, 226, 213, 0.00) 0%, #DFE2D5 49.04%, rgba(223, 226, 213, 0.00) 100%);
    background-blend-mode: multiply;
}
body.page-template-default:not(.home) {
    background-color: var(--petrol);
}

.def-width-centered {
    width: clamp(1032px, 78.82vw, 1262px) /*1135px @ 1440*/;
}
@media (max-width: 1179px) {
    .def-width-centered {
        width: clamp(712px, calc(77.13vw + 119.65px), 1029px) /*712px @ 768 : 1029px @ 1179*/;
    }
    .def-width-centered.wider {
        width: min(98vw, 1029px);
    }
}
@media (max-width: 767px) {
    .def-width-centered {
        width: var(--def-mob);
    }
}

/* ========================================
   TEXT & LINK STYLES
   ======================================== */

h1,h2,h3,h4,h5,h6,p {
    margin:0;
}

a:not(.underline) {
    text-decoration: none;
}
a {
    text-underline-offset: 2px;
}
.body a {
    text-decoration: underline;
}
.body a:hover {
    text-decoration-color: transparent;
}
a {
    transition: color 200ms ease;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Remove default search input styling in Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    filter: grayscale(100%) invert(1) brightness(200%);
}

/* ========================================
   FONT STYLES (Option A — Figma text style names)
   ======================================== */

/* Platypi — large → small */
.header {
    font-family: var(--platipy);
    font-size: clamp(52px, 4.38vw, 71px) /*63px @ 1440*/;
    font-weight: 300;
    font-style: normal;
    line-height: 107.93%;
}

.header-klein {
    font-family: var(--platipy);
    font-size: clamp(40px, 3.26vw, 53px) /*47px @ 1440*/;
    font-weight: 300;
    font-style: normal;
    line-height: 114.89%;
}

.kopjes,
.brro-booking-payment-status__heading {
    font-family: var(--platipy);
    font-size: clamp(22px, 1.94vw, 32px) /*28px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: 121.43%;
}

.logo-header {
    font-family: var(--platipy);
    font-size: clamp(20px, 1.6vw, 26px) /*23px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: 147.83%;
}

.kopje-kleiner {
    font-family: var(--platipy);
    font-size: clamp(20px, 1.53vw, 25px) /*22px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: 127.27%;
}
@media (max-width: 767px) {
    .brro-booking-hide-on-loaded.kopje-kleiner:has(.brro-aanbod-breadcrumbs) {
        font-size: 16px;
    }
}

.filter {
    font-family: var(--platipy);
    font-size: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: 140%;
}

.filter-vet,
#opties.brro-flex-booking-section h3 {
    font-family: var(--platipy);
    font-size: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    font-weight: 600;
    font-style: normal;
    line-height: 140%;
}

.knop-klein,
.brro-button,
.day-name {
    font-family: var(--platipy);
    font-size: clamp(14px, 1.04vw, 17px) /*15px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

.lang-switch {
    font-family: var(--platipy);
    font-size: clamp(12px, 0.9vw, 15px) /*13px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

/* Inter — large → small */
.intro {
    font-family: var(--inter);
    font-size: clamp(26px, 2.08vw, 34px) /*30px @ 1440*/;
    font-weight: 500;
    font-style: normal;
    line-height: 126.67%;
}

.longread-intro {
    font-family: var(--inter);
    font-size: clamp(20px, 1.6vw, 26px) /*23px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: 134.78%;
}

.knop-groot {
    font-family: var(--inter);
    font-size: clamp(19px, 1.53vw, 25px) /*22px @ 1440*/;
    font-weight: 500;
    font-style: normal;
    line-height: 127.27%;
}

.lees-groter {
    font-family: var(--inter);
    font-size: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: 145%;
}

.body,
.body-bold,
.option-subtitle,
.selection-step-descr,
#brro_booking_addtocart_options label.selectable-option:not(.timeslot),
.brro-dynamic-duration-label,
.legend-text,
.brro-toggle-link,
#brro-selection-price-summary,
select,
#brro_booked_options_display,
form,
input,
textarea,
.brro-price-overview,
.brro-message,
.brro-booking-quantity,
.brro-checkout-radio-label-text,
.brro-extra-field-descr {
    font-family: var(--inter);
    font-size: clamp(15px, 1.11vw, 18px) /*16px @ 1440*/;
    font-weight: 400;
    font-style: normal;
    line-height: 156.25%;
}
.brro-extra-field-descr,
.weekblocks .brro-booking-value-display b + span,
.selectable-option.month {
    font-size: clamp(14px, 1.04vw, 16px) /*15px @ 1440*/!important;
}

.body-bold,
.brro-checkout-radio-label-text {
    font-weight: 700;
}
.brro-booking-quantity,
.brro-extra-fieldgroup-edit label {
    font-weight: 500;
}

/* ========================================
   COLOR UTILITY CLASSES
   ======================================== */

.petrol {
    color: var(--petrol);
}
.petrol-hover:hover {
    color: var(--petrol);
}
.petrol-bg {
    background-color: var(--petrol);
}
.petrol-bg-hover:hover {
    background-color: var(--petrol);
}

.navy {
    color: var(--navy);
}
.navy-hover:hover {
    color: var(--navy);
}
.navy-bg {
    background-color: var(--navy);
}
.navy-bg-hover:hover {
    background-color: var(--navy);
}

.yellow,
.white a:hover {
    color: var(--yellow);
}
.yellow-hover:hover {
    color: var(--yellow);
}
.yellow-bg {
    background-color: var(--yellow);
}
.yellow-bg-hover:hover {
    background-color: var(--yellow);
}

.rust {
    color: var(--rust);
}
.rust-hover:hover {
    color: var(--rust);
}
.rust-bg {
    background-color: var(--rust);
}
.rust-bg-hover:hover {
    background-color: var(--rust);
}

.mist {
    color: var(--mist);
}
.mist-hover:hover {
    color: var(--mist);
}
.mist-bg {
    background-color: var(--mist);
}
.mist-bg-hover:hover {
    background-color: var(--mist);
}

.lavender {
    color: var(--lavender);
}
.lavender-hover:hover {
    color: var(--lavender);
}
.lavender-bg {
    background-color: var(--lavender);
}
.lavender-bg-hover:hover {
    background-color: var(--lavender);
}

.chrome {
    color: var(--chrome);
}
.chrome-hover:hover {
    color: var(--chrome);
}
.chrome-bg {
    background-color: var(--chrome);
}
.chrome-bg-hover:hover {
    background-color: var(--chrome);
}

.chrome-soft {
    color: var(--chrome-soft);
}
.chrome-soft-hover:hover {
    color: var(--chrome-soft);
}
.chrome-soft-bg {
    background-color: var(--chrome-soft);
}
.chrome-soft-bg-hover:hover {
    background-color: var(--chrome-soft);
}

.white,
.white a {
    color: var(--white);
}
.white-hover:hover {
    color: var(--white);
}
.white-bg {
    background-color: var(--white);
}
.white-bg-hover:hover {
    background-color: var(--white);
}

.ink {
    color: var(--ink);
}
.ink-hover:hover {
    color: var(--ink);
}
.ink-bg {
    background-color: var(--ink);
}
.ink-bg-hover:hover {
    background-color: var(--ink);
}

.petrol-overlay {
    color: var(--petrol-overlay);
}
.petrol-overlay-hover:hover {
    color: var(--petrol-overlay);
}
.petrol-overlay-bg {
    background-color: var(--petrol-overlay);
}
.petrol-overlay-bg-hover:hover {
    background-color: var(--petrol-overlay);
}

.gray-glass {
    color: var(--gray-glass);
}
.gray-glass-hover:hover {
    color: var(--gray-glass);
}
.gray-glass-bg {
    background-color: var(--gray-glass);
}
.gray-glass-bg-hover:hover {
    background-color: var(--gray-glass);
}

.yellow-glass {
    color: var(--yellow-glass);
}
.yellow-glass-hover:hover {
    color: var(--yellow-glass);
}
.yellow-glass-bg {
    background-color: var(--yellow-glass);
}
.yellow-glass-bg-hover:hover {
    background-color: var(--yellow-glass);
}

.lang-muted {
    color: var(--lang-muted);
}
.lang-muted-hover:hover {
    color: var(--lang-muted);
}
.lang-muted-bg {
    background-color: var(--lang-muted);
}
.lang-muted-bg-hover:hover {
    background-color: var(--lang-muted);
}

.transparent {
    color: transparent;
}

/* ========================================
   (STICKY) HEADER 
   ======================================== */
/* temp until translation is done */
body:not(.webadmin):not(.webeditor) header .lang-switch {
    display: none!important;
}
/* Sticky header behavior is activated by brro-fx via .brro-fx--header (JS toggles state classes). */
header.brro-fx--header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    height: clamp(81px, 6.88vw, 110px) /*99px @ 1440*/;
    transition: box-shadow 200ms ease, background-color 200ms ease;
}
.single-brro_booking_aanbod header.brro-fx--header:not(.brro-sticky-effects),
.post-type-archive-brro_booking_aanbod header.brro-fx--header:not(.brro-sticky-effects),
.page-template-bedankt header.brro-fx--header:not(.brro-sticky-effects) {
    background-color: var(--petrol);
}

/* Layout inside header. */
header.brro-fx--header .content-wrapper {
    height: 100%;
    padding-left: clamp(104px, 8.54vw, 137px) /*123px @ 1440*/;
    padding-right: clamp(50px, 4.24vw, 68px) /*61px @ 1440*/;
}
@media (max-width: 1179px) {
    header.brro-fx--header .content-wrapper {
        padding-left: clamp(64px, calc(9.73vw - 10.74px), 104px) /*64px @ 768 : 104px @ 1179*/;
        padding-right: clamp(18px, calc(5.9vw - 1.23px), 44px) /*20px @ 360 : 44px @ 767*/;
    }
}
@media (max-width: 940px) {
    body:not(.menu-open) header .lang-switch,
    header .header-main-btn {
        display: none;
    }
    header .menu-btn,
    header .lang-switch {
        margin-left: 0;
    }
    body.menu-open header .lang-switch {
        margin-right: 24px;
        order: 1;
    }
    body.menu-open header .menu-btn {
        order: 2;
    }
}
@media (max-width: 767px) {
    header.brro-fx--header .content-wrapper {
        padding-left: clamp(16px, calc(10.81vw - 18.92px), 64px) /*20px @ 360 : 64px @ 767*/;
        padding-right: clamp(18px, calc(5.9vw - 1.23px), 44px) /*20px @ 360 : 44px @ 767*/;
    }
}
@media (max-width: 1179px) {
    body:not(.home) .header-site-title,
    body:not(.home) .breadcrumb-separator {
        display: none;
    }
}
@media (max-width: 600px) {
    header .header-breadcrumbs {
        display: none;
    }
}
@media (max-width: 468px) {
    .home .header-site-title {
        display: none;
    }
}
header .header-breadcrumbs {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
}
header .header-breadcrumbs span:not(.breadcrumb-separator) {
    display: inline-block;
    margin-left: clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
}
@media (max-width: 767px) {
    header .header-breadcrumbs .breadcrumb-separator {
        display: none;
    }
    header .header-breadcrumbs span {
        margin-left: 0px;
    }
}

body:not(.menu-open) header.brro-fx--header.brro-sticky-effects:hover {
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
    background-color: var(--petrol);
}

body:not(.menu-open) header.brro-sticky-effects:not(:hover) .logo-site-title-breadcrumbs,
body:not(.menu-open) header.brro-sticky-effects:not(:hover) .header-main-btn,
body:not(.menu-open) header.brro-sticky-effects:not(:hover) .lang-switch {
    opacity: 0;
    pointer-events: none;
}
body:not(.menu-open):not(.home) header .logo-site-title-breadcrumbs,
body:not(.menu-open) header .header-main-btn,
body:not(.menu-open) header .lang-switch {
    transition: opacity 500ms ease;
}


.logo-site-title-breadcrumbs {
    gap: clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
}

.header-logo-title-link {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
}

.header-logo svg {
    display: block;
    width: 100%;
    height: 100%;
}
.header-logo {
    line-height: 0;
    width: clamp(63px, 4.38vw, 70px) /*63px @ 1440*/;
    height: clamp(70px, 4.86vw, 78px) /*70px @ 1440*/;
}

.lang-switch {
    margin-left: clamp(29px, 2.43vw, 39px) /*35px @ 1440*/;
}
.menu-btn {
    margin-left: clamp(32px, 2.71vw, 44px) /*39px @ 1440*/;
}

/* Hide the header CTA while the nav popup is open; on the archive page. */
body.menu-open .header-main-btn,
body.post-type-archive-brro_booking_aanbod .header-main-btn,
body.post-type-archive-brro_booking_aanbod .nav-popup-buttons a.navy {
    display: none;
}

/* Larger logo and title on home page */
@media (min-width: 940px) {
    .home:not(.menu-open) header .content-wrapper,
    .home:not(.menu-open) header .header-site-title.logo-header.mist,
    .home:not(.menu-open) header .header-logo {
        transition: transform 300ms ease;
    }

    .home:not(.menu-open) header:not(.brro-sticky-effects) .content-wrapper {
        transform: translateY(clamp(48px, 4.03vw, 65px) /*58px @ 1440*/);
    }
    .home:not(.menu-open) header:not(.brro-sticky-effects) .header-site-title.logo-header.mist {
        transform: scale(1.21);
        transform-origin: left center;
    }
    .home:not(.menu-open) header:not(.brro-sticky-effects) .header-logo {
        transform: scale(1.73);
        transform-origin: right center;
    }
}

/* header button styles are in the buttons section */

/* ========================================
   NAV POPUP STYLES
   ======================================== */
#nav-popup {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 998; /* Just under the header (999) so the menu button stays clickable to close. */
    opacity: 0;
    transform: translateY(-200vh);
    /* Closing path: opacity fades over 300ms, then the transform snaps back offscreen. */
    transition: opacity 300ms ease, transform 0s ease 300ms;
}
#nav-popup .nav-popup-backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0B4263 18.27%, rgba(11, 66, 99, 0.00) 68.27%);
    pointer-events: none;
}
#nav-popup.open {
    opacity: 1;
    transform: translateY(0);
    /* Opening path: transform applies instantly so the fade-in plays in the correct spot. */
    transition: opacity 300ms ease, transform 0s ease 0s;
}
#nav-popup .content-wrapper {
    gap: clamp(37px, 3.13vw, 50px) /*45px @ 1440*/;
    padding-top: clamp(103px, 8.75vw, 140px) /*126px @ 1440*/;
}

.nav-popup-small {
    width: clamp(139px, 11.81vw, 189px) /*170px @ 1440*/;
    padding-top: clamp(8px, 0.69vw, 12px) /*10px @ 1440*/;
    gap: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
}
.nav-popup-small a.current-page {
    color: var(--yellow);
    text-decoration: none!important;
    pointer-events: none;
}
@media (min-width: 768px) {
    .nav-popup-small {
        margin-left: clamp(224px, calc(20.92vw + 63.3px), 310px) /*224px @ 768 : 310px @ 1179*/;
    }
}
@media (min-width: 1180px) {
    .nav-popup-small {
        margin-left: clamp(311px, 26.39vw, 423px) /*380px @ 1440*/;
    }
}
.nav-popup-buttons {
    width: auto;
    gap: clamp(31px, 2.64vw, 43px) /*38px @ 1440*/;
}
.nav-popup-buttons a.current-page {
    color: var(--ink)!important;
    background-color: var(--chrome)!important;
    text-decoration: none!important;
    pointer-events: none;
}

/* ========================================
   FOOTER STYLES
   ======================================== */

/* Site footer — spacing + column widths (layout utilities handle flex direction). */
footer #site_footer .content-wrapper {
    padding-top: clamp(52px, 4.44vw, 72px) /*64px @ 1440*/;
    padding-bottom: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
}
@media (max-width: 1179px) {
    footer .footer-col:nth-child(2),
    footer .footer-col:nth-child(3) {
        margin-top: 40px;
    }
}

footer h2,
footer h3,
footer p {
    margin:0;
}
footer h2 {
    margin-bottom: clamp(30px, 2.5vw, 40px) /*36px @ 1440*/;
}

footer h2,
footer .usp-list:first-child {
    min-height: clamp(56px, 4.72vw, 76px) /*68px @ 1440*/;
}

/* Col 1 — Essential Marine */
footer .footer-col:first-child {
    width: clamp(381px, 32.22vw, 516px) /*464px @ 1440*/;
}
@media (min-width: 1180px) {
    footer .footer-col:first-child h2 {
        width: 95%;
    }
}
@media (max-width: 1179px) {
    footer .footer-col:first-child h2,
    footer .footer-col:first-child p {
        text-align: center;
    }
}
@media (max-width: 767px) {
    footer .footer-col:first-child {
        width: var(--def-mob);
    }
}

footer .footer-col:first-child p a:first-of-type {
    margin-top: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    display: inline-block;
}

/* Col 2 - Partners */
footer .footer-col:nth-child(2) {
    width: clamp(206px, 17.43vw, 279px) /*251px @ 1440*/;
}
@media (min-width: 1180px) {
    footer .footer-col:nth-child(2) {
        margin-left: clamp(87px, 7.36vw, 118px) /*106px @ 1440*/;
    }
}

footer .partner-logos {
    gap: clamp(13px, 1.11vw, 18px) /*16px @ 1440*/;
}

footer .partner-logos img {
    width: clamp(139px, 11.81vw, 189px) /*170px @ 1440*/;
    height: auto;
}
/* Col 3 - USP’s */
footer .footer-col:nth-child(3) {
    width: auto;
}
@media (min-width: 1180px) {
    footer .footer-col:nth-child(3) {
        margin-left: auto;
    }
}

footer .usp-list {
    gap: clamp(28px, 2.36vw, 38px) /*34px @ 1440*/;
}

footer .usp-list + .usp-list {
    margin-top: clamp(21px, 1.81vw, 29px) /*26px @ 1440*/;
}

footer .footer-usp-icon {
    width: clamp(29px, 2.43vw, 39px) /*35px @ 1440*/;
    height: clamp(29px, 2.43vw, 39px) /*35px @ 1440*/;
    object-fit: contain;
    object-position: bottom;
    filter: invert(1);
}


/* Footer bottom */
footer .footer-bottom {
    padding-top: clamp(52px, 4.44vw, 72px) /*64px @ 1440*/;
}

@media (max-width: 1179px) {
    footer .em-logo img {
        margin:auto;
    }
}

footer .em-logo img {
    display: block;
    width: clamp(324px, 27.43vw, 439px) /*395px @ 1440*/;
    height: auto;
    object-fit: contain;
}

footer .footer-bottom,
footer .footer-bottom-last,
footer .footer-bottom-last .flex {
    gap: clamp(24px, 2.01vw, 33px) /*29px @ 1440*/;
}

footer .footer-bottom-last a.conditions {
    color: #667174;
}
@media (min-width: 1180px) {
    footer .footer-bottom-last a.conditions {
        margin-right: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    }
}
footer .footer-bottom-last a img {
    display: block;
    opacity: 0.85;
    width: clamp(27px, 2.29vw, 37px) /*33px @ 1440*/;
    height: clamp(27px, 2.29vw, 37px) /*33px @ 1440*/;
    object-fit: contain;
    transition: opacity 200ms ease;
}

footer .footer-bottom-last a:hover img {
    opacity: 1;
}


/* ========================================
   REVIEWS STYLES
   ======================================== */
#reviews .content-wrapper {
    padding-top: clamp(123px, 10.42vw, 167px) /*150px @ 1440*/;
    padding-bottom: clamp(148px, 12.5vw, 200px) /*180px @ 1440*/;
}
.review-wrapper {
    width: clamp(459px, 38.89vw, 623px) /*560px @ 1440*/;
    gap: clamp(44px, 3.75vw, 60px) /*54px @ 1440*/;
    position: relative;
}
@media (max-width: 767px) {
    .review-wrapper {
        width: var(--small-mob);
    }
}
.review-text {
    height: clamp(148px, 12.5vw, 200px) /*180px @ 1440*/;
    overflow: hidden;
}
@media (max-width: 767px) {
    .review-text {
        height: auto;
        min-height: 148px;
    }
}
.quote-icon {
    position: absolute;
    width: clamp(70px, 5.97vw, 96px) /*86px @ 1440*/;
    height: clamp(51px, 4.31vw, 69px) /*62px @ 1440*/;
    object-fit: contain;
    object-position: bottom;
}
.quote-icon.top-left {
    top: clamp(57px, 4.86vw, 77px) /*70px @ 1440*/;
    left: clamp(266px, 22.57vw, 362px) /*325px @ 1440*/;
}
.quote-icon.bottom-right {
    bottom: clamp(74px, 6.25vw, 100px) /*90px @ 1440*/;
    right: clamp(266px, 22.57vw, 362px) /*325px @ 1440*/;
    transform: rotate(180deg);
}
@media (max-width: 1179px) {
    .quote-icon.top-left {
        left: clamp(100px, calc(40.39vw - 210.19px), 266px) /*100px @ 768 : 266px @ 1179*/;
    }
    .quote-icon.bottom-right {
        right: clamp(100px, calc(40.39vw - 210.19px), 266px) /*100px @ 768 : 266px @ 1179*/;
    }
}
@media (max-width: 767px) {
    .quote-icon.top-left {
        left: clamp(-3px, calc(23.1vw - 77.14px), 100px) /*6px @ 360 : 100px @ 767*/;
    }
    .quote-icon.bottom-right {
        right: clamp(-3px, calc(23.1vw - 77.14px), 100px) /*6px @ 360 : 100px @ 767*/;
    }
}

/* Swiper instance for reviews — arrows only, no bullets. */
.brro-swiper--reviews {
    position: relative;
    width: 100%;
}
.brro-swiper--reviews .swiper-button-prev,
.brro-swiper--reviews .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    height: clamp(82px, 6.94vw, 112px) /*100px @ 1440*/;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    opacity: 0.4;
    transition: transform 200ms ease, opacity 200ms ease;
}
.brro-swiper--reviews .swiper-button-prev { left: clamp(172px, 14.58vw, 234px) /*210px @ 1440*/; }
.brro-swiper--reviews .swiper-button-next { right: clamp(172px, 14.58vw, 234px) /*210px @ 1440*/; }
@media (max-width: 1179px) {
    .brro-swiper--reviews .swiper-button-prev { left: clamp(114px, calc(14.11vw + 5.62px), 172px) /*114px @ 768 : 172px @ 1179*/; }
    .brro-swiper--reviews .swiper-button-next { right: clamp(114px, calc(14.11vw + 5.62px), 172px) /*114px @ 768 : 172px @ 1179*/; }
}
@media (max-width: 767px) {
    .brro-swiper--reviews .swiper-button-prev { left: clamp(-2px, calc(9.58vw - 33.5px), 40px) /*1px @ 360 : 40px @ 767*/; }
    .brro-swiper--reviews .swiper-button-next { right: clamp(-2px, calc(9.58vw - 33.5px), 40px) /*1px @ 360 : 40px @ 767*/; }
}
.brro-swiper--reviews .swiper-button-prev svg,
.brro-swiper--reviews .swiper-button-next svg {
    display: block;
    width: 100%;
    height: 100%;
}
.brro-swiper--reviews .swiper-button-prev:hover,
.brro-swiper--reviews .swiper-button-next:hover {
    transform: translateY(-50%) scale(1.1);
    opacity: .8;
}

/* ========================================
   BORDERS, RADIUS, BLURS ETC
   ======================================== */
.radius-24 {
    border-radius: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
}
.radius-32 {
    border-radius: clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
}
.radius-24-12 {
    border-radius: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/ clamp(20px, 1.67vw, 27px) /*24px @ 1440*/
                   clamp(10px, 0.83vw, 14px) /*12px @ 1440*/  clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
}
.radius-12 {
    border-radius: clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
}
/* Frosted glass — use with semi-transparent fills (see markup: blur-40). */
.blur-40 {
    backdrop-filter: blur(40px);
}

/* ========================================
   BUTTONS
   ======================================== */
.brro-button {
    margin-bottom: 0!important;
}
.brro-button,
a.button {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    padding-top:0;
    padding-bottom:0;
    transition: background-color 400ms ease;
}
/* Layout utilities on .button — a.button beats single-class utilities otherwise. */
a.button.row-nowrap { flex-flow: row nowrap; }
a.button.justify-start { justify-content: flex-start; }
.brro-button,
.brro-button.sm,
.button.knop-klein {
    padding-top: clamp(8px, 0.69vw, 12px) /*10px @ 1440*/;
    padding-bottom: clamp(11px, 0.97vw, 16px) /*14px @ 1440*/;
    padding-left: clamp(17px, 1.46vw, 24px) /*21px @ 1440*/;
    padding-right: clamp(17px, 1.46vw, 24px) /*21px @ 1440*/;
    border-radius: clamp(5px, 0.42vw, 7px) /*6px @ 1440*/;
}
.button.knop-groot {
    padding-top: clamp(8px, 0.69vw, 12px) /*10px @ 1440*/;
    padding-bottom: clamp(8px, 0.69vw, 12px) /*10px @ 1440*/;
    padding-left: clamp(24px, 2.01vw, 33px) /*29px @ 1440*/;
    padding-right: clamp(24px, 2.01vw, 33px) /*29px @ 1440*/;
    border-radius: clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
}

/* Header menu button — background blend should not affect text. */
.button.menu-btn-link {
    position: relative;
    overflow: hidden;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.button.menu-btn-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: #4c607a;
    opacity: .7;
    pointer-events: none;
    z-index: 0;
    transition: opacity 200ms ease, background-color 200ms ease;
}
body:not(.menu-open) header.brro-sticky-effects:hover a.button.menu-btn-link::before,
body:not(.menu-open).single-brro_booking_aanbod header:not(.brro-sticky-effects) a.button.menu-btn-link::before,
body:not(.menu-open).post-type-archive-brro_booking_aanbod header:not(.brro-sticky-effects) a.button.menu-btn-link::before {
    opacity: 1;
    background-color: #09344e;
}
.button.menu-btn-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--rust);
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
    z-index: 0;
}
.button.menu-btn-link > * {
    position: relative;
    z-index: 1;
}
.button.menu-btn-link:hover::before {
    /* Keep multiply stable (prevents flash during transition). */
    mix-blend-mode: multiply;
}
.button.menu-btn-link:hover::after {
    opacity: 1;
}

/* Menu button label — swap "Menu" / "Sluit" based on .open. */
.button.menu-btn-link .menu-btn-label-open {
    display: none;
}
.button.menu-btn-link.open .menu-btn-label-closed {
    display: none;
}
.button.menu-btn-link.open .menu-btn-label-open {
    display: inline;
}

/* Hamburger icon (Figma: 16x12, 3 white bars 16x2 r1). */
.menu-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 16px;
    height: 12px;
    flex-shrink: 0;
    margin-left: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    transform: translateY(2px);
}
.menu-burger .bar {
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background-color: var(--white);
    transition: transform 300ms ease, opacity 300ms ease, background-color 300ms ease;
}
.menu-burger .bar.one { align-self: flex-start; }
.menu-burger .bar.three { align-self: flex-end; }

/* Hover spread (only when not .open). */
.button.menu-btn-link:not(.open):hover .menu-burger .bar.one {
    transform: translateY(-1px);
}
.button.menu-btn-link:not(.open):hover .menu-burger .bar.three {
    transform: translateY(1px);
}

/* Open state — bars form X (brro-core formula adapted: h=12px, bar_h=2px). */
.button.menu-btn-link.open .menu-burger .bar.two {
    transform: rotate(45deg);
}
.button.menu-btn-link.open .menu-burger .bar.one {
    transform: translateY(5px) rotate(-45deg);
}
.button.menu-btn-link.open .menu-burger .bar.three {
    opacity: 0;
}

/* ========================================
   SWIPER SLIDER GLOBAL STYLES
   ======================================== */

/* Base Swiper layout (project-specific styling comes later). */
.swiper {
    position: relative;
    overflow: hidden;
}
.swiper-wrapper {
    display: flex;
    box-sizing: content-box;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Optional UI elements (neutral defaults). */
.swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
@media (max-width: 767px) {
    .gallery-wrapper.multi-image:has( + .image-inset) .swiper-wrapper {
        align-items: flex-end;
    }
    .gallery-wrapper.multi-image:has( + .image-inset) .swiper-pagination {
        top: 0;
        bottom: auto;
    }
}
.swiper-pagination-bullet {
    width: clamp(11px, 0.97vw, 16px) /*14px @ 1440*/;
    height: clamp(11px, 0.97vw, 16px) /*14px @ 1440*/;
    border-radius: 50%;
    background-color: var(--white);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 200ms var(--cubix);
}
.single-brro_booking_aanbod .swiper-pagination-bullet {
    background-color: var(--petrol);
}
.single-brro_booking_aanbod .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--rust);
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: auto;
}
.swiper-button-prev {
    left: 0;
}
.swiper-button-next {
    right: 0;
}

/* ========================================
   SITE WIDE SECTIONS AND COMPONENTS
   ======================================== */
body:not(.home) .page-content-item {
    margin-bottom: clamp(54px, 4.58vw, 74px) /*66px @ 1440*/;
}
body:not(.home):not(.single-brro_booking_aanbod) .page-content-item + .page-content-item:last-child {
    margin-bottom: clamp(108px, 9.17vw, 147px) /*132px @ 1440*/;
}
/* Title section */
body:not(.page-template-bedankt) .page-title-section {
    margin-bottom: clamp(34px, 2.92vw, 47px) /*42px @ 1440*/;
}
.page-title-section,
.content-text-item {
    width: clamp(406px, 34.38vw, 550px) /*495px @ 1440*/;
    margin-left: clamp(363px, 30.76vw, 493px) /*443px @ 1440*/;
}
@media (max-width: 1179px) {
    .page-title-section,
    .content-text-item {
        margin-left: clamp(174px, calc(45.74vw - 177.3px), 362px) /*174px @ 768 : 362px @ 1179*/;
    }
}
.page-title-section h2 {
    margin-bottom: clamp(31px, 2.64vw, 43px) /*38px @ 1440*/;
}


/* Aanbod card */
.aanbod-card {
    width: clamp(320px, 24.24vw, 388px) /*349px @ 1440*/;
    padding: clamp(13px, 1.11vw, 18px) /*16px @ 1440*/;
    box-sizing: border-box;
    transition: box-shadow 200ms ease;
}
.aanbod-card {
    background-color: var(--white);
}
.aanbod-card.brro_booking_tax_soort-evenement {
    background-color: var(--lavender);
}
.aanbod-card:hover {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
}
@media (max-width: 1179px) {
    .aanbod-card {
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
    }
}
.aanbod-articles {
    margin-bottom: clamp(64px, 5.42vw, 87px) /*78px @ 1440*/;
    row-gap: clamp(35px, 2.92vw, 47px) /*42px @ 1440*/;
}
body:not(.home) .aanbod-articles {
    margin-top: clamp(40px, 3.33vw, 54px) /*48px @ 1440*/;
    column-gap: clamp(35px, 2.92vw, 47px) /*42px @ 1440*/;
}
@media (min-width: 768px) and (max-width: 1179px) {
    .aanbod-articles {
        column-gap: 32px;
    }
}
.aanbod-card-content {
    margin-bottom: clamp(25px, 2.08vw, 34px) /*30px @ 1440*/;
}

.aanbod-card-image {
    overflow: hidden;
    line-height: 0;
}
.aanbod-card-image img {
    width: 100%;
    height: clamp(196px, 16.6vw, 266px) /*239px @ 1440*/;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
    will-change: transform;
}
.aanbod-card:hover img {
    transform: scale(1.05);
    will-change: transform;
}
.aanbod-card h3 {
    margin: clamp(11px, 0.97vw, 16px) /*14px @ 1440*/ 0;
    padding-left: 21px;
}
.aanbod-card ul {
    padding-left: 40px;
    margin: 0;
}

/* Content cta item */
.content-cta-item {
    width: clamp(467px, 39.58vw, 634px) /*570px @ 1440*/;
    padding: clamp(48px, 4.03vw, 65px) /*58px @ 1440*/ 
             clamp(56px, 4.72vw, 76px) /*68px @ 1440*/
             clamp(43px, 3.61vw, 58px) /*52px @ 1440*/ 
             clamp(56px, 4.72vw, 76px) /*68px @ 1440*/;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.content-cta-item.cta-left {
    margin-left: clamp(282px, 23.89vw, 383px) /*344px @ 1440*/;
}
.content-cta-item.cta-right {
    margin-left: clamp(439px, 37.22vw, 596px) /*536px @ 1440*/;
}
@media (max-width: 1179px) {
    .content-cta-item.cta-left,
    .content-cta-item.cta-right {
        margin-left: clamp(151px, calc(48.42vw - 220.85px), 350px) /*151px @ 768 : 350px @ 1179*/;
    }
}
@media (max-width: 767px) {
    .content-cta-item {
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
        padding:    clamp(31px, calc(3.93vw + 17.85px), 48px) /*32px @ 360 : 48px @ 767*/
                    clamp(17px, calc(8.85vw - 11.84px), 56px) /*20px @ 360 : 56px @ 767*/
                    clamp(31px, calc(3.93vw + 17.85px), 48px) /*32px @ 360 : 48px @ 767*/
                    clamp(31px, calc(3.93vw + 17.85px), 48px) /*32px @ 360 : 48px @ 767*/;

    }
}
.content-cta-item h3 {
    margin-bottom: clamp(13px, 1.11vw, 18px) /*16px @ 1440*/;
    width:90%;
}
.content-cta-item .body {
    width: 80%;
}
.content-cta-item a.button {
    margin-top: clamp(34px, 2.92vw, 47px) /*42px @ 1440*/;
}
/* Content gallery item */
.content-gallery-item {
    position: relative;
    max-width: 100vw;
    margin-bottom: clamp(61px, 5.14vw, 83px) /*74px @ 1440*/;
}
@media (max-width: 1179px) {
    body:not(.home) .page-content-item.content-gallery-item:has(.image-inset) {
        margin-bottom: 104px;
    }
}
/* single */
.gallery-wrapper.single-image {
    width: clamp(700px, 59.31vw, 949px) /*854px @ 1440*/;
    height: clamp(352px, 29.79vw, 477px) /*429px @ 1440*/;
    line-height: 0;
    overflow: hidden;
    margin-left: clamp(282px, 23.89vw, 383px) /*344px @ 1440*/;
}
@media (max-width: 1179px) {
    .gallery-wrapper.single-image {
        margin-left: clamp(34px, calc(60.1vw - 427.55px), 281px) /*34px @ 768 : 281px @ 1179*/;
    }
}
.gallery-wrapper.single-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Gallery slider — fixed height; images fill via object-fit. */
.gallery-wrapper.multi-image {
    margin-left: clamp(101px, 8.54vw, 137px) /*123px @ 1440*/;
}
.brro-swiper--gallery .swiper-wrapper {
    height: clamp(397px, 33.61vw, 538px) /*484px @ 1440*/;
}
@media (max-width: 767px) {
    .brro-swiper--gallery .swiper-wrapper {
        height: 380px;
    }
}
.brro-swiper--gallery .swiper-slide {
    width: auto!important;
    overflow: hidden;
    height: clamp(352px, 29.79vw, 477px) /*429px @ 1440*/;
}
.brro-swiper--gallery .swiper-slide img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    display: block;
}


/*inset*/
.image-inset {
    width: clamp(243px, 20.56vw, 329px) /*296px @ 1440*/;
    text-align: center;
    padding: clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
    box-sizing: border-box;
    position: absolute;
    top: clamp(352px, 29.79vw, 477px) /*429px @ 1440*/;
    right: clamp(125px, 10.56vw, 169px) /*152px @ 1440*/;
    transform: translateY(-50%);
    z-index: 1;
}
@media (max-width: 1179px) {
    .image-inset {
        right: clamp(8px, calc(34.79vw - 259.21px), 151px) /*8px @ 768 : 151px @ 1179*/;
    }
}
@media (max-width: 767px) {
    .image-inset {
        right: -24px;
        padding: 22px 26px 29px;
    }
}

/* Content icons item */
.content-icons-item {
    margin-left: clamp(321px, 27.22vw, 436px) /*392px @ 1440*/;
    gap: clamp(18px, 1.46vw, 24px) /*21px @ 1440*/ clamp(46px, 3.89vw, 63px) /*56px @ 1440*/;
    max-width: clamp(615px, 52.08vw, 834px) /*750px @ 1440*/;
}
@media (max-width: 1179px) {
    .content-icons-item {
        margin-left: clamp(77px, calc(59.12vw - 377.07px), 320px) /*77px @ 768 : 320px @ 1179*/;
    }
}
.icon-row {
    width: clamp(279px, 23.61vw, 378px) /*340px @ 1440*/;
    box-sizing: border-box;
    gap: clamp(7px, 0.63vw, 10px) /*9px @ 1440*/;
}
.icon-row-icon {
    width: clamp(57px, 4.86vw, 78px) /*70px @ 1440*/;
    display: block;
    flex-shrink: 0;
}
.icon-row-icon img {
    width: 100%;
    height: clamp(45px, 3.82vw, 62px) /*55px @ 1440*/;
    object-fit: contain;
    object-position: center;
}
.icon-row span {
    flex: 1 1 0;
    min-width: 0;   /* lets flex item shrink below content width if needed */
    display: block; /* not inline-block */
    margin-top: clamp(13px, 1.11vw, 18px) /*16px @ 1440*/;
    padding-left: clamp(13px, 1.11vw, 18px) /*16px @ 1440*/;
    position: relative;
}
.icon-row span:before {
    content: "";
    position: absolute;
    left: 0;
    top: clamp(6px, 0.49vw, 8px) /*7px @ 1440*/;
    width: clamp(4px, 0.35vw, 6px) /*5px @ 1440*/;
    height: clamp(4px, 0.35vw, 6px) /*5px @ 1440*/;
    border-radius: 50%;
}
.page-template-default .icon-row span:before {
    background-color: var(--white)
}
.single-brro_booking_aanbod .icon-row span:before {
    background-color: var(--ink)
}
/* Content text item (width and margin set with title section) */
.content-text-item h3 {
    margin-bottom: clamp(5px, 0.42vw, 7px) /*6px @ 1440*/;
}
.content-text-item p {
    margin-bottom: clamp(25px, 2.08vw, 34px) /*30px @ 1440*/;
}

/* BG VIDEO */
.outer-flex-wrapper:has(.hero-bg-video) {
    position: relative;
    overflow: hidden;
}
.hero-bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-bg-overlay {
    position: absolute;
    height: 100vh;
    width: 100vw;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
.hero-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    position: relative;
    z-index: 0;
}




/* ========================================
   FRONT PAGE ONLY
   ======================================== */

/* HERO */
#hero {
    min-height: clamp(656px, 55.56vw, 889px) /*800px @ 1440*/;
    overflow: visible;
}
#hero .content-wrapper {
    padding-top: clamp(256px, 21.67vw, 347px) /*312px @ 1440*/;
    margin-left: clamp(123px, 10.42vw, 167px) /*150px @ 1440*/;
    width: clamp(452px, 38.33vw, 614px) /*552px @ 1440*/;
    gap: clamp(49px, 4.17vw, 67px) /*60px @ 1440*/;
}
@media (max-width: 767px) {
    #hero {
        min-height: 600px;
    }
    #hero .content-wrapper {
        padding-top: clamp(115px, calc(14.74vw + 66.93px), 180px) /*120px @ 360 : 180px @ 767*/;
        margin-left: 0;
        margin-bottom: 30vh;
        width: var(--def-mob);
    }
}
@media (min-width: 768px) {
    #hero .content-wrapper {
        padding-top: clamp(180px, calc(18.49vw + 37.99px), 256px) /*180px @ 768 : 256px @ 1179*/;
    }
}
#hero .hero-highlights-text {
    width: 61.6%;
}
#hero .hero-highlights-wrapper a {
    margin: 0 auto;
}
@media (max-width: 767px) {
    #hero .hero-highlights-wrapper a {
        margin-right: 0;
    }
}
#hero .swiper-pagination {
    justify-content: start;
}
#hero .hero-highlights-text {
    height: clamp(85px, 7.22vw, 116px) /*104px @ 1440*/;
}
@media (max-width: 767px) {
    #hero .hero-highlights-text  {
        height: auto;
        margin-bottom: 24px;
    }
}
#rotating_badge {
    width: clamp(258px, 21.88vw, 350px) /*315px @ 1440*/;
    height: clamp(258px, 21.88vw, 350px) /*315px @ 1440*/;
    border-radius: 50%;
    position: absolute;
    right: clamp(115px, 9.72vw, 156px) /*140px @ 1440*/;
    bottom: clamp(-100px, -6.25vw, -73px) /*-90px @ 1440*/;
    transition: background-color 200ms ease;
    cursor: default;
    box-shadow: 40px 40px 80px 0 rgba(0, 0, 0, 0.40);
}
@media (max-width: 767px) {
    #rotating_badge {
        right: clamp(-42px, calc(6.88vw - 64.77px), -12px) /*-40px @ 360 : -12px @ 767*/;
    }
}
@media (min-width: 768px) {
    #rotating_badge {
        right: clamp(-12px, calc(30.9vw - 249.31px), 115px) /*-12px @ 768 : 115px @ 1179*/;
    }
}

/* Optional clickable wrapper — display: contents keeps the badge's positioning intact
   (the badge is position: absolute, so a normal block <a> would collapse to 0×0). */
.rotating-badge-link {
    display: contents;
}

/* Curved badge text — fill: currentColor lets utility color classes (e.g. .navy) drive the text color. */
#rotating_badge .badge-text-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: brro-badge-spin 25s linear infinite;
}

@keyframes brro-badge-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Respect users who've opted out of ambient motion. */
@media (prefers-reduced-motion: reduce) {
    #rotating_badge .badge-text-svg {
        animation: none;
    }
}
#rotating_badge .badge-text-svg text {
    /* SVG text sizes in viewBox user units, not CSS px. We pick a fixed unit value that visually matches .kopjes
       across the badge's clamp range (~20px on a 224px badge, ~28px on a 315px badge). */
    font-family: var(--platipy);
    font-weight: 400;
    font-size: 11px;
    fill: currentColor;
}
#rotating_badge img {
    width: clamp(107px, 9.03vw, 145px) /*130px @ 1440*/;
    height: clamp(107px, 9.03vw, 145px) /*130px @ 1440*/;
    object-fit: contain;
    transition: transform 200ms ease;
}
.rotating-badge-link #rotating_badge:hover img {
    transform: scale(1.1);
}
.rotating-badge-link #rotating_badge:hover {
    background-color: var(--yellow);
    cursor: pointer;
}

/* INTRO */
#intro .content-wrapper {
    padding-top: clamp(75px, 6.32vw, 102px) /*91px @ 1440*/;
    padding-bottom: clamp(86px, 7.29vw, 117px) /*105px @ 1440*/;
}
#intro .content-wrapper p.intro {
    width:clamp(488px, 41.32vw, 662px) /*595px @ 1440*/;
}
@media (max-width: 767px) {
    #intro .content-wrapper {
        padding-top: 120px;
    }
    #intro .content-wrapper p.intro {
        width: var(--def-mob);
    }
}

/* AANBOD */
#aanbod {
    margin-bottom: clamp(125px, 10.63vw, 170px) /*153px @ 1440*/;
}


/* USP */
#usp {
    margin-bottom: 53px;
}
#usp h2 {
    margin-bottom: clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
}
#usp .usp-items {
    width: calc(var(--content-max-desk) - clamp(154px, 13.06vw, 209px)); /*188px @ 1440*/;
    box-sizing: border-box;
    padding: clamp(43px, 3.61vw, 58px) /*52px @ 1440*/
             clamp(70px, 5.9vw, 95px) /*85px @ 1440*/;
    row-gap: 64px;
    column-gap: clamp(40px, 3.33vw, 54px) /*48px @ 1440*/;
}
#usp .usp-item {
    width: clamp(180px, 15.28vw, 245px) /*220px @ 1440*/;
}
@media (max-width: 767px) {
    #usp h2 {
        text-align: center;
        padding: 0 24px;
        width: var(--def-mob);
    }
    #usp .usp-items {
        width: var(--def-mob);
        padding-left: 32px;
        padding-right: 32px;
    }
    #usp .usp-item {
        width: 220px;
    }
}

#usp img {
    height: clamp(120px, 10.21vw, 164px) /*147px @ 1440*/;
    object-fit: contain;
    object-position: center;
    margin-bottom: clamp(23px, 1.94vw, 32px) /*28px @ 1440*/;
    text-align: center;
    filter: invert(1);
}
#usp h3,
#usp p {
    text-align: center;
}
#usp h3 {
    margin-bottom: clamp(16px, 1.39vw, 23px) /*20px @ 1440*/;
}
#usp .item-1 img {
    width: clamp(120px, 10.21vw, 164px) /*147px @ 1440*/;
}

#usp .item-2 img {
    width: clamp(111px, 9.44vw, 152px) /*136px @ 1440*/;
}

#usp .item-3 img {
    width: clamp(140px, 11.88vw, 190px) /*171px @ 1440*/;
}

#usp .item-4 img {
    width: clamp(114px, 9.65vw, 155px) /*139px @ 1440*/;
}



/* PAGES_1 */
#pages_1 { 
    margin-bottom: clamp(84px, 10.94vw, 112px) /*84px @ 768*/;
}
#pages_1 .inner-flex-wrapper {
    width: calc(var(--content-max-desk) - clamp(154px, 13.06vw, 209px)); /*188px @ 1440*/
    background-size: cover;
    background-position: center;
}
#pages_1 .content-wrapper {
    padding:    clamp(143px, 12.15vw, 195px) /*175px @ 1440*/
                clamp(25px, 2.08vw, 34px) /*30px @ 1440*/
                clamp(25px, 2.08vw, 34px) /*30px @ 1440*/
                clamp(25px, 2.08vw, 34px) /*30px @ 1440*/;
}
#pages_1 .page-highlight-item {
    width: clamp(376px, 31.87vw, 510px) /*459px @ 1440*/;
    min-height: clamp(221px, 18.75vw, 300px) /*270px @ 1440*/
}
#pages_1 .pages-1-items-buttons {
    gap: clamp(20px, 1.74vw, 28px) /*25px @ 1440*/;
}


.page-highlight-item {
    padding:    clamp(25px, 2.08vw, 34px) /*30px @ 1440*/
                clamp(25px, 2.08vw, 34px) /*30px @ 1440*/
                clamp(25px, 2.08vw, 34px) /*30px @ 1440*/
                clamp(32px, 2.71vw, 44px) /*39px @ 1440*/;
    box-sizing: border-box;
}
.page-highlight-item h2 {
    margin-bottom: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
}
.page-highlight-item p {
    margin-bottom: clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
}
@media (max-width: 767px) {
    #pages_1 .inner-flex-wrapper {
        width: var(--def-mob);
    }
    #pages_1 .content-wrapper {
        padding-left: clamp(11px, calc(2.95vw + 1.39px), 24px) /*12px @ 360 : 24px @ 767*/;
        padding-right: clamp(11px, calc(2.95vw + 1.39px), 24px) /*12px @ 360 : 24px @ 767*/;
    }
}

/* PAGES_2 */
#pages_2.outer-flex-wrapper {
    background-size: cover;
    background-position: top center;
    position: relative;
    z-index: 1;
}
#pages_2 .content-wrapper {
    margin-bottom: clamp(-163px, -10.21vw, -120px) /*-147px @ 1440*/;
    padding-top: clamp(269px, 22.78vw, 365px) /*328px @ 1440*/;
    gap: clamp(33px, 2.78vw, 45px) /*40px @ 1440*/;
}
#pages_2 .page-highlight-item {
    width: clamp(287px, 24.31vw, 389px) /*350px @ 1440*/;
}

/* CONTACT */
#contact .content-wrapper {
    width: clamp(394px, 33.4vw, 535px) /*481px @ 1440*/;
    padding-top: clamp(232px, 19.65vw, 315px) /*283px @ 1440*/;
    padding-bottom: clamp(76px, 6.46vw, 104px) /*93px @ 1440*/;
    margin-left: 18px;
    margin-right: 18px;
    gap: clamp(36px, 3.06vw, 49px) /*44px @ 1440*/;
}

#contact a.button {
    margin-right: clamp(12px, 1.04vw, 17px) /*15px @ 1440*/;
}


/* ========================================
   DEFAULT PAGE TEMPLATE
   ======================================== */

/* TITLE SECTION */
.single-brro_booking_aanbod .page-title-section #page-title {
    margin-bottom: clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
}
.page-template-default:not(.home) .hero-bg-video {
    height: clamp(568px, 48.13vw, 770px) /*693px @ 1440*/;
}
.page-template-default:not(.home) .hero-bg-overlay {
    background: rgba(11, 66, 99, 0.50);
}
.page-template-default:not(.home) .brro-flex-page .content-wrapper,
.page-template-bedankt .brro-flex-page .content-wrapper,
.single-brro_booking_aanbod .brro-flex-page .content-wrapper {
    margin-top: clamp(139px, 11.81vw, 189px) /*170px @ 1440*/;
    position: relative;
}

.page-template-bedankt:not(.home) .hero-bg-video {
    height: clamp(568px, 48.13vw, 770px) /*693px @ 1440*/;
}
.page-template-bedankt:not(.home) .hero-bg-overlay {
    background: rgba(11, 66, 99, 0.50);
}

/* Bedankt page — booking shortcodes below title section */
.bedankt-content {
    width: clamp(406px, 34.38vw, 550px) /*495px @ 1440*/;
    margin-left: clamp(363px, 30.76vw, 493px) /*443px @ 1440*/;
    margin-bottom: 160px;
}
.bedankt-content a.button {
    margin-top: 32px;
}
.bedankt-content .brro-booking-payment-status__heading {
    margin-bottom: clamp(8px, 0.69vw, 11px) /*10px @ 1440*/;
}
.bedankt-content .brro-booking-payment-status a {
    color: inherit;
}
.bedankt-content > p {
    margin-bottom: clamp(16px, 1.39vw, 22px) /*20px @ 1440*/;
}



/* ========================================
   AANBOD ITEM PAGE TEMPLATE
   ======================================== */
/* Back to archive — collapsed arrow tab; expands on desktop hover only (Figma). */
.aanbod-back-btn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    box-sizing: border-box;
    width: auto;
    height: clamp(37px, 3.13vw, 50px) /*45px @ 1440*/;
    padding: 0 clamp(10px, 0.83vw, 14px) /*12px @ 1440*/ 0 clamp(10px, 0.83vw, 14px) /*12px @ 1440*/!important;
    overflow: hidden;
    border-radius: 0 6px 6px 0!important;
    background-color: transparent;
    white-space: nowrap;
    transition: width 400ms ease;
}
@media (max-width: 767px) {
    .aanbod-back-btn {
        top: -50px;
    }
}
/* Multiply on background only — keep arrow/text crisp white. */
.aanbod-back-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--chrome);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
.aanbod-back-btn > * {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.aanbod-back-btn img {
    display: block;
    width: clamp(18px, 1.46vw, 24px) /*21px @ 1440*/;
    height: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
/* Desktop hover expands label; touch keeps collapsed and navigates on tap. */
.aanbod-back-btn span {
    width: 0px;
    opacity: 0;
    transition: width 400ms ease, opacity 400ms ease, margin-left 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .aanbod-back-btn:hover span {
        width: clamp(87px, 7.29vw, 117px) /*105px @ 1440*/;
        margin-left: clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
        opacity: 1;
    }
}
.aanbod-page-content {
    position: relative;
}
.summary-list {
    padding: clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .summary-list {
        width: var(--small-mob);
        margin-bottom: 32px;
    }
}
@media (min-width: 768px) {
    .summary-list {
        position: absolute;
        width: clamp(243px, 20.56vw, 329px) /*296px @ 1440*/;
        bottom: calc(100% - clamp(38px, 3.19vw, 52px));
        right: clamp(-12px, calc(33.33vw - 268px), 125px) /*-12px @ 768 : 125px @ 1179*/;
        z-index: 1;
    }
}
@media (min-width: 768px) and (max-width: 1179px) {
    .single-brro_booking_aanbod .page-title-section {
        margin-left: clamp(90px, calc(66.18vw - 418.26px), 362px) /*90px @ 768 : 362px @ 1179*/;
    }
}
@media (min-width: 1180px) {
    .summary-list {
        right: clamp(125px, 10.56vw, 169px) /*152px @ 1440*/;
    }
}
.summary-list h3 {
    margin-bottom: clamp(10px, 0.83vw, 14px) /*12px @ 1440*/;
}
.summary-list ul {
    padding: 0;
    margin: 0;
    margin-right: clamp(14px, 1.18vw, 19px) /*17px @ 1440*/;
    transform: translateX(clamp(14px, 1.18vw, 19px) /*17px @ 1440*/);
}

/* BRRO BOOKING SECTION */

/* main reserveren button on load screen */
#brro-booking-reserveren .brro-button.brro-booking-hide-on-reserveren.brro-booking-hide-on-bevestigen,
#brro-booking-reserveren .brro-booking-hide-on-reserveren.brro-booking-hide-on-bevestigen .brro-button {
    color: var(--white)!important;
    background-color: var(--rust)!important;
    border-color: var(--rust)!important;
}
#brro-booking-reserveren .brro-button.brro-booking-hide-on-reserveren.brro-booking-hide-on-bevestigen:hover,
#brro-booking-reserveren .brro-booking-hide-on-reserveren.brro-booking-hide-on-bevestigen .brro-button:hover {
    color: var(--ink)!important;
    background-color: var(--chrome)!important;
    border-color: var(--chrome)!important;
}

/* reserveren and bevestigen section */
#opties.brro-flex-booking-section {
    margin-left: clamp(363px, 30.76vw, 493px) /*443px @ 1440*/;
    margin-right: 32px;
    margin-bottom: clamp(164px, 13.89vw, 223px) /*200px @ 1440*/;
    max-width: clamp(546px, 46.25vw, 740px) /*666px @ 1440*/;
}
#brro-booking-reserveren {
    scroll-margin-top: 60px;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    align-items: center;
}
/* booking help text */
#opties.brro-flex-booking-section p.body.ink.brro-booking-hide-on-loaded {
    width: clamp(394px, 33.33vw, 534px) /*480px @ 1440*/;
    margin-bottom: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
}
@media (max-width: 767px) {
    #opties.brro-flex-booking-section p.body.ink.brro-booking-hide-on-loaded {
        width: var(--def-mob);
    }
}

/*breadcrumbs*/
.brro-aanbod-breadcrumbs_item a {
    color: var(--ink);
}
.brro-aanbod-breadcrumbs_item-active a {
    color: var(--petrol);
    pointer-events: none;
}

/* helper texts */
.option-subtitle {
    margin-top: 8px;
}

/* wijzigen toggles */
#brro_booking_addtocart_options a.brro-toggle-link,
a.brro-toggle-link {
    display: flex;
    align-items: center;
}
.brro-toggle-link img {
    background-color: white;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
}
.brro-toggle-link:hover img {
    transform: scale(1.05)!important;
}

/* months and dates */
.selection-step-wrapper:not(.top-level-step) {
    padding-bottom: 20px;
}
#brro_booking_addtocart_options label.selectable-option:not(.timeslot) {
    padding-bottom:0;
    border-radius: 34px;
    border-width: 4px;
    line-height: 100%!important;
}
@media (min-width: 768px) {
    #brro_booking_addtocart_options .selectable-options-wrapper.month-grid label.selectable-option {
        width: clamp(37px, 3.13vw, 50px) /*45px @ 1440*/;
        height: clamp(37px, 3.13vw, 50px) /*45px @ 1440*/;
        margin: auto;
    }
}

/* legend */
@media (min-width: 860px) {
    .availability-legend {
        margin-left: 50px;
        margin-top: -20px;

    }
}
.availability-legend .legend-icon {
    border-radius: 50%;
    width: 27px;
    height: 27px;
}
.availability-legend #available .legend-icon {
    border-width: 4px;
}
/* time selection */
.brro-dynamic-duration-controls .brro-dynamic-duration-label {
    font-weight: 400;
}
/* prices */
.brro-booking-price-info_title {
    display: none;
}
.brro-booking-price::first-letter {
    text-transform: uppercase!important;
}

/* ========================================
   AANBOD CHECKOUT / FORM
   ======================================== */
.brro-checkout-radio-label span.brro-checkout-radio-description {
    padding-left: 19px;
}
#brro-checkout-form h3 {
    padding-left: 3px;
}
#brro-checkout-form .brro-checkout-form-after-extra h3 {
    margin-bottom: 24px;
}

select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
    padding: 0 20px;
    border-radius: 28px;
    border-color: transparent;
}
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
    height: 56px;
}
@media (max-width: 767px) {
    select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    }
}
textarea {
    height: 170px;
    padding-top: 16px;
    padding-bottom: 16px;
}
.brro-booking-qty-controls .brro-booking-quantity-input {
    width: 32px;
    height: auto;
    background-color: transparent;
}
.brro-booking-qty-btn {
    width: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    height: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
}

select {
    /* Remove the default browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Add icon */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 20px top 50%;
    background-size: 12px auto;
}

form label {
    padding-left:20px;
    margin-bottom: 8px;
}
@media (max-width: 767px) {
    form label:not(.brro-checkout-radio-label) {
        padding-left: 4px;
    }
}
form .brro-extra-fieldgroup-edit .brro-extra-field--number label {
    padding-left: 0px;
    margin: 2px 8px 0 0;
}

input[type='checkbox'],
input[type='radio'] {
    width: 5px;
}

input[type='checkbox']:before,
input[type='radio']:before {
    width: 20px;
    height: 20px;
    border: 4px solid white;
    box-sizing: border-box;
}

.brro-checkout-section-privacy a {
    color: var(--petrol);
    text-decoration: underline;
}
.brro-checkout-section-privacy a:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* ========================================
   AANBOD ARCHIVE PAGE TEMPLATE
   ======================================== */

#brro_aanbod_filters .content-wrapper {
    padding:    clamp(140px, 11.81vw, 189px) /*170px @ 1440*/
                0px
                clamp(58px, 4.86vw, 78px) /*70px @ 1440*/
                clamp(37px, 3.06vw, 49px) /*44px @ 1440*/;
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/ clamp(99px, 8.33vw, 134px) /*120px @ 1440*/;
}
#brro_aanbod_filters input[type='checkbox'] + label {
    padding-left: clamp(16px, 1.25vw, 20px) /*18px @ 1440*/;
    padding-bottom: 2px;
}
@media (max-width: 767px) {
    #brro_aanbod_filters .content-wrapper {
        padding: 110px 0px 32px 20px;
        gap: 16px 32px;
    }
    #brro_aanbod_filters fieldset {
        margin-top: 8px;
    }
    #brro_aanbod_filters h2:after {
        content: "+";
        background-color: var(--yellow);
        color: var(--navy);
        width: 18px;
        height: 18px;
        line-height: 14px;
        border-radius: 6px;
        text-align: center;
        display: inline-block;
        margin-left: 8px;
        transition: all 0.3s ease-in-out;
    }
    #brro_aanbod_filters.opened h2:after {
        content: "-";
        line-height: 12px;
        background-color: var(--mist);
    }
    #brro_aanbod_filters:not(.opened) fieldset {
        display: none;
    }
}



#booking_aanbod_archive:before {
    content: '';
    display: block;
    width: 100%;
    height: 104px;
    background-color: var(--petrol);
    position: absolute;
    top: -1px;
    left: 0;
    z-index: -1;
}
#booking_aanbod_archive .content-wrapper {
    gap: clamp(30px, 2.71vw, 44px) /*39px @ 1440*/;
    padding-bottom: 150px;
}


/*Mobile width and margin defaults */
@media (max-width: 767px) {
    .page-title-section,
    .page-content-item,
    .bedankt-content {
        width: var(--def-mob)!important;
        max-width: var(--def-mob)!important;
        margin-left: 0!important;
        margin-right: 0!important;
    }
    .page-content-item.content-gallery-item,
    .gallery-wrapper.single-image,
    .gallery-wrapper.multi-image,
    #opties.brro-flex-booking-section {
        width: var(--wide-mob)!important;
        max-width: var(--wide-mob)!important;
        margin-left: 0!important;
        margin-right: 0!important;
    }
}