/* maps.css — Leaflet integration for Dubai Realty
 * Self-hosted, RTL-aware, design-token driven.
 */

.lx-map {
  margin-block: var(--sp-5, 32px);
  display: block;
}

.lx-map__head {
  margin-block-end: var(--sp-3, 16px);
}

.lx-map__address {
  margin-block-start: var(--sp-3, 16px);
  color: var(--color-ink-mute, #5b6470);
  font-size: 0.95rem;
}

.lx-map__canvas {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  max-height: 540px;
  border: 1px solid var(--color-hairline, rgba(15, 20, 25, 0.12));
  background: var(--color-parchment-soft, #f4f1ea);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

@media (max-width: 720px) {
  .lx-map__canvas {
    aspect-ratio: 4 / 3;
    min-height: 280px;
  }
}

/* Leaflet overrides — keep brand-aligned */
.lx-map__canvas .leaflet-container {
  font-family: inherit;
  background: var(--color-parchment-soft, #f4f1ea);
}

.lx-map__canvas .leaflet-control-zoom a {
  background: var(--color-parchment, #faf7f0);
  color: var(--color-ink, #0f1419);
  border: 1px solid var(--color-hairline, rgba(15, 20, 25, 0.12));
  border-radius: 0;
  font-weight: 400;
}
.lx-map__canvas .leaflet-control-zoom a:hover {
  background: var(--color-ink, #0f1419);
  color: var(--color-parchment, #faf7f0);
}

.lx-map__canvas .leaflet-control-attribution {
  background: rgba(250, 247, 240, 0.92);
  color: var(--color-ink-mute, #5b6470);
  font-size: 0.72rem;
  padding: 2px 6px;
}
.lx-map__canvas .leaflet-control-attribution a {
  color: var(--color-emerald, #1f6f5c);
}

.lx-map__canvas .leaflet-popup-content-wrapper,
.lx-map__canvas .leaflet-popup-tip {
  background: var(--color-parchment, #faf7f0);
  color: var(--color-ink, #0f1419);
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(15, 20, 25, 0.15);
}
.lx-map__canvas .leaflet-popup-content {
  margin: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Hint overlay for "scroll/click to enable" pattern */
.lx-map__hint {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: var(--sp-3, 16px);
  transform: translateX(-50%);
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  padding: 6px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 500;
}
.lx-map.is-locked .lx-map__hint { opacity: 1; }

/* List view map mode (optional split / toggle) */
.lx-list-map {
  display: none;
  margin-block-start: var(--sp-4, 24px);
}
.lx-list-map.is-active { display: block; }
.lx-list-map__canvas {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border: 1px solid var(--color-hairline, rgba(15, 20, 25, 0.12));
}
.lx-list-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--color-hairline, rgba(15, 20, 25, 0.12));
  margin-inline-start: auto;
}
.lx-list-toggle__btn {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font: inherit;
  color: var(--color-ink-mute, #5b6470);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.lx-list-toggle__btn[aria-pressed="true"] {
  background: var(--color-ink, #0f1419);
  color: var(--color-parchment, #faf7f0);
}

/* RTL support — Leaflet markers/popups already mirror via DOM,
 * but logical properties handle our wrapper layout. No extra rules needed. */