/* ========== Double-slider auth (no React) ========== */
:root{
  --grad1:#36d1dc;
  --grad2:#5b86e5;
}

.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0px;
  background:#f6f7fb;
}

/* container */
.container-auth{
  background:#fff;
  border-radius:20px;
  box-shadow:0 18px 60px rgba(16,24,40,.15);
  position:relative;
  overflow:hidden;
  width:min(980px, 100%);
  max-width:100%;
  min-height:560px;
}

/* form containers */
.form-container{
  position:absolute;
  top:0;
  height:100%;
  transition:all 0.6s ease-in-out;
}

/* sign in default left */
.sign-in-container{
  left:0;
  width:50%;
  z-index:2;
}

/* sign up hidden by default */
.sign-up-container{
  left:0;
  width:50%;
  opacity:0;
  z-index:1;
}

/* when active: slide sign-in out, show sign-up */
.container-auth.right-panel-active .sign-in-container{
  transform:translateX(100%);
}
.container-auth.right-panel-active .sign-up-container{
  transform:translateX(100%);
  opacity:1;
  z-index:5;
  animation:show 0.6s;
}

@keyframes show{
  0%,49.99%{ opacity:0; z-index:1; }
  50%,100%{ opacity:1; z-index:5; }
}

/* overlay */
.overlay-container{
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  overflow:hidden;
  transition:transform 0.6s ease-in-out;
  z-index:100;
}

.container-auth.right-panel-active .overlay-container{
  transform:translateX(-100%);
}

.overlay{
  background:linear-gradient(90deg,var(--grad1),var(--grad2));
  background-repeat:no-repeat;
  background-size:cover;
  color:#fff;
  position:relative;
  left:-100%;
  height:100%;
  width:200%;
  transform:translateX(0);
  transition:transform 0.6s ease-in-out;
}

.container-auth.right-panel-active .overlay{
  transform:translateX(50%);
}

.overlay-panel{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  top:0;
  height:100%;
  width:50%;
  padding:0 44px;
  transform:translateX(0);
  transition:transform 0.6s ease-in-out;
}

.overlay-left{
  transform:translateX(-20%);
}
.container-auth.right-panel-active .overlay-left{
  transform:translateX(0);
}

.overlay-right{
  right:0;
  transform:translateX(0);
}
.container-auth.right-panel-active .overlay-right{
  transform:translateX(20%);
}

/* typography + inputs */
.auth-form{
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0 48px;
  text-align:center;
}

.auth-form h2{ margin:0 0 10px; font-size:28px; }
.auth-form p{ margin:0 0 18px; color:#667085; font-size:14px; }

.auth-form input{
  background:#f2f4f7;
  border:1px solid transparent;
  border-radius:12px;
  padding:12px 14px;
  margin:8px 0;
  width:min(360px, 100%);
  outline:none;
}
.auth-form input:focus{
  border-color:#a4bcfd;
  box-shadow:0 0 0 4px rgba(164,188,253,.35);
  background:#fff;
}

/* buttons */
.auth-btn{
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  padding:12px 18px;
  margin-top:14px;
  cursor:pointer;
}

.auth-btn.primary{
  color:#fff;
  background:linear-gradient(90deg,var(--grad1),var(--grad2));
}

.auth-btn.ghost{
  background:transparent;
  border-color:rgba(255,255,255,.65);
  color:#fff;
}

/* mobile */
@media (max-width: 860px){
  .container-auth{
    min-height:auto;
    border-radius:18px;
  }
  .overlay-container{ display:none; }
  .sign-in-container, .sign-up-container{
    position:relative;
    width:100%;
    transform:none !important;
    opacity:1 !important;
  }
  .sign-up-container{ display:none; }
  .container-auth.right-panel-active .sign-in-container{ display:none; }
  .container-auth.right-panel-active .sign-up-container{ display:block; }
}