.checkout
  display flex
  flex-flow row wrap
  color $bz-white
  max-width 1200px
  padding 0 5%
  margin 0 auto
  &-column, &-header
    flex 1 100%
  &-header
    text-align center
  &-secure
    height .70em
    float right
    margin-top 3px
    &__text
      fill $bz-white
    &__lock
      fill $bz-yellow
  &-logo
    width auto
    height 32px
    margin-top 2em
    display inline-block
  &-column
    margin-top 4em
    box-sizing border-box
    display inline-block
  &-heading
    color $bz-white
    font-size 1.5em
    font-weight 300
    margin-bottom 1em
    padding-bottom 0.5em
    border-bottom 1px solid $bz-grey--dark
  &-section
    margin-bottom 3em
    &.completed
      .checkout-heading:after
        icon()
        font-family 'bzpro-font'
        content '\F107'
        color $bz-blue
        display inline-block
        font-size .8em
        margin-left .5em
    &.proceed
      text-align center
    &.error
      background $bz-red
      padding 10px 15px
      line-height 1.25em
    &.disabled
      *:not(.checkout-next)
        color $bz-grey--dark !important
      .checkout-next
        background $bz-black
        color $bz-grey--dark
        border 1px solid $bz-grey--dark
      .checkout-secure
        &__lock, &__text
          fill $bz-grey--dark
  &-plan
    font-size 1.75em
    font-weight 600
    border-color $bz-grey--dark
    border-style solid
    border-width 1px 1px 0
    text-align center
    padding 2em 0
    border-bottom 0
    text-transform capitalize
  &-select
    position relative
    &:after
      content ''
      display inline-block
      left 0
      right 0
      top 0
      height 50%
      position absolute
      z-index 1
      transition transform .4s ease
    &.selected:after
      background $bz-grey--dark
    &.monthly:after, &.basic:after
      transform translateY(0)
    &.annual:after, &.premium:after
      transform translateY(100%)
    &__input
      display none
    &__input:checked + &__toggle
      &:before
        background $bz-blue
      &:after
        content '\f107'
        transform scale(1)
    &__name, &__price
      font-weight 500
      font-size 1.75em
    &__price
      margin-bottom .25em
      small
        font-size .75em
    &__sub
      text-transform uppercase
      font-weight 300
      color $bz-grey
    &__toggle
      z-index 2
      cursor pointer
      position relative
      width 100%
      height 50%
      text-align center
      display inline-block
      padding 1.5em
      box-sizing border-box
      border 1px solid $bz-grey--dark
      &:first-of-type
        border-bottom 0
        border-right 1px solid $bz-grey--dark
      &:after
        icon()
        font-family 'bzpro-font'
        content ''
        position absolute
        line-height 25px
        left 25px
        width 25px
        top calc(50% - 12px)
        transform scale(0)
        transition transform .4s ease
      &:before
        content ''
        display inline-block
        position absolute
        background $bz-grey--dark
        width 25px
        height 25px
        left 25px
        top 50%
        transform translateY(-50%)
        transition background .4s ease
  &-field
    display inline-block
    width 100%
    vertical-align top
    &.submit
      text-align right
    &.cccvv
      width 35%
    &.ccexpire
      width calc(65% - 20px)
      margin-right 20px
    &:not(:first-of-type)
      margin-top 1.25em
    &__label
      display block
      text-transform uppercase
      color $bz-grey
      font-size .8125em
      margin-bottom .5em
    &__input
      background $bz-grey--dark
      padding 15px 20px
      box-sizing border-box
      border 1px solid $bz-grey--dark
      outline 0
      width 100%
      color $bz-white
      font-size 1em
      &:disabled
        background $bz-black
        color $bz-grey
    &__error
      padding 0.5em 1em
      background $bz-red
      line-height 1.25em
      font-size 1em
      color $bz-white
    &.error &__input
      border 1px solid $bz-red

  &-btn
    // simpleTransition(background)
    transition background .2s ease, border .2s ease, color .2s ease // UPDATE SIMPLETRANSITION() TO HANDLE MULTIPLE ARGS
    background $bz-blue
    font-size 1em
    outline 0
    border 1px solid $bz-blue
    color $bz-white
    cursor pointer
    padding .75em 1.5em
    min-width 8em
    line-height 2.75em
    height 2.75em
    position relative
    &__text, &__spinner
      position absolute
      width 100%
      left 0
      top 0
      simpleTransition(opacity)
    &__text
      opacity 1
    &__spinner
      opacity 0
      &:after
        content ''
        vertical-align sub
        width 1em
        height 1em
        display inline-block
        border-radius 50%
        border 2px solid rgba(255, 255, 255, 0.3)
        border-top-color $bz-white
        animation spin 750ms linear infinite
    &--submit
      width 25em
      max-width 100%
    &--loading
      pointer-events none
      .checkout-btn
        &__text
          opacity 0
        &__spinner
          opacity 1
    &--edit
      background $bz-grey--dark
      border-color $bz-grey--dark
    &:disabled
      cursor default
      color $bz-grey--dark
      border-color $bz-grey--dark
      background $bz-black
    &:nth-last-of-type(2)
      transition none
      background 0
      border-color $bz-black
      color $bz-grey
  &-cart
    &__title
      padding .5em 0
    // &__item
    &__desc
      text-align right
      text-transform capitalize
    &__renewal
      color $bz-white
      margin-top 2em
      margin-bottom 2em
      line-height 1.5em
      font-size .8125em
      a
        color $bz-blue
        text-decoration none
    // &__tooltip
    //   margin-left 5px
    //   position relative
    //   cursor pointer
    //   font-size .85em
    //   &:after, &:before
    //     display none
    //   &:after
    //     content "Your plan will renew for $"attr(data-price)" on "attr(data-date)". If you'd like to cancel your subscription before then, please call us at 1-877-440-9464."
    //     position absolute
    //     top 135%
    //     left 60%
    //     margin-bottom 5px
    //     margin-left -150px
    //     padding 10px
    //     width 160px
    //     background-color $bz-blue
    //     color $bz-white
    //     text-align center
    //     font-size .95em
    //     line-height 1.25em
    //   &:before
    //     position absolute
    //     top 95%
    //     left 50%
    //     margin-left -8px
    //     width 0
    //     border-bottom 8px solid $bz-blue
    //     border-right 8px solid transparent
    //     border-left 8px solid transparent
    //     content ''
    //     font-size 0
    //     line-height 0
    //   &:hover
    //     &:before, &:after
    //       display block
    &__row
      display flex
      justify-content space-between
      margin-bottom 1em
      &.promo
        color $bz-blue
      &.total
        padding-top 1em
        margin-top 1em
        border-top 3px solid $bz-white

@media (min-width 480px)
  .checkout
    &-field
      &.ccname, &.ccphone, &.email, &.password
        width calc(50% - 10px)
        margin-top 0
      &.ccphone, &.password
        margin-left 20px
@media (min-width 768px)
  .checkout
    &-column
      // not sure why auto doesn't work, but using 1% seems to do the job
      flex 1 1%
      &+&
        margin-left 8%
    &-select
      &:after
        left 0
        right auto
        top 0
        bottom 0
        height 100%
        width 50%
        transform translateY(0)
      &.monthly:after, &.basic:after
        transform translateX(0)
      &.annual:after, &.premium:after
        transform translateX(100%)
      &__toggle
        width 50%
        &:first-of-type
          border-right 0
          border-bottom 1px solid $bz-grey--dark