.login-page{
  height: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 15px 12px;
}

.login-card{
  width: 100%;
  max-width: 400px;              /* ✅ pa depase 300px */
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:15px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.login-title{
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color:#111827;
}

.login-form{ display:block; }

.login-field{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  background:#fff;
  margin-bottom: 10px;
  transition: .15s ease;
}

.login-field:focus-within{
  border-color:#111827;
  box-shadow: 0 0 0 4px rgba(17,24,39,.08);
}

.login-icon{
  font-size: 14px;
  opacity: .75;
  width: 15px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-field input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:14px;
  color:#111827;
}

/* ✅ Show/Hide button (detache, menm font) */
.pass-field{
  padding-right: 44px; /* espas pou bouton je a */
}

.pass-toggle{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background:#f9fafb;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 15px;     /* ✅ menm santiman ak input */
  line-height: 1;
  color:#111827;

  transition: .15s ease;
}

.pass-toggle:hover{
  background:#f3f4f6;
  transform: translateY(-50%) scale(1.03);
}

.pass-toggle:active{
  transform: translateY(-50%) scale(.98);
}

.login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: 6px 0 12px;
  font-size: 12px;
  color:#6b7280;
}

.login-check{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.login-check input{ width:16px; height:16px; }

.login-forgot{
  text-decoration:none;
  font-weight:700;
  color:#111827;
}
.login-forgot:hover{ text-decoration: underline; }

.login-btn{
  width:100%;
  border:none;
  padding: 12px;
  border-radius: 12px;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color:#111827;
  transition:.15s ease;
}
.login-btn:hover{ filter:brightness(.96); transform: translateY(-1px); }
.login-btn:active{ transform: translateY(0); }

.login-msg-wrap{ margin-top: 10px; }
.login-msg{
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #fee2e2;
  background: #fef2f2;
  color: #991b1b;
}
.login-msg.is-success{
  border-color:#86efac;
  background:#dcfce7;
  color:#166534;
}

/* ✅ Mobile: fè li santi pi pre */
@media (max-width: 480px){
  .login-page{ height: auto; padding: 15px 12px; }
  .login-card{ max-width: 360px; padding: 15px; } /* li ka elaji sou mobile */
  .login-title{ font-size: 15px; }
}