body {

margin:0;

font-family:Arial,sans-serif;

overflow:hidden;

}



.planner {

display:flex;

height:100vh;

}



.sidebar {

width:350px;

padding:20px;

background:#f5f5f5;

box-sizing:border-box;

overflow-y:auto;

}



.sidebar h2 {

margin-top:0;

}



.sidebar label {

display:block;

margin-top:12px;

margin-bottom:5px;

font-weight:bold;

}



.sidebar input {

width:100%;

padding:10px;

box-sizing:border-box;

border:1px solid #ccc;

border-radius:5px;

}



button {

width:100%;

padding:12px;

margin-top:12px;

border:0;

border-radius:6px;

cursor:pointer;

font-size:16px;

}



.gps-button {

background:#555;

color:white;

}



.route-button {

background:#008c45;

color:white;

}



.ev-button {

background:#0066cc;

color:white;

}



.ev-result {

margin-top:15px;

padding:12px;

background:white;

border-radius:6px;

font-weight:bold;

}



#map {

flex:1;

height:100%;

}




.suggestions {

position:relative;

}



.suggestion-item {

background:white;

border:1px solid #ddd;

padding:10px;

cursor:pointer;

font-size:14px;

}



.suggestion-item:hover {

background:#eee;

}




.custom-marker {

background:none;

border:none;

}





@media(max-width:768px){


.planner{

flex-direction:column;

}


.sidebar{

width:100%;

height:auto;

}


#map{

height:50vh;

}


}

/* =========================================================
   EV ROUTEPLANNER - FLOATING CARD
   ========================================================= */

.floating-card {
    position: absolute;
    top: 20px;
    left: 20px;

    width: 360px;
    max-width: calc(100vw - 40px);

    background: rgba(255, 255, 255, 0.97);

    border-radius: 16px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.20);

    padding: 20px;

    z-index: 1000;

    box-sizing: border-box;

    font-family: Arial, sans-serif;
}


/* =========================================================
   TITEL
   ========================================================= */

.floating-card h2 {
    margin: 0 0 16px 0;

    font-size: 20px;

    line-height: 1.2;
}


/* =========================================================
   LABELS
   ========================================================= */

.floating-card label {
    display: block;

    margin-top: 10px;
    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   INPUTS
   ========================================================= */

.floating-card input {
    width: 100%;

    box-sizing: border-box;

    padding: 11px 12px;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-size: 15px;

    background: #fff;
}


.floating-card input:focus {
    outline: none;

    border-color: #1976d2;

    box-shadow:
        0 0 0 2px rgba(25, 118, 210, 0.12);
}


/* =========================================================
   SUGGESTIES
   ========================================================= */

.floating-card .suggestions {
    position: relative;

    z-index: 2000;

    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   ROUTE KNOP
   ========================================================= */

.floating-card .route-button {
    width: 100%;

    margin-top: 16px;

    padding: 12px;

    border: none;

    border-radius: 9px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;
}


/* =========================================================
   GPS
   ========================================================= */

.floating-card .gps-button {
    width: 100%;

    padding: 10px;

    margin-bottom: 8px;

    border: none;

    border-radius: 8px;

    cursor: pointer;
}


/* =========================================================
   INSTELLINGEN / TANDWIEL
   ========================================================= */

.floating-card .settings-button {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 36px;
    height: 36px;

    border: none;

    border-radius: 50%;

    background: #f1f1f1;

    font-size: 18px;

    cursor: pointer;
}


.floating-card .settings-button:hover {
    background: #e2e2e2;
}


/* =========================================================
   INSTELLINGEN PANEL
   ========================================================= */

.floating-card .settings-panel {
    display: none;

    margin-top: 15px;

    padding-top: 15px;

    border-top: 1px solid #ddd;
}


.floating-card .settings-panel.open {
    display: block;
}


/* =========================================================
   ROUTE INFORMATIE
   ========================================================= */

.floating-card .route-info {
    margin-top: 15px;

    padding-top: 12px;

    border-top: 1px solid #ddd;
}


.floating-card .route-info p {
    margin: 7px 0;

    font-size: 14px;
}


/* =========================================================
   EV RESULTAAT
   ========================================================= */

.floating-card .ev-result {
    margin-top: 12px;

    padding: 12px;

    border-radius: 8px;

    background: #f5f5f5;

    font-size: 14px;
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {

    .floating-card {

        top: 10px;
        left: 10px;

        width: calc(100vw - 20px);

        max-width: none;

        padding: 16px;

        border-radius: 14px;
    }


    .floating-card h2 {

        font-size: 18px;

        margin-bottom: 12px;
    }


    .floating-card input {

        padding: 10px;

        font-size: 16px;
    }


    .floating-card .route-button {

        padding: 13px;

        font-size: 16px;
    }

}