/* Offer search (mmu/offer-search): the plugin exposes its colors as custom properties, map them to the tokens. */
.site-main .offer-search-block {
    --offer-search-frame: var(--im-sand);
    --offer-search-field: #fff;
    --offer-search-text: var(--im-ink);
    --offer-search-muted: color-mix(in srgb, var(--im-ink) 72%, var(--im-surface));
    --offer-search-accent: var(--im-gold);
    --offer-search-accent-hover: color-mix(in srgb, var(--im-gold) 85%, var(--im-deep));
    --offer-search-on-accent: var(--im-ink);
    --offer-search-highlight: color-mix(in srgb, var(--im-sand) 45%, #fff);
    --offer-search-error: var(--im-accent);
    --offer-search-focus: var(--im-deep);
    --offer-search-radius: var(--im-radius);
    --offer-search-inner-radius: var(--im-radius);
    --offer-search-shadow: var(--im-shadow-hover);

    width: min(100% - 32px, 1320px);
    margin: clamp(28px, 4vw, 60px) auto;
    font-family: var(--im-font);
}

/* On the homepage the search overlaps the lower edge of the hero, like a booking bar. */
.site-main .im-hero-slider.alignfull + .offer-search-block {
    margin-top: calc(-48px - clamp(32px, 4vw, 44px));
}

.site-main .offer-search-block .offer-search {
    gap: 6px;
    padding: 6px;
}

.site-main .offer-search-block .offer-search__label {
    letter-spacing: .01em;
}

.site-main .offer-search-block .offer-search__input,
.site-main .offer-search-block .offer-search__value {
    font-weight: 700;
    letter-spacing: -.01em;
}

.site-main .offer-search-block .offer-search__icon {
    color: var(--im-accent);
}

.site-main .offer-search-block .offer-search__suggestions-group {
    color: var(--im-deep);
}

.site-main .offer-search-block .offer-search__stepper-controls {
    border-color: var(--im-line);
    border-radius: var(--im-radius-sm);
}

.site-main .offer-search-block .offer-search__stepper-button {
    border-radius: var(--im-radius-sm);
}

/* The done button is secondary, the search button keeps the square edges of the fields beside it. */
.site-main .offer-search-block .offer-search__done {
    border-radius: var(--im-radius-sm);
}

.site-main .offer-search-block .offer-search__submit {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .site-main .offer-search-block .offer-search__submit {
        transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .site-main .offer-search-block .offer-search__submit:hover {
        transform: translateY(-1px);
        box-shadow: var(--im-shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-main .offer-search-block .offer-search__chevron {
        transition: none;
    }
}

/* Smaller overlap, so the stacked bar keeps clear of the slider dots. */
@media (max-width: 1024px) {
    .site-main .im-hero-slider.alignfull + .offer-search-block {
        margin-top: calc(-48px - 20px);
    }
}