body{
margin:0;
font-family:Arial;
}

#map{
height:100vh;
width:100%;
}

.route-card{
position:absolute;
top:20px;
left:20px;
width:300px;
background:white;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.2);
padding:15px;
z-index:1000;
}

.transport-row{
display:flex;
gap:10px;
margin-bottom:10px;
}

.mode{
border:none;
padding:8px;
border-radius:8px;
cursor:pointer;
background:#f1f5f9;
}

.mode.active{
background:#2563eb;
color:white;
}

.input-wrapper{
position:relative;
margin-bottom:10px;
}

input{
width:100%;
padding:8px;
border:1px solid #ccc;
border-radius:6px;
}

.results{
position:absolute;
background:white;
border:1px solid #ddd;
width:100%;
max-height:160px;
overflow-y:auto;
z-index:1001;
}

.results div{
padding:8px;
cursor:pointer;
border-bottom:1px solid #eee;
}

.results div:hover{
background:#f3f4f6;
}

.route-info{
margin-top:10px;
}

button{
width:100%;
padding:8px;
border:none;
border-radius:6px;
background:#2563eb;
color:white;
cursor:pointer;
}