.login-container {
   width: 100%;
   min-height: calc(100vh - 200px);
   padding: 20px;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}


.login-card {
   width: 450px;
   text-align: center;
}

.login-card h2 {
   font-size: 1.8rem;
   font-family: 'Anta';
   margin-bottom: 10px;
   background: linear-gradient(135deg, var(--mark-span-color1), var(--mark-span-color2));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.login-card p {
   font-family: 'Saira';
   color: var(--text-muted);
   margin-bottom: 30px;
}

.login-card .form-group {
   text-align: left;
}

.login-card .btn {
   width: 100%;
   height: 50px;
   margin-top: 10px;
   font-size: 1.1rem;
}


.login-card .form-control {
   height: 50px;
}


/* ── Password Toggle Button ───────────────────────────────── */
.password-input-wrapper {
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
}

.password-input-wrapper .form-control {
   padding-right: 48px;
}

.password-toggle-btn {
   position: absolute;
   right: 12px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
   transition: color 0.25s ease, transform 0.2s ease;
   border-radius: 6px;
}

.password-toggle-btn:hover {
   color: var(--mark-span-color1);
   transform: scale(1.1);
}

.password-toggle-btn svg {
   width: 20px;
   height: 20px;
   fill: currentColor;
}


@media (max-width: 562px) {
   .login-card {
      width: 400px;
   }

   .login-card .glass-card,
   .glass-card.login-card {
      padding: 30px 20px;
   }
}


@media (max-width: 420px) {
   .login-card {
      width: 350px;
   }
}


/* ── 2FA Card (initially hidden) ─────────────────────────── */
#twoFaCard {
   display: none;
}

/* ── OTP Code Input ───────────────────────────────────────── */
#code.form-control {
   text-align: center;
   font-size: 24px;
   letter-spacing: 5px;
}

/* ── Back to Login Button ─────────────────────────────────── */
#backToLogin {
   margin-top: 15px;
   width: 100%;
}

/* ── Eye icon toggle (hidden by default) ─────────────────── */
#eye-open {
   display: none;
}