@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";

.priceContainer {
  margin-top: 20px;
  .flex(@justifyCenter:space-between,@alignCenter:flex-start,@direction:column);
  height: 535px;

  .priceDetail {
    width: 846px;
    height: 312px;
    border-top: 1px solid @COLOR_GRAY02;
    border-bottom: 1px solid @COLOR_GRAY02;
    background: @BG_COLOR_02;
    padding: 30px;
    .flex(@justifyCenter:space-between,@alignCenter:flex-start);

    .wrapper {
      height: 100%;

      .partnerName {
        font-weight: bold;
        font-size: 36px;
        color: @COLOR_BLACK;
        margin-bottom: 24px;
      }
      .flex(@alignCenter:flex-start,@direction:column);
      .topLayer {
        margin-bottom: 20px;
        height: 42px;
        .flex();
      }
      .rateTag {
        background: #ff0000;
        width: 70px;
        height: 42px;
        padding: 6px 12px;
        border-radius: 6px;
        color: @COLOR_WHITE;
        margin-right: 10px;
        font-weight: bold;
        font-size: 24px;
        .flex();
      }
      .name {
        font-weight: bold;
        font-size: 36px;
        color: @COLOR_GRAY07;
      }
      .btmLayer {
        .flex();
        margin-top: 14px;
      }
      .price {
        font-weight: bold;
        font-size: 60px;
        color: @PRIMARY_COLOR_RED;
        margin-right: 9px;
        line-height: 1;
      }
      .offerInfo {
        .elip(4);
        font-size: 40px;
        font-weight: bold;
        line-height: 1;
        color: #808080;
        padding-bottom: 5px;
      }
      .discountedPrc {
        font-size: 24px;
        color: @COLOR_GRAY03;
        text-decoration: line-through;
      }
      //rewd Layer
      .rewdTopLayer {
        width: 500px;
        padding-bottom: 24px;
        border-bottom: 1px solid @COLOR_GRAY02;

        > span {
          font-weight: bold;
          font-size: 36px;
          color: @COLOR_GRAY03;
        }
        .partnerPrc {
          text-decoration: line-through;
        }
      }
      .rewdBtmLayer {
        padding-top: 24px;
        .flex(@direction:column,@alignCenter:flex-start);
        .rewdNm {
          font-weight: bold;
          font-size: 36px;
          color: @COLOR_BLACK;
        }

        .btmPrc {
          margin-top: 17px;
          .flex();
          .rewdPrc {
            font-size: 24px;
            color: #808080;
            margin-right: 10px;
            padding-top: 14px;
          }
          .rewdRate {
            font-size: 60px;
            font-weight: bold;
            color: @PRIMARY_COLOR_RED;
            margin-top: 18px;
          }
        }
      }
    }

    .qrWrapper {
      .qrRollingWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 220px;
        height: 220px;
        .innerText {
          width: 100%;
          padding: 0 20px;
          h3 {
            word-break: break-word;
            font-size: 36px;
            font-weight: bold;
            color: @PRIMARY_COLOR_RED;
            & + p {
              margin-top: 18px;
            }
          }
          p {
            font-size: 24px;
            font-weight: bold;
            line-height: 1.17;
            color: @COLOR_GRAY05;
            word-break: keep-all;
          }
        }
      }
      > div:first-child {
        width: 254px;
        height: 254px;
        background: @COLOR_WHITE;
        border: solid 1px #dadada;
        margin: 0 auto;
      }

      .tooltip {
        margin-top: 14px;

        .tooltipBody {
          position: relative;
          width: 280px;
          padding: 10px;
          text-align: center;
          background: @COLOR_GRAY07;
          border-radius: 10px;
          line-height: 1.27;
          letter-spacing: normal;
          color: @COLOR_WHITE;
          // white-space: pre-wrap;
          font-size: 22px;
          font-weight: normal;

          &::before {
            content: "";
            position: absolute;
            z-index: 1;
            top: -28px;
            left: calc(50% - 15px);
            border: 15px solid #222222;
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
          }
        }
      }
    }
  }

  .installedPrc {
    padding: 22px 30px;
    border-bottom: 1px solid @COLOR_GRAY02;
    background: @BG_COLOR_02;

    .text {
      font-weight: bold;
      font-size: 24px;
      color: @COLOR_GRAY05;
      width: 504px;
    }
  }

  .promotionContainer {
    margin-bottom: 10px;
    .promotionContents {
      display: flex;
      margin-top: 15px;
      align-items: center;
      > div {
        height: 38px;
        display: flex;
        align-items: center;
        background-color: #ff871d;
        border-radius: 8px;
        border: solid 0 #25201c;
        font-size: 34px;
        font-weight: 600;
        color: #fff;
        padding: 0 9px 0 11px;
      }

      > h3 {
        font-size: 42px;
        color: #ff871d;
        font-weight: bold;
        margin-left: 9px;
      }
    }
  }

  .bottomContainer {
    position: relative;
    .btnContainer {
      .size(@w: 846px , @h: 78px);
      .flex(@justifyCenter:space-between);
      .smsBtn {
        min-width: 756px;
      }
    }
    .disclaimerContainer {
      position: absolute;
      left: 0;
      bottom: -45px;
      background: url("../../../../assets/images/icons/ic-warning.svg")
        no-repeat left top;
      background-size: 18px 18px;
      font-size: 18px;
      padding-left: 28px;
      line-height: 1.1;
      width: 810px;
    }
  }
}
