/* css/auth.css */

/* 1. Center the form on the screen */
main {
    flex-grow: 1; /* Takes up all available vertical space */
    display: flex;
    align-items: center; /* Vertical Center */
    justify-content: center; /* Horizontal Center */
    padding: 20px;
}

/* 2. The Login Card Dimensions */
.auth-card {
    width: 100%;
    max-width: 400px; /* Stops it from being too wide on PC screens */
    padding: 40px 30px;
    text-align: center;
}

/* 3. The Logo/Title Area */
.logo-area {
    margin-bottom: 30px;
}
.logo-area h1 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 5px;
}
.logo-area p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* 4. Input Fields (The "Soft" Input) */
input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 15px; /* Space between inputs */
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    border: 1px solid transparent; /* No border initially */
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.2s;
}

/* Highlight the input when the user clicks it */
input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
}

/* 5. The Google Button (Different from Primary) */
.btn-google {
    background: white;
    color: var(--text-dark);
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between G logo and text */
    border: 1px solid #e5e7eb; /* Light grey border */
}

/* 6. Links (Forgot Password / Sign Up) */
.auth-links {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-light);
}
.auth-links a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

/* css/auth.css - Add this at the bottom */

/* Container to hold input + eye */
.password-wrapper {
    position: relative; /* Allows us to position the eye inside */
    width: 100%;
}

/* The Eye Button */
.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 35%; /* Center it vertically relative to input height */
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 0;
    display: flex;
    align-items: center;
}

.password-toggle-btn:hover {
    color: var(--primary);
}