/* =========================================================
   GURUR LOJİSTİK — Leaflet location picker
   Self-contained: every token falls back to a literal, so the same file
   works inside the panel (where it inherits the panel palette, including
   dark mode) and on the public site (which has its own design system).
   ========================================================= */
.map-picker {
  --mp-surface:  var(--surface, #ffffff);
  --mp-surface-2: var(--surface-2, #f7f9fd);
  --mp-surface-3: var(--surface-3, #eef3fa);
  --mp-line:     var(--line, #e3eaf5);
  --mp-line-soft: var(--line-soft, #eef2f9);
  --mp-text:     var(--text, #10203c);
  --mp-text-2:   var(--text-2, #5c6a86);
  --mp-text-3:   var(--text-3, #8d9ab3);
  --mp-brand:    var(--brand, #e2382c);
  --mp-accent:   var(--accent, #2e86ff);
  --mp-radius:   var(--r-lg, 22px);
  --mp-radius-md: var(--r-md, 16px);
  --mp-radius-sm: var(--r-sm, 12px);
  --mp-pill:     var(--r-pill, 999px);
  --mp-shadow:   var(--shadow-lg, 0 34px 70px -34px rgba(16, 32, 60, .45));
  --mp-font:     var(--font, 'Manrope', system-ui, -apple-system, sans-serif);
  --mp-tr:       var(--tr, .24s cubic-bezier(.4, 0, .2, 1));

  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-surface);
  overflow: hidden;
  font-family: var(--mp-font);
  color: var(--mp-text);
}

.map-toolbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .75rem .9rem;
  background: var(--mp-surface-2);
  border-bottom: 1px solid var(--mp-line-soft);
}

.map-targets {
  display: flex; gap: .3rem;
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  border-radius: var(--mp-pill); padding: 3px;
}
.map-target {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; background: transparent; cursor: pointer;
  padding: .38rem .8rem; border-radius: var(--mp-pill);
  font: inherit; font-size: .8rem; font-weight: 700; color: var(--mp-text-3);
  transition: var(--mp-tr); white-space: nowrap; line-height: 1.4;
}
.map-target .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.map-target .dot.a { background: var(--mp-brand); }
.map-target .dot.b { background: var(--mp-accent); }
.map-target.active { background: var(--mp-text); color: var(--mp-surface); }
.map-target.active .dot { box-shadow: 0 0 0 2px var(--mp-surface); }

.map-search { position: relative; flex: 1 1 190px; min-width: 170px; max-width: 340px;
  margin: 0; display: block; }
.map-search > svg {
  position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%;
  color: var(--mp-text-3); pointer-events: none;
}
.map-search input {
  width: 100%;
  padding: .55rem .95rem;
  padding-inline-start: 36px;
  border-radius: var(--mp-pill);
  border: 1px solid var(--mp-line);
  background: var(--mp-surface);
  color: var(--mp-text);
  font: inherit; font-size: .86rem;
  transition: var(--mp-tr);
}
.map-search input:focus {
  outline: none;
  border-color: var(--mp-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mp-brand) 14%, transparent);
}

.map-suggest {
  position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 900;
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-md); box-shadow: var(--mp-shadow);
  padding: .3rem; display: none; max-height: 260px; overflow-y: auto;
}
.map-suggest.show { display: block; }
.map-suggest-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .45rem .6rem; border: 0; background: none; cursor: pointer;
  border-radius: var(--mp-radius-sm);
  font: inherit; font-size: .82rem; color: var(--mp-text); text-align: start;
}
.map-suggest-item:hover { background: var(--mp-surface-3); color: var(--mp-brand); }
.map-suggest-item svg { color: var(--mp-brand); flex: none; }
.map-suggest-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.map-clear {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .48rem .95rem; border-radius: var(--mp-pill);
  border: 1px solid var(--mp-line); background: var(--mp-surface);
  color: var(--mp-text-2); font: inherit; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: var(--mp-tr); white-space: nowrap;
}
.map-clear:hover { color: var(--mp-brand); border-color: var(--mp-brand); }

.map-hint { padding: 0 .9rem .6rem; font-size: .78rem; color: var(--mp-text-3); margin: 0; }
.map-canvas { width: 100%; background: var(--mp-surface-3); z-index: 1; }

.map-status {
  display: flex; gap: .45rem; flex-wrap: wrap;
  padding: .7rem .9rem;
  border-top: 1px solid var(--mp-line-soft); background: var(--mp-surface-2);
}
.map-chip {
  font-size: .76rem; font-weight: 600; color: var(--mp-text-2);
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  border-radius: var(--mp-pill); padding: .25rem .7rem;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.map-chip b { font-weight: 800; }
.map-chip.origin { border-color: color-mix(in srgb, var(--mp-brand) 45%, var(--mp-line));
  color: var(--mp-brand); }
.map-chip.destination { border-color: color-mix(in srgb, var(--mp-accent) 45%, var(--mp-line));
  color: var(--mp-accent); }
.map-chip.dist { background: var(--mp-text); color: var(--mp-surface); border-color: transparent; }
.map-chip.muted { color: var(--mp-text-3); }
.map-coords { display: none; }

/* Marker pin, drawn without an image asset */
.gl-pin { background: none; border: 0; }
.gl-pin-dot {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  color: #fff; font-weight: 800; font-size: .78rem; line-height: 1;
  box-shadow: 0 6px 14px -4px rgba(9, 24, 51, .55);
  border: 2px solid #fff;
}
.gl-pin-dot i { rotate: 45deg; font-style: normal; line-height: 1; }

/* Leaflet chrome tuned to the surrounding palette */
.map-picker .leaflet-container { font-family: var(--mp-font); }
.map-picker .leaflet-control-zoom a {
  border-radius: 10px !important;
  border: 1px solid var(--mp-line) !important;
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  font-weight: 700;
}
.map-picker .leaflet-control-attribution {
  background: color-mix(in srgb, var(--mp-surface) 85%, transparent) !important;
  color: var(--mp-text-3) !important;
  font-size: .68rem;
}
.map-picker .leaflet-control-attribution a { color: var(--mp-text-2) !important; }
[data-theme="dark"] .map-picker .leaflet-tile {
  filter: brightness(.78) contrast(1.05) saturate(.85);
}