/* Marca Local — Cidade Ativa (seletor, aviso, modal, banner, toast).
   Usa as variáveis do tema (--primary, --surface, --ink, --muted, --line). */

/* ---- Botão no header da Home ---- */
.ml-cidade-btn{
  display:inline-flex; align-items:center; gap:8px;
  max-width:100%; min-height:44px; /* alvo de toque confortável */
  margin:14px 0 0; padding:8px 14px;
  border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff;
  font:600 14px/1.2 'Manrope', sans-serif;
  position:relative; z-index:2;
}
.ml-cidade-btn:hover,.ml-cidade-btn:focus-visible{ background:rgba(255,255,255,.28); outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.ml-cidade-btn .ml-cidade-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ml-cidade-btn .ml-cidade-seta{ font-size:11px; opacity:.85; }
.ml-cidade-btn i:first-child{ color:var(--accent); }

/* ---- Linha "Você está vendo empresas de ..." ---- */
.ml-cidade-aviso{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:14px 0 4px; padding:10px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  font-size:13px; color:var(--muted);
}
.ml-cidade-aviso i{ color:var(--primary); }
.ml-cidade-aviso strong{ color:var(--ink); }
.ml-cidade-trocar{
  margin-left:auto; min-height:32px; padding:4px 12px;
  border:1px solid var(--primary); border-radius:999px; cursor:pointer;
  background:transparent; color:var(--primary); font:700 12px 'Manrope', sans-serif;
}

/* ---- Banner amigável (antes do pedido do navegador) ---- */
.ml-cidade-banner{
  margin:14px 0 4px; padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 6px 18px -10px rgba(9,47,47,.25);
}
.ml-cidade-banner strong{ display:block; font-size:15px; color:var(--ink); }
.ml-cidade-banner p{ margin:4px 0 10px; font-size:13px; color:var(--muted); }
.ml-cidade-banner__acoes{ display:flex; gap:8px; flex-wrap:wrap; }
.ml-cidade-banner__acoes button{
  min-height:44px; padding:8px 14px; border-radius:999px; cursor:pointer;
  font:700 13px 'Manrope', sans-serif; border:1px solid var(--primary);
}
.ml-cidade-banner__gps{ background:var(--primary); color:#fff; }
.ml-cidade-banner__manual{ background:transparent; color:var(--primary); }
.ml-cidade-banner__depois{ background:transparent; color:var(--muted); border-color:transparent !important; }
.ml-cidade-banner--sem-gps .ml-cidade-banner__gps{ display:none; }

/* ---- Modal / bottom-sheet ---- */
.ml-cidade-modal[hidden]{ display:none; }
.ml-cidade-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center; }
.ml-cidade-fundo{ position:absolute; inset:0; background:rgba(9,47,47,.55); }
.ml-cidade-folha{
  position:relative; width:100%; max-width:520px;
  max-height:88vh; max-height:88dvh; overflow-y:auto;
  background:var(--surface); border-radius:20px 20px 0 0;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));
  animation:ml-cidade-sobe .22s ease-out;
}
.ml-cidade-alca{ width:42px; height:4px; border-radius:4px; background:var(--line); margin:6px auto 10px; }
.ml-cidade-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ml-cidade-topo h2{ font-size:19px; }
.ml-cidade-x{
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:var(--bg); color:var(--ink); font-size:15px;
}
.ml-cidade-msg{
  display:none; margin:0 0 10px; padding:10px 12px; border-radius:10px;
  background:#fff7e6; color:#7a5200; font-size:13px;
}
.ml-cidade-gps{
  width:100%; min-height:48px; margin-bottom:10px; border:1px solid var(--primary); border-radius:12px;
  background:transparent; color:var(--primary); font:700 14px 'Manrope', sans-serif; cursor:pointer;
}
.ml-cidade-gps i{ margin-right:6px; }
.ml-cidade-busca{
  width:100%; min-height:48px; padding:10px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--bg);
  font:500 16px 'Manrope', sans-serif; /* 16px: o iOS não dá zoom no foco */
  color:var(--ink); -webkit-appearance:none; appearance:none;
}
.ml-cidade-busca:focus{ outline:2px solid var(--primary); border-color:transparent; }
.ml-cidade-lista{ list-style:none; margin:10px 0 0; padding:0; }
.ml-cidade-item{
  display:flex; align-items:center; gap:10px; width:100%; min-height:52px;
  padding:10px 6px; border:0; border-bottom:1px solid var(--line); background:transparent;
  text-align:left; font:600 15px 'Manrope', sans-serif; color:var(--ink); cursor:pointer;
}
.ml-cidade-item:hover,.ml-cidade-item:focus-visible{ background:var(--bg); }
.ml-cidade-item i{ color:var(--primary); width:16px; text-align:center; }
.ml-cidade-item span{ flex:1; }
.ml-cidade-item small{ color:var(--muted); font-weight:500; font-size:12px; }

/* Em telas largas vira janela centralizada. */
@media (min-width:700px){
  .ml-cidade-modal{ align-items:center; }
  .ml-cidade-folha{ border-radius:20px; max-height:80vh; padding-bottom:18px; animation:ml-cidade-surge .18s ease-out; }
  .ml-cidade-alca{ display:none; }
}

.ml-cidade-travado,.ml-cidade-travado body{ overflow:hidden; }

/* ---- Confirmação ---- */
.ml-cidade-toast{
  position:fixed; left:50%; bottom:calc(86px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:130; max-width:90vw; padding:10px 16px; border-radius:999px;
  background:var(--ink); color:#fff; font:600 13px 'Manrope', sans-serif;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
}
.ml-cidade-toast[hidden]{ display:none; }

@keyframes ml-cidade-sobe{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes ml-cidade-surge{ from{ transform:scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .ml-cidade-folha{ animation:none; } }

/* ==========================================================================
   Home em cache: blocos da cidade (trocados por JS depois que a página abre)
   ========================================================================== */
.ml-bloco { display: contents; }
.ml-bloco > * { transition: opacity .25s ease; }
.ml-geo-trocando .ml-bloco > * { opacity: 0; animation: ml-geo-revela .01s 6s forwards; } /* rede de segurança: se o JS falhar, revela em 6 s */
@keyframes ml-geo-revela { to { opacity: 1; } }
.ml-geo-trocando .ml-cidade-nome { visibility: hidden; animation: ml-geo-mostra .01s 6s forwards; } /* mesma rede de segurança: o nome da cidade nunca fica invisível */
@keyframes ml-geo-mostra { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .ml-bloco > * { transition: none; } }