/**
 * @file abn-lookup.css
 * @brief Styles for the portable ABN lookup widget (abn-lookup.js).
 *
 * Every rule is scoped under `.abn-widget`, the class the host page puts on
 * the element wrapping the widget markup — the widget has no dependency on
 * the landing page's `.lf` form wrapper. Each custom property carries a
 * fallback value so the widget renders correctly on a site that does not
 * define this page's design tokens; on this site the `:root` tokens from
 * styles.css win over the fallbacks.
 *
 * Ships with: assets/js/abn-lookup.js and api/abr-lookup.php.
 * See README.md § "Portable modules" for the drop-in guide.
 */

/* ------------------------------------------------------------------ */
/* Autocomplete dropdown (business name search results)               */
/* ------------------------------------------------------------------ */
.abn-widget .acwrap {
  position: relative;
}
.abn-widget .aclist {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 2px solid var(--line, #e7ddd6);
  border-radius: 12px;
  max-height: 230px;
  overflow: auto;
  z-index: 20;
  box-shadow: 0 14px 34px rgba(0, 51, 55, 0.14);
}
.abn-widget .acitem {
  padding: 12px 16px;
  font: 500 15px
    var(--ff-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--ocean, #003337);
  cursor: pointer;
  border-bottom: 1px solid var(--line, #e7ddd6);
}
.abn-widget .acitem:last-child {
  border-bottom: none;
}
.abn-widget .acitem:hover {
  background: var(--sand, #f2ded6);
}
.abn-widget .acitem .ac-meta {
  display: block;
  color: var(--muted, #4f6566);
  font-size: 13px;
  margin-top: 2px;
}

/* Register-status boxes — brand-tinted fills rather than traffic-light
   red/green: active rows sit on a light tint of the site's ocean teal
   (#003337), cancelled rows on a light tint of its deep rosewood (#45050E),
   each with the full-strength colour for text and border so the copy stays
   easy to read and the two states are clearly different at a glance (teal
   box vs pink box). The row also carries the status word in its meta
   line, so the distinction never rests on colour alone. The `border`
   shorthand replaces the base
   row's border-bottom separator; the margin turns each row into its own
   visible box inside the dropdown. These rules sit after the base :hover
   rule, so the fill wins on hover too — the brightness filter below
   supplies the hover feedback instead. */
.abn-widget .acitem.is-active,
.abn-widget .acitem.is-cancelled {
  border-radius: 10px;
  margin: 6px;
}
.abn-widget .acitem.is-active {
  border: 2px solid #003337;
  color: #003337;
}
.abn-widget .acitem.is-cancelled {
  border: 2px solid #45050e;
  color: #45050e;
}
.abn-widget .acitem.is-active .ac-meta {
  color: #003337;
}
.abn-widget .acitem.is-cancelled .ac-meta {
  color: #45050e;
}
.abn-widget .acitem.is-active,
.abn-widget .acitem.is-active:hover {
  background: #d4e4e3; /* light tint of the ocean teal */
}
.abn-widget .acitem.is-cancelled,
.abn-widget .acitem.is-cancelled:hover {
  background: #f0d9dd; /* light tint of the rosewood */
}
.abn-widget .acitem.is-active:hover,
.abn-widget .acitem.is-cancelled:hover {
  filter: brightness(0.95);
}

/* ------------------------------------------------------------------ */
/* Lookup result (live region under the input)                        */
/* ------------------------------------------------------------------ */
.abn-widget .abn-result {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
}
.abn-widget .abn-result:empty {
  margin-top: 0;
}
.abn-widget .abn-result.is-loading {
  color: var(--muted, #4f6566);
  display: flex;
  align-items: center;
  gap: 9px;
}
.abn-widget .abn-result.is-loading .spin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--line, #e7ddd6);
  border-top-color: var(--fire, #ef9a9a);
  animation: abnw-spin 0.7s linear infinite;
}
@keyframes abnw-spin {
  to {
    transform: rotate(360deg);
  }
}
.abn-widget .abn-result.is-ok {
  background: var(--sand-2, #faf1ec);
  border: 1px solid var(--line, #e7ddd6);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ocean, #003337);
}
.abn-widget .abn-result.is-ok .name {
  display: block;
  font-weight: 800;
}
.abn-widget .abn-result.is-ok .meta {
  color: var(--muted, #4f6566);
  font-size: 13px;
}
.abn-widget .abn-result.is-warn {
  background: #fff7ed;
  border: 1px solid #f3d9b8;
  border-radius: 12px;
  padding: 12px 14px;
  color: #8a5a17;
}
.abn-widget .abn-result.is-warn .name {
  display: block;
  font-weight: 800;
}
.abn-widget .abn-result.is-error {
  color: var(--fire-2, #d60000);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Utility — the widget toggles `.hidden` on the dropdown, so it must */
/* work without any host-page utility classes.                        */
/* ------------------------------------------------------------------ */
.abn-widget .hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .abn-widget .abn-result.is-loading .spin {
    animation: none;
  }
}