/* ========================================
   Brro Booking — frontend.css
   Index:
   1. Design tokens
   2. Booking flow visibility
   3. Single aanbod chrome
   4. Messages
   5. Booking option selectors
   6. Buttons and shared controls
   7. Forms
   8. Checkout
   9. Account and login
   10. Editor edit mode
   ======================================== */

/* ========================================
   1. 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;
    --brro-booking-first-step-option-width: clamp(69px, 5.83vw, 93px) /*84px @ 1440*/;
    --brro-booking-first-step-option-height: clamp(34px, 2.85vw, 46px) /*41px @ 1440*/;
}

/* ========================================
   2. Booking flow visibility
   ======================================== */
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;
}
/* Admin edit session: rendered via the plugin-owned template
   app/frontend/templates/edit-booking.php (+ edit-booking.css), no CSS hiding needed. */

/* ========================================
   3. Single aanbod chrome
   ======================================== */
/**************************** 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;
}

/**************************** Downloads 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;
}

/* ========================================
   4. 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);
}

/* ========================================
   5. Booking option selectors
   ======================================== */
/**************************** Layout / step wrappers */
#brro_booking_addtocart_options a {
    display: inline-block;
}
@media (min-width:768px) {
    #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*/;
    }
}
@media (max-width:767px) {
    #brro_booking_addtocart_options .first-step .selectable-options-wrapper,
    body:not(.timeblocks) #brro_booking_addtocart_options .top-level-step .top-level-option {
        max-width: 100%;
    }
}
#brro_booking_addtocart_options .first-step label.selectable-option {
    width: var(--brro-booking-first-step-option-width);
    height: var(--brro-booking-first-step-option-height);
}
.selection-step-wrapper > h3,
.selection-step-wrapper > p:not(.brro-booking-quantity),
.selection-step-wrapper > a,
.brro-extra-fieldgroup-edit .brro-extra-field--number .brro-extra-field-edit-price,
.brro-extra-fieldgroup-edit .brro-extra-field-descr,
.brro-extra-fieldgroup-edit .brro-field-error {
    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;
    }
}
.top-level-step-option-content {
    max-width: 70%;
}
@media (max-width:767px) {
    .top-level-step-option-content {
        max-width: 50%;
    }
}
#brro_booking_addtocart_options .first-step .selectable-options-wrapper:not(.months-selection),
#brro_booking_addtocart_options .selection-step-wrapper:not(.top-level-step),
.brro-extra-fieldgroup-edit .brro-extra-field--number {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: clamp(7px, 0.63vw, 10px);
    align-content: 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;
}
.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;
}

/**************************** Availability 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*/;
    }
}

/**************************** Month grid / days */
.months-selection,
.month-grid {
    display: grid;
    gap: 10px;
}
.month-grid {
    grid-template-columns: repeat(7, 1fr);
}
.months-selection {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width:767px) {
    .months-selection {
        grid-template-columns: repeat(auto-fit, minmax(var(--brro-booking-first-step-option-width), 1fr));
    }
}
@media (min-width:768px) {
    #brro_booking_addtocart_options .selectable-options-wrapper.month-grid {
        max-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 {
        gap:2px!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;
}

/**************************** Selectable options */
/* Hide native checkbox inside option labels */
#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):not(.option-clicked):hover,
#brro_booking_addtocart_options label.selectable-option:not(.timeslot):not(.option-clicked):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.day:has(input[type='radio']: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 exclusion 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;
}

/**************************** Type-specific */
/* Weekblocks value display */
body:not(.weekblocks) #brro_booking_addtocart_options .brro-booking-value-display {
    display: none;
}
#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;
}
/* Timeblocks: stack multi-date and time edit actions in opened card */
.timeblock-option .top-level-option-edit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
/* Locationblocks */
.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*/;
}
.locationblocks .second-step {
    display: inline-block;
}
/* Shared subtitle under option headings (daypartblocks, timeblocks) */
.option-subtitle {
    margin: 0 0 8px 0;
}

/**************************** Notices / price / confirm visibility */
p#booking_options_notice {
    font-weight:700!important;
    margin-bottom: 56px;
}
.brro-selection-price-summary {
    margin: clamp(16px, 1.39vw, 22px) 0;
}
.brro-selection-price-summary[hidden] {
    display: none !important;
}
/* Dynamic pre-date "vanaf" reuses shortcode markup; keep it compact above Bevestigen. */
.brro-selection-price-summary .brro-booking-price-info > p {
    margin: 0;
}
.brro-booking-price-btw {
    font-size: 0.85em;
    display: inline-block;
}
/* Individual-line BTW (amount + %) only when setting "BTW bij elke prijs tonen" is on. */
body:not(.show-all-btw) small.brro-booking-price-btw {
    display: none !important;
}

.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;
}

/* ========================================
   6. Buttons and shared controls
   ======================================== */
