/* ============================================
   OPHAALPUNT KIEZEN (Uber-stijl)
   Het lijstje onder het vertrekveld ("Mijn locatie" en "Op kaart zetten") en het
   kaartpaneel waarin de klant de kaart onder een vaste pin door sleept.

   Dit stond eerst onderaan step1.css. Het staat nu apart omdat het op twee plekken
   nodig is: op de boekingspagina van de website én op het startscherm van de app.
   Zo blijft er één versie van dit uiterlijk bestaan.
   ============================================ */

/* Het lijstje onder het ophaalveld: verschijnt zodra de klant dat veld aantikt.
   Bewust geen losse knoppen meer in beeld — het veld zelf is de knop. */
.pickup-menu {
    margin: -8px 0 14px;
    background: #fff;
    border: 1px solid #e3e6ec;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    animation: pickupMenuOpen .18s ease-out;
}

@keyframes pickupMenuOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pickup-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #212529;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f5;
    -webkit-tap-highlight-color: transparent;
}

.pickup-menu-item:last-child {
    border-bottom: none;
}

.pickup-menu-item:hover,
.pickup-menu-item:active {
    background: #f1f3f5;
}

.pickup-menu-item .pickup-menu-icoon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
}

.pickup-hint {
    margin: -8px 0 14px 4px;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

.pickup-map-panel {
    margin: 0 0 20px;
    border: 1px solid #e3e6ec;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.pickup-map-kop {
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    border-bottom: 1px solid #eef0f4;
}

.pickup-map-vak {
    position: relative;
    height: 320px;
}

.pickup-map-canvas {
    width: 100%;
    height: 100%;
}

/* De pin staat VAST in het midden; de kaart beweegt eronder door. */
.pickup-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
    z-index: 2;
}

.pickup-map-hint {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17,17,17,.85);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 18px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.pickup-map-gps {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.pickup-map-adres {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    border-top: 1px solid #eef0f4;
    min-height: 48px;
}

.pickup-map-adres.bezig {
    color: #9aa1ab;
    font-weight: 500;
}

.pickup-map-knoppen {
    display: flex;
    gap: 10px;
    padding: 0 16px 16px;
}

.pickup-map-annuleer,
.pickup-map-bevestig {
    flex: 1;
    padding: 13px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.pickup-map-annuleer {
    background: #f1f3f7;
    color: #495057;
    flex: 0 0 35%;
}

.pickup-map-bevestig {
    background: #111;
    color: #fff;
}

.pickup-map-bevestig:active {
    background: #333;
}

@media (max-width: 480px) {
    .pickup-map-vak { height: 260px; }
    .pickup-map-hint { font-size: 11px; padding: 6px 12px; }
}