/* Hummed custom phone field styles */

.iti {
  width: 100%;
}

.iti--container {
  z-index: 10000;
}

.iti__country-list {
  z-index: 10000;
}

.phone,
.phone input,
.iti input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
}

/*
 * intl-tel-input forces "min-width: 100%" on the input it wraps. A min-width
 * wins over the max-width the theme applies to form fields, so the phone
 * field used to ignore the theme sizing and stretch across the whole column
 * instead of lining up with the other fields. Resetting the min-width lets
 * the theme rule take effect again.
 *
 * The selectors below repeat the vendor specificity on purpose, otherwise
 * intl-tel-input's own "[type=text]" variant keeps winning.
 */
.iti input.iti__tel-input[type="text"],
.iti input.iti__tel-input[type="tel"] {
  min-width: 0;
}

#contactForm label[for="phone"]::after {
  content: " *";
  color: #d00;
}

/* WhatsApp number field in the Add/Edit Author modal */

#whatsappPhoneContainer {
  width: 100%;
}

#whatsappPhoneContainer .description {
  display: block;
  font-size: 0.85em;
  font-style: italic;
  color: #666;
}

.hummed_whatsapp_empty {
  color: #999;
}