body.facility-page qp-facility-photos {
    display: block;
    margin: 0 auto;
    max-width: 90rem;
    padding: 5rem 2.5rem 2.5rem;
}

.facility-page-divider {
    width: 100%;
    height: 1px;
    margin: 0 auto 5rem;
    border: 0;
    background: var(--ap-grey-300, #D5DEDE);
}

.facility-page-divider--booking-benefits {
    display: none;
}

.facility-page-section {
    padding: 0;
}

.facility-page-callout {
    margin: 3rem 0;
}

/* Callouts are server-rendered, their sibling components are not: keep them out of flow until those upgrade. */
qp-facility-info-intro:not(:defined) + .facility-page-callout,
qp-facility-practical-info:not(:defined) + .facility-page-callout {
    display: none;
}

.facility-page .qp-quotation .qp-callout{
    align-items: flex-start;

    svg.flipped-vertical {
        transform: rotate(180deg);
    }
}

.facility-page-section > :last-child {
    margin-bottom: 0;
}

.facility-page-usp {
    margin-bottom: 6.25rem;
    padding: 0 2.5rem;
}

.facility-page-how-it-works,
.facility-page-reviews,
.facility-page-faq {
    margin-bottom: 6.25rem;
}

.facility-page-how-it-works,
.facility-page-faq {
    box-sizing: border-box;
    margin-inline: auto;
    padding: 0 2.5rem;
    width: 100%;
}

.facility-page-how-it-works {
    max-width: 90rem;
}

.facility-page-faq {
    max-width: 56.25rem;
}

.facility-page-content {
    box-sizing: border-box;
    display: flex;
    gap: 2.5rem;
    margin: 0 auto 6.25rem;
    max-width: 90rem;
    padding: 0 2.5rem;
    width: 100%;
}

.facility-page-main {
    flex: 1 1 65%;
    max-width: 56.25rem;
    min-width: 0;
}

.facility-page-sidebar {
    flex: 1 1 35%;
    max-width: 27.5rem;
    min-width: 0;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--qp-nav-height, 4.5rem) + 1.5rem);
}

/* Quotation price should always have the euro sign next to the price */
.qp-quotation__price-value {
    white-space: nowrap;
}

/* Ensure the sidebar does not get too small */
@media screen and (min-width: 48rem) {
    .facility-page-sidebar {
        min-width: 290px;
    }
}

/* When the quotation moves from fullwidth to left/right-view, we want the inputs underneath eachother */
@media screen and (min-width: 48rem) {
    .qp-quotation__inputs {
        flex-direction: column;
    }
}

/* Back to left/right on largest size */
@media screen and (min-width: 90rem) {
    .qp-quotation__inputs {
        flex-direction: row;
    }
}

body.facility-page qp-navigation-bar[data-transparent]:not([data-scrolled]) {
    --header-focus-ring: var(--ap-teal);
    --header-link-hover: var(--ap-grey-100);

    color: var(--qp-nav-text);

    .qp-navigation-bar__logo--default {
        display: none;
    }

    .qp-navigation-bar__logo--scrolled {
        display: block;
    }
}

.facility-page-nearby-pois {
    margin-top: 3rem;
    height: 60vh;
    max-height: 29.313rem;
    min-height: 20rem;
}

@media screen and (max-width: 48rem) {
    body.facility-page {
        main {
            margin: 0;
            padding: 0;
        }

        qp-navigation-bar[data-transparent]:not([data-scrolled]) {
            --header-focus-ring: var(--ap-white);
            --header-link-hover: var(--ap-alpha-white-15);

            color: var(--ap-font-color-light);

            .qp-navigation-bar__toggle {
                color: var(--ap-font-color-light);
            }

            .qp-navigation-bar__toggle svg {
                stroke: var(--ap-font-color-light);
            }

            .qp-navigation-bar__logo--default {
                display: block;
            }

            .qp-navigation-bar__logo--scrolled {
                display: none;
            }
        }

        qp-facility-photos {
            margin: 0;
            max-width: none;
            padding: 0 0 0.5rem;
            width: 100%;
        }

        .facility-page-divider {
            display: none;
        }

        .facility-page-divider--booking-benefits {
            display: block;
            margin: 1.5rem 0;
        }

        .facility-page-content {
            display: flex;
            flex-direction: column;
            gap: 0;
            max-width: none;
            padding: 0;
            width: 100%;
        }

        .facility-page-main {
            display: flex;
            flex-direction: column;
            flex: none;
            max-width: none;
            order: 2;
        }

        .facility-page-sidebar {
            display: block;
            flex: none;
            max-width: none;
            order: 1;
            padding: 0 0 1.5rem 0;
            width: 100%;
            margin-bottom: 1.5rem;
            position: static;

            .qp-quotation{
                box-shadow: none;
                border:none;
            }
        }

        /* Flatten the section so the map can be reordered in between its children */
        .facility-page-section {
            display: contents;
        }

        .facility-page-section > qp-facility-info-intro {
            order: 1;
            padding: 0 1rem;
        }

        .facility-page-section > .facility-page-callout:first-of-type {
            order: 2;
            padding: 0 1rem;
        }

        .facility-page-nearby-pois {
            order: 3;
            width: 100%;
            height: auto;
            max-height: none;
            min-height: 0;
        }

        .facility-page-section > qp-facility-practical-info {
            order: 4;
            padding: 0 1rem;
            margin-top: 3rem;
        }

        .facility-page-section > .facility-page-callout:last-of-type {
            order: 5;
            padding: 0 1rem;
        }

        .facility-page-callout {
            margin: 1.5rem 0;
        }
        
        .facility-page-usp {
            margin-bottom: 6.25rem;
            padding: 0 1rem;
        }

        .facility-page-how-it-works,
        .facility-page-faq {
            padding: 0 1rem;
        }
    }
}