/* The SMS opt-in page. Rides on /terms/legal.css so the sign-up, the Terms and
   the Privacy Policy look like one document to a carrier reviewing the
   campaign. */

.sms-page h2 { font-size: 19px; }

.sms-form {
  display: block;
  margin: 0 0 34px;
  padding: 20px;
  border: 1px solid rgba(8, 36, 44, .18);
  border-radius: 12px;
  background: #fff;
}
.sms-form__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.sms-form__input {
  width: 100%;
  max-width: 320px;
  padding: 11px 13px;
  font-size: 16px; /* 16px or iOS zooms the page on focus. */
  font-family: inherit;
  color: var(--legal-ink);
  border: 1px solid rgba(8, 36, 44, .28);
  border-radius: 9px;
  background: #fff;
}
.sms-form__input:focus {
  outline: 2px solid #0b7a53;
  outline-offset: 1px;
}
.sms-form__hint {
  margin: 6px 0 16px;
  font-size: 13px;
  color: var(--legal-dim);
}
.sms-form__submit {
  margin-top: 16px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: #0b7a53;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.sms-form__submit:hover { background: #0a6847; }
.sms-form__submit[disabled] { opacity: .55; cursor: default; }
.sms-form__status {
  margin: 14px 0 0;
  font-size: 14.5px;
  min-height: 1.2em;
}
.sms-form__status[data-tone="error"] { color: #c0304a; font-weight: 600; }
.sms-form__status[data-tone="ok"] { color: #0b7a53; font-weight: 600; }

.sms-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-weight: 600;
  margin-top: 28px;
}