/*
* Address Lookup field styling — the visible
* and built separate sibling elements that needed those classes mirrored onto them).
*
* The dropdown panel is appended to by places-autocomplete.js (deliberately,
* to avoid table/transform/overflow-hidden ancestor quirks), so it sits outside the
* Elementor tree and isn't reachable by per-widget Design-tab controls — its look is
* owned here as plain, site-wide CSS instead.
*/
.places-autocomplete-panel {
position: fixed;
z-index: var(--z-dropdown);
margin: 0;
display: none;
background: var(--background,#fff);
border: var(--border-width) solid var(--border-color,#D6D5D5);
border-radius: var(--field-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
font-size: var(--font-size-sm);
}
.places-autocomplete-panel.is-open {
display: block;
}
.places-autocomplete-list {
margin: 0;
padding: 0;
list-style: none;
max-height: 240px;
overflow-y: auto;
}
.places-autocomplete-option {
padding: var(--space-xs) var(--space-sm);
cursor: pointer;
line-height: 1.3;
}
.places-autocomplete-option.is-active,
.places-autocomplete-option:hover {
background: var(--ink-15);
}
.places-autocomplete-recent-tag {
color: var(--ink-50);
font-size: var(--font-size-xs);
}
.places-autocomplete-clear-row {
display: none;
border-top: var(--border-width) solid var(--border-color);
text-align: right;
padding: var(--space-3xs) var(--space-2xs);
}
.places-autocomplete-clear-row.is-visible {
display: block;
}
.places-autocomplete-clear-button {
background: none;
border: 0;
padding: var(--space-3xs) var(--space-2xs);
margin: 0;
font-size: var(--font-size-xs);
color: var(--ink-50);
text-decoration: underline;
cursor: pointer;
}
.places-autocomplete-clear-button:hover {
color: var(--brand-primary);
background-color: unset;
}
/* Icon overlay — mirrors the pattern in rideguide.css */
.rg-select-field {
position: relative;
flex: 1 1 auto;
width: 100%;
}
.rg-field-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
pointer-events: none;
opacity: 0.5;
z-index: var(--z-base);
}
.rg-field-icon svg {
width: 100%;
height: 100%;
display: block;
}
.rg-select-field.rg-icon-before .rg-field-icon { left: var(--space-2xs); }
.rg-select-field.rg-icon-after .rg-field-icon { right: var(--space-2xs); }
.rg-select-field.rg-icon-before .places-autocomplete-input { padding-left: var(--space-2xl); }
.rg-select-field.rg-icon-after .places-autocomplete-input { padding-right: var(--space-2xl); }