@import 'css/master/settings/settings';

.tablet input[type=text] {
  min-height: 20px!important;
  font-size: inherit;
}

#subscriptionBundles {
  font-size: 12px;
  #content {
    h2 {
      font-size: 28px;
      font-weight: 500;
      margin-top: 14px;
    }
  }

  .bundle_step_1,
  .bundle_step_2,
  .bundle_step_3 {
    border: 1px solid $grayMedium;

    button {
      outline: none;
    }

    .bundle_promo_header {
      background: $grayLight;
      height: 265px;
    }

    .bundle_steps {
      text-align: center;

      .step_navigator {
        margin: 20px 0;

        span {
          font-size: 30px;
          margin-right: 60px;

          &:first-child {
            margin-right: 50px;
          }

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

          &.active {
            color: $blue;
            border: 2px solid $blue;
            border-radius: 50%;
            padding: 5px 16px
          }
        }
      }
    }

    .bundle_choices,
    .frequency_choices {
      text-align: center;
      margin: 0 auto;

      .bundle_choices_wrapper {
        display: inline-block;
        margin: 0 10px 0 65px;
        position: relative;

        .select_wrapper {
          text-align: center;
          position: absolute;
          bottom: 20px;
          width: 82%
        }

        .qualifier_item,
        .promo_item {
          float: left;
          border: 1px solid $gray;
          border-radius: 8px;
          position: relative;
          max-width: 175px;

          .star_rating {
            width: 100px;
            margin: 0 0 0 20px;

            .link_color {
              color: $black !important
            }
          }

          &:first-child {
            clear: left;
          }

          &.active {
            background: #E7F5FF;
          }

          p {
            text-align: left;
          }

          .free_txt {
            font-size: 1.6em;
            padding-bottom: 0;
          }

          .approx_Val {
            font-size: 10px;
            padding-top: 0px;
            padding-bottom: 0px;
            color: $gray;
          }
        }

        .qualifier_item {
          margin: 12px 6px;
          padding: 4px 4px 12px 4px;
          display: table;

          p {
            padding: 10px 4px 4px 4px;
          }
        }

        .promo_item {
          padding: 20px;
          margin: 24px;

          p {
            padding: 10px 20px;
          }

        }
      }

      .bundle_choices_wrapper_inner {
        max-height: 480px;
        overflow-y: auto;
        display: block;
        border-top: 1px solid $borderBottomGray;

        &::-webkit-scrollbar {
          -webkit-appearance: none;
          -webkit-overflow-scrolling: touch;
          width: 7px;
        }

        &::-webkit-scrollbar:vertical {
          width: 4px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 8px;
          width: 4px;
          border: 2px solid transparent;
          background-color: #3C85CF;
        }
        &::-webkit-scrollbar-track {
          background-color: #fff;
          border: 1px solid $gray;
          border-radius: 8px;
        }

        p.promo_price {
          font-size: 14px;
          text-decoration: line-through;
          padding-top: 0px;
        }

        p.item_description{
          min-height: 60px;
        }
      }

      h2 {
        text-align: left;
        margin-left: 24px;
      }

    }

    .bundle_footer {
      background: #F3F5F8;
      padding: 20px;
      text-align: right;

      .btn[disabled] {
        span, .svg_chevron {
          background-color: transparent !important;
        }

        &.dark_grey {
          background: #BEBDBE;
          color: #fff;
        }
      }

    }
  }

  .bundle_step_2 {
    .bundle_choices {

      h2 {
        margin-left: 6px;
      }

      .subtitle {
        text-align: left;
        margin: 10px 0 10px 6px;
      }

      .subtitle-nums{
        font-size: 14px;
      }

      .bundle_choices_wrapper {
        margin: 0 10px 0 42px;
        min-width: 800px;

        .qualifier_item {
          .star_rating {
            width: 100%;
            margin: 0 0 0 4px;
          }

          .qualifier_item_footer {
            display: table-row;
            vertical-align: bottom;
            height: 1px;

            p {
              padding: 4px;
            }
          }
        }

        .promo_price {
          font-size: 18px;
        }

        .quantity_select {
          width: 90%;
          bottom: 10px;
          padding: 4px;

          .input {
            width: 30px;
            padding: 4px;
            border-radius: 4px;
            border: 1px solid $gray;
          }
        }
      }
    }
  }

  .bundle_step_3 {
    .frequency_choices {
      h2 {
        margin: 14px 0px 0px 6px;
        padding-bottom: 7px;
      }
      .subtitle {
        text-align: left;
        margin: 10px 0 10px 6px;
        padding-bottom: 10px;
        border-bottom: 1px solid $borderBottomGray;
      }
    }
    .frequency_choices_wrapper {
      margin: 20px 10px 20px 46px;
      display: inline-block;
      position: relative;
      min-width: 800px;

      .frequency_choice {
        float: left;
        border: 1px solid $gray;
        border-radius: 8px;
        padding: 30px 20px;
        position: relative;
        width: 165px;
        margin: 0 12px 12px 12px;

        h3 {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 20px;
        }

        &.active {
          background: #E7F5FF;
        }
      }
    }
  }

  .bundle_terms_conditions {
    padding: 20px;
    text-align: left;
    font-size: 12px;
  }

  div[data-bv-show=inline_rating] {
    float: none;
    padding: 5px 20px 0;
    text-align: left;
    margin-bottom: 0;
  }
}