/* Country-code picker beside every phone field (js/phone-cc.js).
   The number keeps its form's own input styling; the country button copies
   the same box so the pair reads as two matching fields. */
.ss-phone { position: relative; display: flex; align-items: stretch; gap: 8px; width: 100%; }
.ss-phone > input[type="tel"] { flex: 1 1 auto; min-width: 0; width: auto !important; }

.ss-phone__cc {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong, #cfd4dc); border-radius: var(--radius-sm, 10px);
  background: var(--surface, #fff); color: var(--text-primary, #0a1220);
  font: 500 15px/1 var(--font-sans, system-ui, sans-serif); cursor: pointer;
  transition: border-color var(--dur-fast, .15s);
}
.ss-phone__cc:hover { border-color: var(--text-tertiary, #8a93a3); }
.ss-phone__cc:focus-visible { outline: 2px solid var(--focus, #10b981); outline-offset: 1px; border-color: transparent; }
.ss-phone.is-open .ss-phone__cc { border-color: var(--text-tertiary, #8a93a3); }
.ss-phone__dial { font-variant-numeric: tabular-nums; }
.ss-phone__chev { color: var(--text-tertiary, #8a93a3); transition: transform var(--dur-fast, .15s); }
.ss-phone.is-open .ss-phone__chev { transform: rotate(180deg); }

.ss-phone__flag { font-size: 20px; line-height: 1; }
.ss-phone__flag--iso {
  display: inline-grid; place-items: center; width: 24px; height: 17px; border-radius: 3px;
  background: var(--surface-sunk, #f2f3ee); color: var(--text-secondary, #4b5565);
  font: 600 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .02em;
}

.ss-phone__menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: min(340px, 100%); max-width: calc(100vw - 32px);
  padding: 8px; border-radius: var(--radius-md, 16px);
  border: 1px solid var(--line-subtle, rgba(10,18,32,.06));
  background: var(--surface, #fff); box-shadow: var(--shadow-float, 0 24px 64px rgba(10,18,32,.16));
}
.ss-phone__menu[hidden] { display: none; }
.ss-phone .ss-phone__menu input.ss-phone__search {
  width: 100%; height: 40px; margin: 0 0 6px; padding: 0 12px;
  border: 1px solid var(--line-strong, #cfd4dc); border-radius: var(--radius-sm, 10px);
  background: var(--surface, #fff); color: var(--text-primary, #0a1220);
  font: 400 15px/1 var(--font-sans, system-ui, sans-serif);
}
.ss-phone .ss-phone__menu input.ss-phone__search:focus { outline: 2px solid var(--focus, #10b981); outline-offset: 0; border-color: transparent; }
.ss-phone__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.ss-phone__list li[role="option"] {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  color: var(--text-primary, #0a1220); font: 400 14px/1.2 var(--font-sans, system-ui, sans-serif);
}
.ss-phone__list li.is-active { background: var(--surface-sunk, #f2f3ee); }
.ss-phone__list li[aria-selected="true"] { font-weight: 600; }
.ss-phone__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-phone__code { color: var(--text-tertiary, #8a93a3); font-variant-numeric: tabular-nums; }
.ss-phone__empty { padding: 12px 10px; color: var(--text-tertiary, #8a93a3); font-size: 14px; }

[dir="rtl"] .ss-phone__menu { left: auto; right: 0; }