/* ─────────────────────────────────────────────
 * Estilos específicos da página index (mapa).
 * Depende de base.css.
 * ───────────────────────────────────────────── */

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── LAYOUT ─────────────────────────────────── */
.main { display: flex; flex: 1; overflow: hidden; }

/* ── MAPA ───────────────────────────────────── */
.map-wrapper { flex: 1; position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; z-index: 1; }

.center-pin {
  position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  z-index: 600; pointer-events: none;
  transform: translate(-50%, -100%) rotate(-45deg);
  background: linear-gradient(135deg, #15803d, #22c55e);
  border-radius: 50% 50% 50% 0;
  border: 3px solid white;
  box-shadow: 0 4px 16px rgba(22,163,74,0.6);
}
.center-pin::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  top: 8px; left: 8px;
  background: white; border-radius: 50%;
}

/* ── HINTS FLUTUANTES ───────────────────────── */

/* Status flutuante no topo — só exibição, sem interação */
.map-hint2 {
  background: var(--navy);
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  border: 1px solid var(--border); border-radius: 20px;
  z-index: 500;
  pointer-events: none;
}

.map-hint2 .status-bar { border-radius: 20px; padding: 12px 16px; }

/* Botão flutuante na base — recebe clique */
.map-hint {
  display: flex;
  position: absolute; bottom: 17%; left: 50%; transform: translateX(-50%);
  z-index: 500;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
}
.map-hint4 {
  align-items: center;
  position: absolute;
  bottom: 27%;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 999;

  width: 500px;
}

#enderecoBar {
  display: flex;
  flex-direction: column; /* ESSA LINHA resolve */
  align-items: center;    /* mantém centralizado */
  text-align: center;     /* deixa o texto bonitinho */
  width: 100%;
  box-sizing: border-box;

  background: #06274a;
  color: #00ff66;

  padding: 8px 8px;
  border-radius: 12px;

  font-size: 15px;
  font-weight: 700;

  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

#enderecoText1 {
  display: block;
  white-space: pre-line;
  overflow-wrap: break-word;
  color: #ffffff; 
}

#enderecoText2 {
  display: block;
  white-space: pre-line;
  overflow-wrap: break-word;
  color: #00ff15; /* endereço em destaque */
  font-weight: 600;
}
/* Dica flutuante logo acima do hint — não recebe clique */
.map-hint3 {
  background: var(--navy);
  position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
  border: 1px solid var(--border); border-radius: 20px;
  z-index: 500;
  pointer-events: none;
}
.map-hint3 .status-bar { border-radius: 20px; padding: 12px 16px; }
.map-hint3 span { font-size: 10px; color: #fff; }

/* ── BOTÃO CONFIRMAR (override visual do index) ─ */
.confirm-btn {
  background: linear-gradient(135deg, rgba(3, 250, 93, 0.897), rgb(0, 185, 68));
}
.confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(5, 238, 90, 0.75), rgb(28, 175, 82));
  transform: translateY(1px);
  box-shadow: 0 8px 24px rgb(15, 134, 59);
}
#confirmBtnNo {
  background: linear-gradient(135deg, rgb(250, 3, 3), rgb(253, 3, 3));
}
#confirmBtnNo:hover:not(:disabled) {
  background: linear-gradient(135deg, rgb(238, 5, 5), rgb(197, 34, 34));
  transform: translateY(1px);
  box-shadow: 0 8px 24px rgb(255, 0, 0);
}

/* ── MOBILE ─────────────────────────────────── */
@media (max-width: 700px) {
  .main { flex-direction: column; }
  .map-wrapper { min-height: 42vh; }
}