/* Tap-to-unlock overlay for the two Leaflet maps. See maplock.js. */

.oxr-maplock,
.oxr-maprelock {
  font-family: 'Manrope', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* The unlock scrim — only present while the map is locked. */
.oxr-maplock {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(21, 18, 14, 0.16);
  cursor: pointer;
}
.is-map-locked > .oxr-maplock { display: flex; }

.oxr-maplock__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  color: var(--ink, #15120e);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: var(--sh-md, 0 10px 30px rgba(0, 0, 0, 0.14));
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.oxr-maplock:hover .oxr-maplock__pill {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg, 0 18px 50px rgba(0, 0, 0, 0.2));
}

/* Re-lock chip — only present once the map is unlocked. */
.oxr-maprelock {
  position: absolute;
  z-index: 900;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  color: var(--ink, #15120e);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sh-sm, 0 4px 14px rgba(0, 0, 0, 0.1));
}
.is-map-locked > .oxr-maprelock { display: none; }
.oxr-maprelock:hover { background: var(--ink, #15120e); color: var(--paper, #fff); }

.oxr-maplock__icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent, #c08b58);
}
.oxr-maprelock:hover .oxr-maplock__icon { color: currentColor; }

@media (max-width: 640px) {
  .oxr-maplock__pill { padding: 11px 17px; font-size: 12.5px; }
  .oxr-maprelock span { display: none; }
  .oxr-maprelock { padding: 9px; }
}

[data-theme="dark"] .oxr-maplock__pill,
[data-theme="dark"] .oxr-maprelock {
  background: rgba(34, 29, 24, 0.86);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f4efe7;
}
[data-theme="dark"] .oxr-maprelock:hover {
  background: #f4efe7;
  color: #15120e;
}