/**************************** Primary 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;
    display:inline-block;
    margin-bottom:12px!important;
    cursor: pointer!important;
}
.brro-button.sm {
    padding: 8px 20px 10px 20px;
}
#brro-booking-bevestigen {
    margin-bottom: 32px !important;
}
#brro-booking-bevestigen.no-options,
.brro-button[disabled],
#brro-booking-bevestigen.no-options:hover,
.brro-button[disabled]:hover {
    opacity: 0.4;
    cursor: not-allowed;
}

/**************************** 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;
    /* Hide spin buttons for Chrome, Safari, Edge, Opera */
    appearance: textfield; /* Standard */
    -webkit-appearance: none;
    -moz-appearance: textfield;
}
.brro-booking-qty-controls .brro-booking-quantity-input::-webkit-outer-spin-button,
.brro-booking-qty-controls .brro-booking-quantity-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
p.brro-booking-quantity {
    display:inline;
}
.brro-booking-qty-btn {
    width: 32px;
    height: 32px;
    border-radius:32px!important;
    border-color:transparent!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;
    cursor: pointer!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;
}

/**************************** Dynamic duration / time */
.brro-dynamic-duration-controls {
    align-items: center;
    gap: 12px;
}
.brro-dynamic-duration-controls .brro-dynamic-duration-label {
    display: inline-block;
    min-width: 210px;
    text-align: center;
    font-weight: 600;
}
.brro-dynamic-time-select {
    min-width: clamp(200px, 13.89vw, 223px) /*200px @ 1440*/;
    max-width: 100%;
}
.daypartblocks-dynamic-time-step .brro-dynamic-time-empty-msg {
    display: block;
    opacity: 0.85;
}

/**************************** Toggle links */
a.brro-toggle-link {
    text-decoration: none!important;
}
a.brro-toggle-link:hover {
    text-decoration: underline!important;
}
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);
}

/* ========================================
   7. Forms
   ======================================== */
:where(.brro-form label) {
    display: block;
}
:where(.brro-form input) {
    width: 100%;
}
:where(.brro-form input[type='checkbox']) {
    width: auto;
}
:where(.brro-form input[type='radio']) {
    width: auto;
}
.brro-form {
    gap: clamp(10px, 0.97vw, 16px) /*14px @ 1440*/!important;
}
.brro-form-field {
    position:relative;
}
.brro-field-error {
    color: var(--brro-booking-color-field-error);
    margin-top: 4px;
    display: none;
}
/* Custom checkbox / radio pills */
input[type='checkbox'],
input[type='radio'] {
    width: clamp(26px, 2.22vw, 36px) /*32px @ 1440*/;
    height: 0px;
    border: none!important;
    clip: rect(0, 0, 0, 0);
}
input[type='checkbox']:before,
input[type='radio']:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(21px, 1.81vw, 29px);
    height: clamp(21px, 1.81vw, 29px);
    background-color: var(--brro-booking-color-muted);
    border-radius: 50%;
    transition: background 200ms ease;
    cursor: pointer;
}
input[type='checkbox']:checked:before,
input[type='radio']:checked:before {
    background-color: var(--brro-booking-color-primary);
}
input[type='checkbox']:hover:before,
input[type='radio']:hover:before {
    background-color: var(--brro-booking-color-primary-hover);
}
input[type='checkbox']:checked:hover:before,
input[type='radio']:checked:hover:before {
    background-color: var(--brro-booking-color-msg-error);
}
input[type='checkbox'] + label,
input[type='radio'] + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
}

/* ========================================
   8. Checkout
   ======================================== */
/**************************** Section spacing */
.brro-checkout-section {
    margin-bottom:clamp(34px, 2.92vw, 47px) /*42px @ 1440*/;
}
/* Delivery address toggle spacers */
#brro-toggle-alternative-address:before,
#brro-toggle-alternative-address:after {
    content: "";
    display: block;
    width: 100%;
    height: 32px;
}

/**************************** 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%; }
}

/**************************** Booked options display */
#brro-checkout-form h3,
.brro-checkout-section-extra-fields h4 {
    margin: 0 0 10px;
}
#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;
}

/**************************** Extra opties confirm sub-step */
.brro-checkout-extra-fieldgroup + .brro-checkout-extra-fieldgroup {
    margin-top: clamp(24px, 2.08vw, 34px);
}
.brro-extra-fieldgroup-edit {
    row-gap: 32px !important;
}
.brro-extra-field-descr {
    margin: 8px 0 0;
    width: 100%;
}
.brro-extra-fieldgroup-edit .brro-extra-field--number .brro-extra-field-descr {
    margin: 0px;
}

