/**
 * Базовые стили для всех копомпонентов Clearfy

 * @author Webcraftic <wordpress.webraftic@gmail.com> 
 * @copyright Webcraftic 06.10.2018
 * @sicne 2.0.5
 */

.button(@backgroundColor: #e8e8e8,@color:#353535, @boxShadow:rgba(0, 0, 0, 0.2)) {
  cursor: pointer;
  line-height: 16px;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  color: @color;
  background: @backgroundColor;
  box-shadow: 0 1px 0 @boxShadow;
  -moz-box-shadow: 0 1px 0 @boxShadow;
  -webkit-box-shadow: 0 1px 0 @boxShadow;
  &:active {
    box-shadow: inset 0 1px 0 @boxShadow;
    -moz-box-shadow: inset 0 1px 0 @boxShadow;
    -webkit-box-shadow: inset 0 1px 0 @boxShadow;
  }
  &:focus {
    outline: none;
    border: 0;
  }
}

#WBCR {
  .premium-label(@position: relative, @positionTop:-8px, @positionLeft:-10px, @positionRight:auto) {
    display: inline-block;
    position: @position;
    content: 'PRO';
    background: #ff5722;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-style: normal;
    padding: 4px 6px;
    margin-left: 4px;
    vertical-align: top;
    top: @positionTop;
    left: @positionLeft;
    right: @positionRight;
    z-index: 11;
  }

  .wbcr-factory-templates-000-impressive-page-template {
    .factory-checkbox.wbcr-factory-clearfy-icon-pro:after {
      .premium-label();
    }

    .wbcr-factory-templates-000-multisite-suggetion {
      padding: 30px 80px;

      h3 {
        margin: 0 0 20px;
      }

      .wbcr-factory-inner-contanier {
        border: 2px dashed #8bc34a;
        background: #fff;
        padding: 20px;
      }

      .wbcr-factory-activate-premium {
        display: inline-block;
        .button();
      }

      .wbcr-factory-purchase-premium {
        display: inline-block;
        .button(#fdd868, #755c0e, rgba(60, 45, 2, 0.31));
      }
    }

    .wbcr-factory-right-sidebar-section {
      .wbcr-factory-templates-000-pro-suggettion {
        background: #fff;
        color: #353535;
        font-weight: 600;
        border: 2px dashed #8bc34a;

        h3 {
          margin: 0 0 20px;
          padding: 10px 0;
          text-align: center;
          border-bottom: 2px solid #e6e6e6;
          color: #636363;
          font-size: 17px;
          font-weight: 600;
          vertical-align: middle;
          text-transform: uppercase;
        }

        ul {
          //list-style: circle;
          position: relative;
          margin-bottom: 20px;

          li {
            font-size: 15px;
            padding: 7px;
            padding-left: 20px;

            &:before {
            }

            &:before {
              content: " ";
              display: inline-block;
              width: 0.4em;
              height: 0.7em;
              border: solid #8bc34a;
              border-width: 0 0.2em 0.2em 0;
              left: 0;
              margin-right: 10px;
              -webkit-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
              -o-transform: rotate(45deg);
              transform: rotate(45deg);
            }

          }
        }

        .wbcr-factory-purchase-premium {
          display: block;
          .button();
        }
      }
    }
  }

  /* subscribe widget */

  .wbcr-factory-subscribe-widget {
    margin-top: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;


    &__field {
      margin: 10px auto;
      display: block;
      width: 100%;
      text-align: center;
      box-shadow: 0 0 0 transparent;
      border-radius: 4px;
      border: 1px solid #d6d4d4;
      background-color: #fff;
      color: #32373c;
    }

    &__button {
      display: block;
      width: 100%;
      text-align: center;
      margin: 14px 0 0;
      box-shadow: none;
      min-width: 100px;
      background-color: #ff5722;
      border: 0;
      color: #fff;

      &:active, &:focus {
        box-shadow: inset -1px 1px 1px #222;
        outline: none;
      }
    }

    &__msgbox {
      font-weight: bold;
    }

    &__text {
      display: none;
      padding: 10px 14px;
      margin: 0 0 10px;

    }

    &__text--success {
      background: #d6efbe;
      color: #61824b;
    }

    &__text--success2 {
      background: #ffe0b3;
    }

    &__text--error {
      background: #f1b1b6;
    }

    &__checkbox {
      margin: 0 10px 0 0;
    }

    &__checkbox-label {
      font-weight: normal;
      color: #8c8888;
      font-size: 12px;
    }
  }
}

@media screen and (max-width: 1550px) {
  #WBCR {
    .wbcr-factory-templates-000-impressive-page-template {
      .wbcr-factory-templates-000-multisite-pro-suggetion {
        padding: 10px 80px;
      }

      .wbcr-factory-right-sidebar-section {
        .wbcr-factory-templates-000-pro-suggettion {
          padding: 10px;

          h3 {
            margin: 0 0 20px;
            padding: 10px 0;
            font-size: 13px;
            font-weight: 600;
          }

          ul {
            margin-bottom: 20px;

            li {
              font-size: 13px;
              padding: 2px;
              padding-left: 10px;

              &:before {
                width: 0.4em;
                height: 0.7em;
                border-width: 0 0.2em 0.2em 0;
                left: 0;
                margin-right: 10px;
              }
            }
          }

          .wbcr-factory-purchase-premium {
            font-weight: 700;
            line-height: 16px;
            font-size: 12px;
            padding: 8px 12px;
            border-radius: 2px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
          }
        }
      }
    }
  }
}
