/* Country calling code picker (site/assets/phone-country.js): one joined field, [ IN +91 v | number ].
   Same height, radius and background as the other .f inputs; the whole group takes the focus ring and
   the error state. Without the script none of this is used. */
.f .pc { position: relative; display: flex; align-items: stretch; width: 100%; min-width: 0; background: var(--paper); border: 1.5px solid transparent; border-radius: .9rem; transition: border-color .2s, background .2s; }
.f .pc:hover { border-color: var(--line); }
.f .pc:focus-within { border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px rgba(91, 53, 213, .16); }
.f .pc:has([aria-invalid="true"]) { border-color: #c4281c; background: #fff6f5; }
.pc__cc { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; padding: 0 .45rem 0 .7rem; border-right: 1px solid var(--line); white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc__cc::after { content: ""; width: .42rem; height: .42rem; margin-top: -.2rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .55; }
.pc__shown { pointer-events: none; }
.f .pc .pc__select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: .9rem 0 0 .9rem; background: transparent; opacity: 0; cursor: pointer; font-size: 1rem; }
.f .pc input.pc__num:not([type="radio"]) { flex: 1 1 auto; width: auto; min-width: 0; background: transparent; border: 0; border-radius: 0 .9rem .9rem 0; box-shadow: none; padding-left: .65rem; padding-right: .65rem; }
.f .pc input.pc__num::placeholder { font-size: .92em; }
.f .pc input.pc__num:hover, .f .pc input.pc__num:focus-visible, .f .pc input.pc__num[aria-invalid="true"] { background: transparent; border: 0; box-shadow: none; outline: 0; }