.location .location-search-box.location-picker {
    box-sizing: border-box; align-items: stretch; justify-content: flex-start;
    width: min(360px, calc(100vw - 32px)); max-height: min(540px, 75vh);
    padding: 18px; gap: 12px; overflow-y: auto; color: #213b2d;
    border: 1px solid #e0e8e1; border-radius: 16px; background: white;
    box-shadow: 0 16px 40px #18342926; font-family: 'Open Sans', sans-serif;
    font-size: 14px; text-align: left; animation: location-picker-enter 180ms ease-out; transition: none;
    transform-origin: top center;
}
.location-picker__heading { font-size: 17px; font-weight: 700; }
.location-picker__heading span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: #6b786e; }
.location-picker__current { padding: 10px 12px; border-radius: 8px; background: #f0f6ef; font-size: 12px; }
.location-picker__current > span { color: #24764b; margin-right: 6px; }
.location-picker button { font: inherit; cursor: pointer; }
.location-picker .location-picker__nearby { display: flex; align-items: center; gap: 10px; padding: 12px 0; color: #24764b; border: 0; background: white; text-align: left; font-weight: 600; }
.location-picker__nearby > span:last-child { margin-left: auto; }
.location-picker__search { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #ccd8cf; border-radius: 9px; }
.location-picker__search input { box-sizing: border-box; min-width: 0; width: 100%; font: inherit; border: 0; outline: 0; background: white; color: #213b2d; }
.location-picker__search:focus-within { outline: 2px solid #24764b; outline-offset: 2px; }
.location-picker__label { margin: 4px 0 0; font-size: 10px; letter-spacing: .1em; font-weight: 600; color: #6b786e; }
.location-picker__results { overflow-y: auto; max-height: 240px; min-height: 0; scrollbar-width: thin; }
.location-picker .location-picker__city { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 10px; border: 0; border-radius: 8px; background: white; color: #213b2d; text-align: left; }
.location-picker__city > small { margin-left: auto; color: #6b786e; }
.location-picker .location-picker__city:hover { background: #f0f6ef; }
.location-picker button:focus-visible { outline: 2px solid #24764b; outline-offset: -2px; }
.location-picker button:disabled { opacity: .6; cursor: wait; }
.location-picker__status { margin: 0; font-size: 12px; line-height: 1.5; color: #657269; }
.location-picker [hidden] { display: none !important; }
.hottest-location { margin: 12px 0; color: #526358; font: 600 13px 'Open Sans', sans-serif; }
.hottest-empty { padding: 24px; border: 1px solid #e0e8e1; border-radius: 12px; background: #f6f9f5; }
.hottest-empty h2 { font-size: 18px; margin: 0 0 8px; }
.hottest-empty p { font-size: 14px; margin: 0; color: #657269; }

.hottest-note { margin: -4px 0 16px; color: #657269; font: 13px/1.5 'Open Sans', sans-serif; }

@media (max-width: 600px) {
    .search-area:has(.location-picker) { position: relative; }
    .search-area .location:has(.location-picker) { position: static; }
    .search-area .location .location-search-box.location-picker {
        left: 50%;
        right: auto;
        top: calc(100% + 8px);
        --picker-offset-x: -50%;
        transform: translateX(-50%);
    }
}

@keyframes location-picker-enter {
    from { opacity: 0; transform: translate(var(--picker-offset-x, 0px), 8px) scale(.98); }
    to { opacity: 1; transform: translate(var(--picker-offset-x, 0px), 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .location .location-search-box.location-picker { animation: none; }
}