/** Addons page styles **/
$base-color: #006666;

.bookit_addons {

  width: 100%;
  height: auto;
  font-family: SFUIDisplay, sans-serif;
  box-sizing: border-box;

  .container {
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
    max-width: 1014px;
    margin: 0 auto;

    .addon-header{
      margin-top: 60px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;

      div {
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 30px;
        color: #000000;

        &.bookit-icon{
          display: inline-block;
          background: url("icons/bookit.svg") no-repeat center;
          background-size: contain;
          width: 122px;
          height: 30px;
        }
        &.title{
          font-size: 36px;
          line-height: 40px;
          font-weight: 400;
        }
        &.description {
          opacity: 0.6;
          font-size: 16px;
          line-height: 24px;
          max-width: 460px;
        }
      }
    }
    .addon-content{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      .pricing {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
        width: 100%;

        .annual, .lifetime {
          opacity: 0.5;
          color: #273044;
          font-size: 16px;
          font-weight: 400;
          font-style: normal;
          letter-spacing: normal;
          line-height: 26.05px;
          text-align: center;
          padding: 0 18px;

          &.active {
            opacity: 1;
          }
        }
        .switch {
          position: relative;
          line-height: 1;

          input {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            z-index: 5;
            opacity: 0;
            cursor: pointer;

            &:checked + label {
              background: $base-color !important;
              &:after {
                background: #fff;
                left: 23px;
              }
            }
          }

          label {
            display: inline-block;
            position: relative;
            width: 44px;
            min-width: 44px;
            height: 24px;
            margin: 0;
            border-radius: 13px;
            background-color: $base-color;
            cursor: pointer;
            transition: .4s;
            -webkit-transition: .4s;

            &:after {
              content: "";
              position: absolute;
              width: 18px;
              height: 18px;
              left: 3px;
              top: 3px;
              border-radius: 10px;
              background-color: #ffffff;
              transition: .4s;
              -webkit-transition: .4s;
              z-index: 2;
            }
          }
        }
      }
      .addon-list{
        width: 100%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .addon{
          background-color: #ffffff;
          height: 520px;
          flex-basis: 32%;
          display: flex;
          justify-content: center;
          margin-bottom: 15px;
          flex-wrap: wrap;
          align-content: flex-start;
          position: relative;
          border-radius: 10px;

          &.bookit-all-addons{
            border: 2px solid $base-color;
            background-color: #f0f8f8;
            .popular{
              position: absolute;
              display: inline-flex;
              justify-content: flex-start;
              align-items: center;
              background-color: $base-color;
              color: #ffffff;
              font-size: 13px;
              font-weight: 700;
              width: 89px;
              height: 26px;
              border-radius: 20px;
              top: -13px;
              .popular-icon{
                background-image: url('../../images/popular.svg');
                background-size: contain;
                background-repeat: no-repeat;
                width: 11px;
                height: 16px;
                margin:0 6px 0 10px;
              }
            }
          }
          p,div{
            flex-basis: 100%;
            text-align: center;
            margin: 0;
            font-size: 16px;
          }
          .icons{
            display: inline-flex;
            justify-content: center;
            flex-basis: 100%;
            margin-top:33px;
            height: 54px;
            .icon{
              display: inline-block;
              background-size: contain;
            }
          }
          .title{
            font-size: 24px;
            font-weight: 400;
            text-align: center;
            flex-basis: 100%;
            margin-top: 25px;
            margin-bottom:20px;
            height: 24px;
          }
          .price{
            color: $base-color;
            font-weight: 700;
            .plan-period{
              font-weight: normal;
            }
            .active-plan{
              opacity: 0.5;
            }
          }
          .info{
            color:#000000;
            padding: 25px 20px 0 20px;
            line-height: 24px;
            opacity: 0.7;
          }
          .exist-license{
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(255, 212, 0, 0.7);
            border-radius: 4px;
            height: 20px;
            flex-basis: 90%;
            margin-top: 16px;
            span{
              opacity: 1;
              font-size: 13px;
              font-width: 400;
              color: $base-color;
            }
          }
          .action{
            position: absolute;
            display: flex;
            bottom: 0;
            margin:30px 0px;
            @import 'components/custom-select';

            .active-addon{
              border-radius:50px;
              height: 43px;
              display: flex;
              align-items: center;
              justify-content: center;
              text-transform: capitalize;
              border: 2px solid rgba(11, 102, 101, 0.2);
              color: $base-color;
              background: #fff;
              min-width: 233px;
              cursor: not-allowed;
              opacity: 0.5;

              &.hidden{
                display: none;
              }
            }
            a{
              height: 43px;
              display: flex;
              align-items: center;
              text-transform: capitalize;
              text-decoration: none;
              padding: 0px 29px 0px 24px;
              border-bottom-right-radius: 50px;
              border-top-right-radius: 50px;
              border: none;
              background: $base-color;
              color: #ffffff;
              font-size: 14px;
              font-weight: 500;
              transition: ease-in 0.1s;
              &.hidden{
                display:none;
              }
              &:focus{
                box-shadow: none;
                outline: none;
              }
            }
          }
          .developer-info{
            color: #273044;
            opacity: 0.7;
            font-size: 14px;
            margin-top: 10px;
            span{
              .version-label{
                color: #9397a1;
              }
              a{
                color:inherit;
              }
            }

          }
          &.bookit-google-calendar{
            .icon{
              background: url("icons/addons/google-calendar/google_calendar.svg") no-repeat center;
              width: 53px;
              height: 52px;
            }
          }
          &.bookit-pro,&.bookit-payments{
            .icon{
              width: 70px;
              height: 52px;
              background: url("icons/addons/payments/payments.svg") no-repeat center;
            }
          }
          &.bookit-all-addons{
            .icon{
              width: 53px;
              height: 54px;
              background: url("icons/addons/box.svg") no-repeat center;
            }
          }
        }
      }
    }
    .addon-footer{

      .terms_content{
        color: #969aa5;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
        line-height: 22px;
        text-align: center;
        text-decoration: none;

        a {
          color: #157ffc;
        }
      }
    }
  }
}
@media screen
and (max-device-width: 1132px)
and (min-device-width: 836px){
  .bookit_addons{
    .container {
      .addon-content{
        .addon-list{
          width: 80%;
          .addon{
            flex-basis: 49%;
            .exist-license{
              span{
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}

@media screen
and (max-device-width: 836px)
and (min-device-width: 650px){
  .bookit_addons{
    .container {
      .addon-content{
        .addon-list{
          width: 100%;
          .addon{
            flex-basis: 97%;
            .info{
              flex-basis: 60%;
            }
            .exist-license{
              flex-basis: 60%;
              span{
                font-size: 11px;
              }
            }
          }
        }
      }
    }
  }
}

@media screen
and (max-device-width: 650px)
and (min-device-width: 0px){
  .bookit_addons{
    .container {
      .addon-content{
        .addon-list{
          width: 100%;
          .addon{
            flex-basis: 97%;
            .exist-license{
              span{
                font-size: 11px;
              }
            }
            .action{
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }
}