/* MailerLite event newsletter embed. */
.event-newsletter-form {
  display: block;
  width: 100%;
  margin-top: 32px;
}

.event-newsletter-form[hidden] {
  display: none !important;
}

.event-newsletter-form__row {
  display: flex;
  width: 100%;
}

.event-newsletter-form__field {
  flex: 1 1 auto;
  min-width: 0;
}

.event-newsletter-form__input {
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  margin: 0;
  padding: 0 24px;
  border: 1px solid var(--color-ui-04, #c9c9c9);
  border-radius: 8px 0 0 8px;
  background: var(--color-ui-01, #fff);
  font-family: var(--font-family-02, sans-serif);
  font-size: var(--font-large, 20px);
}

.event-newsletter-form__submit {
  display: inline-flex;
  flex: 0 0 72px;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: var(--color-sub2, #ff8243);
  color: #fff;
  cursor: pointer;
}

/* MailerLite swaps these two controls while submitting. Keep the inactive one
   out of the flex row even though the shared button class sets display. */
.event-newsletter-form__submit[hidden] {
  display: none !important;
}

.event-newsletter-form__submit:hover,
.event-newsletter-form__submit:focus-visible {
  background: var(--color-sub2-hover, #333);
}

.event-newsletter-form__submit i {
  color: #fff;
  font-size: 30px;
}

.ml-form-embedSubmitLoad {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.ml-form-embedSubmitLoad::after {
  display: block;
  width: 11px;
  height: 11px;
  margin: 1px;
  border: 4px solid #fff;
  border-color: #fff #fff #fff transparent;
  border-radius: 50%;
  animation: ml-form-embed-submit-load 1.2s linear infinite;
  content: "";
}
button.event-newsletter-form__submit.loading {
    display: none;
}

@keyframes ml-form-embed-submit-load {
  to { transform: rotate(360deg); }
}

@media screen and (max-width: 639px) {
  .event-newsletter-form { margin-top: 24px; }
  .event-newsletter-form__input { height: 56px; padding: 0 16px; font-size: 18px; }
  .event-newsletter-form__submit { flex-basis: 64px; height: 56px; }
}