/* login-page.css - Redesigned to match GrowPlants Global Theme */

/* Note: This file relies on style.css being loaded FIRST for fonts and global resets if available.
   However, we will include necessary resets here to be safe and specific styles for the auth pages. */

body {
    background-color: #f8f9f4;
    /* Matches global background */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Reset from previous flex center alignment on body */
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    margin: 0;
}

/* Main Content Area Wrapper */
.auth-main {
    flex: 1;
    /* Pushes footer down */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background-image: radial-gradient(#e8f5e9 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Auth Card Styling */
.auth-card {
    background: white;
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* Soft, professional shadow */
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.03);
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-card h2 {
    color: #064E3B;
    /* Global primary green */
    margin-bottom: 25px;
    font-size: 28px;
    font-weight: 700;
}

/* Form Group */
.form-group {
    text-align: left;
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #4a5568;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

/* Inputs */
.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    color: #2d3748;
    transition: all 0.3s ease;
    background: #f7fafc;
}

.form-group input:focus {
    border-color: #064E3B;
    box-shadow: 0 0 0 3px rgba(6, 78, 59, 0.1);
    background: white;
    outline: none;
}

/* Password Toggle */
.input-with-icon {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #a0aec0;
    transition: color 0.3s;
}

.toggle-password:hover {
    color: #064E3B;
}

/* Primary Button */
#loginBtn,
#signupBtn {
    width: 100%;
    padding: 14px;
    background: #064E3B;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 10px;
}

#loginBtn:hover,
#signupBtn:hover {
    background: #053c2e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 78, 59, 0.2);
}

#loginBtn:active,
#signupBtn:active {
    transform: translateY(0);
}

#loginBtn:disabled,
#signupBtn:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 25px 0;
    color: #a0aec0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}

.divider span {
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
}

/* Google Button */
.google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    color: #4a5568;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    gap: 12px;
}

.google-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e0;
}

/* Links */
.auth-card p {
    margin-top: 25px;
    font-size: 14px;
    color: #718096;
}

.auth-card a {
    color: #064E3B;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-card a:hover {
    color: #4caf50;
    text-decoration: underline;
}

/* Popup Message (Success/Error) */
.popup {
    display: none;
    position: fixed;
    top: 90px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease-out;
    max-width: 300px;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.popup.success {
    background-color: #4caf50;
}

.popup.error {
    background-color: #e53e3e;
}

/* Container class reuse override from prev css if needed, 
   but we use .auth-card now. Keeping .container for safety if needed */
.container {
    width: 100%;
    /* For internal layout */
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* Media Query for Mobile */
@media (max-width: 480px) {
    .auth-card {
        padding: 30px 20px;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .auth-main {
        padding: 20px;
        background: white;
        align-items: flex-start;
    }

    body {
        background: white;
    }
}