@import '../helpers/helpers';

.popup-content {

  @include media-breakpoint-down(lg) {
    width: 100%;
  }

  .col-2 {

    .fa-check-circle {
      color: $green;
      font-size: 4rem;
    }

    .fa-info-circle {
      color: $yellow;
      font-size: 4rem;
    }
  }

  .col-10 {

    p {
      margin-bottom: 0;
      margin-top: 10px;
    }

    strong {
      font-size: 1em;
    }
  }

  @include media-breakpoint-down(xs) {
    .col-2 {
      @include make-col(3);
    }

    .col-10 {
      @include make-col(9);

      p {
        margin-top: 0;
      }
    }
  }

  .email-title {
    strong {
      font-size: 1.125rem;
    }
  }

  .form-title {
    // sass-lint:disable placeholder-in-extend
    @extend .email-title;
    clear: both;
    margin-bottom: .3rem;
    padding-top: .3rem;
  }

  form {
    width: 100%;
    float: left;

    .form-row__field {
      float: left;
      display: block;
      margin: 0;

      @include media-breakpoint-down(sm) {
        padding-right: 0;
      }
    }

    .form-row {
      @include media-breakpoint-down (md) {
        padding: 0;
      }
    }

    .newsletter-email,
    .email-address {
      width: calc(70% - 15px);

      @include media-breakpoint-down(sm) {
        width: 100%;
        padding-right: 0;
        padding-bottom: 15px;
      }
    }

    .form-row__col-btn {
      padding-right: 0;
      width: calc(30% - 15px);
      float: right;

      @include media-breakpoint-down(sm) {
        padding-left: 0;
        width: 100%;
      }
    }

    .store-button {
      float: left;

      @include media-breakpoint-down(md) {
        margin-left: 2%;
      }

      @include media-breakpoint-down(sm) {
        margin-left: 0;
      }
    }

    .green-btn {
      background-color: $green;
      border-color: $green;
    }

    .green-btn:hover {
      background-color: $white;
      color: $green;
    }

    .popup-alert {
      color: $red;
      width: 100%;
      clear: both;
      margin: 20px 0 0;
      float: left;
    }
  }

  .modal-box__buttons {

    .btn {
      min-width: 200px;
      margin-right: 15px;

      @include media-breakpoint-down(sm) {
        width: 100%;
        margin-bottom: 20px;
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .newsletter-overlay {
    display: none;
  }

  .checkout-overlay {
    .form-row {
      padding: 0;

      .form-row__field {
        width: 100%;
      }
    }
  }
}

.checkout-overlay {

  .form-row__label {
    display: none;
  }

  .form-row__field {
    margin-bottom: 10px;

    @include media-breakpoint-up(md) {
      max-width: 500px;
    }
  }
}


// sass-lint:disable no-ids
#modal-pdp-feedback {
  .modal-box__content {
    min-height: 400px;

    .modal-box__body {
      width: 100%;

      * {
        min-height: 400px;
      }

      iframe {
        width: 100%;
      }
    }
  }
}

// sass-lint:disable no-ids
#modal-select-store {
  .form-row__error {
    padding: 0;
  }
}