/* FormCraft Canada/USA automatic phone field */
.fc-form .phone-cover,
.fc-form .phone-cover > div,
.fc-form .phone-cover .fc-phone-row {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.fc-form .phone-cover > div { position: relative; }

.fc-form .phone-cover .fc-phone-row {
  display: flex;
  align-items: stretch;
  overflow: visible;
  border-radius: 7px;
}

/* Fixed flag indicator. Visitors do not select a country. */
.fc-form .phone-cover .fc-phone-country-shell {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 42px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #d4d7db;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: #fff;
  pointer-events: none;
}

.fc-form .phone-cover .fc-phone-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  font-size: 20px;
  line-height: 1;
}

.fc-form .phone-cover .fc-phone-country-value { display: none !important; }

.fc-form .phone-cover .fc-phone-input {
  flex: 1 1 0%;
  min-width: 0 !important;
  width: 1% !important;
  max-width: 100%;
  margin: 0 !important;
  border-radius: 0 6px 6px 0 !important;
  box-sizing: border-box;
}

.fc-form .phone-cover .fc-phone-input:focus {
  position: relative;
  z-index: 2;
}

.fc-form .form-element.error-field .phone-cover .fc-phone-country-shell { border-color: red; }

/* Required asterisk support for the custom phone field. */
html .formcraft-css .fc-form.label-placeholder.remove-asterisk- .form-element.is-required-true .field-cover.phone-cover::after,
html .formcraft-css .fc-form.label-placeholder.remove-asterisk-false .form-element.is-required-true .field-cover.phone-cover::after {
  content: '*';
  position: absolute;
  color: red;
  top: -3px;
  right: -1px;
  z-index: 4;
  font-size: 26px;
  line-height: 1;
}

html .formcraft-css .fc-form.label-placeholder.remove-asterisk-true .form-element.is-required-true .field-cover.phone-cover::after { content: none; }

#formcraft-builder-cover .fc-form .phone-cover .fc-phone-country-shell {
  flex-basis: 42px;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
}

.fc-form .form-element-type-phone,
.fc-form .form-element-type-phone .form-element-html,
.fc-form .form-element-type-phone .phone-cover { min-width: 0; }

@media (max-width: 520px) {
  .fc-form .phone-cover .fc-phone-country-shell {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
  }
  .fc-form .phone-cover .fc-phone-flag { font-size: 19px; }
}

/* 3.9.15.7 migration safety: old selector UI must never render. */
.fc-form .phone-cover .fc-phone-country-select,
.fc-form .phone-cover .fc-phone-country-chevron,
.fc-form .phone-cover .fc-phone-row > select[name$="_country"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
