.sim {
  display: block;
  background-color: $color_bg;
  border: 1px solid #f7f7f7;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 10px 8px;

  &__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  &__logo {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
  }

  &__feature {
    &__icon {
      margin-left: 8px;
    }
  }

  &__number {
    font-size: 100%;
    font-weight: 600;
    color: $color-text;
    line-height: 20px;
    margin-bottom: 5px;

    i {
      color: $color-primary;
    }
  }

  &__sale-off {
    display: inline-block;
    background: #f37500;
    border-radius: 4px;
    color: $color_bg;
    font-size: 85%;
    line-height: 14px;
    padding: 0 4px;
    margin-right: 4px;
  }

  &__price {
    font-size: 85%;
    line-height: 14px;
  }

  &__tags {
    overflow: hidden;
  }

  &__tag {
    font-size: 8px;
    background-color: #eee;
    color: #5b6876;
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;

    &:last-child {
      margin-right: 0;
    }
  }
}

// sim detail

.box_submit_btn {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 12px;
  padding-top: 20px;
}
.detail-container {
  .input {
    border: 1px solid $color-second;
    border-radius: 6px;
    width: 100%;
    height: 40px;
    padding: 0 15px;
    font-size: 85%;

    &.--error {
      border-color: $color-primary;
    }

    @include placeholder {
      font-size: 85%;
      font-style: normal;
      font-weight: 300;
      line-height: 20px;
      align-items: center;
    }

    &-datepicker {
      position: relative;

      &:after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -10px;
        width: 20px;
        height: 20px;
        background-image: url("../images/icons/calendar.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
      }
    }

    &-selecter {
      position: relative;

      .input {
        line-height: 38px;
      }

      &:after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        margin-top: -7px;
        width: 8px;
        height: 14px;
        background-image: url("../images/icons/arrow-right.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        transform: rotate(90deg);
        opacity: 0.6;
      }
    }
  }

  .required {
    color: $color-primary;
    font-weight: 700;
  }

  .sim-info-container {
    background-color: $color_bg;
    border-radius: 8px;
    border: 1px solid #ececec;
    padding: 16px 12px;
    h1 {
      font-weight: 700;
      font-size: 20px;
      color: $color-text;
    }

    .sim-info-block {
      display: flex;
      flex-direction: column;
      padding: 16px;
      border-color: $color-second;
      margin-bottom: 10px;

      .sim-info-tel {
        display: flex;
        margin-top: 3px;
        gap: 20px;
        align-items: center;
        font-weight: 700;
        &_title {
          font-size: 100% /* 14px */;
          line-height: 1.25rem /* 20px */;
          flex-grow: 1;
        }
        &_logo {
          justify-content: flex-end;
          display: flex;
          width: 16.666667%;
          img {
            height: 32px;
            object-fit: contain;
          }
          @media only screen and (max-width: 640px) {
            width: 20.666667%;
          }
        }
      }

      .sim-info-number {
        display: flex;
        font-weight: 700;
        gap: 20px;
        align-items: center;
        margin-top: 16px;

        &_title {
          white-space: nowrap;
          font-size: 100% /* 14px */;
          line-height: 1.25rem /* 20px */;
          flex-grow: 1;
        }
        &_detail {
          justify-content: flex-end;
          display: flex;
          font-size: 150% /* 24px */;
          line-height: 2rem /* 32px */;
          font-weight: 700;
          font-style: normal;
          color: $color-text;
          .not-italic {
            i {
              color: $color-primary;
              font-style: normal;
            }
          }
          h2 {
            font-size: 100%;
          }
        }
      }

      .sim-number-pattern {
        .pretty-number {
          margin-top: 16px;
          display: flex;
          align-items: center;
          p {
            white-space: nowrap;
            font-size: 100%;
            line-height: 20px;
            flex-grow: 1;
            font-weight: 700;
          }
          &_list {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row-reverse;
            gap: 8px;
            &_block {
              font-size: 85% /* 12px */;
              line-height: 1rem /* 16px */;
              font-weight: 500;
              border-radius: 4px;
              background-color: $color-second;
              padding: 1px 4px;
              color: #3b424a;
            }
          }
        }
        .pretty-head {
          display: flex;
          margin-top: 16px;
          p {
            white-space: nowrap;
            font-size: 100%;
            line-height: 20px;
            flex-grow: 1;
            font-weight: 700;
          }
          &_link {
            a {
              color: $color-blue; 
              background-color: $color-second;
              padding: 1px 4px;
              font-size: 100%;
              line-height: 20px;
              font-weight: 500;
              border-radius: 4px;
            }
          }
        }
        .pretty-tail {
          display: flex;
          margin-top: 16px;
          p {
            white-space: nowrap;
            font-size: 100%;
            line-height: 20px;
            flex-grow: 1;
            font-weight: 700;
          }
          &_link {
            a {
              color: $color-blue;
              background-color: $color-second;
              padding: 1px 4px;
              font-size: 100%;
              line-height: 20px;
              font-weight: 500;
              border-radius: 4px;
            }
          }
        }
      }

      .sim-note {
        margin-top: 16px;
        display: flex;
        align-items: center;
        p {
          white-space: nowrap;
          font-size: 100%;
          line-height: 20px;
          flex-grow: 1;
          font-weight: 700;
        }
        &_content {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row-reverse;
          gap: 8px;
          font-size: 85% /* 12px */;
          line-height: 1rem /* 16px */;
          font-weight: 500;
          border-radius: 4px;
          padding: 1px 4px;
          color: #3b424a;
        }
      }

      .sim-info-hr {
        height: 1px;
        margin-top: 1rem;
        margin-bottom: 1rem;
        background-color: $color-black;
        opacity: 0.1;
        border-width: 1px;
      }

      .sim-info-price {
        display: flex;
        font-weight: 600;
        margin-top: 12px;
        padding: 20px 0px 0px;
        border-top: 1px solid $color-second;

        &_title {
          flex-grow: 1;
          font-size: 100%;
          line-height: 24px;
        }
        &_detail {
          font-size: 130%;
          line-height: 28px;
          font-weight: 700;
          color: $color-primary;
        }
        &_content{
          display: flex;
          flex-direction: column;
          align-items: flex-end;
        }
        &_detail_adjust {
          display: flex;
          gap: 2px;
          &_cost {
            text-decoration: line-through;
            color: rgb(155, 152, 152);
          }
          &_promotion{
            color: $color-primary;
          }
        }
      }
    }
  }

  .form-buying {
    background-color: $color_bg;
    margin-top: 20px;
    padding: 16px 12px;
    border-radius: 8px;
    h2 {
      font-weight: 700;
      font-size: 100%;
      line-height: 24px;
      font-style: normal;
      color: $color-text;
    }
    form {
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      @supports (--webkit-touch-callout:none){
        input,select,textarea{
          font-size: max(16px) !important;
        }
      }

      .block-input {
        width: 100%;
        margin-top: 10px;
        input {
          margin-top: 10px;
        }
        span {
          color: #CC5F5F;
          font-size: 100%;
        }
      }
      .block-submit {
        display: flex;
        width: 30%;
        padding: 8px 14px;
        justify-content: center;
        border-radius: 6px;
        background-color: $color-primary;
        color: $color_bg;
        font-weight: 700;
        white-space: nowrap;
        @media only screen and (max-width: 400px) {
          width: 48%;
        }
      }
      .block-submit:nth-child(1) {
        margin-right: 15px;
      }
      .input-highlight {
        border: 1px solid $color-primary;
      }

      .banking_affiliate {
        display: flex;
        width: 100%;
        gap: 20px;
        justify-content: center;
        padding-top: 20px;
      }
    }
  }
}

.instructions-container {
  background-color: $color_bg;
  border-radius: 0.625rem;
  padding: 12px;
  margin: 20px 0;

  h1 {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin: 0 12px;
  }

  p {
    font-size: 100%;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    color: $color-primary;
    margin-bottom: 10px;
  }
  ul {
    li {
      margin-left: 10px;
      font-size: 100%;
      font-style: normal;
      font-weight: 400;
      line-height: 25px;
      color: $color-text;
      list-style-type: circle;
      margin-left: 20px;
      span {
        font-weight: 700;
      }
    }
  }
}