.xt_woofc-coupon{
  @extend .xt_woofc-notice;

  .xt_woofc-coupons-visible &,
  .xt_woofc-empty & {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

.xt_woofc-coupon-form {

  border: 0;
  padding: 15px;
  margin: 0;
  border-radius: 0;
  width: 100%;
  color: var(--xt-woofc-color);

  .xt_woofc-enable-coupon-list & {
    padding: 15px 3px 15px 15px;
    height: calc(100% + 1px);
    position: absolute;
    z-index: 9999999;
    border-bottom: 0!important;
    border-top: var(--xt-woofc-border);
    color: var(--xt-woofc-color);
    background-color: var(--xt-woofc-bg-color);
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    html:not(.xtfw-touchevents) &{

      /* ===== Scrollbar CSS ===== */

      /* Firefox */
      scrollbar-width: thin;
      scrollbar-color: var(--xt-woofc-border-color) var(--xt-woofc-bg-color);

      /* Chrome, Edge, and Safari */
      &::-webkit-scrollbar {
        width: 12px;
      }

      &::-webkit-scrollbar-track {
        background: var(--xt-woofc-bg-color);
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--xt-woofc-border-color);
        border-radius: 6px;
        border: 2px solid var(--xt-woofc-bg-color);
      }

      /* ===== End Scrollbar CSS ===== */
    }

  }

  p {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .xt_woofc-form-inner {
    display: flex;
    span {
      flex: 1;
    }
    span:last-child{
      flex: 0 0 30%;
    }
  }

  .xt_woofc-coupon-error{
    margin-top: 10px;
    color: var(--xt-woofc-header-error-color);
    font-weight: 600;

    &:empty{
      display:none;
    }
  }

  [name=coupon_code] {
    border: var(--xt-woofc-border)!important;
    padding: 9px 0.50rem!important;
    height: 30px!important;
    border-radius:0!important;
    width:100%!important;
    outline: initial!important;
    background: transparent!important;
    box-shadow: none!important;
  }
  .button {
    vertical-align: initial!important;
    padding: 0.428571429rem 0.50rem!important;
    height: 30px!important;
    border-radius: 0!important;
    color: var(--xt-woofc-coupon-button-text-color)!important;
    background: var(--xt-woofc-coupon-button-bg-color)!important;
    border: 1px solid var(--xt-woofc-coupon-button-bg-color)!important;
    width:100%!important;
    display: block!important;
    overflow: hidden!important;
    white-space: nowrap!important;
    text-overflow: ellipsis!important;
    outline: none!important;
    transition: filter 0.3s!important;
    font-size: 10px!important;
    line-height: 16px!important;
    &:hover{
      filter: brightness(95%);
    }
  }

  @include MQ_MAX(XS) {
    & {
      .xt_woofc-form-inner {
        flex-direction: column;

        span:last-child{
          margin-top:5px
        }

        input{
          text-align: center;
        }
      }
    }
  }
}

.xt_woofc-coupons {
  padding-top: 20px;
  margin-top: 20px;
  border-top: var(--xt-woofc-border);
}
.xt_woofc-coupons-label {
  font-weight: 700;
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
  color: var(--xt-woofc-primary-color);
}
.xt_woofc-coupons-section {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  padding-bottom: 10px;
}
.xt_woofc-coupon-item{
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 33%;
  max-width: 33%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  text-align: center;

  @include MQ_MAX(S) {
    flex-basis: 50%;
    max-width: 50%;
  }

  @include MQ_MAX(XS) {
    flex-basis: 100%;
    max-width: 100%;
  }

  .xt_woofc-coupon-item-inner{
    border: 1px solid var(--xt-woofc-border-color);
    padding:5px;
  }

  .xt_woofc-coupon-code {
    border-bottom: 1px dashed var(--xt-woofc-border-color);
    display: block;
    padding-top: 5px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .xt_woofc-coupon-off {
    font-weight: 700;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    color: var(--xt-woofc-coupon-savings-text-color);
  }
  .xt_woofc-coupon-desc {
    display: block;
    line-height: 1.3;
    margin-bottom: 5px;
  }
  .xt_woofc-remove-coupon{
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 11px;

    .xt_woofc-enable-coupon-list & {
      color: var(--xt-woofc-link-color);

      .xtfw-no-touchevents &:hover,
      .xtfw-touchevents &:focus{
        color: var(--xt-woofc-link-hover-color)
      }
    }
  }
  .button{
    margin-top: 10px!important;
  }
}

.woocommerce,
.woocommerce-page,
body{
  .xt_woofc {

    .woocommerce-form-coupon-toggle{
      display:none!important;
    }
  }
}