/* ============================================================================
   BSN Merchant Bank Bhd - Guest pages (login, forgot/reset password)
   ============================================================================ */

.guest-body {
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, #001F3F 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.guest-shell {
    width: 100%;
    max-width: 460px;
}

.guest-brand {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}
.guest-logo {
    height: 64px; width: auto; max-width: 100%;
    background: #fff; padding: 14px 24px; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.guest-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px 28px;
}

.guest-card h2 { font-size: 1.4rem; margin-bottom: 6px; }
.guest-card .subtitle { color: var(--color-text-muted); margin-bottom: 24px; }

.guest-links { text-align: center; margin-top: 18px; font-size: 0.9rem; color: var(--color-text-muted); }
.guest-links a { font-weight: 600; }

.guest-fineprint { text-align: center; color: rgba(255,255,255,0.75); font-size: 0.78rem; margin-top: 20px; }

.demo-hint {
    background: var(--color-primary-light); border: 1px dashed var(--color-primary);
    border-radius: var(--radius-md); padding: 12px 14px; font-size: 0.82rem;
    color: var(--color-primary-dark); margin-bottom: 20px;
}
.demo-hint strong { display: block; margin-bottom: 4px; }

.password-strength { height: 4px; border-radius: 2px; background: var(--color-border); margin-top: 8px; overflow: hidden; }
.password-strength-bar { height: 100%; width: 0; background: var(--color-accent); transition: width 0.2s ease, background-color 0.2s ease; }

@media (min-width: 480px) {
    .guest-card { padding: 40px 36px; }
    .guest-logo { height: 80px; }
}

@media (min-width: 768px) {
    .guest-logo { height: 96px; }
}

/* ---- Login loading overlay ---------------------------------------------------- */
.loading-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.92);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.loading-overlay.visible { display: flex; }
.loading-overlay p { margin: 0; color: var(--color-text-muted); font-weight: 600; }
.spinner {
    width: 56px; height: 56px;
    border: 5px solid var(--color-primary-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}
@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}