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

.themeContainer {
  .size(@w: 774px, @h: 930px);
}
.optionContainer {
  .flex(@direction:column ,@justifyCenter:flex-start,@alignCenter:flex-start);
  .size(@w: 1026px , @h: 990px);
  background-color: @BG_COLOR_01;
  padding: 30px 120px 60px 60px;
  .topLayer {
    width: 100%;
    .flex(@direction:row ,@justifyCenter:flex-start);
    text-align: left;
    color: @COLOR_GRAY03;
    font-weight: bold;
    font-size: 30px;
    justify-content: space-between;
    img {
      width: 42px;
      height: 42px;
      margin-right: 11px;
    }

    .rating {
      display: flex;
      font-size: 30px;
      font-weight: bold;
      color: #c70850;
      // margin-bottom: 3px;

      .line {
        .size(@w: 1px , @h: 24px);
        background-color: #808080;
        margin: 5px 9px 0 10px;
      }
    }
  }
  .title {
    .elip(@clamp:2);
    font-weight: bold;
    font-size: 36px;
    color: @COLOR_GRAY08;
    width: 100%;
    margin-top: 20px;
    line-height: 1.17;
    margin: 20px 0 31px 0;
    height: 84px;
  }

  .amenitiesCotainer {
    .size(@w: 846px , @h: 344px);
    display: flex;
    background-color: #f2f2f2;
    margin: 0 0 20px 0;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    border-radius: 0.5px;
    padding: 25px 24px 25px 42px;
    word-break: break-all;
    flex-wrap: wrap;

    .amenitiesBox {
      .flex(@display: flex, @justifyCenter: center, @alignCenter: center, @direction: column);
      .size(@w: 138px , @h: 138px);
      background-color: #ffffff;
      border-radius: 6px;
      border: solid 1px #dadada;
      margin: 0 18px 18px 0;
      padding: 0 12px 0 12px;
      word-break: break-word;
      text-align: center;

      > img {
        .size(@w: 36px , @h: 32px);
        margin-bottom: auto;
        background-color: #ffffff;
        margin-top: 20px;
      }

      > p {
        .flex(@display: flex, @justifyCenter: center, @alignCenter: center, @direction: column);
        .size(@w: 98px , @h: 54px);
        color: #808080;
        line-height: 1.11;
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 15px;
      }
    }
  }

  .bottomLayer {
    display: flex;
    .today {
      font-size: 24px;
      font-weight: bold;
      color: #222;
      margin-bottom: 13px;
    }
    .roomType {
      width: 654px;
      .elip(@clamp:3);
      font-size: 24px;
      color: #808080;
      margin-bottom: 36px;
    }

    .price {
      > div {
        font-size: 36px;
        font-weight: bold;
        color: #222;
        margin-bottom: 22px;
      }
      > p {
        font-size: 44px;
        font-weight: bold;
        color: #c70850;
      }
    }

    .qrcodeContainer {
      .size(@w: 192px , @h: 192px);
      .flex(@display: flex, @justifyCenter: center, @alignCenter: center, @direction: column);
      margin-top: 38px;

      div:first-child {
        .size(@w: 192px, @h: 192px);
        box-shadow: 0px 3px 6px 0 rgba(2, 3, 3, 0.1);
        border-radius: 6px;
        border: solid 1px #dadada;
        background-image: linear-gradient(to top, #f5f5f5, #fff);
        margin: 8px 0 0 6px;
        padding: 16px 16px 16px 16px;
      }

      .tooltip {
        .tooltipBody {
          .size(@w: 340px , @h: 80px);
          display: flex;
          align-items: center;
          position: relative;
          text-align: center;
          background: @COLOR_GRAY07;
          border-radius: 10px;
          line-height: 1.27;
          color: @COLOR_WHITE;
          font-size: 22px;

          &::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;
          }
        }
      }
    }
  }
  .tbutton {
    .size(@w: 846px , @h:78px);
    margin-top: auto;
  }
}
