/* ═══════════════════════════════════════════════════════════════════════════
   Airport suggestions — BusinessClassASAP theme
   ---------------------------------------------------------------------------
   The module ships a light list, which is right on a white page and wrong on
   this one: a white slab under a dark charcoal card, with grey rows and no
   relationship to anything around it.

   This uses the page's own variables — --surface-2, --gold, --text-primary,
   --border — so it inherits any future change to the palette rather than
   pinning a second set of colours beside it.
   ═══════════════════════════════════════════════════════════════════════════ */

.asap-ac-drop {
  /* The module exposes its own variables for exactly this. Overriding only its
     RULES left --asap-metro-bg at #f8fafc, so the "All Airports" row kept a
     near-white background under light type — unreadable. Set the variables and
     every rule that reads them follows, including ones not restated below. */
  --asap-bg:       var(--surface-2, #1E1E21);
  --asap-border:   var(--border, rgba(201,168,76,.18));
  --asap-text:     var(--text-primary, #F2EFE8);
  --asap-muted:    var(--text-secondary, #9E9B91);
  --asap-hover:    rgba(201,168,76,.10);
  --asap-metro-bg: rgba(201,168,76,.05);
  --asap-mark:     var(--gold-light, #E8C96A);
  --asap-radius:   var(--radius-lg, 12px);
  --asap-shadow:   0 26px 56px -18px rgba(0,0,0,.75);

  background: linear-gradient(180deg, var(--surface-2, #1E1E21),
                                      var(--surface, #161618)) !important;
  border: 1px solid var(--border, rgba(201,168,76,.18)) !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 0 0 5px !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 8px rgba(0,0,0,.5),
    0 26px 56px -18px rgba(0,0,0,.75) !important;
}

/* the header reads as a label on the dark surface */
.asap-ac-head {
  background: rgba(201,168,76,.06) !important;
  border-bottom: 1px solid var(--border, rgba(201,168,76,.18)) !important;
  color: var(--text-muted, #5C5A54) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  padding: 11px 16px 9px !important;
}

.asap-ac-item {
  position: relative !important;
  border-top: 0 !important;
  padding: 11px 16px !important;
  transition: background .15s ease !important;
}

/* a hairline between rows that stops short of the edges */
.asap-ac-item + .asap-ac-item::before {
  content: '' !important;
  position: absolute !important; top: 0 !important;
  left: 16px !important; right: 16px !important; height: 1px !important;
  background: rgba(255,255,255,.055) !important;
}
.asap-ac-item.asap-is-child::before { left: 42px !important; }

/* the row about to be chosen: a warm wash and a gold rail down its edge, so
   arrowing with the keyboard looks the same as hovering */
.asap-ac-item:hover,
.asap-ac-item.asap-focus {
  background: rgba(201,168,76,.10) !important;
}
.asap-ac-item.asap-focus::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 4px !important; bottom: 4px !important;
  width: 3px !important; border-radius: 0 3px 3px 0 !important;
  background: linear-gradient(180deg, var(--gold-light, #E8C96A),
                                      var(--gold, #C9A84C)) !important;
}

/* THE CITY IS THE ANSWER — it carries the weight */
.asap-ac-title {
  color: var(--text-primary, #F2EFE8) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -.1px !important;
}
.asap-ac-item.asap-is-metro .asap-ac-title { font-weight: 800 !important; }
.asap-ac-sub {
  color: var(--text-secondary, #9E9B91) !important;
  font-size: 12.5px !important;
}

/* the metro row: a faint gold wash, not the module's near-white */
.asap-ac-item.asap-is-metro {
  background: rgba(201,168,76,.05) !important;
}
.asap-ac-item.asap-is-metro:hover,
.asap-ac-item.asap-is-metro.asap-focus {
  background: rgba(201,168,76,.13) !important;
}
.asap-ac-item.asap-is-metro .asap-ac-title,
.asap-ac-item.asap-is-child .asap-ac-title {
  color: var(--text-primary, #F2EFE8) !important;
}

/* the characters typed, brighter gold and heavier */
.asap-ac-title mark,
.asap-ac-sub mark {
  background: none !important;
  color: var(--gold-light, #E8C96A) !important;
  font-weight: 800 !important;
}

/* the code as a gold chip rather than loose grey text */
.asap-ac-code {
  display: inline-block !important;
  margin-left: 8px !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  background: rgba(201,168,76,.13) !important;
  border: 1px solid rgba(201,168,76,.30) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .7px !important;
  color: var(--gold-light, #E8C96A) !important;
  vertical-align: 1px !important;
}
.asap-ac-item.asap-is-metro .asap-ac-code {
  background: rgba(201,168,76,.22) !important;
  border-color: rgba(201,168,76,.48) !important;
}

.asap-ac-glyph { color: var(--text-muted, #5C5A54) !important; }
.asap-ac-item.asap-is-metro .asap-ac-glyph { color: var(--gold, #C9A84C) !important; }
.asap-ac-item:hover .asap-ac-glyph,
.asap-ac-item.asap-focus .asap-ac-glyph { color: var(--gold-light, #E8C96A) !important; }

.asap-ac-empty, .asap-ac-note {
  color: var(--text-muted, #5C5A54) !important;
  background: transparent !important;
}

/* the scrollbar, so a long list does not end in a bright grey bar */
.asap-ac-drop { scrollbar-width: thin !important;
                scrollbar-color: rgba(201,168,76,.35) transparent !important; }
.asap-ac-drop::-webkit-scrollbar { width: 8px; }
.asap-ac-drop::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,.30); border-radius: 4px;
}
.asap-ac-drop::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .asap-ac-item { transition: none !important; }
}