.booking-map-wrap {
    margin-top: 12px;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
}

.booking-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.booking-map-toolbar .pill {
    font-size: 12px;
}

#bookingRouteMap,
#clientAddressMap,
#baseLocationMap {
    width: 100%;
    height: 360px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.booking-map-marker-base {
    background: transparent;
    border: 0;
}

.booking-map-base-label {
    font-weight: 600;
    font-size: 12px;
}

.booking-map-marker-base svg {
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.booking-map-breakdown {
    font-size: 12px;
    margin: 0 0 8px;
    line-height: 1.4;
}

/* Leaflet panes use high z-index (400–1000); remap inside the map so tiles stay below the portal topbar */
.booking-map-wrap .leaflet-container {
    z-index: 0 !important;
}

.booking-map-wrap .leaflet-tile-pane {
    z-index: 1 !important;
}

.booking-map-wrap .leaflet-overlay-pane,
.booking-map-wrap .leaflet-pane {
    z-index: 2 !important;
}

.booking-map-wrap .leaflet-shadow-pane {
    z-index: 3 !important;
}

.booking-map-wrap .leaflet-marker-pane {
    z-index: 4 !important;
}

.booking-map-wrap .leaflet-tooltip-pane {
    z-index: 5 !important;
}

.booking-map-wrap .leaflet-popup-pane {
    z-index: 6 !important;
}

.booking-map-wrap .leaflet-top,
.booking-map-wrap .leaflet-bottom,
.booking-map-wrap .leaflet-control {
    z-index: 7 !important;
}

.booking-map-search-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

@media (max-width: 720px) {
    .booking-map-search-row {
        grid-template-columns: 1fr;
    }

    .booking-map-toolbar .btn {
        min-height: 40px;
        flex: 1 1 auto;
        text-align: center;
    }

    #bookingRouteMap,
    #clientAddressMap {
        height: min(50vh, 320px);
        min-height: 220px;
    }
}

.booking-map-hint {
    font-size: 12px;
    margin: 8px 0 0 0;
}

.booking-map-search-results {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #ffffff;
    color: #0a0a0a;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    max-height: 180px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.booking-map-search-results.open {
    display: block;
}

.booking-map-search-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: #ffffff;
    color: #0a0a0a;
    cursor: pointer;
    font-size: 13px;
}

.booking-map-search-item:hover,
.booking-map-search-item:focus {
    background: #f5c518;
    color: #0a0a0a;
}

.booking-map-field-wrap {
    position: relative;
}

.booking-map-readonly {
    height: 260px;
}

@keyframes booking-form-reminder-blink {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 transparent;
    }

    50% {
        opacity: 0.45;
        box-shadow: 0 0 0 3px var(--warning, #f59e0b);
    }
}

#bookingFormReminder.booking-form-reminder--blink {
    animation: booking-form-reminder-blink 0.45s ease-in-out 3;
}

#bookingSubmitBtn:disabled {
    pointer-events: none;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    #bookingSubmitWrap {
        align-items: stretch;
    }

    #bookingSubmitWrap .btn {
        flex: 1 1 140px;
        text-align: center;
    }
}