/* ARQUIVO: css/mapa.css */

:root { --primary: #2E7D32; --glass-transparent: rgba(255, 255, 255, 0.95); --bg-solid: #ffffff; --glass-border: rgba(0, 0, 0, 0.1); --text-color: #333; }
body.dark-mode { --glass-transparent: rgba(30, 30, 30, 0.95); --bg-solid: #1e1e1e; --glass-border: rgba(255, 255, 255, 0.1); --text-color: #f0f0f0; background-color: #121212; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }

body, html { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; position: fixed; font-family: 'Poppins', sans-serif; background-color: #e5e3df; }

/* BLINDAGEM: O botão de adicionar NÃO obedece o modo canhoto */
body.left-handed-mode #btn-add-main {
    left: auto !important;
    right: 15px !important; /* Mantém ele fixo na direita da tela */
    transform: none !important; /* Remove qualquer alinhamento central */
    width: auto !important; /* Deixa o tamanho natural dele */
}

/* Compensação para a bottom-action original, para ela não arrastar o botão */
body.left-handed-mode .bottom-action {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    justify-content: flex-end !important;
    padding-right: 15px;
}

#map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; touch-action: none; }
body.dark-mode #map { filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(1.1) grayscale(0.2); }

/* --- CORREÇÕES VISUAIS DO GOOGLE MAPS --- */
.gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 16px !important; max-width: 90vw !important; max-height: 75vh !important; overflow: hidden !important; z-index: 99999999 !important; position: absolute !important; }
.gm-style .gm-style-iw-t { z-index: 99999999 !important; }
.gm-style .gm-style-iw-d { overflow-x: hidden !important; overflow-y: auto !important; padding: 15px !important; box-sizing: border-box !important; padding-bottom: 25px !important; margin: 0 !important; }

/* BARRA DE ROLAGEM */
.gm-style .gm-style-iw-d::-webkit-scrollbar { width: 10px !important; display: block !important; }
.gm-style .gm-style-iw-d::-webkit-scrollbar-track { background: #e0e0e0 !important; border-radius: 5px; }
.gm-style .gm-style-iw-d::-webkit-scrollbar-thumb { background: #555 !important; border-radius: 10px; border: 2px solid #e0e0e0; }

.gm-ui-hover-effect { top: 5px !important; right: 5px !important; background: rgba(255,255,255,0.9) !important; border-radius: 50% !important; z-index: 100000000 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* ANIMAÇÕES */
@keyframes respirar { 0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7); transform: scale(1); } 70% { box-shadow: 0 0 0 15px rgba(46, 125, 50, 0); transform: scale(1.1); } 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); transform: scale(1); } }
@keyframes slideUpPanel { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideUp { from { transform: translateX(-50%) translateY(100px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes girarFruta { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

.spin-fruta { display: inline-block; animation: girarFruta 1s infinite linear; margin-left: 8px; font-size: 18px; vertical-align: middle; }
.btn-pulsante { animation: respirar 2s infinite; background-color: #fff !important; border: 2px solid var(--primary) !important; color: var(--primary) !important; }

/* UI Elements */
.top-bar { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 500px; display: flex; gap: 8px; z-index: 1000; pointer-events: none; transition: opacity 0.2s; }
.top-bar > * { pointer-events: auto; }

.search-container { flex: 1; position: relative; min-height: 50px; pointer-events: auto; }
.search-box { width: 100%; min-height: 50px; border-radius: 25px; display: flex; align-items: center; padding: 12px 15px; background: #ffffff !important; border: 1px solid #ccc; box-shadow: 0 4px 15px rgba(0,0,0,0.2); box-sizing: border-box; }
#searchInput { width: 100%; border: none; background: transparent !important; font-size: 15px; font-weight: 600; color: #000; outline: none; margin: 0; padding: 0; caret-color: #2E7D32; resize: none; overflow: hidden; display: block; line-height: 1.4; max-height: 120px; }

.fruit-search-results { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--bg-solid); border-radius: 16px; max-height: 50vh; overflow-y: auto; z-index: 2000; display: none; box-shadow: 0 10px 40px rgba(0,0,0,0.4); border: 1px solid var(--glass-border); pointer-events: auto; }
.fruit-result-item { display: flex; align-items: center; gap: 12px; padding: 15px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.05); user-select: none; }
.search-section-header { padding: 10px 15px; font-size: 12px; font-weight: 800; color: var(--primary); background: rgba(0,0,0,0.03); letter-spacing: 1px; text-transform: uppercase; }

.btn-circle, .tool-btn { background: var(--glass-transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); }
.btn-circle { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-color); overflow: hidden; padding: 0; }
.btn-roxo { background-color: #7B1FA2 !important; color: #69F0AE !important; border: 1px solid rgba(0,0,0,0.1) !important; backdrop-filter: none !important; }
.user-photo-mini { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================
   OS 6 BOTÕES DA TELA PRINCIPAL (LADO DIREITO)
========================================== */
.side-tools { position: absolute; bottom: 120px; right: 15px; display: flex; flex-direction: column; gap: 12px; z-index: 1000; pointer-events: none; }
.side-tools > * { pointer-events: auto; }
.tool-btn { width: 45px; height: 45px; border-radius: 50%; color: var(--text-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.1s; }
.tool-btn:active { transform: scale(0.9); }
.tool-btn.active-traffic { background-color: #fff !important; border: 2px solid #2E7D32 !important; color: #2E7D32 !important; }
body.dark-mode .tool-btn.active-traffic { background-color: #1e1e1e !important; color: #69F0AE !important; border-color: #69F0AE !important; }

#btn-clear-route { background: #d32f2f !important; color: white; border: none; display: none; }
#btn-admin-panel { display: none; background: #ffeb3b !important; color: #333 !important; text-decoration: none; }

body.left-handed-mode .side-tools { left: 15px !important; right: auto !important; align-items: flex-start !important; }

.bottom-action { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 1000; width: 90%; max-width: 180px; display: flex; justify-content: center; pointer-events: none; }
#btn-add-main { pointer-events: auto; height: 55px; padding: 0 30px; background: linear-gradient(135deg, #2E7D32, #1b5e20); color: white; border: none; border-radius: 30px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 25px rgba(46, 125, 50, 0.5); cursor: pointer; width: 100%; }

.add-confirm-dock { position: absolute; bottom: 40px; width: 100%; display: none; justify-content: center; gap: 15px; z-index: 1100; pointer-events: auto; }
.btn-dock { height: 60px; padding: 0 25px; border-radius: 30px; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.btn-dock.confirm { background: #000; color: white; }
.btn-dock.cancel { background: white; color: #d32f2f; }

#route-panel { display: none; position: absolute; bottom: 0; width: 100%; background: var(--bg-solid); padding: 25px; border-radius: 25px 25px 0 0; box-shadow: 0 -5px 20px rgba(0,0,0,0.2); z-index: 2000; }

/* Modals */
.glass-card, #terms-modal-content { background: var(--bg-solid) !important; backdrop-filter: none !important; opacity: 1; box-shadow: 0 10px 40px rgba(0,0,0,0.3); border: none; }
#ai-modal, #login-overlay, #share-modal, #transport-modal, #terms-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999999; backdrop-filter: blur(5px); justify-content: center; align-items: center; }
.glass-card { width: 90%; max-width: 380px; border-radius: 24px; padding: 25px; max-height: 90vh; overflow-y: auto; }
#form-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999999; backdrop-filter: blur(5px); align-items: flex-end; padding-bottom: 0; justify-content: center; }
#form-overlay .glass-card { width: 100%; max-width: 100%; border-radius: 25px 25px 0 0; padding: 30px 25px; max-height: 85vh; animation: slideUpPanel 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); margin: 0; }

.camera-btn-wrapper { position: relative; width: 100%; height: 140px; background: #f0f0f0; border: 2px dashed #ccc; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 20px; transition: all 0.2s; overflow: hidden; }
.camera-btn-wrapper:active { background: #e0e0e0; transform: scale(0.98); }
.camera-btn-wrapper.has-photo { border: 2px solid var(--primary); background: #fff; }
.camera-icon { font-size: 40px; color: var(--primary); margin-bottom: 5px; }
.camera-text { font-size: 14px; font-weight: bold; color: #555; }
#photo-preview { display: none; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
#photo { display: none; }

.btn-install-trigger { display: none; background: linear-gradient(45deg, #FFC107, #FF9800) !important; color: #333 !important; margin-top: 15px; margin-bottom: 10px; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); animation: pulse 2s infinite; }

input, select, textarea { background: #f5f5f5 !important; border: 1px solid #ddd; color: #333; width: 100%; padding: 12px; border-radius: 10px; margin-bottom: 15px; font-family: inherit; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #2d2d2d !important; border: 1px solid #444; color: white; }
h2 { margin: 0 0 15px 0; color: var(--primary); font-size: 20px; display: flex; align-items: center; gap: 8px; }
label { font-size: 11px; font-weight: 700; margin-bottom: 5px; display: block; text-transform: uppercase; opacity: 0.7; }

/* BOTOES BASE */
.btn-full { width: 100%; padding: 14px; border-radius: 12px; border: none; font-weight: bold; cursor: pointer; margin-top: 5px; }
.btn-green { background: var(--primary); color: white; cursor: pointer; border: none; }
.btn-cancel { background: #eee; color: #333; border: none; padding: 12px; border-radius: 12px; font-weight: bold; cursor: pointer; }
.btn-google { background: #4285F4; color: white; border: none; padding: 12px; border-radius: 12px; font-weight: bold; width: 100%; margin-bottom: 10px; cursor: pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-row { display: flex; gap: 10px; }

/* ==========================================
   💎 ESTILOS DO BALÃO PREMIUM (COM ÁRVORE NO TAMANHO CERTO)
   ========================================== */
.custom-info { 
    min-width: 240px !important; /* Voltou para o original que estava perfeito */
    max-width: 240px !important; 
    font-family: 'Poppins', sans-serif; 
    font-size: 13px; 
    padding-bottom: 5px; 
    box-sizing: border-box; 
    padding-right: 2px;
}
.custom-info h3 { margin: 0 0 5px 0; font-size: 17px; font-weight: 800; color: #333; line-height: 1.2; word-wrap: break-word; overflow-wrap: break-word; }
.custom-info p { white-space: normal !important; word-wrap: break-word; overflow-wrap: break-word; color: #666; font-size: 12px; }

/* ==========================================
   🚨 TRAVA LATERAL DOS ALERTAS (BURACO, POLÍCIA, ETC)
   ========================================== */
.alerta-balao {
    width: 200px !important;      /* Largura travada */
    max-width: 200px !important;  /* Impede de esticar */
    box-sizing: border-box;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.alerta-balao .botoes-alerta {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap; /* SEGREDO MÁGICO: Se os botões não couberem, eles descem pra segunda linha em vez de estourar a parede! */
    margin-top: 5px;
}

/* Imagem da Fruta */
.info-img-container { width: 100%; height: 130px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.info-img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; transition: transform 0.2s ease; }
.info-img:active { transform: scale(0.95); }

/* Botoes de Ação Inferiores (Ir, Atualizar, etc) */
.iw-btn { padding: 12px 0; border: none; border-radius: 14px; font-size: 12px; font-weight: bold; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; background: white; border: 1px solid #eee; color: #555; transition: all 0.2s; position: relative; z-index: 200000000 !important; min-height: 55px; outline: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.04); }
.iw-btn:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.1); background: #f9f9f9; }
.iw-btn span.label-btn { font-size: 10px; font-weight: 800; line-height: 1; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Área da Inteligência Artificial */
.ai-buttons-container { background: #fafafa; border-radius: 14px; padding: 12px; margin-bottom: 12px; border: 1px solid #f0f0f0; }
.ai-label { font-size: 10px; font-weight: 800; color: #888; margin-bottom: 10px; display: block; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Cores e Fundos Suaves pros Botões da IA */
.bg-blue { color: #1565c0; border-color: rgba(21, 101, 192, 0.2); background: #f0f8ff; } 
.bg-purple { color: #7b1fa2; border-color: rgba(123, 31, 162, 0.2); background: #faf0ff; } 
.bg-green { color: #2e7d32; border-color: rgba(46, 125, 50, 0.2); background: #f0fff0; } 
.bg-orange { color: #e65100; border-color: rgba(230, 81, 0, 0.2); background: #fff5e6; }

/* Cabeçalho do Alerta de Via (Buraco, Polícia) */
.cabecalho-via {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
    border-radius: 12px 12px 0 0; /* Arredonda as pontas de cima */
}
.cabecalho-via h3 {
    margin: 0 !important; 
    font-size: 16px;
}

.nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--glass-border); padding-bottom: 10px; }
.nav-stats { display: flex; justify-content: space-between; align-items: center; }
.stat-box { text-align: center; flex: 1; }
.stat-val { font-size: 28px; font-weight: 800; color: var(--primary); display: block; line-height: 1; }
.stat-lbl { font-size: 10px; font-weight: 700; color: #888; text-transform: uppercase; margin-top: 5px; display: block; }
#btn-stop-nav-small { background: #ffebee; color: #d32f2f; border: none; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 12px; cursor: pointer; }
#btn-stop-nav { display: none !important; }

.transport-btns { display:flex; gap:10px; justify-content: center; margin-top: 10px; margin-bottom: 10px; }
.transport-option { flex: 1; padding: 15px 10px; border-radius: 12px; border: none; cursor: pointer; font-weight: 700; display: flex; flex-direction: column; gap:6px; align-items:center; transition: transform 0.2s; }
.transport-option:active { transform: scale(0.95); }
.transport-option .icons-row { display: flex; gap: 5px; align-items: center; justify-content: center; }
.transport-car { background: linear-gradient(135deg,#ff9f43,#ee5253); color: white; }
.transport-bike { background: linear-gradient(135deg,#0abde3,#5f27cd); color: white; }
.transport-walk { background: linear-gradient(135deg,#1dd1a1,#10ac84); color: white; }

#ai-loading { display: none; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: #2196f3; }
.spinner { width: 18px; height: 18px; border: 2px solid #2196f3; border-top-color: transparent; border-radius: 50%; animation: spin infinite linear; }
#ai-result-content { font-size: 14px; line-height: 1.6; color: #333; }
body.dark-mode #ai-result-content { color: #f0f0f0; }

#user-profile-area { text-align: center; margin-top: 15px; display: none; }
.profile-pic-large { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); margin-bottom: 10px; }
.share-options { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.share-btn { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.1s; background: #f9f9f9; color: #333; }
.share-btn.native { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }

.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 12px 24px; border-radius: 30px; font-size: 14px; font-weight: 500; z-index: 9999; opacity: 0; transition: opacity 0.3s; }
.toast.show { opacity: 1; }

#image-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 9999999; justify-content: center; align-items: center; flex-direction: column; }
#image-modal img { max-width: 95%; max-height: 80%; border-radius: 12px; }
#image-modal .close-btn { position: absolute; top: 20px; right: 20px; background: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 10000000; }
#image-modal .share-img-btn { margin-top: 20px; background: white; color: #333; border: none; padding: 12px 30px; border-radius: 30px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; z-index: 10000000; }

.ai-note-popup { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 350px; background: white; border-radius: 16px; padding: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); z-index: 999999; animation: slideUp 0.3s ease; cursor: pointer; display: none; }
.ai-note-popup:active { transform: translateX(-50%) scale(0.98); background: #f9f9f9; }

#offline-alert { display: none; position: fixed; top: 90px; left: 50%; transform: translateX(-50%); background: #d32f2f; color: white; padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: bold; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 5003; cursor: pointer; align-items: center; gap: 8px; }

/* ==========================================
   TELA DA BÚSSOLA (AQUI ESTÁ A MÁGICA DO CALÇO)
========================================== */
#compass-screen { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: #000; color: #fff; 
    z-index: 6000; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    padding-bottom: 180px; /* O CALÇO AQUI! Empurra o centro pra cima da gaveta */
}

.arrow-nav { 
    width: 0; height: 0; 
    border-left: 40px solid transparent; 
    border-right: 40px solid transparent; 
    border-bottom: 120px solid #69F0AE; 
    margin-bottom: 30px; 
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    filter: drop-shadow(0 0 15px rgba(105, 240, 174, 0.6)); 
}

.compass-dist { font-size: 48px; font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; }
.compass-label { font-size: 14px; text-transform: uppercase; color: #aaa; letter-spacing: 2px; }
.btn-exit-compass { position: absolute; bottom: 40px; background: #333; color: white; border: 1px solid #555; padding: 15px 30px; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; }

#btn-sound-toggle { background: none; border: none; color: #555; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; }
#btn-sound-toggle.active { color: var(--primary); }

.d-none { display: none !important; }

/* ==========================================
   ESTILO DO TRADUTOR PREMIUM (GLASSMORPHISM)
========================================== */
.language-wrapper {
    position: absolute; 
    top: 15px;
    right: 15px; /* Caixinha fixada no canto superior direito */
    z-index: 9999;
    background: var(--glass-transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 5px 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid var(--glass-border);
}

/* Esconde a barra preta chata do Google que fica no topo do site */
.skiptranslate iframe {
    display: none !important;
}

body {
    top: 0 !important; 
    margin-top: 0px !important;
}

#goog-gt-tt { display: none !important; }
.goog-logo-link { display: none !important; }
.goog-te-gadget { color: transparent !important; font-size: 0px !important; }

/* Deixa o botão de escolha mais limpo e arredondado */
.goog-te-combo { 
    background: transparent !important; 
    color: var(--text-color) !important; 
    border: none !important; 
    border-radius: 12px; 
    padding: 5px; 
    font-family: 'Poppins', sans-serif; 
    font-size: 12px; 
    width: 100%; 
    outline: none; 
    cursor: pointer; 
}

.goog-te-gadget-simple img {
    display: none !important; /* Esconde a logo do google do botão */
}

/* Fim estilos do tradutor */

font, font > span { display: contents !important; }
.btn-full, .btn-dock, .transport-option, .iw-btn, #btn-add-main, .btn-green, .btn-cancel, .label-btn, .btn-google { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.btn-full, .btn-dock, .transport-option, .iw-btn, .btn-green, .btn-cancel, .btn-google { display: flex; justify-content: center; align-items: center; text-align: center; }
.btn-full span:not(.material-icons-round), .btn-dock span:not(.material-icons-round), .iw-btn span:not(.material-icons-round), .btn-green span:not(.material-icons-round), .btn-cancel span:not(.material-icons-round), .btn-google span:not(.material-icons-round) { display: inline-block !important; text-align: center !important; }

/* ==========================================
   O BONEQUINHO VOLTOU REDONDO
========================================== */
.gm-compass, .gm-tilt, .gmnoprint[role="control"], .gmnoprint[role="menubar"] { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.gm-svpc { border-radius: 50% !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; overflow: hidden !important; background-color: rgba(255, 255, 255, 0.9) !important; }

/* LIMPANDO A POLUIÇÃO DO STREET VIEW E LINKS GOOGLE */
.gm-iv-address { display: none !important; } 
.gm-fullscreen-control { display: none !important; } 
button[title="Fechar o Street View"] { display: none !important; } 
a[href^="https://maps.google.com/maps"], a[title="Abrir esta área no Google Maps (abre uma nova janela)"] { display: none !important; pointer-events: none !important; }
.gm-style-cc a { pointer-events: none !important; text-decoration: none !important; color: inherit !important; }

/* ==========================================
   MODO NOTURNO
========================================== */
body.dark-mode .search-box { background-color: #222222 !important; border: 1px solid #444 !important; }
body.dark-mode #searchInput { color: #ffffff !important; background-color: transparent !important; caret-color: #00FF00 !important; }
body.dark-mode #searchInput::placeholder { color: #bbbbbb !important; }
body.dark-mode .search-box .material-icons-round { color: #81C784 !important; }
body.dark-mode .gm-style-iw.gm-style-iw-c, body.dark-mode .gm-style-iw-tc::after { filter: invert(1) hue-rotate(180deg) brightness(1.15) contrast(0.9) !important; -webkit-filter: invert(1) hue-rotate(180deg) brightness(1.15) contrast(0.9) !important; background-color: #ffffff !important; }
body.dark-mode .custom-info h3, body.dark-mode .custom-info p, body.dark-mode .custom-info span, body.dark-mode .custom-info div { color: #333333 !important; }
body.dark-mode .custom-info .iw-btn, body.dark-mode .custom-info .iw-btn * { color: #555555 !important; }
body.dark-mode .bg-blue { border-color: #bbdefb !important; } 
body.dark-mode .bg-purple { border-color: #e1bee7 !important; } 
body.dark-mode .bg-green { border-color: #c8e6c9 !important; } 
body.dark-mode .bg-orange { border-color: #ffe0b2 !important; }

/* ==========================================
   A NOVA COLUNA VERTICAL NA DIREITA E NAVEGAÇÃO
========================================== */

/* 1. O MODAL DE NAVEGAÇÃO (HUD) - Cravado na base, 100% da tela */
#nav-hud { 
    position: fixed !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important;
    width: 100% !important; 
    border-radius: 25px 25px 0 0 !important;
    z-index: 99999 !important; 
    box-sizing: border-box !important;
    display: none; 
    flex-direction: column;
    background: var(--bg-solid);
    padding: 20px 25px 35px 25px;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.3);
}

/* 2. VELOCÍMETRO (Fica do lado ESQUERDO) */
#free-drive-bubble { 
    position: fixed !important; 
    bottom: 30px !important; 
    left: 20px !important; 
    width: 75px; height: 75px; 
    background: var(--glass-transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
    border: 4px solid var(--primary); border-radius: 50%; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    z-index: 1500; box-shadow: 0 6px 20px rgba(0,0,0,0.3); color: var(--primary); transition: all 0.3s ease; 
}
#fd-speed-val { font-size: 32px; font-weight: 900; line-height: 1; margin-top: 5px; }
.fd-speed-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; }
#free-drive-bubble.speed-warning { border-color: #d32f2f; color: #d32f2f; background: rgba(255, 255, 255, 0.95); animation: piscarVermelho 0.5s infinite alternate; }
@keyframes piscarVermelho { from { box-shadow: 0 0 10px rgba(211, 47, 47, 0.5); background: rgba(255, 255, 255, 0.95); } to { box-shadow: 0 0 30px rgba(211, 47, 47, 1); background: #ffebee; } }

/* Botão de Sair da Navegação Livre */
#btn-exit-free-drive-sexy { position: absolute; top: 25px; right: 20px; width: 50px; height: 50px; background: #ffffff; color: #d32f2f; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.3); cursor: pointer; transition: all 0.2s ease; z-index: 1500; }
#btn-exit-free-drive-sexy:active { transform: scale(0.9) rotate(-20deg); }
#btn-exit-free-drive-sexy span { font-size: 28px; font-weight: bold; }

/* 3. TRIÂNGULO DO WAZE (Mesma reta do velocímetro) */
#btn-alert-waze { 
    position: fixed !important; 
    bottom: 37px !important; /* Alinhamento a laser com o centro do velocímetro */
    right: 20px !important; 
    left: auto !important; 
    z-index: 99999 !important; 
}

/* Menu do Triângulo (Abre para a esquerda na mesma altura) */
#waze-alert-menu { 
    position: fixed !important;
    bottom: 37px !important; 
    right: 90px !important; 
    left: auto !important;
    z-index: 99999 !important; 
}

/* 4. BOTÃO DE TRÂNSITO (Perfeitamente centralizado em cima do triângulo) */
#btn-traffic-free { 
    position: fixed !important; 
    bottom: 115px !important; /* Logo acima do triângulo com uma margem de respiro */
    right: 25px !important; /* Empurrado 5px a mais para o centro dele bater com o centro do triângulo */
    left: auto !important; 
    z-index: 99999 !important; 
    width: 50px; height: 50px; 
    background: var(--glass-transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
    border: 1px solid var(--glass-border); color: var(--text-color); border-radius: 50%; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#btn-traffic-free.active-traffic { background: #fff !important; border: 3px solid #2E7D32 !important; color: #2E7D32 !important; }

/* 5. FERRO-VELHO (Limpando o lixo inútil) */
#btn-recenter-nav { display: none !important; } /* Seta velha do GPS */
#btn-orientation-mode { display: none !important; } /* Bússola inútil */

/* --- LIMPA O BURACO DO TOPO --- */
.gm-style-iw-c {
    padding: 0 !important; /* Tira o espaço interno que o Google coloca */
}

.gm-style-iw-d {
    overflow: hidden !important; /* Evita que apareça barra de rolagem chata */
    margin: 0 !important;
}