/* ช่องเบอร์โทรแบบมีประเทศ (ui/phone-field.js · 21 ต.ค.) — ปุ่มธง + รหัสโทรติดหน้าช่องเป็นก้อนเดียว */
.phf { display: flex; align-items: stretch; min-width: 0; }
.phf-cc {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 10px 0 12px;
  border: 1px solid var(--line); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-size: 16px;
}
.phf-cc:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.phf-flag { font-size: 22px; line-height: 1; }
.phf-dial { font-size: 15px; color: var(--ink-dim); }
.phf-caret { font-size: 11px; color: var(--ink-mute); }
.field .phf input, .phf input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.phf.is-bad .phf-cc, .phf.is-bad input { border-color: var(--danger-text); }
.ph-err { font-size: 13px; color: var(--danger-text); line-height: 1.45; }

/* หน้าเลือกประเทศ — แถวสูงพอให้นิ้วโดน · ธง · ชื่อ · รหัสชิดขวาเป็นคอลัมน์ */
.phc { display: grid; gap: 2px; }
.phc-list { display: grid; }
.phc-h {
  margin: 14px 2px 4px; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
}
.phc-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 10px;
  border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--ink); font-size: 16px; text-align: left;
}
.phc-row[aria-pressed="true"] { background: var(--accent-wash-faint); }
.phc-row[aria-pressed="true"] .phc-name { font-weight: 600; }
.phc-flag { font-size: 24px; line-height: 1; }
.phc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phc-dial { color: var(--ink-dim); font-size: 15px; }

/* ธงหน้าเบอร์ที่แสดงเฉย ๆ (แผงใบจอง · หน้าลูกค้า) — ขนาดเท่าตัวหนังสือรอบข้าง ไม่ใช่ขนาดของปุ่ม */
.ph-flag { font-size: 1.1em; line-height: 1; margin-right: 4px; vertical-align: -0.05em; }