.places-autocomplete-wrapper {
    position: relative;
    /* No width/display override — let each context's flex/block rules size this */
}

.places-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(14, 37, 64, 0.06);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
}

.places-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--ruleSoft);
}

.places-autocomplete-item:last-child {
    border-bottom: none;
}

.places-autocomplete-item:hover {
    background-color: var(--bg2);
}

.places-autocomplete-primary {
    font-size: 15px;
    color: var(--ink);
}

.places-autocomplete-secondary {
    font-size: 12px;
    color: var(--inkMuted);
}

/* ─── Landing planning form ─── */

/* The destination wrapper sits inside .planning-input-wrap (flex row with pin icon) */
.planning-input-wrap .places-autocomplete-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.planning-input-wrap .places-autocomplete-wrapper input {
    width: 100%;
}

/* Keep the dropdown wide enough in the narrow planning field */
.planning-form .places-autocomplete-dropdown {
    min-width: 260px;
}

/* ─── Add-location forms on edit-trip ─── */
.add-location-form .places-autocomplete-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.add-location-form .places-autocomplete-wrapper input {
    width: 100%;
    margin-bottom: 0;
}

/* Let suggestion dropdown extend below modal card without being clipped */
.modal-card:has(.place-input) {
    overflow: visible;
}

.modal-card:has(.place-input) .modal-body {
    overflow: visible;
}