.duppo-phone{min-width:0;margin:12px 0;grid-column:1/-1}.duppo-phone-grid{display:grid;grid-template-columns:minmax(155px,1fr) minmax(170px,1.2fr);gap:12px}.duppo-phone .field{min-width:0;margin:0}.duppo-phone select,.duppo-phone input[type=tel]{width:100%;min-width:0;box-sizing:border-box;min-height:44px}.duppo-phone select{max-width:100%;font:inherit;color:inherit;background:var(--input-bg,var(--panel,#fff));border:1px solid var(--border,#d5dce3);border-radius:10px;padding:10px}.duppo-phone-number{display:flex;align-items:stretch;border:1px solid var(--border,#d5dce3);border-radius:10px;overflow:hidden;background:var(--input-bg,var(--panel,#fff))}.duppo-phone-number>span{display:flex;align-items:center;padding:0 11px;border-right:1px solid var(--border,#d5dce3);white-space:nowrap;color:var(--muted,#5f6a77);font-size:13px}.duppo-phone-number input[type=tel]{margin:0;border:0!important;border-radius:0!important;background:transparent;color:inherit}.duppo-phone-number:focus-within{outline:2px solid var(--brand,#d85613);outline-offset:2px}.duppo-phone-note{font-size:12px;line-height:1.5;margin:7px 0;color:var(--muted,#5f6a77)}.duppo-phone-legacy{color:var(--text,#394454)}.duppo-phone-update{display:flex!important;align-items:flex-start;gap:8px;margin-top:8px!important;font-size:13px;line-height:1.5}.duppo-phone-update input[type=checkbox]{width:17px;height:17px;min-height:0;flex:0 0 17px;margin:2px 0 0}.duppo-phone-update span{min-width:0}html[data-duppo-theme=dark] .duppo-phone select,html[data-duppo-theme=dark] .duppo-phone-number{background:var(--input-bg,#202934);color:var(--text,#e8edf2);border-color:var(--border,#405060)}html[data-duppo-theme=dark] .duppo-phone-note{color:var(--muted,#b2bfcd)}@media(max-width:560px){.duppo-phone-grid{grid-template-columns:1fr}.duppo-phone select{font-size:16px}.duppo-phone input[type=tel]{font-size:16px}}
.duppo-phone-search-label{display:block;font-size:12px!important;font-weight:400!important;margin:0 0 5px!important}.duppo-phone .duppo-phone-search{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;min-height:44px;margin:0 0 8px;border:1px solid var(--border,#d5dce3);border-radius:10px;padding:10px;font:inherit;color:inherit;background:var(--input-bg,var(--panel,#fff))}.duppo-phone [hidden]{display:none!important}.duppo-phone option{white-space:normal}
.duppo-phone-grid{align-items:end}.duppo-phone .field,.public-body .duppo-phone .field{display:flex;flex-direction:column;align-self:end;gap:7px}.duppo-phone select{height:46px;min-height:46px}.duppo-phone .duppo-phone-number{height:46px;min-height:46px;box-sizing:border-box;align-items:center}.duppo-phone .duppo-phone-number input[type=tel]{height:44px;min-height:44px}
.duppo-phone-number{background:var(--input-bg,var(--surface,var(--panel,#fff)))}
/* Self-hosted regional-indicator subset: render native country flags on Windows too. */
@font-face{font-family:"Duppo Country Flags";src:url("/assets/fonts/noto-color-flags.woff2?v=20261104-v35114") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+1F1E6-1F1FF}
.duppo-phone.duppo-phone-compact .duppo-phone-compact-control select{font-family:"Duppo Country Flags",system-ui,sans-serif}
.duppo-phone .duppo-phone-compact-control:focus-within,.duppo-phone .duppo-phone-number:focus-within{outline-color:var(--blue,var(--primary,#315578))}
.duppo-phone-compact-control{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--border,#d5dce3);border-radius:10px;background:var(--input-bg,var(--surface,var(--panel,#fff)));overflow:hidden}.duppo-phone-compact .duppo-phone-compact-control select{flex:0 0 112px;width:112px;max-width:112px;height:44px;min-height:44px;border:0;border-right:1px solid var(--border,#d5dce3);border-radius:0;padding:8px 6px;font-family:inherit;background:transparent;color:inherit}.duppo-phone-compact .duppo-phone-compact-control input[type=tel]{flex:1 1 0;width:0;min-width:0;height:44px;min-height:44px;border:0;border-radius:0;padding:9px 12px;background:transparent;color:inherit}.duppo-phone-compact-control:focus-within{outline:2px solid var(--brand,#d85613);outline-offset:2px}.duppo-phone-compact .duppo-phone-note{margin-bottom:0}@media(max-width:430px){.duppo-phone-compact .duppo-phone-compact-control select{flex-basis:104px;width:104px;max-width:104px}}

/* The profile reuses the flag picker as one field, with the application's control geometry. */
html:root:root .account-profile-layout .duppo-phone[data-phone-compact-edit]{margin:0;grid-column:1/-1}
html:root:root .account-profile-layout .duppo-phone[data-phone-compact-edit]>.field{display:block;margin:0}
html:root:root .account-profile-layout .duppo-phone[data-phone-compact-edit]>.field>label{margin:0 0 6px}
html:root:root .account-profile-layout .duppo-phone[data-phone-compact-edit] .duppo-phone-compact-control{display:flex;align-items:stretch;width:100%;min-width:0;height:46px;min-height:46px;padding:0;gap:0;border:1px solid var(--duppo-control-border,var(--line,#d5dce3));border-radius:9px;background:var(--duppo-input,var(--panel,#fff));color:var(--duppo-ink,var(--ink,#172033))}
html:root:root body .account-profile-layout .duppo-phone[data-phone-compact-edit] select{flex:0 0 112px;width:112px;min-width:112px;max-width:112px;height:44px;min-height:44px;margin:0;padding:8px 6px;border:0;border-right:1px solid var(--duppo-control-border,var(--line,#d5dce3));border-radius:0;background:transparent;box-shadow:none;font-family:"Duppo Country Flags",var(--duppo-ui-font,system-ui,sans-serif)!important;font-size:14px;line-height:1.4;color:inherit}
html:root:root .account-profile-layout .duppo-phone[data-phone-compact-edit] input[type=tel]{flex:1 1 0;width:0;min-width:0;max-width:none;height:44px;min-height:44px;margin:0;padding:10px 12px;border:0!important;border-radius:0;background:transparent;box-shadow:none;outline:0;font-family:inherit;font-size:14px;line-height:1.4;color:inherit}
html:root:root .account-profile-layout .duppo-phone[data-phone-compact-edit] .duppo-phone-compact-control:focus-within{outline:3px solid var(--duppo-focus,#749bce);outline-offset:2px}
html:root:root .account-profile-layout .duppo-phone[data-phone-compact-edit][data-phone-full-number] select{flex-basis:64px;width:64px;min-width:64px;max-width:64px}
@media(max-width:560px){html:root:root .account-profile-layout .duppo-phone[data-phone-compact-edit] :is(select,input[type=tel]){font-size:16px}}