/* Loaded once, and only by the shared telephone field. */
.eh-phone{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--elevated);direction:ltr;min-width:0}
.eh-phone:focus-within{border-color:var(--red)}
.eh-field .eh-phone>input:not([type=hidden]){border:0;background:none;flex:1;min-width:0;width:0;padding-inline:12px}
.eh-phone-country{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border-inline-end:1px solid var(--line);font:500 calc(14px*var(--scale,1)) var(--font);flex:none}
.eh-phone-flag{display:grid;place-items:center;width:24px;min-height:16px}
/* A flag: Syria's own drawing, every other one a slice of one picture that is fetched only when a flag is first shown. */
.eh-flag{display:block;flex:none;width:20px;height:15px;border-radius:2px;background-color:var(--surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent);object-fit:cover}
.eh-flag-sprite{background-image:url(../img/flags/flags.webp);background-repeat:no-repeat;background-size:5762px 15px}
.eh-phone-country bdi{font-variant-numeric:tabular-nums}
.eh-country-dialog{width:min(400px,calc(100% - 32px));max-height:84dvh;padding:20px;border:1px solid var(--line);border-radius:24px;background:var(--elevated);color:var(--ink);overscroll-behavior:contain}
.eh-country-dialog::backdrop{background:#0007}
.eh-country-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-block-end:12px}
.eh-country-dialog input{display:block;width:100%;font:400 calc(15px*var(--scale,1))/1.5 var(--font);color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:10px 18px;margin-block-end:12px;min-height:46px}
.eh-country-list{height:min(336px,52dvh);margin:0;padding:6px;overflow-y:auto;overscroll-behavior:contain;list-style:none;border:1px solid var(--line);border-radius:18px;background:var(--canvas)}
.eh-country-list li{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:12px;font-size:calc(15px*var(--scale,1));cursor:pointer;transition:background var(--fast),color var(--fast)}
.eh-country-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eh-country-code{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.eh-country-list li[aria-selected=true]{background:var(--soft);color:var(--red)}.eh-country-list li[aria-selected=true] .eh-country-code{color:inherit}
.eh-country-list li:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.eh-country-empty{margin:0;padding:28px 12px;text-align:center;color:var(--muted);font-size:calc(14px*var(--scale,1))}
@media (hover:hover){.eh-country-list li:not([aria-selected=true]):hover{background:var(--surface)}}
.eh-country-dialog :is(button,input):focus-visible,.eh-phone-country:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* The country field of an address: the chosen country's flag at its start. */
.eh-country-select{position:relative}.eh-country-select-flag{position:absolute;inset-inline-start:14px;top:50%;translate:0 -50%;pointer-events:none}
.eh-field .eh-country-select.has-flag select{padding-inline-start:46px}
.eh-country-dialog[open]{animation:eh-country-enter 160ms var(--ease)}
@keyframes eh-country-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.eh-country-dialog[open]{animation:none}}