/* Shared booking engine: rental criteria with the home page presentation. */
.rental-search {
    --vr-ink: #1a1a1a;
    --vr-soft-ink: #555;
    --vr-muted: #888;
    --vr-line: #e3e6e7;
    --vr-accent: #a9c4d2;
    color: var(--vr-ink);
    font-family: var(--font-text);
}
.rental-search *, .rental-search *::before, .rental-search *::after { box-sizing: border-box; }
.rental-search button, .rental-search input { font-family: inherit; }
.rental-search button { cursor: pointer; }
.rental-search [hidden] { display: none !important; }
.rental-search :is(button, a, input):focus-visible { outline: 2px solid #5b8fb0; outline-offset: -3px; }
.vr-search-form { position: relative; }
.vr-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.vr-search-pill { display: flex; flex: 1 1 880px; min-width: 0; max-width: 1040px; border-radius: 40px; background: #fff; box-shadow: 0 4px 28px #00000014; overflow: hidden; }
.vr-search-pill--bordered { border: 1px solid var(--vr-line); }
.vr-field { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; min-height: 76px; padding: 18px 24px; border: 0; background: transparent; color: var(--vr-ink); text-align: left; }
.vr-field:first-child { padding-left: 24px; }
.vr-field + .vr-field::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: #d1d1d1; }
.vr-field:hover, .vr-field[aria-expanded="true"] { background: #f6f7f7; }
.vr-field-label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: var(--fw-regular); line-height: var(--lh-text); white-space: nowrap; letter-spacing: var(--ls-label); text-transform: uppercase; }

.vr-field-value { display: block; width: 100%; margin-top: 4px; overflow: hidden; color: var(--vr-soft-ink); font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-text); font-weight: var(--fw-light); font-variant-numeric: tabular-nums lining-nums; }
.vr-field-value.is-set { color: var(--vr-ink); }
.rental-search .vr-submit { display: grid; flex: 0 0 88px; place-items: center; padding: 0; border: 0; background: var(--vr-accent); color: #fff; }
.rental-search .vr-submit:hover { background: #819faf; }
.vr-submit svg { width: 28px; height: 28px; }
.vr-name-search { position: relative; flex: 0 0 auto; }
.vr-name-trigger { padding: 10px 0; border: 0; background: transparent; color: var(--vr-soft-ink); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; font-family: var(--font-text); font-weight: var(--fw-medium); letter-spacing: var(--ls-button); text-transform: uppercase; }
.vr-name-box { position: absolute; z-index: 1080; top: calc(100% + 12px); right: 0; width: 350px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--vr-line); border-radius: 6px; box-shadow: 0 14px 34px #00000024; overflow: hidden; }

.vr-name-input-wrap { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--vr-line); }
.vr-name-input-wrap svg { flex: none; width: 18px; height: 18px; }
.vr-name-input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--vr-ink); font-size: var(--fs-input); }
.vr-name-input-wrap input::placeholder { color: var(--vr-muted); }
.vr-name-close { padding: 0 2px; border: 0; background: none; color: var(--vr-muted); font-size: var(--fs-display-m); line-height: 1; }
.vr-name-results a, .vr-name-results p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; padding: 10px 14px; color: var(--vr-ink); font-size: var(--fs-body); text-decoration: none; }
.vr-name-results a:hover, .vr-name-results a[aria-selected="true"] { background: #f4f4f2; }
.vr-name-results small { flex: none; color: var(--vr-soft-ink); font-size: var(--fs-label); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.vr-name-results p { color: var(--vr-muted); }
.vr-name-hint { margin: 0; padding: 9px 14px; border-top: 1px solid var(--vr-line); color: var(--vr-muted); font-size: var(--fs-small); }

.vr-panel-scrim { position: fixed; z-index: 1060; inset: var(--front-header-height, 100px) 0 0; background: transparent; }
.vr-filter-panel { position: absolute; z-index: 1061; top: calc(100% + 24px); left: var(--vr-panel-left, 0px); width: min(370px, calc(100vw - 40px)); padding: 24px; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 16px 40px #00000026; }
.vr-filter-panel[data-vr-content="dates"] { width: min(600px, calc(100vw - 40px)); }
.vr-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.vr-panel-head strong { font-size: var(--fs-display-m); font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.vr-panel-close { border: 0; background: transparent; color: var(--vr-muted); font-size: var(--fs-display-m); line-height: 1; }
.vr-date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vr-date-fields label { display: grid; gap: 6px; color: var(--vr-soft-ink); font-size: var(--fs-label); }
.vr-date-fields input { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--vr-line); border-radius: 3px; color: var(--vr-ink); background: #fff; font-size: var(--fs-input); }
.vr-panel-done { margin-top: 20px; width: 100%; padding: 12px 18px; border: 0; border-radius: 24px; background: #607f90; color: #fff; font-size: var(--fs-small); font-family: var(--font-text); font-weight: var(--fw-medium); letter-spacing: var(--ls-button); text-transform: uppercase; }
.vr-stepper { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 20px 0; }
.vr-stepper button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #efefef; color: var(--vr-ink); font-size: var(--fs-display-m); }
.vr-stepper button:disabled { opacity: .4; cursor: default; }
.vr-stepper span { min-width: 28px; text-align: center; line-height: var(--lh-text); font-family: var(--font-text); font-weight: var(--fw-light); font-variant-numeric: tabular-nums lining-nums; font-size: var(--fs-num-display); }
.vr-check-list { max-height: min(350px, 48vh); overflow-y: auto; scrollbar-gutter: stable; padding-inline-end: 14px; }
.vr-check-list > label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--vr-line); font-size: var(--fs-label); cursor: pointer; }
.vr-check-list > label:last-child { border-bottom: 0; }
.vr-check-list input { width: 17px; height: 17px; accent-color: var(--vr-ink); }
.vr-form-hidden { display: none; }

.vr-calendar { display: flex; justify-content: center; }
.vr-calendar .litepicker { font-family: var(--font-text); }
.vr-calendar .litepicker .container__months { box-shadow: none; }
.home-hero .vr-search-pill { box-shadow: none; }
.home-hero .vr-name-trigger { color: #fff; }
.home-hero .vr-name-box { left: 0; right: auto; }

@media (min-width: 768px) and (max-width: 1199px) {
    .vr-name-box { left: 0; right: auto; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .vr-field, .vr-field:first-child { padding-inline: 15px; }
}

@media (max-width: 767px) {
    .vr-search-row { display: block; }
    .vr-search-pill { flex-direction: column; width: 100%; border-radius: 24px; }
    .vr-field, .vr-field:first-child { flex: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 60px; padding: 18px 20px; border-bottom: 1px solid #ddd; }
    .vr-field + .vr-field::before { content: none; }
    .vr-field-label { flex: 0 0 112px; letter-spacing: var(--ls-label); text-transform: uppercase; }
    .vr-field-value { flex: 1; width: auto; min-width: 0; margin-top: 0; font-family: var(--font-text); font-weight: var(--fw-light); font-variant-numeric: tabular-nums lining-nums; }
    /* Give WebKit an explicit height to center the icon inside the button. */
    .rental-search .vr-submit { flex-basis: 58px; height: 58px; }
    .vr-submit svg { width: 21px; height: 21px; }
    .vr-name-search { margin-top: 10px; }
    .vr-name-trigger { padding: 5px 0; font-size: var(--fs-small); font-family: var(--font-text); font-weight: var(--fw-medium); letter-spacing: var(--ls-button); text-transform: uppercase; }
    .vr-name-box { position: fixed; z-index: 1200; inset: 0; width: 100%; max-width: none; border: 0; border-radius: 0; overflow-y: auto; }
    .vr-name-input-wrap { padding: 54px 20px 15px; }
    .vr-name-input-wrap input { font-size: var(--fs-input); }
    .vr-name-results a, .vr-name-results p { padding: 14px 20px; border-bottom: 1px solid var(--vr-line); }
    .vr-name-hint { padding-inline: 20px; }
    .vr-filter-panel { position: fixed; z-index: 1200; inset: auto 0 0; width: 100% !important; max-height: calc(100dvh - var(--front-header-height, 78px)); overflow-y: auto; border-radius: 28px 28px 0 0; padding: 22px 20px 30px; }
    .vr-panel-scrim { z-index: 1199; background: #0006; }
}