.subscribe-buttons {
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  justify-content: left;

  .btn-discourse-subscriptions-subscribe {
    flex-direction: column;
    flex-grow: 1;
    margin: 0.25em;
    padding: 1em;
    width: 6em;
  }
}

.btn-payment {
  width: 100%;
}

.anon #card-element {
  display: none;
}

.StripeElement {
  box-sizing: border-box;
  padding: 10px;
  height: 40px;
  margin-bottom: 9px;
  border: 1px solid var(--primary-medium);
  background-color: var(--secondary);
  font-size: $base-font-size;
  font-family: $base-font-family;
}

.StripeElement--focus {
  border-color: var(--tertiary);
  outline: 1px solid var(--tertiary);
}

.StripeElement--invalid {
  border-color: var(--danger);
}

.StripeElement--webkit-autofill {
  color: var(--quaternary);
}

.subscribe-promo-code,
.subscribe-name,
.subscribe-address-line1,
.subscribe-address-city,
.subscribe-address-state,
.subscribe-address-country-select,
.subscribe-address-state-select,
.subscribe-address-postal-code {
  width: 100%;
}

.subscribe-address-country-select,
.subscribe-address-state-select {
  margin-bottom: 9px;
}

@media all and (width >= 1350px) {
  .address-fields {
    display: flex;
    justify-content: space-between;

    & > input,
    & > .select-kit {
      width: calc(50% - 4.5px);
    }
  }
}
