.coupon-holder
  +grid-margin($bottom: 1)

  width: 50%
  float: left

  .title
    display: block
    font-size: 1.4em
    margin-bottom: 8px

  .coupon-label
    display: block
    padding: 3px 6px
    width: 50%

  .coupon-input-holder
    position: relative
    max-width: 200px

    input
      +transition(border-color .3s, box-shadow .3s)
      +clearfix
      padding-right: 48px
      &:focus
        border-color: #9ecaed
        box-shadow: 0 0 5px #9ecaed

    .btn
      display: block
      +position( absolute, 0 0 null null )
      width: 40px
      height: 32px
      padding: 0

    .btn input
      border: none
      width: 100%
      height: 100%
      cursor: pointer

  .active-coupon-holder
    font-size: 1.5em
    padding: 16px 0
    color: #63c900

    .icon
      content: ''
      display: inline-block
      position: relative
      top: 2px
      left: 0
      margin-right: 8px

      @extend %icon-sprite
      +icon-sprite(0,2,16px,16px)

  .error-coupon-holder
    font-size: 1.5em
    padding: 16px 0
    color: #C42E44
    &.hide
      display: none

    .icon
      content: ''
      display: inline-block
      position: relative
      top: 2px
      left: 0
      margin-right: 8px

      @extend %icon-sprite
      +icon-sprite(10,2,16px,16px)