/* Near-me page. Prefix nm-. Bootstrap does the rest. */
.nm-title { font-size: 22px; margin: 12px 0 4px; }
.nm-subtitle { margin: 0 0 12px; color: #4b5563; }
.nm-start > div { margin-bottom: 12px; }
/* In the search modal the button sits under a field; here it opens the row. */
.nm-page .nearby-button { margin-top: 0; }
.nm-place-label { display: block; font-weight: 600; margin-bottom: 6px; }
#nm-place-field, #nm-place-field .btn, #nm-place-field gmp-place-autocomplete { width: 100%; }
#nm-place-field .btn { text-align: left; }
/* Where the page scrolls to when the map fills: just under the sticky top bar (90px). */
.nm-bar { scroll-margin-top: 98px; }
.nm-bar .col-xs-12 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nm-switch { display: flex; flex: 1 1 100%; }
.nm-switch .btn { flex: 1 1 50%; }
.nm-switch .btn:first-child { border-radius: 4px 0 0 4px; }
.nm-switch .btn:last-child { border-radius: 0 4px 4px 0; }
.nm-map-wrap { position: relative; margin-top: 12px; }
#nm-map { width: 100%; height: 70vh; min-height: 360px; z-index: 1; }
.nm-invite { position: absolute; z-index: 2; top: 50%; left: 16px; right: 16px; transform: translateY(-50%); margin: 0 auto; max-width: 420px; padding: 16px; background: #fff; border-radius: 10px; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.nm-page:not([data-state="empty"]) .nm-invite { display: none; }
#nm-message { position: absolute; z-index: 2; top: 12px; left: 16px; right: 16px; margin: 0 auto; max-width: 520px; }
.nm-page [hidden] { display: none !important; }
.nm-message-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nm-legend { position: absolute; z-index: 2; left: 12px; bottom: 12px; margin: 0; padding: 8px 12px; list-style: none; background: #fff; border-radius: 8px; font-size: 13px; box-shadow: 0 1px 6px rgba(0, 0, 0, .15); }
.nm-page[data-state="empty"] .nm-legend { display: none; }
.nm-legend-icon svg { width: 16px; height: 16px; fill: #911351; vertical-align: middle; }
.nm-card { position: absolute; z-index: 3; left: 0; right: 0; bottom: 16px; margin: 0 auto; width: 92%; max-width: 800px; background: #fff; border-radius: 10px; display: none; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); }
.nm-card.open { display: block; }
/* The filters modal offers to "search in other places": here the place is chosen on the page. */
.modal.ExperiencesSearchWidgetModal .subtitle, .modal.WineriesSearchWidgetModal .subtitle { display: none; }
.nm-content h2 { margin-top: 32px; }
.nm-step-number { display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; background: #911351; color: #fff; text-align: center; font-weight: 700; }
.nm-areas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (min-width: 992px) {
    .nm-title { font-size: 30px; }
    .nm-switch { flex: 0 1 420px; }
}

@media (max-width: 767px) {
    #nm-map { height: 62vh; }
    .nm-legend { font-size: 12px; }
    .nm-message-actions .btn { flex: 1 1 100%; }
}