/**
 * AC | Mapa de Unidades — mapa Leaflet com pins + painel lateral retrátil.
 *
 * O painel começa FECHADO; o botão "Unidades" (canto sup. esquerdo do mapa)
 * abre/fecha. O painel é OVERLAY por cima do mapa (o mapa não redimensiona).
 * O mapa cria stacking context próprio (z-index: 0) pra os panes do Leaflet
 * (z-index até ~1000) não passarem por cima do header sticky do tema.
 */

.ac-unit-map {
  margin: 0;
}

/* Padding tokens */
.ac-unit-map--pt-0 { padding-top: 0; }
.ac-unit-map--pt-24 { padding-top: 24px; }
.ac-unit-map--pt-32 { padding-top: 32px; }
.ac-unit-map--pt-40 { padding-top: 40px; }
.ac-unit-map--pt-48 { padding-top: 48px; }
.ac-unit-map--pt-56 { padding-top: 56px; }
.ac-unit-map--pt-80 { padding-top: 80px; }
.ac-unit-map--pb-0 { padding-bottom: 0; }
.ac-unit-map--pb-24 { padding-bottom: 24px; }
.ac-unit-map--pb-32 { padding-bottom: 32px; }
.ac-unit-map--pb-40 { padding-bottom: 40px; }
.ac-unit-map--pb-48 { padding-bottom: 48px; }
.ac-unit-map--pb-56 { padding-bottom: 56px; }
.ac-unit-map--pb-80 { padding-bottom: 80px; }

.ac-unit-map__inner {
  max-width: var(--container-max, 1104px);
  margin: 0 auto;
}

.ac-unit-map__frame {
  position: relative;
  display: flex;
  height: var(--ac-um-height, 640px);
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.08);
}

/* ---------- Botão toggle "Unidades" ---------- */

.ac-unit-map__toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #0E5236;
  cursor: pointer;
  transition: left 0.25s ease, background-color 0.15s ease;
}

/* Ícones do toggle (Figma/lucide): fechado = panel-left-open (chevron →),
 * aberto = panel-right-open (chevron ←) e o TEXTO some (só ícone).
 * Seletores ESCOPADOS no toggle — a regra base `.ac-unit-map__toggle svg
 * { display:block }` vem depois e venceria um `.ac-unit-map__icon-open`
 * solto (especificidade menor) → os dois ícones apareciam juntos. */
.ac-unit-map__toggle .ac-unit-map__icon-open {
  display: none;
}

.ac-unit-map.is-open .ac-unit-map__toggle .ac-unit-map__icon-open {
  display: block;
}

.ac-unit-map.is-open .ac-unit-map__toggle .ac-unit-map__icon-closed,
.ac-unit-map.is-open .ac-unit-map__toggle span {
  display: none;
}

.ac-unit-map__toggle:hover,
.ac-unit-map__toggle:focus-visible {
  background: #F0F2F5;
}

.ac-unit-map__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 82, 54, 0.5);
}

.ac-unit-map__toggle svg {
  display: block;
  flex: none;
}

.ac-unit-map.is-open .ac-unit-map__toggle {
  left: calc(360px + 12px);
}

/* ---------- Painel lateral (overlay retrátil) ---------- */

/* O painel fica POR CIMA do mapa (overlay) — o mapa NÃO redimensiona ao
 * abrir/fechar (decisão do user; também dispensa invalidateSize). */
.ac-unit-map__panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 360px;
  overflow: hidden;
  background: #fff;
  transform: translateX(-105%);
  transition: transform 0.25s ease;
}

.ac-unit-map.is-open .ac-unit-map__panel {
  transform: none;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.12);
}

.ac-unit-map__panel-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.ac-unit-map__panel-header {
  position: relative;
  padding: 20px 20px 12px;
  flex: none;
}

.ac-unit-map__title {
  margin: 0;
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #0E5236;
}

.ac-unit-map__count {
  display: block;
  margin-top: 2px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #808080;
}

.ac-unit-map__close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: #404040;
  cursor: pointer;
}

.ac-unit-map__close:hover,
.ac-unit-map__close:focus-visible {
  background: #F0F2F5;
}

.ac-unit-map__list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-unit-map__item {
  margin: 0;
}

.ac-unit-map__card {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-top: 1px solid #F0F2F5;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ac-unit-map__card:hover,
.ac-unit-map__card:focus-visible {
  background: #F6F7F9;
}

.ac-unit-map__card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(14, 82, 54, 0.5);
}

.ac-unit-map__card.is-active {
  background: #F0F2F5;
}

.ac-unit-map__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #E5E5E5;
}

.ac-unit-map__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ac-unit-map__mark {
  display: block;
  width: 20px;
  height: 8px;
  border-radius: 8px;
  background: #F6A71C;
}

.ac-unit-map__name {
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: #242424;
}

.ac-unit-map__address {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #404040;
}

.ac-unit-map__phone {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #404040;
}

/* ---------- Mapa ---------- */

.ac-unit-map__map {
  position: relative;
  z-index: 0; /* stacking context: panes do Leaflet não vazam sobre o header sticky */
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background: #E2E5E9;
}

/* Fallback: Leaflet não carregou → esconde mapa/toggle, painel aberto largura total */
.ac-unit-map--no-map .ac-unit-map__map,
.ac-unit-map--no-map .ac-unit-map__toggle {
  display: none;
}

.ac-unit-map--no-map .ac-unit-map__panel {
  position: static;
  width: 100%;
  flex: 1 1 auto;
  transform: none;
}

/* Placeholder do editor */
.ac-unit-map__map--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #B2B2B2;
  border-radius: 0 16px 16px 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #808080;
  text-align: center;
  padding: 24px;
}

/* ---------- Pin custom (divIcon) ---------- */

.ac-um-pin {
  background: none;
  border: 0;
}

/* O SVG do Figma já tem sombra própria (filter embutido) — sem drop-shadow CSS. */
.ac-um-pin svg {
  display: block;
  transition: transform 0.15s ease;
  transform-origin: bottom center;
}

.ac-um-pin:hover svg,
.ac-um-pin.is-active svg {
  transform: scale(1.1);
}

/* CSS fill vence o fill="url(#gradiente)" do atributo — pin ativo amarelo */
.ac-um-pin.is-active svg .ac-um-pin__bg {
  fill: #F6A71C;
}

/* ---------- Popup ---------- */

/* Popup espelha o HTML do Figma: título 18px verde camargo, address 13px
 * #444, CTA "Abrir" preto 13/600 bg amarelo radius 4. */
.ac-um-popup .leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 12px 16px -2px rgba(0, 0, 0, 0.16);
}

.ac-um-popup .leaflet-popup-content {
  margin: 16px;
  line-height: 1.5;
}

.ac-um-popup__name {
  display: block;
  margin: 0 0 4px;
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #0E5236;
}

.ac-um-popup__address,
.ac-um-popup__phone {
  margin: 0 0 8px;
  font-family: Arial, sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
}

.ac-um-popup__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #FFD16C;
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #242424 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.ac-um-popup__cta:hover,
.ac-um-popup__cta:focus-visible {
  background: #F6A71C;
  color: #242424;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .ac-unit-map__panel {
    width: min(320px, 85%);
  }

  /* Toggle some no open; o X do painel fecha */
  .ac-unit-map.is-open .ac-unit-map__toggle {
    left: 12px;
    visibility: hidden;
  }

  .ac-unit-map__close {
    display: block;
  }
}