/* Address-check widget styles. Paired with public/assets/address-check.js.
   Colors/typography inherit from styles.css via CSS vars. */

#address-check {
  display: block;
  width: 100%;
  max-width: 560px;
}

#address-check .ac-label {
  display: block;
  font-family: var(--font-display, 'Archivo Black', sans-serif);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 0.95rem;
  margin-bottom: .6rem;
  color: var(--ink, #0a0a0a);
}

/* The plain input shown pre-upgrade (SDK not loaded, or graceful fallback)
   mimics the brand button border so it doesn't look naked. */
#address-check #ac-input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-weight: 500;
  color: var(--ink, #0a0a0a);
  background: var(--paper, #fafaf7);
  border: 2px solid var(--ink, #0a0a0a);
  border-radius: var(--radius, 6px);
  box-shadow: 6px 6px 0 var(--yellow, #facc15);
  outline: none;
}
#address-check #ac-input:focus {
  box-shadow: 6px 6px 0 var(--yellow, #facc15), 0 0 0 3px var(--yellow, #facc15);
}

/* The Search JS Web custom element owns its own shadow DOM; our theme vars
   go in via searchBox.theme in the JS. The host wrapper controls outside
   sizing and spacing. */
#address-check .ac-searchbox-host {
  display: block;
  width: 100%;
}
#address-check .ac-searchbox-host mapbox-search-box {
  width: 100%;
  display: block;
}

/* Result panel — mirrors the card aesthetic of the rest of the site.
   Each status variant overlays a tinted background so in/out/edge/error
   are distinguishable without relying on icons. */
#address-check .ac-result {
  margin-top: 18px;
  min-height: 2rem;
}
#address-check .ac-status {
  padding: 16px 18px;
  border: 2px solid var(--ink, #0a0a0a);
  border-radius: var(--radius, 6px);
  background: var(--paper-alt, #f1efe8);
}
#address-check .ac-status p {
  margin: 0 0 0.6rem;
  line-height: 1.4;
}
#address-check .ac-status p:last-child {
  margin-bottom: 0;
}
#address-check .ac-status .btn {
  margin-top: .5rem;
}

#address-check .ac-status-loading {
  background: var(--paper-alt, #f1efe8);
  color: var(--muted, #5a5a55);
  font-style: italic;
}

#address-check .ac-status-in {
  background: #ecfdf5; /* soft safety-green tint */
  border-color: var(--green-dark, #15803d);
  box-shadow: 6px 6px 0 var(--ink, #0a0a0a);
}

#address-check .ac-status-edge {
  background: #fef3c7; /* soft yellow tint — "we'll review" */
  box-shadow: 6px 6px 0 var(--ink, #0a0a0a);
}

#address-check .ac-status-out {
  background: var(--paper-alt, #f1efe8);
  color: var(--ink-soft, #1f1f1f);
}

#address-check .ac-status-error {
  background: #fef2f2;
  border-color: var(--danger, #b91c1c);
  color: var(--danger, #b91c1c);
}
#address-check .ac-status-error a {
  color: var(--danger, #b91c1c);
  font-weight: 600;
}