@media (min-width: 781px) {
.registerArea {
  min-height: 500px;        /* <-- expands to all available vertical space */
  margin-left: 20px;
  padding-bottom: 40px;
}

.signinButton {
  background: #f9ecbb;
  font-family: inherit;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0.6em 1.3em;
  font-weight: 900;
  font-size: 18px;
  border: 3px solid black;
  border-radius: 0.4em;
  box-shadow: 0.1em 0.1em;
  cursor: pointer;
  display: flex;             /* ← makes elements align horizontally */
  align-items: center;       /* ← vertically centers text & icon */
  gap: 10px;                 /* ← space between text and icon */
  width: fit-content;
  height: 50px;
  align-self: flex-start;
}

.signinButton:hover {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em;
}

.signinButton:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em;
}


.googleIcon {
  width: 29px;
}
.emailAuthArea{
  margin-top:30px;
  max-width:420px;
}

/* ── Form layout ── */
.emailAuthArea {
  max-width: 420px;
  background: white;
  border-radius: 24px;
}

.authTabs {
  display: flex;
  width: 100%;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 60px;
  margin-bottom: 28px;
}

.authTab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.2px;
}

.authTab.active {
  color: white;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.authTab:not(.active):hover {
  color: #0f172a;
  background: rgba(79, 70, 229, 0.08);
}

.authForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.authForm input {
  padding: 14px 16px; 
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  font-size: 15px;
  transition: all 0.2s ease;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
}

.authForm input:hover {
  background: white;
  border-color: #cbd5e1;
}

.authForm input:focus {
  border-color: #4f46e5;
  background: white;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.authForm input::placeholder {
  color: #94a3b8;
  font-weight: 400;
  opacity: 0.8;
}

.authDivider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  font-size:19px;
  color:#777;
  max-width:420px;
}

.authDivider::before,
.authDivider::after{
  content:"";
  flex:1;
  height:1px;
  background:#ccc;
}

  .authTabs {
    display: flex;
    max-width: 420px;
    background: #f0ede8;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
  }

  .authTab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #7a7065;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .authTab:hover:not(.active) {
    background: #e8e4de;
    color: #3d3730;
  }

  .authTab.active {
    background: #ffffff;
    color: #1f1a15;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  }
  .forgotHidden{
    display:none;
  }
  .forgotPasswordArea{
    display:flex;
    font-size: 16px;
    font-family: "Maven pro";
  }
  #forgotPasswordForm {
    margin-top: 15px;
  }
  .forgotPasswordBtn{
    background:none;
    border:none;
    font:inherit;
    cursor:pointer;
    font-weight: bold;
    color: #31b717;
  }
  .forgotPasswordBtn:hover {
    text-decoration: underline;
  }

.disabledInput {
  opacity: 0.5;
  cursor: not-allowed;
}
  .disabledBtn{
    opacity:0.5;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
    user-select: none;
        border: white;
    outline: none;
  }
  .disabledBtn:hover {
    transform: translate(-0.00em, -0.00em);
    box-shadow: 0.0em 0.0em;

  }
  .authHidden{
    display:none;
  }
  .forgotHidden {
    display: none;
  }

}











@media (max-width: 780px) {

.registerArea {
  min-height: 500px;        /* <-- expands to all available vertical space */
  margin-left: 20px;
  padding-bottom: 40px;
}

.signinButton {
  background: #f9ecbb;
  font-family: inherit;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 5px 10px;
  font-weight: 900;
  font-size: 18px;
  border: 3px solid black;
  border-radius: 0.4em;
  box-shadow: 0.1em 0.1em;
  cursor: pointer;
  display: flex;             /* ← makes elements align horizontally */
  align-items: center;       /* ← vertically centers text & icon */
  gap: 10px;                 /* ← space between text and icon */
  width: fit-content;
  height: 50px;
  align-self: flex-start;
}

.signinButton:hover {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em;
}

.signinButton:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em;
}


.googleIcon {
  width: 29px;
}

/* ── Form layout ── */
.emailAuthArea {
  max-width: 320px;
  background: white;
  border-radius: 14px;
}

.authTabs {
  display: flex;
  width: 100%;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 60px;
  margin-bottom: 28px;
}

.authTab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.2px;
}

.authTab.active {
  color: white;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.authTab:not(.active):hover {
  color: #0f172a;
  background: rgba(79, 70, 229, 0.08);
}

.authForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.authForm input {
  padding: 14px 16px; 
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  font-size: 15px;
  transition: all 0.2s ease;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
}

.authForm input:hover {
  background: white;
  border-color: #cbd5e1;
}

.authForm input:focus {
  border-color: #4f46e5;
  background: white;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.authForm input::placeholder {
  color: #64748b;
  font-weight: 400;
  opacity: 1;
}

.authDivider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 8px 30px 8px;
  font-size:19px;
  color:#777;
  max-width:420px;

}

.authDivider::before,
.authDivider::after{
  content:"";
  flex:1;
  height:1px;
  background:#ccc;
}

  .authTabs {
    display: flex;
    max-width: 420px;
    background: #f0ede8;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
  }

  .authTab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #7a7065;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .authTab:hover:not(.active) {
    background: #e8e4de;
    color: #3d3730;
  }

  .authTab.active {
    background: #ffffff;
    color: #1f1a15;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  }

    .forgotHidden{
    display:none;
  }
  .forgotPasswordArea{
    display:flex;
    font-size: 15px;
    font-family: "Maven pro";
  }
  #forgotPasswordForm {
    margin-top: 13px;
  }
  .forgotPasswordBtn{
    background:none;
    border:none;
    font:inherit;
    cursor:pointer;
    font-weight: bold;
    color: #31b717;
  }

.disabledInput {
  opacity: 0.5;
  cursor: not-allowed;
}
  .disabledBtn{
    opacity:0.5;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
    user-select: none;
        border: white;
    outline: none;
  }
  .disabledBtn:hover {
    transform: translate(-0.00em, -0.00em);
    box-shadow: 0.0em 0.0em;

  }
  .authHidden{
    display:none;
  }
  .forgotHidden {
    display: none;
  }
}