/* qmen.us — "Restaurantes perto de você" discovery map.
   Design language from the hifi handoff, adapted to real qmen.us data (brand colours
   come from each restaurant's logo; no ratings/cuisine/price — we don't have them).
   Everything is scoped under .discovery so it can't leak into the rest of the site.
   Colour/radius tokens are daisyUI "Taqueria" theme vars already on the page. */

/* base.html's <body> relies on the daisyUI `bg-base-200` utility, which isn't in the
   slim output.css this page loads (daisyUI-free) — restore the surface colour here.
   discovery.css only loads on the map page, so this stays scoped to it. */
body { background: var(--color-base-200); }

.discovery {
  --accent: var(--color-primary);
  --line: var(--color-base-300);
  --muted: oklch(46% 0.032 40);   /* secondary text — WCAG AA on the light surfaces */
  --muted2: color-mix(in oklab, var(--color-base-content) 52%, transparent);
  --shadow-card: 0 6px 20px -12px oklch(28% 0.05 33 / .4);
  --tx-xs: 12px; --tx-sm: 14px; --tx-base: 16px; --tx-lg: 18px; --tx-xl: 20px;

  display: flex;
  flex-direction: column;
  height: calc(100dvh - 4rem);          /* fill below the global navbar (h-16) */
  background: var(--color-base-200);
  color: var(--color-base-content);
  overflow: hidden;
}
.discovery *, .discovery *::before, .discovery *::after { box-sizing: border-box; }

/* ---------- Controls bar (search + filters), under the global navbar ---------- */
.disc-tools {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--color-base-100);
  border-bottom: 1px solid var(--line);
}
.disc-search { flex: 1 1 320px; position: relative; max-width: 520px; }
.disc-search .si {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: var(--muted); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.disc-search input {
  width: 100%; height: 44px; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0 18px 0 42px; font-family: var(--font-sans); font-size: var(--tx-base);
  background: var(--color-base-100); color: var(--color-base-content); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.disc-search input::placeholder { color: var(--muted2); }
.disc-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}

.geo {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 44px;
  padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--color-base-100); cursor: pointer; font-family: var(--font-sans);
  font-weight: 600; font-size: var(--tx-sm); color: var(--color-base-content);
  transition: border-color .12s, background .12s, transform .1s; white-space: nowrap;
}
.geo:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.geo:active { transform: translateY(1px); }
.geo.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--color-base-100)); color: var(--accent); }
.geo svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.geo.loading svg { animation: disc-spin 1s linear infinite; }
@keyframes disc-spin { to { transform: rotate(360deg); } }

.chip-toggle {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
  cursor: pointer; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--color-base-100); font-family: var(--font-sans); font-weight: 600;
  font-size: var(--tx-sm); color: var(--color-base-content); transition: all .12s;
}
.chip-toggle:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.chip-toggle.on { background: var(--accent); border-color: var(--accent); color: var(--color-primary-content); }
.chip-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(56% 0.14 155); }
.chip-toggle.on .dot { background: #fff; }

.dist-ctl {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--color-base-100);
  font-size: var(--tx-sm); font-weight: 600; color: var(--muted);
}
.dist-ctl input[type=range] { width: 92px; accent-color: var(--accent); }
.dist-ctl b { color: var(--color-base-content); font-variant-numeric: tabular-nums; min-width: 34px; }

.tool-spring { flex: 1 1 auto; }
.sortwrap { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tx-sm); color: var(--muted); }
.selctl { position: relative; display: inline-flex; align-items: center; }
.selctl select {
  appearance: none; height: 40px; padding: 0 34px 0 14px; border: 1.5px solid var(--line);
  border-radius: 999px; background: var(--color-base-100); color: var(--color-base-content);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--tx-sm); cursor: pointer; outline: none;
}
.selctl select:focus { border-color: var(--accent); }
.selctl .caret { position: absolute; right: 13px; pointer-events: none; width: 13px; height: 13px;
  stroke: var(--muted); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Body: list + map ---------- */
.disc-body { flex: 1 1 auto; display: grid; grid-template-columns: 420px 1fr; min-height: 0; }
.listpane { border-right: 1px solid var(--line); background: var(--color-base-200); display: flex; flex-direction: column; min-height: 0; }
.list-head { flex: 0 0 auto; padding: 13px 20px 9px; display: flex; align-items: baseline; justify-content: space-between; }
.list-head .lh-count { font-size: var(--tx-base); font-weight: 700; }
.list-head .lh-count b { color: var(--accent); }
.list-head .lh-loc { font-size: var(--tx-xs); color: var(--muted); }
.disc-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 12px 20px; display: flex; flex-direction: column; gap: 10px; }

