@import "variables.css";

@media (max-width: 767px) {

  /* ==SIGN IN ===== */
  .title-login {
    font-size: 2rem;
    margin-top: 6.5rem !important;
  }

  .wrapper {
    flex-direction: column;
    height: auto;
    padding: 1rem;
    width: 100%;
  }

  .side-bar,
  .register {
    width: 100%;
    border-radius: 0;
    height: auto;
  }

  .form-footer,
  .form-footer-two,
  .form-footer-three {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
  }

  .form-footer .button,
  .form-footer-two .button,
  .form-footer-three .button { width: auto; }

  .form-content { padding-bottom: 1rem; }

  .buttons.is-centered {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .social-btn {
    width: 45%;
    max-width: 130px;
    margin: 0.5rem auto;
  }

  .input.is-soft-rounded {
    height: 2.8rem;
    font-size: 1rem;
  }

  .code-inputs { gap: 0.5rem; justify-content: center; }

  .code-inputs input {
    width: 40px;
    height: 40px;
  }

  .hr-separator { width: 100%; }

  .stepper-box {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
  }

  .stepper-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .stepper-circle { margin: 0 0 0.5rem 0; }

  .stepper-title {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    max-width: 100px;
  }

  .stepper-line {
    position: absolute;
    top: 10px;
    left: 75%;
    width: 3.5rem;
    height: 2px;
    background-color: var(--white);
    opacity: 0.6;
  }

  .stepper-step:last-child .stepper-line { display: none; }
}


@media (max-width: 767px) and (orientation: portrait) {

  /* ==SIGN IN ===== */
  .logo-container-login {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 90px;
    top: 2%;
  }
}


@media (max-width: 767px) and (orientation: landscape) {
  /* ==SIGN IN ===== */
  .logo-container-login { height: 80px; }

  .title-login {
    margin-bottom: 1rem !important;
    margin-top: 1.5rem !important;
  }
}


@media (min-width: 768px) and (max-width: 1023px) {
  .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
    padding: 1rem;
  }

  .side-bar,
  .register { width: 100%; border-radius: 0; }

  .form-footer-two { justify-content: space-between; margin-top: 2rem; }
  .form-footer { justify-content: flex-end; margin-top: 2rem; }

  .social-btn { width: 100px; }
  .register .field { max-width: 100%; }

  .stepper-box {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
  }

  .stepper-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .stepper-circle { margin: 0 0 0.5rem 0; }

  .stepper-title {
    font-size: 1rem;
    margin-top: 0.5rem;
    max-width: 120px;
  }

  .stepper-line {
    position: absolute;
    top: 24px;
    left: 100%;
    width: 11rem;
    height: 2px;
    background-color: var(--white);
    opacity: 0.6;
  }

  .stepper-step:last-child .stepper-line { display: none; }
}


@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* SIGN IN */
  .image-login { background-position: calc(50% + 8rem) center; }
  .title-login { margin-top: 5.5rem !important; }
}


@media (min-width: 1024px) {
  /* HOME */
  .mobile-step-header { display: none; }
  .wrap { padding-bottom: 1.25rem; }
  .dlabel { display: block; }
}


@media (min-width: 1280px) and (max-width: 1440px) {
  .wrapper {
    width: 85%;
    height: auto;
    gap: 2.5rem;
    flex-direction: row;
  }

  .form-content { gap: 1.5rem; padding-bottom: 1rem; }

  .register .field {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .input.is-soft-rounded { height: 3rem; font-size: 1rem; }

  .social-btn {
    width: 110px;
    height: 40px;
    margin: 0 0.5rem;
  }

  .form-footer { justify-content: flex-end; }

  .form-footer-two,
  .form-footer-three {
    margin-top: 2rem;
    justify-content: space-between;
    gap: 1rem;
  }

  .button-step { padding: 0.6rem 1.8rem; }

  .info-box { font-size: 0.9rem; padding: 1rem 1.2rem; }

  .code-inputs input { width: 48px; height: 48px; }

  .stepper-box { flex-direction: column; gap: 9rem; }

  .stepper-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .stepper-line {
    position: absolute;
    top: 50px;
    left: 10px;
    width: 2px;
    height: calc(100% + 5rem);
    background-color: var(--white);
    opacity: 0.6;
  }

  .stepper-circle { margin-right: 8px; }
  .stepper-title { font-size: 0.9rem; margin-top: 0; }
}


@media (prefers-color-scheme: dark) {
  .icons-dark-mode { color: var(--neutral); }

  .container-body {
    background-color: var(--near-black);
    color: var(--surface-contrast);
  }

  .register { background-color: var(--neutral-darker); }

  .title,
  .label,
  .stepper-title,
  .step-count { color: var(--white); }

  .input,
  .select select,
  .textarea,
  .button.is-light {
    background-color: var(--neutral-dark);
    color: var(--surface-contrast);
    border-color: var(--gray-600);
  }

  .stepper-line { background-color: var(--neutral-light); }

  .info-box {
    background-color: var(--neutral-blue-dark);
    color: var(--white);
  }

  .social-btn {
    border-color: var(--neutral-light);
    background-color: var(--neutral-darker);
  }
}

@media (prefers-color-scheme: light) {
  .bg-neutral-blue { background-color: var(--neutral-blue); }
}