/* Server-proxied place autocomplete (EDCARD-1262), dressed to read like the Google
   widget it replaced (EDCARD-1273).

   The reference is the rendered shadow DOM of <gmp-place-autocomplete>. Values
   marked "from the widget" are literals read out of that markup; the rest are the
   form's own tokens, kept because they already sit within a shade of Google's.

   Class names are deliberately distinct from the existing singular
   .place-autocomplete rule in site.css, which the caller still puts on the field
   wrapper to size it. */

/* The bordered box AND the positioning container, in one element. The caller's
   form classes (.form-text-input and friends) give it the border, background and
   width of every other field in the section; what is added here is the row layout
   the glyphs need. Keeping these one element is what lets the dropdown below be
   width:100% and track the box at every breakpoint.

   The widget's host element carries the same form classes, so the box shape is the
   form's in production too - only the contents are Google's. */
.places-autocomplete {
    /* The colour .form-text-input writes values in, declared once here and inherited
       by the dropdown because the list is a child of this element. Three things want
       it for the same reason - typed text, a prediction's place name and the clear
       button's hover - so they track each other instead of being three literals that
       can drift apart. Not a global token: site.css has no blue one to extend. */
    --edc-input-blue: #3399ff;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-right: 0.6rem;
    box-sizing: border-box;
}

/* An inset ring rather than a thicker border, so focus cannot change the box's
   outer size and nudge the fields beside it. The widget does the same thing with an
   absolutely-positioned overlay div; a box-shadow needs no extra element and no
   inline styles. 2px #1a73e8 is from the widget. */
.places-autocomplete.is-focused {
    box-shadow: inset 0 0 0 2px #1a73e8;
    background-color: #ffffff;
}

/* Every icon in this control is an inline <svg>, so each needs an explicit box -
   font-size sizes a glyph, not a shape - and takes its colour from whatever `color`
   its owner sets, which is what keeps the clear button's hover rule working. */
.places-autocomplete-search,
.places-autocomplete-clear-icon,
.places-autocomplete-pin-icon {
    display: block;
    fill: currentColor;
}

/* 24px is the widget's search box. The leading inset is a margin on the icon, not
   padding on the container: the caller's .place-autocomplete class in site.css
   forces padding-left to 0 with !important, and that rule belongs to the input
   sizing this control inherits. */
.places-autocomplete-search {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.6rem;
    color: var(--edc-grey);
}

/* Chrome-free: the box around it already carries the border and background. */
.places-autocomplete-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--edc-input-blue);
}

/* Kept in the layout at all times and hidden with visibility, not display: the
   widget does this so the input does not widen by the button's track the moment the
   first character is typed. Toggling the `hidden` attribute, as this did, moved the
   caret on every first keystroke. */
.places-autocomplete-clear {
    display: flex;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: transparent;
    line-height: 1;
    color: #1f1f1f;
    cursor: pointer;
}

/* 20px, the widget's clear disc. The shape is a filled circle with the cross knocked
   out of it, so #1f1f1f is the disc rather than a stroke. */
.places-autocomplete-clear-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.places-autocomplete-clear.is-hidden {
    visibility: hidden;
}

.places-autocomplete-clear:hover,
.places-autocomplete-clear:focus {
    color: var(--edc-input-blue);
}

.places-autocomplete-list {
    position: absolute;
    z-index: 1050;
    left: 0;
    top: 100%;
    /* Tracks the box rather than restating its width: the form widens the field at
       some breakpoints, and a fixed width left the dropdown stranded at 295px under
       a 668px box. */
    width: 100%;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0;
    list-style: none;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid rgb(215, 215, 215);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* No rule separating one row from the next. The widget's list is divided by
   whitespace and the hover fill alone; the border-top this used to carry made five
   predictions read as a bordered table rather than a menu. The vertical padding on
   the list above replaces what those dividers were framing. */
.places-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.9rem;
    font-family: Arial, sans-serif;
    cursor: pointer;
}

.places-autocomplete-item:hover,
.places-autocomplete-item.is-active {
    background-color: #f2f2f4;
}

/* The circular badge the production widget puts in front of every prediction. */
.places-autocomplete-pin {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #ededf0;
    color: var(--edc-grey);
}

.places-autocomplete-pin-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* min-width:0 is what lets this shrink below its content and so lets the two lines
   below actually truncate - a flex item's floor is its content width otherwise. */
.places-autocomplete-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* One line each, ellipsised. Secondary text is a full address, not just a region:
   the widget returns "Kampung Parung Jambu, Bogor City, West Java, Indonesia" for a
   four-letter query. Allowed to wrap, that row stands 65px against its neighbours'
   49px and the list goes ragged. The widget keeps every row the same height. */
.places-autocomplete-primary,
.places-autocomplete-secondary {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* The place name is written in the same blue the box writes typed text in, so a
   prediction reads as the value it is about to become rather than as list chrome.
   That is a house-style call over widget parity - the widget uses a near-black
   #1f1f1f here - and it is the reason this rule points at the shared variable
   instead of restating a literal.

   Worth knowing when this colour is next revisited: #3399ff on the list's white is
   2.94:1, below the 4.5:1 WCAG AA floor for body text. It matches the input, which
   has the same ratio on its own fill, so this is consistent with the form rather
   than a regression against it - but it is not a contrast improvement either.

   Explicit line-heights above: left at `normal` the two stacked lines were the
   tallest thing in the row and pushed it to 58px, against the widget's ~48. */
.places-autocomplete-primary {
    font-size: 0.95rem;
    color: var(--edc-input-blue);
}

/* The shared grey, 5.92:1 on white - and the darker of the two lines, so the place
   name still leads and the address still reads as supporting text. */
.places-autocomplete-secondary {
    font-size: 0.8rem;
    color: var(--edc-grey);
}

/* No mobile width override: the list is width:100% of the box, so it follows the
   form's own responsive sizing. The previous calc(90% + .5rem) was a hand-copy of
   the mobile field width and is exactly the kind of restatement that drifted. */