/* Блок с формой «Заказать продукт» */
/*
xs  < 576px — базовые стили
sm  ≥ 576px
md  ≥ 768px
lg  ≥ 992px
xl  ≥ 1200px
xxl ≥ 1400px
*/

.order-product-section {

  .order-product-black-circle {
    position: absolute;
    z-index: -1;
    background: #101a18;
    border-radius: 50%;
    top: 6%;
    left: 50%;
    width: 1100px;
    height: 1100px;
    transform: translateX(-50%);
  }

  .order-product-form {
    position: relative;

    .form-group  {
      padding-bottom: 16px;
      position: relative;

      input, textarea {
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid #c9cfce;
        box-shadow: 4px 4px 0 0 #c9cfce;
      }
      .wpcf7-not-valid-tip {
        position: absolute;
        font-size: 12px;
        top: 2px;
        left: 18px;
      }
      textarea {
        max-height: 96px;
      }

      label {
        font-size: 16px;
        color: white;
      }

    }
  }

  .wpcf7-form-control.wpcf7-submit {
    position: relative;
    padding: 8px 0;
    width: 100%;
    color: #fff;
    font-family: 'Akt', sans-serif;
    font-weight: 900;
    font-size: 24px;
    text-decoration: none;
    text-wrap: nowrap;
    border: 2px solid #941e00;
    border-radius: 240px;
    background-color: #e42e00;
    box-shadow: 4px 4px 0 #941e00;
    transition: all 100ms linear;

    &:hover {
      color: #fff;
      text-decoration: none;
      background-color: #e42e00;
      border: 2px solid #941e00;
      box-shadow: 1.5px 1.5px 0 #941e00;
      transform: translate(2px, 2px);
    }

    &:focus {
      color: #fff;
      background-color: #e42e00;
      border: 2px solid #941e00;
      box-shadow: 4px 4px 0 #941e00;
      text-decoration: none;
    }

    &:hover:focus {
      border: 2px solid #941e00;
      box-shadow: 1.5px 1.5px 0 #941e00;
      transform: translate(2px, 2px);
    }

    &:active {
      color: #fff !important;
      background-color: #e42e00 !important;
      border: 2px solid #941e00 !important;
      box-shadow: 0 0 0 #941e00 !important;
      transform: translate(4px, 4px) !important;
    }
  }

  .wpcf7-response-output {
    position: absolute;
    bottom: -76px;
    width: 100%;
    text-align: center;
    color: white;
    border: none!important;
  }

}

/* ========================================
   (≥ 576px)
   ======================================== */
@media only screen and (min-width: 576px) {

}

/* ========================================
   (≥ 768px)
   ======================================== */
@media only screen and (min-width: 768px) {
  .order-product-section {

    .order-product-black-circle {
      top: 0;
      left: 50%;
      width: 1200px;
      height: 1200px;
      transform: translateX(-50%);
    }
  }
}

/* ========================================
   (≥ 992px)
   ======================================== */
@media only screen and (min-width: 992px) {
  .order-product-section {
    padding-top: 165px;
    padding-bottom: 200px;

    .order-product-black-circle {
      top: 50%;
      left: 50%;
      width: 1100px;
      height: 1100px;
    }

    .order-product-form {
      .form-group  {
        label {
          color: black;
        }
      }
    }

    .wpcf7-response-output {
      bottom: -58px;
      color: black;
    }
  }


  .order-product-section .order-product-black-circle {
    transform: translateX(-200%) translateY(-38%) scale(1);
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .order-product-section.animation-on .order-product-black-circle {
    transform: translateX(-111%) translateY(-50%);
    opacity: 1;
  }
}

/* ========================================
   (≥ 1200px)
   ======================================== */
@media only screen and (min-width: 1200px) {

}

/* ========================================
   (≥ 1400px)
   ======================================== */
@media only screen and (min-width: 1400px) {

}