/* ========================================
   Brro Booking frontend defaults
   ======================================== */

/* Design tokens; override in project CSS via --brro-booking-* */
:root {
    --brro-booking-color-primary: #1a7f37;
    --brro-booking-color-primary-hover: #333333;
    --brro-booking-color-danger: #c62828;
    --brro-booking-color-muted: #e0e0e0;
    --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: #111111;
    --brro-booking-qty-fg: #ffffff;
    --brro-booking-qty-hover: #eeeeee;
    --brro-booking-color-field-error: #b32d2e;
}
/* Booking flow visibility states */
body.brro-booking-aanbod-loaded .brro-booking-hide-on-loaded,
body.brro-booking-aanbod-reserveren .brro-booking-hide-on-reserveren,
body.brro-booking-aanbod-bevestigen .brro-booking-hide-on-bevestigen {
    display: none!important;
}
/* Single aanbod: breadcrumbs */
.brro-aanbod-breadcrumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(8px, 0.76vw, 12px) /*11px @ 1440*/;
}
.brro-aanbod-breadcrumbs_item {
    line-height: 100%!important;
    transform: translateY(clamp(-2px, -0.1vw, -1px));
}
.brro-aanbod-breadcrumbs_sep {
    line-height: 0!important;
}
@media (max-width:400px) {
    .brro-aanbod-breadcrumbs_sep {
        display: none;
    }
}
.brro-aanbod-breadcrumbs_sep img {
    width: clamp(8px, 0.76vw, 12px) /*11px @ 1440*/;
    height: clamp(14px, 1.39vw, 22px) /*20px @ 1440*/;
    object-fit: contain;
}

#breadcrumbs .brro-aanbod-breadcrumbs_item-active a {
    color: var(--brro-booking-color-primary);
    pointer-events: none;
}

#breadcrumbs span a:hover {
    text-decoration: underline;
}
#breadcrumbs .brro-aanbod-breadcrumbs_item-active a {
    color:var(--brro-booking-color-primary);
}

/* Messages */
.brro-message:before {
    display: block;
    position: absolute;
    z-index: -1;
    width: 20px;
    height: 20px;
    color: var(--brro-booking-color-on-primary);
    border-radius: 50%;
    text-align: center;
    line-height: 13px;
    font-weight: bold;
    margin-right: 8px;
    font-size: 26px;
    transform: translate(-120%, 0px);
}
.brro-message.brro-message-error:before {
    content: '×';
    background-color: var(--brro-booking-color-msg-error);
}
.brro-message.brro-message-success:before {
    content: '✓';
    background-color: var(--brro-booking-color-msg-success);
}

/* Single aanbod: downloads button and tax items */
:where(.brro-booking-downloads-button) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--brro-booking-color-text);
    text-decoration: none;
}
:where(.brro-booking-downloads-button .button-text) {
    line-height: 1.2;
}
:where(#booking_download_icon_container),
:where(.brro-tax-items-wrap) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px 9px 16px;
    border-radius: 20px;
    background-color: var(--brro-booking-color-muted);
}
:where(#booking_download_icon_container svg) {
    width: 23px;
    height: 21px;
}
.brro-booking-downloads-button #download-arrow {
    transition: transform 200ms ease;
    will-change: transform;
    transform: translateY(0%);
}
.brro-booking-downloads-button:hover #download-arrow {
    transform: translateY(20%);
}
.brro-booking-downloads-button:hover .button-text {
    text-decoration: underline;
}
.brro-tax-items-wrap {
    cursor: default;
}


/* ========================================
   Booking option selectors
   ======================================== */

#brro_booking_addtocart_options a {
    display: inline-block;
}

/* months and days in the first step */
#brro_booking_addtocart_options .first-step .selectable-options-wrapper,
body:not(.timeblocks) #brro_booking_addtocart_options .top-level-step .top-level-option {
    max-width: clamp(463px, 39.24vw, 628px) /*565px @ 1440*/;
}
#brro_booking_addtocart_options .first-step label.selectable-option {
    width: clamp(69px, 5.83vw, 93px) /*84px @ 1440*/;
    height: clamp(34px, 2.85vw, 46px) /*41px @ 1440*/;
} 
.selection-step-wrapper > h3,
.selection-step-wrapper > p:not(.brro-booking-quantity),
.selection-step-wrapper > a {
    width: 100%;
}

