/* Extracted from theme style.css. Keep cascade order in functions.php. */

/* ------------------ LOGIN ------------------ */

.main-container-login {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background: var(--bg);
}

.right-part {
  flex: 1;
  height: 100vh;
  background: linear-gradient(to top,
      var(--brand-orange) 0%,
      var(--brand-pink) 100%);
  position: relative;
  overflow: hidden;

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 0 0 0 5rem;
    gap: 1rem;
    max-width: 500px;
    line-height: 1;
  }


  .bubble {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 1);
    opacity: 0.1;
    animation: moveBubble 10s infinite ease-in-out;
  }

  .bubble1 {
    width: 150px;
    height: 150px;
    top: 10%;
    left: 20%;
    animation-duration: 15s;
  }

  .bubble2 {
    width: 100px;
    height: 100px;
    top: 40%;
    left: 50%;
    animation-duration: 12s;
  }

  .bubble3 {
    width: 120px;
    height: 120px;
    top: 70%;
    left: 80%;
    animation-duration: 18s;
  }

  .bubble4 {
    width: 90px;
    height: 90px;
    top: 30%;
    left: 80%;
    animation-duration: 14s;
  }

  .bubble5 {
    width: 180px;
    height: 180px;
    top: 60%;
    left: 40%;
    animation-duration: 20s;
  }

  .bubble6 {
    width: 130px;
    height: 130px;
    top: 20%;
    left: 70%;
    animation-duration: 17s;
  }

  .bubble7 {
    width: 110px;
    height: 110px;
    top: 50%;
    left: 10%;
    animation-duration: 16s;
  }

  .bubble8 {
    width: 160px;
    height: 160px;
    top: 80%;
    left: 30%;
    animation-duration: 13s;
  }

  .bubble9 {
    width: 140px;
    height: 140px;
    top: 15%;
    left: 90%;
    animation-duration: 19s;
  }
}

.left-part {
  flex: 1;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;

  .content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: min(560px, calc(100% - 2rem));
    max-width: 100%;

    .buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
    }
  }

  .top-left {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    align-items: flex-start;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    .form-row {
      display: flex;
      gap: 1rem;

      .form-col {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        input {
          width: 280px;
          height: 40px;
          background-color: var(--white);
          border-radius: var(--radius-3);
          border: 1px solid var(--gray-3);
          padding: 1rem;
          transition: all 0.3s ease;

          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

          &:focus {
            outline: none;
            border-color: var(--brand-orange-hover);
          }
        }
      }

      &.full {
        width: 100%;

        .form-col {
          width: 100%;

          input {
            width: 100%;
          }
        }
      }
    }

    .form-footer {
      display: flex;
      align-items: center;
      gap: 1rem;

      label {
        display: flex;
        gap: 0.4rem;

        p {
          transform: translateY(0.1rem);
        }
      }

      input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--gray-2);
        border-radius: 4px;
        appearance: none;
        outline: none;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
      }

      input[type="checkbox"]:checked {
        background-color: var(--brand-orange);
        border-color: var(--brand-orange);
      }

      input[type="checkbox"]:hover {
        border-color: var(--brand-orange-hover);
      }
    }
  }
}

.left-part .content {
  width: min(560px, calc(100% - 2rem));
  max-width: 100%;
}

.form-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-panel.hidden {
  display: none !important;
}

.learnio-auth-notices:empty {
  display: none;
}

.main-container-login .form input.is-invalid {
  border-color: #d92d20;
  background: #fff7f6;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.main-container-login .form input.is-invalid:focus {
  border-color: #b42318;
  box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.18), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.learnio-auth-toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: min(420px, calc(100vw - 3rem));
  padding: 1rem;
  border: 1px solid #d92d20;
  border-radius: var(--radius-3);
  background: #fff7f6;
  color: #9f1c28;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
}

.learnio-auth-toast p {
  margin: 0;
  flex: 1;
  font-size: var(--small);
  line-height: 1.45;
}

.learnio-auth-toast button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
}

@media (max-width: 640px) {
  .learnio-auth-toast {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
  }
}