/* GoFindAll — the search interface of design/GoFindAll Search UI.dc.html as classes. Paper #FBF7EE, ink #101436,
   blue #1A2BD9, coral #FF6B57, muted #5F6384. Arabic first (RTL), MapLibre underneath everything. */
:root { --paper: #FBF7EE; --ink: #101436; --blue: #1A2BD9; --coral: #FF6B57; --muted: #5F6384; --line: rgba(16,20,54,.12); --line2: rgba(16,20,54,.25);
        --sans: 'IBM Plex Sans Arabic', 'Instrument Sans', sans-serif; --mono: 'JetBrains Mono', monospace; --display: 'Syne', sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: var(--blue); text-decoration: none; } a:hover { color: var(--ink); }
button { font-family: inherit; }
[hidden] { display: none !important; }

.app { position: relative; width: 100%; height: 100vh; min-height: 640px; overflow: hidden; }
.map { position: absolute; inset: 0; z-index: 0; }
.map .maplibregl-canvas { outline: none; }
.map--dark .maplibregl-canvas { filter: invert(1) hue-rotate(195deg) saturate(.4) brightness(.92) contrast(.95); }
.map--light .maplibregl-canvas { filter: saturate(.7) contrast(.95); }
.maplibregl-ctrl-group { border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; background: var(--paper) !important; }
.maplibregl-ctrl-group button { border-radius: 0 !important; }
.maplibregl-ctrl-group button + button { border-top: 2px solid var(--ink) !important; }
.maplibregl-ctrl-attrib { background: rgba(251,247,238,.92) !important; font: 400 10px/1.4 var(--mono) !important; color: var(--muted) !important; padding: 3px 6px !important; }
.maplibregl-ctrl-attrib a { color: var(--blue) !important; }
.maplibregl-ctrl-bottom-left { z-index: 5; }

/* ---------- brand */
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.brand--top-right { position: absolute; top: 18px; right: 24px; cursor: default; }
.wordmark { font: 800 15px/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.wordmark span { color: var(--coral); }
.toplinks { display: flex; gap: 16px; align-items: center; font: 500 13px/1 var(--sans); color: var(--muted); flex: none; }
.toplinks a { color: var(--blue); }
.toplinks--landing { position: absolute; top: 22px; left: 24px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: 500 13px/1 var(--sans); }
.linkbtn:hover { color: var(--ink); }

/* ---------- landing */
.landing { position: absolute; inset: 0; z-index: 1200; background: rgba(251,247,238,.84); overflow: auto; }
.landing__body { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 72px 24px 64px; }
.logo { display: block; direction: ltr; }
.logo text { font: 800 40px var(--display); }
.logo .logo__nd { font: 800 34px var(--display); letter-spacing: -.02em; }
.logo__g { animation: gidraw2 4.5s ease-in-out infinite; }
.logo__words { animation: gifade 4.5s ease-in-out infinite; }
.logo__dot { transform-box: fill-box; transform-origin: center; animation: gipop 4.5s ease-in-out infinite; }
@keyframes gidraw2 { 0% { stroke-dashoffset: 340 } 50% { stroke-dashoffset: 0 } 82% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -340 } }
@keyframes gifade { 0%, 42% { opacity: 0 } 56%, 82% { opacity: 1 } 100% { opacity: 0 } }
@keyframes gipop { 0%, 52% { transform: scale(0) } 62%, 80% { transform: scale(1) } 100% { transform: scale(0) } }
@keyframes gfpulse { 0% { transform: scale(.5); opacity: .9 } 100% { transform: scale(2.4); opacity: 0 } }
.hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 720px; }
.hero__title { font: 700 38px/1.3 var(--sans); letter-spacing: -.01em; text-wrap: pretty; }
.hero__title span { color: var(--coral); }
.hero__sub { font: 400 16px/1.7 var(--sans); color: var(--muted); max-width: 560px; text-wrap: pretty; }
.landing__foot { position: absolute; bottom: 18px; right: 24px; left: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; font: 400 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }

/* ---------- search box + dropdown */
.searchwrap { position: relative; width: 100%; max-width: 720px; }
.searchwrap--top { flex: 1; min-width: 0; max-width: 640px; margin: 0 auto; }
.searchbox { display: flex; align-items: center; background: #fff; border: 2px solid var(--ink); }
.searchbox--lg { gap: 14px; height: 68px; padding: 0 12px; box-shadow: 8px 8px 0 var(--blue); }
.searchbox--sm { gap: 10px; height: 44px; padding: 0 6px 0 10px; }
.searchbox__g { flex: none; }
.searchbox__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 20px/1 var(--sans); color: var(--ink); }
.searchbox--sm .searchbox__input { font-size: 15px; }
.searchbox__go { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--coral); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.searchbox__go:hover { background: var(--ink); }
.searchbox__go--sm { width: 30px; height: 30px; }
.drop { position: absolute; top: calc(100% + 10px); right: 0; left: 0; background: #fff; border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(16,20,54,.12); z-index: 1300; overflow: hidden; }
.searchwrap--top .drop { top: calc(100% + 8px); }
.drop__header { padding: 10px 16px 4px; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--coral); }
.drop__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-top: 1px solid rgba(16,20,54,.08); }
.drop__row:hover, .drop__row.is-active { background: var(--paper); }
.drop__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: none; }
.drop__t { flex: 1; min-width: 0; font: 500 15px/1.3 var(--sans); }
.searchwrap--top .drop__t { font-size: 14px; }
.drop__c { font: 500 11px/1 var(--sans); padding: 4px 8px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.drop__n { font: 500 12px/1 var(--mono); color: var(--muted); min-width: 72px; text-align: left; white-space: nowrap; }
.drop__none { padding: 14px 16px; font: 400 13px/1.5 var(--sans); color: var(--muted); border-top: 1px solid rgba(16,20,54,.08); }
.drop__foot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--paper); border-top: 1px solid rgba(16,20,54,.08); font: 400 10px/1.4 var(--mono); color: var(--muted); letter-spacing: .06em; }