.selection-step-title {
    margin: 0!important;
}
.selection-step-title:has(+ .month-grid) {
    margin-bottom: 12px!important;
}
@media (min-width:768px) {
    .selection-step-title + .months-selection {
        margin-top: 12px;
    }
}

/*legend */
.availability-legend {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(7px, 0.63vw, 10px);
}



@media (max-width:767px) {
    .availability-legend {
        width: 100%;
        flex-direction: row;
        gap:clamp(12px, calc(3.58vw + 0.55px), 28px) /*12px @ 320 : 28px @ 767*/;
        justify-content: flex-start;
        margin: 12px 0;
    }
    .months-selection{
        order: 2;
    }
}
@media (min-width:860px) {
    .availability-legend {
        margin-left: clamp(59px, 5vw, 80px) /*72px @ 1440*/;
    }
}

.availability-legend div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.availability-legend .legend-icon {
    height: clamp(25px, 2.08vw, 33px) /*30px @ 1440*/;
    width: clamp(25px, 2.08vw, 33px) /*30px @ 1440*/;
    border-radius: clamp(8px, 0.69vw, 11px) /*10px @ 1440*/;
    margin-right: clamp(9px, 0.76vw, 12px) /*11px @ 1440*/;
    box-sizing: border-box;
    display: inline-block;
}
.availability-legend #available .legend-icon {
    border:2px solid var(--brro-booking-color-primary);
}
.availability-legend #booked .legend-icon {
    background-color:var(--brro-booking-color-danger);
}
.availability-legend #not-available .legend-icon {
    background-color:var(--brro-booking-color-muted);
}
.legend-item {
    position: relative;
}
@media (min-width:768px) {
    .legend-text {
        position: absolute;
        left: clamp(31px, 2.64vw, 42px) /*38px @ 1440*/;
        width: clamp(123px, 10.42vw, 167px) /*150px @ 1440*/;
    }
}

/* Top level step content */
.top-level-step-option-content {
    max-width: 70%;
}

/* brro-booking-value-display */
body:not(.weekblocks) #brro_booking_addtocart_options .brro-booking-value-display {
    display: none;
}

/* weeks */
#brro_booking_addtocart_options label.selectable-option.week {
    width: clamp(125px, 10.56vw, 169px) /*152px @ 1440*/;
    height: clamp(70px, 5.97vw, 96px) /*86px @ 1440*/;
} 
#brro_booking_addtocart_options label.selectable-option.week .brro-booking-value-display {
    margin-bottom:0px!important;
} 
#brro_booking_addtocart_options label.selectable-option.week .brro-booking-value-display b {
    font-weight: 700!important;
    display:block;
    margin-bottom:6px;
} 

/* month-table with days */
@media (min-width:768px) {
    #brro_booking_addtocart_options .selectable-options-wrapper.month-grid {
        width:clamp(393px, 33.33vw, 533px) /*480px @ 1440*/;
    }
    #brro_booking_addtocart_options .selectable-options-wrapper.month-grid label.selectable-option {
        width:clamp(49px, 4.17vw, 67px) /*60px @ 1440*/;
        height: clamp(49px, 4.17vw, 67px) /*60px @ 1440*/;
        margin:auto;
    }
}
@media (max-width:767px) {
    #brro_booking_addtocart_options .selectable-options-wrapper.month-grid {
        /*width:clamp(340px, calc(13.02vw + 293.12px), 393px) /*340px @ 360 : 393px @ 767*/
        row-gap:0px!important;
    }
    #brro_booking_addtocart_options .selectable-options-wrapper.month-grid label.selectable-option {
        width:clamp(40px, calc(0.98vw + 36.46px), 44px) /*40px @ 360 : 44px @ 767*/;
        height: clamp(40px, calc(0.98vw + 36.46px), 44px) /*40px @ 360 : 44px @ 767*/;
        margin:clamp(2px, 0.56vw, 4px) /*2px @ 360*/;
    }
}
#brro_booking_addtocart_options .selectable-options-wrapper.month-grid .day-name {
    text-align: center;
}

