/* ============================================================
   Map — views/BEngine/map.php
   Scoped under .mp so nothing here reaches the other admin pages.
   ============================================================ */

.mp {
  --ink:       #0c2439;
  --navy:      #123a5c;
  --blue:      #2b74b0;
  --blue-600:  #225d8f;
  --blue-50:   #e7f0f8;
  --slate-50:  #f4f7fa;
  --slate-100: #eaf0f6;
  --slate-200: #dbe4ec;
  --slate-300: #c2d0dd;
  --slate-400: #8296aa;
  --slate-600: #546b82;
  --danger:    #c0392b;
  --ok:        #2f8f5b;

  --r:    7px;
  --r-lg: 11px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --serif: "Merriweather", Georgia, serif;

  padding: 18px;
  font-family: "Open Sans", sans-serif;
  color: var(--ink);
  background: var(--slate-50);
}

.mp *, .mp *::before, .mp *::after { box-sizing: border-box; }

/* =============================== SEARCH =============================== */

.mp-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
}

.mp-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.mp-search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--slate-400);
  pointer-events: none;
}
.mp-search > input {
  width: 100%;
  padding: 9px 12px 9px 33px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.mp-search > input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 116, 176, .15);
}
.mp-search > input::placeholder { color: var(--slate-300); }

.mp-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), transform .1s var(--ease);
}
.mp-btn:active { transform: translateY(1px); }
.mp-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.mp-btn-ghost {
  color: var(--slate-600);
  background: none;
  border-color: var(--slate-300);
}
.mp-btn-ghost:hover { color: var(--navy); background: var(--slate-50); border-color: var(--slate-400); }

.mp-btn-primary {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 2px 8px rgba(43, 116, 176, .3);
}
.mp-btn-primary:hover:not(:disabled) { background: var(--blue-600); }
.mp-btn-primary:disabled {
  background: var(--slate-300);
  box-shadow: none;
  cursor: not-allowed;
}

/* ================================ BODY ================================ */

.mp-body {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.mp-canvas {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
}
/* bengine_N.css sets .map #mapCanvas to a flat 400px */
.mp .map-canvas,
.map .mp .map-canvas { width: 100%; height: 100%; min-height: 460px; }

.mp-side {
  flex: 0 0 306px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
}

.mp-side h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.mp-side h4 > i { font-size: 12px; color: var(--blue); }

/* ------------------------------ address ------------------------------ */

.mp-addr {
  min-height: 46px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate-600);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--r);
}
.mp-addr.is-loading { color: var(--slate-400); font-style: italic; }

/* ---------------------------- coordinates ---------------------------- */

.mp-coords { display: flex; gap: 10px; }
.mp-field { flex: 1 1 0; min-width: 0; }
.mp-field > label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--slate-400);
}
.mp-field > input {
  width: 100%;
  padding: 8px 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.mp-field > input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 116, 176, .15);
}
.mp-field.has-error > input { border-color: var(--danger); background: #fdf0ee; }

.mp-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--slate-400);
}
.mp-hint > i { margin-top: 2px; }

.mp-actions {
  display: flex;
  gap: 9px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--slate-100);
}
.mp-actions .mp-btn { flex: 1 1 auto; justify-content: center; }

.mp-saved {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ok);
}
.mp.is-saved .mp-saved { display: flex; animation: mpFade .24s var(--ease); }

@keyframes mpFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* =============================== TOASTS =============================== */

.mp-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}
.mp-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  padding: 11px 16px;
  font-size: 12.5px;
  color: #fff;
  background: var(--navy);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 26px rgba(12, 36, 57, .3);
  animation: mpToastIn .24s var(--ease);
}
.mp-toast.is-ok    { background: var(--ok); }
.mp-toast.is-error { background: var(--danger); }
.mp-toast.is-out   { animation: mpToastOut .22s var(--ease) forwards; }

@keyframes mpToastIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mpToastOut {
  to { opacity: 0; transform: translateX(24px); }
}

/* =============================== MOBILE =============================== */

@media (max-width: 991px) {
  .mp-body { flex-direction: column; }
  .mp-side { flex: 1 1 auto; }
  .mp .map-canvas { min-height: 340px; }
}

@media (max-width: 767px) {
  .mp { padding: 12px; }
  .mp-bar { flex-wrap: wrap; padding: 11px; }
  .mp-search { flex-basis: 100%; }
  .mp-bar .mp-btn { flex: 1 1 auto; justify-content: center; }
  .mp-toasts { left: 14px; right: 14px; bottom: 14px; }
  .mp-toast { max-width: none; }
}

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