/* loginn.css - Soft Pink, White & Black Theme */
:root{
  --bg-pink:#ffc9d4;              /* soft pink background */
  --bg-light-pink:#ffe5ec;        /* lighter pink */
  --card:#ffffffee;               /* white translucent card */
  --radius:22px;
  --shadow:0 12px 30px rgba(255,192,203,.35), inset 0 0 0 1px rgba(255,255,255,.5);
  --text:#2a2a2a;                 /* dark text */
  --muted:#7a7a7a;                /* muted gray */
  --accent:#1a1a1a;               /* black login button */
  --pink-accent:#ff9bb5;          /* pink accent for hover */
  --border-pink:#ffd1dc;          /* soft pink border */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg, #ffc9d4 0%, #ffe5ec 50%, #fff0f3 100%) fixed;
}

.page{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:32px;
}

.card{
  width:min(100%, 980px);
  background:rgba(255,255,255,.25);
  border-radius:calc(var(--radius) + 6px);
  padding:18px;
  box-shadow:0 20px 50px rgba(255,192,203,.4);
  backdrop-filter:blur(12px);
}

.card{
  display:grid;
  grid-template-columns: 1.05fr 1fr; /* left wider */
  gap:18px;
}

.left,.right{
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
}

.left{ 
  padding:28px 28px 24px; 
  display:flex; 
  flex-direction:column; 
  justify-content:flex-start;
}

.brand{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  margin-bottom:14px;
  justify-content: center;
}

.brand-logo{
  height:180px;
  width:auto;
  max-width:100%;
  display:block;
}

.brand-icon{ font-size:22px }
.brand-name{ font-weight:600; letter-spacing:2px; font-size:22px; color:var(--text) }

.form{ 
  display:flex; 
  flex-direction:column; 
  gap:14px;
}

.input{ 
  display:flex; 
  flex-direction:column; 
  gap:6px;
}

.input span{ 
  font-size:12px; 
  color:var(--muted);
  font-weight:500;
}

.input input{
  height:44px;
  border-radius:10px;
  border:1px solid var(--border-pink);
  padding:0 14px;
  background:#fff;
  outline:none;
  transition:border .2s, box-shadow .2s;
  font-size:14px;
}

.input input:focus{ 
  border-color:var(--pink-accent); 
  box-shadow:0 0 0 4px rgba(255,155,181,.15);
}

.row{ display:flex; gap:10px; align-items:center }
.between{ justify-content:flex-end }

.link{ 
  color:#ff6b9d; 
  text-decoration:none; 
  font-weight:500;
  transition: color 0.2s;
}

.link:hover{
  color:#ff4081;
}

.link.small{ 
  font-size:12px; 
  color:#8a8a8a;
}

.link.small:hover{
  color:#ff6b9d;
}

.btn{
  height:48px;
  padding:0 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition: all 0.3s;
  font-size:15px;
}

.primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.primary:hover{ 
  background:#2a2a2a;
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}

.new-user{
  display:flex; 
  gap:8px; 
  align-items:center; 
  font-size:14px;
  justify-content:center; 
  margin-top:2px; 
  color:#666;
}

.divider{
  display:grid; 
  grid-template-columns:1fr auto 1fr; 
  align-items:center; 
  gap:12px;
  color:#888; 
  font-size:12px; 
  margin-top:6px;
}

.divider::before,.divider::after{
  content:""; 
  height:1px; 
  background:var(--border-pink);
}

.social-btn.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  background-color: #fff;
  color: #444;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  text-decoration: none;
}

.social-btn.google:hover {
  background-color: #f7f7f7;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

.social-btn.google svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.right{
  display:block; 
  overflow:hidden; 
  padding:0;
}

.right img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Flash messages */
.flash{ 
  margin-top:6px;
}

.msg{ 
  margin:6px 0; 
  font-size:13px;
  padding:10px;
  border-radius:8px;
  background:#ffe8e8;
  border:1px solid #ffcccc;
}

.msg.error{ 
  color:#b42318;
}

.msg.success{ 
  color:#177245;
  background:#e8f5e9;
  border:1px solid #c8e6c9;
}

/* Responsive */
@media (max-width: 900px){
  .card{ 
    grid-template-columns:1fr;
  }
  .right{ 
    order:-1; 
    height:300px;
  }
}

@media (max-width: 480px){
  .brand-logo{ 
    height:140px;
  }
  .page{
    padding:20px;
  }
  .card{
    padding:12px;
  }
  .left{
    padding:20px;
  }
}