/**************************** Selecteble options */
#brro_booking_addtocart_options .first-step .selectable-options-wrapper,
#brro_booking_addtocart_options .selection-step-wrapper:not(.top-level-step) {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; 
    gap: clamp(7px, 0.63vw, 10px);
    align-items: flex-start;
}
.selection-step-wrapper:not(.top-level-step),
.top-level-step:not(.open):last-of-type {
    padding-bottom: clamp(33px, 2.78vw, 44px) /*40px @ 1440*/;
}

.top-level-step.open .top-level-option {
    margin-bottom: 32px;
}


/* hide checkbox */
#brro_booking_addtocart_options label input[type='checkbox'],
#brro_booking_addtocart_options label input[type='checkbox']:before{
    clip: rect(0, 0, 0, 0)!important;
    height: 0px!important;
    width: 0px!important;
    opacity: 0!important;
    z-index: -1;
    overflow:hidden;
}



/* default label styling */
#brro_booking_addtocart_options label.selectable-option:not(.timeslot) {
    cursor: pointer!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: clamp(4px, 0.35vw, 6px) /*5px @ 1440*/;
    text-align: center;
    line-height: 1;
    font-weight: normal;
    color:var(--brro-booking-color-text);
    background-color:var(--brro-booking-color-surface);
    border-radius:clamp(17px, 1.46vw, 23px) /*21px @ 1440*/;
    
    border:2px solid var(--brro-booking-color-primary);
    transition:all 200ms ease;
}
#brro_booking_addtocart_options label.timeslot {
    cursor: pointer!important;
    display: flex;
    align-items: center;
    margin-bottom:clamp(10px, 0.83vw, 13px) /*12px @ 1440*/;
    position: relative;
}
#brro_booking_addtocart_options label.timeslot input:before {
    border:2px solid var(--brro-booking-color-primary);
    background-color: transparent;
}

/*hover*/
#brro_booking_addtocart_options label.selectable-option:not(.timeslot):hover,
#brro_booking_addtocart_options label.selectable-option:not(.timeslot):focus {
    background-color:var(--brro-booking-color-primary-hover)!important;
    border-color:var(--brro-booking-color-primary-hover)!important;
    color:var(--brro-booking-color-on-primary);
}
/*selected*/
#brro_booking_addtocart_options label.selectable-option:has(input[type='checkbox']:checked),
#brro_booking_addtocart_options label.selectable-option.option-clicked:not(.timeslot),
#brro_booking_addtocart_options label input[type='radio']:checked:before {
    background-color:var(--brro-booking-color-primary)!important;
    color:var(--brro-booking-color-on-primary);
    opacity: 1;
}

/*not available by exlcusion settings*/
#brro_booking_addtocart_options label.selectable-option.unavailable:not(.timeslot),
#brro_booking_addtocart_options label.unavailable input[type='radio']:before {
    background-color:var(--brro-booking-color-muted);
    border-color:var(--brro-booking-color-muted);
    color:var(--brro-booking-color-on-primary);
}
/*not available by being booked or quantity unavailable*/
#brro_booking_addtocart_options label.selectable-option.booked:not(.timeslot),
#brro_booking_addtocart_options label.selectable-option.qty-unavailable:not(.timeslot),
#brro_booking_addtocart_options label.booked input[type='radio']:before,
#brro_booking_addtocart_options label.qty-unavailable input[type='radio']:before {
    background-color:var(--brro-booking-color-danger);
    border-color:var(--brro-booking-color-danger);
    color:var(--brro-booking-color-on-primary);
}
/*not available interaction*/
#brro_booking_addtocart_options label.unavailable,
#brro_booking_addtocart_options label.booked,
#brro_booking_addtocart_options label.qty-unavailable {
    cursor: default!important;
    pointer-events: none!important;
}
/* p with date notice */
p#booking_options_notice {
    font-weight:700!important;
    margin-bottom: 56px;
}

