/* Campo de telefone com seletor de país (src/shared/components/phone-input.js).
   País e número ficam numa caixa só, com a mesma borda e foco dos outros campos (.field input).
   O <select> nativo fica invisível por cima da "cara" do país: acessível e sem lista customizada. */
.pi{display:flex;align-items:stretch;width:100%;border:1px solid #dfe4e0;border-radius:var(--radius-sm);background:var(--white,#fff);transition:border-color .15s,box-shadow .15s}
.pi:focus-within{border-color:var(--green);box-shadow:var(--glow)}
.pi:has(.pi-number:user-invalid){border-color:rgba(226,87,74,.7)}

.pi-country{position:relative;flex:none;display:flex;align-items:center;border-right:1px solid #dfe4e0;cursor:pointer}
.pi-country-face{display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;font:600 13px var(--font-body);color:var(--ink);white-space:nowrap}
.pi-flag{font-size:17px;line-height:1}
.pi-code{font-variant-numeric:tabular-nums}
.pi-country-face svg{color:var(--muted);transition:transform .15s}
.pi-country:hover .pi-country-face svg{color:var(--green)}
.pi-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:14px;border:0}

/* o input herda as medidas de .field input, mas sem borda própria: a borda é da caixa */
.field .pi .pi-number,.pi .pi-number{flex:1;min-width:0;border:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:none;background:transparent;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.field .pi .pi-number:focus,.pi .pi-number:focus{border:0;box-shadow:none;outline:0}

[data-theme="dark"] .pi{background:rgba(255,255,255,.05);border-color:var(--line)}
[data-theme="dark"] .pi-country{border-right-color:var(--line)}
[data-theme="dark"] .field .pi .pi-number{background:transparent}
[data-theme="dark"] .pi-select option{background:#0f2421;color:var(--ink)}