/* tdm-address.css v3 (TDM fleet kit 2026-10-14). Everything is scoped to
   [data-tdm-address] / .tdm-ac*; nothing global. Layout and sizing defaults use
   :where() (zero specificity), so the site's own input/select classes always win.
   Theme with: --tdm-ac-bg, --tdm-ac-fg, --tdm-ac-muted, --tdm-ac-border,
   --tdm-ac-active, --tdm-ac-radius, --tdm-ac-shadow, --tdm-ac-z, --tdm-ac-attr
   (attribution color: Google allows only #5E5E5E, #1F1F1F or white), --tdm-gap. */

/* Group: one column; the vertical gap is inherited from the parent (a form laid
   out with flex/grid gap keeps the same rhythm inside the group; a form spaced
   with input margins gets 0 here and keeps its margins). Override row-gap on the
   site's own .tdm-address class if needed. */
:where([data-tdm-address]) {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: inherit;
}

/* iOS zooms on inputs under 16px. Default only: the site's input class wins, so
   set the whole form's inputs to 16px in the site CSS (SPEC: inputs >= 16px). */
:where([data-tdm-address]) :where(input, select) { font-size: max(16px, 1em); max-width: 100%; box-sizing: border-box; }

/* Suggestions dropdown (absolute inside the group, same width as the street field). */
.tdm-ac {
  margin: 0; padding: 0; text-align: left; font-family: inherit; font-size: inherit; line-height: 1.3;
  background: var(--tdm-ac-bg, #fff); color: var(--tdm-ac-fg, #1f1f1f);
  border: 1px solid var(--tdm-ac-border, rgba(0, 0, 0, .18)); border-radius: var(--tdm-ac-radius, 8px);
  box-shadow: var(--tdm-ac-shadow, 0 12px 24px -8px rgba(0, 0, 0, .3)); overflow: hidden;
  z-index: var(--tdm-ac-z, 1000);
}
.tdm-ac-list { list-style: none; margin: 0; padding: 4px 0; }
.tdm-ac-opt {
  display: block; margin: 0; padding: 10px 12px; min-height: 44px; box-sizing: border-box;
  cursor: pointer; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent;
}
.tdm-ac-opt[aria-selected="true"] { background: var(--tdm-ac-active, #eef1f4); }
@media (hover: hover) { .tdm-ac-opt:hover { background: var(--tdm-ac-active, #eef1f4); } }
.tdm-ac-main { display: block; font-weight: 600; }
.tdm-ac-sec { display: block; font-size: .875em; color: var(--tdm-ac-muted, #5e5e5e); }

/* Google Maps attribution (required when predictions show without a map).
   Text: Roboto or sans-serif, weight 400, 12-16px, approved colors, never wrapped.
   Logo (data-attr-logo): official file, 16-19px tall, 10px clear space left/right/top, 5px bottom. */
.tdm-ac-attr {
  display: block; padding: 6px 12px 8px; border-top: 1px solid var(--tdm-ac-border, rgba(0, 0, 0, .12));
  font: 400 12px/16px Roboto, Arial, sans-serif; letter-spacing: normal; text-transform: none;
  color: var(--tdm-ac-attr, #5e5e5e); white-space: nowrap; text-align: right;
}
.tdm-ac-attr .tdm-ac-logo { display: block; height: 16px; width: auto; margin: 4px 10px 1px auto; }

/* Optional layout helper: wrap City, State and ZIP in <div class="tdm-address-row">.
   Two rows by default: City, then State + ZIP side by side. One row (2:1:1) only
   when the ROW ITSELF is at least --tdm-row-wide (600px) wide, so a narrow form
   column on a desktop keeps two rows. It measures the form, not the viewport.
   (Flex "albatross": below the threshold City's basis is huge and takes its own
   line; at or above it the basis is 0 and the three share one line.) */
:where(.tdm-address-row) {
  display: flex; flex-wrap: wrap; column-gap: var(--tdm-gap, 12px); row-gap: inherit;
}
:where(.tdm-address-row) > * { min-width: 0; box-sizing: border-box; }
:where(.tdm-address-row) > :first-child { flex: 2 1 calc((var(--tdm-row-wide, 600px) - 100%) * 999); }
:where(.tdm-address-row) > :not(:first-child) { flex: 1 1 0; }
:where(.tdm-address-row) :where(input, select) { width: 100%; }