/* The split phone control: country and prefix on the left, the rest on the
   right. Loaded on every page that renders a booking or client form. */

.phone-field{
  display:grid;
  grid-template-columns:minmax(110px, 30%) 1fr;
  gap:8px;
  align-items:start;
}

/* The country box is enhanced into a combobox, which wraps it in .combo. */
.phone-field > .combo,
.phone-field > select{min-width:0}
.phone-field .phone-number{min-width:0}

/* Dropdown rows read "Albania" with "+355" underneath. */
.combo-option .combo-hint{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Once chosen, the left box shows just the code — the number beside it is
   what people are reading, and a full country name would crowd it out. */
.phone-field .combo-input{font-variant-numeric:tabular-nums}

/* Without JavaScript the native select carries the country and code in its
   own text, so nothing is lost. */
.phone-field select.phone-country{width:100%}