/* Near me — Order food / Book a table (CR-044). Cards reuse .hc from style.css. */
.nm { padding-top: 20px; padding-bottom: 32px; }
.nm__title { font-family: var(--display); font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.nm__sub { margin: 0 0 16px; color: var(--muted); font-size: 1rem; line-height: 1.5; }

.nm__switch { display: inline-flex; padding: 4px; gap: 4px; background: var(--sky); border-radius: 14px; margin-bottom: 16px; }
.nm__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; color: var(--indigo); font-weight: 700; font-size: .95rem; text-decoration: none; }
.nm__opt:hover { background: #fff; }
.nm__opt[aria-current="true"] { background: var(--indigo); color: #fff; }
.nm__opt:focus-visible, .nm__locate:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }

.nm__where { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.nm__where[hidden] { display: none; }
.nm__locate { display: inline-flex; align-items: center; gap: 8px; }
.nm__alt { margin: 0; color: var(--muted); font-size: .95rem; }

.nm__status { margin: 0 0 16px; color: var(--ink); font-size: .95rem; line-height: 1.5; min-height: 1.5em; }
.nm__status a { color: var(--indigo); font-weight: 700; }

.hc__dist { font-weight: 700; color: var(--ink); }

.nm__empty { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.nm__empty h2 { font-family: var(--display); font-size: 1.25rem; color: var(--ink); margin: 0 0 .5rem; }
.nm__empty p { margin: 0 0 1.25rem; }
.nm__empty .btn { display: inline-flex; align-items: center; }

.nm-skel { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; padding-bottom: 16px; }
.nm-skel__photo { height: 160px; background: var(--sky); margin-bottom: 14px; }
.nm-skel__line { height: 14px; margin: 0 16px 10px; border-radius: 7px; background: var(--sky); }
.nm-skel__line--short { width: 55%; }
@media (prefers-reduced-motion: no-preference) {
  .nm-skel { animation: nm-pulse 1.2s ease-in-out infinite; }
}
@keyframes nm-pulse { 50% { opacity: .55; } }

@media (min-width: 640px) {
  .nm { padding-top: 32px; }
  .nm__title { font-size: 2.25rem; }
  .nm__where { flex-direction: row; align-items: center; gap: 14px; }
}
@media (max-width: 479px) {
  .nm__switch { display: flex; }
  .nm__opt { flex: 1; }
}