/* SarTrade — international phone-number field (Public + Vendor).
   This build's own file, shared by every layout that renders a phone input, so
   the component exists once rather than being copied into public.css and
   vendor.css (CLAUDE.md "fix the shared rule, not the page").
   css/{style,app,fallback}.css stay the prototype's untouched files.

   Markup contract — repeated inline in each of the five phone fields rather
   than extracted into a partial, because `asp-for`/`asp-validation-for` are
   what emit the data-val-* attributes the client rule reads, and a partial
   taking a plain model would lose them:

     <div class="phone-field">
       <select class="phone-field__country" asp-for="…Country" ...>…</select>
       <span   class="phone-field__cc">+65</span>
       <input  class="input-st phone-field__input" asp-for="…Phone" ...>
     </div>

   The country <select> replaced a hardcoded "+65" span on 2026-09-10
   (Engineering Implementation Review §7/§15). The dialling code beside it is
   still a static <span>, not a second form control: it is derived from the
   selected country by js/phone-field.js purely for display, so making it
   focusable or nameable would add a control that posts a value nobody reads. */

.phone-field { display: flex; align-items: stretch; }

/* The country selector. `flex: none` + an explicit width keeps the field's
   proportions stable as the visitor switches between a short country name and
   a long one — without it the number input would resize on every change. */
.phone-field__country.input-st {
  flex: none;
  width: 9.5rem;
  min-width: 0;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.phone-field__cc {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 10px;
  border: 1px solid var(--field-border);
  border-left: 0;
  border-right: 0;
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  user-select: none;
}

/* .input-st sets width:100% and all four corner radii; inside the group the
   input is the flex item that grows, and the two left corners belong to the
   country selector instead. min-width:0 stops the flex item's default
   min-content floor from overflowing the field on narrow viewports (same fix
   .input-row uses). */
.phone-field__input.input-st {
  flex: 1 1 auto;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* app.css draws the invalid state as `.field.is-invalid .input-st{border-color:
   var(--red)}` — that reaches the input and the select but not the dialling-code
   span, which would leave a broken-looking red border with a grey gap in it.
   js/validation.js already mirrors the error onto the wrapping .field. */
.field.is-invalid .phone-field__cc { border-color: var(--red); }

/* Below ~480px a 9.5rem selector plus the dialling code leaves too little room
   for the number itself, so the group stacks: country on its own row, then the
   code and the number side by side. Every corner radius has to be restated
   because the horizontal group's flattened edges are wrong once stacked.
   Only the no-JS fallback stacks: the enhanced widget below is compact
   enough to stay on one row at any width. */
@media (max-width: 479.98px) {
  .phone-field:not(.is-enhanced) { flex-wrap: wrap; }

  .phone-field:not(.is-enhanced) .phone-field__country.input-st {
    width: 100%;
    margin-bottom: 8px;
    border-right: 1px solid var(--field-border);
    border-radius: var(--radius-md);
  }

  .phone-field:not(.is-enhanced) .phone-field__cc {
    border-left: 1px solid var(--field-border);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }
}

/* ---------------------------------------------------------------------------
   Enhanced widget (2026-09-23, UI enhancement plan item 01).

   The native <select> above showed "Singapore (+65)" in a fixed 9.5rem box
   plus a separate "+65" span, which left the number itself ~70px wide in a
   half-width form column — five digits visible. js/phone-field.js now adds
   `.is-enhanced` and a compact trigger button ("SG +65 ▾") that opens a
   searchable country list. The real <select> stays in the form, hidden, and
   is what posts, so asp-for, the [PhoneNumber] rule's sibling lookup and the
   server side are all unchanged. Without JS none of this applies and the
   original select + span layout above renders as before.

   The group draws ONE border around trigger + input, so it reads as a single
   field the way the other inputs do.
   --------------------------------------------------------------------------- */
.phone-field.is-enhanced {
  position: relative;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.phone-field.is-enhanced:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 97, 160, .18);
}

.field.is-invalid .phone-field.is-enhanced { border-color: var(--red); }
.field.is-invalid .phone-field.is-enhanced:focus-within { box-shadow: 0 0 0 3px rgba(237, 28, 36, .14); }

.phone-field.is-enhanced .phone-field__country,
.phone-field.is-enhanced .phone-field__cc { display: none; }

.phone-field__trigger {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--navy-deep);
  cursor: pointer;
}

/* Short divider rather than a full-height border, so a floated label above
   the group (components.css, .form-float) is never cut through. */
.phone-field__trigger::after {
  content: "";
  position: absolute;
  right: 0;
  top: 11px;
  bottom: 11px;
  width: 1px;
  background: var(--line);
}

.phone-field__trigger:focus-visible { outline: none; background: rgba(0, 97, 160, .06); }

.phone-field__iso {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 16px;
}

.phone-field__caret { font-size: 11px; color: var(--navy); }

.phone-field.is-enhanced .phone-field__input.input-st {
  border: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.phone-field.is-enhanced .phone-field__input.input-st:focus-visible {
  outline: none;
  box-shadow: none;
}

.phone-field__menu {
  position: absolute;
  z-index: 40;
  left: -1px;
  top: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  width: min(320px, calc(100vw - 32px));
  max-height: 320px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 18px 40px rgba(1, 51, 99, .14), 0 4px 10px rgba(1, 51, 99, .08);
}

.phone-field__menu[hidden] { display: none; }

.phone-field__search.input-st {
  flex: none;
  min-height: 38px;
  padding: 7px 10px;
  border-color: var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.phone-field__search.input-st:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 97, 160, .14);
}

.phone-field__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 6px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.phone-field__option {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-deep);
  cursor: pointer;
}

.phone-field__option.is-active { background: rgba(0, 97, 160, .09); }
.phone-field__option[aria-selected="true"] { font-weight: 700; }
.phone-field__option-code { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.phone-field__empty {
  padding: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Inside a floating-label form (components.css) the group is as tall as the
   other fields and its contents sit below the floated "Phone" label. */
.form-float .phone-field.is-enhanced .phone-field__trigger,
.form-float .phone-field.is-enhanced .phone-field__input.input-st {
  min-height: 54px;
  padding-top: 22px;
  padding-bottom: 6px;
  font-size: 16px;
}

.form-float .phone-field.is-enhanced .phone-field__trigger::after { top: 26px; bottom: 10px; }