/* Keep the Lodgify form responsive to its container, including open popovers. */
#buchen {
    scroll-margin-top: 7.5rem;
}

#buchen .warm-booking__inner {
    overflow: visible;
}

#lodgify-search-bar,
.warm-booking__inner #lodgify-search-bar {
    container: booking-form / inline-size;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

#lodgify-search-bar #portable-search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1rem;
}

#lodgify-search-bar #portable-search-bar > div:empty {
    display: none;
}

#lodgify-search-bar #portable-search-bar > :is(button, a) {
    min-width: 0;
    width: 100%;
    max-width: none;
    min-height: 3.5rem;
}

#lodgify-search-bar :is([data-testid="start-date-button"], [data-testid="end-date-button"]) {
    min-width: 0;
    flex: 1;
}

#lodgify-search-bar #portable-search-bar > a {
    justify-content: center;
    padding-inline: 1.25rem;
    white-space: nowrap;
}

@container booking-form (min-width: 42rem) {
    #lodgify-search-bar #portable-search-bar {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(9rem, 0.8fr);
    }
}