@import url('../libs/bootstrap/bootstrap.css');
@import url('../libs/leaflet/leaflet.css');
@import url('../libs/leaflet-draw/leaflet.draw.css');
@import url('../libs/leaflet-markercluster/MarkerCluster.css');
@import url('../libs/leaflet-markercluster/MarkerCluster.Default.css');

:root {
    --main-width: 100vw;
    --control-content-width: 25vw;
    --loader-size: 3rem;
    --thumbnail-size: 5rem;
    --popup-description-max-height: 100px;
}

body {
    margin: 0;
    padding: 0;
}

html, body, #app, #map {
    width: var(--main-width);
    min-height: 100dvh;
    overflow: hidden;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 1px solid #adb5bd;
}

.loader {
    position: absolute;
    z-index: 1056;
    top: calc(50% - var(--loader-size));
    left: calc(50% - (var(--loader-size) / 2));
    width: var(--loader-size);
    height: var(--loader-size);
}

.control:has(.show) {
    background-color: white;
}

.control-content {
    width: var(--control-content-width);
    height: auto;
}

.popup-description {
    max-height: var(--popup-description-max-height);
}

.thumbnail-container {
    width: var(--thumbnail-size);
}

/* marcador de foto */
.bf-photo-marker {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  border: 2px solid #fff;
  width: 56px; height: 56px;
  background: #eee;
}

.bf-photo-marker img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* cluster de fotos (colagem) */
.marker-cluster.bf-photo-cluster {
  background: rgba(255,255,255,.85);
  border: 2px solid rgba(0,0,0,.15);
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.bf-photo-collage {
  position: relative;
  width: 66px; height: 66px;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.bf-photo-collage img { width: 100%; height: 100%; object-fit: cover; }
.bf-photo-count {
  position: absolute; right: 4px; bottom: 4px;
  background: rgba(0,0,0,.72); color: #fff;
  font-size: 12px; line-height: 1; padding: 4px 6px;
  border-radius: 10px;
}

/* Mata a animação de abrir/fechar do Collapse/Accordion */
.collapsing {
  transition: none !important;
}

@media (max-width: 576px) {
  .bf-photo-marker { width: 44px; height: 44px; }
}

@media (max-width: 768px) {
    .leaflet-bottom.leaflet-left {
        margin-bottom: 35px;
    }
    
    .control-content {
        width: 70vw;
    }
}