@mixin font($font-family: null, $font-size: null, $font-weight: null, $color: null, $line-height: null) {
  font-family: $font-family;
  font-size: $font-size;
  font-weight: $font-weight;
  color: $color;
  line-height: $line-height;
}

.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;
  @media only screen and (max-width: 480px) {
    display: none;
  }
}
.detail-container {
  @media only screen and (max-width: 480px) {
    padding: 0 16px;
  }

  .sim__detail-title{
    display: none;
    @media only screen and (max-width: 480px) {
      display: block;
      @include font('FS Magistral', 28px, 700, null, 40px);
      span {
        color: #EE0033;
      }
    }
    
  }
  .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;
    @media only screen and (max-width: 480px) {
      background-color: #FCFCFC;
      border: none;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      border-radius: 16px;
      margin: 20px 0 36px 0;
    }
    h1 {
      font-weight: 700;
      font-size: 20px;
      color: $color-text;
      @media only screen and (max-width: 480px) {
        display: none;
      }
    }

    .sim-info-block {
      display: flex;
      flex-direction: column;
      padding: 16px;
      border-color: $color-second;
      margin-bottom: 10px;
      @media only screen and (max-width: 480px) {
        padding: 0;
        margin: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        border: none;
        & > div{
          width: calc(50% - 7.5px)!important;
          margin: 0!important;
          align-items: center;
          gap: 12px!important;
        }
      }

      .sim-info-tel {
        display: flex;
        margin-top: 3px;
        gap: 20px;
        align-items: center;
        font-weight: 700;
        @media only screen and (max-width: 480px) {
          display: none;
        }
        &_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;
        @media only screen and (max-width: 480px) {
          display: none;
        }

        &_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%;
          }
        }
      }

      .pretty-number {
        margin-top: 16px;
        display: flex;
        align-items: center;
        border-right: 1px solid #F4F4F4;
        .sim-info--content{       
          @media only screen and (min-width: 480px){
            p {
              white-space: nowrap;
              flex-grow: 1;
              @include font(null, 100%, 700, null, 20px);
            }
            .pretty-number_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;
        .sim-info--content{
          @media only screen and (min-width: 480px){
            p {
              white-space: nowrap;
              font-size: 100%;
              line-height: 20px;
              flex-grow: 1;
              font-weight: 700;
            }
            .pretty-head_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;
        border-right: 1px solid #F4F4F4;
        .sim-info--content{
          @media only screen and (min-width: 480px){
            p {
              white-space: nowrap;
              font-size: 100%;
              line-height: 20px;
              flex-grow: 1;
              font-weight: 700;
            }
            .pretty-tail_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;
        @media only screen and (max-width: 480px) {
          display: none;
        }
        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;       
        margin-top: 12px;
        padding: 20px 0px 0px;
        border-top: 1px solid $color-second;
        @media only screen and (max-width: 480px) {
          padding: 0;
          border: none;
        }

        .sim-info--content{
          @media only screen and (min-width: 480px) {           
            .sim-info-price_title {
              flex-grow: 1;
              font-size: 100%;
              line-height: 24px;
              font-weight: 600;
            }
            .sim-info-price_detail {
              font-size: 130%;
              line-height: 28px;
              font-weight: 700;
              color: $color-primary;
            }
            .sim-info-price_content{
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              font-weight: 600;
            }
            .sim-info-price_detail_adjust {
              display: flex;
              gap: 2px;
              &_cost {
                text-decoration: line-through;
                color: rgb(155, 152, 152);
              }
              &_promotion{
                color: $color-primary;
              }
            }
          }
        }
      }

      .sim-info--icon{
        display: none;
        @media only screen and (max-width: 480px) {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 99%;
          background-image: linear-gradient(195deg, #fff -1%, #fff 1%, #fffafb 5%, #fffafb 9%, #fef6f8 13%, #fef6f8 19%, #fef1f4 25%, #fef1f4 33%, #feecf0 41%, #feecf0 53%, #fde7ed 68%, #fde7ed 100%);
        }
      }
      .sim-info--content{
        @media only screen and (max-width: 480px) {
          .title {
            @include font('SFProDisplay', 12px, null, #4E4E4E, null);
          }
          .desc {
            @include font('SFProDisplay', 14px, 600, #222222, 18px);
            &-price {
              color: #EE0033;
            }
          }
        }
        @media only screen and (min-width: 480px) {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

  .form-buying {
    background-color: $color_bg;
    margin-top: 20px;
    padding: 16px 12px;
    border-radius: 8px;
    @media only screen and (max-width: 480px) {
      padding: 16px;
      background-color: #FCFCFC;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      border-radius: 16px;
      &-notifi {
        @include font('SFProDisplay', 14px, 400, #222222, 18px);
      }
    }
    h2 {
      font-weight: 700;
      font-size: 100%;
      line-height: 24px;
      font-style: normal;
      color: $color-text;
      @media only screen and (max-width: 480px){
          @include font('FS Magistral', 24px, 700, #141516, 40px);
      }
    }
    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;
        }
      }

      @media only screen and (max-width: 480px){
        padding: 0;
      }

      .block-input {
        width: 100%;
        margin-top: 10px;
        input {
          margin-top: 10px;
        }
        span {
          color: #CC5F5F;
          font-size: 100%;
        }
        @media only screen and (max-width: 480px){
          p {
            display: none;
          }
          input {
            min-height: 56px;
            padding: 16px;
            border: 1px solid #E9E9E9;
            border-radius: 12px;
            background-color: #f4f4f4;
            @include font('SFProDisplay', 16px, 400, #222222, 56px);
            &::placeholder{
              font-size: 16px;
              &::after{
                content: '*';
                color: red;
              }
            }
          }
        }
      }
      .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;
      }
      .order__now {
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: white;
        box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 5px;
        z-index: var(--z-sticky);
        padding: 16px 8px;
        display: none;
        align-items: center;
        justify-content: space-between;
        font-family: 'SFProDisplay';
        &-price {
          color: #222222;
          font-size: 24px;
          font-weight: 600;
          line-height: 28px;
          span {
            color: #222222;
            font-size: 18px;
            font-weight: 400;
            line-height: 22px;
          }
        }
        &-buttons {
          display: flex;
          gap: 5px;
          &-action {
            min-width: 100px;
            min-height: 32px;
            padding: 3px 4px;
            border-radius: 24px;
            background-color: #EE0033;
            color: white;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
          }
          &.is-column {
            flex-direction: column;
          }
        }
      }
      .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;
  @media only screen and (max-width: 480px) {
    margin: 36px 16px;
    padding: 16px;
    border-radius: 16px;
    background-color: #FCFCFC;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    p {
      @include font('FS Magistral', 24px, 700, #141516, 40px);
      margin-bottom: 12px;
    }
    ul {
      li {
        &:not(:last-child) {
          margin-bottom: 24px;
        }
        @include font('SFProDisplay', 14px, 400, #222222, 18px);
        strong {
          display: block;
          @include font('SFProDisplay', 16px, 600, #222222, 20px);
          margin-bottom: 8px;
        }
      }
    }
  }

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

  @media only screen and (min-width: 480px) {
    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;
        }
      }
    }
  }
}