body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.alert.registration {
  color: red;
}

/* Layout bazë – e njëjtë me register-in tënd */
.main-join {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #FFFFFF;
  width: 100%;
}

.main-join-content {
  width: 70%;
  height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main-join-content img {
  width: 71.9px;
  height: 80px;
  margin-bottom: 24px;
}

.form-content {
  width: 100%;
  max-width: 480px;
  /* heqim kartën */
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* Titujt dhe tekstet */
.welcome-p {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: #0F172A;
  margin: 0 0 4px 0;
}

.claim-desc {
  font-size: 14px;
  line-height: 20px;
  color: #64748B;
  margin: 0 0 16px 0;
}

.set-up-p {
  font-size: 16px;
  line-height: 22px;
  color: #0F172A;
  margin: 0 0 10px 0;
}

/* Labels & inputs */
.email-label{
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 4px;
}

.email-input {
  width: 100%;
  height: 34px;
  border-radius: 6px;
  border: 1px solid #006B57;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.email-input::placeholder {
  font-weight: 500;
  line-height: 20px;
  color: #94A3B8;
}

.step-1,
.step-2 {
  display: flex;
  flex-direction: column;
}

.sign-in {
  width: 100%;
  height: 40px;
  background-color: #006B57;
  border-radius: 100px;
  border: 0px;
  color: #FFFFFF;
  margin-top: 14px;
  font-weight: 500;
  cursor: pointer;
}

.sign-in:hover {
  filter: brightness(0.95);
}

/* Step indicator */
.step-indicator {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.active-step {
  width: 160px;
  height: 6px;
  border-radius: 6px;
  background-color: #006B57;
}

.nonactive-step {
  width: 160px;
  height: 6px;
  border-radius: 6px;
  background-color: #C1FFD5;
}

/* Link mbrapa te register normal */
.back-normal {
  margin-top: 10px;
  font-size: 13px;
  color: #64748B;
  text-align: center;
}

.back-normal a {
  color: #006D41;
  text-decoration: none;
  font-weight: 500;
}

.back-normal a:hover {
  text-decoration: underline;
}

/* NPI preview card */
.npi-preview-card {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #C1FFD5;
  background-color: #FAFFFD;
  padding: 10px 12px;
  margin: 8px 0 16px 0;
  text-align: left;
  box-sizing: border-box;
}

.npi-name {
  font-weight: 700;
  color: #006D41;
  margin-bottom: 4px;
}

.npi-line {
  font-size: 13px;
  color: #1F2933;
}

/* Sidebar djathtas – si tek register */
.sidebar {
  width: 30%;
  height: 100vh;
  background-color: #DBE5DF;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.sidebar h1 {
  font-size: 32px;
  font-weight: 400;
  color: #191C20;
  text-align: center;
  line-height: 40px;
}

.sidebar p {
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  color: #191C20;
}

.locum-sign-up {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sign-up {
  width: 97px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid #73777F;
  color: #006B57;
  font-size: 14px;
  font-weight: 500;
  background-color: transparent;
  cursor: pointer;
}

.sign-up a {
  display: block;
  width: 100%;
  height: 100%;
  color: #006B57;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  line-height: 35px;
}

.policy-terms {
  width: 308px;
  height: 22px;
  gap: 24px;
  display: flex;
  justify-content: center;
  padding-top: 24px;
  line-height: 21.6px;
}

.policy-terms a {
  color: #006B57;
  text-decoration: none;
  font-weight: 400;
  font-size: 18px;
}

/* ================== TABLET ================== */

@media only screen and (min-width: 768px) and (max-width: 1024px) {  
  .main-join{
    flex-direction: column;
    height: auto;
    padding: 32px 0;
  }

  .main-join-content{
    width: 100%;
    height: auto;
  }

  .sidebar {
      width: 100%;
      height: auto;
      background-color: #FAFFFD;
      justify-content: space-around;
      padding: 24px 0 32px;
  }

  .sidebar img, .sidebar h1 {
      display: none;
  }
}

/* ================== MOBILE ================== */

@media only screen and (max-width: 767px) {
  .main-join{
    width: 100%;
    flex-direction: column;
    height: auto;
    padding: 24px 0 32px;
  }

  .main-join-content{
    width: 100%;
    height: auto;
  }

  .main-join-content img{
    width: 53.84px;
    height: 60px;
    margin-bottom: 18px;
  }

  .form-content {
    width: 92%;
    padding: 22px 18px 20px;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  }

  .sidebar {
      width: 100%;
      height: auto;
      background-color: #FAFFFD;
      justify-content: space-around;
      padding: 24px 0 32px;
  }

  .sidebar img, .sidebar h1 {
      display: none;
  }

  .sidebar p {
      font-weight: 500;
      margin-top: 0;
  }
}