*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:var(--lv-font-body);
}

body{

  min-height:100vh;

  display:flex;

  flex-direction:column;

  background:linear-gradient(135deg,var(--lv-green-deep),#1DAE6B);

}

.login-page{

  flex:1;

  display:flex;

}

.left-panel{

  flex:1;

  color:white;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:70px;

}

.logo{

  width:180px;

  margin-bottom:40px;

}

.left-panel h1{

  font-size:55px;

  margin-bottom:20px;

}

.left-panel p{

  font-size:22px;

  margin-bottom:12px;

}

.small{

  margin-top:25px;

  font-size:17px;

  opacity:.9;

}

.right-panel{

  flex:1;

  display:flex;

  justify-content:center;

  align-items:center;

}

.login-card{

  width:450px;

  background:white;

  padding:45px;

  border-radius:18px;

  box-shadow:0 20px 50px rgba(0,0,0,.2);

}

.login-card h2{

  text-align:center;

  margin-bottom:30px;

  font-size:38px;

}

.login-card input{

  width:100%;

  padding:16px;

  margin-bottom:20px;

  border:1px solid #ddd;

  border-radius:10px;

  font-size:16px;

}

/* Color comes from lesovia.css's .btn-primary/.btn-secondary; this file
   only adds the sizing specific to the login/register card. */
.btn-primary{
  width:100%;
  padding:16px;
  border-radius:10px;
  font-size:18px;
  font-weight:bold;
  justify-content:center;
}

.btn-secondary{
  margin-top:15px;
  width:100%;
  padding:15px;
  border-radius:10px;
  justify-content:center;
}

.login-card p{

  margin-top:25px;

  text-align:center;

}

.login-card a{

  color:var(--lv-green);

  text-decoration:none;

  font-weight:bold;

}

footer{

  background:#1f2937;

  color:white;

  padding:12px 20px;

  text-align:center;

}

footer a{

  color:white;

  text-decoration:none;

  margin:0 12px;

  font-size:15px;

}

footer p{

  margin-top:8px;

  margin-bottom:0;

  font-size:14px;

}

@media(max-width:900px){

  .login-page{
  
      flex-direction:column;
  
  }
  
  .left-panel{
  
      text-align:center;
  
      padding:40px;
  
  }
  
  .left-panel h1{
  
      font-size:38px;
  
  }
  
  .logo{
  
      width:120px;
  
      margin:auto;
      margin-bottom:20px;
  
  }
  
  .login-card{
  
      width:92%;
  
      margin:30px auto;
  
  }
  
  footer a{
  
      display:block;
  
      margin:10px;
  
  }
  
  }

  .btn{

    height:58px;
    
    font-size:20px;
    
    border-radius:14px;
    
    font-weight:700;
    
    }

    @media(max-width:900px){

      .container{
      
          flex-direction:column;
      
          text-align:center;
      
          padding:40px 25px;
      
      }
      
      .left{
      
          align-items:center;
      
      }
      
      .right{
      
          width:100%;
      
      }

      .register-card{
        width:460px;
        padding:50px;
        border-radius:20px;
        box-shadow:0 20px 40px rgba(0,0,0,.15);
    }
    .right{
      flex:1;
      display:flex;
      justify-content:center;
      align-items:center;
  }

     .left{
      flex:1;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .container{
      display:flex;
      justify-content:space-between;
      align-items:center;   /* <-- this is the important part */
      min-height:calc(100vh - 90px); /* leave room for footer */
      max-width:1400px;
      margin:auto;
      padding:60px;
      gap:80px;
    }
      }

/* ================= PHONES (iPhone and similar) ================= */
@media (max-width:600px){

  body{ font-size:17px; }

  .right-panel{ align-items:flex-start; width:100%; flex:none; }

  /* register.html wraps the card in .container (60px padding, 80px gap) */
  .container{
    display:block;
    padding:16px 0;
    gap:0;
    min-height:0;
  }

  .login-card label{ display:block; text-align:left; margin-bottom:6px; font-weight:600; }

  .login-card{
    width:calc(100% - 24px);
    margin:16px auto 24px;
    padding:24px 18px;
    border-radius:16px;
  }

  .login-card h2{
    font-size:32px;
    margin-bottom:20px;
  }

  .login-card label{ font-size:17px; }

  .login-card input,
  .login-card select{
    width:100%;
    min-height:54px;
    padding:14px;
    font-size:17px;
    margin-bottom:16px;
  }

  .login-card p{ font-size:17px; line-height:1.45; }

  /* login.css sets a fixed 58px height on .btn; long labels such as
     "Can't use your email? Reset your password with your phone" need to wrap */
  .btn,
  .btn-primary,
  .btn-secondary{
    height:auto;
    min-height:56px;
    padding:14px 16px;
    font-size:18px;
    line-height:1.3;
    text-align:center;
  }

  #phoneRecoveryForm p,
  #loginNotice,
  #phoneRecoveryMessage{ font-size:16px !important; }

  footer a{ padding:8px 0; font-size:17px; }
}

/* ================= HEADER + PAGE FRAME (login and register) =================
   A header with the Lesovia name and links, like the homepage, and a main area
   that grows to fill the screen so the footer always sits at the very bottom. */
.auth-nav {
  background: var(--lv-ink, #14231B);
  padding: 14px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.auth-logo { display: flex; align-items: center; text-decoration: none; }
.auth-logo img { width: 42px; height: 42px; object-fit: contain; margin-right: 10px; }

.auth-links { display: flex; align-items: center; gap: 18px; }
.auth-links a { color: #fff; text-decoration: none; font-weight: 500; }

.auth-links .auth-login {
  background: var(--lv-green);
  padding: 10px 18px;
  border-radius: var(--lv-radius-sm, 8px);
}

.auth-links .auth-register {
  border: 1px solid var(--lv-green-mist, #E8F5EC);
  padding: 9px 18px;
  border-radius: var(--lv-radius-sm, 8px);
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
}

.auth-main .right-panel { flex: 1; }

body > footer.site-footer { margin-top: 0; }

@media (max-width: 600px) {
  .auth-nav { flex-direction: column; gap: 10px; padding: 12px 16px; }
  .auth-links { gap: 12px; }
  .auth-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 17px; }
  .auth-main { align-items: flex-start; padding: 20px 0; }
}