@import "@/styles/_support.scss";
.comp {
  font-size: $fontSize-M2;
}

.container {
  @extend .bb;
  padding: 24px 32px;
}

.border {
  border-radius: 8px;
  border: solid 1px #f2f2f2;
  background-color: #ffffff;
}

.form {
  display: flex;
  flex-wrap: wrap;
  &-item {
    position: relative;
    width: 100%;
    &:last-child {
      margin-bottom: 0;
    }
    .label {
      display: flex;
      align-items: center;
      margin-bottom: 8.4px;
      .icon {
        margin-right: 14px;
      }
      img {
      }
    }

    .ipt-gird {
      &-item {
        position: relative;
        margin: 0 auto 48px;
        padding-right: 36px;

        &:first-child {
          margin-right: 0;
          padding-left: 0;
        }
        &:last-child {
          margin-right: 0;
          padding-right: 0;
        }
      }

      .w1 {
        width: 210px;
      }
      .w2 {
        width: 300px;
      }
      .w3 {
        width: 360px;
      }
    }

    .ipt-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      // input和下拉
      .ipt {
        flex: 1;
      }
      .name-ipt {
        width: 164px;
      }
      .phone-ipt {
        width: 164px;
      }
      .mail-ipt {
      }
      // 长文本
      .textarea {
        min-height: 105px;
        border-radius: 12px;
        @extend .bb;
        padding: 9px;
      }
      .down-arrow {
        position: absolute;
        top: 26.4px;
        right: 24px;
        background-image: url("~@/assets/images/reservation/re-down-arrow.png");
        width: 12px;
        height: 8px;
        pointer-events: none;
        cursor: default;
      }
      .check-icon {
        display: inline-block;
        margin-left: 26px;
        margin-right: 8px;
      }
    }
    .validator {
      color: $cOrange2;
      margin-top: 6px;
      position: absolute;
      // right: 0;
      left: 0;
      display: flex;
      align-items: center;
      // bottom: 0;
      img {
        display: inline-block;
        margin-right: 4.8px;
      }
    }
  }
}

.agree {
  width: 100%;
  display: flex;
  align-items: center;
  // margin-top: 48px;
  font-size: $fontSizeSmall-M2;
  .check-icon {
    margin-right: 8px;
    width: 18px;
    height: 18px;
  }
}

.submit-btn {
  @include btc4(300px, 50px, 18px);
  width: 300px;
  height: 50px;
  border-radius: 25px;
  margin: 40px auto 0;
}

.submit-btn:lang(zh) {
  letter-spacing: 1.55px;
}

@media (max-width: 1200px) {
  .container {
    display: -webkit-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 92vw;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 24px 16px;
  }
  .form {
    &-item {
      .ipt-wrap {
        display: block;
      }
      .ipt-gird {
        &-item {
          padding: 0;
        }
      }
    }
  }
}