/*!
 * asaptrips-airports.css  v3.0.0
 * Styles for asaptrips-airports.js
 *
 * COLLISION SAFETY
 *   Every selector is prefixed .asap-  including the state classes
 *   (.asap-open, .asap-focus, .asap-is-metro, .asap-is-child). The host page
 *   already defines a generic .open (.mobile-menu.open, .pax-display.open), so
 *   an unprefixed state class would have been a real hazard.
 *
 *   The host page also applies a global reset:
 *     *, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
 *     * { scrollbar-width: none }
 *   Every rule below therefore sets its own padding explicitly and never relies
 *   on a browser default, and the scrollbar is re-enabled just for the dropdown
 *   so a scrollable list still looks scrollable.
 *
 *   Retheme by overriding the custom properties on .asap-ac-drop — they are all
 *   namespaced --asap-* and do not touch the page's own --gold, --cream, etc.
 */

.asap-ac-drop {
  --asap-bg:         #ffffff;
  --asap-border:     #e2e8f0;
  --asap-radius:     12px;
  --asap-shadow:     0 12px 32px rgba(15, 23, 42, .14);
  --asap-text:       #0f172a;
  --asap-muted:      #64748b;
  --asap-hover:      #eff6ff;
  --asap-metro-bg:   #f8fafc;
  --asap-mark:       #1d4ed8;
  --asap-max-height: 340px;

  position: absolute;
  z-index: 9999;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 260px;
  max-height: var(--asap-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0 0 4px;
  background: var(--asap-bg);
  border: 1px solid var(--asap-border);
  border-radius: var(--asap-radius);
  box-shadow: var(--asap-shadow);
  font-family: inherit;
  text-align: left;
  display: none;
  -webkit-overflow-scrolling: touch;

  /* the page hides all scrollbars globally; put one back here only */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.asap-ac-drop::-webkit-scrollbar { width: 8px; height: 8px; }
.asap-ac-drop::-webkit-scrollbar-track { background: transparent; }
.asap-ac-drop::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.asap-ac-drop.asap-open { display: block; }

.asap-ac-head {
  padding: 10px 14px 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--asap-muted);
  letter-spacing: .01em;
}

.asap-ac-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  margin: 0;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.asap-ac-item:hover,
.asap-ac-item.asap-focus { background: var(--asap-hover); }

.asap-ac-item.asap-is-metro { background: var(--asap-metro-bg); }
.asap-ac-item.asap-is-metro .asap-ac-title { font-weight: 700; }
.asap-ac-item.asap-is-metro:hover,
.asap-ac-item.asap-is-metro.asap-focus { background: var(--asap-hover); }

.asap-ac-item.asap-is-child { padding-left: 34px; }

.asap-ac-glyph {
  flex: 0 0 auto;
  color: var(--asap-muted);
  font-size: 14px;
  line-height: 1.5;
}
.asap-ac-item.asap-is-child .asap-ac-glyph { color: #94a3b8; }

.asap-ac-body { display: block; min-width: 0; }

.asap-ac-title {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--asap-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asap-ac-code {
  font-size: 12px;
  font-weight: 600;
  color: var(--asap-muted);
  margin-left: 4px;
}

.asap-ac-sub {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--asap-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* <mark> would otherwise pick up the browser's yellow highlight */
.asap-ac-title mark {
  background: none;
  color: var(--asap-mark);
  font-weight: 700;
  padding: 0;
}

.asap-ac-empty {
  padding: 14px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--asap-muted);
}

@media (max-width: 640px) {
  .asap-ac-drop { --asap-max-height: 58vh; min-width: 0; }
  .asap-ac-item { padding: 12px 14px; }
  .asap-ac-item.asap-is-child { padding-left: 36px; }
}

@media (prefers-color-scheme: dark) {
  .asap-ac-drop {
    --asap-bg:       #0f172a;
    --asap-border:   #1e293b;
    --asap-text:     #e2e8f0;
    --asap-muted:    #94a3b8;
    --asap-hover:    #1e293b;
    --asap-metro-bg: #16202f;
    --asap-mark:     #60a5fa;
    --asap-shadow:   0 12px 32px rgba(0, 0, 0, .5);
  }
}