@import 'common.css';
section {
  display: flex;
  width: 100%;
  height: 100vh;

  .left {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .background_images {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
    }
    .background_images img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;

      &:last-child {
        opacity: 0.3;
      }
    }

    .auth_container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      overflow: hidden;
      background: rgba(13,4,65,.7);
      padding: 100px;

      .container_inner {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        h5 {
          font-size: 24px;
          letter-spacing: 20%;
          text-transform: uppercase;
          color: var(--color-white);
        }

        h2 {
          margin-top: 5px;
          font-size: 70px;
          line-height: 1.15;
          font-weight: 700;
          letter-spacing: -2%;
          color: var(--color-white);
        }

        p {
          margin-top: 40px;
          font-size: 26px;
          color: var(--color-white);
        }
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media (max-width: 1699px) {
      .auth_container {
        padding: 70px;

        .container_inner {
          h5 {
            font-size: 20px;
          }
  
          h2 {
            font-size: 55px;
          }
  
          p {
            font-size: 23px;
          }
        }
      }
    }
    @media (max-width: 1299px) {
      .auth_container {
        padding: 50px;
      }
    }
    @media (max-width: 1149px) {
      display: none;
    }
  }

  .right {
    width: 50%;
    height: 100%;
    overflow-y: auto;

    .auth_container {
      display: flex;
      height: 100%;

      .heading {
        svg {
          height: 85px;
          width: auto;
        }

        h2 {
          font-size: 42px;
          margin-top: 1rem;
          color: #0D0441;
          font-weight: 600;
          margin-bottom: 0;
        }

        p {
          position: relative;
          margin-top: 5px;
          font-size: 20px;
          color: #525154;
          margin-bottom: 0;

          span {
            color: #0D0441;
            font-weight: 500;
          }
        }
      }

      .form_sec {
        position: relative;
        margin-top: 40px;
        display: flex;
        flex-direction: column;

        .form_box {
          position: relative;
          display: flex;
          flex-direction: column;
          margin-bottom: 30px;

          label {
            position: relative;
            font-size: 16px;
            color: #212022;
            margin-bottom: 10px;
            text-transform: capitalize;
            font-weight: 400;
          }

          input {
            position: relative;
            width: 100%;
            height: 60px;
            padding: 6px 20px;
            font-size: 16px;
            color: #525154;
            border: 1px solid rgba(82,81,84,0.2);
            border-radius: 10px;
            box-shadow: 0 4px 4px #0000000A;
            outline: none;
            font-family: 'Poppins', sans-serif;
          }

          .main-password {
            position: relative;
            width: 100%;

            .icon-view,
            .confirm-icon-view {
              position: absolute;
              top: 50%;
              right: 20px;
              display: flex;
              transform: translateY(-50%);
              cursor: pointer;

              img {
                position: relative;
                width: 22px;
                height: auto;
              }
            }
          }

          .password_toggle {
            img {
              &:first-child {
                display: block;
              }
              &:last-child {
                display: none;
              }
            }

            &.active {
              img {
                &:first-child {
                  display: none;
                }
                &:last-child {
                  display: block;
                }
              }
            }
          }

          .otp_input_sec {
            position: relative;
            display: flex;
            align-items: center;

            input {
              position: relative;
              width: 60px;
              height: 60px;
              border-radius: 0;
              text-align: center;

              &:nth-child(1) {
                border-top-left-radius: 9px;
                border-bottom-left-radius: 9px;
              }
              &:nth-child(2) {
                border-left: none;
                border-right: none;
              }
              &:nth-child(3) {
                border-top-right-radius: 9px;
                border-bottom-right-radius: 9px;
                margin-right: 25px;
              }
              &:nth-child(4) {
                border-top-left-radius: 9px;
                border-bottom-left-radius: 9px;
              }
              &:nth-child(5) {
                border-left: none;
                border-right: none;
              }
              &:nth-child(6) {
                border-top-right-radius: 9px;
                border-bottom-right-radius: 9px;
                margin-right: 25px;
              }
            }
          }
        }

        .form_row {
          position: relative;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .form_box {
            position: relative;
            width: 48%;
          }
        }

        .form_verify_box {
          position: relative;
          width: 100%;
          margin-bottom: 30px;
          display: flex;
          flex-direction: column;

          .form_box {
            position: relative;
            margin-bottom: 0;
          }

          .verify_btn {
            position: absolute;
            right: 0;
            top: 94px;
            width: 100%;
            display: flex;
            justify-content: flex-end;
            padding-right: 10px;

            a {
              position: relative;
              cursor: pointer;
              font-size: 12px;
              font-weight: 500;
              color: #0D0441;
            }
          }
        }

        .remember_forget_sec {
          position: relative;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          label {
            position: relative;
            display: flex;
            align-items: center;

            input[type="checkbox"] {
              display: none;
            }

            span {
              position: relative;
              width: 20px;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 2px solid #525154;
              border-radius: 5px;
            }

            input[type="checkbox"]:checked ~ span {
              border: 2px solid #0D0441;
              background: #0D0441;
            }

            p {
              position: relative;
              margin-bottom: 0;
              margin-left: 10px;
              font-size: 16px;
              color: #525154;
              cursor: pointer;
            }
          }

          a {
            position: relative;
            color: #0D0441;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            font-weight: 500;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }

      .redirect_sec {
        position: relative;
        margin-top: 20px;

        p {
          font-size: 16px;
          color: #525154;
          margin-bottom: 0;

          a {
            position: relative;
            font-weight: 500;
            color: #0D0441;
            text-decoration: none;
            cursor: pointer;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    @media (max-width: 1699px) {
      .auth_container {
        .log_in_body {
          padding: 70px;
        }
      }
    }

    @media (max-width: 1299px) {
      .auth_container {
        .log_in_body {
          padding: 50px;
        }
      }
    }

    @media (max-width: 1149px) {
      width: 100%;

      .auth_container {
        display: flex;
        justify-content: center;

        .log_in_body {
          width: 600px;
        }
      }
    } 

    @media (max-width: 678px) {
      .auth_container {
        .log_in_body {
          padding: 50px 35px;
          width: 100%;
        }
        .heading {
          svg {
            height: 60px;
          }
  
          h2 {
            font-size: 33px;
          }
        }
        .form_row {

          .form_box {
            width: 100% !important;
          }
        }

        .otp_input_sec {
          position: relative;
          display: flex;
          align-items: center;

          input {
            width: 48px !important;
            height: 48px !important;
          }
        }
      }
    } 

    @media (max-width: 499px) {
      .auth_container {
        .log_in_body {
          padding: 40px 25px;
        }
      }
    }
  }
}

.sign_up_body,
.log_in_body {
  padding: 6rem;
  width: 100%;

  h1 {
    font-weight: 700;
    font-size: 3rem;
    line-height: 4rem;
    color: var(--color-text-main);
  }
  
  h4 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--color-text-secondary);
    
    a {
      color: var(--color-link);
    }
  }
}

.stepper {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.step.hidden {
  display: none;
}
.step-content, .log_in_form {
  padding-bottom: 4rem;
}

.main-password {
  position: relative;
}
.input-password {
  font-family: monospace; 
  font-size: 1rem; 
}
.form-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--color-text-main);
  text-transform: uppercase;
  margin-left: 5px;
}
.form-control {
  height: 60px;
  padding: 0 10px 0 10px;
  gap: 0;
  border-radius: 16px;
  border: 1px solid var(--color-grey-light);
  opacity: 1;
  text-align: left;
}
.form-control:focus {
  border: 2px solid var(--color-primary);
  outline: none;
  box-shadow: none;
}
.btn-primary {
  width: 100%;
  height: 60px;
  padding: 16px 35px;
  border-radius: 10px;
  background: var(--color-primary);
  border: none;
  color: var(--color-white);
  transition: background 0.3s;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin-top: 30px;

  &:hover {
    background: var(--color-primary);
    opacity: 0.9;
  }
}

.btn-primary i,
.btn-primary svg {
  margin-left: 8px;
}
.btn-primary svg rect {
  fill: #FFF;
}

.btn-primary:disabled {
  cursor: not-allowed;
}

.btn-google {
  width: 384px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-background);
  border: 1px solid var(--color-grey-light);
  border-radius: 6px;
  opacity: 1;
  transition: box-shadow 0.3s;
}

.btn-google:hover {
  background: var(--color-background);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-grey-light);
}

.divider {
  width: 100%;
  height: 0;
  border: none;
  border-bottom: 0.5px solid var(--color-divider);
  margin: 80px 0 50px 0;
}

.step_para p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-grey-dark);
  
  span {
    color: var(--color-primary);
  }
}

input[type="radio"] {
  accent-color: var(--color-accent);
  width: 26px;
  height: 26px;
}

.step_2_option {
  gap: 1rem;
}

.step_2_option_item label {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  margin-left: 8px;
}

.step_2_option_item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.form-check-input {
  width: 28px;
  height: 28px;
  background-color: var(--color-white);
  border: 2px solid var(--color-input-border);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

.form-check-input:focus {
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  position: relative;
}

.form-check-input:checked::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url("/public/site_html/Images/Checklist.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-check-label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  margin-left: 8px;
  vertical-align: middle;
}

@media (max-width: 1199px) {
  .divider {
      margin: 40px 0;
  }
  .sign_up_body, .log_in_body {
      padding: 4rem;
      width: 100%;
  }
}
@media (max-width: 1099px) {
  .form-control {
    width: 100%;
  }

  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 992px) {
  .sign_up_body, .log_in_body {
    padding: 4rem 3rem;
  }
}
@media (max-width: 767px) {
  .btn-primary {
    padding: 12px 25px;
    height: auto;
  }
  .sign_up_body, .log_in_body {
    padding: 4rem 1rem;
  }
}