.brro-select-other-top-level-step:hover {
    text-decoration: underline!important;
}
.locationblocks .top-level-step .show-booking-options-button {
    color: var(--brro-booking-color-on-primary);
    cursor:pointer;
    margin-top:clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
}

.top-level-step:not(.open):not(:last-of-type):after,
.brro-booking-child-loop-item:not(:last-of-type):after {
    content:"_";
    display: block;
    margin:clamp(7px, 0.56vw, 9px) /*8px @ 1440*/ 0 clamp(26px, 2.22vw, 36px) /*32px @ 1440*/ 0;
    
}

.month-grid {
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    row-gap: 12px;
}

/*locationblocks timeslots*/
.locationblocks .second-step {
    display: inline-block;
}

/* timeblocks stock */
@media (max-width:767px) {
    .timeblocks .timeblock-stock-separator {
        display: none;
    }
    .timeblocks .timeblock-stock-text {
        display: block;
    }
}

.daypartblocks #brro_booking_addtocart_options:not(:has(.top-level-step.open)) #brro-booking-bevestigen,
.locationblocks #brro_booking_addtocart_options:not(:has(.top-level-step.open)) #brro-booking-bevestigen,
.timeblocks #brro_booking_addtocart_options:not(:has(.top-level-step.open)) #brro-booking-bevestigen {
    display: none;
}
/* ========================================
   Buttons
   ======================================== */

.brro-button:hover,
.account-button[disabled]{
	background-color: var(--brro-booking-color-muted);
	opacity:1;
}
.brro-button {
    background-color: var(--brro-booking-color-primary);
    color: var(--brro-booking-color-on-primary);
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    padding: 12px 32px 14px 32px;
}
.brro-button.sm {
    padding: 8px 20px 10px 20px;
}
#brro-booking-bevestigen.no-options,
.brro-button[disabled],
#brro-booking-bevestigen.no-options:hover,
.brro-button[disabled]:hover {
    opacity: 0.4;
    cursor: not-allowed;
}

.brro-button {
    display:inline-block;
    margin-bottom:12px!important;
}

/* Booking quantity controls */
.brro-booking-qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.brro-booking-qty-controls .brro-booking-quantity-input {
    text-align: center;
    width: clamp(41px, 3.47vw, 56px) /*50px @ 1440*/;
    margin: 0 4px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
p.brro-booking-quantity {
    display:inline;
}
.brro-booking-qty-btn {
    width: 32px;
    height: 32px;
    border-radius:32px!important;
    color: var(--brro-booking-qty-fg);
    background: var(--brro-booking-qty-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0!important;
    padding-right: 0!important;
}
.brro-booking-qty-btn:hover {
    background: var(--brro-booking-qty-hover);
}
.brro-booking-qty-btn:active {
    transform: translateY(1px);
}
.brro-booking-qty-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* ========================================
   Forms
   ======================================== */

.brro-form {
    gap: clamp(10px, 0.97vw, 16px) /*14px @ 1440*/!important;
}
/* Account, registration and login */
.brro-login-back:not(:hover) {
    opacity: .4;
}
/* 4 digit code input */
#brro-login-code {
    width: 130px;
    padding: 8px 20px 12px 20px;
    font-size: 32px;
    font-weight: bold;
    border-radius: 4px;
    letter-spacing: 5px;
    display:block;
    margin: 12px 0px;
}
/* ========================================
   Checkout
   ======================================== */

/* delivery address toggle link */
#brro-toggle-alternative-address:before,
#brro-toggle-alternative-address:after {
    content: "";
    display: block;
    width: 100%;
    height: 32px;
}
/* ========================================
   Checkout form field widths
   Use .brro-field-width-N on .brro-form-field
   Pre-defined: 14, 16, 33, 37, 48, 64, 100
   ======================================== */
.brro-field-width-14 { width: 14%; }
.brro-field-width-16 { width: 16%; }
.brro-field-width-33 { width: 33%; }
.brro-field-width-48 { width: 48%; }
.brro-field-width-64 { width: 64%; }
.brro-field-width-100 { width: 100%; }
@media (max-width:420px) {
    .brro-field-width-16 { width: 14%; }
    .brro-field-width-33 { width: 31%; }
}

