/* =============================================
   MAPA — TEMA CLARO
   Fundo off-white acinzentado, sem o branco cru
   ============================================= */
:root {
  /* painel usa vidro levemente tintado, não branco puro */
  --panel-bg:       rgba(235, 240, 250, 0.94);
  --panel-border:   rgba(200, 215, 240, 0.70);
  --panel-shadow:   0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --bar-bg:         rgba(232, 238, 250, 0.92);
  --bar-border:     rgba(160, 185, 230, 0.30);
  --text-primary:   #0f172a;
  --text-secondary: #5a6a82;
  --text-label:     #374151;
  --accent:         #1a56db;
  --accent-hover:   #143ba9;
  --accent-glow:    rgba(26, 86, 219, 0.22);
  --accent-subtle:  rgba(219, 234, 254, 0.70);
  --input-bg:       rgba(248, 250, 255, 0.90);
  --input-border:   rgba(180, 200, 235, 0.80);
  --chip-bg:        rgba(219, 234, 254, 0.70);
  --chip-hover:     rgba(191, 219, 254, 0.90);
  --chip-text:      #1e40af;
  --icon-color:     #4a5568;
  --icon-hover-bg:  rgba(26, 86, 219, 0.08);
  --icon-active-bg: rgba(26, 86, 219, 0.16);
  --divider:        rgba(180, 200, 235, 0.60);
  --icon-sun-display:  none;
  --icon-moon-display: flex;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* =============================================
   MAPA
   ============================================= */
#map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #d8e4f0;
}

.marcador-origem,
.marcador-destino {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* =============================================
   PAINEL DE BUSCA
   ============================================= */
.search-panel {
  position: fixed;
  bottom: 80px;
  left: 50%;
  width: min(370px, calc(100vw - 24px));
  transform: translateX(-50%) translateY(calc(100% + 28px));
  opacity: 0;
  visibility: hidden;
  background: var(--panel-bg);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  box-shadow: var(--panel-shadow);
  padding: 14px 16px 16px;
  z-index: 1000;
  transition:
    transform 0.40s cubic-bezier(0.34, 1.28, 0.64, 1),
    opacity   0.22s ease,
    visibility 0s 0.40s;
  will-change: transform, opacity;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-panel.aberto {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.40s cubic-bezier(0.34, 1.28, 0.64, 1),
    opacity   0.22s ease,
    visibility 0s 0s;
}

.search-panel::-webkit-scrollbar { width: 3px; }
.search-panel::-webkit-scrollbar-track { background: transparent; }
.search-panel::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 4px; }

/* cabeçalho */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  min-height: 28px;
}

.panel-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* X centralizado explicitamente */
.close-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: none;
  background: var(--icon-hover-bg);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}
.close-btn svg {
  display: block;
  flex-shrink: 0;
}
.close-btn:hover {
  background: var(--icon-active-bg);
  color: var(--accent);
}

/* =============================================
   CHIPS DE LOCAIS
   ============================================= */
.locais-list { margin-bottom: 12px; }

.locais-list h4 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin-bottom: 7px;
}

.locais-list ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.locais-list li {
  padding: 4px 10px;
  background: var(--chip-bg);
  color: var(--chip-text);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.locais-list li:hover  { background: var(--chip-hover); transform: translateY(-1px); }
.locais-list li:active { transform: translateY(0); }

/* =============================================
   INPUTS
   ============================================= */
.input-field { margin-bottom: 10px; }

.input-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-label);
  margin-bottom: 5px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon input {
  width: 100%;
  padding: 10px 64px 10px 12px;
  font-family: inherit;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: 10px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 16px; /* evita zoom iOS */
}

.input-with-icon input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.input-with-icon input::placeholder { color: var(--text-secondary); }

.gps-icon {
  position: absolute;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.18s ease, background 0.18s ease;
  touch-action: manipulation;
}
.gps-icon:hover { color: var(--accent); background: var(--icon-hover-bg); }

.clear-input-icon {
  position: absolute;
  right: 44px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.15s ease, background 0.15s ease;
  z-index: 3;
  padding: 0;
  touch-action: manipulation;
}
.clear-input-icon:hover { color: var(--text-primary); background: var(--icon-hover-bg); }

/* =============================================
   CAIXA GPS
   ============================================= */
.permissao-box {
  background: var(--accent-subtle);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 12px;
  text-align: center;
  display: none;
}
.permissao-box p { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; }
.permissao-box button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}
.permissao-box button:hover { background: var(--accent-hover); }

/* =============================================
   BOTÃO CALCULAR ROTA
   ============================================= */
.primary-btn {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
  margin-top: 4px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
}
.primary-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.primary-btn:active  { transform: translateY(0); box-shadow: none; }
.primary-btn:disabled {
  background: var(--divider);
  color: var(--text-secondary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =============================================
   BARRA DE AÇÕES
   ============================================= */
.action-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  background: var(--bar-bg);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--bar-border);
  border-radius: 50px;
  box-shadow: var(--panel-shadow);
  z-index: 1001;
  /* impede que fique muito largo em telas pequenas */
  max-width: calc(100vw - 24px);
}

.action-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  /* área mínima de toque 44px já garantida pela própria dimensão */
}
.action-btn:hover  { background: var(--icon-hover-bg); color: var(--accent); transform: translateY(-1px); }
.action-btn:active { transform: scale(0.90); background: var(--icon-active-bg); }
.action-btn.active { background: var(--icon-active-bg); color: var(--accent); }

.bar-separator {
  width: 1px;
  height: 20px;
  background: var(--divider);
  margin: 0 1px;
  flex-shrink: 0;
}

/* ícones do tema */
.action-btn .icon-sun  { display: var(--icon-sun-display); }
.action-btn .icon-moon { display: var(--icon-moon-display); }

/* =============================================
   TOOLTIPS
   ============================================= */
.action-btn::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.88);
  color: #f1f5f9;
  font-size: 11.5px;
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.action-btn::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.88);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
}
.action-btn:hover::after,
.action-btn:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =============================================
   SPINNER
   ============================================= */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; animation: spin 0.75s linear infinite; margin-right: 6px; }

/* =============================================
   RESPONSIVO MOBILE
   ============================================= */
@media (max-width: 480px) {
  .search-panel {
    bottom: 78px;
    border-radius: 16px;
    padding: 12px 14px 14px;
    /* ocupa quase toda a largura em mobile */
    width: calc(100vw - 20px);
    /* no mobile limita altura para não cobrir o mapa */
    max-height: calc(100dvh - 140px);
  }

  .action-btn { width: 42px; height: 42px; }

  /* remove tooltips no touch — não há hover real */
  .action-btn::after,
  .action-btn::before { display: none; }

  /* chips um pouco menores */
  .locais-list li { font-size: 11.5px; padding: 4px 9px; }
}

/* telas muito pequenas (< 360px) */
@media (max-width: 360px) {
  .action-btn { width: 38px; height: 38px; }
  .action-bar { gap: 0; padding: 4px 4px; }
}