/* Keep fields visible while preventing bright browser/focus outlines. */
html body {
  --ip-form-field-border: rgba(255, 255, 255, .14);
}

html.light body {
  --ip-form-field-border: rgba(11, 14, 22, .16);
}

html body .pg-auth-modal {
  --ip-autofill-bg: #0b0d14;
}

html body .register-retail,
html body .register-wholesale {
  --ip-autofill-bg: #080a10;
}

html body form input:not(:where([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"])),
html body form textarea,
html body form select,
html body form .select2-container .select2-selection,
html body form .choices__inner {
  border-color: var(--ip-form-field-border) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body form input:not(:where([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"])):hover,
html body form input:not(:where([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"])):focus,
html body form input:not(:where([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"])):focus-visible,
html body form textarea:hover,
html body form textarea:focus,
html body form textarea:focus-visible,
html body form select:hover,
html body form select:focus,
html body form select:focus-visible,
html body form .select2-container .select2-selection:hover,
html body form .select2-container--focus .select2-selection,
html body form .select2-container--open .select2-selection,
html body form .choices.is-focused .choices__inner,
html body form .choices.is-open .choices__inner {
  border-color: var(--ip-form-field-border) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Preserve the dark autofill surface; the inset fill is not a visible outline. */
html body form input:-webkit-autofill,
html body form input:-webkit-autofill:hover,
html body form input:-webkit-autofill:focus,
html body form input:-webkit-autofill:active,
html body form textarea:-webkit-autofill,
html body form textarea:-webkit-autofill:hover,
html body form textarea:-webkit-autofill:focus,
html body form textarea:-webkit-autofill:active,
html body form select:-webkit-autofill,
html body form select:-webkit-autofill:hover,
html body form select:-webkit-autofill:focus,
html body form select:-webkit-autofill:active,
html body form input:autofill,
html body form textarea:autofill,
html body form select:autofill {
  border-color: var(--ip-form-field-border) !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ip-autofill-bg, #0b0e17) inset !important;
  box-shadow: 0 0 0 1000px var(--ip-autofill-bg, #0b0e17) inset !important;
}

html body form input:-moz-autofill,
html body form textarea:-moz-autofill,
html body form select:-moz-autofill {
  border-color: var(--ip-form-field-border) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 1000px var(--ip-autofill-bg, #0b0e17) inset !important;
}

/* Password managers can re-apply autofill when the modal opens again. */
html body .pg-auth-backdrop .pg-auth-form input:-webkit-autofill,
html body .pg-auth-backdrop .pg-auth-form input:-webkit-autofill:hover,
html body .pg-auth-backdrop .pg-auth-form input:-webkit-autofill:focus,
html body .pg-auth-backdrop .pg-auth-form input:-webkit-autofill:active,
html body .pg-auth-backdrop .pg-auth-form input:autofill {
  background-color: var(--ip-autofill-bg) !important;
  background-image: none !important;
  border-color: var(--ip-form-field-border) !important;
  color: var(--ip-autofill-color) !important;
  -webkit-text-fill-color: var(--ip-autofill-color) !important;
  caret-color: var(--ip-autofill-color) !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ip-autofill-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--ip-autofill-bg) inset !important;
}

/* Keep delayed password-manager fills dark even between autofill state changes. */
html body #pgAuthBackdrop .pg-auth-form input[name="phone_view"],
html body #pgAuthBackdrop .pg-auth-form input[name="password"] {
  background-color: var(--ip-autofill-bg) !important;
  background-image: none !important;
  border-color: var(--ip-form-field-border) !important;
  color: var(--ip-autofill-color) !important;
  -webkit-text-fill-color: var(--ip-autofill-color) !important;
  caret-color: var(--ip-autofill-color) !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ip-autofill-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--ip-autofill-bg) inset !important;
}

/* Shared international phone field used by checkout and contact forms. */
html body form .iti {
  display: block;
  width: 100%;
  max-width: 100%;
}

html body form .iti input.pg-phone-intl {
  width: 100% !important;
  padding-left: 112px;
}

html body form .iti__country-container {
  left: 0;
  padding: 1px;
}

html body form .iti__selected-country,
html body form .iti__selected-flag {
  display: flex !important;
  align-items: center !important;
  gap: 7px;
  width: auto !important;
  min-width: 0;
  height: 100%;
  padding: 0 11px !important;
  border: 0 !important;
  border-right: 1px solid var(--ip-form-field-border) !important;
  border-radius: 7px 0 0 7px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: inherit !important;
}

html.light body form .iti__selected-country,
html.light body form .iti__selected-flag {
  background: rgba(11, 14, 22, .035) !important;
}

html body form .iti__selected-country-primary {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  gap: 5px !important;
}

html body form .iti .pg-dial,
html body form .iti__selected-dial-code {
  margin: 0 !important;
  color: inherit !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

html body form .iti__arrow {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body form .iti__dropdown-content,
html body form .iti__country-list {
  z-index: 10020 !important;
  border: 1px solid var(--ip-form-field-border) !important;
  background: #11131a !important;
  color: #f5f6fa !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34) !important;
}

html.light body form .iti__dropdown-content,
html.light body form .iti__country-list {
  background: #fff !important;
  color: #171922 !important;
}

html body form .iti__country.iti__highlight {
  background: rgba(255, 45, 122, .12) !important;
}

html body form [data-pg-phone-field],
html body form .ipSupportChat__phone {
  min-width: 0;
}

html body form .pg-phone-error:empty {
  display: none;
}