/* Detail booking forms sit inside the image hero for stays and experiences. */
.inner-hero--stay-booking,
.inner-hero--experience-booking { height: 51rem; }

.inner-hero--stay-booking .inner-hero__content,
.inner-hero--experience-booking .inner-hero__content {
    inset-inline: var(--gutter);
    inset-block-end: 3rem;
    width: min(var(--container), calc(100% - 2 * var(--gutter)));
}

.inner-hero--stay-booking .inner-hero__description,
.inner-hero--experience-booking .inner-hero__description { max-width: 42rem; }

.inner-hero--stay-booking .inner-hero__meta,
.inner-hero--experience-booking .inner-hero__meta {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
}

.inner-hero--stay-booking .inner-hero-booking,
.inner-hero--experience-booking .activity-quick-booking-shell {
    width: 100%;
    margin: 0;
    padding: 0;
}

.inner-hero--stay-booking .hero-quickbook {
    width: 100%;
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 1.5rem;
    background: rgba(251, 250, 246, .97);
    color: var(--charcoal);
    box-shadow: 0 1rem 2.5rem -1.5rem rgba(20, 15, 10, .45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.inner-hero--stay-booking .hero-quickbook__label,
.inner-hero--stay-booking .hero-quickbook__sublabel { color: var(--taupe); }

.inner-hero--stay-booking .hero-quickbook__input {
    border-bottom-color: rgba(42, 40, 35, .25);
    color: var(--charcoal);
}

.inner-hero--stay-booking .hero-quickbook__input[type='date'] { color-scheme: light; }
.inner-hero--stay-booking .hero-quickbook__input[type='date']::-webkit-calendar-picker-indicator { filter: none; opacity: .7; }
.inner-hero--stay-booking .hero-quickbook__input::placeholder { color: #77736b; }

.inner-hero--stay-booking .hero-quickbook__submit,
.inner-hero--experience-booking .activity-quick-booking__submit {
    color: #fff8ec;
    font-size: .72rem;
    line-height: 1.4;
    text-indent: 0;
    white-space: normal;
}

.inner-hero--stay-booking .hero-quickbook__submit:is(:hover, :focus-visible),
.inner-hero--experience-booking .activity-quick-booking__submit:is(:hover, :focus-visible) { color: #fff8ec; }

#reserve.detail-reserve--stay-booking { display: block; grid-template-columns: 1fr; }

@media (max-width: 1199px) {
    .inner-hero--stay-booking,
    .inner-hero--experience-booking { height: 51rem; }
}

@media (max-width: 1050px) {
    .inner-hero--stay-booking .hero-quickbook__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inner-hero--stay-booking .hero-quickbook__field--dates,
    .inner-hero--stay-booking .hero-quickbook__submit { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .inner-hero--stay-booking { height: 57rem; }
    .inner-hero--experience-booking { height: 53rem; }

    .inner-hero--stay-booking .inner-hero__content,
    .inner-hero--experience-booking .inner-hero__content {
        inset: auto 1.25rem 1.5rem;
        width: auto;
    }

    .inner-hero--stay-booking .inner-hero__meta,
    .inner-hero--experience-booking .inner-hero__meta { margin-top: 1rem; }

    .inner-hero--stay-booking .hero-quickbook { padding: .85rem; border-radius: 1.1rem; }
    .inner-hero--stay-booking .hero-quickbook__grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .inner-hero--stay-booking .hero-quickbook__field--dates,
    .inner-hero--stay-booking .hero-quickbook__submit { grid-column: auto; }
    .inner-hero--stay-booking .hero-quickbook__submit { min-height: 3.25rem; }
}