/* HERE Autocomplete Dropdown */
.here-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
}

.here-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s;
}

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

.here-autocomplete-item:hover,
.here-autocomplete-item--active {
    background-color: #f8f4f0;
    color: #e56b2c;
}

/* Location Search Wrapper (Frontend) */
.here-location-search-wrapper {
    position: relative;
    width: 100%;
}

.here-location-search-wrapper input {
    /* room on the right for the ✓ recognized icon + the × clear button.
       !important to beat the hero search bar, which sets `padding: 14px 0
       !important` on its inner .form-control and would otherwise zero our
       right padding -> ✓ overlapping the text. */
    padding-right: 48px !important;
    text-overflow: ellipsis;
}

/* Hero search bar (.kf-search-field) is a flex cell that styles the inner
   input directly. Make our wrapper fill the cell (min-width:0 to allow
   shrink) so the absolutely-positioned ✓/× sit at the field's right edge
   instead of landing in the middle of a short value. */
.kf-search-field .here-location-search-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* The hero rule `.kf-search-field .form-control { padding: 14px 0 !important }`
   has specificity (0,2,0) and beats our generic `.here-location-search-wrapper
   input` (0,1,1) even with !important. Match a higher specificity (0,2,1) so the
   right padding for the ✓/× actually wins on the hero and the text is kept clear. */
.kf-search-field .here-location-search-wrapper input {
    padding-right: 48px !important;
}

/* Subtle "recognized" check INSIDE the field, left of the × clear button */
.here-location-ok {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #1a7f37;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

/* Honest, single-line status — only the "not found" warn case uses it now */
.here-location-status {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.here-location-status--warn {
    color: #b76e00;
}

.here-location-status--ok {
    color: #1a7f37;
}

/* Dark mode support */
[data-bs-theme="dark"] .here-autocomplete-dropdown {
    background: #1e1e2d;
    border-color: #2d2d3f;
}

[data-bs-theme="dark"] .here-autocomplete-item {
    color: #ccc;
    border-bottom-color: #2d2d3f;
}

[data-bs-theme="dark"] .here-autocomplete-item:hover,
[data-bs-theme="dark"] .here-autocomplete-item--active {
    background-color: #2a2a3d;
    color: #e56b2c;
}