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

.tBody {
  width: 100%;
  height: calc(100% - 90px);
  background-color: @BG_COLOR_01;

  .tVerticalPagenator {
    padding-left: 60px;
    height: 100%;

    .test {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 100px;
      right: 100px;
      background-color: red;
      z-index: 9999;
    }

    .tabContainer {
      padding-top: 60px;
      width: -webkit-fit-content;
      height: auto;
      position: relative;

      .dropdown {
        position: absolute;
        right: 0px;
        bottom: 5px;

        &.myOrdersDropdown {
          > div {
            > div {
              border-radius: 6px 6px 0 0 !important;
            }
          }
        }
      }
    }
  }
}

[class="myOrders_dropdown"] {
  > div > div[id] > div:nth-child(2) {
    -webkit-filter: none !important;
    filter: none !important;
    > div:nth-child(1) {
      height: 123px !important;
      width: 270px !important;
      margin-top: 0 !important;
      border-radius: 0 0 6px 6px !important;
      background-color: @COLOR_GRAY03 !important;
      > div {
        width: 270px !important;
        height: 144px !important;
        border-radius: 0 !important;
        padding-top: 0 !important;
        > div {
          > div {
            > div {
              padding: 0 !important;
              &:first-child {
                > div:nth-child(1) {
                  border-radius: 6px 6px 0 0 !important;
                  overflow: hidden;
                  &:focus {
                    border-radius: 0 !important;
                  }
                  > div:first-child {
                    will-change: unset !important;
                  }
                }
              }
              &:last-child {
                > div:nth-child(1) {
                  border-radius: 0 0 6px 6px !important;
                  overflow: hidden;
                  &:focus {
                    border-radius: 0 0 6px 6px !important;
                  }
                }
              }
              > div:nth-child(1) {
                height: 63px !important;
                padding: 20px 19px !important;
                &:focus {
                  background-color: @PRIMARY_COLOR_RED !important;
                  color: @COLOR_WHITE !important;
                  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
                }
              }
            }
          }
        }
      }
    }
  }
}

.orderDetailPopupContainer {
  .font(@fontFamily: @baseFont, @fontSize:24px);

  .header {
    background-color: @COLOR_SKYBLUE;
    padding: 40px 60px;
    color: @COLOR_GRAY07;

    .headerTitle {
      font-size: 36px;
      font-weight: bold;
    }
  }

  .contentsBody {
    padding: 30px 60px;

    .tScroller {
      > div {
        max-height: 750px !important;
      }

      .status {
        padding: 30px;
        background-color: @COLOR_WHITE;
        border: 1px solid @COLOR_GRAY02;
        display: flex;
        justify-content: space-between;

        .orderStatus {
          color: @COLOR_GRAY06;
          font-weight: bold;
        }

        .arrivingDate {
          color: @COLOR_GRAY07;
        }
      }

      .productWrap {
        padding: 30px;
        border: 1px solid @COLOR_GRAY02;
        border-top: none;
        position: relative;
        background-color: @COLOR_WHITE;

        > img {
          width: 40px;
          height: 40px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }

        .prdtNm {
          max-width: 650px;
          margin-left: 50px;
          color: @COLOR_GRAY06;
          font-weight: bold;
          .elip(@clamp: 1);
        }
      }

      .addressWrap {
        background: @BG_COLOR_02;
        padding: 30px;
        border: 1px solid @COLOR_GRAY02;
        border-top: none;

        .addressTitle {
          color: @COLOR_GRAY06;
          font-weight: bold;
        }

        ul {
          margin: 20px 0 40px;

          li {
            margin-bottom: 6px;
            color: @COLOR_GRAY03;

            &:last-of-type {
              margin-bottom: 0;
            }
          }
        }
      }

      .orderSummaryWrap {
        border: 1px solid @COLOR_GRAY02;
        border-top: none;

        .orderSummaryTitle {
          background-color: @COLOR_WHITE;
          padding: 30px;
          color: @COLOR_GRAY06;
          font-weight: bold;
        }

        .summaryList {
          padding: 30px 0;

          .summaryItem {
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;

            .label {
              font-weight: bold;
              color: @COLOR_GRAY06;
            }

            .value {
              color: @COLOR_GRAY03;
            }

            &:last-of-type {
              margin-bottom: 0;
            }
          }
        }

        .totalPrice {
          padding: 30px;
          background-color: @COLOR_NAVY;
          color: @COLOR_WHITE;
          display: flex;
          justify-content: space-between;
          font-size: 30px;
          font-weight: bold;
        }
      }
    }
  }

  .buttonWrap {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
}

.orderCancelPopupContainer {
  .font(@fontFamily: @baseFont, @fontSize:30px);
  display: flex;
  justify-content: center;

  .text {
    padding: 100px 0;
    text-align: center;
  }
}

.returnExchangePopup {
  padding: 30px 60px;

  .textWrap {
    .font(@fontFamily: @baseFont, @fontSize:30px);

    .textTitle {
      display: block;
      margin-bottom: 30px;
      font-weight: bold;
    }

    .textDesc {
      display: block;
      margin-bottom: 30px;
    }

    .textInfo {
      display: block;
      line-height: 1.6;
    }
  }
}

.orderCancelPopupContainerWrap {
  .header {
    .size(@w: 780px, @h: 102px);
    .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: center, @direction: row);
    background-color: #e7ebef;

    > h3 {
      padding: 0 30px;
      font-size: 36px;
      color: @COLOR_GRAY07;
      font-weight: bold;
    }
  }

  .orderCancelPopupContainer {
    padding: 30px;
    background-color: @BG_COLOR_01;

    .orderCancelPopupTScroller {
      > div {
        width: 690px;
        max-height: 400px;
        border: 1px solid @BG_COLOR_01;
      }

      .cancelReasonItem {
        background-color: @COLOR_WHITE;
        border-bottom: 1px solid @BG_COLOR_01;
        width: 100%;
        height: 90px;
        display: flex;
        align-items: center;
        padding: 0 30px;
        color: @COLOR_GRAY03;
        font-size: 24px;

        &:last-of-type {
          border: none;
        }

        &:focus {
          background-color: @PRIMARY_COLOR_RED;
          color: @COLOR_WHITE;
        }
      }
    }
  }
}

.trackPackagePopupContainer {
  padding: 30px 60px;

  .textWrap {
    .font(@fontFamily: @baseFont, @fontSize:30px);

    .textDesc {
      display: block;
      margin-bottom: 50px;

      .invTrceId {
        display: block;
        margin-top: 30px;
      }

      .dlvrMeth {
        display: block;
        margin-top: 5px;
      }
    }
  }

  .trackPackageQRCode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .qrcode {
      .size(@w: 360px , @h: 360px);
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 0 0 1px #dadada inset;
      margin-bottom: 41px;
    }
  }
}