/* ---------- scopes, radius, chips */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; width: 100%; max-width: 720px; }
.controls--side { gap: 12px 16px; max-width: none; }
.scopes { display: flex; gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
.scope { position: relative; padding: 10px 14px; cursor: pointer; background: #fff; border: 0; font: 600 13px/1 var(--sans); white-space: nowrap; color: var(--ink); }
.scopes--sm .scope { padding: 9px 12px; font-size: 12px; }
.scope.is-active { background: var(--ink); color: var(--paper); }
.radius { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.radius--sm { gap: 10px; min-width: 150px; }
.radius__range { flex: 1; min-width: 0; accent-color: var(--blue); cursor: pointer; }
.radius__label { font: 700 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 72px; }
.radius--sm .radius__label { font-size: 13px; min-width: 64px; }
.placepick select { font: 500 13px/1 var(--sans); padding: 8px 10px; border: 2px solid var(--ink); background: #fff; color: var(--ink); max-width: 260px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; max-width: 720px; font: 500 13px/1 var(--sans); }
.chips__lead { color: var(--muted); margin-inline-end: 4px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(16,20,54,.3); background: rgba(255,255,255,.7); cursor: pointer; margin-inline-end: 8px; margin-bottom: 8px; font: inherit; color: inherit; }
.chip:hover { border-color: var(--ink); background: #fff; }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.locnote { font: 400 12px/1.5 var(--sans); color: var(--muted); max-width: 720px; width: 100%; }
.locnote button { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; font: inherit; }

/* ---------- results */
.topbar { position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 1200; background: var(--paper); border-bottom: 2px solid var(--ink); display: flex; align-items: center; gap: 20px; padding: 0 20px; }
.sidebar { position: absolute; top: 66px; right: 0; bottom: 0; width: min(420px, 50%); z-index: 1200; background: var(--paper); border-left: 2px solid var(--ink); display: flex; flex-direction: column; }
.sidebar__head { padding: 18px 20px 0; display: flex; flex-direction: column; gap: 14px; border-bottom: 2px solid var(--ink); }
.res-title { font: 700 18px/1.35 var(--sans); text-wrap: pretty; }
.res-scope { font: 400 13px/1.5 var(--sans); color: var(--muted); margin-top: 4px; }
.corrected { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; background: #fff; border: 1px solid var(--line2); font: 400 12px/1.5 var(--sans); color: var(--muted); }
.corrected s { color: var(--muted); }
.corrected button { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; font: inherit; }
.sorts-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.sorts { display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--sans); }
.sorts [data-sorts] { display: inline-flex; align-items: center; gap: 14px; }
.sorts__lead { color: var(--muted); }
.sort { position: relative; background: none; border: 0; padding: 0 0 8px; cursor: pointer; color: var(--muted); font: 500 12px/1 var(--sans); }
.sort.is-active { color: var(--ink); font-weight: 700; }
.sort.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--coral); }
.rank-formula { font: 400 10px/1 var(--mono); letter-spacing: .04em; color: var(--muted); padding-bottom: 9px; }
.hint { display: flex; align-items: flex-start; gap: 10px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.hint__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex: none; margin-top: 5px; }
.hint__text { flex: 1; min-width: 0; font: 400 13px/1.55 var(--sans); text-wrap: pretty; }
.hint__lead { font-weight: 600; }
.hint__btn { flex: none; padding: 7px 12px; border: 0; background: var(--blue); color: var(--paper); font: 600 12px/1 var(--sans); cursor: pointer; }
.hint__btn:hover { background: var(--ink); }
.list { flex: 1; min-height: 0; overflow: auto; }
.card { position: relative; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.card:hover { background: #fff; }
.card.is-selected { background: #fff; }
.card.is-selected::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: var(--blue); }
.card__row { display: flex; align-items: flex-start; gap: 12px; }
.card__rank { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); font: 700 12px/1 var(--mono); background: var(--paper); }
.card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card__name { font: 700 15px/1.35 var(--sans); min-width: 0; }
.card__price { font: 700 18px/1 var(--sans); color: var(--coral); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card__price s { font-size: 12px; color: var(--muted); margin-inline-end: 6px; }
.card__item { font: 400 13px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }
.card__meta { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.card__meta .sep { color: var(--muted); }
.card__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag { font: 500 11px/1 var(--sans); padding: 4px 8px; border: 1px solid rgba(16,20,54,.3); }
.card__upd { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; font: 400 10px/1 var(--mono); color: var(--muted); letter-spacing: .03em; white-space: nowrap; }
.card__upd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.card__details { font: 400 12px/1.6 var(--sans); color: var(--muted); border-top: 1px dashed var(--line2); margin-top: 6px; padding-top: 6px; }
.card__details a { color: var(--blue); }
.list__empty { padding: 32px 20px; font: 400 14px/1.6 var(--sans); color: var(--muted); text-align: center; }
.sidebar__foot { padding: 12px 20px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 400 11px/1.5 var(--sans); color: var(--muted); }

/* ---------- map markers */
.mk-user { position: relative; width: 18px; height: 18px; cursor: grab; }
.mk-user__pulse { position: absolute; inset: -8px; border-radius: 50%; background: rgba(26,43,217,.28); animation: gfpulse 2.2s ease-out infinite; }
.mk-user__dot { position: absolute; inset: 0; border-radius: 50%; background: var(--blue); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--blue); }
.mk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); border: 2px solid var(--paper); box-shadow: 0 1px 2px rgba(16,20,54,.3); }
.mk-pin { display: flex; flex-direction: column; align-items: center; cursor: pointer; filter: drop-shadow(0 2px 0 rgba(16,20,54,.22)); }
.mk-pin__label { background: var(--ink); color: var(--paper); padding: 6px 10px; font: 700 12px/1 var(--sans); white-space: nowrap; border: 2px solid var(--paper); direction: rtl; }
.mk-pin__stem { width: 2px; height: 8px; background: var(--ink); }
.mk-pin__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.mk-pin.is-selected .mk-pin__label, .mk-pin.is-selected .mk-pin__stem { background: var(--blue); }
.mk-pin.is-selected .mk-pin__dot { box-shadow: 0 0 0 2px var(--blue); }

/* ---------- phone */
@media (max-width: 720px) {
  .hero__title { font-size: 26px; }
  .searchbox--lg { height: 56px; }
  .searchbox__input { font-size: 16px; }
  .toplinks--landing { top: 20px; left: 16px; }
  .brand--top-right { right: 16px; }
  .landing__body { padding: 72px 16px 72px; gap: 20px; }
  .landing__foot { right: 16px; left: 16px; font-size: 10px; }
  .topbar { gap: 10px; padding: 0 12px; }
  .topbar .wordmark { display: none; }
  .sidebar { top: auto; width: 100%; height: 55%; border-left: 0; border-top: 2px solid var(--ink); }
  .sidebar__head { padding: 12px 16px 0; gap: 10px; }
  .card { padding: 12px 16px 10px; }
}