.jwt-auth-box {
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  position: relative;
  background: white;
}

.jwt-auth-cta-button {
  display: block;
  text-align: center;
  padding: 1rem;
  border-radius: 4px;
  background: #0073aa;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  border: none;
  box-shadow: 0 0 0;
  cursor: pointer;

  &:disabled {
    background: #ddd;
    color: black;
    cursor: not-allowed;
    &:hover {
      background: #ddd;
      color: black;
    }
  }

  &:hover {
    color: white;
  }
}

.jwt-auth-text-small {
  font-size: 12px;
  font-weight: normal;
}

.jwt-auth-settings {
  margin-top: 2rem;
  gap: 2rem;

  .jwt-auth-options {
    width: 100%;
  }

  .jwt-auth-cta {
    width: 100%;
    margin-top: 1rem;

    .jwt-auth-cta-wrapper {
      position: relative;
      display: inline-block;
      width: 100%;


    }
  }

  .jwt-auth-toggle-holder {
    padding: 1rem 0;

    .jwt-auth-toggle-control {
      display: flex;
      gap: 1rem;
      font-weight: bold;
      margin-bottom: 4px;
    }
  }

  .jwt-auth-newsletter {
    margin-top: 1rem;
    padding: 1rem;
    background: #353A45;
    color: white;

    h3 {
      color: white;
    }

    .jwt-auth-newsletter-form {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 1rem;

      input {
        padding: 0.5rem;
        border-radius: 4px;
        border: 1px solid #ddd;
        font-size: 1rem;
      }

      .jwt-auth-thank-you {
        font-size: 1rem;
        margin-top: 12px;
        color: white;
        text-align: center;
      }
    }
  }
}

// media query
@media screen and (min-width: 1024px) {
  .jwt-auth-settings {
    display: flex;

    .jwt-auth-options {
      width: 66%;
    }

    .jwt-auth-cta {
      width: 33%;
      max-width: 380px;
      margin-top: 0;
    }
  }
}