/* ApiCheck Woo Autocomplete — Scope Bar + Dropdown */

:root {
  --ac-bg: #fff;
  --ac-border: #ddd;
  --ac-shadow: 0 10px 24px rgba(0,0,0,.08);

  --ac-header-bg: #fafafa;
  --ac-header-border: #eee;

  --ac-text: #111827;
  --ac-muted: #6b7280;

  --ac-item-hover: #f0f6ff;
  --ac-item-active: #e6f0ff;

  --pill-bg: #eef2f7;
  --pill-text: #0f172a;
  --pill-border: #c7d2e3;

  --pill-city-bg: #e8fff3;
  --pill-city-border: #c9f2dd;
  --pill-city-text: #0f5132;

  --pill-postal-bg: #fff3e6;
  --pill-postal-border: #ffe0c2;
  --pill-postal-text: #653b11;

  --pill-street-bg: #eef7ff;
  --pill-street-border: #d6e9ff;
  --pill-street-text: #0b3a75;
}

/* Scope Bar (sits above input) */
.apichecknl-ac-scopebar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .5rem;
}

.apichecknl-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  font-size: .875rem;
  line-height: 1;
}

.apichecknl-pill__remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  padding: 0;
}
.apichecknl-pill__remove:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

/* Pill variants */
.apichecknl-pill[data-scope="city"] {
  background: var(--pill-city-bg);
  border-color: var(--pill-city-border);
  color: var(--pill-city-text);
}
.apichecknl-pill[data-scope="postalcode"] {
  background: var(--pill-postal-bg);
  border-color: var(--pill-postal-border);
  color: var(--pill-postal-text);
}
.apichecknl-pill[data-scope="street"] {
  background: var(--pill-street-bg);
  border-color: var(--pill-street-border);
  color: var(--pill-street-text);
}

/* Ghost pill was used as a Reset button — hide now */
.apichecknl-pill.apichecknl-pill--ghost { display: none !important; }

/* Dropdown */
.apichecknl-ac-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 3; /* sits above inline clear (z=2) */
  display: none;
  background: var(--ac-bg);
  border: 1px solid var(--ac-border);
  border-radius: 8px;
  box-shadow: var(--ac-shadow);
  overflow: hidden;
}
.apichecknl-ac-box[aria-expanded="true"] { display: block; }

.apichecknl-ac-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 10px;
  background: var(--ac-header-bg);
  border-bottom: 1px solid var(--ac-header-border);
}

/* Old header clear button — keep DOM but hide */
.apichecknl-ac-clear { display: none !important; }

.apichecknl-ac-loader {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #b6bcc6;
  border-top-color: transparent;
  animation: apichecknl-spin .8s linear infinite;
  display: none;
  margin-left: auto;
}
.apichecknl-ac-loader.is-visible { display: inline-block; }
@keyframes apichecknl-spin { to { transform: rotate(360deg); } }

/* Results */
.apichecknl-ac-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow: auto;
}

.apichecknl-ac-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  font-weight: 600;
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
  color: #374151;
}

.apichecknl-ac-item,
.apichecknl-ac-empty {
  padding: 9px 10px;
  cursor: pointer;
  outline: none;
  user-select: none;
}

.apichecknl-ac-item.is-active,
.apichecknl-ac-item:focus-visible { background: var(--ac-item-active); }
.apichecknl-ac-item[aria-selected="true"] { font-weight: 600; }

/* Small screens */
@media (max-width: 480px) {
  .apichecknl-ac-header { padding: 8px 8px; gap: .4rem; }
  .apichecknl-ac-item,
  .apichecknl-ac-empty { padding: 9px 8px; }
}