/* Phone number with country picker (flag + dial code). Behaviour: /js/phone-field.js */

/* Country flags drawn the same on every OS (Windows has no flag emoji).
   "Twemoji Country Flags" from country-flag-emoji-polyfill; Twemoji graphics © Twitter, Inc., CC-BY 4.0. */
@font-face {
  font-family: 'Twemoji Country Flags';
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('/assets/fonts/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
}
.flag { font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 1.25rem; line-height: 1; flex: none; }

.phone-field {
  position: relative; display: flex; align-items: stretch; min-width: 0;
  border-radius: 0.9rem; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.phone-field:hover { border-color: rgba(255, 255, 255, 0.24); }
.phone-field:focus-within { border-color: rgba(255, 100, 105, 0.8); background: rgba(0, 0, 0, 0.4); box-shadow: 0 0 0 4px rgba(255, 40, 50, 0.15); }
.field.invalid .phone-field { border-color: #ff5a5f; }

.phone-cc {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  padding: 0 0.7rem 0 0.95rem; border-radius: 0.9rem 0 0 0.9rem; color: #fff; font-size: 0.95rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12); transition: background-color 0.2s;
}
.phone-cc:hover, .phone-cc[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); }
.phone-cc:focus-visible { outline: 2px solid var(--red-soft, #ff6b70); outline-offset: -2px; }
.phone-cc .dial { font-variant-numeric: tabular-nums; }
.phone-cc svg { width: 0.85rem; height: 0.85rem; opacity: 0.6; transition: transform 0.2s; }
.phone-cc[aria-expanded="true"] svg { transform: rotate(180deg); }

/* The number input sits inside the shared frame, so drop the regular .field input frame. */
.field .phone-field input.phone-num,
.field .phone-field input.phone-num:hover,
.field .phone-field input.phone-num:focus { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding-left: 0.8rem; }

.phone-menu {
  /* Opened at the end of <body>; js/phone-field.js sets top/bottom/left/width from the field. */
  position: fixed; z-index: 1000;
  border-radius: 1rem; background: rgba(20, 4, 7, 0.97); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  overflow: hidden; font-family: var(--font-display, 'Poppins', system-ui, sans-serif);
}
.phone-menu .search-wrap { padding: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.phone-menu .phone-search {
  width: 100%; padding: 0.65rem 0.85rem; border-radius: 0.7rem; font: inherit; font-size: 0.9rem; color: #fff;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12);
}
.phone-menu .phone-search::placeholder { color: rgba(255, 255, 255, 0.35); }
.phone-menu .phone-search:focus { outline: none; border-color: rgba(255, 100, 105, 0.8); box-shadow: 0 0 0 3px rgba(255, 40, 50, 0.15); }
.phone-list { list-style: none; margin: 0; padding: 0.35rem; max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; }
.phone-list li {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem; border-radius: 0.6rem;
  font-size: 0.88rem; color: rgba(255, 255, 255, 0.85); cursor: pointer;
}
.phone-list li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-list li .code { color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.phone-list li.active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.phone-list li[aria-selected="true"] { background: rgba(227, 0, 15, 0.28); color: #fff; }
.phone-list li.sep { height: 1px; padding: 0; margin: 0.3rem 0.4rem; background: rgba(255, 255, 255, 0.08); cursor: default; }
.phone-list .none { padding: 1rem; text-align: center; color: rgba(255, 255, 255, 0.5); cursor: default; }

/* iOS Safari zooms into focused fields under 16px. */
@media (hover: none), (max-width: 1023px) {
  .phone-menu .phone-search, .phone-cc { font-size: 16px; }
}