/* ============================================================
   Auth Base — Shared styles for SSQ authentication pages
   (Landing Page, Reset Password, Auth Required, etc.)
   Loaded AFTER SSQ_AdminTokens.css, BEFORE page-specific CSS.
   ============================================================ */

/* --- Body gradient background --- */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--ssq-admin-bg-gradient-start) 0%, var(--ssq-admin-bg-gradient-end) 100%);
    text-align: center;
    font-family: var(--ssq-admin-font);
}

/* --- Pulse animation (logo breathing) --- */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.pulse {
    animation: pulse 4s infinite;
}

/* --- Main logo (shared properties; max-width set per page) --- */
.main-logo {
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
}

/* --- Fade-out animation --- */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-out {
    animation: fadeOut 1s ease-in-out forwards;
}

/* --- Password field toggle (eye icon) --- */
.password-container {
    position: relative;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: var(--ssq-admin-space-3);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--ssq-admin-text-muted);
    font-size: 18px;
    user-select: none;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.8);
    padding: var(--ssq-admin-space-1);
    border-radius: 3px;
}

.password-toggle:hover {
    color: var(--ssq-admin-purple);
}

.password-container input[type="password"],
.password-container input[type="text"] {
    padding-right: 45px;
}