/*
 * UPCLIENT: accessible mobile form controls.
 * iOS Safari automatically zooms into focused form controls whose computed
 * font-size is below 16px. Never disable pinch zoom or change viewport limits.
 * Shared across CRM, booking, onboarding and account forms.
 */

/* An example is a hint, not pre-entered content. Theme CSS can force input
 * -webkit-text-fill-color; specify the placeholder color separately. */
input::placeholder,
textarea::placeholder {
  color: #97a4a0 !important;
  -webkit-text-fill-color: #97a4a0 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.svivi-booking-ui[data-theme="dark"] input::placeholder,
body.svivi-booking-ui[data-theme="dark"] textarea::placeholder {
  color: #adbac4 !important;
  -webkit-text-fill-color: #adbac4 !important;
}

@media screen and (max-width: 1024px) {
  /* CSS from individual sections sometimes overrides the layout's 16px
   * mobile rule; the important declaration also covers inline font sizes.
   * Exclude checkbox/radio and button-like controls. */
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"],
            [type="color"], [type="file"], [type="button"], [type="submit"],
            [type="reset"], [type="image"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Auth's existing input[type=text|email|password] declarations also use
   * !important and have more specificity than the generic control rule. */
  body.svivi-auth .auth-card :is(
    input[type="text"], input[type="email"], input[type="password"], select
  ) {
    font-size: 16px !important;
  }
}