/* The two map pages — Nearby Needs (/) and Open Spots (/business).
   One system: the map is the page, a panel floats on it, a filter bar
   (includes/map_filters.php) narrows both the pins and the list.
   Moved out of business.php on 2026-09-21 when the homepage joined it. */
/* The map is the page: full-width behind everything, the panel floats on it.
   The site-wide uniformity layer pads a page's first block and spaces its
   siblings; none of that applies to a map, so it is switched off here. */
main.os > div:first-child, main.os > div + div { padding-top: 0 !important; margin-top: 0 !important; }
main.os { padding-bottom: 0 !important; }
/* `hidden` must beat the display values below (the cards are grids). */
.os [hidden], .os-roster [hidden] { display: none !important; }
.os { position: relative; min-height: calc(100vh - 68px); background: var(--blue-pale); padding: 0 !important; margin: 0; max-width: none !important; }
.os-map { position: absolute; inset: 0; z-index: 1; }
.os-map .leaflet-control-zoom { margin-right: 18px; margin-top: 18px; }
.os-panel {
  position: relative; z-index: 500; width: 460px; max-width: calc(100% - 32px);
  margin: 22px 0 22px 22px; max-height: calc(100vh - 68px - 44px); display: flex; flex-direction: column;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 18px 44px rgba(7,21,43,.18);
  padding: 22px 20px 16px;
}
.os-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--blue-light); font-size: 11.5px; font-weight: 700; letter-spacing: 2px; }
.os-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-light); }
.os-h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.04; letter-spacing: -.6px; color: var(--ink); margin: 8px 0 8px; font-variant-numeric: lining-nums; }
.os-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.os-sub a, .os-foot a { color: var(--blue); font-weight: 600; }
.os-flash { border-radius: 12px; padding: 10px 13px; font-size: 13.5px; font-weight: 500; margin-bottom: 10px; }
.os-flash.is-ok { background: #E6F7EE; color: #17643F; } .os-flash.is-bad { background: #FDF1F1; color: #9B2C2C; }
.os-loc { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); margin-bottom: 10px; flex-wrap: wrap; }
.os-loc svg { color: var(--muted); }
.os-link { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.os-locpop { margin: 0 0 10px; }
.os-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.os-chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.os-chip em { font-style: normal; opacity: .55; margin-left: 3px; }
.os-chip.on { background: var(--glass); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.os-chip.on em { opacity: .75; }
.os-chip.is-quiet:not(.on) { color: var(--muted); }
.os-focus { background: var(--blue-pale); border-radius: 12px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.os-list { overflow-y: auto; margin: 0 -6px; padding: 2px 6px 4px; flex: 1 1 auto; min-height: 120px; }
.os-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; background: #fff;
  border: 1px solid var(--border); border-radius: 18px; padding: 12px; margin-bottom: 9px; transition: box-shadow .15s, border-color .15s; }
.os-card:hover, .os-card.is-hot { box-shadow: var(--shadow); border-color: var(--blue-soft); }
.os-g { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--glass); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.os-g svg { width: 20px; height: 20px; }
.os-top1 { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.os-tag { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: var(--blue-light); background: var(--blue-pale); border-radius: 7px; padding: 2px 7px; text-transform: uppercase; }
.os-when { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.os-card h3 { margin: 0 0 3px; font-size: 15px; font-weight: 650; color: var(--ink); line-height: 1.25; }
.os-by { margin: 0; font-size: 12px; color: var(--muted); }
.os-by a { color: var(--ink); font-weight: 600; }
.os-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.os-price { font-size: 17px; font-weight: 700; color: var(--ink); }
.os-book { padding: 8px 18px; font-size: 13px; border-radius: 14px; }
.os-empty { text-align: center; padding: 26px 10px; border: 1px dashed var(--border); border-radius: 18px; background: linear-gradient(180deg,#fff,var(--bg)); }
.os-empty h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 0 0 6px; }
.os-empty p { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.os-foot { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; text-align: center; }
.os-stats { position: absolute; z-index: 500; right: 22px; bottom: 22px; display: flex; gap: 18px; align-items: center;
  background: var(--panel); color: #fff; border-radius: 18px; padding: 13px 20px; box-shadow: 0 12px 30px rgba(7,21,43,.28); }
.os-stats div { display: flex; flex-direction: column; line-height: 1.1; }
.os-stats b { font-family: var(--serif); font-size: 26px; font-weight: 600; font-variant-numeric: lining-nums; }
.os-stats span { font-size: 11.5px; color: #B9C8DD; }

/* Pins: one per artist or salon — service glyph, how many spots, from what price. */
.os-pin { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 6px 11px 6px 6px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(7,21,43,.16); white-space: nowrap; font-family: var(--sans); cursor: pointer; }
.os-pin .g { width: 30px; height: 30px; border-radius: 50%; background: var(--glass); display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.os-pin .g svg { width: 16px; height: 16px; }
.os-pin b { display: block; font-size: 12px; color: var(--ink); line-height: 1.15; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.os-pin small { display: block; font-size: 11px; color: var(--muted); }
.os-pin small strong { color: var(--ink); }
.os-pin.is-on { border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgba(22,131,247,.2), 0 8px 20px rgba(7,21,43,.2); }
.leaflet-div-icon { background: transparent; border: 0; }
.os-you { width: 18px; height: 18px; border-radius: 50%; background: var(--blue-light); border: 3px solid #fff; box-shadow: 0 0 0 10px rgba(22,131,247,.16), 0 2px 6px rgba(7,21,43,.3); }
.os-clu { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px;
  background: var(--glass); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(22,131,247,.14), 0 8px 18px rgba(7,21,43,.28); }

/* Roster under the map */
.os-roster { max-width: 1180px; margin: 0 auto; padding: 34px 20px 10px; }
.os-roster h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
.os-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.os-prov { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm); }
.os-prov-id { display: flex; gap: 11px; align-items: center; color: var(--ink); }
.os-prov-id b { display: block; font-size: 14.5px; } .os-prov-id small { color: var(--muted); font-size: 12px; }
.os-prov-logo { width: 42px; height: 42px; border-radius: 12px; background: var(--blue-100); color: var(--ink-soft); display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: 0 0 auto; }
.os-prov-logo img { width: 100%; height: 100%; object-fit: cover; }
.os-star { color: #E5A91A; }
.os-prov-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* Phones: the map on top, the list under it. */
@media (max-width: 860px) {
  .os { min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
  .os-map { position: relative; inset: auto; height: 46vh; min-height: 300px; order: 0; }
  .os-panel { width: auto; max-width: none; margin: -26px 12px 12px; max-height: none; order: 1; padding: 18px 14px 14px; }
  .os-list { overflow: visible; }
  .os-stats { position: static; order: 2; margin: 0 12px 12px; justify-content: space-around; }
  .os-h1 { font-size: 28px; }
  .os-card { grid-template-columns: 40px minmax(0,1fr); }
  .os-g { width: 40px; height: 40px; }
  .os-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ── Filter bar (includes/map_filters.php) ── */
.mf { position: relative; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mf .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The service chip holds the longest label on the row ("Hair extensions",
   "My services"), so it gets room to say it and the row wraps rather than
   cutting it to "My servi…" (owner, 2026-10-02). */
.mf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.mf select, .mf-svc, .mf-q { height: 42px; border: 1px solid var(--border); background: #fff; border-radius: 13px; font: inherit; font-size: 13.5px; color: var(--ink); }
.mf select { padding: 0 30px 0 12px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23617087' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center; }
.mf select:focus, .mf-q:focus-within, .mf-svc:focus-visible { outline: 0; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(22,131,247,.15); }
.mf-svc { flex: 1 1 auto; min-width: 186px; display: flex; align-items: center; gap: 9px; padding: 0 12px 0 6px; cursor: pointer; font-weight: 650; text-align: left; }
.mf-svc .mf-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: var(--blue-pale); }
.mf-svc.is-set .mf-ic { color: #fff; background: var(--glass); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.mf-svc .mf-ic svg { width: 17px; height: 17px; }
.mf-lab { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-n { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--blue-pale); border-radius: 999px; padding: 2px 8px; }
.mf-chev { color: var(--muted); flex: 0 0 auto; }
.mf-when { flex: 0 0 auto; } .mf-when select { width: 132px; }
.mf-q { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--muted); }
.mf-q input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); width: 100%; min-width: 0; }
.mf-sort, .mf-extra { flex: 0 0 auto; }
.mf-pop { position: absolute; z-index: 20; top: 48px; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(7,21,43,.2); padding: 12px; }
.mf-pop-h { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin: 2px 4px 10px; }
.mf-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.mf-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; border: 1px solid transparent; border-radius: 14px;
  background: var(--bg); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.15; text-align: center; }
.mf-t:hover { border-color: var(--blue-100); background: var(--blue-pale); }
.mf-t .mf-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--glass); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.mf-t .mf-ic svg { width: 18px; height: 18px; }
.mf-t em { position: absolute; top: 5px; right: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.mf-t.is-quiet { color: var(--muted); } .mf-t.is-quiet .mf-ic { opacity: .45; }
.mf-t.on { background: #fff; border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgba(22,131,247,.14); }

/* ── Nearby Needs cards: a photo instead of the glyph ── */
.os-th { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; background: var(--blue-pale); }
.os-card.nn { grid-template-columns: 60px minmax(0,1fr) auto; }
.os-tag.sample { color: #7A5A12; background: #FBF3E1; }
.os-ago { font-size: 11.5px; color: var(--muted); }
.os-note { margin: 0 0 3px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-price small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: right; letter-spacing: .3px; }
.os-card .glass { padding: 8px 14px; font-size: 12.5px; border-radius: 14px; }
.os-eyebrow.is-sample { color: var(--muted); } .os-eyebrow.is-sample i { background: #C9A24B; }

/* "Post it in 3 easy steps" — kept at the top of the Nearby panel for customers. */
.os-quick { background: var(--panel); color: #fff; border-radius: 18px; padding: 13px 12px 11px; margin-bottom: 12px; }
.os-quick-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 10px; }
.os-quick-h b { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.05; font-variant-numeric: lining-nums; }
.os-quick-h span { font-size: 11.5px; color: #B9C8DD; white-space: nowrap; }
.os-quick-g { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 6px 4px; }
.os-qt { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1.1; text-align: center; }
.os-qt i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); background: linear-gradient(180deg,#fff,#EAF5FF); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(0,0,0,.18); transition: transform .15s; }
.os-qt i svg { width: 18px; height: 18px; }
.os-qt:hover i { transform: translateY(-2px); }
.os-teaser { background: var(--panel); color: #fff; border-radius: 18px; padding: 18px; margin-bottom: 12px; }
.os-teaser h3 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0 0 6px; }
.os-teaser p { color: #B9C8DD; margin: 0 0 12px; font-size: 13.5px; }
.os-stats .os-live { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; color: #fff; }
.os-stats .os-live i { width: 9px; height: 9px; border-radius: 50%; background: #34D17A; box-shadow: 0 0 0 4px rgba(52,209,122,.18); }
.os-stats .os-up { font-family: var(--serif); font-size: 24px; font-weight: 600; color: #7CC2FF; }
.os-stats a { color: #fff; font-weight: 600; font-size: 13px; }
.os-clu small { display: block; font-size: 8px; font-weight: 600; letter-spacing: .6px; opacity: .75; margin-top: -3px; text-align: center; }

@media (max-width: 860px) {
  .os-card.nn { grid-template-columns: 52px minmax(0,1fr); }
  .os-th { width: 52px; height: 52px; }
  .mf-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .os-quick-g { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px 4px; }
}
@media (max-width: 420px) {
  .mf-when select { width: 112px; }
  .mf-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ── Compact panel (2026-09-21, "less is more"): a short title, one filter
      row, slim cards — so the list shows as many services as it can. ── */
.os-panel { width: 400px; padding: 16px 14px 10px; }
.os-h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.3px; }
.os-loc { font-size: 12.5px; margin-bottom: 10px; gap: 5px; }
.mf { gap: 6px; margin-bottom: 10px; }
.mf-row { gap: 6px; }
.mf select, .mf-svc, .mf-q { height: 38px; border-radius: 12px; font-size: 13px; }
.mf select { padding: 0 26px 0 10px; background-position: right 9px center; }
.mf-svc { padding: 0 10px 0 5px; gap: 7px; min-width: 170px; }
.mf-svc .mf-ic { width: 28px; height: 28px; }
.mf-svc .mf-ic svg { width: 15px; height: 15px; }
.mf-n { font-size: 11px; padding: 1px 7px; }
.mf-when select { width: auto; }
.mf-pop { top: 44px; }
.os-list { margin: 0 -4px; padding: 2px 4px 4px; }
.os-card, .os-card.nn { grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; padding: 9px 10px; border-radius: 14px; margin-bottom: 6px; }
.os-g { width: 36px; height: 36px; }
.os-g svg { width: 17px; height: 17px; }
.os-th { width: 36px; height: 36px; border-radius: 10px; }
.os-card h3 { font-size: 14px; margin: 0 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-card h3 .os-tag { font-size: 9px; padding: 1px 5px; vertical-align: 2px; }
.os-card .os-when { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.os-by { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-side { flex-direction: row; align-items: center; gap: 8px; }
.os-price { font-size: 15px; }
.os-book, .os-card .glass { padding: 6px 12px; font-size: 12px; border-radius: 11px; }
.os-card .glass .arw { display: none; }
.os-foot { font-size: 12px; margin-top: 6px; }
.os-quick { padding: 10px 10px 9px; border-radius: 14px; margin-bottom: 10px; }
.os-quick-h { margin: 0 2px 7px; }
.os-quick-h b { font-size: 17px; }
.os-quick-g { gap: 5px 3px; }
.os-qt { font-size: 9.5px; gap: 3px; }
.os-qt i { width: 30px; height: 30px; border-radius: 10px; }
.os-qt i svg { width: 15px; height: 15px; }
.os-stats { padding: 10px 16px; gap: 14px; }
.os-stats b { font-size: 22px; }
@media (max-width: 860px) {
  .os-panel { width: auto; padding: 14px 12px 10px; }
  .os-card, .os-card.nn { grid-template-columns: 36px minmax(0,1fr) auto; }
  .os-side { grid-column: auto; }
  .os-h1 { font-size: 24px; }
}
@media (max-width: 400px) {
  .os-card, .os-card.nn { grid-template-columns: 36px minmax(0,1fr); }
  .os-side { grid-column: 1 / -1; justify-content: flex-end; }
}
.mf-svc { min-width: 150px; }
.mf-when, .mf-sort, .mf-extra { flex: 0 1 auto; min-width: 0; }
.mf-when select, .mf-sort select, .mf-extra select { max-width: 112px; }

/* "Your services" first, the rest folded under "Other services". */
.mf-pop { max-height: min(70vh, 560px); overflow-y: auto; }
.mf-more { margin-top: 10px; }
.mf-more summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin: 2px 4px 10px; }
.mf-more summary::-webkit-details-marker { display: none; }
.mf-more summary::after { content: ' ▾'; }
.mf-more[open] summary::after { content: ' ▴'; }
.mf-svc { min-width: 168px; }
/* Fair draw: a spot posted minutes ago goes to a draw, not the fastest tap (includes/fair.php). */
.os-drawn { font-size: 11.5px; font-weight: 800; color: #17803F; background: #E8F7EF; border-radius: 99px; padding: 5px 10px; white-space: nowrap; }
@media (max-width: 440px) { .mf-svc { min-width: 0; } .mf-when select, .mf-sort select, .mf-extra select { max-width: 96px; } }

/* A pin that would sit on top of another shrinks to its glyph (see declutter()
   in map-filters.js). Point at it, or select it, and it opens again. */
.os-pin.is-mini { padding: 6px; gap: 0; }
.os-pin.is-mini > span:last-child { display: none; }
.os-pin.is-mini:hover, .os-pin.is-mini:focus-within, .os-pin.is-mini.is-on { padding: 6px 11px 6px 6px; gap: 8px; }
.os-pin.is-mini:hover > span:last-child,
.os-pin.is-mini:focus-within > span:last-child,
.os-pin.is-mini.is-on > span:last-child { display: block; }
/* Whatever you are pointing at goes above its neighbours. */
.leaflet-marker-icon:hover { z-index: 650 !important; }
.leaflet-marker-icon:has(.os-pin.is-on) { z-index: 660 !important; }

/* The panel is a flex column with a scrolling list and notes underneath. The
   notes could be squeezed by the list, so the last card looked sliced off.
   Pin the notes, give the list room to breathe, and fade its bottom edge so it
   is obvious there is more to scroll. */
.os-panel > .os-foot { flex: 0 0 auto; }
.os-list { padding-bottom: 12px; }
@media (min-width: 861px) {
  .os-list { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
                     mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); }
}

/* The popup a pin opens (index.php nnPopup, business.php osPopup). Its button
   sets its own colours with !important: Leaflet styles every link inside the
   map as `.leaflet-container a { color: #0078A8 }`, which would otherwise turn
   white button text blue. */
.nn-pop .leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 12px 30px rgba(7,21,43,.22); }
.nn-pop .leaflet-popup-content { margin: 14px 16px; min-width: 170px; }
.nn-pop-in { font-family: var(--sans); color: var(--ink); }
.nn-pop-in b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; }
.nn-pop-in small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.nn-pop-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  background: #FFF4DA; color: #8A6410; border-radius: 99px; padding: 2px 8px; margin-bottom: 6px; }
.nn-pop-in .nn-pop-go { display: block; margin-top: 10px; text-align: center; background: var(--glass);
  color: #fff !important; text-decoration: none !important; border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 13px; }
.nn-pop-in .nn-pop-go:hover { filter: brightness(1.12); }
.nn-pop-list { margin: 8px 0 0; padding: 0; list-style: none; }
.nn-pop-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--border); }
.nn-pop-list li span { color: var(--muted); }

/* The second line in a business popup: book what they have, or ask for what you
   want. Quieter than the main button so the booking stays the obvious tap. */
.nn-pop-ask {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  color: #1683F7 !important;
}

/* "How open spots work" — the same three cards as /how-it-works, so the two
   pages explain the site in one visual language (owner, 2026-10-02). */
.os-how { max-width: 1180px; margin: 0 auto; padding: 30px 20px 4px; }
.os-how h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 16px; color: var(--ink); }
.os-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.os-how-step { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 18px;
               padding: 16px 18px 20px; box-shadow: 0 6px 20px rgba(13, 43, 85, .05); }
.os-how-pic { background: #F8FBFF; border-radius: 12px; padding: 6px; margin-bottom: 12px; }
.os-how-pic svg { display: block; width: 100%; height: auto; max-height: 160px; }
.os-how-num { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 50%;
              background: var(--ink); color: #fff; font: 800 14px/28px Inter, sans-serif; text-align: center; }
.os-how-step h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 6px; font-family: Inter, sans-serif; }
.os-how-step p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
@media (max-width: 860px) {
  .os-how-steps { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .os-how h2 { font-size: 25px; text-align: center; }
}
.os-how-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; }
.os-how-go .os-link { font-size: 14px; }

/* Under Book: answer the spot with your own number instead of taking theirs. */
.os-offer { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600;
            text-align: center; color: var(--blue); text-decoration: underline; }

/* ── Open Spots, one at a time ──────────────────────────────────────────────
   The same cards the list uses, shown singly: a bigger card, Hide underneath,
   and the card's own Book button relabelled Accept. */
.os-mode { display: flex; gap: 6px; margin: 0 0 10px; }
.os-mode button { flex: 1; padding: 7px 10px; font: 600 13px/1.2 Inter, sans-serif; color: var(--muted);
                  background: #fff; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.os-mode button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.os-list.is-deck .os-card.is-current { box-shadow: 0 10px 28px rgba(13, 43, 85, .12); border-color: #CFE6FF; }
.os-list.is-deck .os-card.is-current .os-body h3 { font-size: 17px; }
.os-deck-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.os-hide { padding: 9px 16px; font: 700 13px/1 Inter, sans-serif; color: var(--muted);
           background: #fff; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.os-hide:hover { color: var(--navy); border-color: #CFE6FF; }
.os-deck-left { font-size: 12.5px; color: var(--muted); }
.os-deck-done { text-align: center; padding: 18px 10px 6px; }
.os-deck-done h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 6px; color: var(--ink); }
.os-deck-done p { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.os-deck-done .os-link { display: inline-block; margin-top: 10px; background: none; border: 0; cursor: pointer; }

/* Take the posted price, there and then. Same shape as Offer beside it; green,
   because it is the one that finishes rather than starts a conversation. */
.os-take { background: #16a34a; color: #fff; border: 0; box-shadow: 0 4px 14px rgba(22,163,74,.25); }
.os-take:hover { background: #15803d; }
.os-side form + .os-book { margin-top: 5px; }