/* ==========================================================================
   HireJuno — css/address-input.css
   Styles for the js/address-input.js combobox (.hj-ai).

   LOAD ORDER
     brand.css -> redesign.css -> [page css] -> tokens.css -> motion.css
     -> address-input.css
   It loads after tokens.css so every colour, radius, focus ring and tap
   target here resolves from --hj-* and inherits the dark-mode remap for free.

   PRINCIPLES
     * Mobile-first. Every interactive row is >= var(--hj-tap-min) (44px) tall
       at every breakpoint — a suggestion list is the single most mis-tapped
       control in a booking flow.
     * All motion is opt-in and behind prefers-reduced-motion.
     * The verified / manual badges are distinguished by ICON + TEXT, never by
       colour alone (WCAG 1.4.1).
   ========================================================================== */

.hj-ai {
  position: relative;
  display: block;
}

/* ---------- the input row ---------- */

.hj-ai__box {
  position: relative;
  display: block;
}

/* The host page owns the input's own look (.input in brand.css). We only
   reserve room on the right for the spinner so the caret never collides. */
.hj-ai.is-loading .hj-ai__box > input {
  padding-right: 44px;
}

.hj-ai__spinner {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid var(--hj-border-strong, #b9c2cc);
  border-top-color: var(--hj-accent, #2e8b44);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hj-dur-fast, 120ms) var(--hj-ease, ease);
}

.hj-ai.is-loading .hj-ai__spinner {
  opacity: 1;
  animation: hj-ai-spin 700ms linear infinite;
}

@keyframes hj-ai-spin { to { transform: rotate(360deg); } }

/* ---------- the listbox ---------- */

.hj-ai__list {
  position: absolute;
  z-index: var(--hj-z-overlay, 400);
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--hj-surface-raised, #fff);
  border: 1px solid var(--hj-border, #dfe4ea);
  border-radius: var(--hj-radius-lg, 14px);
  box-shadow: var(--hj-elev-3, 0 12px 32px rgb(16 24 40 / .16));
}

.hj-ai__list[hidden] { display: none; }

.hj-ai__opt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--hj-tap-min, 44px);
  padding: 10px 12px;
  border-radius: var(--hj-radius-md, 10px);
  cursor: pointer;
  /* Touch devices: stop the 300ms tap highlight fighting .is-active. */
  -webkit-tap-highlight-color: transparent;
}

.hj-ai__opt + .hj-ai__opt { margin-top: 2px; }

.hj-ai__opt-main {
  font-family: var(--hj-font-display, inherit);
  font-weight: 600;
  font-size: var(--hj-text-sm, .9375rem);
  color: var(--hj-fg, #10151c);
  line-height: var(--hj-leading-snug, 1.3);
}

.hj-ai__opt-sub {
  font-size: var(--hj-text-xs, .8125rem);
  color: var(--hj-fg-muted, #5b6672);
  line-height: var(--hj-leading-snug, 1.3);
}

/* Hover AND keyboard use the same treatment, because aria-activedescendant
   keeps DOM focus on the input — there is no :focus to style on the option,
   so .is-active is the only signal a keyboard user gets. It must be as loud
   as hover, not quieter. */
.hj-ai__opt:hover,
.hj-ai__opt.is-active {
  background: var(--hj-surface-accent, #eaf6ed);
}

.hj-ai__opt.is-active {
  box-shadow: inset 0 0 0 2px var(--hj-accent, #2e8b44);
}

.hj-ai__opt--manual {
  margin-top: 6px;
  border-top: 1px solid var(--hj-border, #dfe4ea);
  border-radius: 0 0 var(--hj-radius-md, 10px) var(--hj-radius-md, 10px);
  padding-top: 12px;
}

.hj-ai__opt--manual .hj-ai__opt-main { color: var(--hj-fg-muted, #5b6672); }

/* ---------- the verified / manual / error badge ---------- */

.hj-ai__status {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 4px 8px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--hj-radius-md, 10px);
  font-size: var(--hj-text-xs, .8125rem);
  line-height: var(--hj-leading-normal, 1.45);
}

.hj-ai__status[hidden] { display: none; }

.hj-ai__status svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.hj-ai__status-text {
  font-family: var(--hj-font-display, inherit);
  font-weight: 700;
}

.hj-ai__status-detail {
  grid-column: 2;
  color: var(--hj-fg-muted, #5b6672);
}

.hj-ai__status.is-verified {
  background: var(--hj-success-soft, #e6f6ea);
  border-color: var(--hj-success, #1f6b33);
  color: var(--hj-success, #1f6b33);
}

.hj-ai__status.is-manual {
  background: var(--hj-warning-soft, #fdf3e2);
  border-color: var(--hj-warning, #a4670a);
  color: var(--hj-warning, #a4670a);
}

.hj-ai__status.is-error {
  background: var(--hj-danger-soft, #fdecec);
  border-color: var(--hj-danger, #b3261e);
  color: var(--hj-danger, #b3261e);
}

/* The suburb-disagreement note. Deliberately quieter than an error: it is a
   question for the customer, not a validation failure. */
.hj-ai__mismatch {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--hj-info-soft, #e8f1fd);
  border: 1px solid var(--hj-info, #17559b);
  border-radius: var(--hj-radius-md, 10px);
  color: var(--hj-info, #17559b);
  font-size: var(--hj-text-xs, .8125rem);
  line-height: var(--hj-leading-normal, 1.45);
}

/* ---------- saved-address picker (signed-in customers) ---------- */

.hj-ai-saved {
  margin: 0 0 12px;
}

.hj-ai-saved__label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--hj-font-display, inherit);
  font-weight: 700;
  font-size: var(--hj-text-xs, .8125rem);
  color: var(--hj-fg-muted, #5b6672);
}

.hj-ai-saved__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hj-ai-saved__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: var(--hj-tap-min, 44px);
  padding: 8px 14px;
  background: var(--hj-surface, #fff);
  border: 1.5px solid var(--hj-border, #dfe4ea);
  border-radius: var(--hj-radius-lg, 14px);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--hj-fg, #10151c);
  transition:
    border-color var(--hj-dur-fast, 120ms) var(--hj-ease, ease),
    background    var(--hj-dur-fast, 120ms) var(--hj-ease, ease);
}

.hj-ai-saved__chip:hover { border-color: var(--hj-border-interactive, #2e8b44); }

.hj-ai-saved__chip[aria-pressed="true"] {
  background: var(--hj-surface-accent, #eaf6ed);
  border-color: var(--hj-accent, #2e8b44);
}

.hj-ai-saved__chip-label {
  font-family: var(--hj-font-display, inherit);
  font-weight: 700;
  font-size: var(--hj-text-sm, .9375rem);
}

.hj-ai-saved__chip-line {
  font-size: var(--hj-text-xs, .8125rem);
  color: var(--hj-fg-muted, #5b6672);
}

/* ---------- focus ---------- */

.hj-ai__opt:focus-visible,
.hj-ai-saved__chip:focus-visible {
  outline: var(--hj-focus-width, 3px) solid var(--hj-focus-color, #1f6b33);
  outline-offset: var(--hj-focus-offset, 2px);
}

/* ---------- screen-reader-only live region ---------- */

.hj-ai__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- mobile ---------- */

@media (max-width: 480px) {
  /* A dropdown pinned under the field competes with the on-screen keyboard on
     a 375px viewport. Keeping it short and scrollable beats letting it run off
     the bottom of the visual viewport where the keyboard hides it. */
  .hj-ai__list { max-height: 232px; }
  .hj-ai__opt { padding: 11px 12px; }
  .hj-ai-saved__chip { width: 100%; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hj-ai__spinner,
  .hj-ai.is-loading .hj-ai__spinner {
    animation: none;
    /* The spinner is the only "it's working" signal, so it must not simply
       vanish — it becomes a static ring that is still visibly present. */
    border-top-color: var(--hj-accent, #2e8b44);
  }
  .hj-ai__spinner,
  .hj-ai-saved__chip {
    transition: none;
  }
}

/* ---------- forced colours ---------- */

@media (forced-colors: active) {
  .hj-ai__opt.is-active {
    box-shadow: none;
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .hj-ai__status { border-color: CanvasText; }
}