/**
 * assets/css/address-lookup.css — address entry help at checkout.
 *
 * The suburb typeahead attaches to WooCommerce's own Suburb field rather than
 * adding one, so there is no separate control to style — only the dropdown
 * that hangs beneath it, and the Google widget above the street line.
 */

/* Positioning context for the results list. Woo wraps every input in a
   <span class="woocommerce-input-wrapper">, which is where the list is
   appended, so both need to be laid out predictably. */
.mica-addr-lookup {
  position: relative;
}

.mica-addr-lookup .woocommerce-input-wrapper {
  position: relative;
  display: block;
}

.mica-addr-lookup input:focus {
  border-color: var(--clr-orange);
  box-shadow: 0 0 0 3px var(--clr-orange-light);
  outline: none;
}

.mica-addr-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--clr-text-muted);
}

/* ── Google Places widget ── */

.mica-gplace gmp-place-autocomplete {
  width: 100%;
  display: block;

  /*
   * The widget renders itself dark whenever the visitor's OS is set to dark
   * mode — it follows the system scheme, not the page's. In a light checkout
   * form that arrives as a black block sitting among white inputs. Pinning
   * color-scheme is what stops it; no colour token overrides it.
   */
  color-scheme: light;
}

/*
 * The input lives in shadow DOM, so the theme's own input rules cannot reach
 * it. ::part() is the only supported way in — Google exposes `input` and
 * `input-container` — and without this the field keeps Google's default
 * metrics and reads as a foreign control dropped into the form.
 */
.mica-gplace gmp-place-autocomplete::part(input) {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--clr-text);
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}

.mica-gplace gmp-place-autocomplete::part(input):focus {
  border-color: var(--clr-orange);
  box-shadow: 0 0 0 3px var(--clr-orange-light);
  outline: none;
}

.mica-gplace gmp-place-autocomplete::part(input-container) {
  background: transparent;
}

/* ── Results ── */

.mica-addr-results {
  position: absolute;
  z-index: 40;               /* above Woo's field wrappers, below the site header */
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.mica-addr-results li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.mica-addr-results li.is-active,
.mica-addr-results li:hover {
  background: var(--clr-orange-light);
}

.mica-addr-suburb {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--clr-text);
  line-height: 1.3;
}

/* The disambiguator — same suburb name recurs across provinces. */
.mica-addr-meta {
  font-size: var(--font-size-xs);
  color: var(--clr-text-muted);
  line-height: 1.3;
}

.mica-addr-results li.mica-addr-none {
  cursor: default;
  font-size: var(--font-size-sm);
  color: var(--clr-text-muted);
}

.mica-addr-results li.mica-addr-none:hover {
  background: transparent;
}