body { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; }
#map { position:absolute; inset:0; }

#driving-instruction {
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.75); color:white; padding:12px 20px; border-radius:8px;
  max-width:90%; text-align:center; font-size:1.1em; z-index:1000; display:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

#speed-limit-box {
  position:absolute; top:20px; right:20px; background:rgba(0,0,0,0.8); color:white;
  padding:10px 16px; border-radius:8px; font-size:1.3em; font-weight:bold; z-index:1000;
  border:3px solid #ff4444; min-width:140px; text-align:center;
}

#status {
  position:absolute; bottom:20px; left:20px; background:rgba(0,0,0,0.7); color:#0f0;
  padding:12px 16px; border-radius:8px; z-index:1000; font-family:monospace; max-width:320px;
  line-height:1.4;
}

.toggle-link { margin-top:6px; cursor:pointer; color:#ffaa00; display:block; }
.toggle-link:hover { text-decoration:underline; }
.toggle-link.active { color:#00ff88 !important; }

#settings-panel {
  background: rgba(0,0,0,0.7);
  border-radius: 8px;
  padding: 10px;
  color: white;
}

.mapboxgl-popup {
  max-width: 300px;
}
.mapboxgl-popup-content {
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
}
.mapboxgl-popup-tip {
  border-top-color: rgba(0,0,0,0.9) !important;
}

.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}

.modal-content {
  background-color: #1a1a1a;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #333;
  width: 80%;
  max-width: 400px;
  border-radius: 12px;
  color: white;
  position: relative;
}

.close-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
  color: white;
  text-decoration: none;
}

.filter-options label {
  display: block;
  margin: 12px 0;
  font-size: 1.1em;
  cursor: pointer;
}

.filter-options input[type="radio"] {
  margin-right: 10px;
}