/* card — brand gradient from the logo's two accent colours (fallback: brand palette) */
.rcard {
  --mono: var(--color-primary); --mono2: var(--color-secondary);
  display: flex; gap: 13px; width: 100%; text-align: left; padding: 12px; cursor: pointer;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--mono) 11%, var(--color-base-100)) 0%,
    color-mix(in oklab, var(--mono2) 14%, var(--color-base-100)) 100%);
  border: 1.5px solid var(--line); border-radius: var(--radius-box, .5rem);
  font-family: var(--font-sans); color: var(--color-base-content); text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .1s;
}
.rcard:hover, .rcard.hover { color: var(--color-base-content); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-card); }
.rcard:active { transform: translateY(1px); }
.rcard.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent), var(--shadow-card); }
.rcard[hidden] { display: none; }

.thumb {
  flex: 0 0 62px; width: 62px; height: 62px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--color-base-100);
  position: relative; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--mono) 32%, transparent);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .mono { font-weight: 800; font-size: 26px; color: var(--mono); letter-spacing: -.02em; }

.rbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rname { font-size: var(--tx-base); font-weight: 700; line-height: 1.2; }
.raddr { font-size: var(--tx-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfoot { display: flex; align-items: center; gap: 10px; margin-top: 1px; font-size: var(--tx-xs); flex-wrap: wrap; }
.rstatus { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.rstatus .dot { width: 7px; height: 7px; border-radius: 50%; }
.rstatus.open { color: oklch(48% 0.13 155); }
.rstatus.open .dot { background: oklch(56% 0.14 155); }
.rstatus.closed { color: color-mix(in oklab, var(--color-error) 80%, var(--color-base-content)); }
.rstatus.closed .dot { background: var(--color-error); }
.hrs { color: var(--muted); }
.dist { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; }
.dist:empty { display: none; }
.dist .i, .d-dist .i { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* empty */
.empty { text-align: center; padding: 50px 24px; color: var(--muted); }
.empty .ei { width: 40px; height: 40px; stroke: var(--muted2); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.empty .et { font-size: var(--tx-lg); font-weight: 700; color: var(--color-base-content); margin: 4px 0; }
.empty .ed { font-size: var(--tx-sm); margin: 0 0 16px; }
.disc-btn-ghost { border: 1.5px solid var(--line); background: var(--color-base-100); color: var(--color-base-content);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--tx-sm); height: 40px; padding: 0 18px;
  border-radius: var(--radius-btn, .25rem); cursor: pointer; }
.disc-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Map ---------- */
.mappane { position: relative; min-height: 0; }
.discovery #map { position: absolute; inset: 0; background: var(--color-base-300); z-index: 0; }
.discovery .leaflet-container { font-family: var(--font-sans); background: var(--color-base-300); }
.discovery .leaflet-control-zoom a { border-radius: 8px !important; color: var(--color-base-content) !important; }
.discovery .leaflet-bar { border: none !important; box-shadow: var(--shadow-card) !important; }

/* pins */
.pin-wrap { background: none; border: none; }
.pin { --pin: var(--color-primary); --pin2: var(--color-secondary);
  position: relative; width: 40px; height: 48px; cursor: pointer; transition: transform .15s ease; transform-origin: bottom center; }
.pin-body { position: absolute; top: 0; left: 3px; width: 34px; height: 34px; border-radius: 50% 50% 50% 4px;
  transform: rotate(45deg); background: var(--pin); box-shadow: 0 3px 8px -2px oklch(20% 0.05 33 / .5);
  display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--pin2, #fff); }
.pin-mono { transform: rotate(-45deg); color: #fff; font-weight: 800; font-size: 15px; }
.pin:hover, .pin.hover { transform: scale(1.12) translateY(-2px); z-index: 500; }
.pin.active { transform: scale(1.28) translateY(-3px); z-index: 600; }
.pin.active .pin-body { border-color: var(--color-secondary); box-shadow: 0 6px 16px -3px oklch(20% 0.05 33 / .6); }

/* user location dot */
.me { width: 18px; height: 18px; border-radius: 50%; background: #2b6fff; border: 3px solid #fff; box-shadow: 0 0 0 2px #2b6fff, 0 2px 6px rgba(0,0,0,.35); }

/* popup */
.discovery .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--shadow-card); }
.discovery .leaflet-popup-content { margin: 12px 14px; font-family: var(--font-sans); }
.pp-name { font-weight: 800; font-size: var(--tx-base); color: var(--color-base-content); }
.pp-meta { font-size: var(--tx-sm); color: var(--muted); margin-top: 3px; }
.pp-dist { font-size: var(--tx-xs); color: var(--accent); font-weight: 700; margin-top: 5px; }

/* map overlay: "você está aqui" */
.map-note { position: absolute; left: 16px; top: 16px; z-index: 400; background: var(--color-base-100);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: var(--tx-xs);
  font-weight: 600; color: var(--muted); box-shadow: var(--shadow-card); display: none; align-items: center; gap: 7px; }
.map-note.show { display: inline-flex; }
.map-note .md { width: 8px; height: 8px; border-radius: 50%; background: #2b6fff; }

/* ---------- Detail panel ---------- */
.detail {
  --mono: var(--color-primary); --mono2: var(--color-secondary);
  position: absolute; right: 16px; top: 16px; bottom: 16px; width: 336px; z-index: 450;
  background: var(--color-base-100); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -24px oklch(20% 0.05 33 / .5); display: flex; flex-direction: column;
  transform: translateX(calc(100% + 24px)); opacity: 0;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s; pointer-events: none;
}
.detail.show { transform: translateX(0); opacity: 1; pointer-events: auto; }

.d-hero { padding: 18px; border-bottom: 1px solid var(--line); position: relative; border-radius: 16px 16px 0 0;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--mono) 12%, var(--color-base-100)) 0%,
    color-mix(in oklab, var(--mono2) 16%, var(--color-base-100)) 100%); }
.d-close { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--color-base-200); color: var(--color-base-content); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.d-close:hover { background: var(--color-base-300); }
.d-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.d-headrow { display: flex; gap: 13px; align-items: center; padding-right: 34px; }
.d-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--color-base-100); position: relative; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--mono) 32%, transparent); }
.d-thumb img { width: 100%; height: 100%; object-fit: cover; }
.d-thumb .mono { font-weight: 800; font-size: 24px; color: var(--mono); }
.d-name { display: block; font-size: var(--tx-xl); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.d-meta { display: block; font-size: var(--tx-sm); color: var(--muted); margin-top: 3px; }

.d-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.d-status { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: var(--tx-sm); font-weight: 700;
  padding: 6px 12px; border-radius: 999px; }
.d-status .dot { width: 8px; height: 8px; border-radius: 50%; }
.d-status.open { color: oklch(42% 0.12 155); background: color-mix(in oklab, oklch(56% 0.14 155) 14%, transparent); }
.d-status.open .dot { background: oklch(56% 0.14 155); }
.d-status.closed { color: var(--color-error); background: color-mix(in oklab, var(--color-error) 12%, transparent); }
.d-status.closed .dot { background: var(--color-error); }
.d-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: var(--tx-xs); font-weight: 600; color: var(--muted); background: var(--color-base-200);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.d-info { display: flex; flex-direction: column; gap: 11px; }
.d-info .row { display: flex; gap: 11px; align-items: flex-start; font-size: var(--tx-sm); }
.d-info .row svg { flex: 0 0 18px; width: 18px; height: 18px; stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.d-info .row .v { color: var(--color-base-content); }
.d-info .row.hide { display: none; }
.d-dist { display: inline-flex; align-items: center; gap: 5px; }

.d-foot { flex: 0 0 auto; padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.d-cta { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  border: none; border-radius: var(--radius-btn, .25rem); background: var(--accent); color: var(--color-primary-content);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--tx-base); cursor: pointer;
  box-shadow: 0 1px 2px oklch(0% 0 0 / .12); transition: box-shadow .12s, transform .1s; text-decoration: none; }
.d-cta:hover { box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 38%, transparent); color: var(--color-primary-content); }
.d-cta:active { transform: translateY(1px); }
.d-cta svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Toast ---------- */
.discovery-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 1200;
  background: var(--color-neutral); color: var(--color-neutral-content); padding: 12px 20px; border-radius: 999px;
  font-size: var(--tx-sm); font-weight: 600; box-shadow: 0 12px 30px -10px oklch(20% 0.05 33 / .5);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.discovery-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mobile segmented toggle (hidden on desktop) ---------- */
.mobile-seg { display: none; }

@media (max-width: 880px) {
  .discovery { height: auto; overflow: visible; }
  .disc-tools { position: sticky; top: 4rem; z-index: 30; }
  .disc-body { display: block; position: relative; }
  .listpane, .mappane { border: none; }
  .discovery[data-mobile="list"] .mappane { display: none; }
  .discovery[data-mobile="map"] .listpane { display: none; }
  .listpane { height: auto; }
  .disc-list { height: auto; overflow: visible; }
  .mappane { height: calc(100dvh - 4rem - 120px); }
  .detail { width: auto; left: 12px; right: 12px; top: auto; height: 58%; }
  .tool-spring, .sortwrap .lbl { display: none; }

  .mobile-seg { display: inline-flex; position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 800;
    background: var(--color-base-100); border: 1px solid var(--line); border-radius: 999px; padding: 4px;
    box-shadow: var(--shadow-card); gap: 2px; }
  .mobile-seg button { border: none; background: none; font-family: var(--font-sans); font-weight: 700; font-size: var(--tx-sm);
    color: var(--muted); padding: 9px 20px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
  .mobile-seg button.on { background: var(--accent); color: var(--color-primary-content); }
  .mobile-seg button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
}