/* =============================================================================
 * address-suggest.css — customer delivery-address box + inline suggestion list
 * Pairs with assets/js/address-suggest.js. Theme via .gas--dark (default) or
 * .gas--light on the wrapper; pages may override the --gas-* tokens.
 * Sizes are px on purpose: Android WebView text zoom / iOS text size scale px
 * text too, and nothing here has a fixed height, so large text wraps and the
 * list scrolls instead of cropping.
 * ============================================================================= */
.gas {
    --gas-bg:      #16213a;
    --gas-border:  rgba(255,255,255,0.14);
    --gas-fg:      #eef1f6;
    --gas-muted:   #9fb0c4;
    --gas-match:   var(--primary, #4fc3f7);
    --gas-active:  rgba(79,195,247,0.16);
    --gas-shadow:  0 16px 40px rgba(0,0,0,0.55);
    --gas-clear:   #9fb0c4;
    position: relative;
    width: 100%;
}
.gas--light {
    --gas-bg:      #ffffff;
    --gas-border:  rgba(0,0,0,0.14);
    --gas-fg:      #1f1f1f;
    --gas-muted:   #5e5e5e;
    --gas-match:   var(--ms-primary, #1a73e8);
    --gas-active:  rgba(0,0,0,0.06);
    --gas-shadow:  0 10px 28px rgba(0,0,0,0.16);
    --gas-clear:   #5e5e5e;
}

/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
.gas .gas-input {
    width: 100%;
    font-size: 16px;
    padding-right: 44px;       /* room for the × button */
    background-image: none;    /* pages style inputs + selects together (chevron) */
    cursor: text;
    text-overflow: ellipsis;
}
.gas .gas-input::-ms-clear { display: none; }

.gas-clear {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 40px; height: 40px;             /* comfortable tap target */
    border: none; background: none; color: var(--gas-clear);
    font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.gas-clear[hidden] { display: none; }
.gas-clear:focus-visible { outline: 2px solid var(--gas-match); }

.gas-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    z-index: 60;
    display: flex; flex-direction: column;
    max-height: 340px;                     /* JS narrows this to the room above the keyboard */
    background: var(--gas-bg);
    border: 1px solid var(--gas-border);
    border-radius: 12px;
    box-shadow: var(--gas-shadow);
    overflow: hidden;
    text-align: left;
}
.gas-panel[hidden] { display: none; }

.gas-list {
    list-style: none; margin: 0; padding: 4px 0;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.gas-list[hidden] { display: none; }
.gas-opt {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 48px; padding: 9px 14px;
    cursor: pointer;
    border-top: 1px solid var(--gas-border);
    overflow-wrap: anywhere;               /* long street names wrap, never widen the page */
}
.gas-opt:first-child { border-top: none; }
.gas-opt[aria-selected="true"] { background: var(--gas-active); }
@media (hover: hover) { .gas-opt:hover { background: var(--gas-active); } }
.gas-main { color: var(--gas-fg); font-size: 15px; font-weight: 500; line-height: 1.3; }
.gas-main b { color: var(--gas-match); font-weight: 700; }
.gas-sec  { color: var(--gas-muted); font-size: 13px; line-height: 1.3; }

.gas-status { padding: 12px 14px; color: var(--gas-muted); font-size: 14px; line-height: 1.4; }
.gas-status[hidden] { display: none; }

/* Google Maps Platform attribution — official unmodified logo, 16–19px tall,
   inside the same container as the predictions (Maps JS policies). */
.gas-attr {
    flex: 0 0 auto;
    display: flex; justify-content: flex-end; align-items: center;
    padding: 8px 12px;
    border-top: 1px solid var(--gas-border);
    color: var(--gas-muted); font-size: 12px;
}
.gas-attr:empty { display: none; }
.gas-attr img { height: 16px; width: auto; display: block; }

.gas-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}