/* Trial expiration
 * -------------------------------------------------------------------------- */

.trial-expired {
  @media (min-width: 40em) {
    background: url("/assets/abstracts/abstract-4-b3fbe631.svg") center -5rem / 100% 58rem no-repeat;
  }
}

.trial-expired__columns {
  @media (min-width: 40em) {
    display: flex;
  }
}

.trial-expired__column {
  @media (min-width: 40em) {
    margin: 0 var(--half-space);
  }
}

/* Credit card fields
 * -------------------------------------------------------------------------- */

.credit-card-form__field--type {
  background: transparent url("/assets/payment/credit_card_types-05464147.png") center right 1rem no-repeat;
  background-size: 10rem;
  position: absolute;
  right: 0;
  height: 45px;
  width: 205px;
}

.credit-card-form[data-card-type] {
  .credit-card-form__field--type {
    background-image: url("/assets/payment/credit-card-sprite-e29ddb8d.png");
    background-size: 57px 205px;
    background-repeat: no-repeat;
    background-position: -999px;
  }
}

.credit-card-form[data-card-type="visa"] {
  .credit-card-form__field--type { background-position: 100% 15px; }
}

.credit-card-form[data-card-type="master-card"] {
  .credit-card-form__field--type { background-position: 100% -31px; }
}

.credit-card-form[data-card-type="american-express"] {
  .credit-card-form__field--type { background-position: 100% -77px; }
}

.credit-card-form[data-card-type="discover"] {
  .credit-card-form__field--type { background-position: 100% -128px; }
}

.credit-card-form[data-card-type="jcb"] {
  .credit-card-form__field--type { background-position: 100% -172px; }
}

.credit-card-form__attributes-wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.credit-card-form__attribute {
  margin: 0.75em 0 0;
  width: 100%;

  &:not(:last-child) { margin-right: 0.75em; }
}

.credit-card-form__field {
  height: 45px;
  width: 100%;
  padding: 0 1rem;
  border-radius: 0.4rem;
  border: 1px solid var(--color-border);
  font: 18px system-ui, sans-serif;

  &.braintree-hosted-fields-focused,
  &.input--select:focus,
  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);

    &.braintree-hosted-fields-invalid {
      box-shadow: 0 0 0 2px var(--color-negative);
    }
  }

  &.braintree-hosted-fields-invalid {
    box-shadow: 0 0 0 2px var(--color-negative);
  }

  &.input--select {
    padding: 0 2em 0 1rem;
    background-color: var(--color-bg--sheet);
  }

  + .credit-card-form__error { display: none; }

  &.braintree-hosted-fields-invalid {
    + .credit-card-form__error {
      display: initial;
    }
  }
}

.credit-card-form__field--number,
.credit-card-form__field--expiration-date,
.credit-card-form__field--cvv {
  padding: 0;
}

.credit-card-form__fieldset {
  padding: 0;
  border: 0;
  border-top: 1px solid var(--color-border);

  legend {
    background: var(--color-bg-main);
    padding-right: 0.25em;
    margin-bottom: var(--half-space);
    margin-left: -2px;
    color: var(--color-secondary);
    font-size: var(--font-size-small);
    text-transform: uppercase;
  }
}

.credit-card-form__fieldset--locale {
  border-top: 0;
  margin: 0;

  &[disabled] { display: none; }
}

/* Credit Cards */
.credit-card {
  position: relative;
  background: var(--color-bg-main);
  box-shadow: 0 3px 2px var(--color-shadow);
  border-radius: 1rem;
  max-width: 32rem;
  min-width: 20rem;
  font-family: var(--font-family--mono);
  font-size: var(--font-size-small);
  margin: 0 auto;

  &::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 61.8%; /* Golden rati-yo */
  }
}

.credit-card__content,
.credit-card__card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 1rem;
}

.credit-card__card {
  background: #3866a8 url("/assets/payment/splash-72a62833.svg") no-repeat left / 180%;
  z-index: 0;
}

.credit-card__details {
  color: var(--color-always-white);
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  z-index: 1;

  dd,
  dt {
    margin: 0;
  }
}

.credit-card__type {
  position: absolute;
  text-indent: -999em;
  right: 1rem;
  top: 1rem;
  z-index: 1;
  height: 3.5rem;
  width: 5.5rem;
  border-radius: 0.6rem;
  background-color: var(--color-always-white);
  background-image: url("/assets/payment/credit-card-sprite-e29ddb8d.png");
  background-size: 57px 205px;
  background-repeat: no-repeat;
  background-position: -999px;
}

/* Credit cards
 * -------------------------------------------------------------------------- */

.credit-card--visa {
  .credit-card__type { background-position: 0 12px; }
  .credit-card__card { filter: brightness(0.5) sepia(1) hue-rotate(170deg) saturate(5); }
}

.credit-card--mastercard {
  .credit-card__type { background-position: 0 -35px; }
  .credit-card__card { filter: brightness(0.4) sepia(1) hue-rotate(-49deg) saturate(5); }
}

.credit-card--american-express {
  .credit-card__type { background-position: 0 -82px; }
  .credit-card__card { filter: brightness(0.5) sepia(1) hue-rotate(170deg) saturate(5); }
}

.credit-card--discover {
  .credit-card__type { background-position: 2px -131px; }
  .credit-card__card { filter: brightness(0.5) sepia(1) hue-rotate(-40deg) saturate(3); }
}

.credit-card--jcb {
  .credit-card__type { background-position: 0 -176px; }
  .credit-card__card { filter: brightness(0.5) sepia(1) hue-rotate(-150deg) saturate(6); }
}