/* Mapa vivo do camping (_inc/_mapa.php) — estilo F: Montserrat nos títulos, Inter no texto,
   paleta floresta/esmeralda/brasa do site.css. Tudo prefixado com mv-. */

.mv { --mv-livre: #12b07c; --mv-ocupada: #e2564a; --mv-confirmada: #f2711c; width: 100%; min-width: 0; }

.mv-moldura { position: relative; width: 100%; overflow: hidden; border: 6px solid #fff; border-radius: 30px; background: #fff; box-shadow: 0 0 0 1px var(--linha, #e3ebe7), 0 40px 80px -40px rgba(11, 59, 44, .5); user-select: none; -webkit-user-select: none; isolation: isolate; }

.mv-viewport { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 24px; background: linear-gradient(#bfe6f2 0%, #d9f0e4 16%, #cdeccb 28%, #b9dcae 100%); touch-action: pan-y; cursor: grab; }
.mv-viewport:active { cursor: grabbing; }
.mv-palco { position: absolute; top: 0; left: 0; transform-origin: top left; }

.mv-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── peças do palco ───────────────────────────── */
.mv-spr { position: absolute; max-width: none; pointer-events: none; user-select: none; filter: drop-shadow(0 6px 5px rgba(20, 60, 40, .18)); }
.mv-chao { filter: none; }

.mv-vaga { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); transition: opacity .2s, filter .2s; -webkit-tap-highlight-color: transparent; }
.mv-vaga:hover, .mv-vaga:focus-visible { z-index: 9000 !important; }
.mv-vaga:focus-visible { outline: none; }
.mv-vaga__in { position: relative; display: block; width: 100%; height: 100%; transform-origin: center; transition: scale .16s cubic-bezier(.2, .8, .2, 1), translate .16s cubic-bezier(.2, .8, .2, 1); }
.mv-vaga:hover > .mv-vaga__in, .mv-vaga:focus-visible > .mv-vaga__in { scale: 1.09; translate: 0 -4px; }
.mv-vaga img { width: 100%; max-width: none; height: auto; display: block; filter: drop-shadow(0 7px 6px rgba(20, 60, 40, .24)); }
.mv-vaga.mv-apagada { opacity: .2; filter: grayscale(.75); }
.mv-anel { display: none; }
.mv-vaga.mv-sel .mv-anel, .mv-vaga:focus-visible .mv-anel { display: block; position: absolute; inset: -10%; border-radius: 18px; border: 3px solid var(--floresta-2, #0c7a54); box-shadow: 0 0 0 4px rgba(12, 122, 84, .22); }
.mv-caixa { display: grid; place-items: center; color: #fff; font-family: var(--titulo); font-weight: 800; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 12px -4px rgba(20, 60, 40, .4); }
.mv-marca { position: absolute; top: 0; right: 0; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .28); }
.mv-codigo { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 3px); white-space: nowrap; font-family: var(--titulo); font-size: 11px; font-weight: 700; color: var(--floresta, #0b3b2c); background: rgba(255, 255, 255, .92); padding: 0 6px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.mv-rotulo { position: absolute; transform: translate(-50%, -50%); font-family: var(--titulo); font-weight: 700; color: var(--floresta, #0b3b2c); pointer-events: none; white-space: nowrap; text-shadow: 0 1px 2px rgba(255, 255, 255, .85); }
.mv-rotulo--enfeite { transform: translateX(-50%); font-size: 12px; opacity: .9; background: rgba(255, 255, 255, .7); padding: 1px 6px; border-radius: 6px; }

/* céu: sol e nuvens */
.mv-sol { position: absolute; left: 4%; top: 6%; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle, #ffe9a8, #fcc63f); box-shadow: 0 0 28px 8px rgba(251, 191, 36, .5); pointer-events: none; }
.mv-nuvem { position: absolute; background: #fff; border-radius: 100px; opacity: .7; filter: blur(1px); pointer-events: none; }
.mv-nuvem::before, .mv-nuvem::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.mv-nuvem::before { width: 55%; height: 170%; left: 14%; top: -80%; }
.mv-nuvem::after { width: 40%; height: 150%; right: 16%; top: -60%; }
.mv-nuvem--a { left: 8%; top: 7%; width: 66px; height: 19px; animation: mv-vento 10s ease-in-out infinite alternate; }
.mv-nuvem--b { left: 44%; top: 5%; width: 50px; height: 14px; animation: mv-vento 13s ease-in-out infinite alternate; }
.mv-flutua { animation: mv-flutua 3.5s ease-in-out infinite; }
@keyframes mv-vento { from { transform: translateX(0); } to { transform: translateX(50px); } }
@keyframes mv-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* fogueira acesa e brilho na água */
.mv-fogo { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 50, .8), rgba(255, 120, 30, .25) 45%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; animation: mv-chama 1.4s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes mv-chama { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .9; transform: translate(-50%, -50%) scale(1.12); } }
.mv-brilho { position: absolute; pointer-events: none; border-radius: 40% 60% 55% 45%; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); background-size: 250% 100%; animation: mv-reflexo 5s linear infinite; mix-blend-mode: overlay; }
@keyframes mv-reflexo { to { background-position: -250% 0; } }

.mv-vinheta { position: absolute; inset: 0; pointer-events: none; border-radius: 24px; box-shadow: inset 0 0 70px rgba(11, 59, 44, .26), inset 0 -40px 70px rgba(11, 59, 44, .14); }

/* ── controles por cima do mapa ───────────────── */
.mv-aovivo, .mv-filtros, .mv-contador { position: absolute; z-index: 20; background: rgba(255, 255, 255, .95); border: 1px solid #fff; box-shadow: 0 12px 30px -14px rgba(11, 59, 44, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.mv-aovivo { left: 16px; top: 16px; display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-family: var(--titulo); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--floresta, #0b3b2c); }
.mv-pulso { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mv-ocupada); }
.mv-pulso::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mv-ocupada); animation: mv-pulso 1.6s ease-out infinite; }
@keyframes mv-pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

.mv-filtros { left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: calc(100% - 20px); padding: 5px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.mv-filtros::-webkit-scrollbar { display: none; }
.mv-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; font-family: var(--fonte); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--tinta-2, #34443d); cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.mv-chip:hover { background: var(--salvia, #e2f6ed); }
.mv-chip[aria-pressed="true"] { background: var(--floresta, #0b3b2c); color: #fff; }
.mv-chip.mv-off { opacity: .78; }
.mv-chip:focus-visible { outline: 2px solid var(--musgo, #12b07c); outline-offset: 1px; }
.mv-bolinha { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mv-bolinha--livre { background: var(--mv-livre); }
.mv-bolinha--ocupada { background: var(--mv-ocupada); }
.mv-bolinha--confirmada { background: var(--mv-confirmada); }
.mv-chip[aria-pressed="true"] .mv-bolinha { box-shadow: 0 0 0 2px #fff; }

.mv-contador { left: 16px; bottom: 16px; padding: 10px 16px 11px; border-radius: 16px; pointer-events: none; }
.mv-contador__rotulo { margin: 0; font-family: var(--fonte); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado, #84918b); }
.mv-contador__valor { margin: 2px 0 0; font-family: var(--titulo); font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--floresta-2, #0c7a54); }
.mv-contador__valor small { font-size: 14px; font-weight: 700; color: var(--suave, #5c6b64); letter-spacing: 0; }

/* ── ficha da vaga ─────────────────────────────── */
.mv-ficha { position: absolute; z-index: 30; width: 236px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--linha, #e3ebe7), 0 24px 50px -18px rgba(11, 59, 44, .55); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .16s, transform .16s cubic-bezier(.2, .8, .2, 1); }
.mv-ficha.mv-acima { transform: translateY(calc(-100% + 6px)); }
.mv-ficha.mv-on { opacity: 1; transform: none; pointer-events: auto; }
.mv-ficha.mv-acima.mv-on { transform: translateY(-100%); }
.mv-ficha__topo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 26px; }
.mv-ficha__titulo { font-family: var(--titulo); font-size: 16px; font-weight: 800; letter-spacing: -0.015em; color: var(--tinta, #0f1f19); }
.mv-ficha__st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.mv-ficha__st i, .mv-dica-flutuante__st i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.mv-ficha__tipo { margin: 2px 0 0; font-size: 12.5px; color: var(--apagado, #84918b); }
.mv-ficha__extra { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tinta-2, #34443d); }
.mv-ficha__acao { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; padding: 10px 16px; border-radius: 999px; background: var(--floresta-2, #0c7a54); color: #fff; font-family: var(--titulo); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background .15s; }
.mv-ficha__acao:hover { background: var(--floresta, #0b3b2c); }
.mv-ficha__fechar { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--areia-2, #f2f8f5); color: var(--suave, #5c6b64); font-size: 18px; line-height: 1; cursor: pointer; }
.mv-ficha__fechar:hover { background: var(--salvia, #e2f6ed); color: var(--floresta, #0b3b2c); }

/* dica flutuante (fica no <body>) */
.mv-dica-flutuante { position: fixed; z-index: 80; left: 0; top: 0; display: grid; gap: 2px; max-width: 220px; padding: 8px 12px; border-radius: 12px; background: var(--floresta, #0b3b2c); color: #fff; font-family: var(--fonte); font-size: 13px; line-height: 1.35; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55); pointer-events: none; opacity: 0; transform: translateY(5px); transition: opacity .12s, transform .12s; }
.mv-dica-flutuante.mv-on { opacity: 1; transform: none; }
.mv-dica-flutuante b { font-family: var(--titulo); font-weight: 700; }
.mv-dica-flutuante__st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .85); }

.mv-dica { margin: 16px 0 0; text-align: center; font-size: 15px; color: var(--suave, #5c6b64); }
.mv-dica strong { color: var(--tinta, #0f1f19); font-weight: 600; }

.mv-vazio { padding: 40px; border: 1px dashed var(--linha-2, #cddad3); border-radius: 24px; background: #fff; text-align: center; color: var(--suave, #5c6b64); }

/* ── celular: mapa enche a altura e arrasta para o lado ── */
@media (max-width: 639px) {
  .mv-moldura { border-width: 4px; border-radius: 22px; }
  .mv-viewport, .mv-vinheta { border-radius: 18px; }
  .mv-viewport { aspect-ratio: auto; height: 56vh; min-height: 360px; max-height: 520px; }
  .mv-aovivo { display: none; }
  .mv-filtros { top: 10px; gap: 2px; padding: 4px; }
  .mv-chip { gap: 5px; padding: 6px 9px; font-size: 12px; }
  .mv-contador { left: 10px; bottom: 10px; padding: 7px 12px 8px; border-radius: 12px; }
  .mv-contador__rotulo { font-size: 10px; }
  .mv-contador__valor { font-size: 20px; }
  .mv-contador__valor small { font-size: 12px; }
  .mv-ficha { width: 220px; padding: 14px; }
  .mv-dica { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-nuvem, .mv-flutua, .mv-fogo, .mv-brilho, .mv-pulso::before { animation: none; }
}

/* dica: texto de mouse ou de toque */
.mv-dica--toque { display: none; }
@media (hover: none), (max-width: 639px) {
  .mv-dica--mouse { display: none; }
  .mv-dica--toque { display: inline; }
}