:root {
  color-scheme: light;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-soft: rgba(255, 255, 255, 0.90);
  --text: #242321;
  --muted: #7e7a73;
  --line: rgba(59, 52, 45, 0.15);
  --accent: #ff2f73;
  --accent-dark: #d81f5d;
  --shadow: 0 8px 28px rgba(60, 50, 42, 0.18);
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  background: #eeeae2;
  color: var(--text);
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, .map:focus-visible {
  outline: 3px solid rgba(255, 47, 115, 0.32);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.map-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: #eeeae2; }
.map {
  position: absolute; inset: 0; overflow: hidden; user-select: none; touch-action: none;
  background: #eeeae2;
}
.tile-pane { position: absolute; inset: 0; will-change: transform; transform: translate3d(0,0,0); }
.map-tile {
  position: absolute; width: 256px; height: 256px; object-fit: cover; border: 0;
  image-rendering: auto; -webkit-user-drag: none; user-select: none; pointer-events: none;
  background: #e9e5dc;
}
.map.dragging { cursor: grabbing; }
.map:not(.dragging) { cursor: grab; }

.top-bar {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 70px;
  z-index: 20; display: flex; gap: 8px; align-items: flex-start; direction: ltr;
  pointer-events: none;
}
.language-control, .search-wrap { pointer-events: auto; }
.language-control select {
  height: 40px; min-width: 54px; padding: 0 25px 0 10px; border: 1px solid var(--line);
  border-radius: 9px; color: #333; background: var(--surface);
  box-shadow: 0 2px 10px rgba(60, 50, 42, 0.10);
}
.search-wrap { width: min(480px, calc(100vw - 150px)); position: relative; }
.search-box {
  height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 2px 10px rgba(60, 50, 42, 0.10); direction: ltr;
}
.search-box svg { width: 18px; height: 18px; fill: none; stroke: #817c74; stroke-width: 2; flex: 0 0 auto; }
.search-box input {
  min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text);
  direction: inherit; text-align: start;
}
.search-box input::placeholder { color: #8f8a82; }
.clear-search {
  width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #8f8a82;
  font-size: 22px; line-height: 1;
}
.clear-search:hover { background: rgba(0,0,0,.05); color: #444; }
.search-results {
  position: absolute; top: 46px; left: 0; right: 0; max-height: min(360px, 55vh); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: 6px; direction: rtl;
}
.search-result {
  width: 100%; padding: 10px 11px; border: 0; border-radius: 8px; background: transparent;
  text-align: start; display: block; color: var(--text);
}
.search-result:hover, .search-result:focus-visible { background: #f4f1eb; }
.search-result strong { display: block; font-size: 14px; margin-bottom: 3px; }
.search-result small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.search-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }

.map-controls {
  position: absolute; z-index: 20; top: max(12px, env(safe-area-inset-top)); right: 12px;
  display: grid; gap: 10px;
}
.zoom-group { display: grid; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(60, 50, 42, 0.12); }
.zoom-group button, .locate-button, .about-button {
  width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); color: #36332f;
}
.zoom-group button { font-size: 24px; line-height: 1; }
.zoom-group button + button { border-top: 0; }
.zoom-group button:hover, .locate-button:hover, .about-button:hover { background: #f7f4ef; }
.locate-button { border-radius: 8px; box-shadow: 0 2px 10px rgba(60, 50, 42, 0.12); display: grid; place-items: center; }
.locate-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.locate-button.loading svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.center-pin {
  position: absolute; z-index: 15; left: 50%; top: 50%; width: 28px; height: 42px;
  transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25));
}
.pin-dot {
  position: absolute; top: 2px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ff8fb5 0 18%, var(--accent) 36% 70%, var(--accent-dark) 100%);
  border: 2px solid #fff;
}
.pin-tail {
  position: absolute; top: 17px; left: 11px; width: 7px; height: 19px; border-radius: 50% 50% 80% 20%;
  background: var(--accent-dark); transform: rotate(40deg) skew(6deg); transform-origin: top center;
}

.place-card {
  position: absolute; z-index: 20; left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); padding: 13px 18px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  text-align: center; direction: rtl;
}
.place-address { font-size: 14px; line-height: 1.65; min-height: 23px; }
.place-meta {
  margin-top: 5px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  color: #99938c; font-size: 11px; direction: ltr;
}
.place-meta span + span::before { content: "•"; margin-inline-end: 10px; }

.brand-chip {
  position: absolute; z-index: 19; left: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; gap: 7px; align-items: center; max-width: 340px; padding: 7px 10px;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(60, 50, 42, 0.10); color: #716c65; font-size: 10px;
}
.brand-chip strong { color: #44403b; font-size: 11px; }
.docs-button {
  position: absolute; z-index: 20; right: 50px; bottom: max(12px, env(safe-area-inset-bottom));
  height: 28px; display: inline-flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: #625d57;
  box-shadow: 0 2px 8px rgba(60, 50, 42, 0.12); font-size: 10px; font-weight: 700; text-decoration: none;
}
.docs-button:hover { background: #f7f4ef; }
.about-button {
  position: absolute; z-index: 20; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  width: 28px; height: 28px; border-radius: 50%; font-family: Georgia, serif; font-weight: 700;
  box-shadow: 0 2px 8px rgba(60, 50, 42, 0.12);
}
.toast {
  position: absolute; z-index: 30; top: 64px; left: 50%; transform: translateX(-50%);
  max-width: min(90vw, 520px); padding: 9px 13px; border-radius: 8px; background: rgba(32,30,28,.92);
  color: #fff; font-size: 12px; text-align: center; box-shadow: var(--shadow);
}

@media (max-width: 720px) {
  .top-bar { right: 62px; left: 8px; top: max(8px, env(safe-area-inset-top)); gap: 6px; }
  .map-controls { top: max(8px, env(safe-area-inset-top)); right: 8px; }
  .search-wrap { width: calc(100vw - 132px); }
  .place-card { bottom: max(54px, calc(env(safe-area-inset-bottom) + 48px)); padding-inline: 14px; }
  .brand-chip { left: 8px; max-width: calc(100vw - 54px); }
  .brand-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .docs-button { right: 46px; }
  .about-button { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; }
}