<label class="if-phone">
  <span class="if-phone-label">Phone</span>
  <span class="if-phone-wrap">
    <select aria-label="Country code" name="country">
      <option value="+44">🇬🇧 +44</option>
      <option value="+1" selected>🇺🇸 +1</option>
      <option value="+91">🇮🇳 +91</option>
      <option value="+33">🇫🇷 +33</option>
      <option value="+49">🇩🇪 +49</option>
      <option value="+81">🇯🇵 +81</option>
    </select>
    <input type="tel" name="phone" autocomplete="tel" placeholder="(555) 123-4567" required />
  </span>
</label>

.if-phone {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-phone-label {
  font-weight: 600;
}

.if-phone-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.if-phone-wrap:focus-within {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.if-phone select {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  color: #f0eeff;
  font-size: 13px;
  padding: 10px 28px 10px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239d9bbf' stroke-width='1.5' stroke-linecap='round'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.if-phone select option {
  background: #1a1a22;
  color: #f0eeff;
}

.if-phone input {
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 10px 12px;
  min-width: 0;
}

.if-phone input::placeholder {
  color: #b8b6d4;
}