/**
 * auth.css
 * Styles specific to the login/register page (auth.php).
 * Layout, Google button glow, alert animations.
 */

/* Fixed cover image on large screens */
.auth-cover-image {
    z-index: 0;
}

.auth-content-area {
    z-index: 1;
}

@media (min-width: 992px) {
    .auth-cover-image {
        width: calc(100% - 500px);
    }
    .auth-content-area {
        width: 500px;
        max-width: 500px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1200px) {
    .auth-cover-image {
        width: calc(100% - 550px);
    }
    .auth-content-area {
        width: 550px;
        max-width: 550px;
    }
}

@media (min-width: 1400px) {
    .auth-cover-image {
        width: 55%;
    }
    .auth-content-area {
        width: 45%;
        max-width: 45%;
    }
}

/* Google button glow effect */
#google-login-btn {
    position: relative;
    transition: box-shadow 0.4s ease;
    overflow: visible;
    background: #fff;
}

#google-login-btn .google-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

#google-login-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #4285F4,
        #EA4335,
        #FBBC05,
        #34A853,
        #4285F4
    );
    background-size: 300% 100%;
    opacity: 0;
    z-index: -1;
    filter: blur(3px);
    transition: opacity 0.4s ease;
}

#google-login-btn:hover::before {
    opacity: 0.25;
    animation: googleGlow 6s linear infinite;
}

@keyframes googleGlow {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* Alert animation */
.alert-animated {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease, padding 0.3s ease;
}

.alert-animated.alert-show {
    opacity: 1;
    max-height: 150px;
    margin-bottom: 1.5rem !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transform: translateY(0);
}