#brro-checkout-form h3 {
    padding-left: clamp(8px, 0.69vw, 11px);
}

.brro-form-field {
    position:relative;
}
.brro-field-error {
    color: var(--brro-booking-color-field-error);
    margin-top: 4px;
    display: none;
}
/* booked options display */
#brro_booked_options_display {
    margin-bottom: clamp(34px, 2.92vw, 47px) /*42px @ 1440*/;
}
#brro_booked_options_display > div {
    width: 70%;
    gap: 12px 24px;
}
#brro_booked_options .brro-booking-value-display {
    display: inline-block;
    margin:0;
}
#brro_booked_options .brro-booking-value-display b {
    font-weight: 700!important;
    display: block;
    margin-bottom:0px;
} 

/* Toggle link in checkout and account form */
a.brro-toggle-link .button-text {
    color: var(--brro-booking-color-text);
}
a.brro-toggle-link:hover .button-text {
    text-decoration: underline;
}
a.brro-toggle-link img {
    margin-left: 7px;
    transition: transform 400ms ease;
    will-change: transform;
}
a.brro-toggle-link:hover img {
    transform: rotate(-330deg);
}



/*shipping options*/
.brro-checkout-radio-labels-wrapper {
    margin-bottom:clamp(34px, 2.92vw, 47px) /*42px @ 1440*/;
}
.brro-checkout-radio-labels-wrapper .brro-checkout-radio-label {
    max-width: clamp(250px, 17.36vw, 278px) /*250px @ 1440*/;
    box-sizing: border-box;
}
.brro-checkout-radio-label input[type='radio']:before {
    left: 8px;
}
.brro-checkout-radio-label span.brro-checkout-radio-description {
    padding-left: clamp(30px, 2.5vw, 40px) /*36px @ 1440*/;
    font-weight:normal!important;
}
@media (max-width:767px) {
    .brro-checkout-radio-label span.brro-checkout-radio-description {
        padding-left: 0px;
        font-size: 14px;
        line-height:20px;
    }
    .brro-checkout-radio-labels-wrapper .brro-checkout-radio-label {
        width: 49%;
    }
}

/* Submit button loading state: brightness pulse */
@keyframes brro-submit-loading-brightness {
    0%, 100% { filter: brightness(0.5); }
    50% { filter: brightness(1.5); }
}
.brro-button.brro-submit-loading {
    animation: brro-submit-loading-brightness 1s ease-in-out infinite;
}

.cf-turnstile[data-explanation]:not([data-appearance="interaction-only"]):before {
    content: attr(data-explanation);
    display: block;
    margin-bottom: 8px;
}
.cf-turnstile {
    margin-bottom: 32px;
}

/* ========================================
   My account
   ======================================== */

.brro-address-info p {
    margin-bottom: 6px;
}
.brro-address-info {
    position: relative;
}
#brro-change-email-form {
    max-width: clamp(295px, 25vw, 400px) /*360px @ 1440*/;
}

/* Order management accordion */
.brro-order-item {
    margin-bottom: 16px;
    border-radius: 4px;
    overflow: hidden;
}
.brro-order-header-row {
    margin-bottom: 16px;
}
.brro-order-header-row .brro-order-header {
    cursor: default;
}
.brro-order-header-row .brro-order-header:hover {
    background: #f5f5f5;
}
.brro-order-header {
    background: #f5f5f5;
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}
.brro-order-header:hover {
    background: #e9e9e9;
}
.brro-order-header-content {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}
.brro-order-id {
    font-weight: bold;
}
.brro-order-toggle {
    font-size: 12px;
    transition: transform 0.3s;
}
.brro-order-item.active .brro-order-toggle {
    transform: rotate(180deg);
}
.brro-order-details {
    padding: 16px;
    background: #f5f5f5;
    border-radius: 0 0 20px 20px;
}
.brro-order-details-content p {
    margin: 24px 0;
    background: white;
    padding: 16px;
    border-radius: 20px;
}
.brro-order-details-content p:first-child {
    margin-top: 0;
}
.brro-order-details-content p:last-child {
    margin-bottom: 0;
}