@mixin default-font-values {
  font-family: "Roboto";
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}

@mixin default-transitioning {
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.new-loggly-pricing-header {
  .plan-pricing__title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: var(--brand-orange);
    margin: 40px 0 10px 0;
  }

  .plan-pricing__subtitle {
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    color: var(--brand-grey-dark);
  }
}

section.new-loggly-pricing {
  padding: 40px 0 30px 0;

  &.pricing__pb-none {
    padding-bottom: 0 !important;
  }

  &.pricing__pb-small {
    padding-bottom: 20px !important;
  }

  &.pricing__pb-medium {
    padding-bottom: 30px !important;
  }

  &.pricing__pb-large {
    padding-bottom: 40px !important;
  }

  &.pricing__pb-default {
    padding-bottom: 60px !important;
  }

  &.promo_callout {
    .planDescription {
      position: relative;

      .planPricing {
        &.freePlan {
          padding: 42px 0 38px 0 !important;
        }

        .save_up_to_label {
          font-family: "Roboto";
          font-size: 16px;
          font-weight: bold;
          color: var(--brand-orange);
          text-align: center;
          padding-top: 15px;
        }

        .price {
          padding-top: 5px !important;
        }
      }
    }
  }

  .noPaddings {
    padding-left: 0;
    padding-right: 0;
  }

  .containerPlans {
    display: flex;
    justify-content: space-between;

    .featureColumn {
      width: calc(25% - 32px);
      margin-right: 32px;
      box-shadow: 0 0 10px 0 rgba(17, 17, 17, 0.3);
      background-color: #fff;

      &:last-child {
        margin-right: 0;
      }

      .planName {
        h4 {
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          color: var(--brand-grey-dark);
          padding: 8px 15px;
          background-color: var(--ghost-grey);
          margin: 0;
        }
      }

      .planDescription,
      .correspondingFeatures {
        padding: 0 15.5px 0 14.5px;
      }

      .planDescription {
        .planPricing {
          padding-bottom: 40px;
          border-bottom: 2px solid var(--ghost-grey);

          .startingPrice {
            font-family: Roboto;
            font-size: 14px;
            font-weight: normal;
            text-align: center;
            color: var(--light_gray);
            margin-top: 20px;
          }

          &.freePlan {
            padding: 49px 0 38px 0;

            .price {
              padding: 0;
            }
          }

          .price {
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            color: var(--brand-grey-dark);
            padding: 10px 0 0 0;
            margin: 0;
          }

          p {
            margin: 0;
          }

          .pricingNote {
            font-family: Roboto;
            font-size: 14px;
            font-weight: normal;
            text-align: center;
            color: var(--light_gray);
          }

          .pricingDescription {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: var(--brand-grey-dark);
            margin-top: 30px;

            &.freePlan {
              font-weight: normal !important;
              margin-top: 46px;
            }
          }

          .pricingButtonSection {
            text-align: center;
            margin-top: 30px;

            a {
              position: relative;
              display: inline-block;
              padding: 12px 21px;
              font-size: 16px;
              font-weight: bold;
              border-radius: 0;
              text-transform: uppercase;

              &:hover {
                text-decoration: none;
              }

              &.greenButtonStyle {
                color: #fff;
                background-color: var(--primary-button-color);

                &:hover {
                  background-color: var(--primary-button-color-hover);
                }
              }

              &.orangeButtonStyle {
                color: #fff;
                background-color: var(--secondary-button-color);

                &:hover {
                  background-color: var(--secondary-button-color-hover);
                }
              }

              &.blueButtonStyle {
                color: #fff;
                background-color: var(--tertiary-button-color);

                &:hover {
                  background-color: var(--tertiary-button-color-hover);
                }
              }

              &.blackButtonStyle {
                color: #fff;
                background-color: var(--brand-grey-dark);
              }

              &.outlineGreenButtonStyle {
                color: var(--tertiary-button-color);
                background-color: transparent;
                border: 2px solid var(--tertiary-button-color);

                &:hover {
                  color: var(--tertiary-button-color-hover);
                  border: 2px solid var(--tertiary-button-color-hover);
                }
              }

              &.outlineOrangeButtonStyle {
                color: var(--secondary-button-color);
                background-color: transparent;
                border: 2px solid var(--secondary-button-color);

                &:hover {
                  color: var(--secondary-button-color-hover);
                  border: 2px solid var(--secondary-button-color-hover);
                }
              }

              &.outlineBlueButtonStyle {
                color: var(--primary-button-color);
                background-color: transparent;
                border: 2px solid var(--primary-button-color);

                &:hover {
                  color: var(--primary-button-color-hover);
                  border: 2px solid var(--primary-button-color-hover);
                }
              }
            }
          }
        }
      }

      .correspondingFeatures {
        padding: 25px 15px 30px 15px;

        h5 {
          font-size: 16px;
          font-weight: bold;
          color: var(--brand-grey-dark);
          margin: 0 0 19px 0;
        }

        ul.newDesignListItems {
          li {
            position: relative;
            display: block;
            padding-left: 26px;
            margin-bottom: 10px;
            font-family: Roboto;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.29;
            letter-spacing: normal;
            color: var(--brand-grey-dark);

            .tick {
              position: absolute;
              left: 0;
              top: 0;
              font-size: 15px;
              color: var(--tertiary-button-color);
              margin-right: 8px;
            }
          }
        }

        .pricingViewFullDetails {
          font-size: 14px;
          font-weight: 500;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.29;
          letter-spacing: normal;
          color: var(--brand-orange);
          padding-left: 25px;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .tcPadding {
    padding: 0 45px;
  }

  .pricingTermsAndConditions {
    p {
      font-size: 14px;
      font-weight: normal;
      color: var(--light_gray);
      padding-top: 20px;
    }
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  section.new-loggly-pricing {
    .containerPlans {
      flex-wrap: wrap;
      justify-content: space-between;

      .featureColumn {
        width: calc(50% - 16px) !important;
        margin: 0;

        &:nth-child(1),
        &:nth-child(2) {
          margin-bottom: 32px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .new-loggly-pricing-header {
    .plan-pricing__title {
      font-size: 24px;
    }

    .plan-pricing__subtitle {
      font-size: 18px;
    }
  }

  section.new-loggly-pricing {
    .tcPadding {
      padding: 0 15px;
    }

    .containerPlans {
      flex-wrap: wrap;
      justify-content: space-between;

      .featureColumn {
        width: calc(100% - 30px) !important;
        margin: 0 15px;

        &:nth-child(1),
        &:nth-child(2) {
          margin-bottom: 32px;
        }
      }
    }
  }
}