/* Companion styles for the guided phone field (RFLKT-7131), loaded beside the
   self-hosted intl-tel-input CSS. Keeps the upgraded control full-width like the
   plain input it replaces, and styles the skeleton-mask ghost overlay that
   static/js/phone-guided.js positions over the number input. */

/* intl-tel-input's wrapper is inline-block by default; the funnel's fields are
   full-width, so stretch it to match the surrounding inputs. */
.iti {
  width: 100%;
  display: block;
}

/* The ghost sits inside intl-tel-input's positioned .iti wrapper. The script
   copies the input's box, padding and font onto it so the grey remainder lines
   up with where the next digit will land; these are the static bits. */
.phone-guided-ghost {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  white-space: pre;
  background: transparent;
}

/* The typed portion is invisible: it only reserves the exact width of the real
   input text so the remainder that follows stays aligned. */
.phone-guided-ghost-typed {
  color: transparent;
}

/* The still-blank tail of the skeleton, shown in a muted grey. */
.phone-guided-ghost-rest {
  color: #9ca3af;
}

/* Keep each dropdown row — flag, country name, dial code — on a single line and
   let the popup grow to fit the longest one, so it never turns tall and narrow.
   intl-tel-input's own CSS lets the names wrap below 500px (a narrow column or a
   zoomed-in laptop), which is what makes rows stack and cramp; this overrides it
   at every width. Loaded after the library CSS, so it wins on the cascade. */
.iti__country-list {
  white-space: nowrap;
}

.iti__country {
  flex-wrap: nowrap;
}

/* A handful of names are long enough — "Falkland Islands (Islas Malvinas)" —
   to overrun the row now that they stay on one line, which added a horizontal
   scrollbar. Let the name shrink and truncate with an ellipsis instead, so the
   row always fits and nothing scrolls sideways. min-width:0 is what lets a flex
   item shrink below its content. */
.iti__country-name {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Belt and suspenders: never show a horizontal scrollbar on the list. */
.iti__country-list {
  overflow-x: hidden;
}

/* The dropdown otherwise takes the phone field's width, which in a narrow form
   column leaves the search box cramped. Give it a comfortable minimum so the
   search input and the country rows have room, capped to the viewport so it
   never overflows a small screen. */
.iti__country-selector {
  min-width: min(20rem, 92vw);
}

/* On open the library scrolls the list to the selected country, which otherwise
   leaves a half-row clipped under the search box. Snapping rows to the top of
   the scroll area keeps whichever row lands at the top whole, so nothing reads
   as a sliced-off country name. */
.iti__country-list {
  scroll-snap-type: y mandatory;
}

.iti__country {
  scroll-snap-align: start;
}

/* The search box sits flush above the country list, so its focus ring drew a
   line straight across the first row beneath it. Drop the ring — the open
   dropdown and the search box's own bottom border already make focus obvious —
   so nothing is painted over the row below. */
.iti__search-input:focus,
.iti__search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* The compact variant sits in an inline row (a dispatch leg's assign form)
   beside other compact controls, so it keeps a fixed width instead of taking
   the whole line. */
[data-phone-compact] .iti {
  width: 14rem;
  display: inline-block;
}