.brro-extra-field-descr p {
    margin: 0 0 0.5em;
}
.brro-extra-field-descr p:last-child {
    margin-bottom: 0;
}
.brro-extra-field-label {
    display: block;
    margin-bottom: 8px;
}
.brro-extra-fields--no-step .brro-extra-fieldgroup-summary,
.brro-extra-fields--no-step .brro-extra-fields-confirm-wrap,
.brro-extra-fields--no-step #brro_change_extra_options {
    display: none !important;
}
.brro-extra-fields--editing .brro-extra-fieldgroup-summary {
    display: none;
}
.brro-extra-fields--editing .brro-extra-fields-empty-msg {
    display: none !important;
}
.brro-extra-fields--editing #brro_change_extra_options {
    display: none !important;
}
.brro-extra-fields--confirmed .brro-extra-fieldgroup-edit {
    display: none !important;
}
.brro-extra-fields--confirmed .brro-extra-fieldgroup-summary {
    display: block;
}
.brro-extra-fields--confirmed .brro-extra-fields-confirm-wrap {
    display: none !important;
}
.brro-extra-fields--confirmed #brro_change_extra_options[hidden] {
    display: none !important;
}
.brro-extra-summary-row {
    margin-bottom: 8px;
}
.brro-extra-summary-row--number .brro-extra-summary-label,
.brro-extra-summary-row--number .brro-extra-summary-value {
    display: inline;
}
.brro-extra-summary-row--text .brro-extra-summary-value {
    display: block;
    margin-top: 2px;
}
.brro-extra-fields-empty-msg {
    margin: 0 0 clamp(16px, 1.39vw, 22px);
    padding-left: clamp(8px, 0.69vw, 11px);
}
.brro-extra-fields-confirm-wrap {
    margin-top: clamp(16px, 1.39vw, 22px);
}
.brro-extra-field > .brro-extra-price-inline {
    display: block;
    margin: 4px 0 0;
}
.brro-extra-field-edit-price {
    margin: 10px 0 0;
}
.brro-extra-fieldgroup-edit .brro-extra-field--number .brro-extra-field-edit-price {
    margin: 0px;
}
.brro-extra-field-edit-price[hidden] {
    display: none !important;
}
.brro-extra-summary-row--priced .brro-extra-summary-value {
    display: inline;
}
.brro-extra-total-inline {
    display: inline-block;
}
.brro-extra-price-separator {
    font-weight: 100;
    opacity: .33;
}

/**************************** Price overview */
.brro-booking-price-inline {
    display: block;
    margin: 4px 0 0;
}
.brro-booking-price-inline-discount,
.brro-booking-price-inline-discount + .brro-booking-price-inline-total {
    display: inline;
}
.brro-booking-price-inline-discount {
    color: var(--brro-booking-color-primary);
}
.brro-booking-price-inline-unit-note {
    margin-top: 2px;
}
.brro-checkout-section-price[hidden] {
    display: none !important;
}
.brro-price-overview-table {
    width: 100%;
    border-collapse: collapse;
}
.brro-price-overview-totals {
    margin-top: 12px;
}
.brro-price-overview-table th,
.brro-price-overview-table td {
    padding: 8px 8px 0 8px;
    border: 0;
    text-align: left;
    vertical-align: top;
}
.brro-price-overview-table thead th {
    font-weight: 700;
}
.brro-price-overview-table th {
    font-weight: 400;
}
.brro-price-overview-table td {
    text-align: right;
    white-space: nowrap;
}
.brro-price-overview-totals th {
    width: 70%;
}
.brro-price-row-total th,
.brro-price-row-total td,
.brro-price-row-due-now th,
.brro-price-row-due-now td {
    font-weight: 700;
}
.brro-price-row-btw th,
.brro-price-row-btw td,
.brro-price-row-remainder th,
.brro-price-row-remainder td {
    padding-top: 0;
    padding-bottom: 0;
}

/**************************** Delivery / shipping options */
.brro-checkout-radio-labels-wrapper {
    gap: 32px 64px;
}
.brro-checkout-radio-labels-wrapper .brro-checkout-radio-label {
    max-width: clamp(250px, 17.36vw, 278px) /*250px @ 1440*/;
    box-sizing: border-box;
    position: relative;
}
.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 loading + Turnstile */
@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;
}

/* ========================================
   9. Account and login
   ======================================== */
/**************************** Login */
.brro-login-back:not(:hover) {
    opacity: .4;
}
#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;
}

/**************************** Address */
.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 {
    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;
}

/* ========================================
   10. Editor edit mode
   ======================================== */
.brro-edit-lock-notice {
    margin: 8px 0 0;
    padding: 8px 12px;
    line-height: 1.4;
    color: #4a3b00;
    background: #fff6d9;
    border: 1px solid #f0d98a;
    border-radius: 12px;
}
.brro-booking-qty-controls.brro-edit-locked .brro-booking-quantity-input {
    opacity: 0.6;
    cursor: not-allowed;
}